feat: introducing a new smart input hoppscotch ui component (#3089)
Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>
This commit is contained in:
Joel Jacob Stephen
committed by
GitHub
GitHub
parent
01cf59c663
commit
81fbb22c51
@@ -4,15 +4,13 @@
|
||||
<div
|
||||
class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
|
||||
>
|
||||
<div class="flex flex-col px-6 py-4 border-b border-dividerLight">
|
||||
<input
|
||||
v-model="filterText"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="filterText"
|
||||
type="search"
|
||||
styles="px-6 py-4 border-b border-dividerLight"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
input-styles="flex px-4 py-2 border rounded bg-primaryContrast border-divider hover:border-dividerDark focus-visible:border-dividerDark"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col divide-y divide-dividerLight">
|
||||
<HoppSmartPlaceholder
|
||||
@@ -21,6 +19,7 @@
|
||||
>
|
||||
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
|
||||
</HoppSmartPlaceholder>
|
||||
|
||||
<details
|
||||
v-for="(sectionResults, sectionTitle) in shortcutsResults"
|
||||
v-else
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelAdd"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addNewCollection"
|
||||
/>
|
||||
<label for="selectLabelAdd">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="addNewCollection"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelAddFolder"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addFolder"
|
||||
/>
|
||||
<label for="selectLabelAddFolder">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
input-styles="floating-input"
|
||||
:label="t('action.label')"
|
||||
@submit="addFolder"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,19 +6,13 @@
|
||||
@close="$emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelAddRequest"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addRequest"
|
||||
/>
|
||||
<label for="selectLabelAddRequest">{{ t("action.label") }}</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="addRequest"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="saveCollection"
|
||||
/>
|
||||
<label for="selectLabelEdit">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
input-styles="floating-input"
|
||||
:label="t('action.label')"
|
||||
@submit="saveCollection"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelEditFolder"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="editFolder"
|
||||
/>
|
||||
<label for="selectLabelEditFolder">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="editFolder"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelEditReq"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="editRequest"
|
||||
/>
|
||||
<label for="selectLabelEditReq">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="editRequest"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -8,21 +8,15 @@
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<div class="relative flex">
|
||||
<input
|
||||
id="selectLabelSaveReq"
|
||||
v-model="requestName"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="saveRequestAs"
|
||||
/>
|
||||
<label for="selectLabelSaveReq">
|
||||
{{ t("request.name") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="requestName"
|
||||
styles="relative flex"
|
||||
placeholder=" "
|
||||
:label="t('request.name')"
|
||||
input-styles="floating-input"
|
||||
@submit="saveRequestAs"
|
||||
/>
|
||||
|
||||
<label class="p-4">
|
||||
{{ t("collection.select_location") }}
|
||||
</label>
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlAdd"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addNewCollection"
|
||||
/>
|
||||
<label for="selectLabelGqlAdd">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
input-styles="floating-input"
|
||||
:label="t('action.label')"
|
||||
@submit="addNewCollection"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="$emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlAddFolder"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addFolder"
|
||||
/>
|
||||
<label for="selectLabelGqlAddFolder">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="addFolder"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlAddRequest"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addRequest"
|
||||
/>
|
||||
<label for="selectLabelGqlAddRequest">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="addRequest"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="saveCollection"
|
||||
/>
|
||||
<label for="selectLabelGqlEdit">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="saveCollection"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="$emit('hide-modal')"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlEditFolder"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="editFolder"
|
||||
/>
|
||||
<label for="selectLabelGqlEditFolder">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="editFolder"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -6,21 +6,13 @@
|
||||
@close="hideModal"
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelGqlEditReq"
|
||||
v-model="requestUpdateData.name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="saveRequest"
|
||||
/>
|
||||
<label for="selectLabelGqlEditReq">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="requestUpdateData.name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="saveRequest"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
:placeholder="t('action.search')"
|
||||
class="py-2 pl-4 pr-2 bg-transparent"
|
||||
class="py-2 pl-4 pr-2 bg-transparent !border-0"
|
||||
/>
|
||||
<div
|
||||
class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
|
||||
|
||||
@@ -18,12 +18,12 @@
|
||||
"
|
||||
>
|
||||
<WorkspaceCurrent :section="t('tab.collections')" />
|
||||
<input
|
||||
|
||||
<HoppSmartInput
|
||||
v-model="filterTexts"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
:placeholder="t('action.search')"
|
||||
class="py-2 pl-4 pr-2 bg-transparent"
|
||||
input-styles="py-2 pl-4 pr-2 bg-transparent !border-0"
|
||||
type="search"
|
||||
:disabled="collectionsType.type === 'team-collections'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -7,22 +7,15 @@
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<div class="relative flex">
|
||||
<input
|
||||
id="selectLabelEnvEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
:disabled="editingEnvironmentIndex === 'Global'"
|
||||
@keyup.enter="saveEnvironment"
|
||||
/>
|
||||
<label for="selectLabelEnvEdit">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
:disabled="editingEnvironmentIndex === 'Global'"
|
||||
@submit="saveEnvironment"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-between flex-1">
|
||||
<label for="variableList" class="p-4">
|
||||
{{ t("environment.variable_list") }}
|
||||
|
||||
@@ -7,23 +7,15 @@
|
||||
>
|
||||
<template #body>
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="relative flex">
|
||||
<input
|
||||
id="selectLabelEnvEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
:class="isViewer && 'opacity-25'"
|
||||
placeholder=""
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
:disabled="isViewer"
|
||||
@keyup.enter="saveEnvironment"
|
||||
/>
|
||||
<label for="selectLabelEnvEdit">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:input-styles="['floating-input', isViewer && 'opacity-25']"
|
||||
:label="t('action.label')"
|
||||
:disabled="isViewer"
|
||||
@submit="saveEnvironment"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-between flex-1">
|
||||
<label for="variableList" class="p-4">
|
||||
{{ t("environment.variable_list") }}
|
||||
|
||||
@@ -37,24 +37,14 @@
|
||||
class="flex flex-col space-y-2"
|
||||
@submit.prevent="signInWithEmail"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="off"
|
||||
required
|
||||
spellcheck="false"
|
||||
autofocus
|
||||
/>
|
||||
<label for="email">
|
||||
{{ t("auth.email") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
placeholder=" "
|
||||
:label="t('auth.email')"
|
||||
input-styles="floating-input"
|
||||
/>
|
||||
|
||||
<HoppButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
type="submit"
|
||||
|
||||
@@ -18,15 +18,13 @@
|
||||
</span>
|
||||
<template #content="{ hide }">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div class="sticky z-10 top-0 flex-shrink-0 overflow-x-auto">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="flex w-full p-4 py-2 input !bg-primaryContrast"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
/>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="searchQuery"
|
||||
styles="ticky z-10 top-0 flex-shrink-0 overflow-x-auto"
|
||||
:placeholder="`${t('action.search')}`"
|
||||
type="search"
|
||||
input-styles="flex w-full p-4 py-2 input !bg-primaryContrast"
|
||||
/>
|
||||
<div
|
||||
ref="tippyActions"
|
||||
class="flex flex-col focus:outline-none"
|
||||
|
||||
@@ -1,21 +1,13 @@
|
||||
<template>
|
||||
<HoppSmartModal v-if="show" dialog :title="t('team.new')" @close="hideModal">
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="selectLabelTeamAdd"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="addNewTeam"
|
||||
/>
|
||||
<label for="selectLabelTeamAdd">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
:label="t('action.label')"
|
||||
placeholder=" "
|
||||
input-styles="floating-input"
|
||||
@submit="addNewTeam"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<span class="flex space-x-2">
|
||||
|
||||
@@ -2,21 +2,13 @@
|
||||
<HoppSmartModal v-if="show" dialog :title="t('team.edit')" @close="hideModal">
|
||||
<template #body>
|
||||
<div class="flex flex-col">
|
||||
<div class="relative flex">
|
||||
<input
|
||||
id="selectLabelTeamEdit"
|
||||
v-model="name"
|
||||
v-focus
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
@keyup.enter="saveTeam"
|
||||
/>
|
||||
<label for="selectLabelTeamEdit">
|
||||
{{ t("action.label") }}
|
||||
</label>
|
||||
</div>
|
||||
<HoppSmartInput
|
||||
v-model="name"
|
||||
placeholder=" "
|
||||
:label="t('action.label')"
|
||||
input-styles="floating-input"
|
||||
@submit="saveTeam"
|
||||
/>
|
||||
<div class="flex items-center justify-between flex-1 pt-4">
|
||||
<label for="memberList" class="p-4">
|
||||
{{ t("team.members") }}
|
||||
|
||||
Reference in New Issue
Block a user