63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
const { options, command } = defineProps<{
|
|
options: string[] | {
|
|
name: string
|
|
icon?: string
|
|
display: string
|
|
}[]
|
|
command?: boolean
|
|
}>()
|
|
|
|
const modelValue = defineModel<string>({ required: true })
|
|
|
|
const tabs = computed(() => {
|
|
return options.map((option) => {
|
|
if (typeof option === 'string')
|
|
return { name: option, display: option }
|
|
else
|
|
return option
|
|
})
|
|
})
|
|
|
|
function toValidName(option: string) {
|
|
return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
|
}
|
|
|
|
useCommands(() => command
|
|
? tabs.value.map(tab => ({
|
|
scope: 'Tabs',
|
|
|
|
name: tab.display,
|
|
icon: tab.icon ?? 'i-ri:file-list-2-line',
|
|
|
|
onActivate: () => modelValue.value = tab.name,
|
|
}))
|
|
: [])
|
|
</script>
|
|
|
|
<template>
|
|
<div flex w-full items-center lg:text-lg>
|
|
<template v-for="option in tabs" :key="option">
|
|
<input
|
|
:id="`tab-${toValidName(option.name)}`"
|
|
:checked="modelValue === option.name"
|
|
:value="option"
|
|
type="radio"
|
|
name="tabs"
|
|
display="none"
|
|
@change="modelValue = option.name"
|
|
><label
|
|
flex flex-auto cursor-pointer px3 m1 rounded transition-all
|
|
:for="`tab-${toValidName(option.name)}`"
|
|
tabindex="0"
|
|
hover:bg-active transition-100
|
|
@keypress.enter="modelValue = option.name"
|
|
><span
|
|
mxa px4 py3 text-center border-b-3
|
|
:class="modelValue === option.name ? 'font-bold border-primary' : 'op50 hover:op50 border-transparent'"
|
|
>{{ option.display }}</span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</template>
|