btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: gql docs

Browse Source
This commit is contained in:
liyasthomas
2021-07-09 13:09:52 +05:30
parent c6490818d0
commit 1f0a3e97ae
15 changed files with 283 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/graphql/Type.vue
View File

@@ -1,55 +1,57 @@
<template>
<div :id="`type_${gqlType.name}`" class="p-2 m-2">
<div :id="`type_${gqlType.name}`" class="p-4">
<div
class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }"
class="font-bold text-xs type-title"
:class="{ 'text-accent': isHighlighted }"
>
<span v-if="isInput" class="text-accent">input </span>
<span v-else-if="isInterface" class="text-accent">interface </span>
<span v-else-if="isEnum" class="text-accent">enum </span>
{{ gqlType.name }}
</div>
<div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">
<div
v-if="gqlType.description"
class="py-2 text-xs text-secondaryLight type-desc"
>
{{ gqlType.description }}
</div>
<div v-if="interfaces.length > 0" class="mb-2">
<h5>{{ $t("interfaces") }}</h5>
<div
v-for="gqlInterface in interfaces"
:key="gqlInterface.name"
class="m-2 ml-4"
>
<div v-if="interfaces.length > 0">
<h5 class="my-2 text-xs">Interfaces:</h5>
<div v-for="gqlInterface in interfaces" :key="gqlInterface.name">
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
/>
</div>
</div>
<div v-if="children.length > 0" class="mb-2">
<h5>{{ $t("children") }}</h5>
<div v-for="child in children" :key="child.name" class="m-2 ml-4">
<GraphqlTypeLink
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
/>
</div>
<h5 class="my-2 text-xs">Children:</h5>
<GraphqlTypeLink
v-for="child in children"
:key="child.name"
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
/>
</div>
<div v-if="gqlType.getFields">
<h5>{{ $t("fields") }}</h5>
<div v-for="field in gqlType.getFields()" :key="field.name">
<GraphqlField
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
/>
</div>
<h5 class="my-2 text-xs">Fields:</h5>
<GraphqlField
v-for="field in gqlType.getFields()"
:key="field.name"
class="pl-4 border-l-2 border-divider"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
/>
</div>
<div v-if="isEnum">
<h5>{{ $t("values") }}</h5>
<h5 class="my-2 text-xs">Values:</h5>
<div
v-for="value in gqlType.getValues()"
:key="value.name"
class="m-4"
class="pl-4 border-l-2 border-divider"
v-text="value.name"
></div>
</div>