arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 04:07:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(Collapsible): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-09 16:34:36 +01:00
parent c65a623151
commit bcde20ce3e
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/runtime/components/Collapsible.vue
View File

@@ -6,7 +6,7 @@ import theme from '#build/ui/collapsible'
const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) }) const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'as' | 'asChild'> { export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'asChild'> {
content?: string content?: string
class?: any class?: any
ui?: Partial<typeof collapsible.slots> ui?: Partial<typeof collapsible.slots>
@@ -29,9 +29,9 @@ defineOptions({ inheritAttrs: false })
const props = defineProps<CollapsibleProps>() const props = defineProps<CollapsibleProps>()
const emits = defineEmits<CollapsibleEmits>() const emits = defineEmits<CollapsibleEmits>()
const slots = defineSlots<CollapsibleSlots>() defineSlots<CollapsibleSlots>()
const forwardRoot = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'disabled'), emits) const forward = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'disabled'), emits)
// FIXME: Cannot extend multiple times // FIXME: Cannot extend multiple times
// const ui = computed(() => tv({ extend: collapsible, slots: props.ui })()) // const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
@@ -40,12 +40,12 @@ const ui = computed(() => collapsible())
</script> </script>
<template> <template>
<CollapsibleRoot v-bind="forwardRoot"> <CollapsibleRoot :class="ui.root({ class: props.class })" v-bind="{ ...forward, ...$attrs }">
<CollapsibleTrigger as-child> <CollapsibleTrigger as-child>
<slot /> <slot />
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent v-bind="$attrs" :class="ui.content({ class: props.class })"> <CollapsibleContent :class="ui.content()">
<slot name="content"> <slot name="content">
{{ content }} {{ content }}
</slot> </slot>

1
src/theme/collapsible.ts
View File

@@ -1,5 +1,6 @@
export default { export default {
slots: { slots: {
root: '',
content: 'data-[state=open]:animate-[collapsibleSlideDown_200ms_ease-out] data-[state=closed]:animate-[collapsibleSlideUp_200ms_ease-out] overflow-hidden' content: 'data-[state=open]:animate-[collapsibleSlideDown_200ms_ease-out] data-[state=closed]:animate-[collapsibleSlideUp_200ms_ease-out] overflow-hidden'
} }
} }