@warkypublic/svelix 0.1.46 → 0.2.1

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

@@ -53,8 +53,12 @@ interface Props {
     onLoadError?: (error: string) => void;
     class?: string;
     toolbarEnd?: Snippet;
+    animate?: boolean;
+    density?: 'compact' | 'default' | 'comfortable' | 'spacious';
+    expand?: 'none' | 'medium' | 'large';
 }
 declare const CardGrid: import("svelte").Component<Props, {
+    selectItem: (uniqueIDValue: string) => boolean;
     refresh: () => void;
 }, "loading" | "total">;
 type CardGrid = ReturnType<typeof CardGrid>;

package/dist/components/CardGrid/CardGridFilterPanel.svelte

@@ -1,96 +1,117 @@
-<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;
+<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"
 	}
-
-	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;
+];
+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;
 		}
-		onApply(next);
-	}
-
-	function clear() {
-		onApply({});
+		next[row.colId] = entry;
 	}
-
-	const needsValue = (op: Op) => op !== 'isNull' && op !== 'isNotNull';
-	const needsValue2 = (op: Op) => op === 'between' || op === 'notBetween';
+	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">

package/dist/components/CardGrid/DefaultCard.svelte

@@ -1,106 +1,90 @@
-<script lang="ts">
-	import type { CardGridColumn } from './cardGrid.js';
-
-	interface Props {
-		record: Record<string, unknown>;
-		columns: CardGridColumn[];
-		selected: boolean;
-		focused: boolean;
+<script lang="ts">const { record, columns, selected, focused, expanded } = $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];
 	}
-
-	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, 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;
 		}
-		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;
-			}
+		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;
 	}
+	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}>
+<article class="dc-card" class:dc-selected={selected} class:dc-focused={focused} class:dc-expanded={expanded}>
 	<!-- Header -->
 	{#if titleCol}
 		{@const titleKey = titleCol.dataKey ?? titleCol.id}
@@ -148,6 +132,11 @@
 		flex-direction: column;
 	}
 
+	/* Expanded mode — merges front + back columns */
+	.dc-expanded {
+		--cg-colspan: span 2;
+	}
+
 	/* ── Header ───────────────────────────────────────────────────────── */
 
 	.dc-header {

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

@@ -4,6 +4,7 @@ interface Props {
     columns: CardGridColumn[];
     selected: boolean;
     focused: boolean;
+    expanded?: boolean;
 }
 declare const DefaultCard: import("svelte").Component<Props, {}, "">;
 type DefaultCard = ReturnType<typeof DefaultCard>;

package/dist/components/CardGrid/ImageCardStory.svelte

@@ -1,39 +1,90 @@
-<script lang="ts">
-	import CardGrid from './CardGrid.svelte';
-	import type { CardGridColumn, CardSortOption } from './cardGrid.js';
-
-	const columns: CardGridColumn[] = [
-		{ id: 'id',           title: 'ID',           disableSearch: true, disableFilter: true },
-		{ id: 'title',        title: 'Title' },
-		{ id: 'photographer', title: 'Photographer' },
-		{ id: 'category',     title: 'Category' },
-		{ id: 'likes',        title: 'Likes',        format: 'number' },
-		{ id: 'views',        title: 'Views',        format: 'number' },
-	];
-
-	const sortOptions: CardSortOption[] = [
-		{ columnId: 'title',        label: 'Title' },
-		{ columnId: 'photographer', label: 'Photographer' },
-		{ columnId: 'likes',        label: 'Likes' },
-	];
-
-	const CATEGORIES    = ['Architecture', 'Nature', 'People', 'Travel', 'Abstract', 'Animals'];
-	const PHOTOGRAPHERS = ['Alice Monroe', 'Ben Carter', 'Cara Lee', 'Daniel Park', 'Emma Rios', 'Felix Braun'];
-	const TITLES = [
-		'Golden Hour', 'Morning Mist', 'Urban Jungle', 'Still Waters', 'First Light',
-		'Hidden Path', 'City Pulse', 'Wild Plains', 'Quiet Corner', 'Storm Front',
-		'Desert Bloom', 'Arctic Echo', 'Neon Drift', 'Forest Floor', 'Tidal Wave',
-	];
-
-	const data = Array.from({ length: 60 }, (_, i) => ({
-		id:           i + 1,
-		title:        `${TITLES[i % TITLES.length]} ${Math.floor(i / TITLES.length) || ''}`.trim(),
-		photographer: PHOTOGRAPHERS[i % PHOTOGRAPHERS.length],
-		category:     CATEGORIES[i % CATEGORIES.length],
-		likes:        Math.floor(Math.random() * 4800 + 200),
-		views:        Math.floor(Math.random() * 48000 + 2000),
-		imageUrl:     `https://picsum.photos/seed/${i + 1}/400/260`,
-	}));
+<script lang="ts">import CardGrid from "./CardGrid.svelte";
+const columns = [
+	{
+		id: "id",
+		title: "ID",
+		disableSearch: true,
+		disableFilter: true
+	},
+	{
+		id: "title",
+		title: "Title"
+	},
+	{
+		id: "photographer",
+		title: "Photographer"
+	},
+	{
+		id: "category",
+		title: "Category"
+	},
+	{
+		id: "likes",
+		title: "Likes",
+		format: "number"
+	},
+	{
+		id: "views",
+		title: "Views",
+		format: "number"
+	}
+];
+const sortOptions = [
+	{
+		columnId: "title",
+		label: "Title"
+	},
+	{
+		columnId: "photographer",
+		label: "Photographer"
+	},
+	{
+		columnId: "likes",
+		label: "Likes"
+	}
+];
+const CATEGORIES = [
+	"Architecture",
+	"Nature",
+	"People",
+	"Travel",
+	"Abstract",
+	"Animals"
+];
+const PHOTOGRAPHERS = [
+	"Alice Monroe",
+	"Ben Carter",
+	"Cara Lee",
+	"Daniel Park",
+	"Emma Rios",
+	"Felix Braun"
+];
+const TITLES = [
+	"Golden Hour",
+	"Morning Mist",
+	"Urban Jungle",
+	"Still Waters",
+	"First Light",
+	"Hidden Path",
+	"City Pulse",
+	"Wild Plains",
+	"Quiet Corner",
+	"Storm Front",
+	"Desert Bloom",
+	"Arctic Echo",
+	"Neon Drift",
+	"Forest Floor",
+	"Tidal Wave"
+];
+const data = Array.from({ length: 60 }, (_, i) => ({
+	id: i + 1,
+	title: `${TITLES[i % TITLES.length]} ${Math.floor(i / TITLES.length) || ""}`.trim(),
+	photographer: PHOTOGRAPHERS[i % PHOTOGRAPHERS.length],
+	category: CATEGORIES[i % CATEGORIES.length],
+	likes: Math.floor(Math.random() * 4800 + 200),
+	views: Math.floor(Math.random() * 48e3 + 2e3),
+	imageUrl: `https://picsum.photos/seed/${i + 1}/400/260`
+}));
 </script>
 
 <!-- cardMaxFrontColumns=3 splits: front=[id,title,photographer], back=[category,likes,views] -->

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

@@ -31,3 +31,27 @@ export declare function rangeSelect(allItems: Record<string, unknown>[], anchorI
 export declare function isItemSelected(selectedItems: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): boolean;
 /** Compute how many cards fit in a row given container width, min card width, and gap. */
 export declare function computeColumnsInRow(containerWidth: number, cardMinWidth: number, gap: number): number;
+/** Density mode for the card grid. */
+export type CardGridDensity = 'compact' | 'default' | 'comfortable';
+/** Expand mode for the card grid. */
+export type CardGridExpand = 'none' | 'medium' | 'large';
+/** Extended props interface including animation, density and expand controls. */
+export interface CardGridAnimationProps {
+    /** Enable staggered entry/exit animations on cards (default true). */
+    animate?: boolean;
+    /** Duration of card entrance transitions in ms (default 200). */
+    animateDuration?: number;
+}
+/** Extended props interface including animation, density and expand controls. */
+export interface CardGridDensityProps {
+    /** Density mode: compact(default), comfortable. Overrides cardMinWidth/gap when set. */
+    density?: CardGridDensity;
+    /** Expand mode: none, medium, large. Controls how much space each card occupies. */
+    expand?: CardGridExpand;
+}
+/** Build virtual rows from flat displayData, packing columnsInRow items per row. */
+export declare function buildVirtualRows(displayData: Record<string, unknown>[], columnsInRow: number): Record<string, unknown>[][];
+/** Match a search string against any hotfield column value. */
+export declare function typeaheadMatch(searchValue: string, item: Record<string, unknown>, hotfields?: string[]): boolean;
+export interface ExtendedCardGridProps extends CardGridAnimationProps, CardGridDensityProps {
+}

package/dist/components/CardGrid/cardGrid.js

@@ -19,3 +19,23 @@ export function isItemSelected(selectedItems, item, uniqueID) {
 export function computeColumnsInRow(containerWidth, cardMinWidth, gap) {
     return Math.max(1, Math.floor((containerWidth + gap) / (cardMinWidth + gap)));
 }
+/** Build virtual rows from flat displayData, packing columnsInRow items per row. */
+export function buildVirtualRows(displayData, columnsInRow) {
+    const cols = Math.max(1, columnsInRow);
+    const rows = [];
+    for (let i = 0; i < displayData.length; i += cols) {
+        rows.push(displayData.slice(i, i + cols));
+    }
+    return rows;
+}
+/** Match a search string against any hotfield column value. */
+export function typeaheadMatch(searchValue, item, hotfields) {
+    if (!searchValue)
+        return true;
+    const lower = searchValue.toLowerCase();
+    if (hotfields && hotfields.length > 0) {
+        return Object.entries(item).some(([k, v]) => hotfields.some((f) => k === f || k.endsWith(`.${f}`)) &&
+            String(v ?? '').toLowerCase().includes(lower));
+    }
+    return Object.values(item).some((v) => String(v ?? '').toLowerCase().includes(lower));
+}

package/dist/components/ContentEditor/CollaboraInsertTextDemo.svelte

@@ -1,13 +1,8 @@
-<script lang="ts">
-  import type { ContentEditorProps } from "./types.js";
-  import ContentEditor from "./ContentEditor.svelte";
-
-  let { value, filename, wopiUrl, discoverUrl, adminKey, userid, username }: ContentEditorProps =
-    $props();
-
-  let insertText = $state<((text: string) => void) | undefined>();
-  let insertHtml = $state<((html: string) => void) | undefined>();
-  let inputText = $state("Hello from Storybook!");
+<script lang="ts">import ContentEditor from "./ContentEditor.svelte";
+let { value, filename, wopiUrl, discoverUrl, adminKey, userid, username } = $props();
+let insertText = $state();
+let insertHtml = $state();
+let inputText = $state("Hello from Storybook!");
 </script>
 
 <div style="display:flex;flex-direction:column;height:100vh;">