@warkypublic/svelix 0.1.44 → 0.1.46

package/dist/components/CardGrid/CardGrid.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+import type { CardGridColumn, CardSortOption, CardGridContextMenuItem } from './cardGrid.js';
+import type { GridColumnSortOrder, GridColumnFilters } from '../Types/generic_grid.js';
+interface Props {
+    columns: CardGridColumn[];
+    displayColumns?: string[];
+    cardMinWidth?: number;
+    cardGap?: number;
+    /**
+     * Maximum number of columns shown on the front face.
+     * When `resolvedColumns.length` exceeds this, a flip button appears and the
+     * remaining columns are shown on the card's back face.
+     */
+    cardMaxFrontColumns?: number;
+    /** Front-face snippet: (record, index, selected, focused) */
+    card?: Snippet<[Record<string, unknown>, number, boolean, boolean]>;
+    /** Back-face snippet for flip mode: (record, index, selected, focused) */
+    cardBack?: Snippet<[Record<string, unknown>, number, boolean, boolean]>;
+    empty?: Snippet;
+    skeleton?: Snippet;
+    dataSource?: 'resolvespec' | 'headerspec' | 'local';
+    dataSourceOptions?: {
+        url?: string;
+        authToken?: string;
+        schema?: string;
+        entity?: string;
+        uniqueID?: string;
+        hotfields?: string[];
+        extraOptions?: Record<string, unknown>;
+    };
+    data?: Record<string, unknown>[] | (() => Promise<Record<string, unknown>[]>);
+    pageSize?: number;
+    uniqueID?: string;
+    searchValue?: string;
+    onSearchValueChange?: (v: string) => void;
+    serverSideSearch?: boolean;
+    searchColumns?: string[];
+    searchPlaceholder?: string;
+    sortOrder?: GridColumnSortOrder;
+    onSortOrderChange?: (order: GridColumnSortOrder) => void;
+    sortOptions?: CardSortOption[];
+    filters?: GridColumnFilters;
+    onFilterChange?: (filters: GridColumnFilters) => void;
+    selectedItems?: Record<string, unknown>[];
+    onSelectedItemsChange?: (items: Record<string, unknown>[]) => void;
+    multiSelect?: boolean;
+    onCardClick?: (record: Record<string, unknown>, index: number) => void;
+    onCardDblClick?: (record: Record<string, unknown>, index: number) => void;
+    onCardContextMenu?: (record: Record<string, unknown>, index: number, x: number, y: number) => void;
+    menuItems?: CardGridContextMenuItem[];
+    total?: number;
+    loading?: boolean;
+    onLoadError?: (error: string) => void;
+    class?: string;
+    toolbarEnd?: Snippet;
+}
+declare const CardGrid: import("svelte").Component<Props, {
+    refresh: () => void;
+}, "loading" | "total">;
+type CardGrid = ReturnType<typeof CardGrid>;
+export default CardGrid;

package/dist/components/CardGrid/CardGridFilterPanel.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+	import type { CardGridColumn } from './cardGrid.js';
+	import type { GridColumnFilters } from '../Types/generic_grid.js';
+
+	interface Props {
+		columns: CardGridColumn[];
+		filters: GridColumnFilters;
+		onApply: (filters: GridColumnFilters) => void;
+		onCancel: () => void;
+	}
+
+	const { columns, filters, onApply, onCancel }: Props = $props();
+
+	type Op = NonNullable<GridColumnFilters[string]['op']>;
+
+	const ALL_OPERATORS: { value: Op; label: string }[] = [
+		{ value: 'contains', label: 'Contains' },
+		{ value: 'equals', label: 'Equals' },
+		{ value: 'notEquals', label: 'Not equals' },
+		{ value: 'startsWith', label: 'Starts with' },
+		{ value: 'endsWith', label: 'Ends with' },
+		{ value: 'greaterThan', label: '>' },
+		{ value: 'greaterThanOrEqual', label: '>=' },
+		{ value: 'lessThan', label: '<' },
+		{ value: 'lessThanOrEqual', label: '<=' },
+		{ value: 'between', label: 'Between' },
+		{ value: 'notBetween', label: 'Not between' },
+		{ value: 'in', label: 'In (comma-sep)' },
+		{ value: 'notIn', label: 'Not in' },
+		{ value: 'isNull', label: 'Is empty' },
+		{ value: 'isNotNull', label: 'Is not empty' },
+	];
+
+	const filterableColumns = $derived(columns.filter((c) => !c.disableFilter));
+
+	interface FilterRow {
+		colId: string;
+		op: Op;
+		value: string;
+		value2: string;
+	}
+
+	function filtersToRows(f: GridColumnFilters): FilterRow[] {
+		return Object.entries(f).map(([colId, entry]) => ({
+			colId,
+			op: entry.op ?? 'contains',
+			value: entry.value ?? '',
+			value2: entry.value2 ?? '',
+		}));
+	}
+
+	let rows = $state<FilterRow[]>([]);
+
+	$effect(() => {
+		rows = filtersToRows(filters);
+	});
+
+	function addRow() {
+		const firstCol = filterableColumns[0];
+		if (!firstCol) return;
+		rows = [...rows, { colId: firstCol.id, op: 'contains', value: '', value2: '' }];
+	}
+
+	function removeRow(index: number) {
+		rows = rows.filter((_, i) => i !== index);
+	}
+
+	function apply() {
+		const next: GridColumnFilters = {};
+		for (const row of rows) {
+			if (!row.colId) continue;
+			const needsValue = row.op !== 'isNull' && row.op !== 'isNotNull';
+			if (needsValue && !row.value) continue;
+			const col = columns.find((c) => c.id === row.colId);
+			const entry: GridColumnFilters[string] = {
+				value: row.value,
+				op: row.op,
+				...(col?.dataKey ? { dataKey: col.dataKey } : {}),
+			};
+			if ((row.op === 'between' || row.op === 'notBetween') && row.value2) {
+				entry.value2 = row.value2;
+			}
+			next[row.colId] = entry;
+		}
+		onApply(next);
+	}
+
+	function clear() {
+		onApply({});
+	}
+
+	const needsValue = (op: Op) => op !== 'isNull' && op !== 'isNotNull';
+	const needsValue2 = (op: Op) => op === 'between' || op === 'notBetween';
+</script>
+
+<div class="fp-panel">
+	<div class="fp-header">
+		<span class="fp-title">Filters</span>
+		<button class="fp-add-btn" onclick={addRow} type="button">+ Add filter</button>
+	</div>
+
+	{#if rows.length === 0}
+		<p class="fp-empty">No filters applied.</p>
+	{/if}
+
+	{#each rows as row, i (i)}
+		<div class="fp-row">
+			<select
+				class="fp-select"
+				bind:value={row.colId}
+				aria-label="Column"
+			>
+				{#each filterableColumns as col (col.id)}
+					<option value={col.id}>{col.title}</option>
+				{/each}
+			</select>
+
+			<select
+				class="fp-select fp-select-op"
+				bind:value={row.op}
+				aria-label="Operator"
+			>
+				{#each ALL_OPERATORS as op (op.value)}
+					<option value={op.value}>{op.label}</option>
+				{/each}
+			</select>
+
+			{#if needsValue(row.op)}
+				<input
+					class="fp-input"
+					type="text"
+					bind:value={row.value}
+					placeholder="Value"
+					aria-label="Filter value"
+				/>
+			{/if}
+
+			{#if needsValue2(row.op)}
+				<input
+					class="fp-input"
+					type="text"
+					bind:value={row.value2}
+					placeholder="To"
+					aria-label="Filter value 2"
+				/>
+			{/if}
+
+			<button
+				class="fp-remove-btn"
+				onclick={() => removeRow(i)}
+				type="button"
+				aria-label="Remove filter"
+			>✕</button>
+		</div>
+	{/each}
+
+	<div class="fp-actions">
+		<button class="fp-btn fp-btn-clear" onclick={clear} type="button">Clear all</button>
+		<div class="fp-actions-right">
+			<button class="fp-btn" onclick={onCancel} type="button">Cancel</button>
+			<button class="fp-btn fp-btn-apply" onclick={apply} type="button">Apply</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.fp-panel {
+		background: var(--cg-surface-raised, var(--color-surface-50, #fff));
+		border: 1px solid var(--cg-border, var(--color-surface-200, #e2e8f0));
+		border-radius: 10px;
+		box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.07);
+		min-width: 460px;
+		padding: 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		color: var(--cg-text, var(--color-surface-900, #0f172a));
+	}
+
+	:global(.dark) .fp-panel {
+		box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
+	}
+
+	.fp-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.fp-title {
+		font-weight: 600;
+		font-size: 0.875rem;
+	}
+
+	.fp-add-btn {
+		font-size: 0.8rem;
+		color: var(--cg-accent, var(--color-primary-500, #6366f1));
+		background: none;
+		border: none;
+		cursor: pointer;
+		padding: 2px 4px;
+	}
+
+	.fp-empty {
+		color: var(--cg-text-muted, var(--color-surface-500, #64748b));
+		font-size: 0.85rem;
+		margin: 4px 0;
+	}
+
+	.fp-row {
+		display: flex;
+		gap: 6px;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.fp-select {
+		padding: 5px 7px;
+		border: 1px solid var(--cg-border, var(--color-surface-200, #e2e8f0));
+		border-radius: 6px;
+		font-size: 0.8rem;
+		background: var(--cg-surface-raised, #fff);
+		color: var(--cg-text, #0f172a);
+		cursor: pointer;
+	}
+
+	.fp-select-op {
+		min-width: 120px;
+	}
+
+	.fp-input {
+		padding: 5px 8px;
+		border: 1px solid var(--cg-border, var(--color-surface-200, #e2e8f0));
+		border-radius: 6px;
+		font-size: 0.8rem;
+		min-width: 100px;
+		flex: 1;
+		background: var(--cg-surface-raised, #fff);
+		color: var(--cg-text, #0f172a);
+	}
+	.fp-input::placeholder { color: var(--cg-text-muted, #94a3b8); }
+
+	.fp-remove-btn {
+		background: none;
+		border: none;
+		cursor: pointer;
+		color: var(--cg-text-muted, #94a3b8);
+		padding: 2px 4px;
+		font-size: 0.875rem;
+		flex-shrink: 0;
+	}
+
+	.fp-remove-btn:hover {
+		color: var(--color-error-500, #ef4444);
+	}
+
+	.fp-actions {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-top: 6px;
+		border-top: 1px solid var(--cg-border, var(--color-surface-200, #e2e8f0));
+		margin-top: 2px;
+	}
+
+	.fp-actions-right {
+		display: flex;
+		gap: 6px;
+	}
+
+	.fp-btn {
+		padding: 5px 12px;
+		border-radius: 6px;
+		font-size: 0.8rem;
+		cursor: pointer;
+		border: 1px solid var(--cg-border, var(--color-surface-200, #e2e8f0));
+		background: var(--cg-surface-raised, #fff);
+		color: var(--cg-text, #0f172a);
+		transition: background 120ms;
+	}
+	.fp-btn:hover { background: var(--cg-border-subtle, var(--color-surface-100, #f1f5f9)); }
+
+	.fp-btn-apply {
+		background: var(--cg-accent, var(--color-primary-500, #6366f1));
+		color: #fff;
+		border-color: var(--cg-accent, var(--color-primary-500, #6366f1));
+	}
+	.fp-btn-apply:hover {
+		background: var(--color-primary-600, #4f46e5);
+		border-color: var(--color-primary-600, #4f46e5);
+	}
+
+	.fp-btn-clear {
+		color: var(--color-error-500, #ef4444);
+		border-color: transparent;
+		background: none;
+	}
+	.fp-btn-clear:hover { background: color-mix(in oklab, var(--color-error-500, #ef4444) 10%, transparent); }
+</style>

package/dist/components/CardGrid/CardGridFilterPanel.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { CardGridColumn } from './cardGrid.js';
+import type { GridColumnFilters } from '../Types/generic_grid.js';
+interface Props {
+    columns: CardGridColumn[];
+    filters: GridColumnFilters;
+    onApply: (filters: GridColumnFilters) => void;
+    onCancel: () => void;
+}
+declare const CardGridFilterPanel: import("svelte").Component<Props, {}, "">;
+type CardGridFilterPanel = ReturnType<typeof CardGridFilterPanel>;
+export default CardGridFilterPanel;

package/dist/components/CardGrid/DefaultCard.svelte

@@ -0,0 +1,303 @@
+<script lang="ts">
+	import type { CardGridColumn } from './cardGrid.js';
+
+	interface Props {
+		record: Record<string, unknown>;
+		columns: CardGridColumn[];
+		selected: boolean;
+		focused: boolean;
+	}
+
+	const { record, columns, selected, focused }: Props = $props();
+
+	// First column → title, second → subtitle, rest → detail rows
+	const titleCol    = $derived(columns[0]);
+	const subtitleCol = $derived(columns.length > 1 ? columns[1] : undefined);
+	const detailCols  = $derived(columns.slice(subtitleCol ? 2 : 1));
+
+	function getVal(key: string, row: Record<string, unknown>): unknown {
+		const parts = key.split('.');
+		let val: unknown = row;
+		for (const part of parts) {
+			if (val == null || typeof val !== 'object') return undefined;
+			val = (val as Record<string, unknown>)[part];
+		}
+		return val;
+	}
+
+	function formatVal(val: unknown, col: CardGridColumn): string {
+		if (val == null || val === '') return '—';
+		switch (col.format) {
+			case 'currency': {
+				const n = Number(val);
+				if (!isNaN(n))
+					return new Intl.NumberFormat(undefined, {
+						style: 'currency',
+						currency: 'ZAR',
+						maximumFractionDigits: 0,
+					}).format(n);
+				break;
+			}
+			case 'number': {
+				const n = Number(val);
+				if (!isNaN(n)) return n.toLocaleString();
+				break;
+			}
+			case 'percentage': {
+				const n = Number(val);
+				if (!isNaN(n)) return `${(n * 100).toFixed(1)}%`;
+				break;
+			}
+			case 'date': {
+				const d = val instanceof Date ? val : new Date(String(val));
+				if (!isNaN(d.getTime())) return d.toLocaleDateString();
+				break;
+			}
+			case 'datetime': {
+				const d = val instanceof Date ? val : new Date(String(val));
+				if (!isNaN(d.getTime())) return d.toLocaleString();
+				break;
+			}
+		}
+		return String(val);
+	}
+
+	// Status chip logic — keyed on common English status words
+	const STATUS_MAP: Record<string, 'success' | 'warning' | 'error' | 'neutral'> = {
+		active:      'success',
+		enabled:     'success',
+		approved:    'success',
+		confirmed:   'success',
+		completed:   'success',
+		done:        'success',
+		live:        'success',
+		pending:     'warning',
+		review:      'warning',
+		draft:       'warning',
+		in_progress: 'warning',
+		processing:  'warning',
+		queued:      'warning',
+		inactive:    'error',
+		disabled:    'error',
+		cancelled:   'error',
+		rejected:    'error',
+		failed:      'error',
+		error:       'error',
+		blocked:     'error',
+		archived:    'neutral',
+		closed:      'neutral',
+		deprecated:  'neutral',
+	};
+
+	function isStatusCol(col: CardGridColumn): boolean {
+		const id = col.id.toLowerCase();
+		return id.includes('status') || id.includes('state') || id === 'type';
+	}
+
+	function statusVariant(val: unknown): 'success' | 'warning' | 'error' | 'neutral' | null {
+		if (val == null) return null;
+		return STATUS_MAP[String(val).toLowerCase().replace(/[\s-]/g, '_')] ?? null;
+	}
+</script>
+
+<article class="dc-card" class:dc-selected={selected} class:dc-focused={focused}>
+	<!-- Header -->
+	{#if titleCol}
+		{@const titleKey = titleCol.dataKey ?? titleCol.id}
+		{@const titleVal = getVal(titleKey, record)}
+		<div class="dc-header">
+			<p class="dc-title">{titleVal ?? '—'}</p>
+			{#if subtitleCol}
+				{@const subKey = subtitleCol.dataKey ?? subtitleCol.id}
+				{@const subVal = getVal(subKey, record)}
+				<p class="dc-subtitle">{formatVal(subVal, subtitleCol)}</p>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Detail rows -->
+	{#if detailCols.length > 0}
+		<div class="dc-divider"></div>
+		<dl class="dc-fields">
+			{#each detailCols as col (col.id)}
+				{@const key    = col.dataKey ?? col.id}
+				{@const raw    = getVal(key, record)}
+				{@const isChip = isStatusCol(col)}
+				{@const chip   = isChip ? statusVariant(raw) : null}
+				<div class="dc-field">
+					<dt class="dc-label">{col.title}</dt>
+					<dd class="dc-value">
+						{#if chip}
+							<span class="dc-chip dc-chip-{chip}">{raw ?? '—'}</span>
+						{:else}
+							{formatVal(raw, col)}
+						{/if}
+					</dd>
+				</div>
+			{/each}
+		</dl>
+	{/if}
+</article>
+
+<style>
+	.dc-card {
+		padding: 0;
+		font-size: 0.875rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* ── Header ───────────────────────────────────────────────────────── */
+
+	.dc-header {
+		padding: 14px 16px 12px;
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+	}
+
+	.dc-title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: var(--color-surface-900, #1e293b);
+		line-height: 1.3;
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:global(.dark) .dc-title {
+		color: var(--color-surface-50, #f8fafc);
+	}
+
+	.dc-subtitle {
+		font-size: 0.8rem;
+		color: var(--color-surface-500, #64748b);
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:global(.dark) .dc-subtitle {
+		color: var(--color-surface-400, #94a3b8);
+	}
+
+	/* ── Divider ──────────────────────────────────────────────────────── */
+
+	.dc-divider {
+		height: 1px;
+		background: var(--cg-border-subtle, #f4f6f9);
+		margin: 0 16px;
+	}
+
+	:global(.dark) .dc-divider {
+		background: var(--cg-border, var(--color-surface-700, #334155));
+	}
+
+	/* ── Fields grid ──────────────────────────────────────────────────── */
+
+	.dc-fields {
+		padding: 10px 16px 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin: 0;
+		flex: 1;
+	}
+
+	.dc-field {
+		display: grid;
+		grid-template-columns: minmax(60px, 38%) 1fr;
+		gap: 8px;
+		align-items: baseline;
+	}
+
+	.dc-label {
+		font-size: 0.75rem;
+		color: var(--color-surface-400, #94a3b8);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:global(.dark) .dc-label {
+		color: var(--color-surface-500, #64748b);
+	}
+
+	.dc-value {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--color-surface-800, #1e293b);
+		text-align: right;
+		word-break: break-word;
+		min-width: 0;
+		margin: 0;
+	}
+
+	:global(.dark) .dc-value {
+		color: var(--color-surface-100, #f1f5f9);
+	}
+
+	/* ── Status chips ─────────────────────────────────────────────────── */
+
+	.dc-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: 4px;
+		padding: 1px 7px;
+		border-radius: 999px;
+		font-size: 0.72rem;
+		font-weight: 600;
+		letter-spacing: 0.01em;
+		text-transform: capitalize;
+	}
+
+	.dc-chip::before {
+		content: '';
+		display: inline-block;
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background: currentColor;
+		flex-shrink: 0;
+	}
+
+	.dc-chip-success {
+		background: var(--color-success-100, #dcfce7);
+		color: var(--color-success-700, #15803d);
+	}
+	:global(.dark) .dc-chip-success {
+		background: color-mix(in oklab, var(--color-success-700, #15803d) 20%, transparent);
+		color: var(--color-success-400, #4ade80);
+	}
+
+	.dc-chip-warning {
+		background: var(--color-warning-100, #fef9c3);
+		color: var(--color-warning-700, #a16207);
+	}
+	:global(.dark) .dc-chip-warning {
+		background: color-mix(in oklab, var(--color-warning-700, #a16207) 20%, transparent);
+		color: var(--color-warning-400, #facc15);
+	}
+
+	.dc-chip-error {
+		background: var(--color-error-100, #fee2e2);
+		color: var(--color-error-700, #b91c1c);
+	}
+	:global(.dark) .dc-chip-error {
+		background: color-mix(in oklab, var(--color-error-700, #b91c1c) 20%, transparent);
+		color: var(--color-error-400, #f87171);
+	}
+
+	.dc-chip-neutral {
+		background: var(--color-surface-100, #f1f5f9);
+		color: var(--color-surface-600, #475569);
+	}
+	:global(.dark) .dc-chip-neutral {
+		background: var(--color-surface-700, #334155);
+		color: var(--color-surface-300, #94a3b8);
+	}
+</style>

package/dist/components/CardGrid/DefaultCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CardGridColumn } from './cardGrid.js';
+interface Props {
+    record: Record<string, unknown>;
+    columns: CardGridColumn[];
+    selected: boolean;
+    focused: boolean;
+}
+declare const DefaultCard: import("svelte").Component<Props, {}, "">;
+type DefaultCard = ReturnType<typeof DefaultCard>;
+export default DefaultCard;