@keenmate/svelte-treeview 1.2.12 → 3.0.0

package/dist/Checkbox.svelte

@@ -1,53 +1,50 @@
-<script>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;
+<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";
+let { checkboxes, recursive, node, onlyLeafCheckboxes, hideDisabledCheckboxes, readonly = false } = $props();
 const dispatch = createEventDispatcher();
 function onSelect(e, node) {
     // e.preventDefault();
-    dispatch('select', { node });
+    dispatch("select", { node });
     return false;
 }
-</script>
-
-{#if checkboxes == SelectionModes.perNode || checkboxes == SelectionModes.all}
-	{#if isSelectable(node, checkboxes)}
-		{#if !recursive || (recursive && !node.hasChildren) || !onlyLeafCheckboxes}
-			<input
-				tabindex="-1"
-				type="checkbox"
-				class="arrow"
-				on:click={(e) => onSelect(e, node)}
-				on:keypress={(e) => e.key === 'Enter' && onSelect(e, node)}
-				checked={node.visualState === VisualState.selected}
-				indeterminate={node.visualState === VisualState.indeterminate}
-				disabled={readonly}
-			/>
-		{:else}
-			<input
-				tabindex="-1"
-				class="arrow"
-				type="checkbox"
-				on:click={null}
-				disabled={true}
-				checked={node.visualState === VisualState.selected}
-				indeterminate={node.visualState === VisualState.indeterminate}
-				class:invisible={hideDisabledCheckboxes}
-			/>
-		{/if}
-	{:else}
-		<input
-			tabindex="-1"
-			class="arrow"
-			type="checkbox"
-			on:click|preventDefault|stopPropagation
-			disabled={true}
-			class:invisible={hideDisabledCheckboxes}
-		/>
-	{/if}
-{/if}
+</script>
+
+{#if checkboxes == SelectionModes.perNode || checkboxes == SelectionModes.all}
+	{#if isSelectable(node, checkboxes)}
+		{#if !recursive || (recursive && !node.hasChildren) || !onlyLeafCheckboxes}
+			<input
+				tabindex="-1"
+				type="checkbox"
+				class="arrow"
+				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}
+			/>
+		{:else}
+			<input
+				tabindex="-1"
+				class="arrow"
+				type="checkbox"
+				onclick={null}
+				disabled={true}
+				checked={node.visualState === VisualState.selected}
+				indeterminate={node.visualState === VisualState.indeterminate}
+				class:invisible={hideDisabledCheckboxes}
+			/>
+		{/if}
+	{:else}
+		<input
+			tabindex="-1"
+			class="arrow"
+			type="checkbox"
+			onclick={stopPropagation(preventDefault(bubble('click')))}
+			disabled={true}
+			class:invisible={hideDisabledCheckboxes}
+		/>
+	{/if}
+{/if}

package/dist/Checkbox.svelte.d.ts

@@ -1,25 +1,29 @@
-import { SvelteComponent } from "svelte";
-import { SelectionModes, type Node } 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>;
+import { type Node, SelectionModes } from "./types.js";
+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;

package/dist/TreeView.svelte

@@ -1,136 +1,27 @@
-<script>import ContextMenu from './menu/ContextMenu.svelte';
-import { createEventDispatcher } from 'svelte';
-import { defaultClasses, defaultPropNames } from './constants.js';
-import { SelectionModes as SelectionModes, InsertionType } from './types.js';
-import { TreeHelper } from './index.js';
-import Branch from './Branch.svelte';
-import { SelectionProvider } from './providers/selection-provider.js';
-import { DragDropProvider } from './providers/drag-drop-provider.js';
-import uniq from 'lodash.uniq';
-import { calculateNewFocusedNode, parseMovementDirection } from './providers/movement-provider.js';
-const dispatch = createEventDispatcher();
-export let treeId;
-/**
- * Array of nodes that represent tree structure.
- * Each node should have unique path
- * All tree modifications are made by modifying this array, so you need to bind it to parent component
- */
-export let tree;
-/**
- * Node paths of selected nodes
- */
-export let value = [];
-/**
- * Object properties where information about node is stored
- */
-export let props = {};
-/**
- * Show vertical lines as visual guide
- */
-export let verticalLines = false;
-/**
- * Disables drag and drop and selection, expansion is still allowed
- */
-export let readonly = false;
-/**
- * Separator used to parse paths. It is used for getting node depth and getting parent node.
- * Default is '.'.
- */
-export let separator = '.';
-/**
- * only leaf nodes can be selected, non-leaf nodes only select/deselect its children.
- * Their visual state is calculated based on their children
- * If you set selected on non-leaf node, it will be ignored and may be deleted
- */
-export let recursiveSelection = false;
-/**
- * Controls if checkboxes are shown and how they behave. Default is none
- * TODO write about all the different modes
- * TODO find better name
- */
-export let selectionMode = SelectionModes.none;
-/**
- * By default, in recursive mode, non-leaf checkboxes will select/deselect all its children
- * If you set this to true, this behavior will be disabled and only leaf nodes will be selectable
- */
-export let onlyLeafCheckboxes = false; //bool
-/**
- * Instead of showing disabled checkboxes, show blank space
- */
-export let hideDisabledCheckboxes = false; //bool
-/**
- * Function that will be caged when node is expanded and useCallback is set to true
- * It should return array of nodes that will be added to tree
- * If it throws error, node will be collapsed,
- * but user will be able to open it again and callback will be called
- */
-export let loadChildrenAsync = null;
-/**
- * Show context menu on right click.
- * Its defined in slot context-menu
- */
-export let showContextMenu = false;
-// TODO stopped working in new version
-/**
- * Automatically expand nodes to this level,
- * any user made expansion will override this.
- */
-export let expandTo = 0;
-/**
- * Threshold for automatic expansion. If tree has less or equal nodes than this value,
- * all nodes will be expanded. Default is 0, which means no automatic expansion
- */
-export let expansionThreshold = 0;
-/**
- * Classes used in tree. You can override default classes with this prop.
- * It is recommended to use default classes and add additional styles in your css
- */
-export let customClasses = {};
-/**
- * Function used to filter what nodes should be shown.
- * Tree automatically adds all parents for nodes.
- * User Higher order functions for reactive search.
- * If you want to only search leaf nodes,
- * its your responsibility to check if its hasChildren property is false
- */
-export let filter = null;
-/**
- * Log function that will be called when something happens in tree.
- * Used mostly for debugging
- */
-export let logger = null;
-/*
- * Drag and drop mode allows all nodes, that don't have dragDisabled property set to true
- * to be dragged and dropped. By default you can only insert at same level node you are dropping on,
- * but you can allow nesting by setting nestAllowed to true on node. If you want to disable insertion,
- * set dropDisabled to true on node. if both is disabled, you wont be able to drop on node.
- */
-export let dragAndDrop = false; //bool
-/**
- * Callback that will be called when user drags above node.
- * It should return true, if drop is disabled on that node.
- */
-export let dropDisabledCallback = null;
-/**
- * If true, keyboard navigation will be enabled. Use arrow keys to navigate and space to select node.
- */
-export let allowKeyboardNavigation = false;
-let ctxMenu;
-let expandedPaths = [];
-let draggedNode = null;
-let highlightedNode = null;
-let insertionType = InsertionType.none;
-let focusedNode = null;
-$: computedClasses = { ...defaultClasses, ...(customClasses ?? {}) };
-$: dragAndDrop && console.warn('Drag and drop is not supported in this version');
-$: helper = new TreeHelper({
-    separator
-});
-$: dragAndDropProvider = new DragDropProvider(helper);
-$: selectionProvider = new SelectionProvider(helper, recursiveSelection);
-$: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedPaths, value);
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$props` rune but there's already a variable named props.
+     Rename the variable and try again or migrate by hand. -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (context-menu to context_menu) making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (nest-highlight to nest_highlight) making the component unusable -->
+<script lang="ts">import ContextMenu from "./menu/ContextMenu.svelte";
+import { defaultClasses, defaultPropNames } from "./constants.js";
+import { InsertionType, SelectionModes as SelectionModes } from "./types.js";
+import { TreeHelper } from "./index.js";
+import Branch from "./Branch.svelte";
+import { SelectionProvider } from "./providers/selection-provider.js";
+import { DragDropProvider } from "./providers/drag-drop-provider.js";
+import uniq from "lodash.uniq";
+import { calculateNewFocusedNode, parseMovementDirection } from "./providers/movement-provider.js";
+let { treeId, tree, value = [], treeProps = {}, verticalLines = false, readonly = false, separator = ".", recursiveSelection = false, selectionMode = SelectionModes.none, onlyLeafCheckboxes = false, hideDisabledCheckboxes = false, loadChildrenAsync = null, showContextMenu = false, expandTo = 0, expansionThreshold = 0, customClasses = {}, filter = null, logger = null, nodeSorter = null, dragAndDrop = false, dropDisabledCallback = null, allowKeyboardNavigation = false, onFocus = undefined, onFocusLeave = undefined, onExpansion = undefined, onExpanded = undefined, onClosed = undefined, onChange = undefined, onSelection = undefined, onSelected = undefined, onUnselected = undefined, onMoved = undefined, children, nestHighlight, contextMenu } = $props();
+let ctxMenu = $state();
+let expandedPaths = $state([]);
+let draggedNode = $state(null);
+let highlightedNode = $state(null);
+let insertionType = $state(InsertionType.none);
+let focusedNode = $state(null);
 export function changeAllExpansion(changeTo) {
-    debugLog('changing expansion of every node to ', changeTo ? 'expanded' : 'collapsed');
+    debugLog("changing expansion of every node to ", changeTo ? "expanded" : "collapsed");
     if (changeTo) {
         expandedPaths = computedTree.map((node) => node.path);
     }
@@ -140,11 +31,11 @@ export function changeAllExpansion(changeTo) {
 }
 export function expandToNode(targetNodePath) {
     if (!targetNodePath) {
-        console.warn('Cannot expand to node with null path');
+        console.warn("Cannot expand to node with null path");
         return;
     }
     const parentPaths = helper.getParentsPaths(targetNodePath);
-    debugLog("expanding to node '" + targetNodePath + "'" + ' parents', parentPaths);
+    debugLog("expanding to node '" + targetNodePath + "'" + " parents", parentPaths);
     expandedPaths = uniq([...expandedPaths, ...parentPaths]);
 }
 /**
@@ -153,7 +44,7 @@ export function expandToNode(targetNodePath) {
  */
 export function setNodeExpansion(nodePath, changeTo) {
     if (!nodePath) {
-        console.warn('Cannot expand node with null path');
+        console.warn("Cannot expand node with null path");
         return;
     }
     if (changeTo === null) {
@@ -163,7 +54,7 @@ export function setNodeExpansion(nodePath, changeTo) {
 }
 export function setExpansions(expansions) {
     if (!Array.isArray(expansions)) {
-        console.error('expansions must be an array');
+        console.error("expansions must be an array");
         return;
     }
     expandedPaths = expansions;
@@ -183,12 +74,23 @@ export function focusFirstNode() {
         return null;
     }
     focusedNode = rootChildren[0];
-    dispatch('focus', focusedNode);
+    onFocus?.(focusedNode);
     return focusedNode;
 }
+let computedClasses = $derived({ ...defaultClasses, ...(customClasses ?? {}) });
+$effect(() => {
+    dragAndDrop && console.warn("Drag and drop is not supported in this version");
+});
+let helper = $derived(new TreeHelper({
+    separator,
+    nodeSorter
+}));
+let dragAndDropProvider = $derived(new DragDropProvider(helper));
+let selectionProvider = $derived(new SelectionProvider(helper, recursiveSelection));
+let computedTree = $derived(computeTree(helper, selectionProvider, tree, filter, treeProps, expandedPaths, value));
 function computeTree(helper, selectionProvider, userProvidedTree, filter, props, expandedPaths, value) {
     if (!Array.isArray(userProvidedTree) || !Array.isArray(value)) {
-        console.error('value and tree must be arrays!!');
+        console.error("value and tree must be arrays!!");
         return [];
     }
     const start = Date.now();
@@ -215,15 +117,15 @@ function onExpand(detail) {
         handleCallback(node);
     }
     //expansion events
-    dispatch('expansion', {
+    onExpansion?.({
         node: node,
         value: changeTo
     });
     if (changeTo) {
-        dispatch('expanded', node);
+        onExpanded?.(node);
     }
     else {
-        dispatch('closed', node);
+        onClosed?.(node);
     }
 }
 function handleCallback(node) {
@@ -235,10 +137,10 @@ function handleCallback(node) {
         return;
     }
     if (loadChildrenAsync == null) {
-        console.warn('loadChildrenAsync is not set, but useCallback is set to true on node with path', node.path);
+        console.warn("loadChildrenAsync is not set, but useCallback is set to true on node with path", node.path);
         return;
     }
-    debugLog('calling callback for node', node);
+    debugLog("calling callback for node", node);
     // TODO mark node as loaded and don't call callback again
     // this is now responsibility of user
     loadChildrenAsync(node);
@@ -248,23 +150,24 @@ function onSelectionChanged(detail) {
     const nodePath = node.path;
     const changeTo = !selectionProvider.isNodeSelected(node);
     const newValue = selectionProvider.setSelection(computedTree, nodePath, changeTo, value);
-    debugLog("changing selection of node '", nodePath, "' to ", changeTo, ' returning value ', newValue);
-    dispatch('change', newValue);
-    dispatch('selection', {
+    debugLog("changing selection of node '", nodePath, "' to ", changeTo, " returning value ", newValue);
+    onChange?.(newValue);
+    onSelection?.({
         node: node,
         value: changeTo
     });
     if (changeTo) {
-        dispatch('selected', { node, value: newValue });
+        onSelected?.({ node, value: newValue });
     }
     else {
-        dispatch('unselected', { node, value: newValue });
+        onUnselected?.({ node, value: newValue });
     }
 }
 function openContextMenu(ce) {
     const { e, node } = ce.detail;
-    if (!showContextMenu)
+    if (!showContextMenu) {
         return;
+    }
     e.preventDefault();
     ctxMenu.onRightClick(e, node);
 }
@@ -288,8 +191,8 @@ function onDragDrop({ detail: { node, event, element } }) {
         return;
     }
     highlightedNode = null;
-    debugLog('DROPPED: ', draggedNode, 'on', node);
-    dispatch('moved', {
+    debugLog("DROPPED: ", draggedNode, "on", node);
+    onMoved?.({
         node: draggedNode,
         target: node,
         insertType: insertionType
@@ -305,7 +208,7 @@ function onDragEnter({ detail: { node, event, element } }) {
     if (!dragAndDropProvider.isDropAllowed(draggedNode, node)) {
         return;
     }
-    if (typeof dropDisabledCallback === 'function') {
+    if (typeof dropDisabledCallback === "function") {
         // possible bug, if the promise is resolved, when user is over another node
         dropDisabledCallback(draggedNode, node).then((dropDisabled) => {
             if (!dropDisabled) {
@@ -343,19 +246,19 @@ function onKeyPress(detail) {
         if (setExpansion !== null) {
             onExpand({ node: node, changeTo: setExpansion });
         }
-        dispatch('focus', node);
+        onFocus?.(node);
         return;
     }
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === "Enter" || event.key === " ") {
         onSelectionChanged({ node: targetNode });
         return;
     }
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
         focusedNode = null;
         if (document.activeElement instanceof HTMLElement) {
             document.activeElement.blur();
         }
-        dispatch('focus-leave');
+        onFocusLeave?.();
         return;
     }
 }
@@ -364,51 +267,47 @@ function debugLog(...data) {
         logger(...data);
     }
 }
-</script>
-
-<Branch
-	branchRootNode={null}
-	{treeId}
-	checkboxes={selectionMode}
-	tree={computedTree}
-	recursive={recursiveSelection}
-	{onlyLeafCheckboxes}
-	{hideDisabledCheckboxes}
-	{expandTo}
-	{dragAndDrop}
-	{readonly}
-	{helper}
-	classes={computedClasses}
-	{verticalLines}
-	let:node={nodeInSlot}
-	childDepth={0}
-	{insertionType}
-	{highlightedNode}
-	{draggedNode}
-	{focusedNode}
-	{allowKeyboardNavigation}
-	on:internal-handleDragStart={onDragStart}
-	on:internal-handleDragDrop={onDragDrop}
-	on:internal-handleDragOver={onDragOver}
-	on:internal-handleDragEnter={onDragEnter}
-	on:internal-handleDragEnd={onDragEnd}
-	on:internal-handleDragLeave={onDragLeave}
-	on:internal-keypress={(e) => onKeyPress(e.detail)}
-	on:open-ctxmenu={openContextMenu}
-	on:internal-expand={(e) => onExpand(e.detail)}
-	on:internal-selectionChanged={(e) => onSelectionChanged(e.detail)}
->
-	<slot node={nodeInSlot} />
-	<svelte:fragment slot="nest-highlight">
-		<slot name="nest-highlight" />
-	</svelte:fragment>
-</Branch>
-<ContextMenu bind:this={ctxMenu}>
-	<svelte:fragment let:node>
-		<slot name="context-menu" {node} />
-	</svelte:fragment>
-</ContextMenu>
-
+</script>
+
+<Branch
+	branchRootNode={null}
+	{treeId}
+	checkboxes={selectionMode}
+	tree={computedTree}
+	recursive={recursiveSelection}
+	{onlyLeafCheckboxes}
+	{hideDisabledCheckboxes}
+	{expandTo}
+	{dragAndDrop}
+	{readonly}
+	{helper}
+	classes={computedClasses}
+	{verticalLines}
+	childDepth={0}
+	{insertionType}
+	{highlightedNode}
+	{draggedNode}
+	{focusedNode}
+	{allowKeyboardNavigation}
+	{children}
+	{nestHighlight}
+	internal_onHandleDragStart={onDragStart}
+	internal_onHandleDragDrop={onDragDrop}
+	internal_onHandleDragOver={onDragOver}
+	internal_onHandleDragEnter={onDragEnter}
+	internal_onHandleDragEnd={onDragEnd}
+	internal_onHandleDragLeave={onDragLeave}
+	internal_onKeypress={(e) => onKeyPress(e.detail)}
+	internal_onExpand={(e) => onExpand(e.detail)}
+	internal_onSelectionChanged={(e) => onSelectionChanged(e.detail)}
+	onOpenCtxmenu={openContextMenu}
+/>
+<ContextMenu bind:this={ctxMenu}>
+	{#snippet children({node})}
+		{@render contextMenu?.({node})}
+	{/snippet}
+</ContextMenu>
+
 <style global>:global(.treeview) {
   padding: 0;
 }
@@ -524,4 +423,4 @@ function debugLog(...data) {
   text-align: center;
   width: 1.25em;
   min-width: 1.25em;
-}</style>
+}</style>