refactor: better implimentation for slots

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

View File

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

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>

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>

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>

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

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>

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

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"
/>

View File

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

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

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

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'"

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'"

View File

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