49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import { useJsonCopy } from '@/composables/useJsonCopy'
|
|
import { previewRoutes } from '@/lib/schemaBuilderSample'
|
|
import { BOTTOM_SHEET_UI } from '@/lib/sheetUi'
|
|
|
|
const props = defineProps<{ keyValue: string; json: string }>()
|
|
|
|
const open = defineModel<boolean>('open', { default: false })
|
|
|
|
const { copy, label: copyLabel, icon: copyIcon } = useJsonCopy()
|
|
|
|
const first = computed(() => previewRoutes(props.keyValue)[0]!)
|
|
</script>
|
|
|
|
<template>
|
|
<USlideover
|
|
v-model:open="open"
|
|
side="bottom"
|
|
:title="t('API preview')"
|
|
:description="t('Where entries of this type live')"
|
|
:ui="BOTTOM_SHEET_UI"
|
|
>
|
|
<template #body>
|
|
<span class="text-xs text-muted" data-testid="api-sheet-route">{{
|
|
`${first.method} ${first.path}`
|
|
}}</span>
|
|
<pre
|
|
tabindex="0"
|
|
data-testid="api-sheet-json"
|
|
class="m-0 min-h-0 flex-1 overflow-auto border border-default bg-elevated px-3 py-2.5 font-mono text-xs/5 whitespace-pre text-highlighted"
|
|
>{{ json }}</pre
|
|
>
|
|
</template>
|
|
<template #footer>
|
|
<UButton
|
|
:icon="copyIcon"
|
|
data-testid="api-sheet-copy"
|
|
class="h-11 flex-1 justify-center"
|
|
@click="copy(json)"
|
|
>
|
|
<span aria-live="polite">{{ copyLabel }}</span>
|
|
</UButton>
|
|
</template>
|
|
</USlideover>
|
|
</template>
|