@keenmate/svelte-treeview 1.2.12 → 3.0.0

package/dist/menu/Menu.svelte

@@ -1,50 +1,50 @@
-<!-- component from https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0 -->
-
-<script>
-	// @ts-nocheck
-
-	import { onMount, setContext, createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { key } from './menu.js';
-
-	export let x;
-	export let y;
-
-	// whenever x and y is changed, restrict box to be within bounds
-	$: (() => {
-		if (!menuEl) return;
-
-		const rect = menuEl.getBoundingClientRect();
-		x = Math.min(window.innerWidth - rect.width, x);
-		if (y > window.innerHeight - rect.height) y -= rect.height;
-	})(x, y);
-
-	const dispatch = createEventDispatcher();
-
-	setContext(key, {
-		dispatchClick: () => dispatch('click')
-	});
-
-	let menuEl;
-	function onPageClick(e) {
-		if (e.target === menuEl || menuEl.contains(e.target)) return;
-		dispatch('clickoutside');
-	}
-</script>
-
-<svelte:body on:click={onPageClick} />
-
-<div transition:fade={{ duration: 100 }} bind:this={menuEl} style="top: {y}px; left: {x}px;">
-	<slot />
-</div>
-
-<style>
-	div {
-		position: fixed;
-		display: grid;
-		border: 1px solid #0003;
-		box-shadow: 2px 2px 5px 0px #0002;
-		background: white;
-		z-index: 999;
-	}
-</style>
+<!-- component from https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1?version=3.25.0 -->
+
+<script lang="ts">import { run } from 'svelte/legacy';
+// @ts-nocheck
+import { createEventDispatcher, setContext } from "svelte";
+import { fade } from "svelte/transition";
+import { key } from "./menu.js";
+let { x = $bindable(), y = $bindable(), children } = $props();
+const dispatch = createEventDispatcher();
+setContext(key, {
+    dispatchClick: () => dispatch("click")
+});
+let menuEl = $state();
+function onPageClick(e) {
+    if (e.target === menuEl || menuEl.contains(e.target)) {
+        return;
+    }
+    dispatch("clickoutside");
+}
+// whenever x and y is changed, restrict box to be within bounds
+run(() => {
+    (() => {
+        if (!menuEl) {
+            return;
+        }
+        const rect = menuEl.getBoundingClientRect();
+        x = Math.min(window.innerWidth - rect.width, x);
+        if (y > window.innerHeight - rect.height) {
+            y -= rect.height;
+        }
+    })(x, y);
+});
+</script>
+
+<svelte:body onclick={onPageClick} />
+
+<div transition:fade={{ duration: 100 }} bind:this={menuEl} style="top: {y}px; left: {x}px;">
+	{@render children?.()}
+</div>
+
+<style>
+	div {
+		position: fixed;
+		display: grid;
+		border: 1px solid #0003;
+		box-shadow: 2px 2px 5px 0px #0002;
+		background: white;
+		z-index: 999;
+	}
+</style>

package/dist/menu/Menu.svelte.d.ts

@@ -1,35 +1,25 @@
-/** @typedef {typeof __propDef.props}  MenuProps */
-/** @typedef {typeof __propDef.events}  MenuEvents */
-/** @typedef {typeof __propDef.slots}  MenuSlots */
-export default class Menu extends SvelteComponent<{
-    x: any;
-    y: any;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Menu: $$__sveltets_2_IsomorphicComponent<{
+    x?: any;
+    y?: any;
+    children: any;
 }, {
     click: CustomEvent<any>;
     clickoutside: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type MenuProps = typeof __propDef.props;
-export type MenuEvents = typeof __propDef.events;
-export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        x: any;
-        y: any;
-    };
-    events: {
-        click: CustomEvent<any>;
-        clickoutside: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+}, {}, {}, "x" | "y">;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

package/dist/menu/MenuDivider.svelte

@@ -1,10 +1,10 @@
-<style>
-	hr {
-		border-top: 1px solid #0003;
-		width: 100%;
-		margin: 2px 0;
-	}
-</style>
-
-
-<hr />
+<style>
+	hr {
+		border-top: 1px solid #0003;
+		width: 100%;
+		margin: 2px 0;
+	}
+</style>
+
+
+<hr />

package/dist/menu/MenuDivider.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  MenuDividerProps */
-/** @typedef {typeof __propDef.events}  MenuDividerEvents */
-/** @typedef {typeof __propDef.slots}  MenuDividerSlots */
-export default class MenuDivider extends SvelteComponent<{
+export default MenuDivider;
+type MenuDivider = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type MenuDividerProps = typeof __propDef.props;
-export type MenuDividerEvents = typeof __propDef.events;
-export type MenuDividerSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const MenuDivider: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}

package/dist/menu/MenuOption.svelte

@@ -1,49 +1,45 @@
-<script>
-	// @ts-nocheck
-
-	import { onMount, getContext } from 'svelte';
-	import { key } from './menu.js';
-
-	export let isDisabled = false;
-	export let text = '';
-
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
-	const { dispatchClick } = getContext(key);
-
-	const handleClick = (e) => {
-		if (isDisabled) return;
-
-		dispatch('click');
-		dispatchClick();
-	};
-</script>
-
-<div class:disabled={isDisabled} on:click={handleClick} on:keydown={handleClick} role="button" tabindex="">
-	{#if text}
-		{text}
-	{:else}
-		<slot />
-	{/if}
-</div>
-
-<style>
-	div {
-		padding: 4px 15px;
-		cursor: default;
-		font-size: 14px;
-		display: flex;
-		align-items: center;
-		grid-gap: 5px;
-	}
-	div:hover {
-		background: #0002;
-	}
-	div.disabled {
-		color: #0006;
-	}
-	div.disabled:hover {
-		background: white;
-	}
-</style>
+<script lang="ts">// @ts-nocheck
+import { createEventDispatcher, getContext } from "svelte";
+import { key } from "./menu.js";
+let { isDisabled = false, text = "", children } = $props();
+const dispatch = createEventDispatcher();
+const { dispatchClick } = getContext(key);
+const handleClick = (e) => {
+    if (isDisabled) {
+        return;
+    }
+    dispatch("click");
+    dispatchClick();
+};
+</script>
+
+<div class:disabled={isDisabled} onclick={handleClick} onkeydown={handleClick} role="button" tabindex="">
+	{#if text}
+		{text}
+	{:else}
+		{@render children?.()}
+	{/if}
+</div>
+
+<style>
+	div {
+		padding: 4px 15px;
+		cursor: default;
+		font-size: 14px;
+		display: flex;
+		align-items: center;
+		grid-gap: 5px;
+	}
+
+	div:hover {
+		background: #0002;
+	}
+
+	div.disabled {
+		color: #0006;
+	}
+
+	div.disabled:hover {
+		background: white;
+	}
+</style>

package/dist/menu/MenuOption.svelte.d.ts

@@ -1,33 +1,25 @@
-/** @typedef {typeof __propDef.props}  MenuOptionProps */
-/** @typedef {typeof __propDef.events}  MenuOptionEvents */
-/** @typedef {typeof __propDef.slots}  MenuOptionSlots */
-export default class MenuOption extends SvelteComponent<{
-    isDisabled?: boolean | undefined;
-    text?: string | undefined;
-}, {
+interface Props {
+    isDisabled?: boolean;
+    text?: string;
+    children?: import('svelte').Snippet;
+}
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MenuOption: $$__sveltets_2_IsomorphicComponent<Props, {
     click: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type MenuOptionProps = typeof __propDef.props;
-export type MenuOptionEvents = typeof __propDef.events;
-export type MenuOptionSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        isDisabled?: boolean | undefined;
-        text?: string | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};
+}, {}, {}, "">;
+type MenuOption = InstanceType<typeof MenuOption>;
+export default MenuOption;

package/dist/menu/menu.js

@@ -1,3 +1,3 @@
-const key = {};
-
-export { key };
+const key = {}
+
+export {key}

package/dist/providers/drag-drop-provider.d.ts

@@ -1,5 +1,5 @@
-import type { TreeHelper } from '../helpers/tree-helper.js';
-import { type Node, InsertionType } from '../types.js';
+import type { TreeHelper } from "../helpers/tree-helper.js";
+import { InsertionType, type Node } from "../types.js";
 export declare class DragDropProvider {
     helper: TreeHelper;
     constructor(treeHelper: TreeHelper);

package/dist/providers/drag-drop-provider.js

@@ -1,4 +1,4 @@
-import { InsertionType } from '../types.js';
+import { InsertionType } from "../types.js";
 export class DragDropProvider {
     helper;
     constructor(treeHelper) {

package/dist/providers/movement-provider.d.ts

@@ -1,5 +1,5 @@
-import type { TreeHelper } from '../helpers/tree-helper.js';
-import { KeyboardMovement as MovementDirection, type Node } from '../types.js';
+import type { TreeHelper } from "../helpers/tree-helper.js";
+import { KeyboardMovement as MovementDirection, type Node } from "../types.js";
 export declare function calculateNewFocusedNode(helper: TreeHelper, tree: Node[], targetNode: Node, movementDirection: MovementDirection): {
     node: Node;
     setExpansion: boolean | null;

package/dist/providers/movement-provider.js

@@ -1,4 +1,4 @@
-import { KeyboardMovement as MovementDirection } from '../types.js';
+import { KeyboardMovement as MovementDirection } from "../types.js";
 export function calculateNewFocusedNode(helper, tree, targetNode, movementDirection) {
     // TODO this could use some refactoring
     const parentNodePath = helper.getParentNodePath(targetNode.path);
@@ -66,7 +66,7 @@ export function calculateNewFocusedNode(helper, tree, targetNode, movementDirect
             const parentNode = helper.findNode(tree, parentNodePath);
             // assertion
             if (!parentNode) {
-                console.warn('Parent node not found, this should never happen');
+                console.warn("Parent node not found, this should never happen");
                 return wrapReturn(targetNode);
             }
             return wrapReturn(parentNode);
@@ -75,13 +75,13 @@ export function calculateNewFocusedNode(helper, tree, targetNode, movementDirect
 }
 export function parseMovementDirection(key) {
     switch (key) {
-        case 'ArrowRight':
+        case "ArrowRight":
             return MovementDirection.Right;
-        case 'ArrowLeft':
+        case "ArrowLeft":
             return MovementDirection.Left;
-        case 'ArrowDown':
+        case "ArrowDown":
             return MovementDirection.Down;
-        case 'ArrowUp':
+        case "ArrowUp":
             return MovementDirection.Up;
         default:
             return null;
@@ -95,7 +95,8 @@ function getRelativeSibling(helper, tree, node, relativeIndex) {
     const parentDirectChildren = helper.getDirectChildren(tree, parentNodePath);
     const nodeIndex = parentDirectChildren.findIndex((x) => x.path === node.path);
     const siblingIndex = nodeIndex + relativeIndex;
-    if (siblingIndex < 0 || siblingIndex >= parentDirectChildren.length)
+    if (siblingIndex < 0 || siblingIndex >= parentDirectChildren.length) {
         return null;
+    }
     return parentDirectChildren[siblingIndex];
 }

package/dist/providers/selection-provider.d.ts

@@ -1,5 +1,5 @@
-import type { TreeHelper } from '../helpers/tree-helper.js';
-import { SelectionModes, type Tree, type TreeVisualStates, type Node, type NodeId } from '../types.js';
+import type { TreeHelper } from "../helpers/tree-helper.js";
+import { type Node, type NodeId, SelectionModes, type Tree, type TreeVisualStates } from "../types.js";
 export declare class SelectionProvider {
     helper: TreeHelper;
     recursiveMode: boolean;

package/dist/providers/selection-provider.js

@@ -1,4 +1,4 @@
-import { SelectionModes, VisualState } from '../types.js';
+import { SelectionModes, VisualState } from "../types.js";
 export class SelectionProvider {
     helper;
     recursiveMode;
@@ -9,13 +9,13 @@ export class SelectionProvider {
     markSelected(tree, selectedNodeIds) {
         const visualStates = this.computeVisualStates(tree, selectedNodeIds);
         tree.forEach((node) => {
-            if (selectedNodeIds.includes(node.id ?? '')) {
+            if (selectedNodeIds.includes(node.id ?? "")) {
                 node.selected = true;
                 node.visualState = VisualState.selected;
                 return;
             }
             node.selected = false;
-            const visualState = visualStates[node.id ?? ''];
+            const visualState = visualStates[node.id ?? ""];
             if (!visualState) {
                 node.visualState = VisualState.notSelected;
             }
@@ -27,8 +27,9 @@ export class SelectionProvider {
     }
     isSelected(nodeId, visualStates, selectedNodeIds) {
         const selected = selectedNodeIds.includes(nodeId);
-        if (selected)
+        if (selected) {
             return true;
+        }
         const visualState = visualStates[nodeId];
         return visualState === VisualState.selected;
     }
@@ -47,10 +48,10 @@ export class SelectionProvider {
         else {
             if (!node) {
                 // throw new Error('Node not found ' + nodePath);
-                console.warn('Node %s doesnt exits', nodePath);
+                console.warn("Node %s doesnt exits", nodePath);
                 return oldSelection;
             }
-            const nodeId = node.id ?? '';
+            const nodeId = node.id ?? "";
             // prevent double selection
             const filteredSelection = oldSelection.filter((x) => x !== nodeId);
             if (changeTo === false) {
@@ -68,14 +69,15 @@ export class SelectionProvider {
         rootELements.forEach((node) => {
             if (node.hasChildren == true) {
                 const result = this.computeVisualStateRecursively(tree, node, selectedNodeIds, visualStates);
-                visualStates[node.id ?? ''] = result.state;
+                visualStates[node.id ?? ""] = result.state;
             }
         });
         return visualStates;
     }
     computeVisualState(directChildrenVisualStates) {
-        if (!directChildrenVisualStates || directChildrenVisualStates?.length == 0)
+        if (!directChildrenVisualStates || directChildrenVisualStates?.length == 0) {
             return VisualState.selected;
+        }
         //if every child is selected or vs=true return true
         if (directChildrenVisualStates.every((state) => state === VisualState.selected)) {
             return VisualState.selected;
@@ -101,14 +103,14 @@ export class SelectionProvider {
         // using recustion compute from leaft nodes to root
         directChildren.forEach((child) => {
             if (!child.hasChildren) {
-                const childState = selectedNodeIds.includes(child.id ?? '')
+                const childState = selectedNodeIds.includes(child.id ?? "")
                     ? VisualState.selected
                     : VisualState.notSelected;
                 directChildrenStates.push(childState);
                 return;
             }
             const result = this.computeVisualStateRecursively(tree, child, selectedNodeIds, visualStates);
-            visualStates[child.id ?? ''] = result.state;
+            visualStates[child.id ?? ""] = result.state;
             if (!result.ignore) {
                 directChildrenStates.push(result.state);
             }
@@ -121,7 +123,7 @@ export class SelectionProvider {
         let newSelection = [...oldSelection];
         tree.forEach((node) => {
             // match itself and all children
-            if (node.path?.startsWith(parentNodePath ? parentNodePath + this.helper.config.separator : '')) {
+            if (node.path?.startsWith(parentNodePath ? parentNodePath + this.helper.config.separator : "")) {
                 //don't change if not selectable
                 if (!isSelectable(node, SelectionModes.all)) {
                     return;
@@ -131,9 +133,9 @@ export class SelectionProvider {
                     return;
                 }
                 // prevent double selection
-                newSelection = newSelection.filter((x) => x !== (node.id ?? ''));
+                newSelection = newSelection.filter((x) => x !== (node.id ?? ""));
                 if (changeTo === true) {
-                    newSelection.push(node.id ?? '');
+                    newSelection.push(node.id ?? "");
                 }
             }
         });