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

✨ Tabs

Browse Source
This commit is contained in:
Liyas Thomas
2020-03-07 18:40:37 +05:30
parent bc3bdb835e
commit 33f5474033
7 changed files with 632 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
pages/graphql.vue
View File

@@ -261,69 +261,31 @@
<aside class="sticky-inner inner-right">
<pw-section class="purple" :label="$t('docs')" ref="docs">
<section>
<input
v-if="queryFields.length > 0"
id="queries-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="queryFields.length > 0" for="queries-tab">
{{ $t("queries") }}
</label>
<div v-if="queryFields.length > 0" class="tab">
<div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
<tabs>
<tab v-if="queryFields.length > 0" :name="$t('queries')" :selected="true">
<div v-for="field in queryFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
<input
v-if="mutationFields.length > 0"
id="mutations-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="mutationFields.length > 0" for="mutations-tab">
{{ $t("mutations") }}
</label>
<div v-if="mutationFields.length > 0" class="tab">
<div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
<tab v-if="mutationFields.length > 0" :name="$t('mutations')">
<div v-for="field in mutationFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
<input
v-if="subscriptionFields.length > 0"
id="subscriptions-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="subscriptionFields.length > 0" for="subscriptions-tab">
{{ $t("subscriptions") }}
</label>
<div v-if="subscriptionFields.length > 0" class="tab">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
<tab v-if="subscriptionFields.length > 0" :name="$t('subscriptions')">
<div v-for="field in subscriptionFields" :key="field.name">
<gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
<input
v-if="gqlTypes.length > 0"
id="gqltypes-tab"
type="radio"
name="side"
checked="checked"
/>
<label v-if="gqlTypes.length > 0" for="gqltypes-tab">
{{ $t("types") }}
</label>
<div v-if="gqlTypes.length > 0" class="tab">
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div>
</div>
<tab v-if="gqlTypes.length > 0" :name="$t('types')">
<div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
<gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
</div>
</tab>
</tabs>
</section>
<p
@@ -374,6 +336,8 @@ export default {
autocomplete: () => import("../components/ui/autocomplete"),
Editor: AceEditor,
QueryEditor: QueryEditor,
tabs: () => import("../components/ui/tabs"),
tab: () => import("../components/ui/tab"),
},
data() {
return {