Skip to content

Commit

Permalink
feat(accordion)!: integrate Accordion with v11 (#1947)
Browse files Browse the repository at this point in the history
  • Loading branch information
@metonym
metonym authored Apr 21, 2024
1 parent e8b9472 commit 0e8909a
Show file tree
Hide file tree
Showing 10 changed files with 251 additions and 446 deletions.
51 changes: 21 additions & 30 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,12 +177,12 @@

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the accordion |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify the alignment of the accordion item chevron icon. |
| flush | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the accordion content text.<br /><br />**Note**: does not work with `align="start"`. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the accordion. |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable all accordion items. |

### Slots

Expand All @@ -192,23 +192,18 @@

### Events

| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

## `AccordionItem`

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., `&lt;div slot="title"&gt;...&lt;/div&gt;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item. |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item. |
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Use the "title" slot for custom elements.<br />@example &lt;svelte:fragment slot="title"&gt;...&lt;/svelte:fragment&gt; |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon. |

### Slots

Expand All @@ -232,25 +227,21 @@

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| count | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items to render |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the accordion |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to close the first accordion item |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------- |
| count | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of accordion items. |
| align | No | <code>let</code> | No | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify the alignment of the accordion item chevron icon. |
| flush | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flush the accordion content text.<br /><br />**Note**: does not work with `align="start"`. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>"md"</code> | Specify the size of the accordion. |
| open | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to expand the first accordion item |

### Slots

None.

### Events

| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
None.

## `AspectRatio`

Expand Down
97 changes: 39 additions & 58 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
{
"name": "align",
"kind": "let",
"description": "Specify alignment of accordion item chevron icon",
"description": "Specify the alignment of the accordion item chevron icon.",
"type": "\"start\" | \"end\"",
"value": "\"end\"",
"isFunction": false,
Expand All @@ -18,32 +18,33 @@
"reactive": false
},
{
"name": "size",
"name": "flush",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"lg\"",
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"name": "size",
"kind": "let",
"description": "Set to `true` to disable the accordion",
"type": "boolean",
"value": "false",
"description": "Specify the size of the accordion.",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"name": "disabled",
"kind": "let",
"description": "Set to `true` to display the skeleton state",
"description": "Set to `true` to disable all accordion items.",
"type": "boolean",
"value": "false",
"isFunction": false,
Expand All @@ -55,34 +56,8 @@
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "forwarded",
"name": "click",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseover",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseenter",
"element": "AccordionSkeleton"
},
{
"type": "forwarded",
"name": "mouseleave",
"element": "AccordionSkeleton"
}
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "AccordionSkeleton" },
"extends": {
"interface": "AccordionSkeletonProps",
"import": "\"./AccordionSkeleton.svelte\""
}
"events": [],
"typedefs": []
},
{
"moduleName": "AccordionItem",
Expand All @@ -91,7 +66,7 @@
{
"name": "title",
"kind": "let",
"description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `<div slot=\"title\">...</div>`)",
"description": "Specify the title of the accordion item heading.\nUse the \"title\" slot for custom elements.\n@example <svelte:fragment slot=\"title\">...</svelte:fragment>",
"type": "string",
"value": "\"title\"",
"isFunction": false,
Expand All @@ -103,7 +78,7 @@
{
"name": "open",
"kind": "let",
"description": "Set to `true` to open the first accordion item",
"description": "Set to `true` to open the first accordion item.",
"type": "boolean",
"value": "false",
"isFunction": false,
Expand All @@ -115,7 +90,7 @@
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the accordion item",
"description": "Set to `true` to disable the accordion item.",
"type": "boolean",
"value": "false",
"isFunction": false,
Expand All @@ -127,7 +102,7 @@
{
"name": "iconDescription",
"kind": "let",
"description": "Specify the ARIA label for the accordion item chevron icon",
"description": "Specify the ARIA label for the accordion item chevron icon.",
"type": "string",
"value": "\"Expand/Collapse\"",
"isFunction": false,
Expand Down Expand Up @@ -155,8 +130,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
{ "type": "forwarded", "name": "keydown", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "li" }
"typedefs": []
},
{
"moduleName": "AccordionSkeleton",
Expand All @@ -165,7 +139,7 @@
{
"name": "count",
"kind": "let",
"description": "Specify the number of accordion items to render",
"description": "Specify the number of accordion items.",
"type": "number",
"value": "4",
"isFunction": false,
Expand All @@ -177,7 +151,7 @@
{
"name": "align",
"kind": "let",
"description": "Specify alignment of accordion item chevron icon",
"description": "Specify the alignment of the accordion item chevron icon.",
"type": "\"start\" | \"end\"",
"value": "\"end\"",
"isFunction": false,
Expand All @@ -186,11 +160,24 @@
"constant": false,
"reactive": false
},
{
"name": "flush",
"kind": "let",
"description": "Set to `true` to flush the accordion content text.\n\n**Note**: does not work with `align=\"start\"`.",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "size",
"kind": "let",
"description": "Specify the size of the accordion",
"type": "\"sm\" | \"xl\"",
"description": "Specify the size of the accordion.",
"type": "\"sm\" | \"md\" | \"lg\"",
"value": "\"md\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
Expand All @@ -200,9 +187,9 @@
{
"name": "open",
"kind": "let",
"description": "Set to `false` to close the first accordion item",
"description": "Set to `true` to expand the first accordion item",
"type": "boolean",
"value": "true",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
Expand All @@ -212,14 +199,8 @@
],
"moduleExports": [],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "mouseover", "element": "ul" },
{ "type": "forwarded", "name": "mouseenter", "element": "ul" },
{ "type": "forwarded", "name": "mouseleave", "element": "ul" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "ul" }
"events": [],
"typedefs": []
},
{
"moduleName": "AspectRatio",
Expand Down
Loading

0 comments on commit 0e8909a

Please sign in to comment.