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

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

151
src/components/DataTable/DataTable.Story.svelte
View file

@ -1,151 +0,0 @@
<script>
export let story = undefined;
import DataTable from "./DataTable.svelte";
import Table from "./Table.svelte";
import TableBody from "./TableBody.svelte";
import TableCell from "./TableCell.svelte";
import TableContainer from "./TableContainer.svelte";
import TableHead from "./TableHead.svelte";
import TableHeader from "./TableHeader.svelte";
import TableRow from "./TableRow.svelte";
const rows = [
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Kevins VM Groups",
status: "Disabled"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Maureens VM Groups",
status: "Starting"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Andrews VM Groups",
status: "Active"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin",
attached_groups: "Marcs VM Groups",
status: "Disabled"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin",
attached_groups: "Mels VM Groups",
status: "Starting"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation",
attached_groups: "Ronjas VM Groups",
status: "Active"
}
];
const headers = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "attached_groups", value: "Attached Groups" },
{ key: "status", value: "Status" }
];
$: sortable = true;
</script>
{#if story === 'composed'}
<DataTable {...$$props} {rows} {headers} let:props>
<TableContainer
title="DataTable"
description="With default options"
{...props.getTableContainerProps()}>
<Table {...props.getTableProps()}>
<TableHead>
<TableRow>
{#each props.headers as header, i (header.key)}
<TableHeader {...props.getHeaderProps({ header })}>
{header.header}
</TableHeader>
{/each}
</TableRow>
</TableHead>
<TableBody>
{#each props.rows as row, i}
<TableRow {...props.getRowProps({ row })}>
{#each row.cells as cell, j}
<TableCell>{cell.value}</TableCell>
{/each}
</TableRow>
{/each}
</TableBody>
</Table>
</TableContainer>
</DataTable>
{:else if story === 'sortable'}
<DataTable
bind:sortable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{:else}
<DataTable
title={$$props.title}
description={$$props.description}
zebra={$$props.zebra}
size={$$props.size}
stickyHeader={$$props.stickyHeader}
on:click={({ detail }) => {
console.log('on:click', detail);
}}
on:click:header={({ detail }) => {
console.log('on:click:header', detail);
}}
on:click:row={({ detail }) => {
console.log('on:click:row', detail);
}}
on:click:cell={({ detail }) => {
console.log('on:click:cell', detail);
}}
{rows}
{headers} />
{/if}