feat(Accordion): add multiple prop and close others by default (#364)

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

docs/content/2.elements/5.accordion.md

@@ -16,6 +16,7 @@ Pass an array to the `items` prop of the Accordion component. Each item can have
 - `content` - The content to display in the panel by default.
 - `disabled` - Determines whether the item is disabled or not.
 - `defaultOpen` - Determines whether the item is initially open or closed.
+- `closeOthers` - Determines whether the item click close others or not. **It only works with multiple mode**.
 
 ::component-example
 #default
@@ -51,14 +52,14 @@ You can also pass any prop from the [Button](/elements/button) component directl
 ---
 baseProps:
   items:
-    - label: "1. What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "2. Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "3. Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "4. Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
   color: 'primary'
   variant: 'soft'
@@ -90,14 +91,14 @@ You can also set them to `null` to hide the icons.
 ---
 baseProps:
   items:
-    - label: "1. What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "2. Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "3. Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "4. Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: '1. What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '2. Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '3. Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: '4. Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
   openIcon: 'i-heroicons-plus'
   closeIcon: 'i-heroicons-minus'
@@ -107,29 +108,54 @@ excludedProps:
 ---
 ::
 
-### Open
+### Multiple
 
-Use the `default-open` prop to open all items by default.
+Use the `multiple` prop to to allow multiple elements to be opened at the same time.
 
 ::component-card
 ---
 baseProps:
   items:
-    - label: "What is NuxtLabs UI?"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Getting Started"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Theming"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-    - label: "Components"
-      content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
 props:
-  defaultOpen: true
+  multiple: true
 excludedProps:
   - defaultOpen
 ---
 ::
 
+### Open
+
+Use the `default-open` prop to open all items by default. Works better when the `multiple` prop is set to `true`.
+
+::component-card
+---
+baseProps:
+  items:
+    - label: 'What is NuxtLabs UI?'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Getting Started'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Theming'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+    - label: 'Components'
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+props:
+  defaultOpen: true
+  multiple: true
+excludedProps:
+  - defaultOpen
+  - multiple
+---
+::
+
 ## Slots
 
 You can use slots to customize the buttons and items content of the Accordion.