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

2
components/app/Footer.vue
View File

@@ -57,7 +57,7 @@
<button v-tooltip="$t('choose_language')" class="icon button"> <button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons">translate</i> <i class="material-icons">translate</i>
</button> </button>
<template slot="popover"> <template #popover>
<div v-for="locale in availableLocales" :key="locale.code"> <div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)"> <nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon button"> <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"> <button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i> <i class="material-icons">login</i>
</button> </button>
<template slot="popover"> <template #popover>
<FirebaseLogin @show-email="showEmail = true" /> <FirebaseLogin @show-email="showEmail = true" />
</template> </template>
</v-popover> </v-popover>
@@ -94,7 +94,7 @@
/> />
<i v-else class="material-icons">account_circle</i> <i v-else class="material-icons">account_circle</i>
</button> </button>
<template slot="popover"> <template #popover>
<div> <div>
<nuxt-link v-close-popover :to="localePath('settings')"> <nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon button"> <button class="icon button">
@@ -114,7 +114,7 @@
<button v-tooltip="$t('more')" class="icon button"> <button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i> <i class="material-icons">drag_indicator</i>
</button> </button>
<template slot="popover"> <template #popover>
<button <button
v-close-popover v-close-popover
class="icon button" class="icon button"

21
components/app/Shortcuts.vue
View File

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

21
components/app/Support.vue
View File

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

44
components/collections/Add.vue
View File

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

44
components/collections/AddFolder.vue
View File

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

44
components/collections/Edit.vue
View File

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

44
components/collections/EditFolder.vue
View File

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

44
components/collections/EditRequest.vue
View File

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

159
components/collections/ImportExport.vue
View File

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

44
components/collections/SaveRequest.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,63 +1,59 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<div slot="header"> <template #header>
<div class="row-wrapper"> <h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<h3 class="heading"> <div>
{{ $t("import_export") }} {{ $t("collections") }} <v-popover>
</h3> <button
<div> v-tooltip.left="$t('more')"
<v-popover> class="tooltip-target icon button"
<button >
v-tooltip.left="$t('more')" <i class="material-icons">more_vert</i>
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>
</button> </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> </template>
<div slot="body" class="flex flex-col"> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col items-start p-2">
<button <button
v-tooltip="$t('replace_current')" v-tooltip="$t('replace_current')"
@@ -102,7 +98,7 @@
</span> </span>
</button> </button>
</div> </div>
</div> </template>
</SmartModal> </SmartModal>
</template> </template>

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

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

1
components/collections/index.vue
View File

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

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

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

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

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

44
components/environments/Add.vue
View File

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

44
components/environments/Edit.vue
View File

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

2
components/environments/Environment.vue
View File

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

112
components/environments/ImportExport.vue
View File

@@ -1,63 +1,61 @@
<template> <template>
<SmartModal v-if="show" @close="hideModal"> <SmartModal v-if="show" @close="hideModal">
<div slot="header"> <template #header>
<div class="row-wrapper"> <h3 class="heading">
<h3 class="heading"> {{ $t("import_export") }} {{ $t("environments") }}
{{ $t("import_export") }} {{ $t("environments") }} </h3>
</h3> <div>
<div> <v-popover>
<v-popover> <button
<button v-tooltip.left="$t('more')"
v-tooltip.left="$t('more')" class="tooltip-target icon button"
class="tooltip-target icon button" >
> <i class="material-icons">more_vert</i>
<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>
</button> </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> </template>
<div slot="body" class="flex flex-col"> <template #body>
<div class="flex flex-col items-start p-2"> <div class="flex flex-col items-start p-2">
<button <button
v-tooltip="$t('replace_current')" v-tooltip="$t('replace_current')"
@@ -102,7 +100,7 @@
</span> </span>
</button> </button>
</div> </div>
</div> </template>
</SmartModal> </SmartModal>
</template> </template>

96
components/firebase/Email.vue
View File

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

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

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

22
components/http/CodegenModal.vue
View File

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

44
components/http/ImportCurl.vue
View File

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

20
components/http/TokenList.vue
View File

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

44
components/smart/ConfirmModal.vue
View File

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

14
components/smart/Modal.vue
View File

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

45
components/teams/Add.vue
View File

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

47
components/teams/Edit.vue
View File

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

2
components/teams/Team.vue
View File

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

12
pages/graphql.vue
View File

@@ -530,6 +530,9 @@ export default {
} }
}, },
computed: { computed: {
selectedRequest() {
return this.$store.state.postwoman.selectedGraphqlRequest
},
filteredQueryFields() { filteredQueryFields() {
return this.getFilteredGraphqlFields({ return this.getFilteredGraphqlFields({
filterText: this.graphqlFieldsFilterText, filterText: this.graphqlFieldsFilterText,
@@ -606,6 +609,15 @@ export default {
}, },
}, },
}, },
watch: {
selectedRequest(newValue) {
if (!newValue) return
this.url = newValue.url
this.gqlQueryString = newValue.query
this.headers = newValue.headers
this.variableString = newValue.variables
},
},
mounted() { mounted() {
if ( if (
this.$store.state.gql.schemaIntrospection && this.$store.state.gql.schemaIntrospection &&

47
pages/index.vue
View File

@@ -16,7 +16,7 @@
:readonly="!customMethod" :readonly="!customMethod"
autofocus autofocus
/> />
<template slot="popover"> <template #popover>
<div <div
v-for="(methodMenuItem, index) in methodMenuItems" v-for="(methodMenuItem, index) in methodMenuItems"
:key="`method-${index}`" :key="`method-${index}`"
@@ -114,7 +114,7 @@
v-model="contentType" v-model="contentType"
readonly readonly
/> />
<template slot="popover"> <template #popover>
<div <div
v-for="( v-for="(
contentTypeMenuItem, index contentTypeMenuItem, index
@@ -680,17 +680,15 @@
v-if="showTokenRequestList" v-if="showTokenRequestList"
@close="showTokenRequestList = false" @close="showTokenRequestList = false"
> >
<div slot="header"> <template #header>
<div class="row-wrapper"> <h3 class="heading">{{ $t("manage_token_req") }}</h3>
<h3 class="heading">{{ $t("manage_token_req") }}</h3> <div>
<div> <button class="icon button" @click="showTokenRequestList = false">
<button class="icon button" @click="showTokenRequestList = false"> <i class="material-icons">close</i>
<i class="material-icons">close</i> </button>
</button>
</div>
</div> </div>
</div> </template>
<div slot="body" class="flex flex-col"> <template #body>
<div class="row-wrapper"> <div class="row-wrapper">
<label for="token-req-list">{{ $t("token_req_list") }}</label> <label for="token-req-list">{{ $t("token_req_list") }}</label>
<div> <div>
@@ -745,17 +743,15 @@
rows="7" rows="7"
v-model="tokenReqDetails" v-model="tokenReqDetails"
></textarea> ></textarea>
</div> </template>
<div slot="footer"> <template #footer>
<div class="row-wrapper"> <span></span>
<span></span> <span>
<span> <button class="icon button primary" @click="addOAuthTokenReq">
<button class="icon button primary" @click="addOAuthTokenReq"> {{ $t("save_token_req") }}
{{ $t("save_token_req") }} </button>
</button> </span>
</span> </template>
</div>
</div>
</SmartModal> </SmartModal>
</div> </div>
</template> </template>
@@ -898,7 +894,7 @@ export default {
}, },
deep: true, deep: true,
}, },
selectedRequest(newValue, oldValue) { selectedRequest(newValue) {
// @TODO: Convert all variables to single request variable // @TODO: Convert all variables to single request variable
if (!newValue) return if (!newValue) return
this.uri = newValue.url + newValue.path this.uri = newValue.url + newValue.path
@@ -1216,6 +1212,9 @@ export default {
}) })
}, },
}, },
selectedRequest() {
return this.$store.state.postwoman.selectedRequest
},
requestName() { requestName() {
return this.name return this.name
}, },

460
store/postwoman.js Normal file
View File

@@ -0,0 +1,460 @@
import Vue from "vue"
export const SETTINGS_KEYS = [
/**
* Whether or not to enable scrolling to a specified element, when certain
* actions are triggered.
*/
"SCROLL_INTO_ENABLED",
/**
* Whether or not requests should be proxied.
*/
"PROXY_ENABLED",
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL",
/**
* The security key of the proxy.
*/
"PROXY_KEY",
/**
* An array of properties to exclude from the URL.
* e.g. 'auth'
*/
"URL_EXCLUDES",
/**
* A boolean value indicating whether to use the browser extensions
* to run the requests
*/
"EXTENSIONS_ENABLED",
/**
* A boolean value indicating whether to use the URL bar experiments
*/
"EXPERIMENTAL_URL_BAR_ENABLED",
]
export const state = () => ({
settings: {},
editingEnvironment: {},
selectedRequest: {},
selectedGraphqlRequest: {},
editingRequest: {},
})
export const mutations = {
applySetting({ settings }, setting) {
if (
setting === null ||
!(setting instanceof Array) ||
setting.length !== 2
) {
throw new Error(
"You must provide a setting (array in the form [key, value])"
)
}
const [key, value] = setting
// Do not just remove this check.
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if (!SETTINGS_KEYS.includes(key)) {
throw new Error(`The settings structure does not include the key ${key}`)
}
settings[key] = value
},
removeVariables({ editingEnvironment }, value) {
editingEnvironment.variables = value
},
setEditingEnvironment(state, value) {
state.editingEnvironment = { ...value }
},
setVariableKey({ editingEnvironment }, { index, value }) {
editingEnvironment.variables[index].key = value
},
setVariableValue({ editingEnvironment }, { index, value }) {
editingEnvironment.variables[index].value = testValue(value)
},
removeVariable({ editingEnvironment }, variables) {
editingEnvironment.variables = variables
},
addVariable({ editingEnvironment }, value) {
editingEnvironment.variables.push(value)
},
replaceEnvironments(state, environments) {
state.environments = environments
},
importAddEnvironments(state, { environments, confirmation }) {
const duplicateEnvironment = environments.some((item) => {
return state.environments.some((item2) => {
return item.name.toLowerCase() === item2.name.toLowerCase()
})
})
if (duplicateEnvironment) {
this.$toast.info("Duplicate environment")
return
}
state.environments = [...state.environments, ...environments]
let index = 0
for (const environment of state.environments) {
environment.environmentIndex = index
index += 1
}
this.$toast.info(confirmation, {
icon: "folder_shared",
})
},
removeEnvironment({ environments }, environmentIndex) {
environments.splice(environmentIndex, 1)
},
saveEnvironment({ environments }, payload) {
const { environment, environmentIndex } = payload
const { name } = environment
const duplicateEnvironment =
environments.length === 1
? false
: environments.some(
(item) =>
item.environmentIndex !== environmentIndex &&
item.name.toLowerCase() === name.toLowerCase()
)
if (duplicateEnvironment) {
this.$toast.info("Duplicate environment")
return
}
environments[environmentIndex] = environment
},
replaceCollections(state, item) {
const collections = item.data
const flag = item.flag
if (flag === "rest") state.collections = collections
else state.collectionsGraphql = collections
},
importCollections(state, item) {
const collections = item.data
const flag = item.flag
if (flag === "rest")
state.collections = [...state.collections, ...collections]
else
state.collectionsGraphql = [...state.collectionsGraphql, ...collections]
let index = 0
for (const collection of collections) {
collection.collectionIndex = index
index += 1
}
},
addNewCollection({ collections, collectionsGraphql }, collection) {
const name = collection.name
const flag = collection.flag
let duplicateCollection = null
if (flag === "rest") {
duplicateCollection = collections.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
} else {
duplicateCollection = collectionsGraphql.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
}
if (duplicateCollection) {
this.$toast.info("Duplicate collection")
return
}
if (flag === "rest") {
collections.push({
name: "",
folders: [],
requests: [],
...collection,
})
} else {
collectionsGraphql.push({
name: "",
folders: [],
requests: [],
...collection,
})
}
},
removeCollection({ collections, collectionsGraphql }, payload) {
const { collectionIndex, flag } = payload
if (flag === "rest") collections.splice(collectionIndex, 1)
else collectionsGraphql.splice(collectionIndex, 1)
},
editCollection({ collections, collectionsGraphql }, payload) {
const { collection, collectionIndex, flag } = payload
const { name } = collection
let duplicateCollection = null
if (flag === "rest") {
duplicateCollection = collections.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
} else {
duplicateCollection = collectionsGraphql.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
}
if (duplicateCollection) {
this.$toast.info("Duplicate collection")
return
}
if (flag === "rest") collections[collectionIndex] = collection
else collectionsGraphql[collectionIndex] = collection
},
addFolder({ collections, collectionsGraphql }, payload) {
const { name, path, flag } = payload
const newFolder = {
name,
requests: [],
folders: [],
}
// Walk from collections to destination with the path
const indexPaths = path.split("/").map((x) => parseInt(x))
let target = null
if (flag === "rest") target = collections[indexPaths.shift()]
else target = collectionsGraphql[indexPaths.shift()]
while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
target.folders.push(newFolder)
},
editFolder({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folder, folderIndex, folderName, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
const parentFolder = findFolder(folderName, collection, true)
if (parentFolder && parentFolder.folders) {
Vue.set(parentFolder.folders, folderIndex, folder)
}
},
removeFolder({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folderIndex, folderName, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
const parentFolder = findFolder(folderName, collection, true)
if (parentFolder && parentFolder.folders) {
parentFolder.folders.splice(folderIndex, 1)
}
},
editRequest({ collections, collectionsGraphql }, payload) {
const {
requestCollectionIndex,
requestFolderName,
requestFolderIndex,
requestNew,
requestIndex,
flag,
} = payload
let collection = null
if (flag === "rest") collection = collections[requestCollectionIndex]
else collection = collectionsGraphql[requestCollectionIndex]
if (requestFolderIndex === -1) {
Vue.set(collection.requests, requestIndex, requestNew)
return
}
const folder = findFolder(requestFolderName, collection, false)
Vue.set(folder.requests, requestIndex, requestNew)
},
saveRequestAs({ collections, collectionsGraphql }, payload) {
let { request } = payload
const { collectionIndex, folderName, requestIndex, flag } = payload
if (flag === "rest") {
// Filter out all file inputs
request = {
...request,
bodyParams: request.bodyParams.map((param) =>
param?.value?.[0] instanceof File ? { ...param, value: "" } : param
),
}
}
const specifiedCollection = collectionIndex !== undefined
const specifiedFolder = folderName !== undefined
const specifiedRequest = requestIndex !== undefined
if (specifiedCollection && specifiedFolder && specifiedRequest) {
const folder = findFolder(
folderName,
flag === "rest"
? collections[collectionIndex]
: collectionsGraphql[collectionIndex]
)
Vue.set(folder.requests, requestIndex, request)
} else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
const folder = findFolder(
folderName,
flag === "rest"
? collections[collectionIndex]
: collectionsGraphql[collectionIndex]
)
const requests = folder.requests
const lastRequestIndex = requests.length - 1
Vue.set(requests, lastRequestIndex + 1, request)
} else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
const requests =
flag === "rest"
? collections[collectionIndex].requests
: collectionsGraphql[collectionIndex].requests
Vue.set(requests, requestIndex, request)
} else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
const requests =
flag === "rest"
? collections[collectionIndex].requests
: collectionsGraphql[collectionIndex].requests
const lastRequestIndex = requests.length - 1
Vue.set(requests, lastRequestIndex + 1, request)
}
},
removeRequest({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folderName, requestIndex, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
if (collection.name === folderName) {
collection.requests.splice(requestIndex, 1)
return
}
const folder = findFolder(folderName, collection, false)
if (folder) {
folder.requests.splice(requestIndex, 1)
}
},
selectRequest(state, { request }) {
state.selectedRequest = Object.assign({}, request)
},
selectGraphqlRequest(state, { request }) {
state.selectedGraphqlRequest = Object.assign({}, request)
},
moveRequest({ collections, collectionsGraphql }, payload) {
const {
oldCollectionIndex,
newCollectionIndex,
newFolderIndex,
newFolderName,
oldFolderName,
requestIndex,
flag,
} = payload
const isCollection = newFolderIndex === -1
let oldCollection = null
if (flag === "rest") oldCollection = collections[oldCollectionIndex]
else oldCollection = collectionsGraphql[oldCollectionIndex]
let newCollection = null
if (flag === "rest") newCollection = collections[newCollectionIndex]
else newCollection = collectionsGraphql[newCollectionIndex]
const request = findRequest(oldFolderName, oldCollection, requestIndex)
if (isCollection) {
newCollection.requests.push(request)
return
}
if (!isCollection) {
const folder = findFolder(newFolderName, newCollection, false)
if (folder) {
folder.requests.push(request)
}
}
},
}
function testValue(myValue) {
try {
return JSON.parse(myValue)
} catch (ex) {
// Now we know it's a string just leave it as a string value.
return myValue
}
}
function findRequest(folderName, currentFolder, requestIndex) {
let selectedFolder, result
if (folderName === currentFolder.name) {
const request = currentFolder.requests[requestIndex]
currentFolder.requests.splice(requestIndex, 1)
return request
} else {
for (let i = 0; i < currentFolder.folders.length; i += 1) {
selectedFolder = currentFolder.folders[i]
result = findRequest(folderName, selectedFolder, requestIndex)
if (result !== false) {
return result
}
}
return false
}
}
function findFolder(folderName, currentFolder, returnParent, parentFolder) {
let selectedFolder, result
if (folderName === currentFolder.name && returnParent) {
return parentFolder
} else if (folderName === currentFolder.name && !returnParent) {
return currentFolder
} else {
for (let i = 0; i < currentFolder.folders.length; i++) {
selectedFolder = currentFolder.folders[i]
result = findFolder(
folderName,
selectedFolder,
returnParent,
currentFolder
)
if (result !== false) {
return result
}
}
return false
}
}