mirror of
https://github.com/elk-zone/elk.git
synced 2024-11-05 00:19:59 +00:00
22 lines
801 B
Vue
22 lines
801 B
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
modelValue: string
|
||
|
|
options: string[]
|
||
|
|
}>()
|
||
|
|
defineEmits(['update:modelValue'])
|
||
|
|
|
||
|
|
function toValidName(otpion: string) {
|
||
|
|
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div flex w-full>
|
||
|
|
<template v-for="option in options" :key="option">
|
||
|
|
<input
|
||
|
|
:id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)"
|
||
|
|
><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|