mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
chore: format files with Prettier 3
This commit is contained in:
Eric Liu
parent
1dcd09bd98
commit
8e996dc683
391 changed files with 3725 additions and 3785 deletions
|
|
@ -227,7 +227,7 @@
|
|||
|
||||
$: expandedRows = expandedRowIds.reduce(
|
||||
(a, id) => ({ ...a, [id]: true }),
|
||||
{}
|
||||
{},
|
||||
);
|
||||
|
||||
let refSelectAll = null;
|
||||
|
|
@ -235,10 +235,10 @@
|
|||
$: batchSelectedIds.set(selectedRowIds);
|
||||
$: rowIds = $tableRows.map((row) => row.id);
|
||||
$: expandableRowIds = rowIds.filter(
|
||||
(id) => !nonExpandableRowIds.includes(id)
|
||||
(id) => !nonExpandableRowIds.includes(id),
|
||||
);
|
||||
$: selectableRowIds = rowIds.filter(
|
||||
(id) => !nonSelectableRowIds.includes(id)
|
||||
(id) => !nonSelectableRowIds.includes(id),
|
||||
);
|
||||
$: selectAll =
|
||||
selectableRowIds.length > 0 &&
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
$: displayedSortedRows = getDisplayedRows(sortedRows, page, pageSize);
|
||||
|
||||
$: hasCustomHeaderWidth = headers.some(
|
||||
(header) => header.width || header.minWidth
|
||||
(header) => header.width || header.minWidth,
|
||||
);
|
||||
|
||||
/** @type {(header: DataTableHeader) => undefined | string} */
|
||||
|
|
@ -314,16 +314,16 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<TableContainer useStaticWidth="{useStaticWidth}" {...$$restProps}>
|
||||
<TableContainer {useStaticWidth} {...$$restProps}>
|
||||
{#if title || $$slots.title || description || $$slots.description}
|
||||
<div class:bx--data-table-header="{true}">
|
||||
<div class:bx--data-table-header={true}>
|
||||
{#if title || $$slots.title}
|
||||
<h4 class:bx--data-table-header__title="{true}">
|
||||
<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}">
|
||||
<p class:bx--data-table-header__description={true}>
|
||||
<slot name="description">{description}</slot>
|
||||
</p>
|
||||
{/if}
|
||||
|
|
@ -331,31 +331,31 @@
|
|||
{/if}
|
||||
<slot />
|
||||
<Table
|
||||
zebra="{zebra}"
|
||||
size="{size}"
|
||||
stickyHeader="{stickyHeader}"
|
||||
sortable="{sortable}"
|
||||
useStaticWidth="{useStaticWidth}"
|
||||
tableStyle="{hasCustomHeaderWidth && 'table-layout: fixed'}"
|
||||
{zebra}
|
||||
{size}
|
||||
{stickyHeader}
|
||||
{sortable}
|
||||
{useStaticWidth}
|
||||
tableStyle={hasCustomHeaderWidth && "table-layout: fixed"}
|
||||
>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#if expandable}
|
||||
<th
|
||||
scope="col"
|
||||
class:bx--table-expand="{true}"
|
||||
data-previous-value="{expanded ? 'collapsed' : undefined}"
|
||||
class:bx--table-expand={true}
|
||||
data-previous-value={expanded ? "collapsed" : undefined}
|
||||
>
|
||||
{#if batchExpansion}
|
||||
<button
|
||||
type="button"
|
||||
class:bx--table-expand__button="{true}"
|
||||
on:click="{() => {
|
||||
class:bx--table-expand__button={true}
|
||||
on:click={() => {
|
||||
expanded = !expanded;
|
||||
expandedRowIds = expanded ? expandableRowIds : [];
|
||||
|
||||
dispatch('click:header--expand', { expanded });
|
||||
}}"
|
||||
dispatch("click:header--expand", { expanded });
|
||||
}}
|
||||
>
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
|
|
@ -366,14 +366,14 @@
|
|||
<th scope="col"></th>
|
||||
{/if}
|
||||
{#if batchSelection && !radio}
|
||||
<th scope="col" class:bx--table-column-checkbox="{true}">
|
||||
<th scope="col" class:bx--table-column-checkbox={true}>
|
||||
<InlineCheckbox
|
||||
bind:ref="{refSelectAll}"
|
||||
bind:ref={refSelectAll}
|
||||
aria-label="Select all rows"
|
||||
checked="{selectAll}"
|
||||
indeterminate="{indeterminate}"
|
||||
on:change="{(e) => {
|
||||
dispatch('click:header--select', {
|
||||
checked={selectAll}
|
||||
{indeterminate}
|
||||
on:change={(e) => {
|
||||
dispatch("click:header--select", {
|
||||
indeterminate,
|
||||
selected: !indeterminate && e.target.checked,
|
||||
});
|
||||
|
|
@ -390,36 +390,36 @@
|
|||
} else {
|
||||
selectedRowIds = [];
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
</th>
|
||||
{/if}
|
||||
{#each headers as header (header.key)}
|
||||
{#if header.empty}
|
||||
<th scope="col" style="{formatHeaderWidth(header)}"></th>
|
||||
<th scope="col" style={formatHeaderWidth(header)}></th>
|
||||
{:else}
|
||||
<TableHeader
|
||||
id="{header.key}"
|
||||
style="{formatHeaderWidth(header)}"
|
||||
sortable="{sortable && header.sort !== false}"
|
||||
sortDirection="{sortKey === header.key ? sortDirection : 'none'}"
|
||||
active="{sortKey === header.key}"
|
||||
on:click="{() => {
|
||||
dispatch('click', { header });
|
||||
id={header.key}
|
||||
style={formatHeaderWidth(header)}
|
||||
sortable={sortable && header.sort !== false}
|
||||
sortDirection={sortKey === header.key ? sortDirection : "none"}
|
||||
active={sortKey === header.key}
|
||||
on:click={() => {
|
||||
dispatch("click", { header });
|
||||
|
||||
if (header.sort === false) {
|
||||
dispatch('click:header', { header });
|
||||
dispatch("click:header", { header });
|
||||
} else {
|
||||
let currentSortDirection =
|
||||
sortKey === header.key ? sortDirection : 'none';
|
||||
sortKey === header.key ? sortDirection : "none";
|
||||
sortDirection = sortDirectionMap[currentSortDirection];
|
||||
sortKey =
|
||||
sortDirection === 'none' ? null : thKeys[header.key];
|
||||
dispatch('click:header', { header, sortDirection });
|
||||
sortDirection === "none" ? null : thKeys[header.key];
|
||||
dispatch("click:header", { header, sortDirection });
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<slot name="cell-header" header="{header}">{header.value}</slot>
|
||||
<slot name="cell-header" {header}>{header.value}</slot>
|
||||
</TableHeader>
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
@ -428,8 +428,8 @@
|
|||
<TableBody>
|
||||
{#each sorting ? displayedSortedRows : displayedRows as row, i (row.id)}
|
||||
<TableRow
|
||||
data-row="{row.id}"
|
||||
data-parent-row="{expandable ? true : undefined}"
|
||||
data-row={row.id}
|
||||
data-parent-row={expandable ? true : undefined}
|
||||
class="{selectedRowIds.includes(row.id)
|
||||
? 'bx--data-table--selected'
|
||||
: ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
|
||||
|
|
@ -437,54 +437,54 @@
|
|||
: ''} {expandable && parentRowId === row.id
|
||||
? 'bx--expandable-row--hover'
|
||||
: ''}"
|
||||
on:click="{({ target }) => {
|
||||
on:click={({ target }) => {
|
||||
// forgo "click", "click:row" events if target
|
||||
// resembles an overflow menu, a checkbox, or radio button
|
||||
if (
|
||||
[...target.classList].some((name) =>
|
||||
/^bx--(overflow-menu|checkbox|radio-button)/.test(name)
|
||||
/^bx--(overflow-menu|checkbox|radio-button)/.test(name),
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
dispatch('click', { row });
|
||||
dispatch('click:row', row);
|
||||
}}"
|
||||
on:mouseenter="{() => {
|
||||
dispatch('mouseenter:row', row);
|
||||
}}"
|
||||
on:mouseleave="{() => {
|
||||
dispatch('mouseleave:row', row);
|
||||
}}"
|
||||
dispatch("click", { row });
|
||||
dispatch("click:row", row);
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
dispatch("mouseenter:row", row);
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
dispatch("mouseleave:row", row);
|
||||
}}
|
||||
>
|
||||
{#if expandable}
|
||||
<TableCell
|
||||
class="bx--table-expand"
|
||||
headers="expand"
|
||||
data-previous-value="{!nonExpandableRowIds.includes(row.id) &&
|
||||
data-previous-value={!nonExpandableRowIds.includes(row.id) &&
|
||||
expandedRows[row.id]
|
||||
? 'collapsed'
|
||||
: undefined}"
|
||||
? "collapsed"
|
||||
: undefined}
|
||||
>
|
||||
{#if !nonExpandableRowIds.includes(row.id)}
|
||||
<button
|
||||
type="button"
|
||||
class:bx--table-expand__button="{true}"
|
||||
aria-label="{expandedRows[row.id]
|
||||
? 'Collapse current row'
|
||||
: 'Expand current row'}"
|
||||
on:click|stopPropagation="{() => {
|
||||
class:bx--table-expand__button={true}
|
||||
aria-label={expandedRows[row.id]
|
||||
? "Collapse current row"
|
||||
: "Expand current row"}
|
||||
on:click|stopPropagation={() => {
|
||||
const rowExpanded = !!expandedRows[row.id];
|
||||
|
||||
expandedRowIds = rowExpanded
|
||||
? expandedRowIds.filter((id) => id !== row.id)
|
||||
: [...expandedRowIds, row.id];
|
||||
|
||||
dispatch('click:row--expand', {
|
||||
dispatch("click:row--expand", {
|
||||
row,
|
||||
expanded: !rowExpanded,
|
||||
});
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<ChevronRight class="bx--table-expand__svg" />
|
||||
</button>
|
||||
|
|
@ -493,34 +493,34 @@
|
|||
{/if}
|
||||
{#if selectable}
|
||||
<td
|
||||
class:bx--table-column-checkbox="{true}"
|
||||
class:bx--table-column-radio="{radio}"
|
||||
class:bx--table-column-checkbox={true}
|
||||
class:bx--table-column-radio={radio}
|
||||
>
|
||||
{#if !nonSelectableRowIds.includes(row.id)}
|
||||
{#if radio}
|
||||
<RadioButton
|
||||
name="select-row-{row.id}"
|
||||
checked="{selectedRowIds.includes(row.id)}"
|
||||
on:change="{() => {
|
||||
checked={selectedRowIds.includes(row.id)}
|
||||
on:change={() => {
|
||||
selectedRowIds = [row.id];
|
||||
dispatch('click:row--select', { row, selected: true });
|
||||
}}"
|
||||
dispatch("click:row--select", { row, selected: true });
|
||||
}}
|
||||
/>
|
||||
{:else}
|
||||
<InlineCheckbox
|
||||
name="select-row-{row.id}"
|
||||
checked="{selectedRowIds.includes(row.id)}"
|
||||
on:change="{() => {
|
||||
checked={selectedRowIds.includes(row.id)}
|
||||
on:change={() => {
|
||||
if (selectedRowIds.includes(row.id)) {
|
||||
selectedRowIds = selectedRowIds.filter(
|
||||
(id) => id !== row.id
|
||||
(id) => id !== row.id,
|
||||
);
|
||||
dispatch('click:row--select', { row, selected: false });
|
||||
dispatch("click:row--select", { row, selected: false });
|
||||
} else {
|
||||
selectedRowIds = [...selectedRowIds, row.id];
|
||||
dispatch('click:row--select', { row, selected: true });
|
||||
dispatch("click:row--select", { row, selected: true });
|
||||
}
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
@ -528,31 +528,19 @@
|
|||
{/if}
|
||||
{#each tableCellsByRowId[row.id] as cell, j (cell.key)}
|
||||
{#if headers[j].empty}
|
||||
<td class:bx--table-column-menu="{headers[j].columnMenu}">
|
||||
<slot
|
||||
name="cell"
|
||||
row="{row}"
|
||||
cell="{cell}"
|
||||
rowIndex="{i}"
|
||||
cellIndex="{j}"
|
||||
>
|
||||
<td class:bx--table-column-menu={headers[j].columnMenu}>
|
||||
<slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
|
||||
{cell.display ? cell.display(cell.value, row) : cell.value}
|
||||
</slot>
|
||||
</td>
|
||||
{:else}
|
||||
<TableCell
|
||||
on:click="{() => {
|
||||
dispatch('click', { row, cell });
|
||||
dispatch('click:cell', cell);
|
||||
}}"
|
||||
on:click={() => {
|
||||
dispatch("click", { row, cell });
|
||||
dispatch("click:cell", cell);
|
||||
}}
|
||||
>
|
||||
<slot
|
||||
name="cell"
|
||||
row="{row}"
|
||||
cell="{cell}"
|
||||
rowIndex="{i}"
|
||||
cellIndex="{j}"
|
||||
>
|
||||
<slot name="cell" {row} {cell} rowIndex={i} cellIndex={j}>
|
||||
{cell.display ? cell.display(cell.value, row) : cell.value}
|
||||
</slot>
|
||||
</TableCell>
|
||||
|
|
@ -563,22 +551,22 @@
|
|||
{#if expandable}
|
||||
<tr
|
||||
data-child-row
|
||||
class:bx--expandable-row="{true}"
|
||||
on:mouseenter="{() => {
|
||||
class:bx--expandable-row={true}
|
||||
on:mouseenter={() => {
|
||||
if (nonExpandableRowIds.includes(row.id)) return;
|
||||
parentRowId = row.id;
|
||||
}}"
|
||||
on:mouseleave="{() => {
|
||||
}}
|
||||
on:mouseleave={() => {
|
||||
if (nonExpandableRowIds.includes(row.id)) return;
|
||||
parentRowId = null;
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
{#if expandedRows[row.id] && !nonExpandableRowIds.includes(row.id)}
|
||||
<TableCell
|
||||
colspan="{selectable ? headers.length + 2 : headers.length + 1}"
|
||||
colspan={selectable ? headers.length + 2 : headers.length + 1}
|
||||
>
|
||||
<div class:bx--child-row-inner-container="{true}">
|
||||
<slot name="expanded-row" row="{row}" />
|
||||
<div class:bx--child-row-inner-container={true}>
|
||||
<slot name="expanded-row" {row} />
|
||||
</div>
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue