@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/VTree/VTree.utils.d.ts

@@ -0,0 +1,23 @@
+import type { VTreeRecord } from './types.js';
+export interface NodeIndex<T extends VTreeRecord = VTreeRecord> {
+    byId: Map<string, T>;
+    parentById: Map<string, string | null>;
+}
+export declare function mergeClasses(base: string, override?: string): string;
+export declare function buildNodeIndex<T extends VTreeRecord>(roots: T[], getId: (node: T) => string, getChildren: (node: T) => T[]): NodeIndex<T>;
+export declare function findAncestorIds(parentById: Map<string, string | null>, targetId: string): string[];
+export declare function resolveRowHeight<T extends VTreeRecord>(rowHeight: number | ((node: T, level: number, index: number) => number), node: T | undefined, level: number, index: number, fallback?: number): number;
+export interface MultiSelectClickInput {
+    currentIds: string[];
+    clickedId: string;
+    clickedIndex: number;
+    anchorIndex: number | null;
+    orderedRowIds: string[];
+    ctrlOrMeta?: boolean;
+    shift?: boolean;
+}
+export declare function computeMultiSelectClick(input: MultiSelectClickInput): {
+    ids: string[];
+    nextAnchorIndex: number;
+};
+export declare function isImageLikeValue(value: unknown): boolean;

package/dist/components/VTree/VTree.utils.js

@@ -0,0 +1,73 @@
+export function mergeClasses(base, override) {
+    return [base, override].filter(Boolean).join(' ');
+}
+export function buildNodeIndex(roots, getId, getChildren) {
+    const byId = new Map();
+    const parentById = new Map();
+    const visiting = new Set();
+    const walk = (nodes, parentId) => {
+        for (const node of nodes) {
+            if (!node || visiting.has(node))
+                continue;
+            const id = getId(node);
+            if (!id || byId.has(id))
+                continue;
+            byId.set(id, node);
+            parentById.set(id, parentId);
+            visiting.add(node);
+            walk(getChildren(node), id);
+            visiting.delete(node);
+        }
+    };
+    walk(roots, null);
+    return { byId, parentById };
+}
+export function findAncestorIds(parentById, targetId) {
+    const visited = new Set();
+    const ancestors = [];
+    let current = targetId;
+    while (current && !visited.has(current)) {
+        visited.add(current);
+        const parent = parentById.get(current);
+        if (!parent)
+            break;
+        ancestors.push(parent);
+        current = parent;
+    }
+    return ancestors.reverse();
+}
+export function resolveRowHeight(rowHeight, node, level, index, fallback = 36) {
+    const value = typeof rowHeight === 'function' ? (node ? rowHeight(node, level, index) : fallback) : rowHeight;
+    return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+export function computeMultiSelectClick(input) {
+    const current = new Set(input.currentIds);
+    let ids;
+    const anchor = input.anchorIndex ?? input.clickedIndex;
+    if (input.shift) {
+        const start = Math.max(0, Math.min(anchor, input.clickedIndex));
+        const end = Math.min(input.orderedRowIds.length - 1, Math.max(anchor, input.clickedIndex));
+        ids = input.ctrlOrMeta ? new Set(current) : new Set();
+        for (const id of input.orderedRowIds.slice(start, end + 1))
+            ids.add(id);
+    }
+    else if (input.ctrlOrMeta) {
+        ids = new Set(current);
+        if (ids.has(input.clickedId))
+            ids.delete(input.clickedId);
+        else
+            ids.add(input.clickedId);
+    }
+    else {
+        ids = new Set([input.clickedId]);
+    }
+    return {
+        ids: input.orderedRowIds.filter((id) => ids.has(id)),
+        nextAnchorIndex: input.clickedIndex
+    };
+}
+export function isImageLikeValue(value) {
+    if (typeof value !== 'string')
+        return false;
+    return /^(https?:\/\/|data:image\/|\/|\.\/|\.\.\/).+\.(png|jpe?g|gif|svg|webp)(\?.*)?$/i.test(value) || /^data:image\//i.test(value);
+}

package/dist/components/VTree/VTreeContextMenu.svelte

@@ -1,36 +1,24 @@
-<script lang="ts">
-  import Portal from '../Portal/Portal.svelte';
-  import { registerOverlay } from '../OverlayStack';
-  import type { VTreeContextMenuItem, VTreeRecord } from './types.js';
-
-  export interface Props<T extends VTreeRecord = VTreeRecord> {
-    open: boolean;
-    x: number;
-    y: number;
-    items: VTreeContextMenuItem<T>[];
-    onselectitem?: (item: VTreeContextMenuItem<T>) => void;
-  }
-
-  const { open, x, y, items, onselectitem }: Props = $props();
-
-  let backdropZ = $state(1090);
-  let menuZ = $state(1100);
-
-  $effect(() => {
-    if (!open) {
-      return;
-    }
-
-    const overlay = registerOverlay({ kind: 'contextmenu', mount: 'portal' });
-    backdropZ = overlay.layer.backdrop;
-    menuZ = overlay.layer.content;
-
-    return () => {
-      overlay.unregister();
-      backdropZ = 1090;
-      menuZ = 1100;
-    };
-  });
+<script lang="ts">import Portal from "../Portal/Portal.svelte";
+import { registerOverlay } from "../OverlayStack";
+const { open, x, y, items, onselectitem } = $props();
+let backdropZ = $state(1090);
+let menuZ = $state(1100);
+$effect(() => {
+	if (!open) {
+		return;
+	}
+	const overlay = registerOverlay({
+		kind: "contextmenu",
+		mount: "portal"
+	});
+	backdropZ = overlay.layer.backdrop;
+	menuZ = overlay.layer.content;
+	return () => {
+		overlay.unregister();
+		backdropZ = 1090;
+		menuZ = 1100;
+	};
+});
 </script>
 
 <Portal>

package/dist/components/VTree/VTreeControlledSelectionDemo.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">import VTree from "./VTree.svelte";
+const data = [{
+	id: "root",
+	label: "Root",
+	children: [{
+		id: "deep",
+		label: "Deep child",
+		children: [{
+			id: "leaf",
+			label: "Leaf"
+		}]
+	}]
+}];
+let selected = null;
+</script>
+
+<div class="space-y-2">
+  <button class="btn preset-filled-primary-500" type="button" onclick={() => selected = data[0].children[0].children[0]}>Select leaf</button>
+  <VTree {data} {selected} onSelectedChange={(node) => selected = node} searchable={false} />
+</div>

package/dist/components/VTree/VTreeControlledSelectionDemo.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VTreeControlledSelectionDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VTreeControlledSelectionDemo = InstanceType<typeof VTreeControlledSelectionDemo>;
+export default VTreeControlledSelectionDemo;

package/dist/components/VTree/VTreeCustomizationDemo.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">// @ts-nocheck
+import VTree from "./VTree.svelte";
+const data = [{
+	id: "folder",
+	label: "Folder",
+	icon: "📁",
+	children: [{
+		id: "doc",
+		label: "Document",
+		icon: "📄"
+	}]
+}, {
+	id: "settings",
+	label: "Settings",
+	icon: "⚙️"
+}];
+</script>
+
+{#snippet customIcon({ node })}
+  <span aria-hidden="true">{node.id === 'folder' ? '🗂️' : '✨'}</span>
+{/snippet}
+
+<VTree {data} iconField="icon" icon={customIcon} searchable={false} />

package/dist/components/VTree/VTreeCustomizationDemo.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VTreeCustomizationDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VTreeCustomizationDemo = InstanceType<typeof VTreeCustomizationDemo>;
+export default VTreeCustomizationDemo;

package/dist/components/VTree/VTreeEventsDemo.svelte

@@ -1,61 +1,51 @@
-<script lang="ts">
-  // @ts-nocheck
-  import VTree from './VTree.svelte';
-  import type { VTreeContextMenuItem, VTreeRecord } from './types.js';
-
-  interface DemoNode extends VTreeRecord {
-    id: string;
-    label: string;
-    description?: string;
-    children?: DemoNode[];
-    hasChildren?: boolean;
-  }
-
-  const data: DemoNode[] = [
-    {
-      id: 'alpha',
-      label: 'Alpha Team',
-      description: 'Top-level group',
-      hasChildren: true,
-      children: [
-        { id: 'alpha-1', label: 'Alpha User 1', description: 'Owner' },
-        { id: 'alpha-2', label: 'Alpha User 2', description: 'Contributor' }
-      ]
-    },
-    {
-      id: 'beta',
-      label: 'Beta Team',
-      description: 'Top-level group',
-      hasChildren: true,
-      children: [
-        { id: 'beta-1', label: 'Beta User 1', description: 'Owner' },
-        { id: 'beta-2', label: 'Beta User 2', description: 'Contributor' }
-      ]
-    }
-  ];
-
-  let eventLog = $state('No row event yet.');
-
-  function printEvent(kind: string, row: DemoNode | null, treeData: DemoNode[]) {
-    eventLog = `${kind}: ${row?.label ?? 'null'} | tree roots: ${treeData.length}`;
-  }
-
-  const menuItems: VTreeContextMenuItem<DemoNode>[] = [
-    {
-      id: 'open',
-      label: 'Open',
-      onselect: (row) => {
-        eventLog = `menu: open -> ${row?.label ?? 'null'}`;
-      }
-    },
-    {
-      id: 'inspect',
-      label: 'Inspect Node',
-      onselect: (row, treeData) => {
-        eventLog = `menu: inspect -> ${row.id} (roots: ${treeData.length})`;
-      }
-    }
-  ];
+<script lang="ts">// @ts-nocheck
+import VTree from "./VTree.svelte";
+const data = [{
+	id: "alpha",
+	label: "Alpha Team",
+	description: "Top-level group",
+	hasChildren: true,
+	children: [{
+		id: "alpha-1",
+		label: "Alpha User 1",
+		description: "Owner"
+	}, {
+		id: "alpha-2",
+		label: "Alpha User 2",
+		description: "Contributor"
+	}]
+}, {
+	id: "beta",
+	label: "Beta Team",
+	description: "Top-level group",
+	hasChildren: true,
+	children: [{
+		id: "beta-1",
+		label: "Beta User 1",
+		description: "Owner"
+	}, {
+		id: "beta-2",
+		label: "Beta User 2",
+		description: "Contributor"
+	}]
+}];
+let eventLog = $state("No row event yet.");
+function printEvent(kind, row, treeData) {
+	eventLog = `${kind}: ${row?.label ?? "null"} | tree roots: ${treeData.length}`;
+}
+const menuItems = [{
+	id: "open",
+	label: "Open",
+	onselect: (row) => {
+		eventLog = `menu: open -> ${row?.label ?? "null"}`;
+	}
+}, {
+	id: "inspect",
+	label: "Inspect Node",
+	onselect: (row, treeData) => {
+		eventLog = `menu: inspect -> ${row.id} (roots: ${treeData.length})`;
+	}
+}];
 </script>
 
 {#snippet leftContent(args)}

package/dist/components/VTree/VTreeInteractionDemo.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">import VTree from "./VTree.svelte";
+const data = [{
+	id: "a",
+	label: "Press/hover me",
+	children: [{
+		id: "b",
+		label: "Child row"
+	}]
+}];
+let events = [];
+const log = (name) => (node) => {
+	events = [`${name}: ${String(node.label)}`, ...events].slice(0, 8);
+};
+</script>
+
+<div class="space-y-2">
+  <VTree
+    {data}
+    searchable={false}
+    onclick={log('click')}
+    onsingleclick={log('single')}
+    ondoubleclick={log('double')}
+    onlongpress={log('long')}
+    onrowhover={(node) => { events = [`hover: ${String(node.label)}`, ...events].slice(0, 8); }}
+  />
+  <ul class="text-xs">
+    {#each events as event, i (i)}<li>{event}</li>{/each}
+  </ul>
+</div>

package/dist/components/VTree/VTreeInteractionDemo.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VTreeInteractionDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VTreeInteractionDemo = InstanceType<typeof VTreeInteractionDemo>;
+export default VTreeInteractionDemo;

package/dist/components/VTree/VTreeMultiSelectDemo.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">import VTree from "./VTree.svelte";
+const data = [
+	{
+		id: "a",
+		label: "Alpha"
+	},
+	{
+		id: "b",
+		label: "Beta"
+	},
+	{
+		id: "c",
+		label: "Gamma"
+	}
+];
+let selectedItems = [];
+let selectionMode = "checkbox";
+</script>
+
+<div class="space-y-2">
+  <select bind:value={selectionMode}>
+    <option value="checkbox">checkbox</option>
+    <option value="modifier">modifier</option>
+  </select>
+  <VTree {data} multiple {selectionMode} {selectedItems} onSelectedItemsChange={(items) => selectedItems = items} searchable={false} />
+  <p class="text-xs">Selected: {selectedItems.map((item) => item.label).join(', ') || 'none'}</p>
+</div>

package/dist/components/VTree/VTreeMultiSelectDemo.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const VTreeMultiSelectDemo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VTreeMultiSelectDemo = InstanceType<typeof VTreeMultiSelectDemo>;
+export default VTreeMultiSelectDemo;