✨ Tabs
This commit is contained in:
Liyas Thomas
@@ -551,7 +551,6 @@ fieldset.yellow legend {
|
||||
|
||||
input[type="file"],
|
||||
input[type="radio"],
|
||||
.tab,
|
||||
.hide-on-large-screen,
|
||||
#installPWA,
|
||||
.hidden {
|
||||
@@ -827,33 +826,6 @@ section {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
input[type="radio"] + label {
|
||||
padding: 8px 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: var(--brd-color);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label {
|
||||
border-color: var(--fg-color);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + label + .tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.toasted-container .toasted {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
36
components/ui/tab.vue
Normal file
36
components/ui/tab.vue
Normal file
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div v-if="isActive">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
required: true,
|
||||
},
|
||||
selected: {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
}
|
||||
},
|
||||
|
||||
// computed: {
|
||||
// href() {
|
||||
// return `#${this.name.toLowerCase().replace(/ /g, "-")}`
|
||||
// },
|
||||
// },
|
||||
|
||||
mounted() {
|
||||
this.isActive = this.selected
|
||||
},
|
||||
}
|
||||
</script>
|
||||
84
components/ui/tabs.vue
Normal file
84
components/ui/tabs.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="tabs-wrapper">
|
||||
<div class="tabs">
|
||||
<ul>
|
||||
<li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
|
||||
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tabs-details">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tabs-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex-grow: 1;
|
||||
|
||||
.tabs {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
padding: 8px 16px;
|
||||
color: var(--fg-light-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active a {
|
||||
background-color: var(--brd-color);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
ul,
|
||||
ol {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.tabs = this.$children
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectTab({ name }) {
|
||||
this.tabs.forEach(tab => {
|
||||
tab.isActive = tab.name == name
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -262,9 +262,9 @@
|
||||
|
||||
<style scoped lang="scss">
|
||||
.collection,
|
||||
.doc-desc,
|
||||
.folder,
|
||||
.request,
|
||||
.doc-desc {
|
||||
.request {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
760
pages/index.vue
760
pages/index.vue
@@ -511,374 +511,370 @@
|
||||
</pw-section>
|
||||
|
||||
<section id="options">
|
||||
<input id="tab-one" type="radio" name="options" checked="checked" />
|
||||
<label for="tab-one">{{ $t("authentication") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<tabs>
|
||||
<tab :name="$t('authentication')" :selected="true">
|
||||
<pw-section class="cyan" :label="$t('authentication')" ref="authentication">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="auth">{{ $t("authentication") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('auth', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="select-wrapper">
|
||||
<select id="auth" v-model="auth">
|
||||
<option>None</option>
|
||||
<option>Basic Auth</option>
|
||||
<option>Bearer Token</option>
|
||||
<option>OAuth 2.0</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="auth === 'Basic Auth'">
|
||||
<li>
|
||||
<input placeholder="User" name="http_basic_user" v-model="httpUser" />
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
placeholder="Password"
|
||||
name="http_basic_passwd"
|
||||
:type="passwordFieldType"
|
||||
v-model="httpPassword"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('auth', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
id="switchVisibility"
|
||||
ref="switchVisibility"
|
||||
@click="switchVisibility"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
|
||||
<i class="material-icons" v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
|
||||
<button
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon"
|
||||
@click="showTokenList = !showTokenList"
|
||||
v-tooltip.bottom="$t('use_token')"
|
||||
>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
</button>
|
||||
<button
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon"
|
||||
@click="showTokenRequest = !showTokenRequest"
|
||||
v-tooltip.bottom="$t('get_token')"
|
||||
>
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="select-wrapper">
|
||||
<select id="auth" v-model="auth">
|
||||
<option>None</option>
|
||||
<option>Basic Auth</option>
|
||||
<option>Bearer Token</option>
|
||||
<option>OAuth 2.0</option>
|
||||
</select>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="auth === 'Basic Auth'">
|
||||
<li>
|
||||
<input placeholder="User" name="http_basic_user" v-model="httpUser" />
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
placeholder="Password"
|
||||
name="http_basic_passwd"
|
||||
:type="passwordFieldType"
|
||||
v-model="httpPassword"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
id="switchVisibility"
|
||||
ref="switchVisibility"
|
||||
@click="switchVisibility"
|
||||
>
|
||||
<i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
|
||||
<i class="material-icons" v-if="passwordFieldType !== 'text'"
|
||||
>visibility_off</i
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-wrap">
|
||||
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
|
||||
{{ $t("include_in_url") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</ul>
|
||||
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<input placeholder="Token" name="bearer_token" v-model="bearerToken" />
|
||||
<button
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon"
|
||||
@click="showTokenList = !showTokenList"
|
||||
v-tooltip.bottom="$t('use_token')"
|
||||
>
|
||||
<i class="material-icons">open_in_new</i>
|
||||
</button>
|
||||
<button
|
||||
v-if="auth === 'OAuth 2.0'"
|
||||
class="icon"
|
||||
@click="showTokenRequest = !showTokenRequest"
|
||||
v-tooltip.bottom="$t('get_token')"
|
||||
>
|
||||
</pw-section>
|
||||
<pw-section
|
||||
v-if="showTokenRequest"
|
||||
class="red"
|
||||
label="Access Token Request"
|
||||
ref="accessTokenRequest"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="showTokenRequestList = true"
|
||||
v-tooltip.bottom="$t('manage_token_req')"
|
||||
>
|
||||
<i class="material-icons">library_add</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('access_token', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="showTokenRequest = false"
|
||||
v-tooltip.bottom="$t('close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
id="token-name"
|
||||
:placeholder="$t('optional')"
|
||||
name="token_name"
|
||||
v-model="accessTokenName"
|
||||
type="text"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="oidc-discovery-url">
|
||||
{{ $t("oidc_discovery_url") }}
|
||||
</label>
|
||||
<input
|
||||
:disabled="this.authUrl !== '' || this.accessTokenUrl !== ''"
|
||||
id="oidc-discovery-url"
|
||||
name="oidc_discovery_url"
|
||||
type="url"
|
||||
v-model="oidcDiscoveryUrl"
|
||||
placeholder="https://example.com/.well-known/openid-configuration"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="auth-url">{{ $t("auth_url") }}</label>
|
||||
<input
|
||||
:disabled="this.oidcDiscoveryUrl !== ''"
|
||||
id="auth-url"
|
||||
name="auth_url"
|
||||
type="url"
|
||||
v-model="authUrl"
|
||||
placeholder="https://example.com/login/oauth/authorize"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="access-token-url">
|
||||
{{ $t("access_token_url") }}
|
||||
</label>
|
||||
<input
|
||||
:disabled="this.oidcDiscoveryUrl !== ''"
|
||||
id="access-token-url"
|
||||
name="access_token_url"
|
||||
type="url"
|
||||
v-model="accessTokenUrl"
|
||||
placeholder="https://example.com/login/oauth/access_token"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="client-id">{{ $t("client_id") }}</label>
|
||||
<input
|
||||
id="client-id"
|
||||
name="client_id"
|
||||
type="text"
|
||||
v-model="clientId"
|
||||
placeholder="Client ID"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="scope">{{ $t("scope") }}</label>
|
||||
<input
|
||||
id="scope"
|
||||
name="scope"
|
||||
type="text"
|
||||
v-model="scope"
|
||||
placeholder="e.g. read:org"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="handleAccessTokenRequest">
|
||||
<i class="material-icons">vpn_key</i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex-wrap">
|
||||
<pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
|
||||
{{ $t("include_in_url") }}
|
||||
</pw-toggle>
|
||||
</div>
|
||||
</pw-section>
|
||||
<pw-section
|
||||
v-if="showTokenRequest"
|
||||
class="red"
|
||||
label="Access Token Request"
|
||||
ref="accessTokenRequest"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="token-name">{{ $t("token_name") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="showTokenRequestList = true"
|
||||
v-tooltip.bottom="$t('manage_token_req')"
|
||||
>
|
||||
<i class="material-icons">library_add</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('access_token', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
<button
|
||||
class="icon"
|
||||
@click="showTokenRequest = false"
|
||||
v-tooltip.bottom="$t('close')"
|
||||
>
|
||||
<i class="material-icons">close</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
id="token-name"
|
||||
:placeholder="$t('optional')"
|
||||
name="token_name"
|
||||
v-model="accessTokenName"
|
||||
type="text"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="oidc-discovery-url">
|
||||
{{ $t("oidc_discovery_url") }}
|
||||
</label>
|
||||
<input
|
||||
:disabled="this.authUrl !== '' || this.accessTokenUrl !== ''"
|
||||
id="oidc-discovery-url"
|
||||
name="oidc_discovery_url"
|
||||
type="url"
|
||||
v-model="oidcDiscoveryUrl"
|
||||
placeholder="https://example.com/.well-known/openid-configuration"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="auth-url">{{ $t("auth_url") }}</label>
|
||||
<input
|
||||
:disabled="this.oidcDiscoveryUrl !== ''"
|
||||
id="auth-url"
|
||||
name="auth_url"
|
||||
type="url"
|
||||
v-model="authUrl"
|
||||
placeholder="https://example.com/login/oauth/authorize"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="access-token-url">
|
||||
{{ $t("access_token_url") }}
|
||||
</label>
|
||||
<input
|
||||
:disabled="this.oidcDiscoveryUrl !== ''"
|
||||
id="access-token-url"
|
||||
name="access_token_url"
|
||||
type="url"
|
||||
v-model="accessTokenUrl"
|
||||
placeholder="https://example.com/login/oauth/access_token"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="client-id">{{ $t("client_id") }}</label>
|
||||
<input
|
||||
id="client-id"
|
||||
name="client_id"
|
||||
type="text"
|
||||
v-model="clientId"
|
||||
placeholder="Client ID"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="scope">{{ $t("scope") }}</label>
|
||||
<input
|
||||
id="scope"
|
||||
name="scope"
|
||||
type="text"
|
||||
v-model="scope"
|
||||
placeholder="e.g. read:org"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="handleAccessTokenRequest">
|
||||
<i class="material-icons">vpn_key</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
|
||||
<input id="tab-two" type="radio" name="options" />
|
||||
<label for="tab-two">{{ $t("headers") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="orange" label="Headers" ref="headers">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('headers', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="headerList"
|
||||
readonly
|
||||
v-textarea-auto-height="headerString"
|
||||
v-model="headerString"
|
||||
:placeholder="$t('add_one_header')"
|
||||
rows="1"
|
||||
></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="index">
|
||||
<li>
|
||||
<autocomplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@input="
|
||||
$store.commit('setKeyHeader', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setValueHeader', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestHeader(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="header"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<span>{{ $t("request_token") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</tab>
|
||||
|
||||
<input id="tab-three" type="radio" name="options" />
|
||||
<label for="tab-three">{{ $t("parameters") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="pink" label="Parameters" ref="parameters">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<tab :name="$t('headers')">
|
||||
<pw-section class="orange" label="Headers" ref="headers">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="headerList">{{ $t("header_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('headers', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="headerList"
|
||||
readonly
|
||||
v-textarea-auto-height="headerString"
|
||||
v-model="headerString"
|
||||
:placeholder="$t('add_one_header')"
|
||||
rows="1"
|
||||
></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="index">
|
||||
<li>
|
||||
<autocomplete
|
||||
:placeholder="$t('header_count', { count: index + 1 })"
|
||||
:source="commonHeaders"
|
||||
:spellcheck="false"
|
||||
:value="header.key"
|
||||
@input="
|
||||
$store.commit('setKeyHeader', {
|
||||
index,
|
||||
value: $event,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="header.value"
|
||||
@change="
|
||||
$store.commit('setValueHeader', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('parameters', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
@click="removeRequestHeader(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="header"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</div>
|
||||
<textarea
|
||||
id="paramList"
|
||||
readonly
|
||||
v-textarea-auto-height="queryString"
|
||||
v-model="queryString"
|
||||
:placeholder="$t('add_one_parameter')"
|
||||
rows="1"
|
||||
></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(param, index) in params" :key="index">
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
:name="'param' + index"
|
||||
:value="param.key"
|
||||
@change="
|
||||
$store.commit('setKeyParams', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="param.value"
|
||||
@change="
|
||||
$store.commit('setValueParams', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestParam(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="param"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
<button class="icon" @click="addRequestHeader">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestParam">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</tab>
|
||||
|
||||
<tab :name="$t('parameters')">
|
||||
<pw-section class="pink" label="Parameters" ref="parameters">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="flex-wrap">
|
||||
<label for="paramList">{{ $t("parameter_list") }}</label>
|
||||
<div>
|
||||
<button
|
||||
class="icon"
|
||||
@click="clearContent('parameters', $event)"
|
||||
v-tooltip.bottom="$t('clear')"
|
||||
>
|
||||
<i class="material-icons">clear_all</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
id="paramList"
|
||||
readonly
|
||||
v-textarea-auto-height="queryString"
|
||||
v-model="queryString"
|
||||
:placeholder="$t('add_one_parameter')"
|
||||
rows="1"
|
||||
></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-for="(param, index) in params" :key="index">
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||
:name="'param' + index"
|
||||
:value="param.key"
|
||||
@change="
|
||||
$store.commit('setKeyParams', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
autofocus
|
||||
/>
|
||||
</li>
|
||||
<li>
|
||||
<input
|
||||
:placeholder="$t('value_count', { count: index + 1 })"
|
||||
:name="'value' + index"
|
||||
:value="param.value"
|
||||
@change="
|
||||
$store.commit('setValueParams', {
|
||||
index,
|
||||
value: $event.target.value,
|
||||
})
|
||||
"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<button
|
||||
class="icon"
|
||||
@click="removeRequestParam(index)"
|
||||
v-tooltip.bottom="$t('delete')"
|
||||
id="param"
|
||||
>
|
||||
<i class="material-icons">delete</i>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<button class="icon" @click="addRequestParam">
|
||||
<i class="material-icons">add</i>
|
||||
<span>{{ $t("add_new") }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</tab>
|
||||
</tabs>
|
||||
|
||||
<!-- <div class="flex-wrap">
|
||||
<span></span>
|
||||
@@ -993,44 +989,38 @@
|
||||
|
||||
<aside v-if="activeSidebar" class="sticky-inner inner-right">
|
||||
<section>
|
||||
<input id="history-tab" type="radio" name="side" checked="checked" />
|
||||
<label for="history-tab">{{ $t("history") }}</label>
|
||||
<div class="tab">
|
||||
<history @useHistory="handleUseHistory" ref="historyComponent" />
|
||||
</div>
|
||||
<tabs>
|
||||
<tab :name="$t('history')" :selected="true">
|
||||
<history @useHistory="handleUseHistory" ref="historyComponent" />
|
||||
</tab>
|
||||
|
||||
<input id="collection-tab" type="radio" name="side" />
|
||||
<label for="collection-tab">{{ $t("collections") }}</label>
|
||||
<div class="tab">
|
||||
<collections />
|
||||
</div>
|
||||
<tab :name="$t('collections')">
|
||||
<collections />
|
||||
</tab>
|
||||
|
||||
<input id="environment-tab" type="radio" name="side" />
|
||||
<label for="environment-tab">{{ $t("environment") }}</label>
|
||||
<div class="tab">
|
||||
<environments @use-environment="useSelectedEnvironment($event)" />
|
||||
</div>
|
||||
<tab :name="$t('environment')">
|
||||
<environments @use-environment="useSelectedEnvironment($event)" />
|
||||
</tab>
|
||||
|
||||
<input id="sync-tab" type="radio" name="side" />
|
||||
<label for="sync-tab">{{ $t("notes") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="pink" :label="$t('notes')" ref="sync">
|
||||
<div v-if="fb.currentUser">
|
||||
<inputform />
|
||||
<notes />
|
||||
</div>
|
||||
<div v-else>
|
||||
<ul>
|
||||
<li>
|
||||
<label>{{ $t("login_first") }}</label>
|
||||
<p>
|
||||
<login />
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</pw-section>
|
||||
</div>
|
||||
<tab :name="$t('notes')">
|
||||
<pw-section class="pink" :label="$t('notes')" ref="sync">
|
||||
<div v-if="fb.currentUser">
|
||||
<inputform />
|
||||
<notes />
|
||||
</div>
|
||||
<div v-else>
|
||||
<ul>
|
||||
<li>
|
||||
<label>{{ $t("login_first") }}</label>
|
||||
<p>
|
||||
<login />
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</pw-section>
|
||||
</tab>
|
||||
</tabs>
|
||||
</section>
|
||||
</aside>
|
||||
|
||||
@@ -1384,6 +1374,8 @@ export default {
|
||||
inputform: () => import("../components/firebase/inputform"),
|
||||
notes: () => import("../components/firebase/feeds"),
|
||||
login: () => import("../components/firebase/login"),
|
||||
tabs: () => import("../components/ui/tabs"),
|
||||
tab: () => import("../components/ui/tab"),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -1,121 +1,123 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<section id="options">
|
||||
<input id="tab-one" type="radio" name="options" checked="checked" />
|
||||
<label for="tab-one">{{ $t("websocket") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
v-model="url"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<tabs>
|
||||
<tab :name="$t('websocket')" :selected="true">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<label for="url">{{ $t("url") }}</label>
|
||||
<input
|
||||
id="url"
|
||||
type="url"
|
||||
spellcheck="false"
|
||||
:class="{ error: !urlValid }"
|
||||
v-model="url"
|
||||
@keyup.enter="urlValid ? toggleConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<div>
|
||||
<li>
|
||||
<label for="connect" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
:disabled="!urlValid"
|
||||
id="connect"
|
||||
name="connect"
|
||||
@click="toggleConnection"
|
||||
>
|
||||
{{ !connectionState ? $t("connect") : $t("disconnect") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<realtime-log :title="$t('log')" :log="communication.log" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="message"
|
||||
name="message"
|
||||
type="text"
|
||||
v-model="communication.input"
|
||||
:readonly="!connectionState"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
<realtime-log :title="$t('log')" :log="communication.log" />
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
<input id="tab-two" type="radio" name="options" />
|
||||
<label for="tab-two">{{ $t("sse") }}</label>
|
||||
<div class="tab">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="server">{{ $t("server") }}</label>
|
||||
<input
|
||||
id="server"
|
||||
type="url"
|
||||
:class="{ error: !serverValid }"
|
||||
v-model="server"
|
||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
:disabled="!serverValid"
|
||||
id="start"
|
||||
name="start"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
<label for="message">{{ $t("message") }}</label>
|
||||
<input
|
||||
id="message"
|
||||
name="message"
|
||||
type="text"
|
||||
v-model="communication.input"
|
||||
:readonly="!connectionState"
|
||||
@keyup.enter="connectionState ? sendMessage() : null"
|
||||
/>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
<div>
|
||||
<li>
|
||||
<label for="send" class="hide-on-small-screen"> </label>
|
||||
<button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
|
||||
{{ $t("send") }}
|
||||
<span>
|
||||
<i class="material-icons">send</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</tab>
|
||||
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<realtime-log :title="$t('events')" :log="events.log" />
|
||||
<div id="result"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</div>
|
||||
<tab :name="$t('sse')">
|
||||
<pw-section class="blue" :label="$t('request')" ref="request">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="server">{{ $t("server") }}</label>
|
||||
<input
|
||||
id="server"
|
||||
type="url"
|
||||
:class="{ error: !serverValid }"
|
||||
v-model="server"
|
||||
@keyup.enter="serverValid ? toggleSSEConnection() : null"
|
||||
/>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
<label for="start" class="hide-on-small-screen"> </label>
|
||||
<button
|
||||
:disabled="!serverValid"
|
||||
id="start"
|
||||
name="start"
|
||||
@click="toggleSSEConnection"
|
||||
>
|
||||
{{ !connectionSSEState ? $t("start") : $t("stop") }}
|
||||
<span>
|
||||
<i class="material-icons">
|
||||
{{ !connectionSSEState ? "sync" : "sync_disabled" }}
|
||||
</i>
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</pw-section>
|
||||
|
||||
<input id="tab-three" type="radio" name="options" />
|
||||
<label for="tab-three">{{ $t("socketio") }}</label>
|
||||
<div class="tab">
|
||||
<socketio />
|
||||
</div>
|
||||
<pw-section class="purple" :label="$t('communication')" id="response" ref="response">
|
||||
<ul>
|
||||
<li>
|
||||
<realtime-log :title="$t('events')" :log="events.log" />
|
||||
<div id="result"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</pw-section>
|
||||
</tab>
|
||||
|
||||
<tab :name="$t('socketio')">
|
||||
<socketio />
|
||||
</tab>
|
||||
</tabs>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -128,6 +130,8 @@ export default {
|
||||
components: {
|
||||
"pw-section": () => import("../components/layout/section"),
|
||||
socketio: () => import("../components/realtime/socketio"),
|
||||
tabs: () => import("../components/ui/tabs"),
|
||||
tab: () => import("../components/ui/tab"),
|
||||
realtimeLog,
|
||||
},
|
||||
data() {
|
||||
|
||||
Reference in New Issue
Block a user