31 lines
765 B
Vue
31 lines
765 B
Vue
<script setup lang="ts" generic="V extends string">
|
|
import { SEGMENT_GROUP, segmentClass } from '@/lib/segmentStyles'
|
|
|
|
defineProps<{
|
|
options: { value: V; label: string }[]
|
|
modelValue: V
|
|
label: string
|
|
block?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: V]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div role="group" :aria-label="label" :class="[SEGMENT_GROUP, block ? 'w-full' : '']">
|
|
<UButton
|
|
v-for="option in options"
|
|
:key="option.value"
|
|
color="neutral"
|
|
:variant="option.value === modelValue ? 'soft' : 'outline'"
|
|
:aria-pressed="option.value === modelValue"
|
|
:class="segmentClass(option.value === modelValue, block)"
|
|
@click="emit('update:modelValue', option.value)"
|
|
>
|
|
{{ option.label }}
|
|
</UButton>
|
|
</div>
|
|
</template>
|