Files
hoppscotch/packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue
Anwarul Islam a215860782 feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>
2023-11-01 20:55:08 +05:30

55 lines
1.4 KiB
Vue

<template>
<div>
<div
class="sticky top-lowerSecondaryStickyFold z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
>
<label class="truncate font-semibold text-secondaryLight">
{{ t("request.header_list") }}
</label>
<div class="flex">
<HoppButtonSecondary
v-if="headers"
v-tippy="{ theme: 'tooltip' }"
:title="t('action.copy')"
:icon="copyIcon"
@click="copyHeaders"
/>
</div>
</div>
<LensesHeadersRendererEntry
v-for="(header, index) in headers"
:key="index"
:header="header"
/>
</div>
</template>
<script setup lang="ts">
import IconCopy from "~icons/lucide/copy"
import IconCheck from "~icons/lucide/check"
import { refAutoReset } from "@vueuse/core"
import { copyToClipboard } from "~/helpers/utils/clipboard"
import { useI18n } from "@composables/i18n"
import { useToast } from "@composables/toast"
import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
const t = useI18n()
const toast = useToast()
const props = defineProps<{
headers: HoppRESTResponseHeader[]
}>()
const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
IconCopy,
1000
)
const copyHeaders = () => {
copyToClipboard(JSON.stringify(props.headers))
copyIcon.value = IconCheck
toast.success(`${t("state.copied_to_clipboard")}`)
}
</script>