feat(Accordion): new component (#301)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/app.config.ts

@@ -248,7 +248,7 @@ const dropdown = {
     enterActiveClass: 'transition duration-100 ease-out',
     enterFromClass: 'transform scale-95 opacity-0',
     enterToClass: 'transform scale-100 opacity-100',
-    leaveActiveClass: 'transition duration-75 ease-out',
+    leaveActiveClass: 'transition duration-75 ease-in',
     leaveFromClass: 'transform scale-100 opacity-100',
     leaveToClass: 'transform scale-95 opacity-0'
   },
@@ -258,6 +258,29 @@ const dropdown = {
   }
 }
 
+const accordion = {
+  wrapper: 'w-full flex flex-col gap-y-2',
+  item: {
+    base: '',
+    size: 'text-sm',
+    color: 'text-gray-500 dark:text-gray-400',
+    padding: 'py-2'
+  },
+  transition: {
+    enterActiveClass: 'transition duration-100 ease-in',
+    enterFromClass: 'transform opacity-0',
+    enterToClass: 'transform opacity-100',
+    leaveActiveClass: 'transition duration-75 ease-out',
+    leaveFromClass: 'transform opacity-100',
+    leaveToClass: 'transform opacity-0'
+  },
+  default: {
+    openIcon: 'i-heroicons-chevron-down-20-solid',
+    closeIcon: '',
+    variant: 'soft'
+  }
+}
+
 const kbd = {
   base: 'inline-flex items-center justify-center text-gray-900 dark:text-white',
   padding: 'px-1',
@@ -387,7 +410,7 @@ const formGroup = {
   label: {
     wrapper: 'flex content-center justify-between',
     base: 'block text-sm font-medium text-gray-700 dark:text-gray-200',
-    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
+    required: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
   },
   description: 'text-sm text-gray-500 dark:text-gray-400',
   container: 'mt-1 relative',
@@ -541,7 +564,7 @@ const range = {
     background: 'bg-{color}-500 dark:bg-{color}-400'
   },
   thumb: {
-    base: `[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0`,
+    base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
     color: 'text-{color}-500 dark:text-{color}-400',
     background: '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current',
     ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
@@ -926,6 +949,7 @@ export default {
     buttonGroup,
     dropdown,
     kbd,
+    accordion,
     input,
     formGroup,
     textarea,

src/runtime/components/elements/Accordion.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="ui.wrapper">
+    <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
+      <HDisclosureButton as="template" :disabled="item.disabled">
+        <slot :item="item" :index="index" :open="open" :close="close">
+          <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...$attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }" class="w-full">
+            <template #trailing>
+              <UIcon
+                :name="!open ? openIcon : closeIcon ? closeIcon : openIcon"
+                class="ms-auto transform"
+                :class="[
+                  open && !closeIcon ? '-rotate-180' : '',
+                  uiButton.icon.size[item.size || uiButton.default.size]
+                ]"
+              />
+            </template>
+          </UButton>
+        </slot>
+      </HDisclosureButton>
+
+      <Transition v-bind="ui.transition">
+        <HDisclosurePanel :class="[ui.item.base, ui.item.size, ui.item.color, ui.item.padding]">
+          <slot :name="item.slot || 'item'" :item="item" :index="index" :open="open" :close="close">
+            {{ item.content }}
+          </slot>
+        </HDisclosurePanel>
+      </Transition>
+    </HDisclosure>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import type { PropType } from 'vue'
+import { Disclosure as HDisclosure, DisclosureButton as HDisclosureButton, DisclosurePanel as HDisclosurePanel } from '@headlessui/vue'
+import { defu } from 'defu'
+import { omit } from 'lodash-es'
+import UIcon from '../elements/Icon.vue'
+import UButton from '../elements/Button.vue'
+import type { Button } from '../../types/button'
+import { useAppConfig } from '#imports'
+// TODO: Remove
+// @ts-expect-error
+import appConfig from '#build/app.config'
+
+export default defineComponent({
+  components: {
+    HDisclosure,
+    HDisclosureButton,
+    HDisclosurePanel,
+    UIcon,
+    UButton
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array as PropType<Partial<Button & { slot: string, disabled: boolean, content: string, defaultOpen: boolean }>[]>,
+      default: () => []
+    },
+    defaultOpen: {
+      type: Boolean,
+      default: false
+    },
+    openIcon: {
+      type: String,
+      default: () => appConfig.ui.accordion.default.openIcon
+    },
+    closeIcon: {
+      type: String,
+      default: () => appConfig.ui.accordion.default.closeIcon
+    },
+    ui: {
+      type: Object as PropType<Partial<typeof appConfig.ui.accordion>>,
+      default: () => appConfig.ui.accordion
+    }
+  },
+  setup (props) {
+    // TODO: Remove
+    const appConfig = useAppConfig()
+
+    const ui = computed<Partial<typeof appConfig.ui.accordion>>(() => defu({}, props.ui, appConfig.ui.accordion))
+
+    const uiButton = computed<Partial<typeof appConfig.ui.button>>(() => appConfig.ui.button)
+
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      uiButton,
+      omit
+    }
+  }
+})
+</script>