94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
options: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const handleChange = (value) => {
|
|
emit('update:modelValue', value)
|
|
}
|
|
|
|
const getSegmentClasses = (index) => {
|
|
const classes = [
|
|
'inline-flex',
|
|
'items-center',
|
|
'justify-center',
|
|
'px-8',
|
|
'py-3',
|
|
'text-base',
|
|
'font-medium',
|
|
'select-none',
|
|
'transition-all',
|
|
'duration-200',
|
|
'bg-white/5',
|
|
'text-gray-400',
|
|
'cursor-pointer',
|
|
'hover:bg-white/10',
|
|
'hover:text-gray-200',
|
|
'peer-checked:hover:bg-primary-dark',
|
|
'peer-checked:hover:text-gray-900',
|
|
'peer-checked:bg-primary',
|
|
'peer-checked:text-gray-900',
|
|
'peer-checked:font-semibold',
|
|
'peer-focus-visible:ring-2',
|
|
'peer-focus-visible:ring-primary',
|
|
'peer-focus-visible:ring-offset-2',
|
|
'peer-focus-visible:ring-offset-surface',
|
|
]
|
|
|
|
// All except last: add divider
|
|
if (index < props.options.length - 1) {
|
|
classes.push('border-r', 'border-white/10')
|
|
}
|
|
|
|
// Disabled state
|
|
if (props.disabled) {
|
|
classes.push('disabled:opacity-50', 'disabled:cursor-not-allowed')
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div role="radiogroup" :aria-label="name" class="inline-flex rounded-lg overflow-hidden border border-white/10 min-h-[44px]">
|
|
<label
|
|
v-for="(option, index) in options"
|
|
:key="option.value"
|
|
class="relative"
|
|
>
|
|
<input
|
|
type="radio"
|
|
:name="name"
|
|
:value="option.value"
|
|
:checked="modelValue === option.value"
|
|
:disabled="disabled"
|
|
:data-cy="option.value === 'not_applicable' ? 'na' : option.value"
|
|
@change="handleChange(option.value)"
|
|
class="sr-only peer"
|
|
/>
|
|
<span :class="getSegmentClasses(index)">
|
|
{{ option.label }}
|
|
</span>
|
|
</label>
|
|
</div>
|
|
</template>
|