mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
feat(structured-list)!: integration StructuredList with v11 (#1965)
This commit is contained in:
Eric Liu
GitHub
parent
adab556fa2
commit
52adc778ca
19 changed files with 245 additions and 410 deletions
|
|
@ -3666,10 +3666,6 @@ None.
|
|||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| change | dispatched | -- |
|
||||
|
||||
## `StructuredListBody`
|
||||
|
|
@ -3686,12 +3682,7 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
None.
|
||||
|
||||
## `StructuredListCell`
|
||||
|
||||
|
|
@ -3699,7 +3690,6 @@ None.
|
|||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------- |
|
||||
| head | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use as a header |
|
||||
| noWrap | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent wrapping |
|
||||
|
||||
### Slots
|
||||
|
|
@ -3710,12 +3700,7 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
None.
|
||||
|
||||
## `StructuredListHead`
|
||||
|
||||
|
|
@ -3731,25 +3716,22 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
None.
|
||||
|
||||
## `StructuredListInput`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the input |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the input |
|
||||
| value | No | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the input |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------- |
|
||||
| ref | No | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the input |
|
||||
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the input |
|
||||
| value | No | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the input |
|
||||
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
|
||||
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
|
||||
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Select an option"</code> | Specify the ARIA label for the accordion item chevron icon. |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3757,17 +3739,18 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
None.
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| change | forwarded | -- |
|
||||
|
||||
## `StructuredListRow`
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
|
||||
| head | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use as a header |
|
||||
| label | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a label slot |
|
||||
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ------------------ | --------------------------------------- |
|
||||
| tag | No | <code>let</code> | No | <code>keyof HTMLElementTagNameMap</code> | <code>"div"</code> | Specify the tag name |
|
||||
| selected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected state |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3777,13 +3760,7 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| keydown | forwarded | -- |
|
||||
None.
|
||||
|
||||
## `StructuredListSkeleton`
|
||||
|
||||
|
|
@ -3791,7 +3768,7 @@ None.
|
|||
|
||||
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
|
||||
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
| count | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -3799,12 +3776,7 @@ None.
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :-------- | :----- |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
None.
|
||||
|
||||
## `Switch`
|
||||
|
||||
|
|
|
|||
|
|
@ -11560,13 +11560,7 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
|
||||
{ "type": "dispatched", "name": "change" }
|
||||
],
|
||||
"events": [{ "type": "dispatched", "name": "change" }],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
|
|
@ -11576,12 +11570,7 @@
|
|||
"props": [],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
|
|
@ -11589,18 +11578,6 @@
|
|||
"moduleName": "StructuredListCell",
|
||||
"filePath": "src/StructuredList/StructuredListCell.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "head",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use as a header",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "noWrap",
|
||||
"kind": "let",
|
||||
|
|
@ -11616,12 +11593,7 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
|
|
@ -11631,12 +11603,7 @@
|
|||
"props": [],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
|
|
@ -11715,11 +11682,34 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "icon",
|
||||
"kind": "let",
|
||||
"description": "Specify the icon to render",
|
||||
"type": "typeof import(\"svelte\").SvelteComponent<any>",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "iconDescription",
|
||||
"kind": "let",
|
||||
"description": "Specify the ARIA label for the accordion item chevron icon.",
|
||||
"type": "string",
|
||||
"value": "\"Select an option\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [],
|
||||
"events": [{ "type": "forwarded", "name": "change", "element": "input" }],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "input" }
|
||||
},
|
||||
|
|
@ -11728,11 +11718,11 @@
|
|||
"filePath": "src/StructuredList/StructuredListRow.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "head",
|
||||
"name": "tag",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to use as a header",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"description": "Specify the tag name",
|
||||
"type": "keyof HTMLElementTagNameMap",
|
||||
"value": "\"div\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
|
|
@ -11740,9 +11730,9 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "label",
|
||||
"name": "selected",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to render a label slot",
|
||||
"description": "Set to `true` to use the selected state",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
|
|
@ -11750,38 +11740,20 @@
|
|||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "tabindex",
|
||||
"kind": "let",
|
||||
"description": "Specify the tabindex",
|
||||
"type": "string",
|
||||
"value": "\"0\"",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"isRequired": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"moduleExports": [],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "label" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "label" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "label" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "label" },
|
||||
{ "type": "forwarded", "name": "keydown", "element": "label" }
|
||||
],
|
||||
"events": [],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "label" }
|
||||
"rest_props": { "type": "Element", "name": "svelte:element" }
|
||||
},
|
||||
{
|
||||
"moduleName": "StructuredListSkeleton",
|
||||
"filePath": "src/StructuredList/StructuredListSkeleton.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "rows",
|
||||
"name": "count",
|
||||
"kind": "let",
|
||||
"description": "Specify the number of rows",
|
||||
"type": "number",
|
||||
|
|
@ -11795,14 +11767,8 @@
|
|||
],
|
||||
"moduleExports": [],
|
||||
"slots": [],
|
||||
"events": [
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
"events": [],
|
||||
"typedefs": []
|
||||
},
|
||||
{
|
||||
"moduleName": "Switch",
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>Column A</StructuredListCell>
|
||||
<StructuredListCell>Column B</StructuredListCell>
|
||||
<StructuredListCell>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
|
|
@ -24,9 +24,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -34,9 +32,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -44,9 +40,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
|
|
@ -56,10 +50,10 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
|
||||
<StructuredList condensed>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>Column A</StructuredListCell>
|
||||
<StructuredListCell>Column B</StructuredListCell>
|
||||
<StructuredListCell>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
|
|
@ -68,9 +62,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -78,9 +70,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -88,9 +78,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
|
|
@ -100,10 +88,10 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
|
||||
<StructuredList flush>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>Column A</StructuredListCell>
|
||||
<StructuredListCell>Column B</StructuredListCell>
|
||||
<StructuredListCell>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
|
|
@ -112,9 +100,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -122,9 +108,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
|
|
@ -132,9 +116,7 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
magna, finibus id tortor sed, aliquet bibendum augue.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
|
|
@ -142,44 +124,14 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
|
|||
|
||||
## Selectable rows
|
||||
|
||||
<StructuredList selection selected="row-1-value">
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{''}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each [1, 2, 3] as item}
|
||||
<StructuredListRow label for="row-{item}">
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean
|
||||
posuere sem vel euismod dignissim. Nulla ut cursus dolor.
|
||||
Pellentesque vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
<StructuredListInput
|
||||
id="row-{item}"
|
||||
value="row-{item}-value"
|
||||
title="row-{item}-title"
|
||||
name="row-{item}-name"
|
||||
/>
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option"
|
||||
/>
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
<FileSource src="/framed/StructuredList/ProgrammaticStructuredList" />
|
||||
|
||||
## Skeleton
|
||||
|
||||
<StructuredListSkeleton rows={3} />
|
||||
<StructuredListSkeleton />
|
||||
|
||||
## Skeleton (custom count)
|
||||
|
||||
By default, the skeleton will render 5 rows. You can customize the number of rows by passing a `count` prop.
|
||||
|
||||
<StructuredListSkeleton count={3} />
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<script>
|
||||
import {
|
||||
StructuredList,
|
||||
StructuredListBody,
|
||||
StructuredListHead,
|
||||
StructuredListCell,
|
||||
StructuredListRow,
|
||||
StructuredListInput,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
const rows = [
|
||||
{ value: "Application services", description: "IBM Consulting delivers high-quality and innovative IT solutions to meet our client’s business needs, including hybrid cloud management services with technology solutions that enable their business objectives and accelerate the cloud journey, unleashing the full potential of their technology investments." },
|
||||
{ value: "Cloud services", description: "Drive agility and fuel growth with hybrid cloud and AI." },
|
||||
{ value: "Data services", description: "Data is the fuel for the modern enterprise, and with data collection exploding, companies are increasing their investments in data integration in order to deliver rich digital experiences and actionable insights across their business." },
|
||||
];
|
||||
|
||||
let selected = rows[0].value;
|
||||
|
||||
$: console.log("selected", selected);
|
||||
</script>
|
||||
|
||||
<StructuredList selection bind:selected="{selected}">
|
||||
<StructuredListHead>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>Service</StructuredListCell>
|
||||
<StructuredListCell>Description</StructuredListCell>
|
||||
<StructuredListCell />
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each rows as row (row.value)}
|
||||
{@const selected =row.value === selected}
|
||||
<StructuredListRow tag="label" selected={selected}>
|
||||
<StructuredListCell>{row.value}</StructuredListCell>
|
||||
<StructuredListCell>{row.description}</StructuredListCell>
|
||||
<StructuredListInput
|
||||
value="{row.value}"
|
||||
id="{row.value}"
|
||||
name="{row.value}"
|
||||
/>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
<script>
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* Specify the selected structured list row value
|
||||
* @type {string}
|
||||
|
|
@ -17,10 +19,11 @@
|
|||
import { createEventDispatcher, setContext } from "svelte";
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
/** @type {import("svelte").EventDispatcher<{ change: string; }>} */
|
||||
const dispatch = createEventDispatcher();
|
||||
const selectedValue = writable(selected);
|
||||
|
||||
setContext("StructuredListWrapper", {
|
||||
setContext("StructuredList", {
|
||||
selectedValue,
|
||||
update: (value) => {
|
||||
selectedValue.set(value);
|
||||
|
|
@ -31,8 +34,6 @@
|
|||
$: dispatch("change", $selectedValue);
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div
|
||||
role="table"
|
||||
class:bx--structured-list="{true}"
|
||||
|
|
@ -40,10 +41,6 @@
|
|||
class:bx--structured-list--condensed="{condensed}"
|
||||
class:bx--structured-list--flush="{flush}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div
|
||||
role="rowgroup"
|
||||
class:bx--structured-list-tbody="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,21 @@
|
|||
<script>
|
||||
/** Set to `true` to use as a header */
|
||||
export let head = false;
|
||||
// @ts-check
|
||||
|
||||
/** Set to `true` to prevent wrapping */
|
||||
export let noWrap = false;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
||||
/** @type {undefined | import("svelte/store").Writable<{}>} */
|
||||
const head = getContext("StructuredListHead");
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
role="{head ? 'columnheader' : 'cell'}"
|
||||
class:bx--structured-list-th="{head}"
|
||||
class:bx--structured-list-td="{!head}"
|
||||
class:bx--structured-list-content--nowrap="{noWrap}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
role="{head ? 'columnheader' : 'cell'}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<div
|
||||
role="rowgroup"
|
||||
class:bx--structured-list-thead="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<script>
|
||||
// @ts-check
|
||||
import { setContext } from "svelte";
|
||||
|
||||
setContext("StructuredListHead", {});
|
||||
</script>
|
||||
|
||||
<div {...$$restProps} role="rowgroup" class:bx--structured-list-thead="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script>
|
||||
// @ts-check
|
||||
|
||||
/** Set to `true` to check the input */
|
||||
export let checked = false;
|
||||
|
||||
|
|
@ -17,9 +19,19 @@
|
|||
/** Obtain a reference to the input HTML element */
|
||||
export let ref = null;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @type {typeof import("svelte").SvelteComponent<any>}
|
||||
*/
|
||||
export let icon = CheckmarkFilled;
|
||||
|
||||
const { selectedValue, update } = getContext("StructuredListWrapper");
|
||||
/** Specify the ARIA label for the accordion item chevron icon. */
|
||||
export let iconDescription = "Select an option";
|
||||
|
||||
import { getContext } from "svelte";
|
||||
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
|
||||
|
||||
const { selectedValue, update } = getContext("StructuredList");
|
||||
|
||||
if (checked) {
|
||||
update(value);
|
||||
|
|
@ -31,15 +43,24 @@
|
|||
<input
|
||||
bind:this="{ref}"
|
||||
type="radio"
|
||||
tabindex="-1"
|
||||
tabindex="{-1}"
|
||||
checked="{checked}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
title="{title}"
|
||||
value="{value}"
|
||||
class:bx--structured-list-input="{true}"
|
||||
class:bx--visually-hidden="{true}"
|
||||
{...$$restProps}
|
||||
on:change
|
||||
on:change="{() => {
|
||||
update(value);
|
||||
}}"
|
||||
/>
|
||||
<div role="{'cell'}" class:bx--structured-list-td="{true}">
|
||||
<svelte:component
|
||||
this="{icon}"
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="{iconDescription}"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,31 @@
|
|||
<script>
|
||||
/** Set to `true` to use as a header */
|
||||
export let head = false;
|
||||
// @ts-check
|
||||
|
||||
/** Set to `true` to render a label slot */
|
||||
export let label = false;
|
||||
/**
|
||||
* Specify the tag name
|
||||
* @type {keyof HTMLElementTagNameMap}
|
||||
*/
|
||||
export let tag = "div";
|
||||
|
||||
/** Specify the tabindex */
|
||||
export let tabindex = "0";
|
||||
/**
|
||||
* Set to `true` to use the selected state
|
||||
* @type {boolean}
|
||||
*/
|
||||
export let selected = false;
|
||||
|
||||
import { getContext } from "svelte";
|
||||
|
||||
/** @type {undefined | import("svelte/store").Writable<{}>} */
|
||||
const head = getContext("StructuredListHead");
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
{#if label}
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
||||
<label
|
||||
tabindex="{tabindex}"
|
||||
class:bx--structured-list-row="{true}"
|
||||
class:bx--structured-list-row--header-row="{head}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown
|
||||
>
|
||||
<slot />
|
||||
</label>
|
||||
{:else}
|
||||
<!-- svelte-ignore a11y-interactive-supports-focus -->
|
||||
<div
|
||||
role="row"
|
||||
class:bx--structured-list-row="{true}"
|
||||
class:bx--structured-list-row--header-row="{head}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
<svelte:element
|
||||
this="{tag}"
|
||||
class:bx--structured-list-row="{true}"
|
||||
class:bx--structured-list-row--header-row="{head}"
|
||||
class:bx--structured-list-row--selected="{selected}"
|
||||
{...$$restProps}
|
||||
role="row"
|
||||
>
|
||||
<slot />
|
||||
</svelte:element>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,11 @@
|
|||
<script>
|
||||
// @ts-check
|
||||
|
||||
/** Specify the number of rows */
|
||||
export let rows = 5;
|
||||
export let count = 5;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--structured-list="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<div class:bx--skeleton="{true}" class:bx--structured-list="{true}">
|
||||
<div class:bx--structured-list-thead="{true}">
|
||||
<div
|
||||
class:bx--structured-list-row="{true}"
|
||||
|
|
@ -25,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class:bx--structured-list-tbody="{true}">
|
||||
{#each Array.from({ length: rows }, (_, i) => i) as row, i (row)}
|
||||
{#each Array.from({ length: count }) as row}
|
||||
<div class:bx--structured-list-row="{true}">
|
||||
<div class:bx--structured-list-td="{true}"></div>
|
||||
<div class:bx--structured-list-td="{true}"></div>
|
||||
|
|
|
|||
|
|
@ -13,82 +13,33 @@
|
|||
|
||||
<StructuredList>
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>Column A</StructuredListCell>
|
||||
<StructuredListCell head>Column B</StructuredListCell>
|
||||
<StructuredListCell head>Column C</StructuredListCell>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell>Column A</StructuredListCell>
|
||||
<StructuredListCell>Column B</StructuredListCell>
|
||||
<StructuredListCell>Column C</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 1</StructuredListCell>
|
||||
<StructuredListCell>Row 1</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
||||
porttitor interdum.
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>Row 1.</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 2</StructuredListCell>
|
||||
<StructuredListCell>Row 2</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
||||
porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>Row 3</StructuredListCell>
|
||||
<StructuredListCell>Row 3</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
|
||||
finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
|
||||
euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a
|
||||
porttitor interdum.
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
<StructuredList selection selected="row-1-value">
|
||||
<StructuredListHead>
|
||||
<StructuredListRow head>
|
||||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{""}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each [1, 2, 3] as item}
|
||||
<StructuredListRow label for="row-{item}">
|
||||
<StructuredListRow tag="label" for="row-{item}" selected={false}>
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>Row {item}</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
|
||||
magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
|
||||
sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
|
||||
vulputate nisl a porttitor interdum.
|
||||
</StructuredListCell>
|
||||
<StructuredListInput
|
||||
id="row-{item}"
|
||||
value="row-{item}-value"
|
||||
title="row-{item}-title"
|
||||
name="row-{item}-name"
|
||||
icon={CheckmarkFilled}
|
||||
/>
|
||||
<StructuredListCell>
|
||||
<CheckmarkFilled
|
||||
class="bx--structured-list-svg"
|
||||
aria-label="select an option"
|
||||
title="select an option"
|
||||
/>
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
</StructuredListBody>
|
||||
</StructuredList>
|
||||
|
||||
<StructuredListSkeleton rows="{3}" />
|
||||
<StructuredListSkeleton count="{3}" />
|
||||
|
|
|
|||
|
|
@ -33,12 +33,6 @@ export interface StructuredListProps extends RestProps {
|
|||
|
||||
export default class StructuredList extends SvelteComponentTyped<
|
||||
StructuredListProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
change: CustomEvent<any>;
|
||||
},
|
||||
{ change: CustomEvent<any> },
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,6 @@ export interface StructuredListBodyProps extends RestProps {
|
|||
|
||||
export default class StructuredListBody extends SvelteComponentTyped<
|
||||
StructuredListBodyProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
Record<string, any>,
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@ import type { SvelteHTMLElements } from "svelte/elements";
|
|||
type RestProps = SvelteHTMLElements["div"];
|
||||
|
||||
export interface StructuredListCellProps extends RestProps {
|
||||
/**
|
||||
* Set to `true` to use as a header
|
||||
* @default false
|
||||
*/
|
||||
head?: boolean;
|
||||
|
||||
/**
|
||||
* Set to `true` to prevent wrapping
|
||||
* @default false
|
||||
|
|
@ -21,11 +15,6 @@ export interface StructuredListCellProps extends RestProps {
|
|||
|
||||
export default class StructuredListCell extends SvelteComponentTyped<
|
||||
StructuredListCellProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
Record<string, any>,
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,6 @@ export interface StructuredListHeadProps extends RestProps {
|
|||
|
||||
export default class StructuredListHead extends SvelteComponentTyped<
|
||||
StructuredListHeadProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
Record<string, any>,
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -40,11 +40,23 @@ export interface StructuredListInputProps extends RestProps {
|
|||
*/
|
||||
ref?: null | HTMLInputElement;
|
||||
|
||||
/**
|
||||
* Specify the icon to render
|
||||
* @default undefined
|
||||
*/
|
||||
icon?: typeof import("svelte").SvelteComponent<any>;
|
||||
|
||||
/**
|
||||
* Specify the ARIA label for the accordion item chevron icon.
|
||||
* @default "Select an option"
|
||||
*/
|
||||
iconDescription?: string;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
}
|
||||
|
||||
export default class StructuredListInput extends SvelteComponentTyped<
|
||||
StructuredListInputProps,
|
||||
Record<string, any>,
|
||||
{ change: WindowEventMap["change"] },
|
||||
{}
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -1,38 +1,26 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
type RestProps = SvelteHTMLElements["label"];
|
||||
type RestProps = SvelteHTMLElements["svelte:element"];
|
||||
|
||||
export interface StructuredListRowProps extends RestProps {
|
||||
/**
|
||||
* Set to `true` to use as a header
|
||||
* @default false
|
||||
* Specify the tag name
|
||||
* @default "div"
|
||||
*/
|
||||
head?: boolean;
|
||||
tag?: keyof HTMLElementTagNameMap;
|
||||
|
||||
/**
|
||||
* Set to `true` to render a label slot
|
||||
* Set to `true` to use the selected state
|
||||
* @default false
|
||||
*/
|
||||
label?: boolean;
|
||||
|
||||
/**
|
||||
* Specify the tabindex
|
||||
* @default "0"
|
||||
*/
|
||||
tabindex?: string;
|
||||
selected?: boolean;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
}
|
||||
|
||||
export default class StructuredListRow extends SvelteComponentTyped<
|
||||
StructuredListRowProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
keydown: WindowEventMap["keydown"];
|
||||
},
|
||||
Record<string, any>,
|
||||
{ default: {} }
|
||||
> {}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,15 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
type RestProps = SvelteHTMLElements["div"];
|
||||
|
||||
export interface StructuredListSkeletonProps extends RestProps {
|
||||
export interface StructuredListSkeletonProps {
|
||||
/**
|
||||
* Specify the number of rows
|
||||
* @default 5
|
||||
*/
|
||||
rows?: number;
|
||||
|
||||
[key: `data-${string}`]: any;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
export default class StructuredListSkeleton extends SvelteComponentTyped<
|
||||
StructuredListSkeletonProps,
|
||||
{
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
mouseleave: WindowEventMap["mouseleave"];
|
||||
},
|
||||
Record<string, any>,
|
||||
{}
|
||||
> {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue