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

refactor(ui): sort windicss classes

Browse Source
This commit is contained in:
liyasthomas
2021-07-17 23:10:28 +05:30
parent a2a9bae0e3
commit 590c21209c
85 changed files with 32066 additions and 896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/scss/styles.scss
View File

@@ -110,13 +110,24 @@ a {
.tippy-popper {
.tooltip-theme {
@apply bg-secondary;
@apply bg-tooltip;
@apply text-primaryLight;
@apply text-xs;
@apply font-semibold;
@apply py-1;
@apply px-2;
@apply px-4;
@apply shadow;
kbd {
@apply first:ml-2;
@apply last:-mr-1;
@apply font-sans;
@apply bg-secondaryDark;
@apply text-primaryDark;
@apply rounded;
@apply px-1;
@apply ml-1;
}
}
.popover-theme {
@@ -124,6 +135,7 @@ a {
@apply text-secondary;
@apply p-2;
@apply shadow-lg;
@apply focus:outline-none;
}
&[x-placement^="top"] .tippy-tooltip .tippy-arrow {

2
assets/scss/themes.scss
View File

@@ -53,7 +53,7 @@
// Error color
--error-color: theme("colors.true-gray.700");
// Tooltip color
--tooltip-color: theme("colors.true-gray.50");
--tooltip-color: theme("colors.true-gray.700");
// Editor theme
--editor-theme: "textmate";
}

27
components/app/Announcement.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="flex bg-primary border-b justify-between border-dividerLight">
<div class="bg-primary border-b border-dividerLight flex justify-between">
<span class="flex">
<SmartLink
to="https://forms.gle/8yFiEynXB7h477Ns6"
blank
class="
relative
flex
py-3
px-4
transition
relative
items-center
justify-center
px-4
py-3
transition
group
"
>
<i class="material-icons mr-4">science</i>
<i class="mr-4 material-icons">science</i>
<span class="text-secondaryDark text-xs">
<span class="md:hidden"> Beta Layout </span>
<span class="hidden md:inline">
@@ -24,17 +24,16 @@
</span>
<span
class="
border-l border-divider
flex
font-semibold
text-accent text-xs
ml-4
pl-4
transition
items-center
justify-center
pl-4
ml-4
font-semibold
transition
border-l
group-hover:text-accentDark
border-divider
text-accent text-xs
"
>
<span class="md:hidden"> Give Feedback </span>
@@ -43,7 +42,7 @@
</SmartLink>
<SmartLink
to="https://hoppscotch.io"
class="flex items-center justify-center transition group"
class="flex transition items-center justify-center group"
>
<span class="text-secondaryDark text-xs">
Switch back to the Hoppscotch website

4
components/app/Extensions.vue
View File

@@ -7,7 +7,7 @@
</div>
</template>
<template #body>
<div class="flex flex-col px-2 space-y-2">
<div class="flex flex-col space-y-2 px-2">
<SmartItem
to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
blank
@@ -25,7 +25,7 @@
</div>
</template>
<template #footer>
<div class="px-2 text-secondaryLight text-xs">
<div class="text-secondaryLight text-xs px-2">
{{ $t("extensions_info1") }}
</div>
</template>

14
components/app/Header.vue
View File

@@ -1,9 +1,9 @@
<template>
<header class="flex items-center justify-between p-2 flex-1">
<div class="inline-flex space-x-2 items-center font-bold flex-shrink-0">
<header class="flex flex-1 p-2 items-center justify-between">
<div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
<AppLogo class="h-6 mx-4" /> Hoppscotch
</div>
<div class="inline-flex space-x-2 items-center flex-shrink-0">
<div class="space-x-2 flex-shrink-0 inline-flex items-center">
<AppGitHubStarButton class="mt-1 mr-2" />
<TabPrimary
id="installPWA"
@@ -74,7 +74,10 @@
<template #trigger>
<TabPrimary
v-tippy="{ theme: 'tooltip' }"
:title="$t('more')"
:title="
$t('more') +
`<kbd class='shortcut'>${getSpecialKey()}</kbd><kbd class='shortcut'>M</kbd>`
"
icon="drag_indicator"
/>
</template>
@@ -119,7 +122,7 @@
import intializePwa from "~/helpers/pwa"
import { currentUser$ } from "~/helpers/fb/auth"
import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
export default {
data() {
@@ -176,6 +179,7 @@ export default {
// fallback
}
},
getSpecialKey: getPlatformSpecialKey,
},
}
</script>

2
components/app/Logo.vue
View File

@@ -1,6 +1,6 @@
<template>
<svg
class="logo fill-current"
class="fill-current logo"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"

8
components/app/Shortcuts.vue
View File

@@ -17,13 +17,13 @@
v-for="(key, keyIndex) in shortcut.keys"
:key="`shortcut-${index}-key-${keyIndex}`"
class="
py-2
px-4
m-1
text-xs
border border-divider
rounded-lg
font-bold
m-1
text-xs
py-2
px-4
"
>
{{ key }}

34
components/button/Primary.vue
View File

@@ -4,19 +4,19 @@
:exact="exact"
:blank="blank"
class="
font-semibold
py-2
transition
inline-flex
items-center
justify-center
py-2
font-semibold
transition
focus:outline-none
"
:class="[
color
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
: `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2',
label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'pointer-events-none': loading },
@@ -26,6 +26,10 @@
'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
gradient,
},
{
'border border-divider hover:border-dividerDark focus:border-dividerDark':
outline,
},
]"
:disabled="disabled"
:tabindex="loading ? '-1' : '0'"
@@ -49,9 +53,15 @@
class="svg-icons"
/>
{{ label }}
<span v-if="shortkey" class="px-1 ml-2 rounded bg-accentLight">{{
shortkey
}}</span>
<div v-if="shortcuts.length" class="ml-2">
<kbd
v-for="(key, index) in shortcuts"
:key="`key-${index}`"
class="bg-accentLight rounded ml-1 px-1 inline-flex"
>
{{ key }}
</kbd>
</div>
</span>
<SmartSpinner v-else />
</SmartLink>
@@ -116,9 +126,13 @@ export default {
type: Boolean,
default: false,
},
shortkey: {
type: String,
default: "",
outline: {
type: Boolean,
default: false,
},
shortcuts: {
type: Array,
default: () => [],
},
},
}

28
components/button/Secondary.vue
View File

@@ -4,19 +4,19 @@
:exact="exact"
:blank="blank"
class="
font-semibold
py-2
transition
inline-flex
items-center
justify-center
py-2
font-semibold
transition
focus:outline-none
"
:class="[
color
? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
: 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
label ? 'px-3' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled },
{ 'flex-row-reverse': reverse },
@@ -41,6 +41,22 @@
class="svg-icons"
/>
{{ label }}
<div v-if="shortcuts.length" class="ml-2">
<kbd
v-for="(key, index) in shortcuts"
:key="`key-${index}`"
class="
bg-dividerLight
rounded
text-secondaryLight
ml-1
px-1
inline-flex
"
>
{{ key }}
</kbd>
</div>
</SmartLink>
</template>
@@ -91,6 +107,10 @@ export default {
type: Boolean,
default: false,
},
shortcuts: {
type: Array,
default: () => [],
},
},
}
</script>

4
components/collections/Add.vue
View File

@@ -5,8 +5,8 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelAdd" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input

4
components/collections/AddFolder.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelAddFolder"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>
{{ $t("label") }}
</label>

16
components/collections/ChooseType.vue
View File

@@ -18,15 +18,15 @@
type="text"
autofocus
class="
flex
w-full
px-4
text-xs
py-3
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
border-b border-dividerLight
flex
font-medium
text-xs
w-full
py-3
px-4
focus:outline-none
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>

4
components/collections/Edit.vue
View File

@@ -7,8 +7,8 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
<div class="flex flex-col px-2">
<label for="selectLabelEdit" class="font-semibold text-xs px-4 pb-4">{{
$t("label")
}}</label>
<input

4
components/collections/EditFolder.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelEditFolder"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>{{ $t("label") }}</label
>
<input

8
components/collections/EditRequest.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
{{ $t("label") }}</label
>
<div class="flex flex-col px-2">
<label for="selectLabelEditReq" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input
id="selectLabelEditReq"
v-model="requestUpdateData.name"

2
components/collections/ImportExport.vue
View File

@@ -116,7 +116,7 @@
</div>
<div
v-if="mode == 'import_from_my_collections'"
class="flex px-2 flex-col"
class="flex flex-col px-2"
>
<div class="select-wrapper">
<select

6
components/collections/SaveRequest.vue
View File

@@ -5,8 +5,8 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelSaveReq" class="font-semibold text-xs px-4 pb-4">
{{ $t("token_req_name") }}</label
>
<input
@@ -16,7 +16,7 @@
type="text"
@keyup.enter="saveRequestAs"
/>
<label class="px-4 pt-4 font-semibold pb-4 text-xs">
<label class="font-semibold text-xs px-4 pt-4 pb-4">
Select Location
</label>
<CollectionsGraphql

4
components/collections/graphql/Add.vue
View File

@@ -5,8 +5,8 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelGqlAdd" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input

4
components/collections/graphql/AddFolder.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelGqlAddFolder"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>
{{ $t("label") }}
</label>

40
components/collections/graphql/Collection.vue
View File

@@ -11,13 +11,13 @@
>
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -27,15 +27,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -99,7 +100,7 @@
<CollectionsGraphqlFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:picked="picked"
:saving-mode="savingMode"
:folder="folder"
@@ -116,7 +117,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -134,17 +135,16 @@
collection.folders.length === 0 && collection.requests.length === 0
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("collection_empty") }}
</span>

4
components/collections/graphql/Edit.vue
View File

@@ -7,8 +7,8 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelGqlEdit" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input

4
components/collections/graphql/EditFolder.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditFolder"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>
{{ $t("label") }}
</label>

4
components/collections/graphql/EditRequest.vue
View File

@@ -7,10 +7,10 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelGqlEditReq"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>
{{ $t("label") }}
</label>

40
components/collections/graphql/Folder.vue
View File

@@ -11,13 +11,13 @@
>
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -27,15 +27,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -95,7 +96,7 @@
<CollectionsGraphqlFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:picked="picked"
:saving-mode="savingMode"
:folder="subFolder"
@@ -112,7 +113,7 @@
<CollectionsGraphqlRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:picked="picked"
:saving-mode="savingMode"
:request="request"
@@ -133,17 +134,16 @@
folder.requests.length === 0
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("folder_empty") }}
</span>

25
components/collections/graphql/Request.vue
View File

@@ -10,15 +10,15 @@
>
<span
class="
font-mono font-bold
cursor-pointer
flex
justify-center
items-center
font-mono font-bold
mx-2
text-xs
w-12
mx-2
justify-center
items-center
truncate
cursor-pointer
"
@click="!doc ? selectRequest() : {}"
>
@@ -28,15 +28,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="!doc ? selectRequest() : {}"
>

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

@@ -4,7 +4,7 @@
:class="{ 'rounded-lg border-2 border-divider': savingMode }"
>
<div
class="flex flex-col sticky top-10 z-10"
class="flex flex-col top-10 z-10 sticky"
:class="{ 'bg-primary': !savingMode }"
>
<input
@@ -13,17 +13,18 @@
type="search"
:placeholder="$t('search')"
class="
px-4
py-3
text-xs
border-b border-dividerLight
flex flex-1
font-medium
bg-primaryLight
border-b border-dividerLight
flex
font-medium
flex-1
text-xs
py-3
px-4
focus:outline-none
"
/>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary
icon="add"
:label="$t('new')"
@@ -59,18 +60,18 @@
</div>
<div
v-if="collections.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">create_new_folder</i>
<i class="opacity-50 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center">
{{ $t("create_new_collection") }}
</span>
</div>
<div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>
<i class="opacity-50 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>

25
components/collections/index.vue
View File

@@ -4,7 +4,7 @@
:class="{ 'rounded-lg border-2 border-divider': saveRequest }"
>
<div
class="flex flex-col sticky z-10 top-0 bg-primary"
class="bg-primary flex flex-col top-0 z-10 sticky"
:class="{ '!top-10': !saveRequest && !doc }"
>
<input
@@ -13,13 +13,14 @@
type="search"
:placeholder="$t('search')"
class="
px-4
py-3
text-xs
border-b border-dividerLight
flex flex-1
font-medium
bg-primaryLight
border-b border-dividerLight
flex
font-medium
flex-1
text-xs
py-3
px-4
focus:outline-none
"
/>
@@ -30,7 +31,7 @@
@update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam"
/>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary
v-if="
collectionsType.type == 'team-collections' &&
@@ -94,18 +95,18 @@
</div>
<div
v-if="collections.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">create_new_folder</i>
<i class="opacity-50 pb-2 material-icons">create_new_folder</i>
<span class="text-xs text-center">
{{ $t("create_new_collection") }}
</span>
</div>
<div
v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>
<i class="opacity-50 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>

40
components/collections/my/Collection.vue
View File

@@ -11,13 +11,13 @@
>
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -27,15 +27,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -115,7 +116,7 @@
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -134,7 +135,7 @@
<CollectionsMyRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -156,17 +157,16 @@
(collection.requests == undefined || collection.requests.length === 0)
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("collection_empty") }}
</span>

40
components/collections/my/Folder.vue
View File

@@ -11,13 +11,13 @@
>
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -27,15 +27,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -100,7 +101,7 @@
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -119,7 +120,7 @@
<CollectionsMyRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -142,17 +143,16 @@
folder.requests.length === 0
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("folder_empty") }}
</span>

25
components/collections/my/Request.vue
View File

@@ -10,15 +10,15 @@
>
<span
class="
font-mono font-bold
cursor-pointer
flex
justify-center
items-center
font-mono font-bold
mx-2
text-xs
w-12
mx-2
justify-center
items-center
truncate
cursor-pointer
"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
@@ -36,15 +36,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="!doc ? selectRequest() : {}"
>

40
components/collections/teams/Collection.vue
View File

@@ -3,13 +3,13 @@
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -19,15 +19,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -112,7 +113,7 @@
<CollectionsTeamsFolder
v-for="(folder, index) in collection.children"
:key="`folder-${folder}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
@@ -132,7 +133,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in collection.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="-1"
@@ -153,17 +154,16 @@
(collection.requests == undefined || collection.requests.length === 0)
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("collection_empty") }}
</span>

40
components/collections/teams/Folder.vue
View File

@@ -3,13 +3,13 @@
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="toggleShowChildren()"
>
@@ -19,15 +19,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
@@ -97,7 +98,7 @@
<CollectionsTeamsFolder
v-for="(subFolder, subFolderIndex) in folder.children"
:key="`subFolder-${subFolderIndex}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
@@ -117,7 +118,7 @@
<CollectionsTeamsRequest
v-for="(request, index) in folder.requests"
:key="`request-${index}`"
class="ml-5 border-l border-dividerLight"
class="border-l border-dividerLight ml-5"
:request="request.request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
@@ -137,17 +138,16 @@
(folder.requests == undefined || folder.requests.length === 0)
"
class="
flex
items-center
text-secondaryLight
flex-col
p-4
justify-center
ml-5
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-5
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">folder_open</i>
<i class="opacity-50 pb-2 material-icons">folder_open</i>
<span class="text-xs text-center">
{{ $t("folder_empty") }}
</span>

25
components/collections/teams/Request.vue
View File

@@ -3,15 +3,15 @@
<div class="flex items-center group">
<span
class="
font-mono font-bold
cursor-pointer
flex
justify-center
items-center
font-mono font-bold
mx-2
text-xs
w-12
mx-2
justify-center
items-center
truncate
cursor-pointer
"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
@@ -29,15 +29,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="!doc ? selectRequest() : {}"
>

4
components/environments/Add.vue
View File

@@ -7,8 +7,8 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelEnvAdd" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input

38
components/environments/Edit.vue
View File

@@ -7,8 +7,8 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelEnvEdit" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input
@@ -19,10 +19,10 @@
:placeholder="editingEnvironment.name"
@keyup.enter="saveEnvironment"
/>
<div class="flex justify-between items-center flex-1">
<div class="flex flex-1 justify-between items-center">
<label
for="variableList"
class="px-4 pt-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pt-4 pb-4"
>
{{ $t("env_variable_list") }}
</label>
@@ -41,27 +41,26 @@
/>
</div>
</div>
<div class="border-2 border-divider">
<div class="border-divider border-2">
<div
v-for="(variable, index) in vars"
:key="`variable-${index}`"
class="
divide-x divide-dashed divide-divider
border-b border-divider
flex
border-b
divide-x
border-divider
divide-dashed divide-divider
"
>
<input
v-model="variable.key"
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('variable_count', { count: index + 1 })"
@@ -70,12 +69,13 @@
<input
v-model="variable.value"
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"

21
components/environments/Environment.vue
View File

@@ -2,13 +2,13 @@
<div class="flex items-center group">
<span
class="
cursor-pointer
flex
justify-center
items-center
text-xs
w-10
justify-center
items-center
truncate
cursor-pointer
"
@click="$emit('edit-environment')"
>
@@ -16,15 +16,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
@click="$emit('edit-environment')"
>

24
components/environments/index.vue
View File

@@ -1,20 +1,20 @@
<template>
<AppSection label="environments">
<div class="flex flex-col sticky z-10 top-10 bg-primary">
<div class="bg-primary flex flex-col top-10 z-10 sticky">
<div class="select-wrapper">
<select
v-model="selectedEnvironmentIndex"
:disabled="environments.length == 0"
class="
flex
w-full
px-4
text-xs
py-3
focus:outline-none
border-b border-dividerLight
font-medium
bg-primaryLight
border-b border-dividerLight
flex
font-medium
text-xs
w-full
py-3
px-4
focus:outline-none
"
>
<option :value="-1">No environment</option>
@@ -30,7 +30,7 @@
</option>
</select>
</div>
<div class="border-b flex justify-between flex-1 border-dividerLight">
<div class="border-b border-dividerLight flex flex-1 justify-between">
<ButtonSecondary
icon="add"
:label="$t('new')"
@@ -60,9 +60,9 @@
/>
<div
v-if="environments.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">library_add</i>
<i class="opacity-50 pb-2 material-icons">library_add</i>
<span class="text-xs text-center">
{{ $t("create_new_environment") }}
</span>

12
components/firebase/Login.vue
View File

@@ -28,13 +28,13 @@
</div>
<div v-if="mode === 'email'" class="flex flex-col space-y-2">
<div class="flex items-center">
<label for="email" class="flex items-center px-4">
<i class="material-icons opacity-75">mail</i>
<label for="email" class="flex px-4 items-center">
<i class="opacity-75 material-icons">mail</i>
</label>
<input
id="email"
v-model="form.email"
class="flex flex-1 rounded px-4 py-2 outline-none"
class="rounded flex outline-none flex-1 py-2 px-4"
type="email"
name="email"
placeholder="enter your email"
@@ -61,8 +61,8 @@
/>
</div>
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
<div class="flex justify-center max-w-md items-center flex-col">
<i class="material-icons text-accent text-4xl"> verified </i>
<div class="flex flex-col max-w-md justify-center items-center">
<i class="text-accent text-4xl material-icons"> verified </i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
@@ -88,7 +88,7 @@
</p>
<p
v-if="mode === 'email-sent'"
class="flex flex-1 justify-between text-secondaryLight text-xs"
class="flex flex-1 text-secondaryLight text-xs justify-between"
>
<SmartAnchor
class="link"

18
components/graphql/Field.vue
View File

@@ -24,21 +24,21 @@
</div>
<div
v-if="gqlField.description"
class="py-2 text-xs text-secondaryLight field-desc"
class="text-xs text-secondaryLight py-2 field-desc"
>
{{ gqlField.description }}
</div>
<div
v-if="gqlField.isDeprecated"
class="
inline-block
px-2
py-1
my-1
text-xs text-black
bg-yellow-200
rounded
font-semibold
bg-yellow-200
my-1
text-xs text-black
py-1
px-2
inline-block
field-deprecated
"
>
@@ -46,7 +46,7 @@
</div>
<div v-if="fieldArgs.length > 0">
<h5 class="my-2 text-xs">Arguments:</h5>
<div class="pl-4 border-l-2 border-divider">
<div class="border-divider border-l-2 pl-4">
<div v-for="(field, index) in fieldArgs" :key="`field-${index}`">
<span class="font-semibold text-xs">
{{ field.name }}:
@@ -57,7 +57,7 @@
</span>
<div
v-if="field.description"
class="py-2 text-xs text-secondaryLight field-desc"
class="text-xs text-secondaryLight py-2 field-desc"
>
{{ field.description }}
</div>

10
components/graphql/Type.vue
View File

@@ -11,7 +11,7 @@
</div>
<div
v-if="gqlType.description"
class="py-2 text-xs text-secondaryLight type-desc"
class="text-xs text-secondaryLight py-2 type-desc"
>
{{ gqlType.description }}
</div>
@@ -24,7 +24,7 @@
<GraphqlTypeLink
:gql-type="gqlInterface"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
class="border-divider border-l-2 pl-4"
/>
</div>
</div>
@@ -35,7 +35,7 @@
:key="`child-${index}`"
:gql-type="child"
:jump-type-callback="jumpTypeCallback"
class="pl-4 border-l-2 border-divider"
class="border-divider border-l-2 pl-4"
/>
</div>
<div v-if="gqlType.getFields">
@@ -43,7 +43,7 @@
<GraphqlField
v-for="(field, index) in gqlType.getFields()"
:key="`field-${index}`"
class="pl-4 border-l-2 border-divider"
class="border-divider border-l-2 pl-4"
:gql-field="field"
:is-highlighted="isFieldHighlighted({ field })"
:jump-type-callback="jumpTypeCallback"
@@ -54,7 +54,7 @@
<div
v-for="(value, index) in gqlType.getValues()"
:key="`value-${index}`"
class="pl-4 border-l-2 border-divider"
class="border-divider border-l-2 pl-4"
v-text="value.name"
></div>
</div>

20
components/history/graphql/Card.vue
View File

@@ -3,16 +3,17 @@
<div class="flex items-center">
<span
class="
py-3
cursor-pointer
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
pl-4
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
font-semibold
group-hover:text-secondaryDark
"
data-testid="restore_history_entry"
@click="$emit('use-entry')"
@@ -52,12 +53,11 @@
v-for="(line, index) in query"
:key="`line-${index}`"
class="
text-xs
cursor-pointer
truncate
px-4
font-mono
text-secondaryLight
text-xs text-secondaryLight
px-4
truncate
"
data-testid="restore_history_entry"
@click="$emit('use-entry')"

27
components/history/index.vue
View File

@@ -2,24 +2,25 @@
<AppSection label="history">
<div
class="
flex
sticky
z-10
bg-primaryLight
top-10
border-b border-dividerLight
flex
top-10
z-10
sticky
"
>
<input
v-model="filterText"
type="search"
class="
px-4
py-3
text-xs
flex flex-1
font-medium
bg-primaryLight
flex
font-medium
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('search')"
@@ -56,18 +57,18 @@
</div>
<div
v-if="!(filteredHistory.length !== 0 || history.length === 0)"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">manage_search</i>
<i class="opacity-50 pb-2 material-icons">manage_search</i>
<span class="text-xs text-center">
{{ $t("nothing_found") }} "{{ filterText }}"
</span>
</div>
<div
v-if="history.length === 0"
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
class="flex flex-col text-secondaryLight p-4 items-center justify-center"
>
<i class="material-icons opacity-50 pb-2">schedule</i>
<i class="opacity-50 pb-2 material-icons">schedule</i>
<span class="text-xs text-center">
{{ $t("history_empty") }}
</span>

25
components/history/rest/Card.vue
View File

@@ -2,15 +2,15 @@
<div class="flex items-center group">
<span
class="
font-mono font-bold
cursor-pointer
flex
justify-center
items-center
font-mono font-bold
mx-2
text-xs
w-12
mx-2
justify-center
items-center
truncate
cursor-pointer
"
:class="entryStatus.className"
data-testid="restore_history_entry"
@@ -21,15 +21,16 @@
</span>
<span
class="
py-3
cursor-pointer
pr-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
py-3
pr-2
transition
group-hover:text-secondaryDark
"
data-testid="restore_history_entry"
:title="duration"

38
components/http/BodyParameters.vue
View File

@@ -2,15 +2,15 @@
<AppSection label="bodyParameters">
<div
class="
sticky
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-110px
z-10
bg-primary
flex flex-1
sticky
items-center
justify-between
pl-4
border-b border-dividerLight
"
>
<label for="reqParamList" class="font-semibold text-xs">
@@ -27,22 +27,21 @@
v-for="(param, index) in bodyParams"
:key="`param-${index}`"
class="
divide-x divide-dashed divide-divider
border-b border-dashed border-divider
flex
border-b border-dashed
divide-x
border-divider
divide-dashed divide-divider
"
:class="{ 'border-t': index == 0 }"
>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('parameter_count', { count: index + 1 })"
@@ -55,12 +54,13 @@
<input
v-if="!requestBodyParamIsFile(index)"
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"

26
components/http/CodegenModal.vue
View File

@@ -5,8 +5,8 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="requestType" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="requestType" class="font-semibold text-xs px-4 pb-4">
{{ $t("choose_language") }}
</label>
<div class="flex flex-1">
@@ -22,17 +22,17 @@
<template #trigger>
<span
class="
flex
w-full
px-4
text-xs
py-3
rounded-lg
font-semibold
focus:outline-none
border-b border-dividerLight
bg-primaryLight
border-b border-dividerLight
rounded-lg
cursor-pointer
flex
font-semibold
text-xs
w-full
py-3
px-4
focus:outline-none
"
>
{{ codegens.find((x) => x.id === requestType).name }}
@@ -50,10 +50,10 @@
</tippy>
</span>
</div>
<div class="flex justify-between flex-1">
<div class="flex flex-1 justify-between">
<label
for="generatedCode"
class="px-4 pt-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pt-4 pb-4"
>
{{ $t("generated_code") }}
</label>

27
components/http/Headers.vue
View File

@@ -2,15 +2,15 @@
<AppSection label="headers">
<div
class="
sticky
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-110px
z-10
bg-primary
flex flex-1
sticky
items-center
justify-between
pl-4
border-b border-dividerLight
"
>
<label for="headerList" class="font-semibold text-xs">
@@ -35,11 +35,9 @@
v-for="(header, index) in headers$"
:key="`header-${index}`"
class="
divide-x divide-dashed divide-divider
border-b border-dashed border-divider
flex
border-b border-dashed
divide-x
border-divider
divide-dashed divide-divider
"
:class="{ 'border-t': index == 0 }"
>
@@ -59,12 +57,13 @@
/>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"

38
components/http/Parameters.vue
View File

@@ -2,15 +2,15 @@
<AppSection label="parameters">
<div
class="
sticky
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-110px
z-10
bg-primary
flex flex-1
sticky
items-center
justify-between
pl-4
border-b border-dividerLight
"
>
<label for="paramList" class="font-semibold text-xs">
@@ -35,22 +35,21 @@
v-for="(param, index) in params$"
:key="`param-${index}`"
class="
divide-x divide-dashed divide-divider
border-b border-dashed border-divider
flex
border-b border-dashed
divide-x
border-divider
divide-dashed divide-divider
"
:class="{ 'border-t': index == 0 }"
>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('parameter_count', { count: index + 1 })"
@@ -67,12 +66,13 @@
/>
<input
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
:placeholder="$t('value_count', { count: index + 1 })"

10
components/http/RawBody.vue
View File

@@ -2,15 +2,15 @@
<div>
<div
class="
sticky
bg-primary
border-b border-dividerLight
flex flex-1
pl-4
top-110px
z-10
bg-primary
flex flex-1
sticky
items-center
justify-between
pl-4
border-b border-dividerLight
"
>
<label for="rawBody" class="font-semibold text-xs">

302
components/http/Request.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="sticky top-0 z-10 bg-primary flex p-4">
<div class="bg-primary flex p-4 top-0 z-10 sticky">
<div class="relative inline-flex">
<span class="select-wrapper">
<tippy
@@ -14,23 +14,23 @@
<input
id="method"
class="
flex
rounded-l-lg
bg-primaryLight
font-mono
w-32
px-4
py-2
truncate
text-secondaryDark
font-semibold
border border-divider
transition
focus:outline-none focus:border-accent
rounded-l-lg
cursor-pointer
flex
font-mono
text-secondaryDark
py-2
px-4
transition
w-32
truncate
focus:outline-none focus:border-accent
"
:value="newMethod$"
autofocus
readonly
/>
</template>
<SmartItem
@@ -51,15 +51,15 @@
id="url"
v-model="newEndpoint$"
class="
w-full
font-mono font-semibold
truncate
text-secondaryDark
px-4
py-2
border border-divider
bg-primaryLight
border border-divider
font-mono
text-secondaryDark
w-full
py-2
px-4
transition
truncate
focus:outline-none focus:border-accent
"
name="url"
@@ -71,173 +71,103 @@
<!-- <SmartUrlField v-else v-model="uri" /> -->
</div>
<div class="flex">
<span
<ButtonPrimary
id="send"
class="
px-4
py-2
border border-accent
font-mono
flex
items-center
truncate
font-semibold
bg-accent
text-white
cursor-pointer
dark:text-accentDark
"
@click="newSendRequest"
>
{{ $t("send") }}
</span>
<!-- <span
v-else
id="cancel"
class="
px-4
py-2
border border-accent
font-mono
flex
items-center
truncate
font-semibold
bg-accent
text-white
cursor-pointer
"
@click="cancelRequest"
>
{{ $t("cancel") }}
</span> -->
<tippy
ref="sendOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<span
class="
px-1
py-2
border border-accent
font-mono
flex
items-center
justify-center
truncate
font-semibold
bg-accent
text-white
rounded-r-lg
dark:text-accentDark
class="rounded-none font-bold"
:label="!loading ? $t('send') : $('cancel')"
:shortcuts="[getSpecialKey(), 'G']"
@click.native="!loading ? newSendRequest() : cancelRequest()"
/>
<span class="inline-flex">
<tippy
ref="sendOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
</template>
<SmartItem
:label="$t('import_curl')"
icon="import_export"
@click.native="
showCurlImportModal = !showCurlImportModal
$refs.sendOptions.tippy().hide()
"
>
<i class="material-icons">keyboard_arrow_down</i>
</span>
</template>
<SmartItem
:label="$t('import_curl')"
icon="import_export"
@click.native="
showCurlImportModal = !showCurlImportModal
$refs.sendOptions.tippy().hide()
"
/>
<SmartItem
:label="$t('show_code')"
icon="code"
@click.native="
showCodegenModal = !showCodegenModal
$refs.sendOptions.tippy().hide()
"
/>
<SmartItem
ref="clearAll"
:label="$t('clear_all')"
icon="clear_all"
@click.native="
clearContent('', $event)
$refs.sendOptions.tippy().hide()
"
/>
</tippy>
<span
class="
ml-4
px-4
py-2
border border-divider
font-mono
flex
items-center
justify-center
truncate
font-semibold
rounded-l-lg
cursor-pointer
"
@click="newSendRequest"
>
Save
</span>
<tippy
ref="saveOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<span
class="
px-1
py-2
border border-divider
font-mono
flex
items-center
justify-center
truncate
font-semibold
rounded-r-lg
/>
<SmartItem
:label="$t('show_code')"
icon="code"
@click.native="
showCodegenModal = !showCodegenModal
$refs.sendOptions.tippy().hide()
"
>
<i class="material-icons">keyboard_arrow_down</i>
</span>
</template>
<SmartItem :description="$t('token_req_name')" />
<input
id="request-name"
v-model="name"
name="request-name"
type="text"
class="input text-sm"
/>
<SmartItem
ref="copyRequest"
:label="$t('copy_request_link')"
:icon="navigatorShare ? 'share' : 'content_copy'"
@click.native="
copyRequest()
$refs.saveOptions.tippy().hide()
"
/>
<SmartItem
ref="saveRequest"
:label="$t('save_to_collections')"
icon="create_new_folder"
@click.native="
saveRequest()
$refs.saveOptions.tippy().hide()
"
/>
</tippy>
/>
<SmartItem
ref="clearAll"
:label="$t('clear_all')"
icon="clear_all"
@click.native="
clearContent('', $event)
$refs.sendOptions.tippy().hide()
"
/>
</tippy>
</span>
<ButtonSecondary
class="rounded-r-none ml-2"
:label="$t('save')"
:shortcuts="[getSpecialKey(), 'S']"
outline
@click.native="newSendRequest"
/>
<span class="inline-flex">
<tippy
ref="saveOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
icon="keyboard_arrow_down"
outline
class="rounded-l-none"
/>
</template>
<SmartItem :description="$t('token_req_name')" />
<input
id="request-name"
v-model="name"
name="request-name"
type="text"
class="text-sm input"
/>
<SmartItem
ref="copyRequest"
:label="$t('copy_request_link')"
:icon="navigatorShare ? 'share' : 'content_copy'"
@click.native="
copyRequest()
$refs.saveOptions.tippy().hide()
"
/>
<SmartItem
ref="saveRequest"
:label="$t('save_to_collections')"
icon="create_new_folder"
@click.native="
saveRequest()
$refs.saveOptions.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div>
</template>
@@ -254,6 +184,7 @@ import {
import { createRESTNetworkRequestStream } from "~/helpers/network"
import { currentEnvironment$ } from "~/newstore/environments"
import { getEffectiveRESTRequestStream } from "~/helpers/utils/EffectiveURL"
import { getPlatformSpecialKey } from "~/helpers/platformutils"
export default {
data() {
@@ -277,6 +208,7 @@ export default {
showCodegenModal: false,
navigatorShare: navigator.share,
effectiveStream$: null,
loading: false,
}
},
subscriptions() {
@@ -294,12 +226,13 @@ export default {
setRESTEndpoint(newVal)
},
},
mounted() {},
methods: {
getSpecialKey: getPlatformSpecialKey,
updateMethod(method) {
updateRESTMethod(method)
},
newSendRequest() {
this.loading = true
this.$subscribeTo(
createRESTNetworkRequestStream(
this.effectiveStream$,
@@ -308,6 +241,7 @@ export default {
(responseState) => {
console.log(responseState)
updateRESTResponse(responseState)
this.loading = false
}
)
},

9
components/http/ResponseMeta.vue
View File

@@ -1,17 +1,16 @@
<template>
<div class="flex sticky top-0 z-10 bg-primary items-center p-4">
<div class="bg-primary flex p-4 top-0 z-10 sticky items-center">
<div
v-if="response == null"
class="
flex flex-1
items-center
flex flex-col flex-1
text-secondaryLight
flex-col
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">send</i>
<i class="opacity-50 pb-2 material-icons">send</i>
<span class="text-xs text-center">
{{ $t("waiting_send_req") }}
</span>

15
components/landing/CTA.vue
View File

@@ -1,21 +1,20 @@
<template>
<div class="flex p-4 bg-primaryLight rounded">
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-primaryLight rounded flex p-4">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(cta, index) in ctas"
:key="`cta-${index}`"
class="inline-flex flex-col p-8"
class="flex-col p-8 inline-flex"
>
<i class="text-3xl material-icons text-accent">{{ cta.icon }}</i>
<i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
text-secondaryDark
"
>
{{ cta.title }}

15
components/landing/Features.vue
View File

@@ -1,26 +1,25 @@
<template>
<div class="flex flex-col p-4">
<div class="flex flex-col items-center">
<p class="my-4 font-semibold tracking-widest text-center text-accent">
<p class="font-semibold my-4 text-center text-accent tracking-widest">
FEATURES
</p>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<div
v-for="(feature, index) in features"
:key="`feature-${index}`"
class="inline-flex flex-col p-8"
class="flex-col p-8 inline-flex"
>
<i class="text-4xl material-icons text-accent">{{ feature.icon }}</i>
<i class="text-accent text-4xl material-icons">{{ feature.icon }}</i>
<div class="flex-grow">
<h2
class="
mt-4
mb-2
text-lg
font-semibold
mt-4
text-lg text-secondaryDark
mb-2
transition
text-secondaryDark
"
>
{{ feature.title }}

8
components/landing/Footer.vue
View File

@@ -1,6 +1,6 @@
<template>
<footer class="flex flex-col p-4">
<nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
<nav class="grid gap-4 grid-cols-2 md:grid-cols-4">
<div class="flex flex-col space-y-2">
<span>
<AppLogo class="h-8" />
@@ -22,7 +22,7 @@
<SmartColorModePicker />
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Solutions</h4>
<h4 class="font-semibold my-2">Solutions</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.solutions"
@@ -37,7 +37,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Platform</h4>
<h4 class="font-semibold my-2">Platform</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.platform"
@@ -52,7 +52,7 @@
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Company</h4>
<h4 class="font-semibold my-2">Company</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.company"

19
components/landing/Hero.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="flex p-4 relative">
<div class="relative my-16 z-10 max-w-3xl">
<div class="my-16 max-w-3xl z-10 relative">
<h2
class="
font-semibold
text-accent
leading-none
tracking-tighter
font-semibold
text-accent text-4xl
text-4xl
md:text-5xl
lg:text-6xl
"
@@ -15,23 +16,21 @@
</h2>
<h3
class="
text-3xl
font-mono font-semibold
my-4
font-mono
text-secondaryDark
text-secondaryDark text-3xl
md:text-4xl
lg:text-4xl
font-semibold
"
>
API Development Ecosystem
</h3>
<p class="text-lg my-4 text-secondaryLight max-w-4/5">
<p class="my-4 text-lg text-secondaryLight max-w-4/5">
Millions of developers and companies build, ship, and maintain their
APIs on Hoppscotch — the largest and most advanced development platform
in the world.
</p>
<div class="my-8 flex items-center">
<div class="flex my-8 items-center">
<ButtonPrimary
label="Dashboard"
icon="chevron_right"
@@ -45,7 +44,7 @@
</div>
</div>
<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:h-full" />
<LandingGlobe class="h-64 w-full lg:h-full sm:h-72 md:h-96" />
</div>
</div>
</template>

4
components/landing/Stats.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex p-4 font-mono space-x-16">
<div class="flex font-mono space-x-16 p-4">
<div v-for="(stat, index) in stats" :key="`stat-${index}`">
<span class="text-xl font-bold">
<span class="font-bold text-xl">
{{ stat.count }}<span class="text-secondaryLight">+</span>
</span>
<br />

10
components/landing/Users.vue
View File

@@ -1,21 +1,21 @@
<template>
<div class="flex flex-col p-4 mx-4 bg-primaryLight rounded">
<div class="bg-primaryLight rounded flex flex-col mx-4 p-4">
<div class="flex flex-col items-center">
<p class="my-4 font-semibold tracking-widest text-center">
<p class="font-semibold my-4 text-center tracking-widest">
EMPOWERING DEVELOPERS FROM
</p>
</div>
<div class="grid grid-cols-3 gap-4 md:grid-cols-4 lg:grid-cols-6">
<div class="grid gap-4 grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
<div
v-for="(user, index) in users"
:key="`user-${index}`"
class="inline-flex flex-col items-center justify-center px-4"
class="flex-col px-4 inline-flex items-center justify-center"
>
<img
:src="`/images/users/${user.image}`"
alt="Profile picture"
loading="lazy"
class="inline-flex flex-col object-contain object-center h-24 w-24"
class="flex-col object-contain object-center h-24 w-24 inline-flex"
/>
</div>
</div>

31
components/lenses/HeadersRenderer.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="p-2 font-mono">
<div class="font-mono p-2">
<div
v-for="(header, index) in headers"
:key="`header-${index}`"
@@ -7,13 +7,13 @@
>
<span
class="
p-2
flex
min-w-0
text-xs
group-hover:text-secondaryDark
transition
font-semibold
text-xs
min-w-0
p-2
transition
group-hover:text-secondaryDark
"
>
<span class="truncate">
@@ -22,12 +22,12 @@
</span>
<span
class="
font-mono font-bold
flex
font-mono font-bold
mx-2
text-xs
justify-center
items-center
text-xs
mx-2
truncate
"
>
@@ -35,13 +35,14 @@
</span>
<span
class="
p-2
flex flex-1
min-w-0
text-xs
group-hover:text-secondaryDark
transition
flex
font-semibold
flex-1
text-xs
min-w-0
p-2
transition
group-hover:text-secondaryDark
"
>
<span class="truncate">

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

@@ -2,17 +2,17 @@
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
sticky
top-23
z-10
bg-primary
sticky
items-center
justify-between
border-b border-dividerLight
"
>
<label for="body" class="px-4 font-semibold text-xs">
<label for="body" class="font-semibold text-xs px-4">
{{ $t("response_body") }}
</label>
<div>

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

@@ -2,17 +2,17 @@
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
sticky
top-23
z-10
bg-primary
sticky
items-center
justify-between
border-b border-dividerLight
"
>
<label for="body" class="px-4 font-semibold text-xs">
<label for="body" class="font-semibold text-xs px-4">
{{ $t("response_body") }}
</label>
<div>

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

@@ -2,17 +2,17 @@
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
sticky
top-23
z-10
bg-primary
sticky
items-center
justify-between
border-b border-dividerLight
"
>
<label for="body" class="px-4 font-semibold text-xs">
<label for="body" class="font-semibold text-xs px-4">
{{ $t("response_body") }}
</label>
<div>

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

@@ -2,17 +2,17 @@
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
sticky
top-23
z-10
bg-primary
sticky
items-center
justify-between
border-b border-dividerLight
"
>
<label for="body" class="px-4 font-semibold text-xs">
<label for="body" class="font-semibold text-xs px-4">
{{ $t("response_body") }}
</label>
<div>

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

@@ -2,17 +2,17 @@
<div>
<div
class="
bg-primary
border-b border-dividerLight
flex flex-1
sticky
top-23
z-10
bg-primary
sticky
items-center
justify-between
border-b border-dividerLight
"
>
<label for="body" class="px-4 font-semibold text-xs">
<label for="body" class="font-semibold text-xs px-4">
{{ $t("response_body") }}
</label>
<div>

13
components/profile/Picture.vue
View File

@@ -1,21 +1,20 @@
<template>
<div class="relative flex items-center justify-center h-5 w-5 cursor-pointer">
<div class="cursor-pointer flex h-5 w-5 relative items-center justify-center">
<img
class="
absolute
object-cover object-center
transition
bg-primaryDark bg-primaryLight
rounded-full
bg-primaryDark
object-cover object-center
h-5
transition
w-5
bg-primaryLight
absolute
"
:src="url"
:alt="alt"
loading="lazy"
/>
<div class="absolute inset-0 rounded-lg shadow-inner"></div>
<div class="rounded-lg shadow-inner inset-0 absolute"></div>
</div>
</template>

6
components/realtime/Mqtt.vue
View File

@@ -23,8 +23,8 @@
id="connect"
:disabled="!validUrl"
class="
button
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
@@ -70,7 +70,7 @@
v-model="msg"
type="text"
spellcheck="false"
class="input border-dashed md:border-l border-divider"
class="border-dashed border-divider input md:border-l"
/>
</li>
<div>
@@ -105,8 +105,8 @@
name="get"
:disabled="!cansubscribe"
class="
button
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="subscriptionState ? 'sync_disabled' : 'sync'"

11
components/realtime/Socketio.vue
View File

@@ -37,8 +37,8 @@
:disabled="!urlValid"
name="connect"
class="
button
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionState ? 'sync' : 'sync_disabled'"
@@ -91,12 +91,9 @@
:key="`input-${index}`"
:class="{ 'border-t': index == 0 }"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
>
<li>

2
components/realtime/Sse.vue
View File

@@ -23,8 +23,8 @@
:disabled="!serverValid"
name="start"
class="
button
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
:icon="!connectionSSEState ? 'sync' : 'sync_disabled'"

11
components/realtime/Websocket.vue
View File

@@ -48,12 +48,9 @@
:key="`protocol-${index}`"
:class="{ 'border-t': index == 0 }"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
>
<li>
@@ -150,8 +147,8 @@
name="send"
:disabled="!connectionState"
class="
button
rounded-b-lg
button
md:rounded-bl-none md:rounded-br-lg
"
icon="send"

30
components/smart/AceEditor.vue
View File

@@ -4,16 +4,17 @@
<div
v-if="lang == 'json'"
class="
sticky
bottom-0
z-10
flex flex-nowrap flex-1
overflow-auto
font-mono
shadow-lg
px-4
bg-primaryLight
border-t border-divider
flex flex-nowrap
font-mono
flex-1
shadow-lg
px-4
bottom-0
z-10
sticky
overflow-auto
hide-scrollbar
"
>
@@ -21,20 +22,19 @@
v-for="(p, index) in currentPath"
:key="`p-${index}`"
class="
inline-flex
items-center
flex-grow-0 flex-shrink-0
text-secondaryLight
hover:text-secondary
cursor-pointer
font-semibold
text-xs
flex-grow-0 flex-shrink-0
text-secondaryLight text-xs
inline-flex
items-center
hover:text-secondary
"
>
<span @click="onBlockClick(index)">
{{ p }}
</span>
<i v-if="index + 1 !== currentPath.length" class="material-icons mx-2">
<i v-if="index + 1 !== currentPath.length" class="mx-2 material-icons">
chevron_right
</i>
<tippy

11
components/smart/AutoComplete.vue
View File

@@ -4,12 +4,13 @@
ref="acInput"
v-model="text"
class="
px-4
py-3
text-xs
flex flex-1
font-semibold
bg-primaryLight
flex
font-semibold
flex-1
text-xs
py-3
px-4
focus:outline-none
"
type="text"

2
components/smart/ConfirmModal.vue
View File

@@ -7,7 +7,7 @@
</div>
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label class="font-semibold text-xs">
{{ title }}
</label>

14
components/smart/Item.vue
View File

@@ -4,13 +4,13 @@
:exact="exact"
:blank="blank"
class="
inline-flex
px-4
py-2
text-xs
font-semibold
transition
rounded-lg
font-semibold
text-xs
py-2
px-4
transition
inline-flex
items-center
focus:bg-primaryDark focus:text-secondaryDark
hover:bg-primaryDark hover:text-secondaryDark
@@ -49,7 +49,7 @@
{{ description }}
</p>
</div>
<i v-if="infoIcon" class="ml-4 text-accent material-icons">
<i v-if="infoIcon" class="text-accent ml-4 material-icons">
{{ infoIcon }}
</i>
</SmartLink>

33
components/smart/Modal.vue
View File

@@ -3,16 +3,16 @@
<div
ref="modal"
class="
fixed
inset-0
z-50
w-full
h-full
bg-primaryLight
flex
h-full
w-full
inset-0
transition
z-50
fixed
items-center
justify-center
transition
bg-primaryLight
"
@touchstart="onBackdropMouseDown"
@touchend="onBackdropMouseUp"
@@ -21,27 +21,28 @@
>
<div
class="
modal-container
relative
flex flex-1 flex-col
m-2
p-4
transition
bg-primary
rounded-lg
shadow-xl
flex flex-col
max-w-md max-h-lg
flex-1
m-2
shadow-xl
p-4
transition
modal-container
relative
"
>
<div class="flex pl-2 items-center justify-between">
<slot name="header"></slot>
</div>
<div class="my-4 overflow-auto flex flex-col">
<div class="flex flex-col my-4 overflow-auto">
<slot name="body"></slot>
</div>
<div
v-if="hasFooterSlot"
class="p-2 flex flex-1 items-center justify-between"
class="flex flex-1 p-2 items-center justify-between"
>
<slot name="footer"></slot>
</div>

2
components/smart/Spinner.vue
View File

@@ -1,6 +1,6 @@
<template>
<svg
class="animate-spin w-5 h-5"
class="h-5 animate-spin w-5"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

4
components/smart/Toggle.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="inline-flex cursor-pointer flex-nowrap" @click="$emit('change')">
<div class="cursor-pointer flex-nowrap inline-flex" @click="$emit('change')">
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label
class="pl-0 align-middle font-semibold truncate text-xs cursor-pointer"
class="cursor-pointer font-semibold text-xs pl-0 align-middle truncate"
>
<slot></slot>
</label>

10
components/tab/Primary.vue
View File

@@ -4,14 +4,14 @@
:exact="exact"
:blank="blank"
class="
rounded-lg
font-semibold
py-2
px-4
transition
inline-flex
items-center
px-4
py-2
font-semibold
truncate
transition
rounded-lg
focus:outline-none
"
:class="[

13
components/tab/Secondary.vue
View File

@@ -4,18 +4,19 @@
:exact="exact"
:blank="blank"
class="
inline-flex
items-center
font-semibold
flex-1
py-2
font-semibold
transition
transform
transition
inline-flex
items-center
focus:outline-none
hover:translate-x-2
focus:translate-x-2 focus:outline-none
focus:translate-x-2
"
:class="[
label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
label ? 'px-3' : 'px-2',
active
? color
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`

4
components/teams/Add.vue
View File

@@ -5,8 +5,8 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
<div class="flex flex-col px-2">
<label for="selectLabelTeamAdd" class="font-semibold text-xs px-4 pb-4">
{{ $t("label") }}
</label>
<input

24
components/teams/Edit.vue
View File

@@ -5,10 +5,10 @@
<ButtonSecondary icon="close" @click.native="hideModal" />
</template>
<template #body>
<div class="px-2 flex flex-col">
<div class="flex flex-col px-2">
<label
for="selectLabelTeamEdit"
class="px-4 font-semibold pb-4 text-xs"
class="font-semibold text-xs px-4 pb-4"
>
{{ $t("label") }}
</label>
@@ -20,19 +20,16 @@
:placeholder="editingTeam.name"
@keyup.enter="saveTeam"
/>
<label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
<label for="memberList" class="font-semibold text-xs px-4 pt-4 pb-4">
{{ $t("team_member_list") }}
</label>
<ul
v-for="(member, index) in members"
:key="`member-${index}`"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
@@ -108,12 +105,9 @@
v-for="(member, index) in newMembers"
:key="`member-${index}`"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
divide-y divide-dashed divide-divider
border-b border-dashed border-divider
md:divide-x md:divide-y-0
"
>
<li>

6
layouts/error.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="page page-error">
<h1 class="mb-4 font-mono heading text-4xl">{{ statusCode }}</h1>
<h3 class="mb-4 heading font-mono text-xs">{{ message }}</h3>
<p class="mt-4 border-t border-tooltip">
<h1 class="font-mono mb-4 text-4xl heading">{{ statusCode }}</h1>
<h3 class="font-mono text-xs mb-4 heading">{{ message }}</h3>
<p class="border-t border-divider mt-4">
<ButtonSecondary to="/" icon="home" :label="$t('go_home')" />
<ButtonSecondary
icon="refresh"

9
middleware/README.md
View File

@@ -1,7 +1,8 @@
# MIDDLEWARE
<br/>
parsedefaulturl.js - parse default url for appropriate path
<br/>
<br/>
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

5
middleware/parsedefaulturl.js
View File

@@ -1,5 +0,0 @@
export default function ({ route, redirect }) {
if (route.fullPath !== "/") {
return redirect("/")
}
}

31279
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
pages/graphql.vue
View File

@@ -262,7 +262,7 @@
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
class="rounded-b-lg input missing-data-response"
:value="$t('waiting_receive_schema')"
name="status"
readonly
@@ -312,7 +312,7 @@
<input
v-else
ref="status"
class="input rounded-b-lg missing-data-response"
class="rounded-b-lg input missing-data-response"
:value="$t('waiting_receive_response')"
name="status"
readonly
@@ -333,18 +333,19 @@
<SmartTabs styles="sticky z-10 top-0">
<SmartTab :id="'docs'" :label="`Docs`" :selected="true">
<AppSection label="docs">
<div class="flex flex-col sticky z-10 bg-primaryLight top-10">
<div class="bg-primaryLight flex flex-col top-10 z-10 sticky">
<input
v-model="graphqlFieldsFilterText"
type="text"
:placeholder="$t('search')"
class="
px-4
py-3
text-xs
flex flex-1
font-medium
bg-primaryLight
flex
font-medium
flex-1
text-xs
py-3
px-4
focus:outline-none
"
/>
@@ -429,15 +430,14 @@
graphqlTypes.length === 0
"
class="
flex
items-center
flex flex-col
text-secondaryLight
flex-col
p-4
items-center
justify-center
"
>
<i class="material-icons opacity-50 pb-2">description</i>
<i class="opacity-50 pb-2 material-icons">description</i>
<span class="text-xs text-center">
{{ $t("send_request_first") }}
</span>

46
pages/index.vue
View File

@@ -17,7 +17,7 @@
</SmartTab>
<SmartTab :id="'bodyParams'" :label="$t('body')" info="0">
<div class="flex flex-1 items-center justify-between py-2">
<div class="flex flex-1 py-2 items-center justify-between">
<tippy
interactive
ref="contentTypeOptions"
@@ -31,19 +31,7 @@
<span class="select-wrapper">
<input
id="contentType"
class="
flex
w-full
px-4
py-2
bg-primary
truncate
rounded-lg
font-semibold font-mono
text-xs
transition
focus:outline-none
"
class="bg-primary rounded-lg flex font-semibold font-mono text-xs w-full py-2 px-4 transition truncate focus:outline-none"
v-model="contentType"
readonly
/>
@@ -321,17 +309,7 @@
>
<AppSection v-if="showPreRequestScript" label="preRequest">
<div
class="
sticky
top-110px
z-10
bg-primary
flex flex-1
items-center
justify-between
pl-4
border-b border-dividerLight
"
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
>
<label class="font-semibold text-xs">
{{ $t("javascript_code") }}
@@ -362,17 +340,7 @@
<SmartTab :id="'tests'" :label="$t('tests')">
<AppSection v-if="testsEnabled" label="postRequestTests">
<div
class="
sticky
top-110px
z-10
bg-primary
flex flex-1
items-center
justify-between
pl-4
border-b border-dividerLight
"
class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
>
<label class="font-semibold text-xs">
{{ $t("javascript_code") }}
@@ -398,7 +366,7 @@
completeMode="test"
/>
<div v-if="testReports.length !== 0">
<div class="flex flex-1 items-center justify-between pl-4">
<div class="flex flex-1 pl-4 items-center justify-between">
<label class="font-semibold text-xs">
Test Reports
</label>
@@ -422,13 +390,13 @@
</div>
<p
v-else-if="testReport.result"
class="flex flex-1 font-mono text-xs info"
class="flex font-mono flex-1 text-xs info"
>
<span
:class="testReport.styles.class"
class="flex items-center"
>
<i class="material-icons text-sm">
<i class="text-sm material-icons">
{{ testReport.styles.icon }}
</i>
<span>&nbsp;{{ testReport.result }}</span>

44
pages/settings.vue
View File

@@ -2,7 +2,7 @@
<div>
<div class="space-y-8">
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="md:col-span-1 p-8">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ $t("account") }}
</h3>
@@ -10,7 +10,7 @@
Customize your account settings.
</p>
</div>
<div class="md:col-span-2 border border-divider p-8 rounded-lg">
<div class="border border-divider rounded-lg p-8 md:col-span-2">
<div v-if="currentUser === null">
<ButtonPrimary label="Log in" @click.native="showLogin = true" />
<div class="mt-4 text-xs text-secondaryLight">
@@ -20,13 +20,13 @@
<div v-else class="space-y-8">
<fieldset>
<legend class="font-bold text-secondaryDark">User</legend>
<div class="mt-4 space-y-4">
<div class="space-y-4 mt-4">
<div class="flex items-start">
<div class="flex items-center">
<img
v-if="currentUser.photoURL"
:src="currentUser.photoURL"
class="w-5 h-5 rounded-full"
class="rounded-full h-5 w-5"
/>
<i v-else class="material-icons">account_circle</i>
</div>
@@ -59,7 +59,7 @@
<div class="mt-1 text-xs text-secondaryLight">
These settings are synced to cloud.
</div>
<div class="mt-4 space-y-4">
<div class="space-y-4 mt-4">
<div class="flex items-center">
<SmartToggle
:on="SYNC_COLLECTIONS"
@@ -95,7 +95,7 @@
</div>
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="md:col-span-1 p-8">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ $t("theme") }}
</h3>
@@ -104,7 +104,7 @@
</p>
</div>
<div
class="md:col-span-2 border border-divider p-8 rounded-lg space-y-8"
class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
>
<fieldset>
<legend class="font-bold text-secondaryDark">
@@ -150,7 +150,7 @@
{{ $t("contact_us") }} </SmartLink
>.
</div>
<div class="mt-4 space-y-4">
<div class="space-y-4 mt-4">
<div class="flex items-center">
<SmartToggle
:on="SCROLL_INTO_ENABLED"
@@ -179,7 +179,7 @@
</div>
<div class="md:grid md:grid-cols-3 md:gap-4">
<div class="md:col-span-1 p-8">
<div class="p-8 md:col-span-1">
<h3 class="heading">
{{ $t("interceptor") }}
</h3>
@@ -188,7 +188,7 @@
</p>
</div>
<div
class="md:col-span-2 border border-divider p-8 rounded-lg space-y-8"
class="border border-divider rounded-lg space-y-8 p-8 md:col-span-2"
>
<fieldset>
<legend class="font-bold text-secondaryDark">
@@ -207,7 +207,7 @@
{{ $t("extension_ver_not_reported") }}
</span>
</div>
<div class="mt-4 space-y-4">
<div class="space-y-4 mt-4">
<div class="flex items-center">
<SmartToggle
:on="EXTENSIONS_ENABLED"
@@ -232,7 +232,7 @@
{{ $t("proxy_privacy_policy") }} </SmartLink
>.
</div>
<div class="mt-4 space-y-4">
<div class="space-y-4 mt-4">
<div class="flex items-center">
<SmartToggle
:on="PROXY_ENABLED"
@@ -241,13 +241,12 @@
<label
for="url"
class="
bg-primaryLight
border border-divider
rounded-l
ml-2
border
px-2
py-1
bg-primaryLight
border-divider
px-2
"
>{{ $t("url") }}</label
>
@@ -255,15 +254,14 @@
id="url"
v-model="PROXY_URL"
class="
flex-1
block
w-full
border border-divider
rounded-r
border
px-2
py-1
flex-1
mr-2
border-divider
w-full
py-1
px-2
block
"
type="url"
:disabled="!PROXY_ENABLED"