6fa722df7b
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
83 lines
2.4 KiB
Vue
83 lines
2.4 KiB
Vue
<template>
|
|
<div class="flex flex-1 border-b border-dividerLight">
|
|
<SmartEnvInput v-model="auth.key" placeholder="Key" />
|
|
</div>
|
|
<div class="flex flex-1 border-b border-dividerLight">
|
|
<SmartEnvInput v-model="auth.value" placeholder="Value" />
|
|
</div>
|
|
<div class="flex items-center border-b border-dividerLight">
|
|
<span class="flex items-center">
|
|
<label class="ml-4 text-secondaryLight">
|
|
{{ t("authorization.pass_key_by") }}
|
|
</label>
|
|
<tippy
|
|
interactive
|
|
trigger="click"
|
|
theme="popover"
|
|
:on-shown="() => authTippyActions.focus()"
|
|
>
|
|
<HoppSmartSelectWrapper>
|
|
<HoppButtonSecondary
|
|
:label="auth.addTo || t('state.none')"
|
|
class="ml-2 rounded-none pr-8"
|
|
/>
|
|
</HoppSmartSelectWrapper>
|
|
<template #content="{ hide }">
|
|
<div
|
|
ref="authTippyActions"
|
|
class="flex flex-col focus:outline-none"
|
|
tabindex="0"
|
|
@keyup.escape="hide()"
|
|
>
|
|
<HoppSmartItem
|
|
:icon="auth.addTo === 'Headers' ? IconCircleDot : IconCircle"
|
|
:active="auth.addTo === 'Headers'"
|
|
:label="'Headers'"
|
|
@click="
|
|
() => {
|
|
auth.addTo = 'Headers'
|
|
hide()
|
|
}
|
|
"
|
|
/>
|
|
<HoppSmartItem
|
|
:icon="auth.addTo === 'Query params' ? IconCircleDot : IconCircle"
|
|
:active="auth.addTo === 'Query params'"
|
|
:label="'Query params'"
|
|
@click="
|
|
() => {
|
|
auth.addTo = 'Query params'
|
|
hide()
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</tippy>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import IconCircle from "~icons/lucide/circle"
|
|
import IconCircleDot from "~icons/lucide/circle-dot"
|
|
import { useI18n } from "@composables/i18n"
|
|
import { HoppRESTAuthAPIKey } from "@hoppscotch/data"
|
|
import { useVModel } from "@vueuse/core"
|
|
import { ref } from "vue"
|
|
|
|
const t = useI18n()
|
|
|
|
const props = defineProps<{
|
|
modelValue: HoppRESTAuthAPIKey
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: "update:modelValue", value: HoppRESTAuthAPIKey): void
|
|
}>()
|
|
|
|
const auth = useVModel(props, "modelValue", emit)
|
|
|
|
const authTippyActions = ref<any | null>(null)
|
|
</script>
|