@keenmate/svelte-treeview 1.1.1 → 1.1.3

package/README.md

@@ -68,7 +68,7 @@ For more examples see `src/routes/`
 | hideDisabledCheckboxes | bool                                                               | false   | hides checkboxes instead of disabling, see   [Selection](#selection)                                  |
 | loadChildrenAsync      | ExpandedCallback                                                   | null    | function that is called when node is expanded, see   [Async loading](#async-loading)                  |
 | showContextMenu        | bool                                                               | false   | On right click dispaly context menu defined in `context-menu` slot, see [Context menu](#context-menu) |
-| expansionTreshold      | number                                                             | 0       | Expand all nodes when there is less than number provided                                              |
+| expansionThreshold      | number                                                             | 0       | Expand all nodes when there is less than number provided                                              |
 | customClasses          | Partial<CustomizableClasses>                                       | {}      | changes classes used on same elements, see [Custom classes](#custom-classes)                          |
 | filter                 | (node: Node) => boolean or null                                    | null    | function that is used for fitlering. It is called on every node                                       |
 | dragAndDrop            | bool                                                               | false   | enables drag and drop, see [Drag and drop](#drag-and-drop)                                            |

package/dist/Branch.svelte

@@ -83,11 +83,14 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 	class:child-menu={childDepth > 0}
 	class={childDepth === 0 ? classes.treeClass : ''}
 >
+	<!-- TODO fix accessibility -->
+	<!-- 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 -->
 		<li
 			class:is-child={helper.nodePathIsChild(node.path)}
 			class:has-children={node.hasChildren}
@@ -105,7 +108,7 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 		>
 			{#if effectiveHighlight == InsertionType.insertAbove}
 				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.inserLineClass}" />
+					<div class="insert-line {classes.insertLineClass}" />
 				</div>
 			{/if}
 
@@ -204,7 +207,7 @@ function getHighlighMode(node, highlightedNode, insertionType) {
 			<!-- Show line if insering -->
 			{#if effectiveHighlight === InsertionType.insertBelow}
 				<div class="insert-line-wrapper">
-					<div class="insert-line {classes.inserLineClass}" />
+					<div class="insert-line {classes.insertLineClass}" />
 				</div>
 			{/if}
 		</li>

package/dist/TreeView.svelte

@@ -50,8 +50,8 @@ export let recursiveSelection = false;
  */
 export let selectionMode = SelectionModes.none;
 /**
- * By default, in recursive mode, non-leaf checkboxes will select/deselct all its children
- * If you set this to true, this begaviour will be disabled and only leaf nodes will be selectable
+ * 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
 /**
@@ -59,7 +59,7 @@ export let onlyLeafCheckboxes = false; //bool
  */
 export let hideDisabledCheckboxes = false; //bool
 /**
- * Function that will be caled when node is expanded and useCallback is set to true
+ * 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
@@ -72,18 +72,18 @@ export let loadChildrenAsync = null;
 export let showContextMenu = false;
 // TODO stopped working in new version
 /**
- * Automaticaly expand nodes to this level,
+ * Automatically expand nodes to this level,
  * any user made expansion will override this.
  */
 export let expandTo = 0;
 /**
- * Treshold for automatic expansion. If tree has less or equal nodes than this value,
+ * 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 expansionTreshold = 0;
+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 aditinal styles in your css
+ * It is recommended to use default classes and add additional styles in your css
  */
 export let customClasses = {};
 /**
@@ -100,7 +100,7 @@ export let filter = null;
  */
 export let logger = null;
 /*
- * Drag and drop mode allows all nodes, that dont have dragDisabled property set to true
+ * 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.
@@ -116,7 +116,7 @@ export let dropDisabledCallback = null;
  */
 export let allowKeyboardNavigation = false;
 let ctxMenu;
-let expandedIds = [];
+let expandedPaths = [];
 let draggedNode = null;
 let highlightedNode = null;
 let insertionType = InsertionType.none;
@@ -128,41 +128,39 @@ $: helper = new TreeHelper({
 });
 $: dragAndDropProvider = new DragDropProvider(helper);
 $: selectionProvider = new SelectionProvider(helper, recursiveSelection);
-$: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedIds, value);
+$: computedTree = computeTree(helper, selectionProvider, tree, filter, props, expandedPaths, value);
 $: debugLog('computedTree', computedTree);
 export function changeAllExpansion(changeTo) {
-    debugLog('chaning expantion of every node to ', changeTo ? 'expanded' : 'collapsed');
+    debugLog('changing expansion of every node to ', changeTo ? 'expanded' : 'collapsed');
     if (changeTo) {
-        expandedIds = computedTree.map((node) => node.id);
+        expandedPaths = computedTree.map((node) => node.path);
     }
     else {
-        expandedIds = [];
+        expandedPaths = [];
     }
 }
-export function expandToNode(nodePath) {
-    const targetNode = helper.findNode(computedTree, nodePath);
-    if (!targetNode) {
-        console.error('Node with path', nodePath, 'not found');
+export function expandToNode(targetNodePath) {
+    if (!targetNodePath) {
+        console.warn('Cannot expand to node with null path');
         return;
     }
-    const parents = helper.getParents(computedTree, targetNode);
-    debugLog("expanding to node '" + nodePath + "'" + ' parents', parents);
-    expandedIds = uniq([...expandedIds, ...parents.map((node) => node.id)]);
+    const parentPaths = helper.getParentsPaths(targetNodePath);
+    debugLog("expanding to node '" + targetNodePath + "'" + ' parents', parentPaths);
+    expandedPaths = uniq([...expandedPaths, ...parentPaths]);
 }
 export function setNodeExpansion(nodePath, changeTo) {
-    const targetNode = helper.findNode(computedTree, nodePath);
-    if (!targetNode) {
-        console.error('Node with path', nodePath, 'not found');
+    if (!nodePath) {
+        console.warn('Cannot expand node with null path');
         return;
     }
-    expandedIds = helper.changeExpansion(targetNode, changeTo, expandedIds);
+    expandedPaths = helper.changeExpansion(nodePath, changeTo, expandedPaths);
 }
 export function setExpansions(expansions) {
     if (!Array.isArray(expansions)) {
         console.error('expansions must be an array');
         return;
     }
-    expandedIds = expansions;
+    expandedPaths = expansions;
 }
 export function focusNode(nodePath) {
     if (nodePath === null) {
@@ -190,7 +188,7 @@ function computeTree(helper, selectionProvider, userProvidedTree, filter, props,
     const mappedTree = helper.mapTree(userProvidedTree, { ...defaultPropNames, ...props });
     const { tree: filteredTree, count: filteredCount } = helper.searchTree(mappedTree, filter);
     // treshold applies to nodes that match the filter, not all their parents
-    if (filteredCount <= expansionTreshold) {
+    if (filteredCount <= expansionThreshold) {
         expandedIds = uniq([...expandedIds, ...filteredTree.map((node) => node.id)]);
     }
     helper.markExpanded(filteredTree, expandedIds);
@@ -201,7 +199,7 @@ function computeTree(helper, selectionProvider, userProvidedTree, filter, props,
 }
 function onExpand(detail) {
     const { node, changeTo } = detail;
-    expandedIds = helper.changeExpansion(node, changeTo, expandedIds);
+    expandedPaths = helper.changeExpansion(node.path, changeTo, expandedPaths);
     debugLog("changed expansion of node '", node.id, "' to ", changeTo);
     //trigger callback if it is present and node has useCallback property set to true
     if (changeTo) {
@@ -229,7 +227,7 @@ function handleCallback(node) {
         return;
     }
     debugLog('calling callback for node', node);
-    // TODO mark node as loaded and dont call callback again
+    // TODO mark node as loaded and don't call callback again
     // this is now responsibility of user
     loadChildrenAsync(node);
 }
@@ -238,7 +236,7 @@ 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, ' returing value ', newValue);
+    debugLog("changing selection of node '", nodePath, "' to ", changeTo, ' returning value ', newValue);
     dispatch('change', newValue);
     dispatch('selection', {
         node: node,
@@ -272,7 +270,7 @@ function onDragEnd({ detail: { node, event, element } }) {
     highlightedNode = null;
 }
 function onDragDrop({ detail: { node, event, element } }) {
-    // here we asume that highlightType is correctly calculated in handleDragOver
+    // here we assume that highlightType is correctly calculated in handleDragOver
     if (!dragAndDrop || draggedNode === null || insertionType === InsertionType.none) {
         event.preventDefault();
         return;
@@ -285,7 +283,7 @@ function onDragDrop({ detail: { node, event, element } }) {
         insertType: insertionType
     });
 }
-// handle highlihting
+// handle highlighting
 function onDragEnter({ detail: { node, event, element } }) {
     highlightedNode = null;
     if (!draggedNode || !dragAndDrop) {

package/dist/TreeView.svelte.d.ts

@@ -35,14 +35,14 @@ declare const __propDef: {
              * TODO find better name
              */ selectionMode?: SelectionModes | undefined;
         /**
-             * By default, in recursive mode, non-leaf checkboxes will select/deselct all its children
-             * If you set this to true, this begaviour will be disabled and only leaf nodes will be selectable
+             * 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
              */ onlyLeafCheckboxes?: boolean | undefined;
         /**
              * Instead of showing disabled checkboxes, show blank space
              */ hideDisabledCheckboxes?: boolean | undefined;
         /**
-             * Function that will be caled when node is expanded and useCallback is set to true
+             * 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
@@ -52,16 +52,16 @@ declare const __propDef: {
              * Its defined in slot context-menu
              */ showContextMenu?: boolean | undefined;
         /**
-             * Automaticaly expand nodes to this level,
+             * Automatically expand nodes to this level,
              * any user made expansion will override this.
              */ expandTo?: number | undefined;
         /**
-             * Treshold for automatic expansion. If tree has less or equal nodes than this value,
+             * 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
-             */ expansionTreshold?: number | undefined;
+             */ expansionThreshold?: number | undefined;
         /**
              * Classes used in tree. You can override default classes with this prop.
-             * It is recommended to use default classes and add aditinal styles in your css
+             * It is recommended to use default classes and add additional styles in your css
              */ customClasses?: Partial<CustomizableClasses> | undefined;
         /**
              * Function used to filter what nodes should be shown.
@@ -83,9 +83,9 @@ declare const __propDef: {
              * If true, keyboard navigation will be enabled. Use arrow keys to navigate and space to select node.
              */ allowKeyboardNavigation?: boolean | undefined;
         changeAllExpansion?: ((changeTo: boolean) => void) | undefined;
-        expandToNode?: ((nodePath: string) => void) | undefined;
+        expandToNode?: ((targetNodePath: string) => void) | undefined;
         setNodeExpansion?: ((nodePath: string, changeTo: boolean) => void) | undefined;
-        setExpansions?: ((expansions: NodeId[]) => void) | undefined;
+        setExpansions?: ((expansions: string[]) => void) | undefined;
         focusNode?: ((nodePath: string | null) => void) | undefined;
         focusFirstNode?: (() => Node | null) | undefined;
     };
@@ -118,9 +118,9 @@ export type TreeViewEvents = typeof __propDef.events;
 export type TreeViewSlots = typeof __propDef.slots;
 export default class TreeView extends SvelteComponent<TreeViewProps, TreeViewEvents, TreeViewSlots> {
     get changeAllExpansion(): (changeTo: boolean) => void;
-    get expandToNode(): (nodePath: string) => void;
+    get expandToNode(): (targetNodePath: string) => void;
     get setNodeExpansion(): (nodePath: string, changeTo: boolean) => void;
-    get setExpansions(): (expansions: NodeId[]) => void;
+    get setExpansions(): (expansions: string[]) => void;
     get focusNode(): (nodePath: string | null) => void;
     get focusFirstNode(): () => Node | null;
 }

package/dist/constants.js

@@ -16,7 +16,7 @@ export const defaultClasses = {
     nodeClass: '',
     expandIcon: 'far fa-fw fa-plus-square',
     collapseIcon: 'far fa-fw fa-minus-square',
-    inserLineClass: '',
+    insertLineClass: '',
     nestIcon: 'fas fa-level-down-alt'
 };
 export const defaultConfig = {

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

@@ -16,15 +16,17 @@ export declare class TreeHelper {
     mergeTrees(oldTree: Tree, addedTree: Tree, nodePath?: string): Node[];
     /** toggles expansion on
      */
-    changeExpansion(node: Node, changeTo: boolean, oldExpandedNodeIds: NodeId[]): NodeId[];
-    /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
+    changeExpansion(targetNodePath: string, changeTo: boolean, previousExpandedPaths: string[]): string[];
+    /**
+     * returns path of every node, that is at or above given depth level
      */
-    expandToLevel(tree: Tree, level: number): NodeId[];
+    getNodesAbove(tree: Tree, depth: number): Node[];
     getDepthLevel(nodePath: string): number;
     searchTree(tree: Tree, filter: FilterFunction | null): {
         count: number;
         tree: Tree;
     };
+    getParentsPaths(targetNodePath: string): string[];
     getParents(tree: Tree, targetNode: Node): Node[];
     /** orders nodes by priorityProp
      */

package/dist/helpers/tree-helper.js

@@ -39,7 +39,7 @@ export class TreeHelper {
             });
         }
     }
-    //#region basic helpres
+    //#region basic helpers
     getParentNodePath(nodePath) {
         if (nodePath == null)
             throw new Error('cannot get parent of root');
@@ -89,25 +89,21 @@ export class TreeHelper {
     }
     /** toggles expansion on
      */
-    changeExpansion(node, changeTo, oldExpandedNodeIds) {
+    changeExpansion(targetNodePath, changeTo, previousExpandedPaths) {
         // const nodeId = node.id ?? '';
-        if (!node.id) {
-            return oldExpandedNodeIds;
+        if (!targetNodePath) {
+            return previousExpandedPaths;
         }
         if (changeTo === true) {
-            return [...oldExpandedNodeIds, node.id];
+            return [...previousExpandedPaths, targetNodePath];
         }
-        return oldExpandedNodeIds.filter((x) => x !== node.id);
+        return previousExpandedPaths.filter((x) => x !== targetNodePath);
     }
-    /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
+    /**
+     * returns path of every node, that is at or above given depth level
      */
-    expandToLevel(tree, level) {
-        return tree
-            .filter((node) => node.expanded == undefined &&
-            node.expanded == null &&
-            node.useCallback != true &&
-            this.getDepthLevel(node.path) <= level)
-            .map((node) => node.id ?? '');
+    getNodesAbove(tree, depth) {
+        return tree.filter((node) => this.getDepthLevel(node.path) <= depth);
     }
     //based on number of dots
     getDepthLevel(nodePath) {
@@ -132,10 +128,10 @@ export class TreeHelper {
         const uniqueNodes = uniqueBy(resultNodes, (node) => node.path);
         return { count: filteredNodes.length, tree: uniqueNodes };
     }
-    getParents(tree, targetNode) {
+    getParentsPaths(targetNodePath) {
         const parentsPaths = [];
         // TODO refactor
-        let nodePath = targetNode.path;
+        let nodePath = targetNodePath;
         // get all parents
         while (nodePath !== null && nodePath !== '') {
             nodePath = this.getParentNodePath(nodePath);
@@ -144,6 +140,13 @@ export class TreeHelper {
             }
             parentsPaths.push(nodePath);
         }
+        return parentsPaths;
+    }
+    getParents(tree, targetNode) {
+        if (!targetNode) {
+            return [];
+        }
+        const parentsPaths = this.getParentsPaths(targetNode.path);
         //find nodes for given ids
         const parentNodes = tree.filter((node) => parentsPaths.some((parentNodePath) => node.path === parentNodePath));
         return parentNodes;
@@ -151,7 +154,7 @@ export class TreeHelper {
     /** orders nodes by priorityProp
      */
     orderByPriority(tree) {
-        // TODO investigata that it really works
+        // TODO investigate that it really works
         tree.sort((a, b) => (b.priority ? a.priority - b.priority : 1));
         return tree;
     }

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

@@ -3,7 +3,7 @@ import { type Node, InsertionType } from '../types.js';
 export declare class DragDropProvider {
     helper: TreeHelper;
     constructor(treeHelper: TreeHelper);
-    getInsertionPosition(draggendNode: Node, draggedOverNode: Node, e: DragEvent, element: HTMLElement, nest: boolean): InsertionType;
+    getInsertionPosition(draggedNode: Node, draggedOverNode: Node, e: DragEvent, element: HTMLElement, nest: boolean): InsertionType;
     getRelativePosition(element: Element, e: DragEvent): InsertionType;
     isDropAllowed(draggedNode: Node, targeNode: Node): boolean;
 }

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

@@ -4,7 +4,7 @@ export class DragDropProvider {
     constructor(treeHelper) {
         this.helper = treeHelper;
     }
-    getInsertionPosition(draggendNode, draggedOverNode, e, element, nest) {
+    getInsertionPosition(draggedNode, draggedOverNode, e, element, nest) {
         if (nest && draggedOverNode.nestAllowed) {
             return InsertionType.nest;
         }

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

@@ -1,4 +1,4 @@
-import { TreeHelper } from '../helpers/tree-helper.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;

package/dist/providers/movement-provider.js

@@ -1,4 +1,3 @@
-import { TreeHelper } from '../helpers/tree-helper.js';
 import { KeyboardMovement as MovementDirection } from '../types.js';
 export function calculateNewFocusedNode(helper, tree, targetNode, movementDirection) {
     // TODO this could use some refactoring
@@ -65,7 +64,7 @@ export function calculateNewFocusedNode(helper, tree, targetNode, movementDirect
                 return wrapReturn(targetNode);
             }
             const parentNode = helper.findNode(tree, parentNodePath);
-            // asertion
+            // assertion
             if (!parentNode) {
                 console.warn('Parent node not found, this should never happen');
                 return wrapReturn(targetNode);

package/dist/providers/selection-provider.js

@@ -113,7 +113,7 @@ export class SelectionProvider {
                 directChildrenStates.push(result.state);
             }
         });
-        // if no children, all are selected, but dont count it for recursive computationq
+        // if it doesn't have any children, mark it as selected but ignore it in upstream calculations
         const ignore = directChildrenStates.length === 0;
         return { ignore, state: this.computeVisualState(directChildrenStates) };
     }
@@ -122,7 +122,7 @@ export class SelectionProvider {
         tree.forEach((node) => {
             // match itself and all children
             if (node.path?.startsWith(parentNodePath ? parentNodePath + this.helper.config.separator : '')) {
-                //dont change if not selectable
+                //don't change if not selectable
                 if (!isSelectable(node, SelectionModes.all)) {
                     return;
                 }
@@ -148,6 +148,6 @@ export function isSelectable(node, showCheckboxes) {
     if (showCheckboxes === SelectionModes.perNode) {
         return node.checkbox === true;
     }
-    //dont show at all
+    //don't show at all
     return false;
 }

package/dist/types.d.ts

@@ -55,11 +55,11 @@ export type CustomizableClasses = {
     collapseIcon: string;
     nestIcon: string;
     expandClass: string;
-    inserLineClass: string;
+    insertLineClass: string;
     currentlyDraggedClass: string;
 };
-export type DragEnterCallback = (draggendNode: Node, targetNode: Node) => Promise<boolean>;
-export type BeforeMovedCallback = (draggendNode: Node, oldParent: Node, newParent: Node, insertionType: string) => boolean;
+export type DragEnterCallback = (draggedNode: Node, targetNode: Node) => Promise<boolean>;
+export type BeforeMovedCallback = (draggedNode: Node, oldParent: Node, newParent: Node, insertionType: string) => boolean;
 export type ExpandedCallback = (node: Node) => Promise<void>;
 export type HelperConfig = {
     separator: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@keenmate/svelte-treeview",
-	"version": "1.1.1",
+	"version": "1.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",