mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Various features/fixes (#727)

Browse source 
* fix(data-table): export useStaticWidth prop

* docs(data-table): add static width example

* fix(data-table): do not render table header if title/description not provided

* feat(modal): dispatch "click:button--primary" as an alias to "submit"

* test: update DataTable types test

* test(modal): update modal type tests

* docs(data-table): add clear reminder to key headers/rows
This commit is contained in:
Eric Liu 2021-07-05 13:22:56 -07:00 • committed by GitHub
commit 0a69f8ec74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 128 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

25
COMPONENT_INDEX.md
View file

@ -685,17 +685,18 @@ None.
### Events
| Event name | Type | Detail |
| :------------ | :--------- | :------------------------------ |
| transitionend | dispatched | <code>{ open: boolean; }</code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
| Event name | Type | Detail |
| :-------------------- | :--------- | :------------------------------ |
| transitionend | dispatched | <code>{ open: boolean; }</code> |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |
## `Content`
@ -958,6 +959,7 @@ export interface DataTableCell {
| radio | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| stickyHeader | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
### Slots
@ -2269,6 +2271,7 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| submit | dispatched | -- |
| click:button--primary | dispatched | -- |
| close | dispatched | -- |
| open | dispatched | -- |

12
docs/src/COMPONENT_API.json
View file

@ -1530,6 +1530,7 @@
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "click:button--primary" },
{ "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" }
],
@ -2095,6 +2096,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "useStaticWidth",
"kind": "let",
"description": "Set to `true` to use static width",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [
@ -5500,6 +5511,7 @@
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "click:button--primary" },
{ "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" }
],

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

@ -3,15 +3,23 @@ components: ["DataTable", "Toolbar", "ToolbarContent", "ToolbarSearch", "Toolbar
---
<script>
import { DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import { InlineNotification, DataTable, DataTableSkeleton, Toolbar, ToolbarContent, ToolbarSearch, ToolbarMenu, ToolbarMenuItem, Button, Link } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import Preview from "../../components/Preview.svelte";
</script>
`DataTable` is keyed for both rendering and sorting purposes.
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>headers</code> object must have a unique "key" property.</div>
</InlineNotification>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">Every <code>rows</code> object must have a unique "id" property.</div>
</InlineNotification>
### Default
The `DataTable` is keyed for both rendering and sorting. You must define a "key" value per object in the `headers` property and an "id" value in `rows`.
<DataTable
headers="{[
{ key: "name", value: "Name" },
@ -65,6 +73,63 @@ The `DataTable` is keyed for both rendering and sorting. You must define a "key"
]}"
/>
### Static width
Set `useStaticWidth` to `true` to render the table with a width of "auto" instead of "100%".
<DataTable useStaticWidth
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"
},
]}"
/>
### Slotted cells
Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.

1
src/ComposedModal/ComposedModal.svelte
View file

@ -53,6 +53,7 @@
},
submit: () => {
dispatch("submit");
dispatch("click:button--primary");
},
declareRef: (ref) => {
buttonRef = ref;

30
src/DataTable/DataTable.svelte
View file

@ -91,6 +91,9 @@
/** Set to `true` to enable a sticky header */
export let stickyHeader = false;
/** Set to `true` to use static width */
export let useStaticWidth = false;
import { createEventDispatcher, setContext } from "svelte";
import { writable, derived } from "svelte/store";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
@ -203,24 +206,27 @@
</script>
<TableContainer {...$$restProps}>
<div class:bx--data-table-header="{true}">
{#if title || $$slots.title}
<h4 class:bx--data-table-header__title="{true}">
<slot name="title">{title}</slot>
</h4>
{/if}
{#if description || $$slots.description}
<p class:bx--data-table-header__description="{true}">
<slot name="description">{description}</slot>
</p>
{/if}
</div>
{#if title || $$slots.title || description || $$slots.description}
<div class:bx--data-table-header="{true}">
{#if title || $$slots.title}
<h4 class:bx--data-table-header__title="{true}">
<slot name="title">{title}</slot>
</h4>
{/if}
{#if description || $$slots.description}
<p class:bx--data-table-header__description="{true}">
<slot name="description">{description}</slot>
</p>
{/if}
</div>
{/if}
<slot />
<Table
zebra="{zebra}"
size="{size}"
stickyHeader="{stickyHeader}"
sortable="{sortable}"
useStaticWidth="{useStaticWidth}"
>
<TableHead>
<TableRow>

1
src/Modal/Modal.svelte
View file

@ -297,6 +297,7 @@
disabled="{primaryButtonDisabled}"
on:click="{() => {
dispatch('submit');
dispatch('click:button--primary');
}}"
>
{primaryButtonText}

6
tests/ComposedModal.test.svelte
View file

@ -10,7 +10,7 @@
let checked = false;
</script>
<ComposedModal open>
<ComposedModal open on:close on:click:button--primary>
<ModalHeader title="Confirm changes" />
<ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked />
@ -19,6 +19,8 @@
primaryButtonText="Proceed"
primaryButtonDisabled="{!checked}"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Duplicate' }]}"
on:click:button--secondary="{({ detail }) => {}}"
on:click:button--secondary="{({ detail }) => {
console.log(detail);
}}"
/>
</ComposedModal>

1
tests/DataTable.test.svelte
View file

@ -98,6 +98,7 @@
description="Your organization's active load balancers."
headers="{headers}"
rows="{rows}"
useStaticWidth
/>
<DataTable

1
tests/Modal.test.svelte
View file

@ -16,6 +16,7 @@
on:open
on:close
on:submit
on:click:button--primary
>
<p>Create a new Cloudant database in the US South region.</p>
</Modal>

1
types/ComposedModal/ComposedModal.d.ts vendored
View file

@ -55,6 +55,7 @@ export default class ComposedModal extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>;
["click:button--primary"]: CustomEvent<any>;
close: CustomEvent<any>;
open: CustomEvent<any>;
},

6
types/DataTable/DataTable.d.ts vendored
View file

@ -129,6 +129,12 @@ export interface DataTableProps
* @default false
*/
stickyHeader?: boolean;
/**
* Set to `true` to use static width
* @default false
*/
useStaticWidth?: boolean;
}
export default class DataTable extends SvelteComponentTyped<

1
types/Modal/Modal.d.ts vendored
View file

@ -132,6 +132,7 @@ export default class Modal extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
submit: CustomEvent<any>;
["click:button--primary"]: CustomEvent<any>;
close: CustomEvent<any>;
open: CustomEvent<any>;
},