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

refactor: modals

Browse Source
This commit is contained in:
liyasthomas
2021-07-09 22:49:45 +05:30
parent 08d0765cfb
commit c7062ad613
41 changed files with 712 additions and 664 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/scss/styles.scss
View File

@@ -162,12 +162,24 @@ hr {
@apply text-lg; @apply text-lg;
} }
input { .input,
.select {
@apply flex;
@apply w-full;
@apply px-4;
@apply py-2;
@apply bg-primaryLight;
@apply truncate; @apply truncate;
@apply rounded-lg;
@apply font-semibold;
@apply focus:outline-none;
@apply focus-visible:ring;
@apply focus-visible:ring-inset;
@apply focus-visible:ring-accent;
} }
input[type="file"], .input[type="file"],
input[type="radio"], .input[type="radio"],
#installPWA { #installPWA {
@apply hidden; @apply hidden;
} }

32
assets/scss/themes.scss
View File

@@ -6,27 +6,27 @@
@mixin darkTheme { @mixin darkTheme {
// Background color // Background color
--primary-color: rgba(32, 33, 36, 1); --primary-color: theme("colors.dark.800");
// Light Background color // Light Background color
--primary-light-color: rgba(255, 255, 255, 0.04); --primary-light-color: theme("colors.dark.700");
// Dark Background color // Dark Background color
--primary-dark-color: rgba(12, 12, 12, 1); --primary-dark-color: theme("colors.dark.600");
// Text color // Text color
--secondary-color: rgba(255, 255, 255, 0.9); --secondary-color: theme("colors.gray.400");
// Light Text color // Light Text color
--secondary-light-color: rgba(255, 255, 255, 0.5); --secondary-light-color: theme("colors.gray.500");
// Dark Text color // Dark Text color
--secondary-dark-color: rgba(0, 0, 0, 0.5); --secondary-dark-color: theme("colors.white");
// Border color // Border color
--divider-color: rgba(255, 255, 255, 0.05); --divider-color: theme("colors.dark.500");
// Light Border color // Light Border color
--divider-light-color: rgba(255, 255, 255, 0.05); --divider-light-color: theme("colors.dark.400");
// Dark Border color // Dark Border color
--divider-dark-color: rgba(255, 255, 255, 0.05); --divider-dark-color: theme("colors.dark.700");
// Error color // Error color
--error-color: rgba(255, 255, 255, 0.05); --error-color: theme("colors.dark.600");
// Tooltip color // Tooltip color
--tooltip-color: rgba(48, 48, 48, 1); --tooltip-color: theme("colors.dark.700");
// Editor theme // Editor theme
--editor-theme: "twilight"; --editor-theme: "twilight";
} }
@@ -102,11 +102,11 @@
@mixin greenTheme { @mixin greenTheme {
// Accent color // Accent color
--accent-color: rgba(73, 204, 104, 1); --accent-color: rgb(97, 207, 123);
// Light Accent color // Light Accent color
--accent-light-color: rgba(73, 204, 104, 1); --accent-light-color: rgba(73, 204, 104, 1);
// Dark Accent color // Dark Accent color
--accent-dark-color: rgba(64, 182, 91, 1); --accent-dark-color: rgb(0, 71, 17);
// Gradient from // Gradient from
--gradient-from-color: theme("colors.green.200"); --gradient-from-color: theme("colors.green.200");
// Gradient via // Gradient via
@@ -226,15 +226,15 @@
@include greenTheme; @include greenTheme;
} }
:root.light-mode { :root.light {
@include lightTheme; @include lightTheme;
} }
:root.dark-mode { :root.dark {
@include darkTheme; @include darkTheme;
} }
:root.black-mode { :root.black {
@include blackTheme; @include blackTheme;
} }

140
components/app/Shortcuts.vue
View File

@@ -7,61 +7,30 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="p-2"> <div class="px-2">
<div> <div
<kbd>{{ getSpecialKey() }}</kbd> v-for="(shortcut, index) in shortcuts"
+ :key="`shortcut-${index}`"
<kbd>G</kbd> class="flex items-center"
<label>{{ $t("send_request") }}</label> >
</div> <kbd
<div> v-for="(key, keyIndex) in shortcut.keys"
<kbd>{{ getSpecialKey() }}</kbd :key="`key-${keyIndex}`"
>+<kbd>S</kbd> class="
<label>{{ $t("save_to_collections") }}</label> py-2
</div> px-4
<div> m-1
<kbd>{{ getSpecialKey() }}</kbd text-xs
>+<kbd>K</kbd> border border-divider
<label>{{ $t("copy_request_link") }}</label> rounded-lg
</div> font-bold
<div> "
<kbd>{{ getSpecialKey() }}</kbd >
>+<kbd>I</kbd> {{ key }}
<label>{{ $t("reset_request") }}</label> </kbd>
</div> <span class="flex text-xs ml-4">
</div> {{ shortcut.label }}
<hr /> </span>
<div class="p-2">
<div>
<kbd>Alt</kbd>+<kbd>▲</kbd>
<label>{{ $t("select_next_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>▼</kbd>
<label>{{ $t("select_previous_method") }}</label>
</div>
</div>
<hr />
<div class="p-2">
<div>
<kbd>Alt</kbd>+<kbd>G</kbd>
<label>{{ $t("select_get_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>H</kbd>
<label>{{ $t("select_head_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>P</kbd>
<label>{{ $t("select_post_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>U</kbd>
<label>{{ $t("select_put_method") }}</label>
</div>
<div>
<kbd>Alt</kbd>+<kbd>X</kbd>
<label>{{ $t("select_delete_method") }}</label>
</div> </div>
</div> </div>
</template> </template>
@@ -75,6 +44,56 @@ export default {
props: { props: {
show: Boolean, show: Boolean,
}, },
data() {
return {
shortcuts: [
{
keys: [this.getSpecialKey(), "G"],
label: this.$t("send_request"),
},
{
keys: [this.getSpecialKey(), "S"],
label: this.$t("save_to_collections"),
},
{
keys: [this.getSpecialKey(), "K"],
label: this.$t("copy_request_link"),
},
{
keys: [this.getSpecialKey(), "I"],
label: this.$t("reset_request"),
},
{
keys: ["Alt", "▲"],
label: this.$t("select_next_method"),
},
{
keys: ["Alt", "▼"],
label: this.$t("select_previous_method"),
},
{
keys: ["Alt", "G"],
label: this.$t("select_get_method"),
},
{
keys: ["Alt", "H"],
label: this.$t("select_head_method"),
},
{
keys: ["Alt", "P"],
label: this.$t("select_post_method"),
},
{
keys: ["Alt", "U"],
label: this.$t("select_put_method"),
},
{
keys: ["Alt", "X"],
label: this.$t("select_delete_method"),
},
],
}
},
methods: { methods: {
getSpecialKey: getPlatformSpecialKey, getSpecialKey: getPlatformSpecialKey,
hideModal() { hideModal() {
@@ -83,14 +102,3 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
kbd {
@apply inline-flex;
@apply resize-none;
@apply m-2;
@apply py-2 px-4;
@apply rounded-lg;
@apply text-sm;
}
</style>

2
components/button/Primary.vue
View File

@@ -15,7 +15,7 @@
:class="[ :class="[
color color
? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300` ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
: `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`, : `text-white dark:text-accentDark bg-accent hover:bg-accentDark focus:bg-accentDark`,
label ? 'px-4' : 'px-2', label ? 'px-4' : 'px-2',
rounded ? 'rounded-full' : 'rounded-lg', rounded ? 'rounded-full' : 'rounded-lg',
{ 'opacity-50 cursor-not-allowed': disabled }, { 'opacity-50 cursor-not-allowed': disabled },

29
components/collections/Add.vue
View File

@@ -2,26 +2,27 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3> <h3 class="heading">{{ $t("new_collection") }}</h3>
<div> <ButtonSecondary icon="close" @click.native="hideModal" />
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelAdd" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelAdd" {{ $t("label") }}
v-model="name" </label>
class="input" <input
type="text" id="selectLabelAdd"
:placeholder="$t('my_new_collection')" v-model="name"
@keyup.enter="addNewCollection" class="input"
/> type="text"
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" /> <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

28
components/collections/AddFolder.vue
View File

@@ -7,21 +7,27 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelAddFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label
id="selectLabelAddFolder" for="selectLabelAddFolder"
v-model="name" class="px-4 font-semibold pb-4 text-xs"
class="input" >
type="text" {{ $t("label") }}
:placeholder="$t('my_new_folder')" </label>
@keyup.enter="addFolder" <input
/> id="selectLabelAddFolder"
v-model="name"
class="input"
type="text"
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" /> <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

25
components/collections/Edit.vue
View File

@@ -7,21 +7,24 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelEdit" class="px-4 font-semibold pb-4 text-xs">{{
id="selectLabelEdit" $t("label")
v-model="name" }}</label>
class="input" <input
type="text" id="selectLabelEdit"
:placeholder="placeholderCollName" v-model="name"
@keyup.enter="saveCollection" class="input"
/> type="text"
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" /> <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

25
components/collections/EditFolder.vue
View File

@@ -7,20 +7,25 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEditFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label
id="selectLabelEditFolder" for="selectLabelEditFolder"
v-model="name" class="px-4 font-semibold pb-4 text-xs"
class="input" >{{ $t("label") }}</label
type="text" >
@keyup.enter="editFolder" <input
/> id="selectLabelEditFolder"
v-model="name"
class="input"
type="text"
@keyup.enter="editFolder"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" /> <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

25
components/collections/EditRequest.vue
View File

@@ -7,21 +7,24 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEditReq">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelEditReq" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelEditReq" {{ $t("label") }}</label
v-model="requestUpdateData.name" >
class="input" <input
type="text" id="selectLabelEditReq"
:placeholder="placeholderReqName" v-model="requestUpdateData.name"
@keyup.enter="saveRequest" class="input"
/> type="text"
:placeholder="placeholderReqName"
@keyup.enter="saveRequest"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

25
components/collections/ImportExport.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div class="flex">
<ButtonSecondary <ButtonSecondary
v-if="mode == 'import_from_my_collections'" v-if="mode == 'import_from_my_collections'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -67,8 +67,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start"> <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -83,7 +83,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -98,7 +98,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-if="collectionsType.type == 'team-collections'" v-if="collectionsType.type == 'team-collections'"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
@@ -106,7 +106,7 @@
:label="$t('import_from_my_collections')" :label="$t('import_from_my_collections')"
@click.native="mode = 'import_from_my_collections'" @click.native="mode = 'import_from_my_collections'"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"
@@ -114,8 +114,11 @@
@click.native="exportJSON" @click.native="exportJSON"
/> />
</div> </div>
<div v-if="mode == 'import_from_my_collections'"> <div
<span class="select-wrapper"> v-if="mode == 'import_from_my_collections'"
class="flex px-2 flex-col"
>
<div class="select-wrapper">
<select <select
type="text" type="text"
class="select" class="select"
@@ -143,15 +146,13 @@
{{ collection.name }} {{ collection.name }}
</option> </option>
</select> </select>
</span> </div>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div v-if="mode == 'import_from_my_collections'"> <div v-if="mode == 'import_from_my_collections'">
<span></span>
<span> <span>
<ButtonSecondary <ButtonPrimary
class="m-2"
:disabled="mySelectedCollectionID == undefined" :disabled="mySelectedCollectionID == undefined"
icon="create_new_folder" icon="create_new_folder"
:label="$t('import')" :label="$t('import')"

66
components/collections/SaveRequest.vue
View File

@@ -2,45 +2,45 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3> <h3 class="heading">{{ $t("save_request_as") }}</h3>
<div> <ButtonSecondary icon="close" @click.native="hideModal" />
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelSaveReq">{{ $t("token_req_name") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelSaveReq" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelSaveReq" {{ $t("token_req_name") }}</label
v-model="requestData.name" >
class="input" <input
type="text" id="selectLabelSaveReq"
@keyup.enter="saveRequestAs" v-model="requestData.name"
/> class="input"
<label>Select location</label> type="text"
<!-- <input class="input" readonly :value="path" /> --> @keyup.enter="saveRequestAs"
/>
<CollectionsGraphql <label class="px-4 pt-4 font-semibold pb-4 text-xs">
v-if="mode === 'graphql'" Select Location
:doc="false" </label>
:show-coll-actions="false" <CollectionsGraphql
:picked="picked" v-if="mode === 'graphql'"
:saving-mode="true" :doc="false"
@select="onSelect" :show-coll-actions="false"
/> :picked="picked"
:saving-mode="true"
<Collections @select="onSelect"
v-else />
:picked="picked" <Collections
:save-request="true" v-else
@select="onSelect" :picked="picked"
@update-collection="collectionsType.type = $event" :save-request="true"
@update-coll-type="onUpdateCollType" @select="onSelect"
/> @update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -2,26 +2,27 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3> <h3 class="heading">{{ $t("new_collection") }}</h3>
<div> <ButtonSecondary icon="close" @click.native="hideModal" />
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelGqlAdd" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelGqlAdd" {{ $t("label") }}
v-model="name" </label>
class="input" <input
type="text" id="selectLabelGqlAdd"
:placeholder="$t('my_new_collection')" v-model="name"
@keyup.enter="addNewCollection" class="input"
/> type="text"
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewCollection" /> <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,21 +7,27 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlAddFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label
id="selectLabelGqlAddFolder" for="selectLabelGqlAddFolder"
v-model="name" class="px-4 font-semibold pb-4 text-xs"
class="input" >
type="text" {{ $t("label") }}
:placeholder="$t('my_new_folder')" </label>
@keyup.enter="addFolder" <input
/> id="selectLabelGqlAddFolder"
v-model="name"
class="input"
type="text"
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addFolder" /> <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -7,21 +7,24 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelGqlEdit" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelGqlEdit" {{ $t("label") }}
v-model="name" </label>
class="input" <input
type="text" id="selectLabelGqlEdit"
:placeholder="editingCollection.name" v-model="name"
@keyup.enter="saveCollection" class="input"
/> type="text"
:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveCollection" /> <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,21 +7,27 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEditFolder">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label
id="selectLabelGqlEditFolder" for="selectLabelGqlEditFolder"
v-model="name" class="px-4 font-semibold pb-4 text-xs"
class="input" >
type="text" {{ $t("label") }}
:placeholder="folder.name" </label>
@keyup.enter="editFolder" <input
/> id="selectLabelGqlEditFolder"
v-model="name"
class="input"
type="text"
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="editFolder" /> <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -7,21 +7,27 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelGqlEditReq">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label
id="selectLabelGqlEditReq" for="selectLabelGqlEditReq"
v-model="requestUpdateData.name" class="px-4 font-semibold pb-4 text-xs"
class="input" >
type="text" {{ $t("label") }}
:placeholder="request.name" </label>
@keyup.enter="saveRequest" <input
/> id="selectLabelGqlEditReq"
v-model="requestUpdateData.name"
class="input"
type="text"
:placeholder="request.name"
@keyup.enter="saveRequest"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveRequest" /> <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

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

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

10
components/collections/graphql/ImportExport.vue
View File

@@ -2,7 +2,7 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div> <div class="flex">
<tippy <tippy
ref="options" ref="options"
interactive interactive
@@ -54,8 +54,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -70,7 +70,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -85,7 +85,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"

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

@@ -36,6 +36,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

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

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -35,6 +35,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -44,6 +44,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

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

@@ -27,6 +27,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -27,6 +27,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="toggleShowChildren()" @click="toggleShowChildren()"
> >

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

@@ -37,6 +37,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="!doc ? selectRequest() : {}" @click="!doc ? selectRequest() : {}"
> >

25
components/environments/Add.vue
View File

@@ -7,21 +7,24 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEnvAdd">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelEnvAdd" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelEnvAdd" {{ $t("label") }}
v-model="name" </label>
class="input" <input
type="text" id="selectLabelEnvAdd"
:placeholder="$t('my_new_environment')" v-model="name"
@keyup.enter="addNewEnvironment" class="input"
/> type="text"
:placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment"
/>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" /> <ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

144
components/environments/Edit.vue
View File

@@ -7,82 +7,90 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label for="selectLabelEnvEdit">{{ $t("label") }}</label> <div class="px-2 flex flex-col">
<input <label for="selectLabelEnvEdit" class="px-4 font-semibold pb-4 text-xs">
id="selectLabelEnvEdit" {{ $t("label") }}
v-model="name" </label>
class="input" <input
type="text" id="selectLabelEnvEdit"
:placeholder="editingEnvironment.name" v-model="name"
@keyup.enter="saveEnvironment" class="input"
/> type="text"
<div class="flex flex-1"> :placeholder="editingEnvironment.name"
<label for="variableList">{{ $t("env_variable_list") }}</label> @keyup.enter="saveEnvironment"
<div> />
<ButtonSecondary <div class="flex justify-between items-center flex-1">
v-tippy="{ theme: 'tooltip' }" <label
:title="$t('clear')" for="variableList"
icon="clearIcon" class="px-4 pt-4 font-semibold pb-4 text-xs"
@click.native="clearContent($event)" >
/> {{ $t("env_variable_list") }}
</div> </label>
</div> <div>
<ul
v-for="(variable, index) in vars"
:key="index"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
v-model="variable.key"
class="input"
:placeholder="$t('variable_count', { count: index + 1 })"
:name="'param' + index"
/>
</li>
<li>
<input
v-model="variable.value"
class="input"
:placeholder="$t('value_count', { count: index + 1 })"
:name="'value' + index"
/>
</li>
<div>
<li>
<ButtonSecondary <ButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')" :title="$t('clear')"
icon="delete" :icon="clearIcon"
@click.native="removeEnvironmentVariable(index)" @click.native="clearContent($event)"
/>
</div>
</div>
<ul
v-for="(variable, index) in vars"
:key="index"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
v-model="variable.key"
class="input"
:placeholder="$t('variable_count', { count: index + 1 })"
:name="'param' + index"
/> />
</li> </li>
</div> <li>
</ul> <input
<ul> v-model="variable.value"
<li> class="input"
<ButtonSecondary :placeholder="$t('value_count', { count: index + 1 })"
icon="add" :name="'value' + index"
:label="$t('add_new')" />
@click.native="addEnvironmentVariable" </li>
/> <div>
</li> <li>
</ul> <ButtonSecondary
id="variable"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeEnvironmentVariable(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addEnvironmentVariable"
/>
</li>
</ul>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" /> <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

1
components/environments/Environment.vue
View File

@@ -24,6 +24,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
@click="$emit('edit-environment')" @click="$emit('edit-environment')"
> >

10
components/environments/ImportExport.vue
View File

@@ -4,7 +4,7 @@
<h3 class="heading"> <h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }} {{ $t("import_export") }} {{ $t("environments") }}
</h3> </h3>
<div> <div class="flex">
<tippy <tippy
ref="options" ref="options"
interactive interactive
@@ -56,8 +56,8 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col space-y-2">
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('replace_current')" :title="$t('replace_current')"
icon="folder_special" icon="folder_special"
@@ -72,7 +72,7 @@
accept="application/json" accept="application/json"
@change="replaceWithJSON" @change="replaceWithJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('preserve_current')" :title="$t('preserve_current')"
icon="create_new_folder" icon="create_new_folder"
@@ -87,7 +87,7 @@
accept="application/json" accept="application/json"
@change="importFromJSON" @change="importFromJSON"
/> />
<ButtonSecondary <SmartItem
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
:title="$t('download_file')" :title="$t('download_file')"
icon="drive_file_move" icon="drive_file_move"

6
components/graphql/Field.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div <div
class="font-bold text-xs field-title" class="font-semibold text-xs field-title"
:class="{ 'field-highlighted': isHighlighted }" :class="{ 'field-highlighted': isHighlighted }"
> >
{{ fieldName }} {{ fieldName }}
@@ -38,7 +38,7 @@
text-xs text-black text-xs text-black
bg-yellow-200 bg-yellow-200
rounded rounded
font-bold font-semibold
field-deprecated field-deprecated
" "
> >
@@ -48,7 +48,7 @@
<h5 class="my-2 text-xs">Arguments:</h5> <h5 class="my-2 text-xs">Arguments:</h5>
<div class="pl-4 border-l-2 border-divider"> <div class="pl-4 border-l-2 border-divider">
<div v-for="(field, index) in fieldArgs" :key="index"> <div v-for="(field, index) in fieldArgs" :key="index">
<span class="font-bold text-xs"> <span class="font-semibold text-xs">
{{ field.name }}: {{ field.name }}:
<GraphqlTypeLink <GraphqlTypeLink
:gql-type="field.type" :gql-type="field.type"

2
components/graphql/Type.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div :id="`type_${gqlType.name}`" class="p-4"> <div :id="`type_${gqlType.name}`" class="p-4">
<div <div
class="font-bold text-xs type-title" class="font-semibold text-xs type-title"
:class="{ 'text-accent': isHighlighted }" :class="{ 'text-accent': isHighlighted }"
> >
<span v-if="isInput" class="text-accent">input </span> <span v-if="isInput" class="text-accent">input </span>

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

@@ -12,6 +12,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="$emit('use-entry')" @click="$emit('use-entry')"

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

@@ -28,6 +28,7 @@
text-xs text-xs
group-hover:text-secondaryDark group-hover:text-secondaryDark
transition transition
font-semibold
" "
data-testid="restore_history_entry" data-testid="restore_history_entry"
@click="$emit('use-entry')" @click="$emit('use-entry')"

126
components/http/CodegenModal.vue
View File

@@ -2,49 +2,61 @@
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<template #header> <template #header>
<h3 class="heading">{{ $t("generate_code") }}</h3> <h3 class="heading">{{ $t("generate_code") }}</h3>
<div> <ButtonSecondary icon="close" @click.native="hideModal" />
<ButtonSecondary icon="close" @click.native="hideModal" />
</div>
</template> </template>
<template #body> <template #body>
<label for="requestType">{{ $t("choose_language") }}</label> <div class="px-2 flex flex-col">
<span class="select-wrapper"> <label for="requestType" class="px-4 font-semibold pb-4 text-xs">
<tippy {{ $t("choose_language") }}
ref="options" </label>
interactive <div class="flex flex-1">
tabindex="-1" <span class="select-wrapper">
trigger="click" <tippy
theme="popover" ref="options"
arrow interactive
> tabindex="-1"
<template #trigger> trigger="click"
<pre v-if="requestType">{{ theme="popover"
codegens.find((x) => x.id === requestType).name arrow
}}</pre> >
<input <template #trigger>
v-else <span
id="requestType" class="
v-model="requestType" flex
:placeholder="$t('choose_language')" w-full
class="input cursor-pointer" px-4
readonly text-xs
autofocus py-3
/> rounded-lg
</template> font-semibold
<SmartItem focus:outline-none
v-for="gen in codegens" border-b border-dividerLight
:key="gen.id" bg-primaryLight
:label="gen.name" cursor-pointer
@click.native=" "
requestType = gen.id >
$refs.options.tippy().hide() {{ codegens.find((x) => x.id === requestType).name }}
" </span>
/> </template>
</tippy> <SmartItem
</span> v-for="gen in codegens"
<div class="flex flex-1"> :key="gen.id"
<label for="generatedCode">{{ $t("generated_code") }}</label> :label="gen.name"
<div> @click.native="
requestType = gen.id
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
<div class="flex justify-between flex-1">
<label
for="generatedCode"
class="px-4 pt-4 font-semibold pb-4 text-xs"
>
{{ $t("generated_code") }}
</label>
<ButtonSecondary <ButtonSecondary
ref="copyRequestCode" ref="copyRequestCode"
v-tippy="{ theme: 'tooltip' }" v-tippy="{ theme: 'tooltip' }"
@@ -53,23 +65,23 @@
@click.native="copyRequestCode" @click.native="copyRequestCode"
/> />
</div> </div>
<SmartAceEditor
v-if="requestType"
ref="generatedCode"
:value="requestCode"
:lang="codegens.find((x) => x.id === requestType).language"
:options="{
maxLines: '10',
minLines: '10',
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-lg"
/>
</div> </div>
<SmartAceEditor
v-if="requestType"
ref="generatedCode"
:value="requestCode"
:lang="codegens.find((x) => x.id === requestType).language"
:options="{
maxLines: '10',
minLines: '10',
fontSize: '15px',
autoScrollEditorIntoView: true,
readOnly: true,
showPrintMargin: false,
useWorker: false,
}"
styles="rounded-b-lg"
/>
</template> </template>
</SmartModal> </SmartModal>
</template> </template>

3
components/http/ImportCurl.vue
View File

@@ -16,10 +16,9 @@
></textarea> ></textarea>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('import')" @click.native="handleImport" /> <ButtonPrimary :label="$t('import')" @click.native="handleImport" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

9
components/smart/ConfirmModal.vue
View File

@@ -7,13 +7,16 @@
</div> </div>
</template> </template>
<template #body> <template #body>
<label>{{ title }}</label> <div class="px-2 flex flex-col">
<label class="font-semibold text-xs">
{{ title }}
</label>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="no" @click.native="hideModal" />
<ButtonPrimary :label="yes" @click.native="resolve" /> <ButtonPrimary :label="yes" @click.native="resolve" />
<ButtonSecondary :label="no" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

63
components/smart/Modal.vue
View File

@@ -30,23 +30,20 @@
bg-primary bg-primary
rounded-lg rounded-lg
shadow-xl shadow-xl
max-w-md max-w-md max-h-lg
" "
> >
<div class="pl-2"> <div class="flex pl-2 items-center justify-between">
<div class="flex items-center justify-between"> <slot name="header"></slot>
<slot name="header"></slot>
</div>
</div> </div>
<div class="my-4 overflow-auto max-h-xl"> <div class="my-4 overflow-auto flex flex-col">
<div class="flex flex-col"> <slot name="body"></slot>
<slot name="body"></slot>
</div>
</div> </div>
<div v-if="hasFooterSlot" class="p-2"> <div
<div class="flex flex-1"> v-if="hasFooterSlot"
<slot name="footer"></slot> class="p-2 flex flex-1 items-center justify-between"
</div> >
<slot name="footer"></slot>
</div> </div>
</div> </div>
</div> </div>
@@ -138,46 +135,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.modal-backdrop {
@apply fixed;
@apply inset-0;
@apply z-50;
@apply w-full;
@apply h-full;
@apply flex;
@apply items-center;
@apply justify-center;
@apply transition;
@apply bg-primaryLight;
}
.modal-container {
@apply relative;
@apply flex flex-1 flex-col;
@apply m-2;
@apply p-4;
@apply transition;
@apply bg-primary;
@apply rounded-lg;
@apply shadow-xl;
@apply max-w-md;
}
.modal-header {
@apply pl-2;
}
.modal-body {
@apply my-4;
@apply overflow-auto;
@apply max-h-xl;
}
.modal-footer {
@apply p-2;
}
.modal-enter, .modal-enter,
.modal-leave-active { .modal-leave-active {
@apply opacity-0; @apply opacity-0;

32
components/teams/Add.vue
View File

@@ -5,28 +5,24 @@
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</template> </template>
<template #body> <template #body>
<ul> <div class="px-2 flex flex-col">
<li> <label for="selectLabelTeamAdd" class="px-4 font-semibold pb-4 text-xs">
<label>{{ $t("label") }}</label> {{ $t("label") }}
</li> </label>
</ul> <input
<ul> id="selectLabelTeamAdd"
<li> v-model="name"
<input class="input"
v-model="name" type="text"
class="input" :placeholder="$t('my_new_team')"
type="text" @keyup.enter="addNewTeam"
:placeholder="$t('my_new_team')" />
@keyup.enter="addNewTeam" </div>
/>
</li>
</ul>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="addNewTeam" /> <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

376
components/teams/Edit.vue
View File

@@ -5,208 +5,200 @@
<ButtonSecondary icon="close" @click.native="hideModal" /> <ButtonSecondary icon="close" @click.native="hideModal" />
</template> </template>
<template #body> <template #body>
<ul> <div class="px-2 flex flex-col">
<li> <label
<div class="flex flex-1"> for="selectLabelTeamEdit"
<label>{{ $t("label") }}</label> class="px-4 font-semibold pb-4 text-xs"
</div> >
</li> {{ $t("label") }}
</ul> </label>
<ul> <input
<li> id="selectLabelTeamEdit"
<input v-model="name"
v-model="name" class="input"
class="input" type="text"
type="text" :placeholder="editingTeam.name"
:placeholder="editingTeam.name" @keyup.enter="saveTeam"
@keyup.enter="saveTeam" />
/> <label for="memberList" class="px-4 pt-4 font-semibold pb-4 text-xs">
</li> {{ $t("team_member_list") }}
</ul> </label>
<ul> <ul
<li> v-for="(member, index) in members"
<div class="flex flex-1"> :key="`new-${index}`"
<label for="memberList">{{ $t("team_member_list") }}</label> class="
<div></div> border-b border-dashed
</div> divide-y
</li> md:divide-x
</ul> border-divider
<ul divide-dashed divide-divider
v-for="(member, index) in members" md:divide-y-0
:key="`new-${index}`" "
class=" :class="{ 'border-t': index == 0 }"
border-b border-dashed >
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
"
:class="{ 'border-t': index == 0 }"
>
<li>
<input
class="input"
:placeholder="$t('email')"
:name="'param' + index"
:value="member.user.email"
readonly
/>
</li>
<li>
<span class="select-wrapper">
<tippy
ref="options"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.role === 'string'
? member.role
: JSON.stringify(member.role)
"
readonly
/>
</template>
<SmartItem
label="OWNER"
@click.native="
updateRole(index, 'OWNER')
$refs.options.tippy().hide()
"
/>
<SmartItem
label="EDITOR"
@click.native="
updateRole(index, 'EDITOR')
$refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
updateRole(index, 'VIEWER')
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</li>
<div>
<li> <li>
<ButtonSecondary <input
id="member" class="input"
v-tippy="{ theme: 'tooltip' }" :placeholder="$t('email')"
:title="$t('delete')" :name="'param' + index"
icon="delete" :value="member.user.email"
@click.native="removeExistingTeamMember(member.user.uid)" readonly
/> />
</li> </li>
</div>
</ul>
<ul
v-for="(member, index) in newMembers"
:key="index"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
"
>
<li>
<input
v-model="member.key"
class="input"
:placeholder="$t('email')"
:name="'param' + index"
autofocus
/>
</li>
<li>
<span class="select-wrapper">
<tippy
ref="memberOptions"
interactive
tabindex="-1"
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string'
? member.value
: JSON.stringify(member.value)
"
readonly
/>
</template>
<SmartItem
label="OWNER"
@click.native="
member.value = 'OWNER'
$refs.options.tippy().hide()
"
/>
<SmartItem
label="EDITOR"
@click.native="
member.value = 'EDITOR'
$refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
member.value = 'VIEWER'
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</li>
<div>
<li> <li>
<ButtonSecondary <span class="select-wrapper">
id="member" <tippy
v-tippy="{ theme: 'tooltip' }" ref="options"
:title="$t('delete')" interactive
icon="delete" tabindex="-1"
@click.native="removeTeamMember(index)" trigger="click"
theme="popover"
arrow
>
<template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.role === 'string'
? member.role
: JSON.stringify(member.role)
"
readonly
/>
</template>
<SmartItem
label="OWNER"
@click.native="
updateRole(index, 'OWNER')
$refs.options.tippy().hide()
"
/>
<SmartItem
label="EDITOR"
@click.native="
updateRole(index, 'EDITOR')
$refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
updateRole(index, 'VIEWER')
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</li>
<div>
<li>
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeExistingTeamMember(member.user.uid)"
/>
</li>
</div>
</ul>
<ul
v-for="(member, index) in newMembers"
:key="index"
class="
border-b border-dashed
divide-y
md:divide-x
border-divider
divide-dashed divide-divider
md:divide-y-0
"
>
<li>
<input
v-model="member.key"
class="input"
:placeholder="$t('email')"
:name="'param' + index"
autofocus
/> />
</li> </li>
</div> <li>
</ul> <span class="select-wrapper">
<ul> <tippy
<li> ref="memberOptions"
<ButtonSecondary interactive
icon="add" tabindex="-1"
:label="$t('add_new')" trigger="click"
@click.native="addTeamMember" theme="popover"
/> arrow
</li> >
</ul> <template #trigger>
<input
class="input"
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string'
? member.value
: JSON.stringify(member.value)
"
readonly
/>
</template>
<SmartItem
label="OWNER"
@click.native="
member.value = 'OWNER'
$refs.options.tippy().hide()
"
/>
<SmartItem
label="EDITOR"
@click.native="
member.value = 'EDITOR'
$refs.options.tippy().hide()
"
/>
<SmartItem
label="VIEWER"
@click.native="
member.value = 'VIEWER'
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</li>
<div>
<li>
<ButtonSecondary
id="member"
v-tippy="{ theme: 'tooltip' }"
:title="$t('delete')"
icon="delete"
@click.native="removeTeamMember(index)"
/>
</li>
</div>
</ul>
<ul>
<li>
<ButtonSecondary
icon="add"
:label="$t('add_new')"
@click.native="addTeamMember"
/>
</li>
</ul>
</div>
</template> </template>
<template #footer> <template #footer>
<span></span>
<span> <span>
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
<ButtonPrimary :label="$t('save')" @click.native="saveTeam" /> <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
<ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
</span> </span>
</template> </template>
</SmartModal> </SmartModal>

5
nuxt.config.js
View File

@@ -361,6 +361,11 @@ export default {
}, },
}, },
// https://github.com/nuxt-community/color-mode-module
colorMode: {
classSuffix: "",
},
// Build Configuration (https://go.nuxtjs.dev/config-build) // Build Configuration (https://go.nuxtjs.dev/config-build)
build: { build: {
transpile: ["three"], transpile: ["three"],