mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-07 21:44:51 +00:00
ad5a7e51b9
- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6 - Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility) - Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass - Convert SCSS files to plain CSS (resources/sass → resources/css) - Migrate tailwind.config.js to CSS @theme directives - Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden, rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3) - Migrate opacity utilities to color modifiers (bg-opacity, text-opacity, border-opacity, ring-opacity → color/N syntax) - Update primary color CSS vars to full rgb() values for TW4 color-mix() - Fix border-l color specificity for sidebar navigation (TW4 default border color changed from gray-200 to currentColor) - Fix invalid border color classes (border-grey-light, border-modal-bg, border--200) - Add @reference directive for @apply in Vue component style blocks - Convert Vue component <style lang="scss"> blocks to plain CSS
105 lines
2.5 KiB
Vue
105 lines
2.5 KiB
Vue
<template>
|
|
<RadioGroup v-model="selected">
|
|
<RadioGroupLabel class="sr-only"> Privacy setting </RadioGroupLabel>
|
|
<div class="-space-y-px rounded-md">
|
|
<RadioGroupOption
|
|
:id="id"
|
|
v-slot="{ checked, active }"
|
|
as="template"
|
|
:value="value"
|
|
:name="name"
|
|
v-bind="$attrs"
|
|
>
|
|
<div class="relative flex cursor-pointer focus:outline-hidden">
|
|
<span
|
|
:class="[
|
|
checked ? checkedStateClass : unCheckedStateClass,
|
|
active ? optionGroupActiveStateClass : '',
|
|
optionGroupClass,
|
|
]"
|
|
aria-hidden="true"
|
|
>
|
|
<span class="rounded-full bg-white w-1.5 h-1.5" />
|
|
</span>
|
|
<div class="flex flex-col ml-3">
|
|
<RadioGroupLabel
|
|
as="span"
|
|
:class="[
|
|
checked ? checkedStateLabelClass : unCheckedStateLabelClass,
|
|
optionGroupLabelClass,
|
|
]"
|
|
>
|
|
{{ label }}
|
|
</RadioGroupLabel>
|
|
</div>
|
|
</div>
|
|
</RadioGroupOption>
|
|
</div>
|
|
</RadioGroup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { RadioGroup, RadioGroupLabel, RadioGroupOption } from '@headlessui/vue'
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: [String, Number],
|
|
required: false,
|
|
default: () => `radio_${Math.random().toString(36).substr(2, 9)}`,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: [String, Number],
|
|
default: '',
|
|
},
|
|
checkedStateClass: {
|
|
type: String,
|
|
default: 'bg-primary-600',
|
|
},
|
|
unCheckedStateClass: {
|
|
type: String,
|
|
default: 'bg-white ',
|
|
},
|
|
optionGroupActiveStateClass: {
|
|
type: String,
|
|
default: 'ring-2 ring-offset-2 ring-primary-500',
|
|
},
|
|
checkedStateLabelClass: {
|
|
type: String,
|
|
default: 'text-primary-900 ',
|
|
},
|
|
unCheckedStateLabelClass: {
|
|
type: String,
|
|
default: 'text-gray-900',
|
|
},
|
|
optionGroupClass: {
|
|
type: String,
|
|
default:
|
|
'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center',
|
|
},
|
|
optionGroupLabelClass: {
|
|
type: String,
|
|
default: 'block text-sm font-light',
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const selected = computed({
|
|
get: () => props.modelValue,
|
|
set: (modelValue) => emit('update:modelValue', modelValue),
|
|
})
|
|
</script>
|