elk/components/common/CommonTabs.vue

65 lines
1.5 KiB
Vue
Raw Normal View History

<script setup lang="ts">
const { options, command } = defineProps<{
options: string[] | {
name: string
icon?: string
display: string
}[]
command?: boolean
}>()
2022-11-23 08:08:49 +00:00
const { modelValue } = defineModel<{
modelValue: string
}>()
const tabs = $computed(() => {
2022-11-29 07:18:28 +00:00
return options.map((option) => {
if (typeof option === 'string')
return { name: option, display: option }
else
return option
})
})
function toValidName(otpion: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
}
useCommands(() => command
? tabs.map(tab => ({
scope: 'Tabs',
name: tab.display,
icon: tab.icon ?? 'i-ri:file-list-2-line',
onActivate: () => modelValue.value = tab.name,
}))
: [])
</script>
<template>
2022-11-26 17:36:23 +00:00
<div flex w-full items-center lg:text-lg>
2022-11-29 07:18:28 +00:00
<template v-for="option in tabs" :key="option">
<input
2022-11-29 07:18:28 +00:00
:id="`tab-${toValidName(option.name)}`"
:checked="modelValue === option.name"
2022-11-23 08:08:49 +00:00
:value="option"
type="radio"
name="tabs"
display="none"
2022-11-29 07:18:28 +00:00
@change="modelValue = option.name"
2022-11-23 08:08:49 +00:00
><label
2022-11-28 20:42:17 +00:00
flex flex-auto cursor-pointer px3 m1 rounded transition-all
2022-11-29 07:18:28 +00:00
:for="`tab-${toValidName(option.name)}`"
2022-11-23 08:08:49 +00:00
tabindex="1"
2022-11-23 14:39:48 +00:00
hover:bg-active transition-100
2022-11-29 07:18:28 +00:00
@keypress.enter="modelValue = option.name"
2022-11-23 08:08:49 +00:00
><span
2022-11-28 20:42:17 +00:00
mxa px4 py3 text-center
2022-11-29 07:18:28 +00:00
:class="modelValue === option.name ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option.display }}</span>
2022-11-23 08:08:49 +00:00
</label>
</template>
</div>
</template>