tree-element 0.1.0

package/lib/selectNodeHandler.js

@@ -0,0 +1,166 @@
+class SelectNodeHandler {
+  _getNodeById;
+  _getNodeElementForNode;
+  _getOnCanSelectNode;
+  _getSelectable;
+  _openParents;
+  _saveState;
+  _selectedNodes;
+  _selectedSingleNode;
+  _triggerEvent;
+  constructor({
+    getNodeById,
+    getNodeElementForNode,
+    getOnCanSelectNode,
+    getSelectable,
+    openParents,
+    saveState,
+    triggerEvent
+  }) {
+    this._getNodeById = getNodeById;
+    this._getNodeElementForNode = getNodeElementForNode;
+    this._getOnCanSelectNode = getOnCanSelectNode;
+    this._getSelectable = getSelectable;
+    this._openParents = openParents;
+    this._saveState = saveState;
+    this._selectedNodes = new Set();
+    this._selectedSingleNode = null;
+    this._triggerEvent = triggerEvent;
+  }
+  addToSelection(node) {
+    if (node.id != null) {
+      this._selectedNodes.add(node.id);
+    } else {
+      this._selectedSingleNode = node;
+    }
+  }
+  clear() {
+    this._selectedNodes.clear();
+    this._selectedSingleNode = null;
+  }
+  getSelectedNode() {
+    const selectedNodes = this.getSelectedNodes();
+    if (selectedNodes.length) {
+      return selectedNodes[0] ?? false;
+    } else {
+      return false;
+    }
+  }
+  getSelectedNodes() {
+    if (this._selectedSingleNode) {
+      return [this._selectedSingleNode];
+    } else {
+      const selectedNodes = [];
+      this._selectedNodes.forEach(id => {
+        const node = this._getNodeById(id);
+        if (node) {
+          selectedNodes.push(node);
+        }
+      });
+      return selectedNodes;
+    }
+  }
+  getSelectedNodesUnder(parent) {
+    if (this._selectedSingleNode) {
+      if (parent.isParentOf(this._selectedSingleNode)) {
+        return [this._selectedSingleNode];
+      } else {
+        return [];
+      }
+    } else {
+      const selectedNodes = [];
+      this._selectedNodes.forEach(id => {
+        const node = this._getNodeById(id);
+        if (node && parent.isParentOf(node)) {
+          selectedNodes.push(node);
+        }
+      });
+      return selectedNodes;
+    }
+  }
+  isNodeSelected(node) {
+    if (node.id != null) {
+      return this._selectedNodes.has(node.id);
+    } else if (this._selectedSingleNode) {
+      return this._selectedSingleNode.element === node.element;
+    } else {
+      return false;
+    }
+  }
+  removeFromSelection(node, includeChildren = false) {
+    if (node.id == null) {
+      if (this._selectedSingleNode && node.element === this._selectedSingleNode.element) {
+        this._selectedSingleNode = null;
+      }
+    } else {
+      this._selectedNodes.delete(node.id);
+      if (includeChildren) {
+        node.iterate(() => {
+          if (node.id != null) {
+            this._selectedNodes.delete(node.id);
+          }
+          return true;
+        });
+      }
+    }
+  }
+
+  /* Select a single node.
+  * Renders the changed elements.
+  * Deselects if the node is currently selected (if the mustToggle is on).
+  * Deselects the previously selected node.
+  * Check if the node is selectable.
+  * Saves the state.
+  * Options:
+    * mustSetFocus: set the focus to the selected node
+    * mustToggle: support deselecting the selected node
+  */
+  selectSingleNode(node, optionsParam) {
+    const defaultOptions = {
+      mustSetFocus: true,
+      mustToggle: true
+    };
+    const selectOptions = {
+      ...defaultOptions,
+      ...(optionsParam ?? {})
+    };
+    const canSelect = () => {
+      if (!this._getSelectable()) {
+        return false;
+      }
+      const onCanSelectNode = this._getOnCanSelectNode();
+      return onCanSelectNode ? onCanSelectNode(node) : true;
+    };
+    if (!canSelect()) {
+      return;
+    }
+    const deselectCurrentNode = deselectedNode => {
+      this.removeFromSelection(deselectedNode);
+      this._getNodeElementForNode(deselectedNode).deselect();
+    };
+    if (this.isNodeSelected(node)) {
+      if (selectOptions.mustToggle) {
+        deselectCurrentNode(node);
+        this._triggerEvent("tree.deselect", {
+          node
+        });
+      }
+    } else {
+      const deselectedNode = this.getSelectedNode();
+      if (deselectedNode) {
+        deselectCurrentNode(deselectedNode);
+      }
+      this.addToSelection(node);
+      this._openParents(node);
+      this._getNodeElementForNode(node).select(selectOptions.mustSetFocus);
+      this._triggerEvent("tree.select", {
+        deselectedNode: deselectedNode || null,
+        node
+      });
+    }
+    this._saveState();
+  }
+}
+
+export { SelectNodeHandler as default };
+//# sourceMappingURL=selectNodeHandler.js.map

package/lib/selectNodeHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectNodeHandler.js","sources":["../src/selectNodeHandler.ts"],"sourcesContent":["import type { GetNodeById, GetNodeElementForNode, OpenParents, TriggerEvent } from \"./methodTypes\";\nimport type { Node, NodeId } from \"./node\";\nimport type { OnCanSelectNode } from \"./options\";\n\nexport interface SelectNodeOptions {\n    mustSetFocus?: boolean;\n    mustToggle?: boolean;\n}\n\ninterface SelectNodeHandlerParameters {\n    getNodeById: GetNodeById;\n    getNodeElementForNode: GetNodeElementForNode;\n    getOnCanSelectNode: () => OnCanSelectNode | undefined;\n    getSelectable: () => boolean;\n    openParents: OpenParents;\n    saveState: () => void;\n    triggerEvent: TriggerEvent;\n}\n\nexport default class SelectNodeHandler {\n    private getNodeById: GetNodeById;\n    private getNodeElementForNode: GetNodeElementForNode;\n    private getOnCanSelectNode: () => OnCanSelectNode | undefined;\n    private getSelectable: () => boolean;\n    private openParents: OpenParents;\n    private saveState: () => void;\n    private selectedNodes: Set<NodeId>;\n    private selectedSingleNode: Node | null;\n    private triggerEvent: TriggerEvent;\n\n    constructor({ getNodeById, getNodeElementForNode, getOnCanSelectNode, getSelectable, openParents, saveState, triggerEvent }: SelectNodeHandlerParameters) {\n        this.getNodeById = getNodeById;\n        this.getNodeElementForNode = getNodeElementForNode;\n        this.getOnCanSelectNode = getOnCanSelectNode;\n        this.getSelectable = getSelectable;\n        this.openParents = openParents;\n        this.saveState = saveState;\n        this.selectedNodes = new Set<NodeId>();\n        this.selectedSingleNode = null;\n        this.triggerEvent = triggerEvent;\n    }\n\n    public addToSelection(node: Node): void {\n        if (node.id != null) {\n            this.selectedNodes.add(node.id);\n        } else {\n            this.selectedSingleNode = node;\n        }\n    }\n\n    public clear(): void {\n        this.selectedNodes.clear();\n        this.selectedSingleNode = null;\n    }\n\n    public getSelectedNode(): false | Node {\n        const selectedNodes = this.getSelectedNodes();\n\n        if (selectedNodes.length) {\n            return selectedNodes[0] ?? false;\n        } else {\n            return false;\n        }\n    }\n\n    public getSelectedNodes(): Node[] {\n        if (this.selectedSingleNode) {\n            return [this.selectedSingleNode];\n        } else {\n            const selectedNodes: Node[] = [];\n\n            this.selectedNodes.forEach((id) => {\n                const node = this.getNodeById(id);\n                if (node) {\n                    selectedNodes.push(node);\n                }\n            });\n\n            return selectedNodes;\n        }\n    }\n\n    public getSelectedNodesUnder(parent: Node): Node[] {\n        if (this.selectedSingleNode) {\n            if (parent.isParentOf(this.selectedSingleNode)) {\n                return [this.selectedSingleNode];\n            } else {\n                return [];\n            }\n        } else {\n            const selectedNodes: Node[] = [];\n\n            this.selectedNodes.forEach((id) => {\n                const node = this.getNodeById(id);\n                if (node && parent.isParentOf(node)) {\n                    selectedNodes.push(node);\n                }\n            });\n\n            return selectedNodes;\n        }\n    }\n\n    public isNodeSelected(node: Node): boolean {\n        if (node.id != null) {\n            return this.selectedNodes.has(node.id);\n        } else if (this.selectedSingleNode) {\n            return this.selectedSingleNode.element === node.element;\n        } else {\n            return false;\n        }\n    }\n\n    public removeFromSelection(node: Node, includeChildren = false): void {\n        if (node.id == null) {\n            if (\n                this.selectedSingleNode &&\n                node.element === this.selectedSingleNode.element\n            ) {\n                this.selectedSingleNode = null;\n            }\n        } else {\n            this.selectedNodes.delete(node.id);\n\n            if (includeChildren) {\n                node.iterate(() => {\n                    if (node.id != null) {\n                        this.selectedNodes.delete(node.id);\n                    }\n                    return true;\n                });\n            }\n        }\n    }\n\n    /* Select a single node.\n    * Renders the changed elements.\n    * Deselects if the node is currently selected (if the mustToggle is on).\n    * Deselects the previously selected node.\n    * Check if the node is selectable.\n    * Saves the state.\n    * Options:\n      * mustSetFocus: set the focus to the selected node\n      * mustToggle: support deselecting the selected node\n    */\n    public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {\n        const defaultOptions = { mustSetFocus: true, mustToggle: true };\n        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };\n\n        const canSelect = (): boolean => {\n            if (!this.getSelectable()) {\n                return false;\n            }\n\n            const onCanSelectNode = this.getOnCanSelectNode();\n            return onCanSelectNode ? onCanSelectNode(node) : true;\n        };\n\n        if (!canSelect()) {\n            return;\n        }\n\n        const deselectCurrentNode = (deselectedNode: Node) => {\n            this.removeFromSelection(deselectedNode);\n            this.getNodeElementForNode(deselectedNode).deselect();\n        };\n\n        if (this.isNodeSelected(node)) {\n            if (selectOptions.mustToggle) {\n                deselectCurrentNode(node);\n                this.triggerEvent(\"tree.deselect\", { node });\n            }\n        } else {\n            const deselectedNode = this.getSelectedNode();\n\n            if (deselectedNode) {\n                deselectCurrentNode(deselectedNode);\n            }\n\n            this.addToSelection(node);\n            this.openParents(node);\n            this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);\n\n            this.triggerEvent(\"tree.select\", {\n                deselectedNode: deselectedNode || null,\n                node,\n            });\n        }\n\n        this.saveState();\n    }\n}\n"],"names":["getNodeById","getNodeElementForNode","getOnCanSelectNode","getSelectable","openParents","saveState","selectedNodes","selectedSingleNode","triggerEvent"],"mappings":"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"}

package/lib/setDefaultOptions.d.ts

@@ -0,0 +1,4 @@
+import type { TreeElementOptions } from "./options.js";
+declare const setDefaultOptions: (htmlElement: HTMLElement, inputOptions: Partial<TreeElementOptions>) => TreeElementOptions;
+export default setDefaultOptions;
+//# sourceMappingURL=setDefaultOptions.d.ts.map

package/lib/setDefaultOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setDefaultOptions.d.ts","sourceRoot":"","sources":["../src/setDefaultOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AA6CpD,QAAA,MAAM,iBAAiB,GAAI,aAAa,WAAW,EAAE,cAAc,OAAO,CAAC,kBAAkB,CAAC,KAAG,kBAShG,CAAA;AAwBD,eAAe,iBAAiB,CAAC"}

package/lib/setDefaultOptions.js

@@ -0,0 +1,86 @@
+import { DEFAULT_CLASS_PREFIX } from './classNames.js';
+import { Node } from './node.js';
+
+const defaults = {
+  animationSpeed: "fast",
+  autoEscape: true,
+  autoOpen: false,
+  // true / false / int (open n levels starting at 0)
+  buttonLeft: true,
+  classPrefix: DEFAULT_CLASS_PREFIX,
+  // the prefix of all css classes
+  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
+  // http://www.fileformat.info/info/unicode/char/25ba/index.htm
+  closedIcon: undefined,
+  commonClassName: undefined,
+  // the class of every element; the default is "<classPrefix>-common"
+  data: undefined,
+  dataFilter: undefined,
+  dataUrl: undefined,
+  dragAndDrop: false,
+  keyboardSupport: true,
+  nodeClass: Node,
+  onCanMove: undefined,
+  // Can this node be moved?
+  onCanMoveTo: undefined,
+  // Can this node be moved to this position? function(moved_node, target_node, position)
+  onCanSelectNode: undefined,
+  onCreateLi: undefined,
+  onDragMove: undefined,
+  onDragStop: undefined,
+  onGetStateFromStorage: undefined,
+  onIsMoveHandle: undefined,
+  onSetStateFromStorage: undefined,
+  openedIcon: undefined,
+  openFolderDelay: 500,
+  // The delay for opening a folder during drag and drop; the value is in milliseconds
+  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
+  // http://www.fileformat.info/info/unicode/char/25bc/index.htm
+  rtl: undefined,
+  // right-to-left support; true / false (default)
+  saveState: false,
+  // true / false / string (local storage key; the default key is "tree")
+  selectable: true,
+  showEmptyFolder: false,
+  slide: true,
+  // must display slide animation?
+  startDndDelay: 300,
+  // The delay for starting dnd (in milliseconds)
+  tabIndex: 0,
+  treeClassName: undefined,
+  // the class of the root element; the default is classPrefix
+  useContextMenu: true
+};
+const setDefaultOptions = (htmlElement, inputOptions) => {
+  const options = {
+    ...defaults,
+    ...inputOptions
+  };
+  options.dataUrl ??= htmlElement.dataset.url;
+  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
+  options.closedIcon ??= getDefaultClosedIcon(options);
+  options.openedIcon ??= "&#x25bc;";
+  return options;
+};
+const getDefaultClosedIcon = options => {
+  if (options.rtl) {
+    // triangle to the left
+    return "&#x25c0;";
+  } else {
+    // triangle to the right
+    return "&#x25ba;";
+  }
+};
+const getRtlOptionFromHTMLElement = htmlElement => {
+  const dataRtl = htmlElement.dataset.rtl;
+  if (dataRtl == "") {
+    return true;
+  } else if (dataRtl === "false") {
+    return false;
+  } else {
+    return Boolean(dataRtl);
+  }
+};
+
+export { setDefaultOptions as default };
+//# sourceMappingURL=setDefaultOptions.js.map

package/lib/setDefaultOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER\n  // http://www.fileformat.info/info/unicode/char/25ba/index.htm\n  closedIcon: undefined,\n  commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  data: undefined,\n  dataFilter: undefined,\n  dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  onCanMove: undefined, // Can this node be moved?\n  onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  onCanSelectNode: undefined,\n  onCreateLi: undefined,\n  onDragMove: undefined,\n  onDragStop: undefined,\n  onGetStateFromStorage: undefined,\n  onIsMoveHandle: undefined,\n  onSetStateFromStorage: undefined,\n  openedIcon: undefined,\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE\n  // http://www.fileformat.info/info/unicode/char/25bc/index.htm\n  rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (htmlElement: HTMLElement, inputOptions: Partial<TreeElementOptions>): TreeElementOptions => {\n  const options = { ...defaults, ...inputOptions };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= \"&#x25bc;\";\n\n  return options;\n}\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  if (options.rtl) {\n    // triangle to the left\n    return \"&#x25c0;\";\n  } else {\n    // triangle to the right\n    return \"&#x25ba;\";\n  }\n}\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  } else if (dataRtl === \"false\") {\n    return false;\n  } else {\n    return Boolean(dataRtl);\n  }\n}\n\nexport default setDefaultOptions;"],"names":[],"mappings":";;;AAKA,MAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,eAAe,EAAE,SAAS;AAAE;AAC5B,EAAA,IAAI,EAAE,SAAS;AACf,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,OAAO,EAAE,SAAS;AAClB,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf,EAAA,SAAS,EAAE,SAAS;AAAE;AACtB,EAAA,WAAW,EAAE,SAAS;AAAE;AACxB,EAAA,eAAe,EAAE,SAAS;AAC1B,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,qBAAqB,EAAE,SAAS;AAChC,EAAA,cAAc,EAAE,SAAS;AACzB,EAAA,qBAAqB,EAAE,SAAS;AAChC,EAAA,UAAU,EAAE,SAAS;AACrB,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA;AACA,EAAA,GAAG,EAAE,SAAS;AAAE;AAChB,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX,EAAA,aAAa,EAAE,SAAS;AAAE;AAC1B,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,MAAM,iBAAiB,GAAG,CAAC,WAAwB,EAAE,YAAyC,KAAyB;AACrH,EAAA,MAAM,OAAO,GAAG;AAAE,IAAA,GAAG,QAAQ;IAAE,GAAG;GAAc;AAEhD,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,UAAU;AAEjC,EAAA,OAAO,OAAO;AAChB;AAEA,MAAM,oBAAoB,GAAI,OAA2B,IAAa;EACpE,IAAI,OAAO,CAAC,GAAG,EAAE;AACf;AACA,IAAA,OAAO,UAAU;AACnB,EAAA,CAAC,MAAM;AACL;AACA,IAAA,OAAO,UAAU;AACnB,EAAA;AACF,CAAC;AAED,MAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,EAAE;AAC9B,IAAA,OAAO,KAAK;AACd,EAAA,CAAC,MAAM;IACL,OAAO,OAAO,CAAC,OAAO,CAAC;AACzB,EAAA;AACF,CAAC;;"}

package/lib/triggerCustomEvent.d.ts

@@ -0,0 +1,3 @@
+declare const triggerCustomEvent: (element: HTMLElement, eventName: string, values?: Record<string, unknown>) => boolean;
+export default triggerCustomEvent;
+//# sourceMappingURL=triggerCustomEvent.d.ts.map

package/lib/triggerCustomEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triggerCustomEvent.d.ts","sourceRoot":"","sources":["../src/triggerCustomEvent.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,kBAAkB,GAAI,SAAS,WAAW,EAAE,WAAW,MAAM,EAAE,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAG,OAUvG,CAAA;AAED,eAAe,kBAAkB,CAAC"}

package/lib/triggerCustomEvent.js

@@ -0,0 +1,13 @@
+// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).
+const triggerCustomEvent = (element, eventName, values) => {
+  const event = new CustomEvent(eventName, {
+    bubbles: true,
+    cancelable: true,
+    detail: values
+  });
+  element.dispatchEvent(event);
+  return !event.defaultPrevented;
+};
+
+export { triggerCustomEvent as default };
+//# sourceMappingURL=triggerCustomEvent.js.map

package/lib/triggerCustomEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"triggerCustomEvent.js","sources":["../src/triggerCustomEvent.ts"],"sourcesContent":["// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).\nconst triggerCustomEvent = (element: HTMLElement, eventName: string, values?: Record<string, unknown>): boolean => {\n  const event = new CustomEvent(eventName, {\n    bubbles: true,\n    cancelable: true,\n    detail: values,\n  });\n\n  element.dispatchEvent(event);\n\n  return !event.defaultPrevented;\n}\n\nexport default triggerCustomEvent;"],"names":[],"mappings":"AAAA;AACA,MAAM,kBAAkB,GAAG,CAAC,OAAoB,EAAE,SAAiB,EAAE,MAAgC,KAAc;AACjH,EAAA,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;AACvC,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,MAAM,EAAE;AACV,GAAC,CAAC;AAEF,EAAA,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC;EAE5B,OAAO,CAAC,KAAK,CAAC,gBAAgB;AAChC;;"}

package/lib/util.d.ts

@@ -0,0 +1,3 @@
+export declare const isInt: (n: unknown) => boolean;
+export declare const getBoolString: (value: unknown) => string;
+//# sourceMappingURL=util.d.ts.map

package/lib/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,KAAG,OACK,CAAC;AAEzC,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACnB,CAAC"}

package/lib/util.js

@@ -0,0 +1,5 @@
+const isInt = n => typeof n === "number" && n % 1 === 0;
+const getBoolString = value => value ? "true" : "false";
+
+export { getBoolString, isInt };
+//# sourceMappingURL=util.js.map

package/lib/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../src/util.ts"],"sourcesContent":["export const isInt = (n: unknown): boolean =>\n    typeof n === \"number\" && n % 1 === 0;\n\nexport const getBoolString = (value: unknown): string =>\n    value ? \"true\" : \"false\";\n"],"names":[],"mappings":"AAAO,MAAM,KAAK,GAAI,CAAU,IAC5B,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,GAAG,CAAC,KAAK;AAEhC,MAAM,aAAa,GAAI,KAAc,IACxC,KAAK,GAAG,MAAM,GAAG;;"}

package/lib/version.d.ts

@@ -0,0 +1,3 @@
+declare const version = "0.1.0";
+export default version;
+//# sourceMappingURL=version.d.ts.map

package/lib/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,OAAO,UAAU,CAAC;AAExB,eAAe,OAAO,CAAC"}

package/lib/version.js

@@ -0,0 +1,5 @@
+// Generated by config/generateVersion.mjs. Do not edit.
+const version = "0.1.0";
+
+export { version as default };
+//# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.1.0\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,MAAM,OAAO,GAAG;;"}

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "tree-element",
+  "version": "0.1.0",
+  "description": "Tree widget in plain javascript",
+  "keywords": [
+    "tree"
+  ],
+  "license": "Apache-2.0",
+  "browser": "./tree_element.js",
+  "main": "./tree_element.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "default": "./tree_element.js"
+    },
+    "./tree_element.css": "./tree_element.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "tree_element.css",
+    "tree_element.debug.js",
+    "tree_element.debug.js.map",
+    "tree_element.js",
+    "tree_element.js.map",
+    "lib",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mbraak/tree-element.git"
+  },
+  "scripts": {
+    "ci": "pnpm lint && pnpm tsc && pnpm docs-check && pnpm test",
+    "vitest": "vitest run --coverage --config test/vitest.config.mjs",
+    "vitest-watch": "vitest --config test/vitest.config.mjs",
+    "lint": "eslint config src playwright test",
+    "production": "./config/production",
+    "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
+    "docs-api": "typedoc && node docs/scripts/fixApiLinks.mjs",
+    "docs-dev": "pnpm docs-api && vitepress dev docs",
+    "docs-build": "pnpm docs-api && vitepress build docs",
+    "docs-preview": "vitepress preview docs",
+    "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",
+    "version": "node config/generateVersion.mjs && git add src/version.ts",
+    "playwright": "pnpm build-with-coverage && playwright test --config playwright/playwright.config.js",
+    "test": "pnpm vitest && pnpm playwright",
+    "docs-check": "kiira check"
+  },
+  "devDependencies": {
+    "@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.2.0",
+    "@eslint/js": "^10",
+    "@playwright/test": "^1.62.1",
+    "@rollup/plugin-babel": "^7.1.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/debug": "^4.1.13",
+    "@types/node": "^26.4.0",
+    "@vitest/coverage-istanbul": "^4.1.11",
+    "@vitest/eslint-plugin": "^1.6.27",
+    "autoprefixer": "^10.5.4",
+    "axe-core": "^4.13.0",
+    "babel-plugin-istanbul": "^8.0.0",
+    "eslint": "^10",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-import-x": "^4.17.1",
+    "eslint-plugin-jest-dom": "^5.10.1",
+    "eslint-plugin-jest-extended": "^3.0.1",
+    "eslint-plugin-perfectionist": "^5.11.0",
+    "eslint-plugin-playwright": "^2.11.0",
+    "eslint-plugin-testing-library": "^7.16.2",
+    "jest-extended": "^7.0.0",
+    "jsdom": "^30",
+    "jsdom-testing-mocks": "^1.16.0",
+    "jsonfile": "^6.2.1",
+    "kiira": "^0.6.0",
+    "kiira-core": "^0.6.0",
+    "lodash": "^4.18.1",
+    "msw": "^2.15.0",
+    "postcss": "^8.5.26",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^17",
+    "postcss-load-config": "^6.0.1",
+    "postcss-nested": "^8",
+    "prettier": "^3.9.6",
+    "rollup": "^4.63.1",
+    "rollup-plugin-serve": "^3.0.0",
+    "rollup-plugin-tsconfig-paths": "^1.5.2",
+    "tslib": "^2.8.1",
+    "typedoc": "^0.28.20",
+    "typedoc-plugin-markdown": "^4.13.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.69.0",
+    "vitepress": "^1.6.4",
+    "vitest": "^4.1.11"
+  }
+}

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/classNames.ts

@@ -0,0 +1,70 @@
+export interface ClassNames {
+    border: string;
+    circle: string;
+    closed: string;
+    common: string;
+    dnd: string;
+    dragging: string;
+    element: string;
+    folder: string;
+    ghost: string;
+    inside: string;
+    line: string;
+    loading: string;
+    moving: string;
+    rtl: string;
+    selected: string;
+    title: string;
+    titleButtonLeft: string;
+    titleButtonRight: string;
+    titleFolder: string;
+    toggler: string;
+    togglerLeft: string;
+    togglerRight: string;
+    tree: string;
+}
+
+export interface ClassNamesOptions {
+    classPrefix: string;
+    commonClassName?: string;
+    treeClassName?: string;
+}
+
+export const DEFAULT_CLASS_PREFIX = "tree-element";
+
+/* Create the class names that the widget puts on the elements it creates.
+ * They are all derived from classPrefix, except for the class of the root
+ * element and the class that every element gets, which have an option of
+ * their own.
+ */
+const createClassNames = ({
+    classPrefix,
+    commonClassName,
+    treeClassName,
+}: ClassNamesOptions): ClassNames => ({
+    border: `${classPrefix}-border`,
+    circle: `${classPrefix}-circle`,
+    closed: `${classPrefix}-closed`,
+    common: commonClassName ?? `${classPrefix}-common`,
+    dnd: `${classPrefix}-dnd`,
+    dragging: `${classPrefix}-dragging`,
+    element: `${classPrefix}-element`,
+    folder: `${classPrefix}-folder`,
+    ghost: `${classPrefix}-ghost`,
+    inside: `${classPrefix}-inside`,
+    line: `${classPrefix}-line`,
+    loading: `${classPrefix}-loading`,
+    moving: `${classPrefix}-moving`,
+    rtl: `${classPrefix}-rtl`,
+    selected: `${classPrefix}-selected`,
+    title: `${classPrefix}-title`,
+    titleButtonLeft: `${classPrefix}-title-button-left`,
+    titleButtonRight: `${classPrefix}-title-button-right`,
+    titleFolder: `${classPrefix}-title-folder`,
+    toggler: `${classPrefix}-toggler`,
+    togglerLeft: `${classPrefix}-toggler-left`,
+    togglerRight: `${classPrefix}-toggler-right`,
+    tree: treeClassName ?? classPrefix,
+});
+
+export default createClassNames;