@x33025/sveltely 0.1.18 → 0.1.19

package/dist/components/Library/Table/Table.demo.svelte

@@ -0,0 +1,148 @@
+<script module lang="ts">
+	type Project = {
+		id: number;
+		name: string;
+		owner: string;
+		status: 'Active' | 'Paused' | 'Review';
+		budget: number;
+	};
+
+	export const demo = {
+		name: 'Table',
+		description: 'SwiftUI-style data table with sortable columns and bound selection.',
+		columnSpan: 3,
+		rowSpan: 3
+	};
+</script>
+
+<script lang="ts">
+	import Table from './index';
+	import type { TableSortDescriptor } from './types';
+
+	const rows: Project[] = [
+		{ id: 1, name: 'Atlas', owner: 'Mika', status: 'Active', budget: 18200 },
+		{ id: 2, name: 'Beacon', owner: 'Nia', status: 'Review', budget: 9400 },
+		{ id: 3, name: 'Canopy', owner: 'Tao', status: 'Paused', budget: 12650 },
+		{ id: 4, name: 'Drift', owner: 'Ari', status: 'Active', budget: 22100 },
+		{ id: 5, name: 'Ember', owner: 'Sana', status: 'Review', budget: 15840 },
+		{ id: 6, name: 'Fjord', owner: 'Leo', status: 'Active', budget: 27600 },
+		{ id: 7, name: 'Grove', owner: 'Ilya', status: 'Paused', budget: 7300 },
+		{ id: 8, name: 'Harbor', owner: 'Noor', status: 'Active', budget: 31450 },
+		{ id: 9, name: 'Ion', owner: 'Mika', status: 'Review', budget: 11900 },
+		{ id: 10, name: 'Juno', owner: 'Tao', status: 'Active', budget: 19875 },
+		{ id: 11, name: 'Keystone', owner: 'Ari', status: 'Paused', budget: 14620 },
+		{ id: 12, name: 'Lumen', owner: 'Nia', status: 'Review', budget: 24880 },
+		{ id: 13, name: 'Meridian', owner: 'Sana', status: 'Active', budget: 33750 },
+		{ id: 14, name: 'Nimbus', owner: 'Leo', status: 'Paused', budget: 6800 },
+		{ id: 15, name: 'Orchid', owner: 'Ilya', status: 'Active', budget: 17340 },
+		{ id: 16, name: 'Pulse', owner: 'Noor', status: 'Review', budget: 20410 }
+	];
+
+	let selection = $state<Set<number>>(new Set([1, 4]));
+	let sortOrder = $state<TableSortDescriptor<Project>[]>([{ key: 'name', direction: 'ascending' }]);
+
+	const avatarUrl = (project: Project) =>
+		`https://ui-avatars.com/api/?name=${project.name}&size=64&background=18181b&color=fff`;
+</script>
+
+{#snippet projectCell(row: Project)}
+	<div class="table-demo-project">
+		<img class="table-demo-avatar" src={avatarUrl(row)} alt="" />
+		<span>{row.name}</span>
+	</div>
+{/snippet}
+
+{#snippet metaCell(row: Project)}
+	<div class="table-demo-meta">
+		<span>{row.owner}</span>
+		<span>{row.status}</span>
+	</div>
+{/snippet}
+
+{#snippet statusCell(row: Project)}
+	<span class={`table-demo-status table-demo-status-${row.status.toLowerCase()}`}>{row.status}</span
+	>
+{/snippet}
+
+{#snippet budgetCell(row: Project)}
+	{row.budget.toLocaleString(undefined, {
+		style: 'currency',
+		currency: 'USD',
+		maximumFractionDigits: 0
+	})}
+{/snippet}
+
+<Table data={rows} bind:selection bind:sortOrder selectionMode="multiple">
+	<Table.Column label="Project" sortKey="name" sortable minWidth={160}>
+		{#snippet cell(project: Project)}
+			{@render projectCell(project)}
+		{/snippet}
+	</Table.Column>
+
+	<Table.Column label="Meta" colspan={2} minWidth={144}>
+		{#snippet cell(project: Project)}
+			{@render metaCell(project)}
+		{/snippet}
+	</Table.Column>
+
+	<Table.Column label="Status" sortKey="status" sortable minWidth={96}>
+		{#snippet cell(project: Project)}
+			{@render statusCell(project)}
+		{/snippet}
+	</Table.Column>
+
+	<Table.Column label="Budget" sortKey="budget" alignment="trailing" sortable minWidth={104}>
+		{#snippet cell(project: Project)}
+			{@render budgetCell(project)}
+		{/snippet}
+	</Table.Column>
+</Table>
+
+<style>
+	.table-demo-project {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-weight: 600;
+	}
+
+	.table-demo-avatar {
+		width: 1.75rem;
+		height: 1.75rem;
+		border-radius: 999px;
+	}
+
+	.table-demo-meta {
+		display: grid;
+		gap: 0.125rem;
+	}
+
+	.table-demo-meta span:last-child {
+		color: var(--sveltely-text-secondary-color);
+		font-size: 0.82em;
+	}
+
+	.table-demo-status {
+		display: inline-flex;
+		align-items: center;
+		border-radius: 999px;
+		padding: 0.125rem 0.5rem;
+		font-size: 0.78em;
+		font-weight: 600;
+	}
+
+	.table-demo-status-active {
+		background: color-mix(in oklab, #16a34a 16%, transparent);
+		color: #166534;
+	}
+
+	.table-demo-status-paused {
+		background: color-mix(in oklab, #64748b 16%, transparent);
+		color: #334155;
+	}
+
+	.table-demo-status-review {
+		background: color-mix(in oklab, #d97706 18%, transparent);
+		color: #92400e;
+	}
+</style>

package/dist/components/Library/Table/Table.demo.svelte.d.ts

@@ -0,0 +1,10 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+import Table from './index';
+declare const Table: import("svelte").Component<Record<string, never>, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;