mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51: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
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue