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

refactor: improved popover actions, key bindings

Browse Source
This commit is contained in:
Liyas Thomas
2022-10-01 12:22:07 +05:30
parent 1006617e99
commit 1f29ff24d7
33 changed files with 184 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/hoppscotch-app/src/components/app/Footer.vue
View File

@@ -22,7 +22,7 @@
}"
@click="ZEN_MODE = !ZEN_MODE"
/>
<tippy interactive trigger="click" theme="popover" arrow>
<tippy interactive trigger="click" theme="popover">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('settings.interceptor')"
@@ -35,11 +35,9 @@
</div>
<div class="flex">
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -52,7 +50,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.d="documentation.$el.click()"
@keyup.s="shortcuts.$el.click()"
@keyup.c="chat.$el.click()"
@@ -284,5 +281,4 @@ const tippyActions = ref<any | null>(null)
const documentation = ref<any | null>(null)
const shortcuts = ref<any | null>(null)
const chat = ref<any | null>(null)
const options = ref<any | null>(null)
</script>

2
packages/hoppscotch-app/src/components/app/Header.vue
View File

@@ -63,7 +63,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ProfilePicture
@@ -103,7 +102,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.enter="profile.$el.click()"
@keyup.s="settings.$el.click()"
@keyup.l="logout.$el.click()"

8
packages/hoppscotch-app/src/components/collections/ChooseType.vue
View File

@@ -19,8 +19,8 @@
interactive
trigger="click"
theme="popover"
arrow
placement="bottom"
:on-shown="() => tippyActions.focus()"
>
<span
v-tippy="{ theme: 'tooltip' }"
@@ -41,9 +41,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -93,6 +93,8 @@ type CollectionTabs = "my-collections" | "team-collections"
const t = useI18n()
// Template refs
const tippyActions = ref<any | null>(null)
const selectedCollectionTab = ref<CollectionTabs>("my-collections")
defineProps<{

8
packages/hoppscotch-app/src/components/collections/ImportExport.vue
View File

@@ -17,7 +17,7 @@
</template>
<template #body>
<div v-if="importerType !== null" class="flex flex-col">
<div class="flex flex-col pb-6">
<div class="flex flex-col pb-4">
<div
v-for="(step, index) in importerSteps"
:key="`step-${index}`"
@@ -37,13 +37,15 @@
{{ t(`${step.metadata.caption}`) }}
</span>
</p>
<p class="flex flex-col ml-10">
<p
class="flex flex-col ml-10 border border-dashed rounded border-dividerDark"
>
<input
id="inputChooseFileToImportFrom"
ref="inputChooseFileToImportFrom"
name="inputChooseFileToImportFrom"
type="file"
class="cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
class="p-4 cursor-pointer transition file:transition file:cursor-pointer text-secondary hover:text-secondaryDark file:mr-2 file:py-2 file:px-4 file:rounded file:border-0 file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
:accept="step.metadata.acceptedFileTypes"
@change="onFileChange"
/>

4
packages/hoppscotch-app/src/components/collections/graphql/Collection.vue
View File

@@ -57,7 +57,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -65,13 +64,11 @@
:title="t('action.more')"
:icon="IconMoreVertical"
/>
<template #content="{ hide }">
<div
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@@ -243,6 +240,7 @@ const emit = defineEmits<{
(e: "edit-collection"): void
}>()
// Template refs
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const requestAction = ref<any | null>(null)

3
packages/hoppscotch-app/src/components/collections/graphql/Folder.vue
View File

@@ -49,7 +49,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -62,7 +61,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@@ -231,6 +229,7 @@ const emit = defineEmits([
"duplicate-request",
])
// Template refs
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const requestAction = ref<any | null>(null)

8
packages/hoppscotch-app/src/components/collections/graphql/ImportExport.vue
View File

@@ -8,17 +8,18 @@
>
<template #actions>
<span>
<tippy interactive trigger="click" theme="popover" arrow>
<tippy interactive trigger="click" theme="popover">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
:icon="IconMoreVertical"
:on-shown="() => tippyActions.focus()"
/>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -122,6 +123,7 @@ const collections = useReadonlyStream(graphqlCollections$, [])
const currentUser = useReadonlyStream(currentUser$, null)
// Template refs
const tippyActions = ref<any | null>(null)
const inputChooseFileToImportFrom = ref<HTMLInputElement>()
const collectionJson = computed(() => {

3
packages/hoppscotch-app/src/components/collections/graphql/Request.vue
View File

@@ -42,7 +42,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -55,7 +54,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()"
@@ -136,6 +134,7 @@ import { cloneDeep } from "lodash-es"
import { removeGraphqlRequest } from "~/newstore/collections"
import { setGQLSession } from "~/newstore/GQLSession"
// Template refs
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const edit = ref<any | null>(null)

5
packages/hoppscotch-app/src/components/collections/my/Collection.vue
View File

@@ -58,7 +58,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -71,13 +70,12 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()"
@keyup.x="exportAction.$el.click()"
@keyup.escape="options.tippy().hide()"
@keyup.escape="hide()"
>
<SmartItem
ref="requestAction"
@@ -265,6 +263,7 @@ export default defineComponent({
toast: useToast(),
t: useI18n(),
// Template refs
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
requestAction: ref<any | null>(null),

3
packages/hoppscotch-app/src/components/collections/my/Folder.vue
View File

@@ -49,7 +49,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -62,7 +61,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@@ -253,6 +251,7 @@ export default defineComponent({
const t = useI18n()
return {
// Template refs
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
requestAction: ref<any | null>(null),

2
packages/hoppscotch-app/src/components/collections/my/Request.vue
View File

@@ -61,7 +61,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -74,7 +73,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()"

3
packages/hoppscotch-app/src/components/collections/teams/Collection.vue
View File

@@ -62,7 +62,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -75,7 +74,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@@ -276,6 +274,7 @@ export default defineComponent({
const t = useI18n()
return {
// Template refs
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
requestAction: ref<any | null>(null),

5
packages/hoppscotch-app/src/components/collections/teams/Folder.vue
View File

@@ -52,7 +52,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -65,13 +64,12 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.r="requestAction.$el.click()"
@keyup.n="folderAction.$el.click()"
@keyup.e="edit.$el.click()"
@keyup.delete="deleteAction.$el.click()"
@keyup.x="exportAction.$el.click()"
@keyup.escape="options.tippy().hide()"
@keyup.escape="hide()"
>
<SmartItem
ref="requestAction"
@@ -263,6 +261,7 @@ export default defineComponent({
],
setup() {
return {
// Template refs
tippyActions: ref<any | null>(null),
options: ref<any | null>(null),
requestAction: ref<any | null>(null),

2
packages/hoppscotch-app/src/components/collections/teams/Request.vue
View File

@@ -62,7 +62,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -75,7 +74,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()"
@keyup.delete="deleteAction.$el.click()"

3
packages/hoppscotch-app/src/components/environments/Environment.vue
View File

@@ -23,7 +23,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -36,7 +35,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.e="edit.$el.click()"
@keyup.d="duplicate.$el.click()"
@keyup.delete="
@@ -127,6 +125,7 @@ const emit = defineEmits<{
const confirmRemove = ref(false)
// Template refs
const tippyActions = ref<any | null>(null)
const options = ref<any | null>(null)
const edit = ref<any | null>(null)

13
packages/hoppscotch-app/src/components/environments/ImportExport.vue
View File

@@ -8,7 +8,12 @@
>
<template #actions>
<span>
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.more')"
@@ -16,9 +21,9 @@
/>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -123,7 +128,7 @@ const environments = useReadonlyStream(environments$, [])
const currentUser = useReadonlyStream(currentUser$, null)
// Template refs
const options = ref<any>()
const tippyActions = ref<any | null>(null)
const inputChooseFileToImportFrom = ref<HTMLInputElement>()
const environmentJson = computed(() => {

15
packages/hoppscotch-app/src/components/environments/index.vue
View File

@@ -1,7 +1,12 @@
<template>
<div>
<div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
<tippy ref="options" interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span
v-tippy="{ theme: 'tooltip' }"
:title="`${t('environment.select')}`"
@@ -20,9 +25,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -144,8 +149,6 @@ import {
const t = useI18n()
const options = ref<any | null>(null)
const colorMode = useColorMode()
const globalEnv = useReadonlyStream(globalEnv$, [])
@@ -163,6 +166,8 @@ const selectedEnvironmentIndex = useStream(
setCurrentEnvironment
)
// Template refs
const tippyActions = ref<any | null>(null)
const showModalImportExport = ref(false)
const showModalDetails = ref(false)
const action = ref<"new" | "edit">("edit")

20
packages/hoppscotch-app/src/components/graphql/Authorization.vue
View File

@@ -8,20 +8,19 @@
{{ t("authorization.type") }}
</label>
<tippy
ref="authTypeOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
</span>
<template #content="{ hide }">
<div
class="flex flex-col space-y-1"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -175,11 +174,10 @@
{{ t("authorization.pass_key_by") }}
</label>
<tippy
ref="addToOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => authTippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
@@ -189,9 +187,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="authTippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -301,6 +299,8 @@ const clearContent = () => {
authActive: true,
}
}
const authTypeOptions = ref<any | null>(null)
const addToOptions = ref<any | null>(null)
// Template refs
const tippyActions = ref<any | null>(null)
const authTippyActions = ref<any | null>(null)
</script>

17
packages/hoppscotch-app/src/components/graphql/Response.vue
View File

@@ -23,14 +23,18 @@
@click.prevent="linewrapEnabled = !linewrapEnabled"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.download_file')"
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t(
'action.download_file'
)} <xmp>${getSpecialKey()}</xmp><xmp>J</xmp>`"
:icon="downloadResponseIcon"
@click="downloadResponse"
/>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.copy')"
v-tippy="{ theme: 'tooltip', allowHTML: true }"
:title="`${t(
'action.copy'
)} <xmp>${getSpecialKey()}</xmp><xmp>.</xmp>`"
:icon="copyResponseIcon"
@click="copyResponse"
/>
@@ -86,6 +90,8 @@ import { useReadonlyStream } from "@composables/stream"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
import { gqlResponse$ } from "~/newstore/GQLSession"
import { defineActionHandler } from "~/helpers/actions"
import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
const t = useI18n()
@@ -141,4 +147,7 @@ const downloadResponse = () => {
URL.revokeObjectURL(url)
}, 1000)
}
defineActionHandler("response.file.download", () => downloadResponse())
defineActionHandler("response.copy", () => copyResponse())
</script>

20
packages/hoppscotch-app/src/components/http/Authorization.vue
View File

@@ -8,20 +8,19 @@
{{ t("authorization.type") }}
</label>
<tippy
ref="authTypeOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary class="pr-8 ml-2 rounded-none" :label="authName" />
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -172,11 +171,10 @@
{{ t("authorization.pass_key_by") }}
</label>
<tippy
ref="addToOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => authTippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
@@ -186,9 +184,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="authTippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -297,6 +295,8 @@ const clearContent = () => {
authActive: true,
}
}
const authTypeOptions = ref<any | null>(null)
const addToOptions = ref<any | null>(null)
// Template refs
const tippyActions = ref<any | null>(null)
const authTippyActions = ref<any | null>(null)
</script>

16
packages/hoppscotch-app/src/components/http/Body.vue
View File

@@ -7,7 +7,12 @@
<label class="font-semibold text-secondaryLight">
{{ t("request.content_type") }}
</label>
<tippy interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
:label="contentType || t('state.none')"
@@ -16,9 +21,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col space-y-1 divide-y divide-dividerLight"
ref="tippyActions"
class="flex flex-col space-y-2 divide-y focus:outline-none divide-dividerLight"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -122,7 +127,7 @@ import IconDone from "~icons/lucide/check"
import IconInfo from "~icons/lucide/info"
import IconRefreshCW from "~icons/lucide/refresh-cw"
import IconExternalLink from "~icons/lucide/external-link"
import { computed } from "vue"
import { computed, ref } from "vue"
import { pipe } from "fp-ts/function"
import * as A from "fp-ts/Array"
import * as O from "fp-ts/Option"
@@ -177,4 +182,7 @@ const isContentTypeAlreadyExist = () => {
A.some((e) => e.key.toLowerCase() === "content-type")
)
}
// Template refs
const tippyActions = ref<any | null>(null)
</script>

13
packages/hoppscotch-app/src/components/http/CodegenModal.vue
View File

@@ -11,12 +11,11 @@
{{ t("request.choose_language") }}
</label>
<tippy
ref="options"
placement="bottom"
interactive
trigger="click"
theme="popover"
arrow
placement="bottom"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
@@ -39,9 +38,9 @@
/>
</div>
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -148,8 +147,6 @@ const emit = defineEmits<{
const toast = useToast()
const options = ref<any | null>(null)
const request = ref(getRESTRequest())
const codegenType = ref<CodegenName>("shell-curl")
const errorState = ref(false)
@@ -195,6 +192,8 @@ const requestCode = computed(() => {
}
})
// Template refs
const tippyActions = ref<any | null>(null)
const generatedCode = ref<any | null>(null)
useCodemirror(generatedCode, requestCode, {

14
packages/hoppscotch-app/src/components/http/Request.vue
View File

@@ -8,11 +8,9 @@
<div class="relative flex">
<label for="method">
<tippy
ref="methodOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => methodTippyActions.focus()"
>
<span class="select-wrapper">
@@ -30,7 +28,6 @@
ref="methodTippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -69,11 +66,9 @@
/>
<span class="flex">
<tippy
ref="sendOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => sendTippyActions.focus()"
>
<ButtonPrimary
@@ -86,7 +81,6 @@
ref="sendTippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.c="curl.$el.click()"
@keyup.s="show.$el.click()"
@keyup.delete="clearAll.$el.click()"
@@ -133,7 +127,7 @@
</tippy>
</span>
<span
class="flex ml-2 border rounded border-dividerLight hover:border-dividerDark transition"
class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
>
<ButtonSecondary
class="flex-1 rounded rounded-r-none"
@@ -144,11 +138,9 @@
/>
<span class="flex">
<tippy
ref="saveOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => saveTippyActions.focus()"
>
<ButtonSecondary
@@ -171,7 +163,6 @@
ref="saveTippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.c="copyRequestAction.$el.click()"
@keyup.s="saveRequestAction.$el.click()"
@keyup.escape="hide()"
@@ -307,9 +298,6 @@ const showSaveRequestModal = ref(false)
const hasNavigatorShare = !!navigator.share
// Template refs
const methodOptions = ref<any | null>(null)
const saveOptions = ref<any | null>(null)
const sendOptions = ref<any | null>(null)
const methodTippyActions = ref<any | null>(null)
const sendTippyActions = ref<any | null>(null)
const saveTippyActions = ref<any | null>(null)

18
packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -97,11 +97,10 @@
class="flex items-center"
>
<tippy
ref="outlineOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
<div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
@@ -117,9 +116,9 @@
>
<div
v-if="item.kind === 'ArrayMember'"
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -136,9 +135,9 @@
</div>
<div
v-if="item.kind === 'ObjectMember'"
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -156,8 +155,8 @@
</div>
<div
v-if="item.kind === 'RootObject'"
ref="tippyActions"
class="flex flex-col"
role="menu"
>
<SmartItem
label="{}"
@@ -171,8 +170,8 @@
</div>
<div
v-if="item.kind === 'RootArray'"
ref="tippyActions"
class="flex flex-col"
role="menu"
>
<SmartItem
label="[]"
@@ -321,7 +320,8 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
jsonBodyText
)
const outlineOptions = ref<any | null>(null)
// Template refs
const tippyActions = ref<any | null>(null)
const jsonResponse = ref<any | null>(null)
const linewrapEnabled = ref(true)

10
packages/hoppscotch-app/src/components/realtime/Communication.vue
View File

@@ -19,11 +19,10 @@
{{ t("websocket.message") }}
</label>
<tippy
ref="contentTypeOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
@@ -33,9 +32,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -158,9 +157,10 @@ const emit = defineEmits<{
const t = useI18n()
const toast = useToast()
// Template refs
const tippyActions = ref<any | null>(null)
const linewrapEnabled = ref(true)
const wsCommunicationBody = ref<HTMLElement>()
const contentTypeOptions = ref<Element>()
const payload = ref<HTMLInputElement>()
const prettifyIcon = refAutoReset<Component>(IconWand, 1000)

27
packages/hoppscotch-app/src/components/realtime/LogEntry.vue
View File

@@ -96,7 +96,12 @@
:key="`item-${index}`"
class="flex items-center"
>
<tippy interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<div v-if="item.kind === 'RootObject'" class="outline-item">{}</div>
<div v-if="item.kind === 'RootArray'" class="outline-item">[]</div>
<div v-if="item.kind === 'ArrayMember'" class="outline-item">
@@ -113,9 +118,9 @@
>
<div
v-if="item.kind === 'ArrayMember'"
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -132,9 +137,9 @@
</div>
<div
v-if="item.kind === 'ObjectMember'"
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -152,8 +157,8 @@
</div>
<div
v-if="item.kind === 'RootObject'"
class="flex flex-col"
role="menu"
ref="tippyActions"
class="flex flex-col focus:outline-none"
>
<SmartItem
label="{}"
@@ -167,8 +172,8 @@
</div>
<div
v-if="item.kind === 'RootArray'"
class="flex flex-col"
role="menu"
ref="tippyActions"
class="flex flex-col focus:outline-none"
>
<SmartItem
label="[]"
@@ -223,8 +228,12 @@ import { shortDateTime } from "~/helpers/utils/date"
const t = useI18n()
const props = defineProps<{ entry: LogEntryData }>()
// Template refs
const tippyActions = ref<any | null>(null)
const editor = ref<any | null>(null)
const linewrapEnabled = ref(true)
const logPayload = computed(() => props.entry.payload)
const selectedTab = ref<"json" | "raw">(

13
packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
View File

@@ -1,6 +1,11 @@
<template>
<span class="inline-flex">
<tippy interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -23,9 +28,9 @@
/>
</div>
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartLink
@@ -96,6 +101,8 @@ const changeLocale = (locale: string) => {
changeAppLanguage(locale)
}
// Template refs
const tippyActions = ref<any | null>(null)
const searchQuery = ref("")
const filteredAppLanguages = computed(() => {

15
packages/hoppscotch-app/src/components/smart/FontSizePicker.vue
View File

@@ -1,6 +1,11 @@
<template>
<span class="inline-flex">
<tippy interactive trigger="click" theme="popover" arrow>
<tippy
interactive
trigger="click"
theme="popover"
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
@@ -15,9 +20,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -46,6 +51,7 @@ import IconType from "~icons/lucide/type"
import { HoppFontSizes, HoppFontSize, applySetting } from "~/newstore/settings"
import { useSetting } from "@composables/settings"
import { useI18n } from "@composables/i18n"
import { ref } from "vue"
const t = useI18n()
@@ -59,4 +65,7 @@ const getFontSizeName = (size: HoppFontSize) => {
const setActiveFont = (size: HoppFontSize) => {
applySetting("FONT_SIZE", size)
}
// Template refs
const tippyActions = ref<any | null>(null)
</script>

10
packages/hoppscotch-app/src/components/teams/Edit.vue
View File

@@ -87,11 +87,10 @@
/>
<span>
<tippy
ref="memberOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<input
@@ -104,9 +103,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -233,7 +232,8 @@ const emit = defineEmits<{
(e: "invite-team"): void
}>()
const memberOptions = ref<any | null>(null)
// Template refs
const tippyActions = ref<any | null>(null)
const props = defineProps<{
show: boolean

16
packages/hoppscotch-app/src/components/teams/Invite.vue
View File

@@ -140,11 +140,10 @@
/>
<span>
<tippy
ref="newInviteeOptions"
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<span class="select-wrapper">
<input
@@ -157,9 +156,9 @@
</span>
<template #content="{ hide }">
<div
class="flex flex-col"
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.escape="hide()"
>
<SmartItem
@@ -171,7 +170,7 @@
@click="
() => {
updateNewInviteeRole(index, 'OWNER')
newInviteeOptions[index].tippy().hide()
hide()
}
"
/>
@@ -184,7 +183,7 @@
@click="
() => {
updateNewInviteeRole(index, 'EDITOR')
newInviteeOptions[index].tippy().hide()
hide()
}
"
/>
@@ -197,7 +196,7 @@
@click="
() => {
updateNewInviteeRole(index, 'VIEWER')
newInviteeOptions[index].tippy().hide()
hide()
}
"
/>
@@ -372,7 +371,8 @@ const toast = useToast()
const colorMode = useColorMode()
const newInviteeOptions = ref<any | null>(null)
// Template refs
const tippyActions = ref<any | null>(null)
const props = defineProps({
show: Boolean,

2
packages/hoppscotch-app/src/components/teams/Team.vue
View File

@@ -81,7 +81,6 @@
interactive
trigger="click"
theme="popover"
arrow
:on-shown="() => tippyActions.focus()"
>
<ButtonSecondary
@@ -94,7 +93,6 @@
ref="tippyActions"
class="flex flex-col focus:outline-none"
tabindex="0"
role="menu"
@keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
@keyup.x="
!(team.myRole === 'OWNER' && team.ownersCount == 1)