arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 18:30:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(collapsible/accordion): merge animations

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-03 18:12:05 +02:00
parent ea29cc238c
commit 4a409fdf8b
5 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
playground/pages/accordion.vue
View File

@@ -29,7 +29,9 @@ const items = [{
</script> </script>
<template> <template>
<UCard :ui="{ body: 'p-0 sm:p-0' }"> <div class="flex-1">
<UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" /> <UCard :ui="{ body: 'p-0 sm:p-0' }">
</UCard> <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
</UCard>
</div>
</template> </template>

35
playground/pages/collapsible.vue
View File

@@ -1,16 +1,23 @@
<template> <script setup lang="ts">
<UCollapsible class="space-y-2 w-48"> const appConfig = useAppConfig()
<UButton </script>
class="group"
trailing-icon="i-heroicons-chevron-right-20-solid"
color="gray"
label="Open"
block
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-90 transition-transform duration-200' }"
/>
<template #content> <template>
<Placeholder class="h-24 w-full" /> <div class="flex-1">
</template> <UCollapsible class="space-y-2 w-48">
</UCollapsible> <UButton
class="group"
icon="i-heroicons-light-bulb"
:trailing-icon="appConfig.ui.icons.chevronDown"
color="gray"
label="Open"
block
:ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
/>
<template #content>
<Placeholder class="h-96 w-full" />
</template>
</UCollapsible>
</div>
</template> </template>

13
src/templates.ts
View File

@@ -17,20 +17,11 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
color-scheme: light dark; color-scheme: light dark;
} }
@keyframes accordion-up { @keyframes slide-up {
from { height: var(--radix-accordion-content-height); }
to { height: 0; }
}
@keyframes accordion-down {
from { height: 0; }
to { height: var(--radix-accordion-content-height); }
}
@keyframes collapsible-up {
from { height: var(--radix-collapsible-content-height); } from { height: var(--radix-collapsible-content-height); }
to { height: 0; } to { height: 0; }
} }
@keyframes collapsible-down { @keyframes slide-down {
from { height: 0; } from { height: 0; }
to { height: var(--radix-collapsible-content-height); } to { height: var(--radix-collapsible-content-height); }
} }

2
src/theme/accordion.ts
View File

@@ -4,7 +4,7 @@ export default {
item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0', item: 'border-b border-gray-200 dark:border-gray-800 last:border-b-0',
header: 'flex', 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 disabled:cursor-not-allowed disabled:opacity-75 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-in-out] data-[state=closed]:animate-[accordion-up_200ms_ease-in-out] overflow-hidden focus:outline-none', content: 'text-sm pb-3.5 data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden focus:outline-none',
leadingIcon: 'shrink-0 size-5', leadingIcon: 'shrink-0 size-5',
trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200', trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
label: 'truncate' label: 'truncate'

2
src/theme/collapsible.ts
View File

@@ -1,6 +1,6 @@
export default { export default {
slots: { slots: {
root: '', root: '',
content: 'data-[state=open]:animate-[collapsible-down_200ms_ease-in-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-in-out] overflow-hidden' content: 'data-[state=open]:animate-[slide-down_200ms_ease-out] data-[state=closed]:animate-[slide-up_200ms_ease-out] overflow-hidden'
} }
} }