diff --git a/playground/app/pages/components/button.vue b/playground/app/pages/components/button.vue index c0ec6dedee..8b1ff50f92 100644 --- a/playground/app/pages/components/button.vue +++ b/playground/app/pages/components/button.vue @@ -17,6 +17,10 @@ const variants = Object.keys(theme.variants.variant) as Array Disabled + + + Disabled Link +
diff --git a/src/runtime/components/LinkBase.vue b/src/runtime/components/LinkBase.vue index b86adcf6d6..67a5391cec 100644 --- a/src/runtime/components/LinkBase.vue +++ b/src/runtime/components/LinkBase.vue @@ -43,7 +43,8 @@ function onClick(e: MouseEvent) { 'as': 'a', 'href': disabled ? undefined : href, 'aria-disabled': disabled ? 'true' : undefined, - 'role': disabled ? 'link' : undefined + 'role': disabled ? 'link' : undefined, + 'tabindex': disabled ? -1 : undefined } : as === 'button' ? { as, type, diff --git a/src/theme/button.ts b/src/theme/button.ts index 80fbb5d703..aecf16dfbf 100644 --- a/src/theme/button.ts +++ b/src/theme/button.ts @@ -3,7 +3,7 @@ import { buttonGroupVariant } from './button-group' export default (options: Required) => ({ slots: { - base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.transitions && 'transition-colors'], + base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.transitions && 'transition-colors'], label: 'truncate', leadingIcon: 'shrink-0', leadingAvatar: 'shrink-0', @@ -72,51 +72,51 @@ export default (options: Required) => ({ compoundVariants: [...options.colors.map((color: string) => ({ color, variant: 'solid', - class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400` + class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 aria-disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 dark:aria-disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400` })), ...options.colors.map((color: string) => ({ color, variant: 'outline', - class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` + class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` })), ...options.colors.map((color: string) => ({ color, variant: 'soft', - class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10` + class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10` })), ...options.colors.map((color: string) => ({ color, variant: 'subtle', - class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` + class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` })), ...options.colors.map((color: string) => ({ color, variant: 'ghost', - class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent` + class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent` })), ...options.colors.map((color: string) => ({ color, variant: 'link', - class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` + class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 aria-disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 dark:aria-disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400` })), { color: 'gray', variant: 'solid', - class: 'text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white' + class: 'text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-700 disabled:bg-gray-900 aria-disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-200 dark:disabled:bg-white dark:aria-disabled:bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white' }, { color: 'gray', variant: 'outline', - class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' + class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-white hover:bg-gray-100 disabled:bg-white aria-disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800 dark:disabled:bg-gray-900 dark:aria-disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' }, { color: 'gray', variant: 'soft', - class: 'text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800' + class: 'text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 focus-visible:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:focus-visible:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800' }, { color: 'gray', variant: 'subtle', - class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' + class: 'ring ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-100 aria-disabled:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 dark:aria-disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' }, { color: 'gray', variant: 'ghost', - class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent' + class: 'text-gray-700 dark:text-gray-200 hover:bg-gray-100 focus-visible:bg-gray-100 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-gray-800 dark:focus-visible:bg-gray-800 dark:hover:disabled:bg-transparent dark:hover:aria-disabled:bg-transparent' }, { color: 'gray', variant: 'link', - class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' + class: 'text-gray-500 hover:text-gray-700 disabled:text-gray-500 aria-disabled:text-gray-500 dark:text-gray-400 dark:hover:text-gray-200 dark:disabled:text-gray-400 dark:aria-disabled:text-gray-400 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-900 dark:focus-visible:ring-white' }, { size: 'xs', square: true, diff --git a/test/components/Button.spec.ts b/test/components/Button.spec.ts index 09c3b22640..37a9c34838 100644 --- a/test/components/Button.spec.ts +++ b/test/components/Button.spec.ts @@ -21,6 +21,7 @@ describe('Button', () => { ['with loading', { props: { loading: true } }], ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }], ['with disabled', { props: { label: 'Button', disabled: true } }], + ['with disabled and with link', { props: { label: 'Button', disabled: true, to: '/link' } }], ['with block', { props: { label: 'Button', block: true } }], ['with square', { props: { label: 'Button', square: true } }], ['with class', { props: { class: 'rounded-full font-bold' } }], diff --git a/test/components/__snapshots__/Alert.spec.ts.snap b/test/components/__snapshots__/Alert.spec.ts.snap index e0343e692a..2da2e86637 100644 --- a/test/components/__snapshots__/Alert.spec.ts.snap +++ b/test/components/__snapshots__/Alert.spec.ts.snap @@ -43,7 +43,7 @@ exports[`Alert > renders with close correctly 1`] = `
-
@@ -70,7 +70,7 @@ exports[`Alert > renders with closeIcon correctly 1`] = ` -
diff --git a/test/components/__snapshots__/Button.spec.ts.snap b/test/components/__snapshots__/Button.spec.ts.snap index 59e45325f8..c577e726ec 100644 --- a/test/components/__snapshots__/Button.spec.ts.snap +++ b/test/components/__snapshots__/Button.spec.ts.snap @@ -1,222 +1,229 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Button > renders with block correctly 1`] = ` -"" `; -exports[`Button > renders with class correctly 1`] = `""`; +exports[`Button > renders with class correctly 1`] = `""`; exports[`Button > renders with default slot correctly 1`] = ` -"" `; +exports[`Button > renders with disabled and with link correctly 1`] = ` +" + Button + +" +`; + exports[`Button > renders with disabled correctly 1`] = ` -"" `; exports[`Button > renders with gray variant ghost correctly 1`] = ` -"" `; exports[`Button > renders with gray variant link correctly 1`] = ` -"" `; exports[`Button > renders with gray variant outline correctly 1`] = ` -"" `; exports[`Button > renders with gray variant soft correctly 1`] = ` -"" `; exports[`Button > renders with gray variant solid correctly 1`] = ` -"" `; exports[`Button > renders with gray variant subtle correctly 1`] = ` -"" `; exports[`Button > renders with icon correctly 1`] = ` -"" `; exports[`Button > renders with label correctly 1`] = ` -"" `; exports[`Button > renders with leading and icon correctly 1`] = ` -"" `; exports[`Button > renders with leading slot correctly 1`] = ` -"" `; exports[`Button > renders with leadingIcon correctly 1`] = ` -"" `; exports[`Button > renders with loading correctly 1`] = ` -"" `; exports[`Button > renders with loadingIcon correctly 1`] = ` -"" `; exports[`Button > renders with primary variant ghost correctly 1`] = ` -"" `; exports[`Button > renders with primary variant link correctly 1`] = ` -"" `; exports[`Button > renders with primary variant outline correctly 1`] = ` -"" `; exports[`Button > renders with primary variant soft correctly 1`] = ` -"" `; exports[`Button > renders with primary variant solid correctly 1`] = ` -"" `; exports[`Button > renders with primary variant subtle correctly 1`] = ` -"" `; exports[`Button > renders with size lg correctly 1`] = ` -"" `; exports[`Button > renders with size md correctly 1`] = ` -"" `; exports[`Button > renders with size sm correctly 1`] = ` -"" `; exports[`Button > renders with size xl correctly 1`] = ` -"" `; exports[`Button > renders with size xs correctly 1`] = ` -"" `; exports[`Button > renders with square correctly 1`] = ` -"" `; exports[`Button > renders with trailing and icon correctly 1`] = ` -"" `; exports[`Button > renders with trailing slot correctly 1`] = ` -"" `; exports[`Button > renders with trailingIcon correctly 1`] = ` -"" `; -exports[`Button > renders with ui correctly 1`] = `""`; +exports[`Button > renders with ui correctly 1`] = `""`; diff --git a/test/components/__snapshots__/ButtonGroup.spec.ts.snap b/test/components/__snapshots__/ButtonGroup.spec.ts.snap index a4b239b41e..9c6b91f561 100644 --- a/test/components/__snapshots__/ButtonGroup.spec.ts.snap +++ b/test/components/__snapshots__/ButtonGroup.spec.ts.snap @@ -5,7 +5,7 @@ exports[`ButtonGroup > renders orientation vertical with default slot correctly
-
@@ -21,7 +21,7 @@ exports[`ButtonGroup > renders with default slot correctly 1`] = `
-
@@ -33,7 +33,7 @@ exports[`ButtonGroup > renders with size lg correctly 1`] = `
-
@@ -45,7 +45,7 @@ exports[`ButtonGroup > renders with size md correctly 1`] = `
-
@@ -57,7 +57,7 @@ exports[`ButtonGroup > renders with size sm correctly 1`] = `
-
@@ -69,7 +69,7 @@ exports[`ButtonGroup > renders with size xl correctly 1`] = `
-
@@ -81,7 +81,7 @@ exports[`ButtonGroup > renders with size xs correctly 1`] = `
-
diff --git a/test/components/__snapshots__/CommandPalette.spec.ts.snap b/test/components/__snapshots__/CommandPalette.spec.ts.snap index 23081f8a06..422f2b0b9e 100644 --- a/test/components/__snapshots__/CommandPalette.spec.ts.snap +++ b/test/components/__snapshots__/CommandPalette.spec.ts.snap @@ -120,7 +120,7 @@ exports[`CommandPalette > renders with class correctly 1`] = ` exports[`CommandPalette > renders with close correctly 1`] = ` "
-
@@ -237,7 +237,7 @@ exports[`CommandPalette > renders with close slot correctly 1`] = ` exports[`CommandPalette > renders with closeIcon correctly 1`] = ` "
-
diff --git a/test/components/__snapshots__/DropdownMenu.spec.ts.snap b/test/components/__snapshots__/DropdownMenu.spec.ts.snap index 2e901d5aa4..f89a18ca4d 100644 --- a/test/components/__snapshots__/DropdownMenu.spec.ts.snap +++ b/test/components/__snapshots__/DropdownMenu.spec.ts.snap @@ -24,7 +24,7 @@ exports[`DropdownMenu > renders with arrow correctly 1`] = `
-
GitHub +
GitHub Support @@ -68,7 +68,7 @@ exports[`DropdownMenu > renders with class correctly 1`] = `
-
GitHub +
GitHub Support @@ -110,7 +110,7 @@ exports[`DropdownMenu > renders with custom slot correctly 1`] = `
-
GitHub +
GitHub Support @@ -154,7 +154,7 @@ exports[`DropdownMenu > renders with default slot correctly 1`] = `
-
GitHub +
GitHub Support @@ -198,7 +198,7 @@ exports[`DropdownMenu > renders with disabled correctly 1`] = `
-
GitHub +
GitHub Support @@ -238,7 +238,7 @@ exports[`DropdownMenu > renders with item slot correctly 1`] = `
-
Item slotItem slot +
Item slotItem slot
@@ -274,7 +274,7 @@ exports[`DropdownMenu > renders with item-label slot correctly 1`] = `
-
Item label slot +
Item label slot Item label slot @@ -318,7 +318,7 @@ exports[`DropdownMenu > renders with item-leading slot correctly 1`] = `
-
Item leading slotGitHub +
Item leading slotGitHub Item leading slotSupport @@ -358,7 +358,7 @@ exports[`DropdownMenu > renders with item-trailing slot correctly 1`] = `
-
GitHubItem trailing slotSupportItem trailing slot +
GitHubItem trailing slotSupportItem trailing slot
@@ -394,7 +394,7 @@ exports[`DropdownMenu > renders with items correctly 1`] = `
-
GitHub +
GitHub Support @@ -438,7 +438,7 @@ exports[`DropdownMenu > renders with size lg correctly 1`] = `
-
GitHub +
GitHub Support @@ -482,7 +482,7 @@ exports[`DropdownMenu > renders with size md correctly 1`] = `
-
GitHub +
GitHub Support @@ -526,7 +526,7 @@ exports[`DropdownMenu > renders with size sm correctly 1`] = `
-
GitHub +
GitHub Support @@ -570,7 +570,7 @@ exports[`DropdownMenu > renders with size xl correctly 1`] = `
-
GitHub +
GitHub Support @@ -614,7 +614,7 @@ exports[`DropdownMenu > renders with size xs correctly 1`] = `
-
GitHub +
GitHub Support @@ -658,7 +658,7 @@ exports[`DropdownMenu > renders with ui correctly 1`] = `
-
GitHub +
GitHub Support diff --git a/test/components/__snapshots__/Modal.spec.ts.snap b/test/components/__snapshots__/Modal.spec.ts.snap index 5e15ba3911..8ecd4b5e08 100644 --- a/test/components/__snapshots__/Modal.spec.ts.snap +++ b/test/components/__snapshots__/Modal.spec.ts.snap @@ -9,7 +9,7 @@ exports[`Modal > renders with body slot correctly 1`] = `