From 4a409fdf8ba74244e234701ea25c754164790e32 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 3 Apr 2024 18:12:05 +0200
Subject: [PATCH] chore(collapsible/accordion): merge animations

---
 playground/pages/accordion.vue   |  8 +++++---
 playground/pages/collapsible.vue | 35 +++++++++++++++++++-------------
 src/templates.ts                 | 13 ++----------
 src/theme/accordion.ts           |  2 +-
 src/theme/collapsible.ts         |  2 +-
 5 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/playground/pages/accordion.vue b/playground/pages/accordion.vue
index baf3973b..216c0805 100644
--- a/playground/pages/accordion.vue
+++ b/playground/pages/accordion.vue
@@ -29,7 +29,9 @@ const items = [{
 </script>
 
 <template>
-  <UCard :ui="{ body: 'p-0 sm:p-0' }">
-    <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
-  </UCard>
+  <div class="flex-1">
+    <UCard :ui="{ body: 'p-0 sm:p-0' }">
+      <UAccordion :items="items" class="w-96" :ui="{ trigger: 'px-3.5', content: 'px-3.5' }" />
+    </UCard>
+  </div>
 </template>
diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
index 1dd9bb54..0d6a7ea7 100644
--- a/playground/pages/collapsible.vue
+++ b/playground/pages/collapsible.vue
@@ -1,16 +1,23 @@
-<template>
-  <UCollapsible class="space-y-2 w-48">
-    <UButton
-      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' }"
-    />
+<script setup lang="ts">
+const appConfig = useAppConfig()
+</script>
 
-    <template #content>
-      <Placeholder class="h-24 w-full" />
-    </template>
-  </UCollapsible>
+<template>
+  <div class="flex-1">
+    <UCollapsible class="space-y-2 w-48">
+      <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>
diff --git a/src/templates.ts b/src/templates.ts
index c6e16a92..e991412b 100644
--- a/src/templates.ts
+++ b/src/templates.ts
@@ -17,20 +17,11 @@ export function addTemplates (options: ModuleOptions, nuxt: Nuxt) {
     color-scheme: light dark;
   }
 
-  @keyframes accordion-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 {
+  @keyframes slide-up {
     from { height: var(--radix-collapsible-content-height); }
     to { height: 0; }
   }
-  @keyframes collapsible-down {
+  @keyframes slide-down {
     from { height: 0; }
     to { height: var(--radix-collapsible-content-height); }
   }
diff --git a/src/theme/accordion.ts b/src/theme/accordion.ts
index 63ac5736..e8060f72 100644
--- a/src/theme/accordion.ts
+++ b/src/theme/accordion.ts
@@ -4,7 +4,7 @@ export default {
     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',
-    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',
     trailingIcon: 'ms-auto size-5 group-data-[state=open]:rotate-180 transition-transform duration-200',
     label: 'truncate'
diff --git a/src/theme/collapsible.ts b/src/theme/collapsible.ts
index 2c029634..b4bf87b9 100644
--- a/src/theme/collapsible.ts
+++ b/src/theme/collapsible.ts
@@ -1,6 +1,6 @@
 export default {
   slots: {
     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'
   }
 }