@warkypublic/svelix 0.1.44 → 0.1.47

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,320 @@
+<script lang="ts">const { columns, filters, onApply, onCancel } = $props();
+const ALL_OPERATORS = [
+	{
+		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));
+function filtersToRows(f) {
+	return Object.entries(f).map(([colId, entry]) => ({
+		colId,
+		op: entry.op ?? "contains",
+		value: entry.value ?? "",
+		value2: entry.value2 ?? ""
+	}));
+}
+let rows = $state([]);
+$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) {
+	rows = rows.filter((_, i) => i !== index);
+}
+function apply() {
+	const next = {};
+	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 = {
+			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 !== "isNull" && op !== "isNotNull";
+const needsValue2 = (op) => op === "between" || op === "notBetween";
+export {};
+</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,287 @@
+<script lang="ts">const { record, columns, selected, focused } = $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, row) {
+	const parts = key.split(".");
+	let val = row;
+	for (const part of parts) {
+		if (val == null || typeof val !== "object") return undefined;
+		val = val[part];
+	}
+	return val;
+}
+function formatVal(val, col) {
+	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 = {
+	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) {
+	const id = col.id.toLowerCase();
+	return id.includes("status") || id.includes("state") || id === "type";
+}
+function statusVariant(val) {
+	if (val == null) return null;
+	return STATUS_MAP[String(val).toLowerCase().replace(/[\s-]/g, "_")] ?? null;
+}
+export {};
+</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;