feat(Accordion): new component

[Haythamasalama]

Accordion

✨ Introducing a new component for the NuxtLabs UI : Toggleable Accordion Panels! 🎉

📝 This pull request introduces the Disclosure component from the Headless UI library. It enables the display of interactive accordion panels for hiding and revealing content.

🚀 Key features of this component include:

• Customizable labels, leading icons, and content for each panel.
• Options to enable/disable individual panels.
• Control over the initial open/closed state of the panels.
• Ability to change the color and size of the accordion panels.
• Flexible icon customization for opening and closing the panels.
• Support for disabling specific panels.
• Option to open all panels by default.
• Slots for customizing the button and content items.

❤️ Please review the changes in this PR and provide feedback.

Resolves #156

[nuxt-studio-dev]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	f80b996

[vercel]

@Haythamasalama is attempting to deploy a commit to the Nuxt Labs Team on Vercel.

A member of the Team first needs to authorize it.

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	dcb4502

[benjamincanac]

I had a quick look and I would rather call this component Accordion :)

Also, what would you think of using the UButton for the triggers? It would allow to handle all the styling and the props like here https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/overlays/Notification.vue#L83 without configuring everything like the sizes, icons, etc.

[Haythamasalama]

I had a quick look and I would rather call this component Accordion :)

You're right, I don't like the Disclosure name It's nice to be accordion. I will work on these changes.

[Haythamasalama]

@benjamincanac done

Do you think we need to add as props for the content of the accordion?

[Haythamasalama]

@benjamincanac
Can we review this to work on new components like breadcrumbs ?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	🔄 Building (Inspect)		Jun 27, 2023 7:53pm

[benjamincanac]

I've taken the liberty to make a few changes to your PR. Let me know what you think!

[benjamincanac]

I just have an issue with the disabled field on an item that doesn't get forwarded to the Button.

[Haythamasalama]

@benjamincanac
Nice changes. But what if we make the default variant soft and add this example of the default slot to showcase an alternative accordion design or style ?

I just have an issue with the disabled field on an item that doesn't get forwarded to the Button.

I will check it

[Haythamasalama]

@benjamincanac

Changing the as property from template to div in <HDisclosureButton as="div"> makes it work correctly

[benjamincanac]

I fixed it by passing the disabled prop to the DisclosureButton which works with as="template".

Do you still see an issue?

[benjamincanac]

I've updated the default slot example from your proposal.

[Haythamasalama]

@benjamincanac

disabled It's working well. I updated the default slot example and added the default variant soft. I think it looks very nice, rather than solid.

[benjamincanac]

I agree, just pushed some changes too. Let me know 😊

[Haythamasalama]

I agree, just pushed some changes too. Let me know 😊

Nice tweak! ❤️

[benjamincanac]

Let's merge this then!

[mathieunicolas]

Nice component !
Is it possible to add an option that would let us choose if opening a panel should close the others ?
I have a usecase in which that would be helpful.

btw, thanks a lot for this amazing UI module !!! you guys are amazing

[Haythamasalama]

@mathieunicolas

Yes, it's existied!

• You can open all items by enabling default-open props.

Check it here: https://ui.nuxtlabs.com/elements/accordion#open

• Or open a specific item by passing defaultOpen in the items array.

Check it here: https://ui.nuxtlabs.com/elements/accordion#usage

[mathieunicolas]

Hi @Haythamasalama thanks for your quick reply !
My question was about the behaviour of the accordion when you click on a panel to open it : it would be nice to have the previously opened one automatically closing, so you always have one panel opened !

For example :

• all panels are closed
• you click panel 2, it opens
• you click panel 3, it opens, and panel 2 closes

[Haythamasalama]

@mathieunicolas
Open issue with this description