feat: introduce animations
This commit is contained in:
liyasthomas
@@ -340,129 +340,134 @@
|
||||
</AppSection>
|
||||
</div>
|
||||
|
||||
<aside v-if="activeSidebar" class="sticky-inner inner-right lg:max-w-md">
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection ref="docs" :label="$t('docs')" no-legend>
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
<TranslateSlideLeft>
|
||||
<aside
|
||||
v-if="activeSidebar"
|
||||
class="sticky-inner inner-right lg:max-w-md"
|
||||
>
|
||||
<SmartTabs>
|
||||
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
|
||||
<AppSection ref="docs" :label="$t('docs')" no-legend>
|
||||
<section class="flex-col">
|
||||
<input
|
||||
v-model="graphqlFieldsFilterText"
|
||||
type="text"
|
||||
:placeholder="$t('search')"
|
||||
class="rounded-t-lg"
|
||||
/>
|
||||
<SmartTabs ref="gqlTabs" styles="m-4">
|
||||
<div class="gqlTabs">
|
||||
<SmartTab
|
||||
v-if="queryFields.length > 0"
|
||||
:id="'queries'"
|
||||
:label="$t('queries')"
|
||||
:selected="true"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<div
|
||||
v-for="field in filteredQueryFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
<SmartTab
|
||||
v-if="mutationFields.length > 0"
|
||||
:id="'mutations'"
|
||||
:label="$t('mutations')"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<div
|
||||
v-for="field in filteredMutationFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
<SmartTab
|
||||
v-if="subscriptionFields.length > 0"
|
||||
:id="'subscriptions'"
|
||||
:label="$t('subscriptions')"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
<div
|
||||
v-for="field in filteredSubscriptionFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<GraphqlField
|
||||
:gql-field="field"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
<SmartTab
|
||||
v-if="graphqlTypes.length > 0"
|
||||
:id="'types'"
|
||||
ref="typesTab"
|
||||
:label="$t('types')"
|
||||
>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
class="info"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
<div
|
||||
v-for="type in filteredGraphqlTypes"
|
||||
:key="type.name"
|
||||
>
|
||||
<GraphqlType
|
||||
:gql-type="type"
|
||||
:gql-types="graphqlTypes"
|
||||
:is-highlighted="
|
||||
isGqlTypeHighlighted({ gqlType: type })
|
||||
"
|
||||
:highlighted-fields="
|
||||
getGqlTypeHighlightedFields({ gqlType: type })
|
||||
"
|
||||
:jump-type-callback="handleJumpToType"
|
||||
/>
|
||||
</div>
|
||||
</SmartTab>
|
||||
</div>
|
||||
</SmartTabs>
|
||||
</section>
|
||||
<p
|
||||
v-if="
|
||||
queryFields.length === 0 &&
|
||||
mutationFields.length === 0 &&
|
||||
subscriptionFields.length === 0 &&
|
||||
graphqlTypes.length === 0
|
||||
"
|
||||
class="info"
|
||||
>
|
||||
{{ $t("send_request_first") }}
|
||||
</p>
|
||||
</AppSection>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
<SmartTab :id="'history'" :label="$t('history')">
|
||||
<History
|
||||
ref="graphqlHistoryComponent"
|
||||
:page="'graphql'"
|
||||
@useHistory="handleUseHistory"
|
||||
/>
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
<SmartTab :id="'collections'" :label="$t('collections')">
|
||||
<CollectionsGraphql />
|
||||
</SmartTab>
|
||||
|
||||
<!-- <SmartTab :id="'env'" :label="$t('environments')">
|
||||
<!-- <SmartTab :id="'env'" :label="$t('environments')">
|
||||
<Environments @use-environment="useSelectedEnvironment($event)" />
|
||||
</SmartTab>
|
||||
|
||||
<SmartTab :id="'notes'" :label="$t('notes')">
|
||||
<HttpNotes />
|
||||
</SmartTab> -->
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</SmartTabs>
|
||||
</aside>
|
||||
</TranslateSlideLeft>
|
||||
|
||||
<SmartHideMenu
|
||||
:active="activeSidebar"
|
||||
|
||||
Reference in New Issue
Block a user