jqtree 1.8.11 → 1.9.0

package/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jqTree",
-    "version": "1.8.11",
+    "version": "1.9.0",
     "main": ["jqtree.css", "jqtree-circle.png", "tree.jquery.js"],
     "dependencies": {
         "jquery": ">=1.9"

package/eslint.config.mjs

@@ -1,7 +1,7 @@
 import cspellESLintPluginRecommended from "@cspell/eslint-plugin/recommended";
 import eslint from "@eslint/js";
 import tseslint from "typescript-eslint";
-import importPlugin from "eslint-plugin-import";
+import importPlugin from "eslint-plugin-import-x";
 import jestDomPlugin from "eslint-plugin-jest-dom";
 import jestExtendedPlugin from "eslint-plugin-jest-extended";
 import perfectionistPlugin from "eslint-plugin-perfectionist";
@@ -25,6 +25,7 @@ export default [
             },
         },
         rules: {
+            "@typescript-eslint/consistent-type-imports": "error",
             "@typescript-eslint/explicit-function-return-type": "off",
             "@typescript-eslint/interface-name-prefix": "off",
             "@typescript-eslint/no-empty-object-type": "off",
@@ -60,12 +61,14 @@ export default [
         },
     },
     {
-        files: ["src/test/**/*.ts"],
+        files: ["test/**/*.ts"],
         ...vitestPlugin.configs.all,
     },
     {
-        files: ["src/test/**/*.ts"],
+        files: ["test/**/*.ts"],
         rules: {
+            "import-x/no-named-as-default": "off",
+            "import-x/no-named-as-default-member": "off",
             "vitest/no-duplicate-hooks": "off",
             "vitest/no-hooks": "off",
             "vitest/no-identical-title": "off",
@@ -80,19 +83,30 @@ export default [
         },
     },
     {
-        files: ["src/test/**/*.ts"],
+        files: ["test/**/*.ts"],
         ...testingLibraryPlugin.configs["flat/dom"],
     },
     {
-        files: ["src/test/**/*.ts"],
+        files: ["test/**/*.ts"],
         ...jestDomPlugin.configs["flat/recommended"],
     },
     {
-        files: ["src/test/**/*.ts"],
+        files: ["test/**/*.ts"],
         ...jestExtendedPlugin.configs["flat/all"],
     },
     {
-        files: ["src/playwright/**/*.ts"],
+        files: ["test/**/*.ts"],
+        rules: {
+            "perfectionist/sort-imports": [
+                "error",
+                {
+                    internalPattern: ["^app"],
+                },
+            ],
+        },
+    },
+    {
+        files: ["playwright/**/*.ts"],
         ...playwrightPlugin.configs["flat/recommended"],
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.11",
+    "version": "1.9.0",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -12,78 +12,72 @@
     "types": "./src/tree.jquery.d.ts",
     "repository": {
         "type": "git",
-        "url": "https://github.com/mbraak/jqtree"
+        "url": "git+https://github.com/mbraak/jqtree.git"
     },
     "scripts": {
         "ci": "pnpm lint && pnpm tsc && pnpm test",
-        "vitest": "vitest run --coverage --config config/vitest.config.ts",
-        "vitest-watch": "vitest --config config/vitest.config.ts",
-        "lint": "eslint src",
+        "vitest": "vitest run --coverage --config test/vitest.config.ts",
+        "vitest-watch": "vitest --config test/vitest.config.ts",
+        "lint": "eslint src playwright test",
         "production": "./config/production",
         "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
         "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
         "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.mjs",
         "prettier": "prettier src/*.ts --write --tab-width 4",
         "tsc": "tsc --noEmit --project tsconfig.json",
-        "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
+        "playwright": "pnpm build-with-coverage && playwright test --config playwright/playwright.config.js",
         "test": "pnpm vitest && pnpm playwright"
     },
     "peerDependencies": {
         "jquery": ">= 3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.28.6",
-        "@babel/core": "^7.28.6",
-        "@babel/preset-env": "^7.28.6",
-        "@babel/preset-typescript": "^7.28.5",
-        "@cspell/eslint-plugin": "^9.6.0",
-        "@eslint/js": "^9.39.2",
-        "@playwright/test": "^1.57.0",
-        "@rollup/plugin-babel": "^6.1.0",
+        "@babel/cli": "^8.0.4",
+        "@babel/core": "^8.0.1",
+        "@babel/preset-env": "^8.0.2",
+        "@babel/preset-typescript": "^8.0.1",
+        "@cspell/eslint-plugin": "^10.0.1",
+        "@eslint/js": "^9.39.5",
+        "@playwright/test": "^1.62.0",
+        "@rollup/plugin-babel": "^7.1.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
-        "@rollup/plugin-terser": "^0.4.4",
+        "@rollup/plugin-terser": "^1.0.0",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/debug": "^4.1.12",
-        "@types/jquery": "^3.5.33",
-        "@types/node": "^25.0.10",
-        "@vitest/coverage-istanbul": "^4.0.18",
-        "@vitest/eslint-plugin": "^1.6.6",
-        "autoprefixer": "^10.4.23",
-        "axe-core": "^4.11.1",
-        "babel-plugin-istanbul": "^7.0.1",
-        "eslint": "^9.39.2",
-        "eslint-plugin-import": "^2.32.0",
+        "@types/debug": "^4.1.13",
+        "@types/jquery": "^4.0.1",
+        "@types/node": "^26.1.1",
+        "@vitest/coverage-istanbul": "^4.1.10",
+        "@vitest/eslint-plugin": "^1.6.24",
+        "autoprefixer": "^10.5.4",
+        "axe-core": "^4.12.1",
+        "babel-plugin-istanbul": "^8.0.0",
+        "eslint": "^9.39.5",
+        "eslint-import-resolver-typescript": "^4.4.5",
+        "eslint-plugin-import-x": "^4.17.1",
         "eslint-plugin-jest-dom": "^5.5.0",
         "eslint-plugin-jest-extended": "^3.0.1",
-        "eslint-plugin-perfectionist": "^5.4.0",
-        "eslint-plugin-playwright": "^2.5.0",
-        "eslint-plugin-testing-library": "^7.15.4",
-        "givens": "^1.3.9",
+        "eslint-plugin-perfectionist": "^5.10.0",
+        "eslint-plugin-playwright": "^2.10.5",
+        "eslint-plugin-testing-library": "^7.16.2",
         "jest-extended": "^7.0.0",
+        "jsdom": "^29.1.1",
         "jsdom-testing-mocks": "^1.16.0",
-        "jsonfile": "^6.2.0",
-        "lodash": "^4.17.23",
-        "msw": "^2.12.7",
-        "postcss": "^8.5.6",
+        "jsonfile": "^6.2.1",
+        "lodash": "^4.18.1",
+        "msw": "^2.15.0",
+        "postcss": "^8.5.23",
         "postcss-cli": "^11.0.1",
         "postcss-import": "^16.1.1",
         "postcss-load-config": "^6.0.1",
         "postcss-nested": "^7.0.2",
-        "prettier": "^3.8.1",
-        "rollup": "^4.56.0",
+        "prettier": "^3.9.6",
+        "rollup": "^4.62.2",
         "rollup-plugin-serve": "^3.0.0",
         "tslib": "^2.8.1",
-        "typescript": "^5.9.3",
-        "typescript-eslint": "^8.53.1",
-        "vitest": "^4.0.18"
-    },
-    "pnpm": {
-        "onlyBuiltDependencies": [
-            "esbuild",
-            "msw",
-            "unrs-resolver"
-        ]
+        "typescript": "^6.0.3",
+        "typescript-eslint": "^8.65.0",
+        "vitest": "^4.1.10"
     }
 }

package/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+allowBuilds:
+  esbuild: true
+  msw: true
+  unrs-resolver: true

package/src/animation.ts

@@ -0,0 +1,48 @@
+export type AnimationSpeed = "fast" | "slow" | number;
+
+export const getAnimationDuration = (duration: AnimationSpeed): number => {
+  if (typeof duration === "number") {
+    return duration;
+  }
+
+  return duration === "slow" ? 600 : 200;
+};
+
+export const slideDown = (
+  element: HTMLElement,
+  animationSpeed: AnimationSpeed,
+  onFinished: () => void,
+): void => {
+  element.style.display = "block";
+
+  const animation = element.animate(
+    [
+      { height: "0", overflow: "hidden" },
+      { height: `${element.scrollHeight}px`, overflow: "hidden" },
+    ],
+    { duration: getAnimationDuration(animationSpeed) },
+  );
+
+  animation.onfinish = () => {
+    onFinished();
+  };
+};
+
+export const slideUp = (
+  element: HTMLElement,
+  animationSpeed: AnimationSpeed,
+  onFinished: () => void,
+): void => {
+  const animation = element.animate(
+    [
+      { height: `${element.scrollHeight}px`, overflow: "hidden" },
+      { height: "0", overflow: "hidden" },
+    ],
+    { duration: getAnimationDuration(animationSpeed) },
+  );
+
+  animation.onfinish = () => {
+    element.style.display = "none";
+    onFinished();
+  };
+};

package/src/dataLoader.ts

@@ -1,6 +1,6 @@
-import { LoadData, TriggerEvent } from "./jqtreeMethodTypes";
-import { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
-import { Node } from "./node";
+import type { LoadData, TriggerEvent } from "./jqtreeMethodTypes";
+import type { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
+import type { Node } from "./node";
 
 export type HandleFinishedLoading = () => void;
 
@@ -14,12 +14,12 @@ interface DataLoaderParams {
 }
 
 export default class DataLoader {
-    private dataFilter?: DataFilter;
-    private loadData: LoadData;
-    private onLoadFailed?: OnLoadFailed;
-    private onLoading?: OnLoading;
-    private treeElement: HTMLElement;
-    private triggerEvent: TriggerEvent;
+    private _dataFilter?: DataFilter;
+    private _loadData: LoadData;
+    private _onLoadFailed?: OnLoadFailed;
+    private _onLoading?: OnLoading;
+    private _treeElement: HTMLElement;
+    private _triggerEvent: TriggerEvent;
 
     constructor({
         dataFilter,
@@ -29,12 +29,12 @@ export default class DataLoader {
         treeElement,
         triggerEvent,
     }: DataLoaderParams) {
-        this.dataFilter = dataFilter;
-        this.loadData = loadData;
-        this.onLoadFailed = onLoadFailed;
-        this.onLoading = onLoading;
-        this.treeElement = treeElement;
-        this.triggerEvent = triggerEvent;
+        this._dataFilter = dataFilter;
+        this._loadData = loadData;
+        this._onLoadFailed = onLoadFailed;
+        this._onLoading = onLoading;
+        this._treeElement = treeElement;
+        this._triggerEvent = triggerEvent;
     }
 
     public loadFromUrl(
@@ -46,18 +46,18 @@ export default class DataLoader {
             return;
         }
 
-        const element = this.getDomElement(parentNode);
-        this.addLoadingClass(element);
-        this.notifyLoading(true, parentNode, element);
+        const element = this._getDomElement(parentNode);
+        this._addLoadingClass(element);
+        this._notifyLoading(true, parentNode, element);
 
         const stopLoading = (): void => {
-            this.removeLoadingClass(element);
-            this.notifyLoading(false, parentNode, element);
+            this._removeLoadingClass(element);
+            this._notifyLoading(false, parentNode, element);
         };
 
-        const handleSuccess = (data: NodeData[] | string): void => {
+        const handleSuccess = (data: NodeData[]): void => {
             stopLoading();
-            this.loadData(this.parseData(data), parentNode);
+            this._loadData(this._parseData(data), parentNode);
 
             if (onFinished && typeof onFinished === "function") {
                 onFinished();
@@ -67,67 +67,57 @@ export default class DataLoader {
         const handleError = (jqXHR: JQuery.jqXHR): void => {
             stopLoading();
 
-            if (this.onLoadFailed) {
-                this.onLoadFailed(jqXHR);
+            if (this._onLoadFailed) {
+                this._onLoadFailed(jqXHR);
             }
         };
 
-        this.submitRequest(urlInfo, handleSuccess, handleError);
+        this._submitRequest(urlInfo, handleSuccess, handleError);
     }
 
-    private addLoadingClass(element: HTMLElement): void {
+    private _addLoadingClass(element: HTMLElement): void {
         element.classList.add("jqtree-loading");
     }
 
-    private getDomElement(parentNode: Node | null): HTMLElement {
+    private _getDomElement(parentNode: Node | null): HTMLElement {
         if (parentNode?.element) {
             return parentNode.element;
         } else {
-            return this.treeElement;
+            return this._treeElement;
         }
     }
 
-    private notifyLoading(
+    private _notifyLoading(
         isLoading: boolean,
         node: Node | null,
         element: HTMLElement,
     ): void {
         const $el = jQuery(element);
 
-        if (this.onLoading) {
-            this.onLoading(isLoading, node, $el);
+        if (this._onLoading) {
+            this._onLoading(isLoading, node, $el);
         }
 
-        this.triggerEvent("tree.loading_data", {
+        this._triggerEvent("tree.loading_data", {
             $el,
             isLoading,
             node,
         });
     }
 
-    private parseData(data: NodeData[] | string): NodeData[] {
-        const getParsedData = () => {
-            if (typeof data === "string") {
-                return JSON.parse(data) as NodeData[];
-            } else {
-                return data;
-            }
-        };
-
-        const parsedData = getParsedData();
-
-        if (this.dataFilter) {
-            return this.dataFilter(parsedData);
+    private _parseData(data: NodeData[]): NodeData[] {
+        if (this._dataFilter) {
+            return this._dataFilter(data);
         } else {
-            return parsedData;
+            return data;
         }
     }
 
-    private removeLoadingClass(element: HTMLElement): void {
+    private _removeLoadingClass(element: HTMLElement): void {
         element.classList.remove("jqtree-loading");
     }
 
-    private submitRequest(
+    private _submitRequest(
         urlInfoInput: JQuery.AjaxSettings | string,
         handleSuccess: JQuery.Ajax.SuccessCallback<any>,
         handleError: JQuery.Ajax.ErrorCallback<any>,

package/src/dragAndDropHandler/dragElement.ts

@@ -7,9 +7,9 @@ interface DragElementParams {
 }
 
 class DragElement {
-    private element: HTMLElement;
-    private offsetX: number;
-    private offsetY: number;
+    private _element: HTMLElement;
+    private _offsetX: number;
+    private _offsetY: number;
 
     constructor({
         autoEscape,
@@ -18,24 +18,24 @@ class DragElement {
         offsetY,
         treeElement,
     }: DragElementParams) {
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
+        this._offsetX = offsetX;
+        this._offsetY = offsetY;
 
-        this.element = this.createElement(nodeName, autoEscape);
+        this._element = this._createElement(nodeName, autoEscape);
 
-        treeElement.appendChild(this.element);
+        treeElement.appendChild(this._element);
     }
 
     public move(pageX: number, pageY: number): void {
-        this.element.style.left = `${pageX - this.offsetX}px`;
-        this.element.style.top = `${pageY - this.offsetY}px`;
+        this._element.style.left = `${pageX - this._offsetX}px`;
+        this._element.style.top = `${pageY - this._offsetY}px`;
     }
 
     public remove(): void {
-        this.element.remove();
+        this._element.remove();
     }
 
-    private createElement(nodeName: string, autoEscape: boolean) {
+    private _createElement(nodeName: string, autoEscape: boolean) {
         const element = document.createElement("span");
         element.classList.add("jqtree-title", "jqtree-dragging");
 

package/src/dragAndDropHandler/generateHitAreas.ts

@@ -1,7 +1,8 @@
-import { Node, Position } from "../node";
-import { getOffsetTop } from "../util";
+import type { Node, Position } from "../node";
+import type { HitArea } from "./types";
+
+import { getOffsetTop } from "../positionUtils";
 import iterateVisibleNodes from "./iterateVisibleNodes";
-import { HitArea } from "./types";
 
 interface HitPosition {
     node: Node;