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

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