Skip to content

Commit ddd8faf

Browse files
benjamincanacbenjamincanac
committed
fix(CheckboxGroup/RadioGroup/Switch): consistent disabled styles
Resolves #5391
1 parent 3e72bf8 commit ddd8faf

14 files changed

+78
-70
lines changed

‎src/runtime/components/CheckboxGroup.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,8 @@ const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup ||
110110
required: props.required,
111111
orientation: props.orientation,
112112
color: props.color,
113-
variant: props.variant
113+
variant: props.variant,
114+
disabled: disabled.value
114115
}))
115116
116117
function normalizeItem(item: any) {
@@ -187,7 +188,7 @@ function onUpdate(value: any) {
187188
:disabled="item.disabled || disabled"
188189
:ui="{ ...(props.ui ? omit(props.ui, ['root']) : undefined), ...(item.ui || {}) }"
189190
data-slot="item"
190-
:class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
191+
:class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })"
191192
>
192193
<template v-for="(_, name) in getProxySlots()" #[name]>
193194
<slot :name="(name as keyof CheckboxGroupSlots<T>)" :item="item" />

‎src/runtime/components/RadioGroup.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -189,26 +189,26 @@ function onUpdate(value: any) {
189189
</slot>
190190
</legend>
191191

192-
<component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
192+
<component :is="(!variant || variant === 'list') ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" data-slot="item" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class], disabled: item.disabled || disabled })">
193193
<div data-slot="container" :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
194194
<RRadioGroupItem
195195
:id="item.id"
196196
:value="item.value"
197-
:disabled="item.disabled"
197+
:disabled="item.disabled || disabled"
198198
data-slot="base"
199-
:class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
199+
:class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled || disabled })"
200200
>
201201
<RadioGroupIndicator data-slot="indicator" :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
202202
</RRadioGroupItem>
203203
</div>
204204

205205
<div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" data-slot="wrapper" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
206-
<component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
206+
<component :is="(!variant || variant === 'list') ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" data-slot="label" :class="ui.label({ class: [props.ui?.label, item.ui?.label], disabled: item.disabled || disabled })">
207207
<slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
208208
{{ item.label }}
209209
</slot>
210210
</component>
211-
<p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
211+
<p v-if="item.description || !!slots.description" data-slot="description" :class="ui.description({ class: [props.ui?.description, item.ui?.description], disabled: item.disabled || disabled })">
212212
<slot name="description" :item="item" :model-value="(modelValue as RadioGroupValue)">
213213
{{ item.description }}
214214
</slot>

‎src/theme/checkbox-group.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ export default (options: Required<ModuleOptions>) => ({
5353
true: {
5454
legend: 'after:content-[\'*\'] after:ms-0.5 after:text-error'
5555
}
56+
},
57+
disabled: {
58+
true: {}
5659
}
5760
},
5861
compoundVariants: [
@@ -95,7 +98,7 @@ export default (options: Required<ModuleOptions>) => ({
9598
variant: 'table',
9699
disabled: true,
97100
class: {
98-
item: 'cursor-not-allowed opacity-75'
101+
item: 'cursor-not-allowed'
99102
}
100103
}
101104
],

‎src/theme/checkbox.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,10 @@ export default (options: Required<ModuleOptions>) => ({
7878
},
7979
disabled: {
8080
true: {
81-
base: 'cursor-not-allowed opacity-75',
82-
label: 'cursor-not-allowed opacity-75',
83-
description: 'cursor-not-allowed opacity-75'
81+
root: 'opacity-75',
82+
base: 'cursor-not-allowed',
83+
label: 'cursor-not-allowed',
84+
description: 'cursor-not-allowed'
8485
}
8586
},
8687
checked: {
@@ -111,7 +112,7 @@ export default (options: Required<ModuleOptions>) => ({
111112
variant: 'card',
112113
disabled: true,
113114
class: {
114-
root: 'cursor-not-allowed opacity-75'
115+
root: 'cursor-not-allowed'
115116
}
116117
}
117118
],

‎src/theme/radio-group.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,10 @@ export default (options: Required<ModuleOptions>) => ({
101101
},
102102
disabled: {
103103
true: {
104-
base: 'cursor-not-allowed opacity-75',
105-
label: 'cursor-not-allowed opacity-75'
104+
item: 'opacity-75',
105+
base: 'cursor-not-allowed',
106+
label: 'cursor-not-allowed',
107+
description: 'cursor-not-allowed'
106108
}
107109
},
108110
required: {
@@ -165,7 +167,7 @@ export default (options: Required<ModuleOptions>) => ({
165167
variant: ['card', 'table'],
166168
disabled: true,
167169
class: {
168-
item: 'cursor-not-allowed opacity-75'
170+
item: 'cursor-not-allowed'
169171
}
170172
}
171173
],

‎src/theme/switch.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,10 @@ export default (options: Required<ModuleOptions>) => ({
7676
},
7777
disabled: {
7878
true: {
79-
base: 'cursor-not-allowed opacity-75',
80-
label: 'cursor-not-allowed opacity-75',
81-
description: 'cursor-not-allowed opacity-75'
79+
root: 'opacity-75',
80+
base: 'cursor-not-allowed',
81+
label: 'cursor-not-allowed',
82+
description: 'cursor-not-allowed'
8283
}
8384
}
8485
},

‎test/components/__snapshots__/Checkbox-vue.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
6464
`;
6565

6666
exports[`Checkbox > renders with disabled correctly 1`] = `
67-
"<div data-slot="root" class="relative flex items-start flex-row">
68-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
67+
"<div data-slot="root" class="relative flex items-start flex-row opacity-75">
68+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
6969
<!---->
7070
<!--v-if-->
7171
</button></div>

‎test/components/__snapshots__/Checkbox.spec.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,8 @@ exports[`Checkbox > renders with description slot correctly 1`] = `
6464
`;
6565

6666
exports[`Checkbox > renders with disabled correctly 1`] = `
67-
"<div data-slot="root" class="relative flex items-start flex-row">
68-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
67+
"<div data-slot="root" class="relative flex items-start flex-row opacity-75">
68+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0-0" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
6969
<!---->
7070
<!--v-if-->
7171
</button></div>

‎test/components/__snapshots__/CheckboxGroup-vue.spec.ts.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -255,30 +255,30 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
255255
"<div id="v-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
256256
<fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
257257
<!--v-if-->
258-
<div data-slot="root" class="relative flex items-start flex-row">
259-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
258+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
259+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
260260
<!---->
261261
<!--v-if-->
262262
</button></div>
263-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
263+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
264264
<!--v-if-->
265265
</div>
266266
</div>
267-
<div data-slot="root" class="relative flex items-start flex-row">
268-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
267+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
268+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
269269
<!---->
270270
<!--v-if-->
271271
</button></div>
272-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
272+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
273273
<!--v-if-->
274274
</div>
275275
</div>
276-
<div data-slot="root" class="relative flex items-start flex-row">
277-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
276+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
277+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
278278
<!---->
279279
<!--v-if-->
280280
</button></div>
281-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
281+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
282282
<!--v-if-->
283283
</div>
284284
</div>

‎test/components/__snapshots__/CheckboxGroup.spec.ts.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -255,30 +255,30 @@ exports[`CheckboxGroup > renders with disabled correctly 1`] = `
255255
"<div id="v-0-0" data-slot="root" class="relative" tabindex="-1" data-orientation="vertical" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;">
256256
<fieldset data-slot="fieldset" class="flex gap-x-2 flex-col gap-y-1">
257257
<!--v-if-->
258-
<div data-slot="root" class="relative flex items-start flex-row">
259-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
258+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
259+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0-0:1" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
260260
<!---->
261261
<!--v-if-->
262262
</button></div>
263-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 1</label>
263+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:1" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 1</label>
264264
<!--v-if-->
265265
</div>
266266
</div>
267-
<div data-slot="root" class="relative flex items-start flex-row">
268-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
267+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
268+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0-0:2" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
269269
<!---->
270270
<!--v-if-->
271271
</button></div>
272-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 2</label>
272+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:2" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 2</label>
273273
<!--v-if-->
274274
</div>
275275
</div>
276-
<div data-slot="root" class="relative flex items-start flex-row">
277-
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed opacity-75" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
276+
<div data-slot="root" class="relative flex items-start flex-row opacity-75">
277+
<div data-slot="container" class="flex items-center h-5"><button data-slot="base" class="rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary size-4 cursor-not-allowed" id="v-0-0:3" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="" data-reka-collection-item="" tabindex="-1" data-orientation="vertical">
278278
<!---->
279279
<!--v-if-->
280280
</button></div>
281-
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed opacity-75">Option 3</label>
281+
<div data-slot="wrapper" class="w-full ms-2 text-sm"><label for="v-0-0:3" data-slot="label" class="block font-medium text-default cursor-not-allowed">Option 3</label>
282282
<!--v-if-->
283283
</div>
284284
</div>

0 commit comments

Comments
 (0)