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

fix(data-table): fix JSDoc type for expandableRowIds

Browse source
This commit is contained in:
Eric Liu 2020-10-17 13:45:15 -07:00
commit 1a809c9c3a
6 changed files with 178 additions and 2703 deletions
Download patch file Download diff file Expand all files Collapse all files

27
COMPONENT_INDEX.md
View file

@ -980,20 +980,23 @@ import { DataTable } from "carbon-components-svelte";
### Props ### Props
| Prop name | Type | Default value | Description | | Prop name | Type | Default value | Description |
| :----------- | :-------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------- | | :------------- | :-------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------- |
| headers | <code>{key: string; value: string;}[]</code> | -- | Specify the data table headers. | | headers | <code>{key: string; value: string;}[]</code> | -- | Specify the data table headers. |
| rows | <code>Object[]</code> | -- | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. | | rows | <code>Object[]</code> | -- | Specify the rows the data table should render. keys defined in `headers` are used for the row ids. |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table. | | size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table. |
| title | <code>string</code> | `""` | Specify the title of the data table. | | title | <code>string</code> | `""` | Specify the title of the data table. |
| description | <code>string</code> | `""` | Specify the description of the data table. | | description | <code>string</code> | `""` | Specify the description of the data table. |
| zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. | | zebra | <code>boolean</code> | `false` | Set to `true` to use zebra styles. |
| sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. | | sortable | <code>boolean</code> | `false` | Set to `true` for the sortable variant. |
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. | | expandable | <code>boolean</code> | `false` | Set to `true` for the expandable variant. Automatically set to `true` if `batchExpansion` is `true`. |
| batchExpansion | <code>boolean</code> | `false` | Set to `true` to enable batch expansion. |
| expandedRowIds | <code>string[]</code> | -- | Specify the row ids to be expanded. |
| stickyHeader | <code>boolean</code> | `false` | Set to `true` to enable a sticky header. |
### Slots ### Slots
- `<slot>...</slot>` - `<slot name="expanded-row">...</slot>`
### Forwarded events ### Forwarded events
@ -1001,9 +1004,11 @@ No forwarded events.
### Dispatched events ### Dispatched events
- `on:click:header--expand`
- `on:click` - `on:click`
- `on:click:header` - `on:click:header`
- `on:click:row` - `on:click:row`
- `on:click:row--expand`
- `on:click:cell` - `on:click:cell`
--- ---

2705
docs/src/PUBLIC_API.json
View file

File diff suppressed because it is too large Load diff

126
docs/src/components/ComponentApi.svelte
View file

@ -55,68 +55,72 @@
<h3 id="props">Props</h3> <h3 id="props">Props</h3>
<div class="overflow"> {#if component.props.length > 0}
<StructuredList <div class="overflow">
style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))" <StructuredList
> style="margin-left: calc(-1 * var(--cds-spacing-05)); margin-right: calc(-1 * var(--cds-spacing-05))"
<StructuredListHead> >
<StructuredListRow head> <StructuredListHead>
<StructuredListCell head>Prop name</StructuredListCell> <StructuredListRow head>
<StructuredListCell head>Type</StructuredListCell> <StructuredListCell head>Prop name</StructuredListCell>
<StructuredListCell head noWrap>Default value</StructuredListCell> <StructuredListCell head>Type</StructuredListCell>
<StructuredListCell head>Description</StructuredListCell> <StructuredListCell head noWrap>Default value</StructuredListCell>
</StructuredListRow> <StructuredListCell head>Description</StructuredListCell>
</StructuredListHead>
<StructuredListBody>
{#each component.props as prop}
<StructuredListRow>
<StructuredListCell noWrap>
<InlineSnippet code="{prop[0]}" />
</StructuredListCell>
<StructuredListCell>
{#each prop[1].type.split(' | ') as type, i (type)}
<div
class="cell"
style="z-index: {prop[1].type.split(' | ').length - i}"
>
{#if type.startsWith('typeof')}
<TooltipDefinition
direction="top"
align="start"
tooltipText="{`From "carbon-icons-svelte"`}"
>
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith('HTML')}
<Link
href="{mdn_api}{type}"
target="_blank"
style="white-space: nowrap"
>
{type}
<Launch16 />
</Link>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith('(')}
<code>{type}</code>
{:else}
<InlineSnippet code="{type}" />
{/if}
</div>
{/each}
</StructuredListCell>
<StructuredListCell><code>{prop[1].value}</code></StructuredListCell>
<StructuredListCell>
{#each prop[1].description.split('\n') as line}
<div class="description">{line}.</div>
{/each}
</StructuredListCell>
</StructuredListRow> </StructuredListRow>
{/each} </StructuredListHead>
</StructuredListBody> <StructuredListBody>
</StructuredList> {#each component.props as prop}
</div> <StructuredListRow>
<StructuredListCell noWrap>
<InlineSnippet code="{prop[0]}" />
</StructuredListCell>
<StructuredListCell>
{#each prop[1].type.split(' | ') as type, i (type)}
<div
class="cell"
style="z-index: {prop[1].type.split(' | ').length - i}"
>
{#if type.startsWith('typeof')}
<TooltipDefinition
direction="top"
align="start"
tooltipText="{`From "carbon-icons-svelte"`}"
>
Carbon Svelte icon
</TooltipDefinition>
{:else if type.startsWith('HTML')}
<Link
href="{mdn_api}{type}"
target="_blank"
style="white-space: nowrap"
>
{type}
<Launch16 />
</Link>
{:else if type in typeMap}
<code>{typeMap[type]}</code>
{:else if type.startsWith('(')}
<code>{type}</code>
{:else}
<InlineSnippet code="{type}" />
{/if}
</div>
{/each}
</StructuredListCell>
<StructuredListCell>
<code>{prop[1].value}</code>
</StructuredListCell>
<StructuredListCell>
{#each prop[1].description.split('\n') as line}
<div class="description">{line}.</div>
{/each}
</StructuredListCell>
</StructuredListRow>
{/each}
</StructuredListBody>
</StructuredList>
</div>
{:else}No props.{/if}
<h3 id="slots">Slots</h3> <h3 id="slots">Slots</h3>
{#if component.slots.length > 0} {#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03"> <UnorderedList class="my-layout-01-03">

1
docs/src/layouts/Recipe.svelte
View file

@ -13,7 +13,6 @@
import { theme } from "../store"; import { theme } from "../store";
export let component = $page.title; export let component = $page.title;
export let source = "";
metatags.title = $page.title; metatags.title = $page.title;

2
src/DataTable/DataTable.svelte
View file

@ -57,7 +57,7 @@
/** /**
* Specify the row ids to be expanded * Specify the row ids to be expanded
* @type {boolean} [expandedRowIds=[]] * @type {string[]} [expandedRowIds=[]]
*/ */
export let expandedRowIds = []; export let expandedRowIds = [];

20
types/index.d.ts vendored
View file

@ -822,6 +822,24 @@ export class DataTable extends CarbonSvelteComponent {
*/ */
sortable?: boolean; sortable?: boolean;
/**
* Set to `true` for the expandable variant
* Automatically set to `true` if `batchExpansion` is `true`
* @default false
*/
expandable?: boolean;
/**
* Set to `true` to enable batch expansion
* @default false
*/
batchExpansion?: boolean;
/**
* Specify the row ids to be expanded
*/
expandedRowIds?: string[];
/** /**
* Set to `true` to enable a sticky header * Set to `true` to enable a sticky header
* @default false * @default false
@ -829,7 +847,7 @@ export class DataTable extends CarbonSvelteComponent {
stickyHeader?: boolean; stickyHeader?: boolean;
}; };
$$slot_def: { default: { props: any } }; $$slot_def: { "expanded-row": { row: any } };
} }
export class DataTableSkeleton extends CarbonSvelteComponent { export class DataTableSkeleton extends CarbonSvelteComponent {