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

refactor: better implimentation for slots

Browse Source
This commit is contained in:
liyasthomas
2021-06-30 14:16:02 +05:30
parent 0dd0d262d6
commit b750ccd46f
46 changed files with 1144 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/app/Extensions.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<p class="info">
{{ $t("extensions_info1") }}
</p>
@@ -70,8 +68,7 @@
</button>
</a>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

2
components/app/Footer.vue
View File

@@ -57,7 +57,7 @@
<button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons">translate</i>
</button>
<template slot="popover">
<template #popover>
<div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon button">

6
components/app/Header.vue
View File

@@ -71,7 +71,7 @@
<button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i>
</button>
<template slot="popover">
<template #popover>
<FirebaseLogin @show-email="showEmail = true" />
</template>
</v-popover>
@@ -94,7 +94,7 @@
/>
<i v-else class="material-icons">account_circle</i>
</button>
<template slot="popover">
<template #popover>
<div>
<nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon button">
@@ -114,7 +114,7 @@
<button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i>
</button>
<template slot="popover">
<template #popover>
<button
v-close-popover
class="icon button"

21
components/app/Shortcuts.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="p-2">
<div>
<kbd>{{ getSpecialKey() }}</kbd>
@@ -68,8 +66,7 @@
<label>{{ $t("select_delete_method") }}</label>
</div>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

21
components/app/Support.vue
View File

@@ -1,19 +1,16 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<AppContributors />
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

44
components/collections/Add.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/AddFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/Edit.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/EditFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -19,20 +17,18 @@
type="text"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/EditRequest.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="placeholderReqName"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

159
components/collections/ImportExport.vue
View File

@@ -1,76 +1,74 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("collections") }}
</h3>
<div>
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<button
v-if="mode == 'import_from_my_collections'"
v-tooltip.left="'Back'"
class="tooltip-target icon button"
@click="
mode = 'import_export'
mySelectedCollectionID = undefined
"
>
<i class="material-icons">arrow_back</i>
</button>
<v-popover
v-if="
mode == 'import_export' && collectionsType.type == 'my-collections'
"
>
<button
v-if="mode != 'import_export'"
v-tooltip.left="'Back'"
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
@click="mode = 'import_export'"
>
<i class="material-icons">arrow_back</i>
<i class="material-icons">more_vert</i>
</button>
<v-popover
v-if="
mode == 'import_export' &&
collectionsType.type == 'my-collections'
"
>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
<button
v-tooltip="$t('replace_current')"
@@ -154,22 +152,23 @@
</option>
</select>
</span>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button
class="m-2 icon button primary"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
{{ $t("import") }}
</button>
</span>
</div>
</div>
</div>
</div>
</template>
<template #footer>
<div v-if="mode == 'import_from_my_collections'">
<span></span>
<span>
<button
class="m-2 icon button"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import") }}</span>
</button>
</span>
</div>
</template>
</SmartModal>
</template>

44
components/collections/SaveRequest.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input
id="selectLabel"
@@ -39,20 +37,18 @@
@update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequestAs">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequestAs">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -43,7 +43,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="request.name"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -32,7 +32,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -1,63 +1,59 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("collections") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</div>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
@@ -102,7 +98,7 @@
</span>
</button>
</div>
</div>
</template>
</SmartModal>
</template>

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

@@ -29,7 +29,7 @@
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

1
components/collections/index.vue
View File

@@ -25,6 +25,7 @@
<CollectionsEdit
:show="showModalEdit"
:editing-coll-name="editingCollection ? editingCollection.name : ''"
:placeholder-coll-name="editingCollection ? editingCollection.name : ''"
@hide-modal="displayModalEdit(false)"
@submit="updateEditingCollection"
/>

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

@@ -51,7 +51,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -31,7 +31,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -31,7 +31,7 @@
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -41,7 +41,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"

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

@@ -26,7 +26,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"

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

@@ -25,7 +25,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

44
components/environments/Add.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewEnvironment">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewEnvironment">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/environments/Edit.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -82,20 +80,18 @@
</button>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveEnvironment">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveEnvironment">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/environments/Environment.vue
View File

@@ -11,7 +11,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

112
components/environments/ImportExport.vue
View File

@@ -1,63 +1,61 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
<template #header>
<h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</div>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
@@ -102,7 +100,7 @@
</span>
</button>
</div>
</div>
</template>
</SmartModal>
</template>

96
components/firebase/Email.vue
View File

@@ -1,16 +1,12 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="body" class="flex flex-col">
<template #header>
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template v-if="mode === 'sign-in'" #body>
<label for="email"> E-mail </label>
<input
id="email"
@@ -25,47 +21,47 @@
autofocus
@keyup.enter="signInWithEmail"
/>
</div>
<div v-else slot="body" class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</template>
<template v-else #body>
<div class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
</template>
<template v-if="mode === 'sign-in'" #footer>
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</div>
</div>
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</template>
</SmartModal>
</template>

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

@@ -46,7 +46,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

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

@@ -53,7 +53,7 @@
<button v-tooltip="$t('options')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

22
components/http/CodegenModal.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="requestType">{{ $t("choose_language") }}</label>
<span class="select-wrapper">
<v-popover>
@@ -26,7 +24,7 @@
readonly
autofocus
/>
<template slot="popover">
<template #popover>
<div v-for="gen in codegens" :key="gen.id">
<button
v-close-popover
@@ -68,7 +66,7 @@
}"
styles="rounded-b-lg"
/>
</div>
</template>
</SmartModal>
</template>

44
components/http/ImportCurl.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("import_curl") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("import_curl") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<textarea
id="import-curl"
class="textarea"
@@ -18,20 +16,18 @@
rows="8"
:placeholder="$t('enter_curl')"
></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</template>
</SmartModal>
</template>

20
components/http/TokenList.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("manage_token") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("manage_token") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="row-wrapper">
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
@@ -64,7 +62,7 @@
<p v-if="tokens.length === 0" class="info">
{{ $t("empty") }}
</p>
</div>
</template>
</SmartModal>
</template>

44
components/smart/ConfirmModal.vue
View File

@@ -1,31 +1,27 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label>{{ title }}</label>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</template>
</SmartModal>
</template>

14
components/smart/Modal.vue
View File

@@ -11,15 +11,21 @@
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
<div class="row-wrapper">
<slot name="header"></slot>
</div>
</div>
<div class="modal-body">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="flex flex-col">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="bottom fade"></div> -->
</div>
</div>
<div v-if="hasFooterSlot" class="modal-footer">
<slot name="footer"></slot>
<div class="row-wrapper">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>

45
components/teams/Add.vue
View File

@@ -1,20 +1,17 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<template #header>
<h3 class="heading">{{ $t("new_team") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template #body>
<ul>
<li>
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_team") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<label>{{ $t("label") }}</label>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input
@@ -26,20 +23,18 @@
/>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewTeam">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

47
components/teams/Edit.vue
View File

@@ -1,20 +1,19 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<template #header>
<h3 class="heading">{{ $t("edit_team") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template #body>
<ul>
<li>
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_team") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<label>{{ $t("label") }}</label>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input
@@ -70,7 +69,7 @@
"
readonly
/>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover
@@ -150,7 +149,7 @@
"
readonly
/>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover
@@ -203,20 +202,18 @@
</button>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveTeam">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/teams/Team.vue
View File

@@ -14,7 +14,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div v-if="team.myRole === 'OWNER'">
<button
v-close-popover