@keenmate/svelte-treeview 2.0.0 → 3.1.0

package/dist/Branch.svelte

@@ -1,35 +1,18 @@
-<script>import { createEventDispatcher } from "svelte";
+<script lang="ts">import Branch from "./Branch.svelte";
 import Checkbox from "./Checkbox.svelte";
 import { InsertionType, SelectionModes } from "./types.js";
 import { capturedKeys } from "./constants.js";
-const dispatch = createEventDispatcher();
-export let tree;
-export let treeId;
-export let recursive = false;
-export let checkboxes = SelectionModes.none;
-export let onlyLeafCheckboxes;
-export let hideDisabledCheckboxes;
-export let dragAndDrop;
-export let verticalLines;
-export let readonly;
-export let expandTo;
-export let classes;
-export let helper;
-export let childDepth;
-export let branchRootNode;
-export let draggedNode;
-export let highlightedNode;
-export let insertionType;
-export let focusedNode;
-export let allowKeyboardNavigation;
-let liElements = {};
+let { tree, treeId, recursive = false, checkboxes = SelectionModes.none, onlyLeafCheckboxes, hideDisabledCheckboxes, dragAndDrop, verticalLines, readonly, expandTo, classes, helper, childDepth, branchRootNode, draggedNode, highlightedNode, insertionType, focusedNode, allowKeyboardNavigation, onOpenCtxmenu = undefined, internal_onExpand = undefined, internal_onSelectionChanged = undefined, internal_onHandleDragStart = undefined, internal_onHandleDragDrop = undefined, internal_onHandleDragOver = undefined, internal_onHandleDragEnter = undefined, internal_onHandleDragEnd = undefined, internal_onHandleDragLeave = undefined, internal_onKeypress = undefined, children, nestHighlight } = $props();
+let liElements = $state({});
 const getNodeId = (node) => `${treeId}-${node.path}`;
-$: directChildren = helper.getDirectChildren(tree, branchRootNode?.path ?? null);
-$: if (focusedNode && liElements[getNodeId(focusedNode)]) {
-    liElements[getNodeId(focusedNode)].focus();
-}
+let directChildren = $derived(helper.getDirectChildren(tree, branchRootNode?.path ?? null));
+$effect(() => {
+    if (focusedNode && liElements[getNodeId(focusedNode)]) {
+        liElements[getNodeId(focusedNode)].focus();
+    }
+});
 function setExpansion(node, changeTo) {
-    dispatch("internal-expand", { node: node, changeTo });
+    internal_onExpand?.({ node: node, changeTo });
 }
 function isExpanded(node, depth, expandToDepth) {
     const nodeExpanded = node.expanded;
@@ -41,26 +24,31 @@ function isExpanded(node, depth, expandToDepth) {
 }
 //checkboxes
 function selectionChanged(node) {
-    dispatch("internal-selectionChanged", { node: node });
+    internal_onSelectionChanged?.({ node: node });
 }
 // drag and drop
 function handleDragStart(e, node) {
-    dispatch("internal-handleDragStart", { node: node, e: e });
+    internal_onHandleDragStart?.({ node: node, event: e });
 }
 function handleDragDrop(e, node, el) {
-    dispatch("internal-handleDragDrop", { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragDrop?.({ node: node, event: e, element: el });
 }
 function handleDragOver(e, node, el, nest) {
-    dispatch("internal-handleDragOver", { node: node, event: e, element: el, nest });
+    e.stopImmediatePropagation();
+    internal_onHandleDragOver?.({ node: node, event: e, element: el, nest });
 }
 function handleDragEnter(e, node, el) {
-    dispatch("internal-handleDragEnter", { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragEnter?.({ node: node, event: e, element: el });
 }
 function handleDragEnd(e, node) {
-    dispatch("internal-handleDragEnd", { node: node, event: e });
+    e.stopImmediatePropagation();
+    internal_onHandleDragEnd?.({ node: node, event: e });
 }
 function handleDragLeave(e, node, el) {
-    dispatch("internal-handleDragLeave", { node: node, event: e, element: el });
+    e.stopImmediatePropagation();
+    internal_onHandleDragLeave?.({ node: node, event: e, element: el });
 }
 function handleKeyPress(e, node) {
     if (!capturedKeys.includes(e.key)) {
@@ -68,7 +56,7 @@ function handleKeyPress(e, node) {
     }
     e.preventDefault();
     e.stopPropagation();
-    dispatch("internal-keypress", { event: e, node });
+    internal_onKeypress?.({ event: e, node });
 }
 function getHighlighMode(node, highlightedNode, insertionType) {
     // return InsertionType.insertAbove;
@@ -77,6 +65,10 @@ function getHighlighMode(node, highlightedNode, insertionType) {
     }
     return insertionType;
 }
+function onContextMenu(ev, node) {
+    ev.stopImmediatePropagation();
+    onOpenCtxmenu({ ev, node });
+}
 </script>
 
 <ul
@@ -85,35 +77,32 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 	class={childDepth === 0 ? classes.treeClass : ''}
 >
 	<!-- TODO fix accessibility -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	{#each directChildren as node (getNodeId(node))}
 		{@const expanded = isExpanded(node, childDepth, expandTo)}
 		{@const draggable = !readonly && dragAndDrop && !node.dragDisabled}
 		{@const isCurrentlyDragged = draggedNode && node.path.startsWith(draggedNode?.path)}
 		{@const effectiveHighlight = getHighlighMode(node, highlightedNode, insertionType)}
-		<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 		<li
 			class:is-child={helper.nodePathIsChild(node.path)}
 			class:has-children={node.hasChildren}
-			on:contextmenu|stopPropagation={(e) => {
-				dispatch('open-ctxmenu', { e, node });
-			}}
-			on:drop|stopPropagation={(e) => handleDragDrop(e, node, liElements[getNodeId(node)])}
-			on:dragover|stopPropagation={(e) =>
-				handleDragOver(e, node, liElements[getNodeId(node)], false)}
-			on:dragenter|stopPropagation={(e) => handleDragEnter(e, node, liElements[getNodeId(node)])}
-			on:dragleave|stopPropagation={(e) => handleDragLeave(e, node, liElements[getNodeId(node)])}
+			oncontextmenu={e => onContextMenu(e, node)}
+			ondrop={e => handleDragDrop(e, node, liElements[getNodeId(node)])}
+			ondragover={e => handleDragOver(e, node, liElements[getNodeId(node)], false)}
+			ondragenter={e => handleDragEnter(e, node, liElements[getNodeId(node)])}
+			ondragleave={e => handleDragLeave(e, node, liElements[getNodeId(node)])}
 			bind:this={liElements[getNodeId(node)]}
-			on:keydown={(e) => handleKeyPress(e, node)}
+			onkeydown={(e) => handleKeyPress(e, node)}
 			tabindex={allowKeyboardNavigation ? 1 : -1}
 		>
 			{#if effectiveHighlight == InsertionType.insertAbove}
 				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.insertLineClass}" />
+					<div class="insert-line {classes.insertLineClass}"></div>
 				</div>
 			{/if}
 
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class="tree-item
 				{effectiveHighlight === InsertionType.nest ? classes.expandClass : ''}
@@ -121,20 +110,20 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 				class:div-has-children={node.hasChildren}
 				class:hover={effectiveHighlight !== InsertionType.none}
 				{draggable}
-				on:dragstart={(e) => handleDragStart(e, node)}
-				on:dragend={(e) => handleDragEnd(e, node)}
+				ondragstart={(e) => handleDragStart(e, node)}
+				ondragend={(e) => handleDragEnd(e, node)}
 			>
 				{#if node.hasChildren}
 					<button
 						class="expansion-button arrow"
-						on:click={() => setExpansion(node, !expanded)}
+						onclick={() => setExpansion(node, !expanded)}
 						type="button"
 						tabindex="-1"
 					>
-						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}" />
+						<i class="fixed-icon arrow {expanded ? classes.collapseIcon : classes.expandIcon}"></i>
 					</button>
 				{:else}
-					<span class="fixed-icon" />
+					<span class="fixed-icon"></span>
 				{/if}
 
 				<Checkbox
@@ -147,24 +136,23 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 					on:select={({ detail: { node } }) => selectionChanged(node)}
 				/>
 				<span class:pointer-cursor={draggable}>
-					<slot node={node.originalNode} />
+					{@render children?.({node: node.originalNode,})}
 				</span>
 
 				{#if dragAndDrop && node.nestAllowed}
 					<span
-						on:dragover|stopPropagation={(e) =>
-							handleDragOver(e, node, liElements[getNodeId(node)], true)}
+						ondragover={e => handleDragOver(e, node, liElements[getNodeId(node)], true)}
 					>
-						<i class="fixed-icon {classes.nestIcon}" />
+						<i class="fixed-icon {classes.nestIcon}"></i>
 
 						{#if effectiveHighlight === InsertionType.nest}
-							<slot name="nest-highlight" />
+							{@render nestHighlight?.()}
 						{/if}
 					</span>
 				{/if}
 			</div>
 			{#if expanded && node.hasChildren}
-				<svelte:self
+				<Branch
 					branchRootNode={node}
 					childDepth={childDepth + 1}
 					{treeId}
@@ -184,31 +172,27 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 					{insertionType}
 					{focusedNode}
 					{allowKeyboardNavigation}
-					on:open-ctxmenu
-					on:internal-expand
-					on:internal-selectionChanged
-					on:internal-handleDragStart
-					on:internal-handleDragDrop
-					on:internal-handleDragOver
-					on:internal-handleDragEnter
-					on:internal-handleDragEnd
-					on:internal-handleDragLeave
-					on:internal-keypress
-					let:node={nodeNested}
-				>
-					<slot node={nodeNested} />
-					<svelte:fragment slot="nest-highlight">
-						<slot name="nest-highlight" />
-					</svelte:fragment>
-				</svelte:self>
+					{children}
+					{nestHighlight}
+					{onOpenCtxmenu}
+					{internal_onExpand}
+					{internal_onSelectionChanged}
+					{internal_onHandleDragStart}
+					{internal_onHandleDragDrop}
+					{internal_onHandleDragOver}
+					{internal_onHandleDragEnter}
+					{internal_onHandleDragEnd}
+					{internal_onHandleDragLeave}
+					{internal_onKeypress}
+				/>
 			{/if}
 			{#if !expanded && node.hasChildren}
-				<ul class:child-menu={childDepth > 0} />
+				<ul class:child-menu={childDepth > 0}></ul>
 			{/if}
 			<!-- Show line if insering -->
 			{#if effectiveHighlight === InsertionType.insertBelow}
 				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.insertLineClass}" />
+					<div class="insert-line {classes.insertLineClass}"></div>
 				</div>
 			{/if}
 		</li>

package/dist/Branch.svelte.d.ts

@@ -1,52 +1,70 @@
-import { SvelteComponent } from "svelte";
+import Branch from "./Branch.svelte";
 import { type CustomizableClasses, InsertionType, type Node, SelectionModes } from "./types.js";
 import type { TreeHelper } from "./helpers/tree-helper.js";
-declare const __propDef: {
-    props: {
-        tree: Node[];
-        treeId: string;
-        recursive?: boolean | undefined;
-        checkboxes?: SelectionModes | undefined;
-        onlyLeafCheckboxes: boolean;
-        hideDisabledCheckboxes: boolean;
-        dragAndDrop: boolean;
-        verticalLines: boolean;
-        readonly: boolean;
-        expandTo: number;
-        classes: CustomizableClasses;
-        helper: TreeHelper;
-        childDepth: number;
-        branchRootNode: Node | null;
-        draggedNode: Node | null;
-        highlightedNode: Node | null;
-        insertionType: InsertionType;
-        focusedNode: Node | null;
-        allowKeyboardNavigation: boolean;
-    };
-    events: {
-        'open-ctxmenu': CustomEvent<any>;
-        'internal-expand': CustomEvent<any>;
-        'internal-selectionChanged': CustomEvent<any>;
-        'internal-handleDragStart': CustomEvent<any>;
-        'internal-handleDragDrop': CustomEvent<any>;
-        'internal-handleDragOver': CustomEvent<any>;
-        'internal-handleDragEnter': CustomEvent<any>;
-        'internal-handleDragEnd': CustomEvent<any>;
-        'internal-handleDragLeave': CustomEvent<any>;
-        'internal-keypress': CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            node: any;
-        };
-        'nest-highlight': {};
-    };
-};
-export type BranchProps = typeof __propDef.props;
-export type BranchEvents = typeof __propDef.events;
-export type BranchSlots = typeof __propDef.slots;
-export default class Branch extends SvelteComponent<BranchProps, BranchEvents, BranchSlots> {
+interface Props {
+    tree: Node[];
+    treeId: string;
+    recursive?: boolean;
+    checkboxes?: SelectionModes;
+    onlyLeafCheckboxes: boolean;
+    hideDisabledCheckboxes: boolean;
+    dragAndDrop: boolean;
+    verticalLines: boolean;
+    readonly: boolean;
+    expandTo: number;
+    classes: CustomizableClasses;
+    helper: TreeHelper;
+    childDepth: number;
+    branchRootNode: Node | null;
+    draggedNode: Node | null;
+    highlightedNode: Node | null;
+    insertionType: InsertionType;
+    focusedNode: Node | null;
+    allowKeyboardNavigation: boolean;
+    onOpenCtxmenu?: () => void;
+    internal_onExpand?: ({ node: any, changeTo: boolean }: {
+        node: any;
+        changeTo: any;
+    }) => void;
+    internal_onSelectionChanged?: ({ node: any }: {
+        node: any;
+    }) => void;
+    internal_onHandleDragStart?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    internal_onHandleDragDrop?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onHandleDragOver?: ({ node: any, event: any, element: any, nest: any }: {
+        node: any;
+        event: any;
+        element: any;
+        nest: any;
+    }) => void;
+    internal_onHandleDragEnter?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onHandleDragEnd?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    internal_onHandleDragLeave?: ({ node: any, event: any, element: any }: {
+        node: any;
+        event: any;
+        element: any;
+    }) => void;
+    internal_onKeypress?: ({ node: any, event: any }: {
+        node: any;
+        event: any;
+    }) => void;
+    children?: import("svelte").Snippet<[any]>;
+    nestHighlight?: import("svelte").Snippet;
 }
-export {};
+declare const Branch: import("svelte").Component<Props, {}, "">;
+type Branch = ReturnType<typeof Branch>;
+export default Branch;

package/dist/Checkbox.svelte

@@ -1,12 +1,9 @@
-<script>import { createEventDispatcher } from "svelte";
+<script lang="ts">import { createBubbler, preventDefault, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import { createEventDispatcher } from "svelte";
 import { SelectionModes, VisualState } from "./types.js";
 import { isSelectable } from "./providers/selection-provider.js";
-export let checkboxes;
-export let recursive;
-export let node;
-export let onlyLeafCheckboxes;
-export let hideDisabledCheckboxes;
-export let readonly = false;
+let { checkboxes, recursive, node, onlyLeafCheckboxes, hideDisabledCheckboxes, readonly = false } = $props();
 const dispatch = createEventDispatcher();
 function onSelect(e, node) {
     // e.preventDefault();
@@ -22,8 +19,8 @@ function onSelect(e, node) {
 				tabindex="-1"
 				type="checkbox"
 				class="arrow"
-				on:click={(e) => onSelect(e, node)}
-				on:keypress={(e) => e.key === 'Enter' && onSelect(e, node)}
+				onclick={(e) => onSelect(e, node)}
+				onkeypress={(e) => e.key === 'Enter' && onSelect(e, node)}
 				checked={node.visualState === VisualState.selected}
 				indeterminate={node.visualState === VisualState.indeterminate}
 				disabled={readonly}
@@ -33,7 +30,7 @@ function onSelect(e, node) {
 				tabindex="-1"
 				class="arrow"
 				type="checkbox"
-				on:click={null}
+				onclick={null}
 				disabled={true}
 				checked={node.visualState === VisualState.selected}
 				indeterminate={node.visualState === VisualState.indeterminate}
@@ -45,7 +42,7 @@ function onSelect(e, node) {
 			tabindex="-1"
 			class="arrow"
 			type="checkbox"
-			on:click|preventDefault|stopPropagation
+			onclick={stopPropagation(preventDefault(bubble('click')))}
 			disabled={true}
 			class:invisible={hideDisabledCheckboxes}
 		/>

package/dist/Checkbox.svelte.d.ts

@@ -1,25 +1,29 @@
-import { SvelteComponent } from "svelte";
 import { type Node, SelectionModes } from "./types.js";
-declare const __propDef: {
-    props: {
-        checkboxes: SelectionModes;
-        recursive: boolean;
-        node: Node;
-        onlyLeafCheckboxes: boolean;
-        hideDisabledCheckboxes: boolean;
-        readonly?: boolean | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    checkboxes: SelectionModes;
+    recursive: boolean;
+    node: Node;
+    onlyLeafCheckboxes: boolean;
+    hideDisabledCheckboxes: boolean;
+    readonly?: boolean;
+}
+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;
     };
-    slots: {};
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<Props, {
+    select: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Checkbox = InstanceType<typeof Checkbox>;
+export default Checkbox;