mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge 2921502122 into b6df277647

Browse source
This commit is contained in:
Nicolas Peugnet 2024-08-12 15:28:55 +00:00 • committed by GitHub
commit a14bf85522
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 176 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

12
COMPONENT_INDEX.md
View file

@ -1001,7 +1001,7 @@ export interface DataTableCell {
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
| :------------------ | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
@ -1010,7 +1010,7 @@ export interface DataTableCell {
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey</code> | <code>null</code> | Specify the header key to sort by |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "xl"</code> | <code>"lg"</code> | Set the size of the data table |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
@ -1056,10 +1056,10 @@ export interface DataTableCell {
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "xl"</code> | <code>"lg"</code> | Set the size of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<string &#124; Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
@ -3893,8 +3893,8 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table |
| :------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "md" &#124; "lg" &#124; "xl"</code> | <code>"lg"</code> | Set the size of the table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |

9
docs/src/COMPONENT_API.json
View file

@ -2451,7 +2451,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -2844,7 +2845,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the data table",
"type": "\"compact\" | \"short\" | \"tall\"",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12069,7 +12071,8 @@
"name": "size",
"kind": "let",
"description": "Set the size of the table",
"type": "\"compact\" | \"short\" | \"medium\" | \"tall\"",
"type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"",
"value": "\"lg\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,

103
docs/src/pages/components/DataTable.svx
View file

@ -432,7 +432,7 @@ A maximum height will applied to the datatable to force a scrollbar.
## With toolbar (small size)
<DataTable size="short" title="Load balancers" description="Your organization's active load balancers."
<DataTable size="sm" title="Load balancers" description="Your organization's active load balancers."
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -570,9 +570,64 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}"
/>
## Tall rows
## Extra large rows
<DataTable size="tall"
<DataTable size="xl"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
/>
## Large rows (default)
<DataTable size="lg"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -627,7 +682,7 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
## Medium rows
<DataTable size="medium"
<DataTable size="md"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -680,9 +735,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}"
/>
## Short rows
## Small rows
<DataTable size="short"
<DataTable size="sm"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -735,9 +790,9 @@ Note that in-memory filtering is not optimal for large data sets, where you migh
]}"
/>
## Compact rows
## Extra small rows
<DataTable size="compact"
<DataTable size="xs"
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -1138,9 +1193,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
## Expandable (compact size)
## Expandable (extra small size)
<DataTable size="compact" expandable
<DataTable size="xs" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -1197,9 +1252,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
</svelte:fragment>
</DataTable>
## Expandable (short size)
## Expandable (small size)
<DataTable size="short" expandable
<DataTable size="sm" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -1256,9 +1311,9 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
</svelte:fragment>
</DataTable>
## Expandable (tall size)
## Expandable (extra tall size)
<DataTable size="tall" expandable
<DataTable size="xl" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
@ -1406,14 +1461,22 @@ Pass an object with `"empty"` set to `true` to render an empty table header colu
<DataTableSkeleton showHeader={false} showToolbar={false} />
## Skeleton (tall size)
## Skeleton (extra large size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
<DataTableSkeleton showHeader={false} showToolbar={false} size="xl" />
## Skeleton (short size)
## Skeleton (large size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
<DataTableSkeleton showHeader={false} showToolbar={false} size="lg" />
## Skeleton (compact size)
## Skeleton (medium size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
<DataTableSkeleton showHeader={false} showToolbar={false} size="md" />
## Skeleton (small size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="sm" />
## Skeleton (extra small size)
<DataTableSkeleton showHeader={false} showToolbar={false} size="xs" />

4
docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
View file

@ -9,7 +9,7 @@
{ key: "name", value: "Name" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "overflow", empty: true },
{ key: "overflow", empty: true, columnMenu: true },
];
const rows = [
@ -25,7 +25,7 @@
<DataTable sortable headers="{headers}" rows="{rows}">
<svelte:fragment slot="cell" let:cell>
{#if cell.key === "overflow"}
<OverflowMenu flipped>
<OverflowMenu size="sm" flipped>
<OverflowMenuItem text="Restart" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/loadbalancer-service"

6
src/DataTable/DataTable.svelte
View file

@ -39,9 +39,9 @@
/**
* Set the size of the data table
* @type {"compact" | "short" | "medium" | "tall"}
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/
export let size = undefined;
export let size = "lg";
/** Specify the title of the data table */
export let title = "";
@ -307,7 +307,7 @@
</th>
{/if}
{#if selectable && !batchSelection}
<th scope="col"></th>
<th scope="col" class:bx--table-column-checkbox="{true}"></th>
{/if}
{#if batchSelection && !radio}
<th scope="col" class:bx--table-column-checkbox="{true}">

12
src/DataTable/DataTableSkeleton.svelte
View file

@ -12,9 +12,9 @@
/**
* Set the size of the data table
* @type {"compact" | "short" | "tall"}
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/
export let size = undefined;
export let size = "lg";
/** Set to `true` to apply zebra styles to the datatable rows */
export let zebra = false;
@ -68,9 +68,11 @@
<table
class:bx--skeleton="{true}"
class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--zebra="{zebra}"
on:click
on:mouseover

24
src/DataTable/Table.svelte
View file

@ -1,9 +1,9 @@
<script>
/**
* Set the size of the table
* @type {"compact" | "short" | "medium" | "tall"}
* @type {"xs" | "sm" | "md" | "lg" | "xl"}
*/
export let size = undefined;
export let size = "lg";
/** Set to `true` to use zebra styles */
export let zebra = false;
@ -28,14 +28,16 @@
<section class:bx--data-table_inner-container="{true}" {...$$restProps}>
<table
class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
style="{tableStyle}"
>
<slot />
@ -44,14 +46,16 @@
{:else}
<table
class:bx--data-table="{true}"
class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--md="{size === 'medium'}"
class:bx--data-table--xs="{size === 'xs'}"
class:bx--data-table--sm="{size === 'sm'}"
class:bx--data-table--md="{size === 'md'}"
class:bx--data-table--lg="{size === 'lg'}"
class:bx--data-table--xl="{size === 'xl'}"
class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--sticky-header="{stickyHeader}"
class:bx--data-table--visible-overflow-menu="{true}"
{...$$restProps}
style="{tableStyle}"
>

3
src/DataTable/Toolbar.svelte
View file

@ -25,8 +25,7 @@
bind:this="{ref}"
aria-label="data table toolbar"
class:bx--table-toolbar="{true}"
class:bx--table-toolbar--small="{size === 'sm'}"
class:bx--table-toolbar--normal="{size === 'default'}"
class:bx--table-toolbar--sm="{size === 'sm'}"
style:z-index="{1}"
{...$$restProps}
>

2
src/DataTable/ToolbarMenu.svelte
View file

@ -17,7 +17,7 @@
bind:menuRef
icon="{Settings}"
{...$$restProps}
class="bx--toolbar-action bx--overflow-menu {$$restProps.class}"
class="bx--toolbar-action bx--overflow-menu bx--btn bx--btn--primary {$$restProps.class}"
flipped
>
<slot />

1
src/DataTable/ToolbarSearch.svelte
View file

@ -99,6 +99,7 @@
disabled="{disabled}"
{...$$restProps}
searchClass="{classes} {$$restProps.class}"
size="lg"
bind:ref
bind:value
on:clear

18
tests/DataTable.test.svelte
View file

@ -137,7 +137,7 @@
</DataTable>
<DataTable
size="short"
size="sm"
title="Load balancers"
description="Your organization's active load balancers."
headers="{headers}"
@ -160,11 +160,13 @@
<DataTable zebra headers="{headers}" rows="{rows}" />
<DataTable size="tall" headers="{headers}" rows="{rows}" />
<DataTable size="xl" headers="{headers}" rows="{rows}" />
<DataTable size="short" headers="{headers}" rows="{rows}" />
<DataTable size="md" headers="{headers}" rows="{rows}" />
<DataTable size="compact" headers="{headers}" rows="{rows}" />
<DataTable size="sm" headers="{headers}" rows="{rows}" />
<DataTable size="xs" headers="{headers}" rows="{rows}" />
<DataTable sortable headers="{headers}" rows="{rows}" />
@ -279,8 +281,10 @@
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="tall" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xl" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="md" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="sm" />
<DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="xs" />

4
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -58,9 +58,9 @@ export interface DataTableProps extends RestProps {
/**
* Set the size of the data table
* @default undefined
* @default "lg"
*/
size?: "compact" | "short" | "medium" | "tall";
size?: "xs" | "sm" | "md" | "lg" | "xl";
/**
* Specify the title of the data table

4
types/DataTable/DataTableSkeleton.svelte.d.ts vendored
View file

@ -21,9 +21,9 @@ export interface DataTableSkeletonProps extends DataTableHeader, RestProps {
/**
* Set the size of the data table
* @default undefined
* @default "lg"
*/
size?: "compact" | "short" | "tall";
size?: "xs" | "sm" | "md" | "lg" | "xl";
/**
* Set to `true` to apply zebra styles to the datatable rows

4
types/DataTable/Table.svelte.d.ts vendored
View file

@ -6,9 +6,9 @@ type RestProps = SvelteHTMLElements["section"];
export interface TableProps extends RestProps {
/**
* Set the size of the table
* @default undefined
* @default "lg"
*/
size?: "compact" | "short" | "medium" | "tall";
size?: "xs" | "sm" | "md" | "lg" | "xl";
/**
* Set to `true` to use zebra styles