@keenmate/svelte-treeview 1.2.11 → 2.0.0

package/dist/Branch.svelte

@@ -1,7 +1,7 @@
-<script>import { createEventDispatcher } from 'svelte';
-import Checkbox from './Checkbox.svelte';
-import { SelectionModes, InsertionType } from './types.js';
-import { capturedKeys } from './constants.js';
+<script>import { createEventDispatcher } from "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;
@@ -29,7 +29,7 @@ $: if (focusedNode && liElements[getNodeId(focusedNode)]) {
     liElements[getNodeId(focusedNode)].focus();
 }
 function setExpansion(node, changeTo) {
-    dispatch('internal-expand', { node: node, changeTo });
+    dispatch("internal-expand", { node: node, changeTo });
 }
 function isExpanded(node, depth, expandToDepth) {
     const nodeExpanded = node.expanded;
@@ -41,26 +41,26 @@ function isExpanded(node, depth, expandToDepth) {
 }
 //checkboxes
 function selectionChanged(node) {
-    dispatch('internal-selectionChanged', { node: node });
+    dispatch("internal-selectionChanged", { node: node });
 }
 // drag and drop
 function handleDragStart(e, node) {
-    dispatch('internal-handleDragStart', { node: node, e: e });
+    dispatch("internal-handleDragStart", { node: node, e: e });
 }
 function handleDragDrop(e, node, el) {
-    dispatch('internal-handleDragDrop', { node: node, event: e, element: el });
+    dispatch("internal-handleDragDrop", { node: node, event: e, element: el });
 }
 function handleDragOver(e, node, el, nest) {
-    dispatch('internal-handleDragOver', { node: node, event: e, element: el, nest });
+    dispatch("internal-handleDragOver", { node: node, event: e, element: el, nest });
 }
 function handleDragEnter(e, node, el) {
-    dispatch('internal-handleDragEnter', { node: node, event: e, element: el });
+    dispatch("internal-handleDragEnter", { node: node, event: e, element: el });
 }
 function handleDragEnd(e, node) {
-    dispatch('internal-handleDragEnd', { node: node, event: e });
+    dispatch("internal-handleDragEnd", { node: node, event: e });
 }
 function handleDragLeave(e, node, el) {
-    dispatch('internal-handleDragLeave', { node: node, event: e, element: el });
+    dispatch("internal-handleDragLeave", { node: node, event: e, element: el });
 }
 function handleKeyPress(e, node) {
     if (!capturedKeys.includes(e.key)) {
@@ -68,12 +68,13 @@ function handleKeyPress(e, node) {
     }
     e.preventDefault();
     e.stopPropagation();
-    dispatch('internal-keypress', { event: e, node });
+    dispatch("internal-keypress", { event: e, node });
 }
 function getHighlighMode(node, highlightedNode, insertionType) {
     // return InsertionType.insertAbove;
-    if (highlightedNode?.path !== node.path)
+    if (highlightedNode?.path !== node.path) {
         return InsertionType.none;
+    }
     return insertionType;
 }
 </script>

package/dist/Branch.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes, InsertionType, type Node, type CustomizableClasses } from './types.js';
-import type { TreeHelper } from './helpers/tree-helper.js';
+import { type CustomizableClasses, InsertionType, type Node, SelectionModes } from "./types.js";
+import type { TreeHelper } from "./helpers/tree-helper.js";
 declare const __propDef: {
     props: {
         tree: Node[];

package/dist/Checkbox.svelte

@@ -1,6 +1,6 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { SelectionModes, VisualState } from './types.js';
-import { isSelectable } from './providers/selection-provider.js';
+<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;
@@ -10,7 +10,7 @@ export let readonly = false;
 const dispatch = createEventDispatcher();
 function onSelect(e, node) {
     // e.preventDefault();
-    dispatch('select', { node });
+    dispatch("select", { node });
     return false;
 }
 </script>
@@ -35,6 +35,8 @@ function onSelect(e, node) {
 				type="checkbox"
 				on:click={null}
 				disabled={true}
+				checked={node.visualState === VisualState.selected}
+				indeterminate={node.visualState === VisualState.indeterminate}
 				class:invisible={hideDisabledCheckboxes}
 			/>
 		{/if}

package/dist/Checkbox.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes, type Node } from './types.js';
+import { type Node, SelectionModes } from "./types.js";
 declare const __propDef: {
     props: {
         checkboxes: SelectionModes;

package/dist/TreeView.svelte

@@ -1,13 +1,13 @@
-<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';
+<script>import ContextMenu from "./menu/ContextMenu.svelte";
+import { createEventDispatcher } from "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";
 const dispatch = createEventDispatcher();
 export let treeId;
 /**
@@ -36,7 +36,7 @@ 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 = '.';
+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
@@ -99,6 +99,7 @@ export let filter = null;
  * Used mostly for debugging
  */
 export let logger = null;
+export let nodeSorter = 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,
@@ -122,15 +123,16 @@ 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');
+$: dragAndDrop && console.warn("Drag and drop is not supported in this version");
 $: helper = new TreeHelper({
-    separator
+    separator,
+    nodeSorter
 });
 $: dragAndDropProvider = new DragDropProvider(helper);
 $: selectionProvider = new SelectionProvider(helper, recursiveSelection);
 $: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedPaths, value);
 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 +142,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 +155,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 +165,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 +185,12 @@ export function focusFirstNode() {
         return null;
     }
     focusedNode = rootChildren[0];
-    dispatch('focus', focusedNode);
+    dispatch("focus", focusedNode);
     return focusedNode;
 }
 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 +217,15 @@ function onExpand(detail) {
         handleCallback(node);
     }
     //expansion events
-    dispatch('expansion', {
+    dispatch("expansion", {
         node: node,
         value: changeTo
     });
     if (changeTo) {
-        dispatch('expanded', node);
+        dispatch("expanded", node);
     }
     else {
-        dispatch('closed', node);
+        dispatch("closed", node);
     }
 }
 function handleCallback(node) {
@@ -235,10 +237,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 +250,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);
+    dispatch("change", newValue);
+    dispatch("selection", {
         node: node,
         value: changeTo
     });
     if (changeTo) {
-        dispatch('selected', { node, value: newValue });
+        dispatch("selected", { node, value: newValue });
     }
     else {
-        dispatch('unselected', { node, value: newValue });
+        dispatch("unselected", { node, value: newValue });
     }
 }
 function openContextMenu(ce) {
     const { e, node } = ce.detail;
-    if (!showContextMenu)
+    if (!showContextMenu) {
         return;
+    }
     e.preventDefault();
     ctxMenu.onRightClick(e, node);
 }
@@ -288,8 +291,8 @@ function onDragDrop({ detail: { node, event, element } }) {
         return;
     }
     highlightedNode = null;
-    debugLog('DROPPED: ', draggedNode, 'on', node);
-    dispatch('moved', {
+    debugLog("DROPPED: ", draggedNode, "on", node);
+    dispatch("moved", {
         node: draggedNode,
         target: node,
         insertType: insertionType
@@ -305,7 +308,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 +346,19 @@ function onKeyPress(detail) {
         if (setExpansion !== null) {
             onExpand({ node: node, changeTo: setExpansion });
         }
-        dispatch('focus', node);
+        dispatch("focus", 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');
+        dispatch("focus-leave");
         return;
     }
 }

package/dist/TreeView.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { SelectionModes as SelectionModes, type Node, type Props, type CustomizableClasses, type DragEnterCallback, type ExpandedCallback, type NodeId, type ProvidedTree, type FilterFunction } from './types.js';
+import { type CustomizableClasses, type DragEnterCallback, type ExpandedCallback, type FilterFunction, type Node, type NodeId, type NodeSorter, type Props, type ProvidedTree, SelectionModes as SelectionModes } from "./types.js";
 declare const __propDef: {
     props: {
         treeId: string;
@@ -74,6 +74,7 @@ declare const __propDef: {
              * Log function that will be called when something happens in tree.
              * Used mostly for debugging
              */ logger?: ((...data: any[]) => void) | null | undefined;
+        nodeSorter?: NodeSorter | null | undefined;
         dragAndDrop?: boolean | undefined;
         /**
              * Callback that will be called when user drags above node.

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import type { HelperConfig, CustomizableClasses, Props } from './types.js';
+import type { CustomizableClasses, HelperConfig, Props } from "./types.js";
 export declare const defaultPropNames: Props;
 export declare const defaultClasses: CustomizableClasses;
 export declare const defaultConfig: HelperConfig;

package/dist/constants.js

@@ -1,33 +1,33 @@
 export const defaultPropNames = {
-    nodePath: 'nodePath',
-    nodeId: 'nodePath',
-    hasChildren: 'hasChildren',
-    useCallback: '__useCallback',
-    priority: 'priority',
-    dragDisabled: 'dragDisabled',
-    insertDisabled: 'insertDisabled',
-    nestAllowed: 'nestAllowed',
-    checkbox: 'checkbox'
+    nodePath: "nodePath",
+    nodeId: "nodePath",
+    hasChildren: "hasChildren",
+    useCallback: "__useCallback",
+    priority: "priority",
+    dragDisabled: "dragDisabled",
+    insertDisabled: "insertDisabled",
+    nestAllowed: "nestAllowed",
+    checkbox: "checkbox"
 };
 export const defaultClasses = {
-    treeClass: 'treeview',
-    expandClass: 'inserting-highlighted',
-    currentlyDraggedClass: 'currently-dragged',
-    nodeClass: '',
-    expandIcon: 'far fa-fw fa-plus-square',
-    collapseIcon: 'far fa-fw fa-minus-square',
-    insertLineClass: '',
-    nestIcon: 'fas fa-level-down-alt'
+    treeClass: "treeview",
+    expandClass: "inserting-highlighted",
+    currentlyDraggedClass: "currently-dragged",
+    nodeClass: "",
+    expandIcon: "far fa-fw fa-plus-square",
+    collapseIcon: "far fa-fw fa-minus-square",
+    insertLineClass: "",
+    nestIcon: "fas fa-level-down-alt"
 };
 export const defaultConfig = {
-    separator: '.'
+    separator: "."
 };
 export const capturedKeys = [
-    'ArrowUp',
-    'ArrowDown',
-    'ArrowLeft',
-    'ArrowRight',
-    'Enter',
-    ' ',
-    'Escape'
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    " ",
+    "Escape"
 ];

package/dist/helpers/tree-helper.d.ts

@@ -1,4 +1,4 @@
-import { type Node, type HelperConfig, type Tree, type Props, type FilterFunction } from '../types.js';
+import { type FilterFunction, type HelperConfig, type Node, type Props, type Tree } from "../types.js";
 export declare class TreeHelper {
     config: HelperConfig;
     constructor(config?: HelperConfig);
@@ -10,10 +10,7 @@ export declare class TreeHelper {
     findNode(tree: Tree, nodePath: string): Node | null;
     nodePathIsChild(nodePath: string): boolean;
     getDirectChildren(tree: Tree, parentNodePath: string | null): Tree;
-    allCHildren(tree: Tree, parentNodePath: string | null): Node[];
-    getAllLeafNodes(tree: Tree): Node[];
-    joinTrees(filteredTree: Tree, tree: Tree): Node[];
-    mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): Node[];
+    allChildren(tree: Tree, parentNodePath: string | null): Node[];
     /** toggles expansion on
      */
     changeExpansion(targetNodePath: string, changeTo: boolean, previousExpandedPaths: string[]): string[];
@@ -28,7 +25,8 @@ export declare class TreeHelper {
     };
     getParentsPaths(targetNodePath: string): string[];
     getParents(tree: Tree, targetNode: Node): Node[];
-    /** orders nodes by priorityProp
+    /**
+     * Sorts nodes if sorter override is specified
      */
-    orderByPriority(tree: Tree): Tree;
+    sortNodes(tree: Tree): Tree;
 }

package/dist/helpers/tree-helper.js

@@ -1,7 +1,6 @@
-import orderBy from 'lodash.unionby'; // used by tree merge
-import uniqueBy from 'lodash.uniqby'; // used by tree merge
-import { VisualState } from '../types.js';
-import { defaultConfig } from '../constants.js';
+import uniqueBy from "lodash.uniqby"; // used by tree merge
+import { VisualState } from "../types.js";
+import { defaultConfig } from "../constants.js";
 export class TreeHelper {
     config;
     constructor(config = defaultConfig) {
@@ -35,24 +34,27 @@ export class TreeHelper {
     markExpanded(tree, expandedPaths) {
         {
             tree.forEach((node) => {
-                node.expanded = expandedPaths.includes(node.path ?? '');
+                node.expanded = expandedPaths.includes(node.path ?? "");
             });
         }
     }
     //#region basic helpers
     getParentNodePath(nodePath) {
-        if (nodePath == null)
-            throw new Error('cannot get parent of root');
+        if (nodePath == null) {
+            throw new Error("cannot get parent of root");
+        }
         const separator = this.config.separator;
         const parentPath = nodePath?.substring(0, nodePath.lastIndexOf(separator));
-        if (parentPath === '')
+        if (parentPath === "") {
             return null;
+        }
         return parentPath ?? null;
     }
     isChildrenOf(parentNodePath, childrenNodePath) {
-        if (parentNodePath === childrenNodePath)
+        if (parentNodePath === childrenNodePath) {
             return false;
-        return childrenNodePath?.startsWith(parentNodePath ?? '');
+        }
+        return childrenNodePath?.startsWith(parentNodePath ?? "");
     }
     hasChildren(tree, nodePath) {
         return tree?.find((x) => this.getParentNodePath(x.path) === nodePath);
@@ -62,31 +64,30 @@ export class TreeHelper {
     }
     nodePathIsChild(nodePath) {
         const separator = this.config.separator;
-        const includesSeparator = nodePath?.includes(separator);
-        return includesSeparator;
+        return nodePath?.includes(separator);
     }
     getDirectChildren(tree, parentNodePath) {
         const children = tree.filter((node) => !parentNodePath
             ? !this.nodePathIsChild(node.path)
             : this.getParentNodePath(node.path) === parentNodePath);
-        const ordered = this.orderByPriority(children);
-        return ordered;
-    }
-    allCHildren(tree, parentNodePath) {
-        const children = tree.filter((node) => this.isChildrenOf(parentNodePath, node.path));
-        return children;
-    }
-    getAllLeafNodes(tree) {
-        return tree.filter((node) => {
-            return node.hasChildren !== true;
-        });
-    }
-    joinTrees(filteredTree, tree) {
-        return tree.map((node) => this.findNode(filteredTree, node.path) || node);
-    }
-    mergeTrees(oldTree, addedTree, nodePath = 'nodePath') {
-        return orderBy(addedTree, oldTree, nodePath);
-    }
+        return this.sortNodes(children);
+    }
+    allChildren(tree, parentNodePath) {
+        return tree.filter((node) => this.isChildrenOf(parentNodePath, node.path));
+    }
+    // getAllLeafNodes(tree: Tree) {
+    // 	return tree.filter((node) => {
+    // 		return node.hasChildren !== true;
+    // 	});
+    // }
+    //
+    // joinTrees(filteredTree: Tree, tree: Tree) {
+    // 	return tree.map((node) => this.findNode(filteredTree, node.path) || node);
+    // }
+    //
+    // mergeTrees(oldTree: Tree, addedTree: Tree, nodePath = 'nodePath') {
+    // 	return orderBy(addedTree, oldTree, nodePath);
+    // }
     /** toggles expansion on
      */
     changeExpansion(targetNodePath, changeTo, previousExpandedPaths) {
@@ -107,15 +108,17 @@ export class TreeHelper {
     }
     //based on number of dots
     getDepthLevel(nodePath) {
-        if (nodePath == null)
+        if (nodePath == null) {
             return 0;
+        }
         const separator = this.config.separator;
         return nodePath.split(separator).length - 1;
     }
     //#endregion
     searchTree(tree, filter) {
-        if (!filter)
+        if (!filter) {
             return { count: tree.length, tree };
+        }
         const filteredNodes = tree.filter(filter);
         const resultNodes = [];
         // add all parents from each node
@@ -133,7 +136,7 @@ export class TreeHelper {
         // TODO refactor
         let nodePath = targetNodePath;
         // get all parents
-        while (nodePath !== null && nodePath !== '') {
+        while (nodePath !== null && nodePath !== "") {
             nodePath = this.getParentNodePath(nodePath);
             if (nodePath === null) {
                 break;
@@ -148,14 +151,15 @@ export class TreeHelper {
         }
         const parentsPaths = this.getParentsPaths(targetNode.path);
         //find nodes for given ids
-        const parentNodes = tree.filter((node) => parentsPaths.some((parentNodePath) => node.path === parentNodePath));
-        return parentNodes;
+        return tree.filter((node) => parentsPaths.some((parentNodePath) => node.path === parentNodePath));
     }
-    /** orders nodes by priorityProp
+    /**
+     * Sorts nodes if sorter override is specified
      */
-    orderByPriority(tree) {
-        // TODO investigate that it really works
-        tree.sort((a, b) => (b.priority ? a.priority - b.priority : 1));
-        return tree;
+    sortNodes(tree) {
+        if (!this.config.nodeSorter) {
+            return tree;
+        }
+        return tree.slice().sort(this.config.nodeSorter);
     }
 }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-export * from './constants.js';
-export { TreeHelper } from './helpers/tree-helper.js';
-export { default as TreeView } from './TreeView.svelte';
-export { default as MenuDivider } from './menu/MenuDivider.svelte';
-export { default as MenuOption } from './menu/MenuOption.svelte';
-export * from './types.js';
+export * from "./constants.js";
+export { TreeHelper } from "./helpers/tree-helper.js";
+export { default as TreeView } from "./TreeView.svelte";
+export { default as MenuDivider } from "./menu/MenuDivider.svelte";
+export { default as MenuOption } from "./menu/MenuOption.svelte";
+export * from "./types.js";

package/dist/index.js

@@ -1,6 +1,6 @@
-export * from './constants.js';
-export { TreeHelper } from './helpers/tree-helper.js';
-export { default as TreeView } from './TreeView.svelte';
-export { default as MenuDivider } from './menu/MenuDivider.svelte';
-export { default as MenuOption } from './menu/MenuOption.svelte';
-export * from './types.js';
+export * from "./constants.js";
+export { TreeHelper } from "./helpers/tree-helper.js";
+export { default as TreeView } from "./TreeView.svelte";
+export { default as MenuDivider } from "./menu/MenuDivider.svelte";
+export { default as MenuOption } from "./menu/MenuOption.svelte";
+export * from "./types.js";

package/dist/menu/ContextMenu.svelte

@@ -1,4 +1,4 @@
-<script>import Menu from './Menu.svelte';
+<script>import Menu from "./Menu.svelte";
 let pos = { x: 0, y: 0 };
 let showMenu = false;
 let clickedNode = null;

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { Node } from '../types.js';
+import type { Node } from "../types.js";
 declare const __propDef: {
     props: {
         onRightClick?: ((event: MouseEvent, node: Node) => Promise<void>) | undefined;

package/dist/menu/Menu.svelte

@@ -3,32 +3,39 @@
 <script>
 	// @ts-nocheck
 
-	import { onMount, setContext, createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
-	import { key } from './menu.js';
+	import {createEventDispatcher, setContext} from "svelte"
+	import {fade} from "svelte/transition"
+	import {key} from "./menu.js"
 
-	export let x;
-	export let y;
+	export let x
+	export let y
 
 	// whenever x and y is changed, restrict box to be within bounds
 	$: (() => {
-		if (!menuEl) return;
+		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 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();
+	const dispatch = createEventDispatcher()
 
 	setContext(key, {
-		dispatchClick: () => dispatch('click')
-	});
+		dispatchClick: () => dispatch("click")
+	})
+
+	let menuEl
 
-	let menuEl;
 	function onPageClick(e) {
-		if (e.target === menuEl || menuEl.contains(e.target)) return;
-		dispatch('clickoutside');
+		if (e.target === menuEl || menuEl.contains(e.target)) {
+			return
+		}
+		dispatch("clickoutside")
 	}
 </script>
 

package/dist/menu/MenuOption.svelte

@@ -1,23 +1,24 @@
 <script>
 	// @ts-nocheck
 
-	import { onMount, getContext } from 'svelte';
-	import { key } from './menu.js';
+	import {createEventDispatcher, getContext} from "svelte"
+	import {key} from "./menu.js"
 
-	export let isDisabled = false;
-	export let text = '';
+	export let isDisabled = false
+	export let text       = ""
 
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher()
 
-	const { dispatchClick } = getContext(key);
+	const {dispatchClick} = getContext(key)
 
 	const handleClick = (e) => {
-		if (isDisabled) return;
+		if (isDisabled) {
+			return
+		}
 
-		dispatch('click');
-		dispatchClick();
-	};
+		dispatch("click")
+		dispatchClick()
+	}
 </script>
 
 <div class:disabled={isDisabled} on:click={handleClick} on:keydown={handleClick} role="button" tabindex="">
@@ -37,12 +38,15 @@
 		align-items: center;
 		grid-gap: 5px;
 	}
+
 	div:hover {
 		background: #0002;
 	}
+
 	div.disabled {
 		color: #0006;
 	}
+
 	div.disabled:hover {
 		background: white;
 	}

package/dist/menu/menu.js

@@ -1,3 +1,3 @@
-const key = {};
+const key = {}
 
-export { 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 ?? "");
                 }
             }
         });

package/dist/tree-styles.sass

@@ -1,110 +1,121 @@
-
 $treeview-lines: solid black 1px
 .treeview
-  padding: 0
-  //will show lines if you set show-lines to root element
-  &.show-lines
-    ul
-      &:before
-        border-left: $treeview-lines
-      li:before
-        border-top: $treeview-lines
-        margin: 0
-        padding: 0
-        list-style: none
-  ul, li
-    margin: 0
-    padding: 0
-    list-style: none
-  ul
-    margin-left: 0.4em
-    position: relative
-    margin-left: .3em
-    &:before
-      content: ""
-      display: block
-      width: 0
-      position: absolute
-      top: 0
-      bottom: 0
-      left: 0
-    li:before
-      content: ""
-      display: block
-      width: 10px
-      height: 0
-      margin-top: -1px
-      position: absolute
-      top: 0.8em
-      left: 0
-    li:not(.has-children):before
-      width: 26px
-
-    li:last-child:before
-      background: #fff
-      height: auto
-      top: 1em
-      bottom: 0
-
-  li
-    margin: 0
-    padding: 0 0.8em
-    color: #555
-    font-weight: 700
-    position: relative
-
-  .tree-item
-    display: flex
-    column-gap: 0.4em
-    align-items: center
-    padding: 4px 0
-
-  .no-arrow
-    padding-left: .5rem
-
-  .arrow
-    cursor: pointer
-    display: inline-block
-
-  .arrowDown
-    transform: rotate(90deg)
-
-  .invisible
-    visibility: hidden
-
-  .inserting-highlighted
-    color: red
-  .hover
-    font-weight: bold
-  .insert-line
-    position: absolute
-    left: 0
-    z-index: 99
-    height: 2px
-    width: 200px
-    background-color: blue
-    display: block
-    border-radius: 3px
-    margin-left: 28px
-    pointer-events: none //! this is needed to fix flickering issue
-    // margin-bottom: -2px
-    // margin-top: -2px
-  .insert-line-child
-    margin-left: calc( 28px + 5em )
-    background-color: red
-    height: 6px
-
-  .insert-line-wrapper
-    position: relative
-
-  .currently-dragged
-    color: LightGray
-  .pointer-cursor
-    cursor: grab
-  .expansion-button
-    all: unset
-  .fixed-icon
-    text-align: center
-    width: 1.25em
-    // fix deformation on small screens
-    min-width: 1.25em
+	padding: 0
+	//will show lines if you set show-lines to root element
+	&.show-lines
+		ul
+			&:before
+				border-left: $treeview-lines
+
+			li:before
+				border-top: $treeview-lines
+				margin: 0
+				padding: 0
+				list-style: none
+
+	ul, li
+		margin: 0
+		padding: 0
+		list-style: none
+
+	ul
+		margin-left: 0.4em
+		position: relative
+		margin-left: .3em
+
+		&:before
+			content: ""
+			display: block
+			width: 0
+			position: absolute
+			top: 0
+			bottom: 0
+			left: 0
+
+		li:before
+			content: ""
+			display: block
+			width: 10px
+			height: 0
+			margin-top: -1px
+			position: absolute
+			top: 0.8em
+			left: 0
+
+		li:not(.has-children):before
+			width: 26px
+
+		li:last-child:before
+			background: #fff
+			height: auto
+			top: 1em
+			bottom: 0
+
+	li
+		margin: 0
+		padding: 0 0.8em
+		color: #555
+		font-weight: 700
+		position: relative
+
+	.tree-item
+		display: flex
+		column-gap: 0.4em
+		align-items: center
+		padding: 4px 0
+
+	.no-arrow
+		padding-left: .5rem
+
+	.arrow
+		cursor: pointer
+		display: inline-block
+
+	.arrowDown
+		transform: rotate(90deg)
+
+	.invisible
+		visibility: hidden
+
+	.inserting-highlighted
+		color: red
+
+	.hover
+		font-weight: bold
+
+	.insert-line
+		position: absolute
+		left: 0
+		z-index: 99
+		height: 2px
+		width: 200px
+		background-color: blue
+		display: block
+		border-radius: 3px
+		margin-left: 28px
+		pointer-events: none
+	//! this is needed to fix flickering issue
+	// margin-bottom: -2px
+	// margin-top: -2px
+	.insert-line-child
+		margin-left: calc(28px + 5em)
+		background-color: red
+		height: 6px
+
+	.insert-line-wrapper
+		position: relative
+
+	.currently-dragged
+		color: LightGray
+
+	.pointer-cursor
+		cursor: grab
+
+	.expansion-button
+		all: unset
+
+	.fixed-icon
+		text-align: center
+		width: 1.25em
+		// fix deformation on small screens
+		min-width: 1.25em

package/dist/types.d.ts

@@ -63,6 +63,7 @@ export type BeforeMovedCallback = (draggedNode: Node, oldParent: Node, newParent
 export type ExpandedCallback = (node: Node) => Promise<void>;
 export type HelperConfig = {
     separator: string;
+    nodeSorter?: NodeSorter | null;
 };
 export declare enum InsertionType {
     nest = "nest",
@@ -81,3 +82,4 @@ export declare enum KeyboardMovement {
     Left = "ArrowLeft",
     Right = "ArrowRight"
 }
+export type NodeSorter = (left: Node, right: Node) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "1.2.11",
+	"version": "2.0.0",
 	"repository": {
 		"url": "https://github.com/keenmate/svelte-treeview"
 	},