arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-26 09:50:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Accordion): handle disabled through variants

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-15 14:43:56 +02:00
parent 6ce70b768b
commit 6236953ed0
4 changed files with 72 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/components/Accordion.vue
View File

@@ -56,7 +56,7 @@ const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'collapsible', 'defaultValue', 'disabled', 'modelValue', 'type'), emits)
const contentProps = toRef(() => props.content)
const ui = computed(() => tv({ extend: accordion, slots: props.ui })())
const ui = computed(() => tv({ extend: accordion, slots: props.ui })({ disabled: props.disabled }))
</script>
<template>

9
src/theme/accordion.ts
View File

@@ -3,10 +3,17 @@ export default {
root: 'w-full',
item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0',
header: 'flex',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400',
content: 'text-sm pb-3.5 data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
leadingIcon: 'shrink-0 size-5',
trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
label: 'truncate'
},
variants: {
disabled: {
true: {
trigger: 'cursor-not-allowed opacity-75'
}
}
}
}