@human-kit/svelte-components 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Table } from '../index';
+
+	let currentColumnWidths = $state<Map<string, number> | undefined>(undefined);
+
+	const checkboxStyle =
+		'display:inline-flex;height:20px;width:20px;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:4px;';
+	const indicatorStyle =
+		'display:inline-flex;height:14px;width:14px;align-items:center;justify-content:center;';
+</script>
+
+<div style="width: 760px;">
+	<Table.Root
+		aria-label="Resizable table with selection column"
+		selectionMode="multiple"
+		bind:columnWidths={currentColumnWidths}
+		class="min-w-full border-collapse text-left"
+	>
+		<Table.Header>
+			<Table.Row>
+				<Table.Column id="selection" textValue="Selection" width={64} minWidth={64} maxWidth={64}>
+					<Table.ColumnHeaderCell data-testid="selection-header-cell">
+						<Table.Checkbox style={checkboxStyle} data-testid="selection-header-checkbox">
+							<Table.CheckboxIndicator style={indicatorStyle}>
+								<svg aria-hidden="true" viewBox="0 0 16 16" style="height:14px;width:14px;">
+									<path
+										d="M3.75 8.5 6.75 11.5 12.25 5.5"
+										fill="none"
+										stroke="currentColor"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										stroke-width="2"
+									/>
+								</svg>
+							</Table.CheckboxIndicator>
+						</Table.Checkbox>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="email" isRowHeader textValue="Email" minWidth={120}>
+					<Table.ColumnHeaderCell>
+						<div class="flex items-center justify-between gap-3">
+							<span>Email</span>
+							<Table.ColumnResizer
+								data-testid="selection-email-resizer"
+								class="inline-flex w-3 cursor-col-resize justify-center"
+							/>
+						</div>
+					</Table.ColumnHeaderCell>
+				</Table.Column>
+				<Table.Column id="group" textValue="Group" minWidth={100} maxWidth={260}>
+					<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+				</Table.Column>
+			</Table.Row>
+		</Table.Header>
+
+		<Table.Body>
+			<Table.Row id="danilo">
+				<Table.Cell>
+					<Table.Checkbox style={checkboxStyle} data-testid="selection-row-checkbox">
+						<Table.CheckboxIndicator style={indicatorStyle}>
+							<svg aria-hidden="true" viewBox="0 0 16 16" style="height:14px;width:14px;">
+								<path
+									d="M3.75 8.5 6.75 11.5 12.25 5.5"
+									fill="none"
+									stroke="currentColor"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+								/>
+							</svg>
+						</Table.CheckboxIndicator>
+					</Table.Checkbox>
+				</Table.Cell>
+				<Table.Cell>danilo@example.com</Table.Cell>
+				<Table.Cell>Developer</Table.Cell>
+			</Table.Row>
+		</Table.Body>
+	</Table.Root>
+</div>
+
+<output data-testid="selection-column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths ?? new Map()))}</output
+>

package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerSelectionColumnTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerSelectionColumnTest = ReturnType<typeof TableColumnResizerSelectionColumnTest>;
+export default TableColumnResizerSelectionColumnTest;

package/dist/table/column-resizer/table-column-resizer-test.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Table } from '../index';
+	import type { TableSortDescriptor } from '../root/context';
+
+	let currentColumnWidths = $state<Map<string, number>>(
+		new Map([
+			['email', 200],
+			['group', 160]
+		])
+	);
+	let currentSortDescriptor = $state<TableSortDescriptor | undefined>(undefined);
+	let resizeStartColumnId = $state('');
+	let resizeEndWidths = $state<Record<string, number>>({});
+</script>
+
+<Table.Root
+	aria-label="Resizable users table"
+	bind:columnWidths={currentColumnWidths}
+	bind:sortDescriptor={currentSortDescriptor}
+	onColumnResizeStart={(columnId) => {
+		resizeStartColumnId = columnId;
+	}}
+	onColumnResizeEnd={(widths) => {
+		resizeEndWidths = Object.fromEntries(widths);
+	}}
+>
+	<Table.Header>
+		<Table.Row>
+			<Table.Column id="email" isRowHeader textValue="Email" minWidth={120}>
+				<Table.ColumnHeaderCell data-testid="email-header-cell">
+					<div class="flex items-center justify-between gap-3">
+						<span>Email</span>
+						<Table.ColumnResizer
+							data-testid="email-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+			<Table.Column id="group" allowsSorting textValue="Group" minWidth={100} maxWidth={260}>
+				<Table.ColumnHeaderCell data-testid="group-header-cell">
+					<div class="flex items-center justify-between gap-3">
+						<span>Group</span>
+						<Table.ColumnResizer
+							data-testid="group-resizer"
+							class="inline-flex w-3 cursor-col-resize justify-center"
+						/>
+					</div>
+				</Table.ColumnHeaderCell>
+			</Table.Column>
+		</Table.Row>
+	</Table.Header>
+
+	<Table.Body>
+		<Table.Row id="danilo">
+			<Table.Cell>danilo.fernandez+workspace-owner@example.com</Table.Cell>
+			<Table.Cell>Developer</Table.Cell>
+		</Table.Row>
+		<Table.Row id="zahra">
+			<Table.Cell>zahra@example.com</Table.Cell>
+			<Table.Cell>Admin</Table.Cell>
+		</Table.Row>
+	</Table.Body>
+</Table.Root>
+
+<output data-testid="column-widths"
+	>{JSON.stringify(Object.fromEntries(currentColumnWidths))}</output
+>
+<output data-testid="sort-descriptor"
+	>{currentSortDescriptor
+		? `${currentSortDescriptor.column}:${currentSortDescriptor.direction}`
+		: ''}</output
+>
+<output data-testid="resize-start-column">{resizeStartColumnId}</output>
+<output data-testid="resize-end-widths">{JSON.stringify(resizeEndWidths)}</output>

package/dist/table/column-resizer/table-column-resizer-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TableColumnResizerTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TableColumnResizerTest = ReturnType<typeof TableColumnResizerTest>;
+export default TableColumnResizerTest;