chore(Collapsible): update

This commit is contained in:
Benjamin Canac
2024-03-11 17:38:56 +01:00
parent 037a2fc8fa
commit 83f311a004
2 changed files with 5 additions and 5 deletions

View File

@@ -32,13 +32,13 @@ const props = defineProps<CollapsibleProps>()
const emits = defineEmits<CollapsibleEmits>() const emits = defineEmits<CollapsibleEmits>()
defineSlots<CollapsibleSlots>() defineSlots<CollapsibleSlots>()
const forward = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits) const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled'), emits)
const ui = computed(() => tv({ extend: collapsible, slots: props.ui })()) const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
</script> </script>
<template> <template>
<CollapsibleRoot v-bind="forward" :class="ui.root({ class: props.class })"> <CollapsibleRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
<CollapsibleTrigger as-child> <CollapsibleTrigger as-child>
<slot /> <slot />
</CollapsibleTrigger> </CollapsibleTrigger>
@@ -52,7 +52,7 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
</template> </template>
<style> <style>
@keyframes collapsibleSlideDown { @keyframes collapsible-down {
from { from {
height: 0; height: 0;
} }
@@ -61,7 +61,7 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
} }
} }
@keyframes collapsibleSlideUp { @keyframes collapsible-up {
from { from {
height: var(--radix-collapsible-content-height); height: var(--radix-collapsible-content-height);
} }

View File

@@ -1,6 +1,6 @@
export default { export default {
slots: { slots: {
root: '', 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-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden'
} }
} }