mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-03 13:47:55 +01:00
chore(Collapsible): update
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user