30 lines
1.3 KiB
Vue
30 lines
1.3 KiB
Vue
<template>
|
|
<RadioGroupRoot :disabled="disabled" v-model="model" class="flex flex-col gap-2 p-2">
|
|
<Label v-for="option in options" class="flex items-center gap-2">
|
|
<RadioGroupItem :disabled="(option as RadioOption).disabled ?? false"
|
|
:value="(option as RadioOption).value ?? option"
|
|
class="border border-light-60 dark:border-dark-35 bg-light-20 dark:bg-dark-25 w-5 h-5 outline-none cursor-default hover:border-light-70 dark:hover:border-dark-40
|
|
focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40 data-[disabled]:bg-light-10 dark:data-[disabled]:bg-dark-10 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
|
|
<RadioGroupIndicator>
|
|
<Icon icon="radix-icons:check" class="relative w-5 h-5 -top-px -left-px" />
|
|
</RadioGroupIndicator>
|
|
</RadioGroupItem>
|
|
{{ (option as RadioOption).label ?? option }}
|
|
</Label>
|
|
</RadioGroupRoot>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Icon } from '@iconify/vue';
|
|
export interface RadioOption {
|
|
label: string
|
|
value: string
|
|
disabled?: boolean
|
|
}
|
|
|
|
const { disabled = false, options } = defineProps<{
|
|
disabled?: boolean
|
|
options: string[] | RadioOption[]
|
|
}>();
|
|
const model = defineModel<string>();
|
|
</script> |