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

feat: init split layouts

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-06 17:31:18 +00:00
committed by GitHub
parent 93d373c032
commit fc5a5aad8d
35 changed files with 1204 additions and 1061 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
assets/scss/styles.scss
View File

@@ -178,8 +178,6 @@ select {
@apply cursor-pointer; @apply cursor-pointer;
@apply appearance-none; @apply appearance-none;
// height: 40px;
&::-ms-expand { &::-ms-expand {
@apply hidden; @apply hidden;
} }
@@ -295,3 +293,64 @@ input[type="checkbox"] {
margin-bottom: env(safe-area-inset-bottom); margin-bottom: env(safe-area-inset-bottom);
} }
} }
.splitpanes__splitter {
@apply relative;
@apply bg-primaryLight;
@apply transition;
}
.splitpanes--vertical > .splitpanes__splitter {
@apply w-1;
}
.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1;
}
.splitpanes__splitter::before {
@apply absolute;
@apply inset-0;
@apply bg-dividerLight;
@apply opacity-0;
@apply z-1;
@apply transition;
content: "";
}
.splitpanes__splitter::after {
@apply absolute;
@apply inset-0;
@apply z-1;
@apply transition;
@apply flex;
@apply items-center;
@apply justify-center;
@apply text-dividerDark;
@apply font-icon;
}
.splitpanes--vertical > .splitpanes__splitter::after {
content: "\e5d4";
}
.splitpanes--horizontal > .splitpanes__splitter::after {
content: "\e5d3";
}
.splitpanes__splitter:hover::before {
@apply opacity-100;
}
.splitpanes--vertical > .splitpanes__splitter::before {
left: -2px;
right: -2px;
height: 100%;
}
.splitpanes--horizontal > .splitpanes__splitter::before {
top: -2px;
bottom: -2px;
width: 100%;
}

2
components/app/Section.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<section :id="label.toLowerCase()"> <section :id="label.toLowerCase()" class="flex flex-col">
<slot></slot> <slot></slot>
</section> </section>
</template> </template>

2
components/collections/graphql/index.vue
View File

@@ -45,7 +45,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="border-b row-wrapper border-divider"> <div class="border-b flex flex-1 border-divider">
<ButtonSecondary <ButtonSecondary
icon="new" icon="new"
:label="$t('new')" :label="$t('new')"

4
components/collections/index.vue
View File

@@ -7,7 +7,7 @@
aria-label="Search" aria-label="Search"
type="search" type="search"
:placeholder="$t('search')" :placeholder="$t('search')"
class="input rounded-t-lg" class="px-4 py-2 text-xs flex flex-1"
/> />
</div> </div>
<CollectionsChooseType <CollectionsChooseType
@@ -53,7 +53,7 @@
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections" @update-team-collections="updateTeamCollections"
/> />
<div class="border-b row-wrapper border-divider"> <div class="border-b flex flex-1 border-divider">
<ButtonSecondary <ButtonSecondary
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&

2
components/environments/Edit.vue
View File

@@ -16,7 +16,7 @@
:placeholder="editingEnvironment.name" :placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment" @keyup.enter="saveEnvironment"
/> />
<div class="row-wrapper"> <div class="flex flex-1">
<label for="variableList">{{ $t("env_variable_list") }}</label> <label for="variableList">{{ $t("env_variable_list") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/environments/Environment.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<div> <div>
<ButtonSecondary <ButtonSecondary
icon="layers" icon="layers"

2
components/environments/index.vue
View File

@@ -35,7 +35,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="border-b row-wrapper border-divider"> <div class="border-b flex flex-1 border-divider">
<div> <div>
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"

22
components/history/index.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<AppSection label="history"> <AppSection label="history" class="bg-green-200">
<div class="flex"> <div class="flex">
<input <input
v-model="filterText" v-model="filterText"
aria-label="Search" aria-label="Search"
type="search" type="search"
class="px-4 py-2 text-xs flex flex-1"
:placeholder="$t('search')" :placeholder="$t('search')"
class="input rounded-t-lg"
/> />
</div> </div>
<div <div
@@ -39,8 +39,11 @@
<p v-if="history.length === 0"> <p v-if="history.length === 0">
<i class="material-icons">schedule</i> {{ $t("history_empty") }} <i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p> </p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark"> <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryLight">
<div v-if="!isClearingHistory" class="row-wrapper"> <div
v-if="!isClearingHistory"
class="flex items-center justify-between flex-1"
>
<ButtonSecondary <ButtonSecondary
data-testid="clear_history" data-testid="clear_history"
:disabled="history.length === 0" :disabled="history.length === 0"
@@ -51,14 +54,15 @@
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="!showMore ? $t('show_more') : $t('hide_more')" :title="!showMore ? $t('show_more') : $t('hide_more')"
icon="!showMore ? 'unfold_more' : 'unfold_less'" :icon="!showMore ? 'unfold_more' : 'unfold_less'"
@click.native="toggleCollapse()" @click.native="toggleCollapse()"
/> />
</div> </div>
<div v-else class="row-wrapper"> <div v-else class="flex items-center justify-between flex-1">
<p> <span class="flex items-center">
<i class="material-icons">help_outline</i> {{ $t("are_you_sure") }} <i class="material-icons mx-2">help_outline</i>
</p> {{ $t("are_you_sure") }}
</span>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

2
components/http/BodyParameters.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="reqParamList">{{ $t("request_body") }}</label> <label for="reqParamList">{{ $t("request_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/http/CodegenModal.vue
View File

@@ -41,7 +41,7 @@
/> />
</tippy> </tippy>
</span> </span>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="generatedCode">{{ $t("generated_code") }}</label> <label for="generatedCode">{{ $t("generated_code") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/http/Headers.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="headers"> <AppSection label="headers">
<ul v-if="headers.length !== 0"> <ul v-if="headers.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="headerList">{{ $t("header_list") }}</label> <label for="headerList">{{ $t("header_list") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/http/Parameters.vue
View File

@@ -2,7 +2,7 @@
<AppSection label="parameters"> <AppSection label="parameters">
<ul v-if="params.length !== 0"> <ul v-if="params.length !== 0">
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="paramList">{{ $t("parameter_list") }}</label> <label for="paramList">{{ $t("parameter_list") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/http/RawBody.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="rawBody">{{ $t("raw_request_body") }}</label> <label for="rawBody">{{ $t("raw_request_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

4
components/http/TokenList.vue
View File

@@ -7,7 +7,7 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="row-wrapper"> <div class="flex flex-1">
<label>{{ $t("token_list") }}</label> <label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0"> <div v-if="tokens.length != 0">
<ButtonSecondary <ButtonSecondary
@@ -35,7 +35,7 @@
<li> <li>
<input class="input" :value="token.value" readonly /> <input class="input" :value="token.value" readonly />
</li> </li>
<div class="row-wrapper"> <div class="flex flex-1">
<li> <li>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

4
components/landing/Hero.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="flex p-4 relative overflow-hidden"> <div class="flex p-4 relative">
<div class="relative my-16 z-10 max-w-3xl"> <div class="relative my-16 z-10 max-w-3xl">
<h2 <h2
class=" class="
@@ -45,7 +45,7 @@
</div> </div>
</div> </div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:w-full lg:h-full" /> <LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:h-full" />
</div> </div>
</div> </div>
</template> </template>

2
components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label> <label for="body">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/lenses/renderers/ImageLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label> <label for="body">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label> <label for="body">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/lenses/renderers/RawLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label> <label for="body">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

2
components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="body">{{ $t("response_body") }}</label> <label for="body">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

227
components/realtime/Mqtt.vue
View File

@@ -1,114 +1,139 @@
<template> <template>
<div> <div>
<AppSection label="request"> <Splitpanes vertical :dbl-click-splitter="false">
<ul> <Pane class="overflow-auto">
<li> <Splitpanes horizontal :dbl-click-splitter="false">
<label for="mqtt-url">{{ $t("url") }}</label> <Pane class="overflow-auto">
<input <AppSection label="request">
id="mqtt-url" <ul>
v-model="url" <li>
type="url" <label for="mqtt-url">{{ $t("url") }}</label>
spellcheck="false" <input
class="input md:rounded-bl-lg" id="mqtt-url"
:placeholder="$t('url')" v-model="url"
/> type="url"
</li> spellcheck="false"
<div> class="input md:rounded-bl-lg"
<li> :placeholder="$t('url')"
<ButtonSecondary />
id="connect" </li>
:disabled="!validUrl" <div>
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" <li>
:icon="!connectionState ? 'sync' : 'sync_disabled'" <ButtonSecondary
:label="connectionState ? $t('disconnect') : $t('connect')" id="connect"
reverse :disabled="!validUrl"
@click.native="toggleConnection" class="
/> button
</li> rounded-b-lg
</div> md:rounded-bl-none md:rounded-br-lg
</ul> "
</AppSection> :icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="
<AppSection label="response"> connectionState ? $t('disconnect') : $t('connect')
<ul> "
<li> reverse
<RealtimeLog :title="$t('log')" :log="log" /> @click.native="toggleConnection"
</li> />
</ul> </li>
<ul> </div>
<li> </ul>
<label for="pub_topic">{{ $t("mqtt_topic") }}</label> </AppSection>
<input </Pane>
id="pub_topic" <Pane class="overflow-auto">
v-model="pub_topic" <AppSection label="response">
class="input" <ul>
type="text" <li>
spellcheck="false" <RealtimeLog :title="$t('log')" :log="log" />
/> </li>
</li> </ul>
<li> </AppSection>
<label for="mqtt-message">{{ $t("message") }}</label> </Pane>
<input </Splitpanes>
id="mqtt-message" </Pane>
v-model="msg" <Pane max-size="35" min-size="20" class="overflow-auto">
type="text" <AppSection label="messages">
spellcheck="false" <ul>
class="input border-dashed md:border-l border-divider" <li>
/> <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
</li> <input
<div> id="pub_topic"
<li> v-model="pub_topic"
<ButtonSecondary class="input"
id="publish" type="text"
class="button" spellcheck="false"
name="get" />
:disabled="!canpublish" </li>
icon="send" <li>
:label="$t('mqtt_publish')" <label for="mqtt-message">{{ $t("message") }}</label>
@click.native="publish" <input
/> id="mqtt-message"
</li> v-model="msg"
</div> type="text"
</ul> spellcheck="false"
<ul> class="input border-dashed md:border-l border-divider"
<li> />
<label for="sub_topic">{{ $t("mqtt_topic") }}</label> </li>
<input <div>
id="sub_topic" <li>
v-model="sub_topic" <ButtonSecondary
type="text" id="publish"
spellcheck="false" class="button"
class="input md:rounded-bl-lg" name="get"
/> :disabled="!canpublish"
</li> icon="send"
<div> :label="$t('mqtt_publish')"
<li> @click.native="publish"
<ButtonSecondary />
id="subscribe" </li>
name="get" </div>
:disabled="!cansubscribe" </ul>
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" <ul>
:icon="subscriptionState ? 'sync_disabled' : 'sync'" <li>
:label=" <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
subscriptionState <input
? $t('mqtt_unsubscribe') id="sub_topic"
: $t('mqtt_subscribe') v-model="sub_topic"
" type="text"
reverse spellcheck="false"
@click.native="toggleSubscription" class="input md:rounded-bl-lg"
/> />
</li> </li>
</div> <div>
</ul> <li>
</AppSection> <ButtonSecondary
id="subscribe"
name="get"
:disabled="!cansubscribe"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"
:label="
subscriptionState
? $t('mqtt_unsubscribe')
: $t('mqtt_subscribe')
"
reverse
@click.native="toggleSubscription"
/>
</li>
</div>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div> </div>
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import Paho from "paho-mqtt" import Paho from "paho-mqtt"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
export default { export default {
components: { Splitpanes, Pane },
data() { data() {
return { return {
url: "wss://test.mosquitto.org:8081", url: "wss://test.mosquitto.org:8081",

273
components/realtime/Socketio.vue
View File

@@ -1,140 +1,161 @@
<template> <template>
<div> <div>
<AppSection label="request"> <Splitpanes vertical :dbl-click-splitter="false">
<ul> <Pane class="overflow-auto">
<li> <Splitpanes horizontal :dbl-click-splitter="false">
<label for="socketio-url">{{ $t("url") }}</label> <Pane class="overflow-auto">
<input <AppSection label="request">
id="socketio-url" <ul>
v-model="url" <li>
type="url" <label for="socketio-url">{{ $t("url") }}</label>
spellcheck="false" <input
:class="{ error: !urlValid }" id="socketio-url"
class="input md:rounded-bl-lg" v-model="url"
:placeholder="$t('url')" type="url"
@keyup.enter="urlValid ? toggleConnection() : null" spellcheck="false"
/> :class="{ error: !urlValid }"
</li> class="input md:rounded-bl-lg"
<div> :placeholder="$t('url')"
<li> @keyup.enter="urlValid ? toggleConnection() : null"
<label for="socketio-path">{{ $t("path") }}</label> />
<input </li>
id="socketio-path" <div>
v-model="path" <li>
class="input" <label for="socketio-path">{{ $t("path") }}</label>
spellcheck="false" <input
/> id="socketio-path"
</li> v-model="path"
</div> class="input"
<div> spellcheck="false"
<li> />
<ButtonSecondary </li>
id="connect" </div>
:disabled="!urlValid" <div>
name="connect" <li>
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" <ButtonSecondary
:icon="!connectionState ? 'sync' : 'sync_disabled'" id="connect"
:label="!connectionState ? $t('connect') : $t('disconnect')" :disabled="!urlValid"
reverse name="connect"
@click.native="toggleConnection" class="
/> button
</li> rounded-b-lg
</div> md:rounded-bl-none md:rounded-br-lg
</ul> "
</AppSection> :icon="!connectionState ? 'sync' : 'sync_disabled'"
:label="
<AppSection label="response"> !connectionState ? $t('connect') : $t('disconnect')
<ul> "
<li> reverse
<RealtimeLog :title="$t('log')" :log="communication.log" /> @click.native="toggleConnection"
</li> />
</ul> </li>
<ul> </div>
<li> </ul>
<label for="event_name">{{ $t("event_name") }}</label> </AppSection>
<input </Pane>
id="event_name" <Pane class="overflow-auto">
v-model="communication.eventName" <AppSection label="response">
class="input" <ul>
name="event_name" <li>
type="text" <RealtimeLog :title="$t('log')" :log="communication.log" />
:readonly="!connectionState" </li>
/> </ul>
</li> </AppSection>
</ul> </Pane>
<ul> </Splitpanes>
<li> </Pane>
<div class="row-wrapper"> <Pane max-size="35" min-size="20" class="overflow-auto">
<label>{{ $t("message") }}s</label> <AppSection label="messages">
</div> <ul>
</li> <li>
</ul> <label for="event_name">{{ $t("event_name") }}</label>
<ul <input
v-for="(input, index) of communication.inputs" id="event_name"
:key="`input-${index}`" v-model="communication.eventName"
:class="{ 'border-t': index == 0 }" class="input"
class=" name="event_name"
border-b border-dashed type="text"
divide-y :readonly="!connectionState"
md:divide-x />
border-divider </li>
divide-dashed divide-divider </ul>
md:divide-y-0 <ul>
" <li>
> <div class="flex flex-1">
<li> <label>{{ $t("message") }}s</label>
<input </div>
v-model="communication.inputs[index]" </li>
class="input" </ul>
name="message" <ul
type="text" v-for="(input, index) of communication.inputs"
:readonly="!connectionState" :key="`input-${index}`"
@keyup.enter="connectionState ? sendMessage() : null" :class="{ 'border-t': index == 0 }"
/> class="
</li> border-b border-dashed
<div v-if="index + 1 !== communication.inputs.length"> divide-y
<li> md:divide-x
<ButtonSecondary border-divider
v-tippy="{ theme: 'tooltip' }" divide-dashed divide-divider
:title="$t('delete')" md:divide-y-0
icon="delete" "
@click.native="removeCommunicationInput({ index })" >
/> <li>
</li> <input
</div> v-model="communication.inputs[index]"
<div v-if="index + 1 === communication.inputs.length"> class="input"
<li> name="message"
<ButtonSecondary type="text"
id="send" :readonly="!connectionState"
class="button" @keyup.enter="connectionState ? sendMessage() : null"
name="send" />
:disabled="!connectionState" </li>
icon="send" <div v-if="index + 1 !== communication.inputs.length">
:label="$t('send')" <li>
@click.native="sendMessage" <ButtonSecondary
/> v-tippy="{ theme: 'tooltip' }"
</li> :title="$t('delete')"
</div> icon="delete"
</ul> @click.native="removeCommunicationInput({ index })"
<ul> />
<li> </li>
<ButtonSecondary </div>
icon="add" <div v-if="index + 1 === communication.inputs.length">
:label="$t('add_new')" <li>
@click.native="addCommunicationInput" <ButtonSecondary
/> id="send"
</li> class="button"
</ul> name="send"
</AppSection> :disabled="!connectionState"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addCommunicationInput"
/>
</li>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div> </div>
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import { io as Client } from "socket.io-client" import { io as Client } from "socket.io-client"
import wildcard from "socketio-wildcard" import wildcard from "socketio-wildcard"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
export default { export default {
components: { Splitpanes, Pane },
data() { data() {
return { return {
url: "wss://main-daxrc78qyb411dls-gtw.qovery.io", url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",

89
components/realtime/Sse.vue
View File

@@ -1,51 +1,62 @@
<template> <template>
<div> <div>
<AppSection label="request"> <Splitpanes horizontal :dbl-click-splitter="false">
<ul> <Pane class="overflow-auto">
<li> <AppSection label="request">
<label for="server">{{ $t("server") }}</label> <ul>
<input <li>
id="server" <label for="server">{{ $t("server") }}</label>
v-model="server" <input
type="url" id="server"
:class="{ error: !serverValid }" v-model="server"
class="input md:rounded-bl-lg" type="url"
:placeholder="$t('url')" :class="{ error: !serverValid }"
@keyup.enter="serverValid ? toggleSSEConnection() : null" class="input md:rounded-bl-lg"
/> :placeholder="$t('url')"
</li> @keyup.enter="serverValid ? toggleSSEConnection() : null"
<div> />
<li> </li>
<ButtonSecondary <div>
id="start" <li>
:disabled="!serverValid" <ButtonSecondary
name="start" id="start"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" :disabled="!serverValid"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'" name="start"
:label="!connectionSSEState ? $t('start') : $t('stop')" class="
reverse button
@click.native="toggleSSEConnection" rounded-b-lg
/> md:rounded-bl-none md:rounded-br-lg
</li> "
</div> :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
</ul> :label="!connectionSSEState ? $t('start') : $t('stop')"
</AppSection> reverse
@click.native="toggleSSEConnection"
<AppSection label="response"> />
<ul> </li>
<li> </div>
<RealtimeLog :title="$t('events')" :log="events.log" /> </ul>
<div id="result"></div> </AppSection>
</li> </Pane>
</ul> <Pane class="overflow-auto">
</AppSection> <AppSection label="response">
<ul>
<li>
<RealtimeLog :title="$t('events')" :log="events.log" />
<div id="result"></div>
</li>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div> </div>
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
export default { export default {
components: { Splitpanes, Pane },
data() { data() {
return { return {
connectionSSEState: false, connectionSSEState: false,

312
components/realtime/Websocket.vue
View File

@@ -1,157 +1,179 @@
<template> <template>
<div> <div>
<AppSection label="request"> <Splitpanes vertical :dbl-click-splitter="false">
<ul> <Pane class="overflow-auto">
<li> <Splitpanes horizontal :dbl-click-splitter="false">
<label for="websocket-url">{{ $t("url") }}</label> <Pane class="overflow-auto">
<input <AppSection label="request">
id="websocket-url" <ul>
v-model="url" <li>
class="input" <label for="websocket-url">{{ $t("url") }}</label>
type="url" <input
spellcheck="false" id="websocket-url"
:class="{ error: !urlValid }" v-model="url"
:placeholder="$t('url')" class="input"
@keyup.enter="urlValid ? toggleConnection() : null" type="url"
/> spellcheck="false"
</li> :class="{ error: !urlValid }"
<div> :placeholder="$t('url')"
<li> @keyup.enter="urlValid ? toggleConnection() : null"
<ButtonSecondary />
id="connect" </li>
:disabled="!urlValid" <div>
class="button" <li>
name="connect" <ButtonSecondary
:icon="!connectionState ? 'sync' : 'sync_disabled'" id="connect"
:label="!connectionState ? $t('connect') : $t('disconnect')" :disabled="!urlValid"
reverse class="button"
@click.native="toggleConnection" name="connect"
/> :icon="!connectionState ? 'sync' : 'sync_disabled'"
</li> :label="
</div> !connectionState ? $t('connect') : $t('disconnect')
</ul> "
<ul> reverse
<li> @click.native="toggleConnection"
<div class="row-wrapper"> />
<label>{{ $t("protocols") }}</label> </li>
</div> </div>
</li> </ul>
</ul> <ul>
<ul <li>
v-for="(protocol, index) of protocols" <div class="flex flex-1">
:key="`protocol-${index}`" <label>{{ $t("protocols") }}</label>
:class="{ 'border-t': index == 0 }" </div>
class=" </li>
border-b border-dashed </ul>
divide-y <ul
md:divide-x v-for="(protocol, index) of protocols"
border-divider :key="`protocol-${index}`"
divide-dashed divide-divider :class="{ 'border-t': index == 0 }"
md:divide-y-0 class="
" border-b border-dashed
> divide-y
<li> md:divide-x
<input border-divider
v-model="protocol.value" divide-dashed divide-divider
class="input" md:divide-y-0
:placeholder="$t('protocol_count', { count: index + 1 })" "
name="message" >
type="text" <li>
/> <input
</li> v-model="protocol.value"
<div> class="input"
<li> :placeholder="$t('protocol_count', { count: index + 1 })"
<ButtonSecondary name="message"
v-tippy="{ theme: 'tooltip' }" type="text"
:title=" />
protocol.hasOwnProperty('active') </li>
? protocol.active <div>
? $t('turn_off') <li>
: $t('turn_on') <ButtonSecondary
: $t('turn_off') v-tippy="{ theme: 'tooltip' }"
" :title="
@click.native=" protocol.hasOwnProperty('active')
protocol.active = protocol.hasOwnProperty('active') ? protocol.active
? !protocol.active ? $t('turn_off')
: false : $t('turn_on')
" : $t('turn_off')
/> "
<i class="material-icons"> @click.native="
{{ protocol.active = protocol.hasOwnProperty('active')
protocol.hasOwnProperty("active") ? !protocol.active
? protocol.active : false
? "check_box" "
: "check_box_outline_blank" />
: "check_box" <i class="material-icons">
}} {{
</i> protocol.hasOwnProperty("active")
</li> ? protocol.active
</div> ? "check_box"
<div> : "check_box_outline_blank"
<li> : "check_box"
<ButtonSecondary }}
v-tippy="{ theme: 'tooltip' }" </i>
:title="$t('delete')" </li>
icon="delete" </div>
@click.native="deleteProtocol({ index })" <div>
/> <li>
</li> <ButtonSecondary
</div> v-tippy="{ theme: 'tooltip' }"
</ul> :title="$t('delete')"
<ul> icon="delete"
<li> @click.native="deleteProtocol({ index })"
<ButtonSecondary />
icon="add" </li>
:label="$t('add_new')" </div>
@click.native="addProtocol" </ul>
/> <ul>
</li> <li>
</ul> <ButtonSecondary
</AppSection> icon="add"
:label="$t('add_new')"
<AppSection label="response"> @click.native="addProtocol"
<ul> />
<li> </li>
<RealtimeLog :title="$t('log')" :log="communication.log" /> </ul>
</li> </AppSection>
</ul> </Pane>
<ul> <Pane class="overflow-auto">
<li> <AppSection label="response">
<label for="websocket-message">{{ $t("message") }}</label> <ul>
<input <li>
id="websocket-message" <RealtimeLog :title="$t('log')" :log="communication.log" />
v-model="communication.input" </li>
name="message" </ul>
type="text" </AppSection>
:readonly="!connectionState" </Pane>
class="input md:rounded-bl-lg" </Splitpanes>
@keyup.enter="connectionState ? sendMessage() : null" </Pane>
@keyup.up="connectionState ? walkHistory('up') : null" <Pane max-size="35" min-size="20" class="overflow-auto">
@keyup.down="connectionState ? walkHistory('down') : null" <AppSection label="messages">
/> <ul>
</li> <li>
<div> <label for="websocket-message">{{ $t("message") }}</label>
<li> <input
<ButtonSecondary id="websocket-message"
id="send" v-model="communication.input"
name="send" name="message"
:disabled="!connectionState" type="text"
class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg" :readonly="!connectionState"
icon="send" class="input md:rounded-bl-lg"
:label="$t('send')" @keyup.enter="connectionState ? sendMessage() : null"
@click.native="sendMessage" @keyup.up="connectionState ? walkHistory('up') : null"
/> @keyup.down="connectionState ? walkHistory('down') : null"
</li> />
</div> </li>
</ul> <div>
</AppSection> <li>
<ButtonSecondary
id="send"
name="send"
:disabled="!connectionState"
class="
button
rounded-b-lg
md:rounded-bl-none md:rounded-br-lg
"
icon="send"
:label="$t('send')"
@click.native="sendMessage"
/>
</li>
</div>
</ul>
</AppSection>
</Pane>
</Splitpanes>
</div> </div>
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import debounce from "~/helpers/utils/debounce" import debounce from "~/helpers/utils/debounce"
import "splitpanes/dist/splitpanes.css"
export default { export default {
components: { Splitpanes, Pane },
data() { data() {
return { return {
connectionState: false, connectionState: false,

2
components/smart/Modal.vue
View File

@@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div v-if="hasFooterSlot" class="p-2"> <div v-if="hasFooterSlot" class="p-2">
<div class="row-wrapper"> <div class="flex flex-1">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>

8
components/smart/Tabs.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tabs-wrapper"> <div class="tabs-wrapper bg-blue-300">
<div class="tabs" :class="styles"> <div class="tabs" :class="styles">
<div class="flex w-0"> <div class="flex w-0">
<div class="inline-flex"> <div class="inline-flex">
@@ -65,17 +65,19 @@ export default {
.tabs { .tabs {
@apply flex; @apply flex;
@apply flex-1;
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply mt-4;
.tab { .tab {
@apply flex; @apply flex;
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply p-3; @apply px-4;
@apply py-2;
@apply text-secondaryLight; @apply text-secondaryLight;
@apply font-semibold; @apply font-semibold;
@apply text-xs;
@apply cursor-pointer; @apply cursor-pointer;
@apply transition; @apply transition;
@apply border-b-2; @apply border-b-2;

4
components/teams/Edit.vue
View File

@@ -7,7 +7,7 @@
<template #body> <template #body>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label>{{ $t("label") }}</label> <label>{{ $t("label") }}</label>
</div> </div>
</li> </li>
@@ -25,7 +25,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="memberList">{{ $t("team_member_list") }}</label> <label for="memberList">{{ $t("team_member_list") }}</label>
<div></div> <div></div>
</div> </div>

2
components/teams/Team.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="row-wrapper"> <div class="flex flex-1">
<div> <div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"

2
components/teams/index.vue
View File

@@ -23,7 +23,7 @@
:editingteam-i-d="editingteamID" :editingteam-i-d="editingteamID"
@hide-modal="displayModalEdit(false)" @hide-modal="displayModalEdit(false)"
/> />
<div class="row-wrapper"> <div class="flex flex-1">
<div> <div>
<ButtonSecondary <ButtonSecondary
icon="add" icon="add"

44
layouts/default.vue
View File

@@ -1,36 +1,28 @@
<template> <template>
<div class="flex h-screen w-screen"> <div class="flex h-screen w-screen">
<Splitpanes horizontal class="hoppscotch-theme"> <Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="flex-1"> <Pane class="flex flex-1 overflow-auto">
<Splitpanes vertical class="hoppscotch-theme"> <Splitpanes vertical :dbl-click-splitter="false">
<Pane <Pane
v-if="!hideNavigationPane" v-if="!hideNavigationPane"
style="width: auto" style="width: auto"
class="overflow-y-auto bg-primaryLight flex items-stretch" class="overflow-auto"
> >
<AppSidenav /> <AppSidenav />
</Pane> </Pane>
<Pane class="flex-1"> <Pane class="flex flex-1 overflow-auto">
<Splitpanes <Splitpanes horizontal :dbl-click-splitter="false">
horizontal <Pane v-if="!zenMode" style="height: auto" class="overflow-auto">
:push-other-panes="false"
class="hoppscotch-theme"
>
<Pane v-if="!zenMode" style="height: auto">
<AppHeader /> <AppHeader />
</Pane> </Pane>
<Pane class="flex-1"> <Pane class="flex flex-1 overflow-auto">
<Splitpanes vertical class="hoppscotch-theme"> <nuxt class="container" :hide-right-pane="hideRightPane" />
<Pane class="overflow-y-auto">
<nuxt class="container" :hide-right-pane="hideRightPane" />
</Pane>
</Splitpanes>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</Pane> </Pane>
<Pane style="height: auto" class="bg-primaryDark"> <Pane style="height: auto" class="overflow-auto">
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -56,13 +48,15 @@
@click.native="zenMode = !zenMode" @click.native="zenMode = !zenMode"
/> />
</div> </div>
<ButtonSecondary <div>
v-tippy="{ theme: 'tooltip' }" <ButtonSecondary
:title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')" v-tippy="{ theme: 'tooltip' }"
icon="menu_open" :title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
:class="['transform rotate-180', { ' rotate-0': hideRightPane }]" icon="menu_open"
@click.native="hideRightPane = !hideRightPane" :class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
/> @click.native="hideRightPane = !hideRightPane"
/>
</div>
</div> </div>
</Pane> </Pane>
</Splitpanes> </Splitpanes>

68
pages/api.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<!-- eslint-disable --> <!-- eslint-disable -->
<div> <div>
<Splitpanes vertical class="hoppscotch-theme"> <Splitpanes vertical :dbl-click-splitter="false">
<Pane min-size="60" class="bg-violet-100"> <Pane class="overflow-auto">
<Splitpanes horizontal class="hoppscotch-theme"> <Splitpanes horizontal :dbl-click-splitter="false">
<Pane class="bg-indigo-100"> <Pane class="overflow-auto">
<AppSection ref="request" label="request"> <AppSection ref="request" label="request">
<ul> <ul>
<li class="shrink"> <li class="shrink">
@@ -142,7 +142,7 @@
</ul> </ul>
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<span> <span>
<SmartToggle <SmartToggle
v-if="canListParameters" v-if="canListParameters"
@@ -175,7 +175,7 @@
" "
/> />
</div> </div>
<div class="row-wrapper"> <div class="flex flex-1">
<span> <span>
<ButtonSecondary <ButtonSecondary
@click.native="showCurlImportModal = !showCurlImportModal" @click.native="showCurlImportModal = !showCurlImportModal"
@@ -262,7 +262,7 @@
<AppSection label="authentication"> <AppSection label="authentication">
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="auth">{{ $t("authentication") }}</label> <label for="auth">{{ $t("authentication") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -317,7 +317,7 @@
</ul> </ul>
<ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'"> <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<input <input
class="input" class="input"
placeholder="Token" placeholder="Token"
@@ -343,7 +343,7 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="row-wrapper"> <div class="flex flex-1">
<SmartToggle <SmartToggle
:on="!URL_EXCLUDES.auth" :on="!URL_EXCLUDES.auth"
@change="setExclude('auth', !$event)" @change="setExclude('auth', !$event)"
@@ -359,7 +359,7 @@
> >
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="token-name">{{ $t("token_name") }}</label> <label for="token-name">{{ $t("token_name") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -487,7 +487,7 @@
<AppSection v-if="showPreRequestScript" label="preRequest"> <AppSection v-if="showPreRequestScript" label="preRequest">
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label> <label>{{ $t("javascript_code") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -521,7 +521,7 @@
<AppSection v-if="testsEnabled" label="postRequestTests"> <AppSection v-if="testsEnabled" label="postRequestTests">
<ul> <ul>
<li> <li>
<div class="row-wrapper"> <div class="flex flex-1">
<label>{{ $t("javascript_code") }}</label> <label>{{ $t("javascript_code") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -547,7 +547,7 @@
completeMode="test" completeMode="test"
/> />
<div v-if="testReports.length !== 0"> <div v-if="testReports.length !== 0">
<div class="row-wrapper"> <div class="flex flex-1">
<label>Test Reports</label> <label>Test Reports</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
@@ -570,7 +570,7 @@
</div> </div>
<p <p
v-else-if="testReport.result" v-else-if="testReport.result"
class="row-wrapper info" class="flex flex-1 info"
> >
<span :class="testReport.styles.class"> <span :class="testReport.styles.class">
<i class="material-icons"> <i class="material-icons">
@@ -595,7 +595,7 @@
</SmartTabs> </SmartTabs>
</section> </section>
</Pane> </Pane>
<Pane class="bg-purple-100"> <Pane class="overflow-auto">
<HttpResponse <HttpResponse
:response="response" :response="response"
:active="runningRequest" :active="runningRequest"
@@ -604,27 +604,25 @@
</Pane> </Pane>
</Splitpanes> </Splitpanes>
</Pane> </Pane>
<Pane max-size="40" class="bg-pink-100"> <Pane max-size="35" min-size="20" class="overflow-auto">
<aside class="lg:max-w-md"> <aside class="h-full bg-yellow-200">
<section> <SmartTabs>
<SmartTabs> <SmartTab :id="'history'" :label="$t('history')" :selected="true">
<SmartTab :id="'history'" :label="$t('history')" :selected="true"> <History
<History :page="'rest'"
:page="'rest'" @useHistory="handleUseHistory"
@useHistory="handleUseHistory" ref="historyComponent"
ref="historyComponent" />
/> </SmartTab>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')"> <SmartTab :id="'collections'" :label="$t('collections')">
<Collections /> <Collections />
</SmartTab> </SmartTab>
<SmartTab :id="'env'" :label="$t('environments')"> <SmartTab :id="'env'" :label="$t('environments')">
<Environments /> <Environments />
</SmartTab> </SmartTab>
</SmartTabs> </SmartTabs>
</section>
</aside> </aside>
</Pane> </Pane>
</Splitpanes> </Splitpanes>
@@ -673,7 +671,7 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="row-wrapper"> <div class="flex flex-1">
<label for="token-req-list">{{ $t("token_req_list") }}</label> <label for="token-req-list">{{ $t("token_req_list") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary

214
pages/doc.vue
View File

@@ -1,116 +1,123 @@
<template> <template>
<div class="page"> <div>
<div class="content"> <Splitpanes vertical :dbl-click-splitter="false">
<div class=""> <Pane class="overflow-auto">
<AppSection label="import"> <Splitpanes horizontal :dbl-click-splitter="false">
<div class="flex flex-col"> <Pane class="overflow-auto">
<label>{{ $t("collection") }}</label> <AppSection label="import">
<p> <div class="flex flex-col">
{{ $t("generate_docs_message") }} <label>{{ $t("collection") }}</label>
</p> <p>
<div class="row-wrapper"> {{ $t("generate_docs_message") }}
<label for="collectionUpload"> </p>
<ButtonSecondary <div class="flex flex-1">
v-tippy="{ theme: 'tooltip' }" <label for="collectionUpload">
title="JSON" <ButtonSecondary
icon="folder" v-tippy="{ theme: 'tooltip' }"
:label="$t('import_collections')" title="JSON"
@click.native="$refs.collectionUpload.click()" icon="folder"
:label="$t('import_collections')"
@click.native="$refs.collectionUpload.click()"
/>
</label>
<input
ref="collectionUpload"
class="input"
name="collectionUpload"
type="file"
@change="uploadCollection"
/>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="collectionJSON = '[]'"
/>
</div>
</div>
<SmartAceEditor
v-model="collectionJSON"
:lang="'json'"
:lint="false"
:options="{
maxLines: '16',
minLines: '8',
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
/> />
</label>
<input
ref="collectionUpload"
class="input"
name="collectionUpload"
type="file"
@change="uploadCollection"
/>
<div>
<ButtonSecondary <ButtonSecondary
v-tippy="{ theme: 'tooltip' }" icon="topic"
:title="$t('clear')" :label="$t('generate_docs')"
icon="clear_all" @click.native="getDoc"
@click.native="collectionJSON = '[]'"
/> />
</div> </div>
</div> </AppSection>
<SmartAceEditor </Pane>
v-model="collectionJSON" <Pane class="overflow-auto">
:lang="'json'" <AppSection label="documentation">
:lint="false" <div class="flex flex-col">
:options="{ <label>{{ $t("documentation") }}</label>
maxLines: '16', <p v-if="items.length === 0">
minLines: '8', {{ $t("generate_docs_first") }}
fontSize: '15px', </p>
autoScrollEditorIntoView: true, <div v-else class="flex flex-1">
showPrintMargin: false, <div
useWorker: false, v-tippy="{ theme: 'tooltip' }"
}" :title="
/> !currentUser
<ButtonSecondary ? $t('login_with_github_to') + $t('create_secret_gist')
icon="topic" : currentUser.provider !== 'github.com'
:label="$t('generate_docs')" ? $t('login_with_github_to') + $t('create_secret_gist')
@click.native="getDoc" : null
/> "
</div> >
</AppSection> <ButtonSecondary
:disabled="
<AppSection label="documentation"> !currentUser
<div class="flex flex-col"> ? true
<label>{{ $t("documentation") }}</label> : currentUser.provider !== 'github.com'
<p v-if="items.length === 0"> ? true
{{ $t("generate_docs_first") }} : false
</p> "
<div v-else class="row-wrapper"> icon="assignment"
<div label="$t('create_secret_gist')"
v-tippy="{ theme: 'tooltip' }" @click.native="createDocsGist"
:title=" />
!currentUser </div>
? $t('login_with_github_to') + $t('create_secret_gist') </div>
: currentUser.provider !== 'github.com' <div>
? $t('login_with_github_to') + $t('create_secret_gist') <span
: null v-for="(collection, index) in items"
" :key="`collection-${index}`"
> >
<ButtonSecondary <DocsCollection :collection="collection" />
:disabled=" </span>
!currentUser </div>
? true
: currentUser.provider !== 'github.com'
? true
: false
"
icon="assignment"
label="$t('create_secret_gist')"
@click.native="createDocsGist"
/>
</div> </div>
</div> </AppSection>
<div> </Pane>
<span </Splitpanes>
v-for="(collection, index) in items" </Pane>
:key="`collection-${index}`" <Pane max-size="35" min-size="20" class="overflow-auto">
> <aside class="lg:max-w-md">
<DocsCollection :collection="collection" /> <Collections
</span> :selected="selected"
</div> :doc="true"
</div> @use-collection="useSelectedCollection($event)"
</AppSection> @remove-collection="removeSelectedCollection($event)"
</div> />
</aside>
<aside class="lg:max-w-md"> </Pane>
<Collections </Splitpanes>
:selected="selected"
:doc="true"
@use-collection="useSelectedCollection($event)"
@remove-collection="removeSelectedCollection($event)"
/>
</aside>
</div>
</div> </div>
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import Mustache from "mustache" import Mustache from "mustache"
import { currentUser$ } from "~/helpers/fb/auth" import { currentUser$ } from "~/helpers/fb/auth"
import DocsTemplate from "~/assets/md/docs.md" import DocsTemplate from "~/assets/md/docs.md"
@@ -118,6 +125,7 @@ import folderContents from "~/assets/md/folderContents.md"
import folderBody from "~/assets/md/folderBody.md" import folderBody from "~/assets/md/folderBody.md"
export default { export default {
components: { Splitpanes, Pane },
data() { data() {
return { return {
collectionJSON: "[]", collectionJSON: "[]",

856
pages/graphql.vue
View File

@@ -1,443 +1,448 @@
<template> <template>
<div class="page"> <div>
<div class="content"> <Splitpanes vertical :dbl-click-splitter="false">
<div class=""> <Pane class="overflow-auto">
<AppSection label="endpoint"> <Splitpanes horizontal :dbl-click-splitter="false">
<ul> <Pane class="overflow-auto">
<li> <AppSection label="endpoint">
<label for="url">{{ $t("url") }}</label> <ul>
<input <li>
id="url" <label for="url">{{ $t("url") }}</label>
v-model="url" <input
type="url" id="url"
spellcheck="false" v-model="url"
class="input md:rounded-bl-lg" type="url"
:placeholder="$t('url')" spellcheck="false"
@keyup.enter="onPollSchemaClick()" class="input md:rounded-bl-lg"
:placeholder="$t('url')"
@keyup.enter="onPollSchemaClick()"
/>
</li>
<div>
<li>
<ButtonSecondary
id="get"
name="get"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
:label="
!isPollingSchema ? $t('connect') : $t('disconnect')
"
@click.native="onPollSchemaClick"
/>
</li>
</div>
</ul>
</AppSection>
<AppSection label="headers">
<div class="flex flex-col">
<label>{{ $t("headers") }}</label>
<ul v-if="headers.length !== 0">
<li>
<div class="flex flex-1">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')"
icon="clear_all"
@click.native="headers = []"
/>
</div>
</div>
</li>
</ul>
<ul
v-for="(header, index) in headers"
:key="`${header.value}_${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"
autofocus
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
/>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
@click.native="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active')
? !header.active
: false,
})
"
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</div>
</AppSection>
<AppSection label="query">
<div class="flex flex-1 gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
icon="play_arrow"
@click.native="runQuery()"
/>
<ButtonSecondary
ref="copyQueryButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
:icon="copyQueryIcon"
@click.native="copyQuery"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
:icon="prettifyIcon"
@click.native="doPrettifyQuery"
/>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
@click.native="saveRequest"
/>
</div>
</div>
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
@update-query="updateQuery"
/> />
</li> </AppSection>
<div> <AppSection label="variables">
<li> <div class="flex flex-col">
<ButtonSecondary <label>{{ $t("variables") }}</label>
id="get" <SmartAceEditor
name="get" v-model="variableString"
:icon="!isPollingSchema ? 'sync' : 'sync_disabled'" :lang="'json'"
:label="!isPollingSchema ? $t('connect') : $t('disconnect')" :options="{
@click.native="onPollSchemaClick" maxLines: 10,
minLines: 5,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/> />
</li> </div>
</div> </AppSection>
</ul> </Pane>
</AppSection> <Pane class="overflow-auto">
<AppSection ref="schema" label="schema">
<AppSection label="headers"> <div class="flex flex-1">
<div class="flex flex-col"> <label>{{ $t("schema") }}</label>
<label>{{ $t("headers") }}</label> <div v-if="schema">
<ul v-if="headers.length !== 0"> <ButtonSecondary
<li> ref="ToggleExpandResponse"
<div class="row-wrapper"> v-tippy="{ theme: 'tooltip' }"
<label for="headerList">{{ $t("header_list") }}</label> :title="
!expandResponse
? $t('expand_response')
: $t('collapse_response')
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
:icon="copySchemaIcon"
@click.native="copySchema"
/>
</div>
</div>
<SmartAceEditor
v-if="schema"
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
minLines: 16,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')"
name="status"
readonly
type="text"
/>
</AppSection>
<AppSection ref="response" label="response">
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="flex flex-1">
<label for="responseField">{{ $t("response_body") }}</label>
<div> <div>
<ButtonSecondary <ButtonSecondary
v-if="response"
ref="downloadResponse"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('clear')" :title="$t('download_file')"
icon="clear_all" :icon="downloadResponseIcon"
@click.native="headers = []" @click.native="downloadResponse"
/>
<ButtonSecondary
v-if="response"
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyResponseIcon"
@click.native="copyResponse"
/> />
</div> </div>
</div> </div>
</li> <SmartAceEditor
</ul>
<ul
v-for="(header, index) in headers"
:key="`${header.value}_${index}`"
class="
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<SmartAutoComplete
:placeholder="$t('header_count', { count: index + 1 })"
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setGQLHeaderKey', {
index,
value: $event,
})
"
/>
</li>
<li>
<input
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="`value ${index}`"
:value="header.value"
autofocus
@change="
$store.commit('setGQLHeaderValue', {
index,
value: $event.target.value,
})
"
/>
</li>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="
header.hasOwnProperty('active')
? header.active
? $t('turn_off')
: $t('turn_on')
: $t('turn_off')
"
@click.native="
$store.commit('setActiveGQLHeader', {
index,
value: header.hasOwnProperty('active')
? !header.active
: false,
})
"
/>
<i class="material-icons">
{{
header.hasOwnProperty("active")
? header.active
? "check_box"
: "check_box_outline_blank"
: "check_box"
}}
</i>
</li>
</div>
<div>
<li>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeRequestHeader(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addRequestHeader"
/>
</li>
</ul>
</div>
</AppSection>
<AppSection ref="schema" label="schema">
<div class="row-wrapper">
<label>{{ $t("schema") }}</label>
<div v-if="schema">
<ButtonSecondary
ref="ToggleExpandResponse"
v-tippy="{ theme: 'tooltip' }"
:title="
!expandResponse
? $t('expand_response')
: $t('collapse_response')
"
:icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
@click.native="ToggleExpandResponse"
/>
<ButtonSecondary
ref="downloadSchema"
v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')"
:icon="downloadSchemaIcon"
@click.native="downloadSchema"
/>
<ButtonSecondary
ref="copySchemaCode"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_schema')"
:icon="copySchemaIcon"
@click.native="copySchema"
/>
</div>
</div>
<SmartAceEditor
v-if="schema"
:value="schema"
:lang="'graphqlschema'"
:options="{
maxLines: responseBodyMaxLines,
minLines: 16,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_schema')"
name="status"
readonly
type="text"
/>
</AppSection>
<AppSection label="query">
<div class="row-wrapper gqlRunQuery">
<label for="gqlQuery">{{ $t("query") }}</label>
<div>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
title="
`${$t('run_query')} (${getSpecialKey()}-Enter)`
"
class="button"
icon="play_arrow"
@click.native="runQuery()"
/>
<ButtonSecondary
ref="copyQueryButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_query')"
:icon="copyQueryIcon"
@click.native="copyQuery"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
:icon="prettifyIcon"
@click.native="doPrettifyQuery"
/>
<ButtonSecondary
ref="saveRequest"
v-tippy="{ theme: 'tooltip' }"
:title="$t('save_to_collections')"
icon="create_new_folder"
@click.native="saveRequest"
/>
</div>
</div>
<GraphqlQueryEditor
ref="queryEditor"
v-model="gqlQueryString"
styles="rounded-b-lg"
:on-run-g-q-l-query="runQuery"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
@update-query="updateQuery"
/>
</AppSection>
<AppSection label="variables">
<div class="flex flex-col">
<label>{{ $t("variables") }}</label>
<SmartAceEditor
v-model="variableString"
:lang="'json'"
:options="{
maxLines: 10,
minLines: 5,
fontSize: '15px',
autoScrollEditorIntoView: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</div>
</AppSection>
<AppSection ref="response" label="response">
<div class="flex flex-col">
<label>{{ $t("response") }}</label>
<div class="row-wrapper">
<label for="responseField">{{ $t("response_body") }}</label>
<div>
<ButtonSecondary
v-if="response" v-if="response"
ref="downloadResponse" :value="response"
v-tippy="{ theme: 'tooltip' }" :lang="'json'"
:title="$t('download_file')" :lint="false"
:icon="downloadResponseIcon" :options="{
@click.native="downloadResponse" maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/> />
<ButtonSecondary
v-if="response"
ref="copyResponseButton"
v-tippy="{ theme: 'tooltip' }"
:title="$t('copy_response')"
:icon="copyResponseIcon"
@click.native="copyResponse"
/>
</div>
</div>
<SmartAceEditor
v-if="response"
:value="response"
:lang="'json'"
:lint="false"
:options="{
maxLines: responseBodyMaxLines,
minLines: 10,
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
name="status"
readonly
type="text"
/>
</div>
</AppSection>
</div>
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<section class="flex-col">
<input <input
v-model="graphqlFieldsFilterText" v-else
ref="status"
class="input rounded-b-lg missing-data-response"
:value="$t('waiting_receive_response')"
name="status"
readonly
type="text" type="text"
:placeholder="$t('search')"
class="input rounded-t-lg"
/> />
<SmartTabs ref="gqlTabs" styles="m-4"> </div>
<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"
>
<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"
>
<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"
>
<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"
>
<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
"
>
{{ $t("send_request_first") }}
</p>
</AppSection> </AppSection>
</SmartTab> </Pane>
</Splitpanes>
</Pane>
<Pane max-size="35" min-size="20" class="overflow-auto">
<aside class="lg:max-w-md">
<SmartTabs>
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<section class="flex-col">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="input 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"
>
<GraphqlField
:gql-field="field"
:jump-type-callback="handleJumpToType"
/>
</div>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')"> <SmartTab
<History v-if="mutationFields.length > 0"
ref="graphqlHistoryComponent" :id="'mutations'"
:page="'graphql'" :label="$t('mutations')"
@useHistory="handleUseHistory" >
/> <div
</SmartTab> 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"
>
<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"
>
<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
"
>
{{ $t("send_request_first") }}
</p>
</AppSection>
</SmartTab>
<SmartTab :id="'history'" :label="$t('history')">
<History
ref="graphqlHistoryComponent"
:page="'graphql'"
@useHistory="handleUseHistory"
/>
</SmartTab>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
</SmartTabs>
</aside>
</Pane>
</Splitpanes>
<SmartTab :id="'collections'" :label="$t('collections')">
<CollectionsGraphql />
</SmartTab>
</SmartTabs>
</aside>
</div>
<CollectionsSaveRequest <CollectionsSaveRequest
mode="graphql" mode="graphql"
:show="showSaveRequestModal" :show="showSaveRequestModal"
@@ -448,6 +453,7 @@
</template> </template>
<script> <script>
import { Splitpanes, Pane } from "splitpanes"
import * as gql from "graphql" import * as gql from "graphql"
import { commonHeaders } from "~/helpers/headers" import { commonHeaders } from "~/helpers/headers"
import { getPlatformSpecialKey } from "~/helpers/platformutils" import { getPlatformSpecialKey } from "~/helpers/platformutils"
@@ -456,10 +462,10 @@ import { getSettingSubject } from "~/newstore/settings"
import { addGraphqlHistoryEntry } from "~/newstore/history" import { addGraphqlHistoryEntry } from "~/newstore/history"
export default { export default {
components: { Splitpanes, Pane },
beforeRouteLeave(_to, _from, next) { beforeRouteLeave(_to, _from, next) {
this.isPollingSchema = false this.isPollingSchema = false
if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription) if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
next() next()
}, },
data() { data() {
@@ -1122,8 +1128,6 @@ export default {
.gqlTabs { .gqlTabs {
@apply relative; @apply relative;
@apply overflow-auto; @apply overflow-auto;
max-height: calc(100vh - 192px);
} }
.gqlRunQuery { .gqlRunQuery {

35
pages/realtime.vue
View File

@@ -1,24 +1,19 @@
<template> <template>
<div class="page"> <div>
<section id="options"> <SmartTabs>
<SmartTabs> <SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
<SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true"> <RealtimeWebsocket />
<RealtimeWebsocket /> </SmartTab>
</SmartTab> <SmartTab :id="'sse'" :label="$t('sse')">
<RealtimeSse />
<SmartTab :id="'sse'" :label="$t('sse')"> </SmartTab>
<RealtimeSse /> <SmartTab :id="'socketio'" :label="$t('socketio')">
</SmartTab> <RealtimeSocketio />
</SmartTab>
<SmartTab :id="'socketio'" :label="$t('socketio')"> <SmartTab :id="'mqtt'" :label="$t('mqtt')">
<RealtimeSocketio /> <RealtimeMqtt />
</SmartTab> </SmartTab>
</SmartTabs>
<SmartTab :id="'mqtt'" :label="$t('mqtt')">
<RealtimeMqtt />
</SmartTab>
</SmartTabs>
</section>
</div> </div>
</template> </template>

2
pages/settings.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="page"> <div>
<div class="space-y-8"> <div class="space-y-8">
<div class="md:grid md:grid-cols-3 md:gap-4"> <div class="md:grid md:grid-cols-3 md:gap-4">
<div class="md:col-span-1 p-8"> <div class="md:col-span-1 p-8">