elk/components/common/CommonTabs.vue

40 lines
993 B
Vue
Raw Normal View History

<script setup lang="ts">
defineProps<{
options: string[]
}>()
2022-11-23 08:08:49 +00:00
const { modelValue } = defineModel<{
modelValue: string
}>()
function toValidName(otpion: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
}
</script>
<template>
2022-11-23 08:08:49 +00:00
<div flex w-full text-lg>
<template v-for="option in options" :key="option">
<input
2022-11-23 08:08:49 +00:00
:id="`tab-${toValidName(option)}`"
:checked="modelValue === option"
:value="option"
type="radio"
name="tabs"
display="none"
@change="modelValue = option"
><label
2022-11-23 14:03:28 +00:00
flex flex-1 cursor-pointer p3 m1 rounded transition-all
2022-11-23 08:08:49 +00:00
:for="`tab-${toValidName(option)}`"
tabindex="1"
2022-11-23 14:39:48 +00:00
hover:bg-active transition-100
2022-11-23 08:08:49 +00:00
@keypress.enter="modelValue = option"
><span
mxa px2
:class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
>{{ option }}</span>
</label>
</template>
</div>
</template>