@warkypublic/svelix 0.1.46 → 0.1.47

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,103 +1,87 @@
-<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 } = $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}>

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/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;">

package/dist/components/ContentEditor/ContentEditor.svelte

@@ -1,53 +1,27 @@
-<script lang="ts">
-  import type { ContentEditorProps } from "./types.js";
-  import { getEditorType } from "./utils.js";
-  import MonacoEditor from "./subcomponents/MonacoEditor.svelte";
-  import ImageViewer from "./subcomponents/ImageViewer.svelte";
-  import AudioPlayer from "./subcomponents/AudioPlayer.svelte";
-  import VideoPlayer from "./subcomponents/VideoPlayer.svelte";
-  import TextEditor from "./subcomponents/TextEditor.svelte";
-  import MarkdownViewer from "./subcomponents/MarkdownViewer.svelte";
-  import PdfViewer from "./subcomponents/PdfViewer.svelte";
-  import EmailViewer from "./subcomponents/EmailViewer.svelte";
-  import ZipViewer from "./subcomponents/ZipViewer.svelte";
-  import CollaboraEditor from "./subcomponents/CollaboraEditor.svelte";
-  import Office365Editor from "./subcomponents/Office365Editor.svelte";
-  import UnknownFile from "./subcomponents/UnknownFile.svelte";
-
-  let {
-    value,
-    filename,
-    contentType,
-    mode = "value",
-    hideHeader = false,
-    theme,
-    colorScheme = "auto",
-    readonly = false,
-    onChange,
-    onSave,
-    onUpload,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-    wopiUrl,
-    discoverUrl,
-    adminKey,
-    userid,
-    username,
-    viewtype,
-    officeSuite = "collabora",
-    officeOnlineUrl,
-  }: ContentEditorProps = $props();
-
-  const editorType = $derived(getEditorType({ filename, contentType }));
-  const forcedColorScheme = $derived(colorScheme === "auto" ? undefined : colorScheme);
-
-  $effect(() => {
-    if (mode === "filepointer") {
-      console.warn(
-        '[ContentEditor] mode="filepointer" is not yet implemented; falling back to value mode.',
-      );
-    }
-  });
+<script lang="ts">import { getEditorType } from "./utils.js";
+import MonacoEditor from "./subcomponents/MonacoEditor.svelte";
+import ImageViewer from "./subcomponents/ImageViewer.svelte";
+import AudioPlayer from "./subcomponents/AudioPlayer.svelte";
+import VideoPlayer from "./subcomponents/VideoPlayer.svelte";
+import TextEditor from "./subcomponents/TextEditor.svelte";
+import MarkdownViewer from "./subcomponents/MarkdownViewer.svelte";
+import PdfViewer from "./subcomponents/PdfViewer.svelte";
+import EmailViewer from "./subcomponents/EmailViewer.svelte";
+import ZipViewer from "./subcomponents/ZipViewer.svelte";
+import CollaboraEditor from "./subcomponents/CollaboraEditor.svelte";
+import Office365Editor from "./subcomponents/Office365Editor.svelte";
+import UnknownFile from "./subcomponents/UnknownFile.svelte";
+let { value, filename, contentType, mode = "value", hideHeader = false, theme, colorScheme = "auto", readonly = false, onChange, onSave, onUpload, insertText = $bindable(), insertHtml = $bindable(), wopiUrl, discoverUrl, adminKey, userid, username, viewtype, officeSuite = "collabora", officeOnlineUrl } = $props();
+const editorType = $derived(getEditorType({
+	filename,
+	contentType
+}));
+const forcedColorScheme = $derived(colorScheme === "auto" ? undefined : colorScheme);
+$effect(() => {
+	if (mode === "filepointer") {
+		console.warn("[ContentEditor] mode=\"filepointer\" is not yet implemented; falling back to value mode.");
+	}
+});
 </script>
 
 <div

package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { AudioPlayerProps } from '../types.js';
-  import IconAlertCircle from '../../Icons/IconAlertCircle.svelte';
-  let { value, filename }: AudioPlayerProps = $props();
-
-  let src = $state('');
-  let srcType = $state<string | undefined>(undefined);
-  let err = $state<string | null>(null);
-
-  $effect(() => {
-    if (!value) { src = ''; srcType = undefined; return; }
-    err = null;
-    const url = URL.createObjectURL(value);
-    src = url;
-    srcType = value.type || undefined;
-    return () => URL.revokeObjectURL(url);
-  });
+<script lang="ts">import IconAlertCircle from "../../Icons/IconAlertCircle.svelte";
+let { value, filename } = $props();
+let src = $state("");
+let srcType = $state(undefined);
+let err = $state(null);
+$effect(() => {
+	if (!value) {
+		src = "";
+		srcType = undefined;
+		return;
+	}
+	err = null;
+	const url = URL.createObjectURL(value);
+	src = url;
+	srcType = value.type || undefined;
+	return () => URL.revokeObjectURL(url);
+});
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center gap-4 p-6">