arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 08:50:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Accordion): solve the shift between buttons when they are opened (#379)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-07-03 18:20:08 +03:00
committed by GitHub
parent b78fcf91a4
commit eaf0043da6
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/runtime/app.config.ts
View File

@@ -259,12 +259,12 @@ const dropdown = {
} }
const accordion = { const accordion = {
wrapper: 'w-full flex flex-col gap-y-2', wrapper: 'w-full flex flex-col',
item: { item: {
base: '', base: '',
size: 'text-sm', size: 'text-sm',
color: 'text-gray-500 dark:text-gray-400', color: 'text-gray-500 dark:text-gray-400',
padding: 'py-2' padding: 'pt-1.5 pb-3'
}, },
transition: { transition: {
enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out', enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out',
@@ -273,6 +273,7 @@ const accordion = {
default: { default: {
openIcon: 'i-heroicons-chevron-down-20-solid', openIcon: 'i-heroicons-chevron-down-20-solid',
closeIcon: '', closeIcon: '',
class: 'mb-1.5 w-full',
variant: 'soft' variant: 'soft'
} }
} }

2
src/runtime/components/elements/Accordion.vue
View File

@@ -3,7 +3,7 @@
<HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen"> <HDisclosure v-for="(item, index) in items" v-slot="{ open, close }" :key="index" :default-open="defaultOpen || item.defaultOpen">
<HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled"> <HDisclosureButton :ref="() => buttonRefs[index] = close" as="template" :disabled="item.disabled">
<slot :item="item" :index="index" :open="open" :close="close"> <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"> <UButton v-bind="{ ...omit(ui.default, ['openIcon', 'closeIcon']), ...$attrs, ...omit(item, ['slot', 'disabled', 'content', 'defaultOpen']) }">
<template #trailing> <template #trailing>
<UIcon <UIcon
:name="!open ? openIcon : closeIcon ? closeIcon : openIcon" :name="!open ? openIcon : closeIcon ? closeIcon : openIcon"