@keenmate/svelte-treeview 0.2.1 → 0.3.2

package/dist/helpers/tree-helper.js

@@ -1,169 +1,129 @@
-// @ts-nocheck
-import orderBy from 'lodash.unionby'; // used by tree merge
-import unique from 'lodash.uniq'; // used by tree merge
-import { SelectionHelper } from './selection-helpers';
-import { DragAndDropHelper } from './drag-drop-helpers';
-import { defaultPropNames } from '../consts.js';
-
-export class TreeHelper {
-	constructor(propNames, config = {}) {
-		this.props = { ...defaultPropNames, ...propNames };
-		this.config = config;
-		this.selection = new SelectionHelper(this);
-		this.dragDrop = new DragAndDropHelper(this);
-	}
-
-	path(node) {
-		return node?.[this.props.nodePath];
-	}
-
-	//#region basic helpres
-
-	getParentNodePath(nodePath) {
-		const separator = this.config.separator ?? '.';
-		const parentPath = nodePath?.substring(0, nodePath.lastIndexOf(separator));
-		return parentPath;
-	}
-
-	hasChildren(tree, nodePath) {
-		return tree?.find((x) => this.getParentNodePath(this.path(x)) === nodePath);
-	}
-
-	findNode(tree, nodePath) {
-		return tree.find((node) => this.path(node) === nodePath);
-	}
-
-	nodePathIsChild(nodePath) {
-		const separator = this.config.separator ?? '.';
-
-		const includesSeparator = nodePath?.includes(separator);
-		return includesSeparator;
-	}
-
-	getDirectChildren(tree, parentNodePath) {
-		const children = (tree || []).filter((x) =>
-			!parentNodePath
-				? !this.nodePathIsChild(this.path(x))
-				: this.getParentNodePath(this.path(x)) === parentNodePath
-		);
-
-		return children;
-	}
-
-	allCHildren(tree, parentNodePath) {
-		let children;
-		children = tree.filter((x) => {
-			if (!parentNodePath) {
-				//top level
-				return !this.nodePathIsChild(this.path(x));
-			} else {
-				return this.path(x).startsWith(parentNodePath.toString()) && this.path(x) != parentNodePath;
-			}
-		});
-		return children;
-	}
-
-	getAllLeafNodes(tree) {
-		return tree.filter((x) => {
-			return x[this.props.hasChildren] == undefined || x[this.props.hasChildren] == false;
-		});
-	}
-
-	joinTrees(filteredTree, tree) {
-		return tree.map((tnode) => this.findNode(filteredTree, this.path(tnode)) || tnode);
-	}
-
-	mergeTrees(oldTree, addedTree, nodePath = 'nodePath') {
-		return orderBy(addedTree, oldTree, nodePath);
-	}
-
-	/** toggles expansion on
-	 */
-	changeExpansion(tree, node, changeTo) {
-		let foundNode = this.findNode(tree, this.path(node));
-
-		foundNode[this.props.expanded] = changeTo;
-	}
-
-	/** changes expansion of every node that has this.hasChildren set to true
-	 */
-	changeEveryExpansion(tree, changeTo) {
-		return tree.map((node) => {
-			if (node[this.props.hasChildren] == true) node[this.props.expanded] = changeTo;
-			return node;
-		});
-	}
-
-	/** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
-	 */
-	expandToLevel(tree, level) {
-		return tree.map((n) => {
-			if (
-				n[this.props.expanded] == undefined &&
-				n[this.props.expanded] == null &&
-				n[this.props.useCallback] != true &&
-				this.getDepthLevel(this.path(n)) <= level
-			) {
-				n[this.props.expanded] = true;
-			}
-			return n;
-		});
-	}
-
-	//based on number of dots
-	getDepthLevel(nodePath) {
-		const separator = this.config.separator ?? '.';
-		return nodePath.split(separator).length - 1;
-	}
-
-	//#endregion
-
-	searchTree(tree, filter, leafesOnly) {
-		let filteredNodes;
-		if (leafesOnly) {
-			filteredNodes = this.getAllLeafNodes(tree).filter(filter);
-		} else {
-			console.log(tree);
-			filteredNodes = tree.filter(filter);
-		}
-
-		const resultNodes = [];
-
-		//console.log("matching nodes length:" + matchingPathes.length)
-		filteredNodes.forEach((node) => {
-			resultNodes.push(node);
-
-			const parentNodes = this.getParents(tree, node);
-			resultNodes.push(...parentNodes);
-		});
-
-		const uniqueNodes = unique(resultNodes, (node) => this.path(node));
-
-		return uniqueNodes;
-	}
-
-	getParents(tree, node) {
-		const parentsPaths = [];
-
-		let nodePath = this.path(node);
-
-		// get all parents
-		while (nodePath.length > 0) {
-			nodePath = this.getParentNodePath(nodePath);
-			parentsPaths.push(nodePath);
-		}
-
-		//find nodes for given ids
-		const parentNodes = tree.filter((n) =>
-			parentsPaths.some((parentNodePath) => this.path(n) === parentNodePath)
-		);
-
-		return parentNodes;
-	}
-}
-
-export default (...args) => {
-	// TODO redundant now, maybe remove
-	let helper = new TreeHelper(...args);
-	return helper;
-};
+import orderBy from 'lodash.unionby'; // used by tree merge
+import uniqueBy from 'lodash.uniqby'; // used by tree merge
+import { SelectionHelper } from './selection-helpers.js';
+import { DragAndDropHelper } from './drag-drop-helpers.js';
+export class TreeHelper {
+    props;
+    config;
+    selection;
+    dragDrop;
+    constructor(props, config = {}) {
+        this.props = props;
+        this.config = config;
+        this.selection = new SelectionHelper(this, config?.recursive ?? false);
+        this.dragDrop = new DragAndDropHelper(this);
+    }
+    // replace with this.props.path
+    path(node) {
+        return this.props.path(node);
+    }
+    //#region basic helpres
+    getParentNodePath(nodePath) {
+        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 === '')
+            return null;
+        return parentPath ?? null;
+    }
+    isChildrenOf(parentNodePath, childrenNodePath) {
+        if (parentNodePath === childrenNodePath)
+            return false;
+        return childrenNodePath?.startsWith(parentNodePath ?? '');
+    }
+    hasChildren(tree, nodePath) {
+        return tree?.find((x) => this.getParentNodePath(this.path(x)) === nodePath);
+    }
+    findNode(tree, nodePath) {
+        return tree.find((node) => this.path(node) === nodePath) ?? null;
+    }
+    nodePathIsChild(nodePath) {
+        const separator = this.config.separator ?? '.';
+        const includesSeparator = nodePath?.includes(separator);
+        return includesSeparator;
+    }
+    getDirectChildren(tree, parentNodePath) {
+        const children = (tree || []).filter((x) => !parentNodePath
+            ? !this.nodePathIsChild(this.path(x))
+            : this.getParentNodePath(this.path(x)) === parentNodePath);
+        return children;
+    }
+    allCHildren(tree, parentNodePath) {
+        const children = tree.filter((x) => this.isChildrenOf(parentNodePath, this.path(x)));
+        return children;
+    }
+    getAllLeafNodes(tree) {
+        return tree.filter((x) => {
+            return this.props.hasChildren(x) == undefined || this.props.hasChildren(x) == false;
+        });
+    }
+    joinTrees(filteredTree, tree) {
+        return tree.map((tnode) => this.findNode(filteredTree, this.path(tnode)) || tnode);
+    }
+    mergeTrees(oldTree, addedTree, nodePath = 'nodePath') {
+        return orderBy(addedTree, oldTree, nodePath);
+    }
+    /** toggles expansion on
+     */
+    changeExpansion(tree, node, changeTo) {
+        const foundNode = this.findNode(tree, this.path(node));
+        this.props.setExpanded(foundNode, changeTo);
+    }
+    /** changes expansion of every node that has this.hasChildren set to true
+     */
+    changeEveryExpansion(tree, changeTo) {
+        return tree.map((node) => {
+            if (this.props.hasChildren(node) == true) {
+                this.props.setExpanded(node, changeTo);
+            }
+            return node;
+        });
+    }
+    /** changes expansion of every node that has this.hasChildren set to true if they are abose set level and expansion property isnt set
+     */
+    expandToLevel(tree, level) {
+        return tree.map((n) => {
+            if (this.props.expanded(n) == undefined &&
+                this.props.expanded(n) == null &&
+                this.props.useCallback(n) != true &&
+                this.getDepthLevel(this.path(n)) <= level) {
+                this.props.setExpanded(n, true);
+            }
+            return n;
+        });
+    }
+    //based on number of dots
+    getDepthLevel(nodePath) {
+        if (nodePath == null)
+            return 0;
+        const separator = this.config.separator ?? '.';
+        return nodePath.split(separator).length - 1;
+    }
+    //#endregion
+    searchTree(tree, filter) {
+        const filteredNodes = tree.filter(filter);
+        const resultNodes = [];
+        // add all parents from each node
+        // needed so that tree can be rendered
+        filteredNodes.forEach((node) => {
+            resultNodes.push(node);
+            const parentNodes = this.getParents(tree, node);
+            resultNodes.push(...parentNodes);
+        });
+        const uniqueNodes = uniqueBy(resultNodes, (node) => this.path(node));
+        return uniqueNodes;
+    }
+    getParents(tree, node) {
+        const parentsPaths = [];
+        let nodePath = this.path(node);
+        // get all parents
+        while (nodePath && nodePath.length > 0) {
+            nodePath = this.getParentNodePath(nodePath);
+            parentsPaths.push(nodePath);
+        }
+        //find nodes for given ids
+        const parentNodes = tree.filter((n) => parentsPaths.some((parentNodePath) => this.path(n) === parentNodePath));
+        return parentNodes;
+    }
+}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-export { default as TreeView } from "./TreeView.svelte";
-export { default as MenuDivider } from "./menu/MenuDivider.svelte";
-export { default as MenuOption } from "./menu/MenuOption.svelte";
-export { TreeHelper } from "./helpers/tree-helper.js";
-export * as Constants from "./consts.js";
+export * as Contants 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,5 +1,6 @@
+export * as Contants 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 { TreeHelper } from './helpers/tree-helper.js';
-export * as Constants from './consts.js';
+export * from './types.js';

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  ContextMenuProps */
 /** @typedef {typeof __propDef.events}  ContextMenuEvents */
 /** @typedef {typeof __propDef.slots}  ContextMenuSlots */
-export default class ContextMenu extends SvelteComponentTyped<{
+export default class ContextMenu extends SvelteComponent<{
     onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -15,7 +15,7 @@ export default class ContextMenu extends SvelteComponentTyped<{
 export type ContextMenuProps = typeof __propDef.props;
 export type ContextMenuEvents = typeof __propDef.events;
 export type ContextMenuSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         onRightClick?: ((e: any, n: any) => Promise<void>) | undefined;

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  MenuProps */
 /** @typedef {typeof __propDef.events}  MenuEvents */
 /** @typedef {typeof __propDef.slots}  MenuSlots */
-export default class Menu extends SvelteComponentTyped<{
+export default class Menu extends SvelteComponent<{
     x: any;
     y: any;
 }, {
@@ -16,7 +16,7 @@ export default class Menu extends SvelteComponentTyped<{
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         x: any;

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  MenuDividerProps */
 /** @typedef {typeof __propDef.events}  MenuDividerEvents */
 /** @typedef {typeof __propDef.slots}  MenuDividerSlots */
-export default class MenuDivider extends SvelteComponentTyped<{
+export default class MenuDivider extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class MenuDivider extends SvelteComponentTyped<{
 export type MenuDividerProps = typeof __propDef.props;
 export type MenuDividerEvents = typeof __propDef.events;
 export type MenuDividerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;

package/dist/menu/MenuOption.svelte

@@ -20,7 +20,7 @@
 	};
 </script>
 
-<div class:disabled={isDisabled} on:click={handleClick}>
+<div class:disabled={isDisabled} on:click={handleClick} on:keydown={handleClick} role="button" tabindex="">
 	{#if text}
 		{text}
 	{:else}

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  MenuOptionProps */
 /** @typedef {typeof __propDef.events}  MenuOptionEvents */
 /** @typedef {typeof __propDef.slots}  MenuOptionSlots */
-export default class MenuOption extends SvelteComponentTyped<{
+export default class MenuOption extends SvelteComponent<{
     isDisabled?: boolean | undefined;
     text?: string | undefined;
 }, {
@@ -15,7 +15,7 @@ export default class MenuOption extends SvelteComponentTyped<{
 export type MenuOptionProps = typeof __propDef.props;
 export type MenuOptionEvents = typeof __propDef.events;
 export type MenuOptionSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         isDisabled?: boolean | undefined;

package/dist/tree-styles.sass

@@ -61,8 +61,6 @@ $treeview-lines: solid black 1px
     align-items: center
     padding: 4px 0
 
-  .div-has-children
-
   .no-arrow
     padding-left: .5rem
 

package/dist/types.d.ts

@@ -0,0 +1,46 @@
+export type Props = {
+    nodePath: string;
+    hasChildren: string;
+    expanded: string;
+    selected: string;
+    useCallback: string;
+    priority: string;
+    isDraggable: string;
+    insertDisabled: string;
+    nestDisabled: string;
+    checkbox: string;
+    visualState: string;
+};
+export declare enum VisualStates {
+    indeterminate = "indeterminate",
+    selected = "true",
+    notSelected = "false"
+}
+export declare enum SelectionModes {
+    all = "all",
+    perNode = "perNode",
+    none = "none"
+}
+export type Node = unknown;
+export type Tree = Node[];
+export type InsertionType = -1 | 0 | 1;
+export type NodePath = string | null;
+export type CustomizableClasses = {
+    treeClass: string;
+    nodeClass: string;
+    expandedToggleClass: string;
+    collapsedToggleClass: string;
+    expandClass: string;
+    inserLineClass: string;
+    inserLineNestClass: string;
+    currentlyDraggedClass: string;
+};
+export type DragEnterCallback = (draggendNode: Node, oldParent: Node, newParent: Node) => boolean;
+export type BeforeMovedCallback = (draggendNode: Node, oldParent: Node, newParent: Node, insertionType: string) => boolean;
+export type ExpandedCallback = (node: Node) => Promise<Node[]>;
+export type HelperConfig = {
+    separator?: string;
+    recursive?: boolean;
+    recalculateNodePath?: boolean;
+    checkboxes?: SelectionModes;
+};

package/dist/types.js

@@ -0,0 +1,12 @@
+export var VisualStates;
+(function (VisualStates) {
+    VisualStates["indeterminate"] = "indeterminate";
+    VisualStates["selected"] = "true";
+    VisualStates["notSelected"] = "false";
+})(VisualStates || (VisualStates = {}));
+export var SelectionModes;
+(function (SelectionModes) {
+    SelectionModes["all"] = "all";
+    SelectionModes["perNode"] = "perNode";
+    SelectionModes["none"] = "none";
+})(SelectionModes || (SelectionModes = {}));

package/package.json

@@ -1,63 +1,71 @@
-{
-	"name": "@keenmate/svelte-treeview",
-	"version": "0.2.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^4.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@sveltejs/package": "^2.0.0",
-		"@types/marked": "^5.0.0",
-		"@types/node": "^20.3.3",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.1.9",
-		"rollup-plugin-string": "^3.0.0",
-		"sass": "^1.49.0",
-		"svelte": "^4.0.0",
-		"svelte-check": "^3.4.3",
-		"svelte-preprocess": "^5.0.4",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.3.6",
-		"@keenmate/svelte-adminlte": "^0.3.20",
-		"@keenmate/svelte-treeview": "^0.0.1",
-		"marked": "^5.1.0",
-		"svelte-multiselect": "github:KeenMate/svelte-multiselect"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"dependencies": {
-		"lodash.unionby": "^4.8.0",
-		"lodash.uniq": "^4.5.0"
-	}
-}
+{
+	"name": "@keenmate/svelte-treeview",
+	"version": "0.3.2",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"test": "vitest",
+		"test:loud": "vitest --silent=false",
+		"coverage": "vitest run --coverage"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@keenmate/svelte-adminlte": "^1.1.3",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@types/marked": "^5.0.0",
+		"@types/node": "^20.3.3",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"@vitest/coverage-v8": "^1.4.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"marked": "^5.1.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"rollup-plugin-string": "^3.0.0",
+		"sass": "^1.49.0",
+		"svelte": "^4.0.0",
+		"svelte-check": "^3.4.3",
+		"svelte-multiselect": "github:KeenMate/svelte-multiselect",
+		"svelte-preprocess": "^5.0.4",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.3.6",
+		"vitest": "^1.4.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@types/lodash.unionby": "^4.8.9",
+		"@types/lodash.uniq": "^4.5.9",
+		"@types/lodash.uniqby": "^4.7.9",
+		"lodash.unionby": "^4.8.0",
+		"lodash.uniq": "^4.5.0",
+		"lodash.uniqby": "^4.7.0"
+	}
+}

package/dist/consts.d.ts

@@ -1,28 +0,0 @@
-export namespace defaultPropNames {
-    let nodePath: string;
-    let hasChildren: string;
-    let expanded: string;
-    let selected: string;
-    let useCallback: string;
-    let priority: string;
-    let isDraggable: string;
-    let insertDisabled: string;
-    let nestDisabled: string;
-    let checkbox: string;
-}
-export const defaultPixelTreshold: 50;
-export const defaultTreeClass: "treeview";
-export const defaultExpandClass: "inserting-highlighted";
-export const defaultCurrentlyDraggedClass: "currently-dragged";
-export namespace checkboxesType {
-    let all: string;
-    let perNode: string;
-    let none: string;
-    let readonly: string;
-}
-export namespace visualStateType {
-    export let indeterminate: string;
-    let selected_1: string;
-    export { selected_1 as selected };
-    export let notSelected: string;
-}