@dodlhuat/basix 1.2.8 → 1.3.0

package/js/tree.ts

@@ -1,244 +0,0 @@
-type NodeType = 'file' | 'folder';
-
-interface TreeOptions {
-  onSelect?: (node: TreeNode) => void;
-}
-
-class TreeNode {
-  public label: string;
-  public type: NodeType;
-  public children: TreeNode[];
-  public expanded: boolean;
-  public selected: boolean;
-  public element: HTMLDivElement | null;
-  public childrenContainer: HTMLUListElement | null;
-
-  constructor(label: string, type: NodeType = 'file', children: TreeNode[] = []) {
-    this.label = label;
-    this.type = type;
-    this.children = children;
-    this.expanded = false;
-    this.selected = false;
-    this.element = null;
-    this.childrenContainer = null;
-  }
-}
-
-class TreeComponent {
-  private container: HTMLElement;
-  private data: TreeNode[];
-  private selectedNode: TreeNode | null;
-  private readonly options: TreeOptions;
-
-  constructor(elementOrSelector: string | HTMLElement, data: TreeNode[], options: TreeOptions = {}) {
-    const container = typeof elementOrSelector === 'string'
-      ? document.querySelector<HTMLElement>(elementOrSelector)
-      : elementOrSelector;
-
-    if (!container) {
-      throw new Error(`TreeComponent: Element not found for selector "${elementOrSelector}"`);
-    }
-
-    this.container = container;
-    this.data = data;
-    this.selectedNode = null;
-    this.options = options;
-    this.init();
-  }
-
-  private init(): void {
-    this.render();
-  }
-
-  public render(): void {
-    this.container.innerHTML = '';
-    this.data.forEach(node => {
-      this.renderNode(node, this.container);
-    });
-  }
-
-  private renderNode(node: TreeNode, parentElement: HTMLElement): void {
-    const li = document.createElement('li');
-    li.className = 'tree-node';
-
-    const itemDiv = document.createElement('div');
-    itemDiv.className = `tree-item ${node.type}`;
-
-    if (node.selected) itemDiv.classList.add('selected');
-    if (node.expanded) itemDiv.classList.add('expanded');
-
-    const iconDiv = this.createIconElement(node.type);
-    const labelSpan = this.createLabelElement(node.label);
-
-    itemDiv.append(iconDiv, labelSpan);
-    li.appendChild(itemDiv);
-
-    node.element = itemDiv;
-
-    if (node.type === 'folder' && node.children.length > 0) {
-      const childrenUl = this.createChildrenContainer(node);
-      li.appendChild(childrenUl);
-      node.childrenContainer = childrenUl;
-
-      itemDiv.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.toggleNode(node);
-      });
-    } else {
-      itemDiv.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.selectNode(node);
-      });
-    }
-
-    parentElement.appendChild(li);
-  }
-
-  private createIconElement(type: NodeType): HTMLDivElement {
-    const iconDiv = document.createElement('div');
-    iconDiv.className = 'tree-icon';
-
-    if (type === 'folder') {
-      iconDiv.innerHTML = `
-        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M9 18l6-6-6-6" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
-    } else {
-      iconDiv.innerHTML = `
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M13 2v7h7" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      `;
-    }
-
-    return iconDiv;
-  }
-
-  private createLabelElement(label: string): HTMLSpanElement {
-    const labelSpan = document.createElement('span');
-    labelSpan.className = 'tree-label';
-    labelSpan.textContent = label;
-    return labelSpan;
-  }
-
-  private createChildrenContainer(node: TreeNode): HTMLUListElement {
-    const childrenUl = document.createElement('ul');
-    childrenUl.className = 'tree-children';
-
-    if (node.expanded) {
-      childrenUl.classList.add('expanded');
-      childrenUl.style.height = 'auto';
-    }
-
-    node.children.forEach(child => {
-      this.renderNode(child, childrenUl);
-    });
-
-    return childrenUl;
-  }
-
-  private toggleNode(node: TreeNode): void {
-    node.expanded = !node.expanded;
-    node.element?.classList.toggle('expanded', node.expanded);
-
-    if (node.childrenContainer) {
-      if (node.expanded) {
-        this.expandChildren(node.childrenContainer);
-      } else {
-        this.collapseChildren(node.childrenContainer);
-      }
-      node.childrenContainer.classList.toggle('expanded', node.expanded);
-    }
-  }
-
-  private expandChildren(container: HTMLUListElement): void {
-    container.style.height = container.scrollHeight + 'px';
-    container.addEventListener('transitionend', () => {
-      container.style.height = 'auto';
-    }, { once: true });
-  }
-
-  private collapseChildren(container: HTMLUListElement): void {
-    container.style.height = container.offsetHeight + 'px';
-    requestAnimationFrame(() => {
-      container.style.height = '0';
-    });
-  }
-
-  public selectNode(node: TreeNode): void {
-    if (this.selectedNode?.element) {
-      this.selectedNode.element.classList.remove('selected');
-      this.selectedNode.selected = false;
-    }
-
-    node.selected = true;
-    node.element?.classList.add('selected');
-    this.selectedNode = node;
-
-    this.options.onSelect?.(node);
-    this.container.dispatchEvent(new CustomEvent('tree-select', {
-      detail: { node },
-      bubbles: true,
-    }));
-  }
-
-  public expandAll(): void {
-    this.traverseNodes(this.data, (node) => {
-      if (node.type === 'folder' && node.childrenContainer) {
-        node.expanded = true;
-        node.element?.classList.add('expanded');
-        node.childrenContainer.classList.add('expanded');
-        node.childrenContainer.style.height = 'auto';
-      }
-    });
-  }
-
-  public collapseAll(): void {
-    this.traverseNodes(this.data, (node) => {
-      if (node.type === 'folder' && node.childrenContainer) {
-        node.expanded = false;
-        node.element?.classList.remove('expanded');
-        node.childrenContainer.classList.remove('expanded');
-        node.childrenContainer.style.height = '0';
-      }
-    });
-  }
-
-  private traverseNodes(nodes: TreeNode[], callback: (node: TreeNode) => void): void {
-    nodes.forEach(node => {
-      callback(node);
-      if (node.children.length > 0) {
-        this.traverseNodes(node.children, callback);
-      }
-    });
-  }
-
-  public destroy(): void {
-    this.container.innerHTML = '';
-    this.selectedNode = null;
-  }
-
-  public getSelectedNode(): TreeNode | null {
-    return this.selectedNode;
-  }
-
-  public findNodeByLabel(label: string): TreeNode | null {
-    return this.findNode(this.data, label);
-  }
-
-  private findNode(nodes: TreeNode[], label: string): TreeNode | null {
-    for (const node of nodes) {
-      if (node.label === label) return node;
-      if (node.children.length > 0) {
-        const found = this.findNode(node.children, label);
-        if (found) return found;
-      }
-    }
-    return null;
-  }
-}
-
-export { TreeComponent, TreeNode };
-export type { NodeType, TreeOptions };

package/js/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "outDir": ".",
-    "rootDir": ".",
-    "strict": true,
-    "declaration": true,
-    "types": [],
-  },
-  "include": [
-    "*.ts"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules",
-    "../node_modules"
-  ]
-}

package/js/utils.ts

@@ -1,119 +0,0 @@
-/**
- * Utility functions for DOM manipulation and element handling
- */
-
-interface Utils {
-    ready(fn: () => void): void;
-    value(element: HTMLElement): string;
-    text(element: HTMLElement): string;
-    attribute(element: HTMLElement, attribute: string): string | undefined;
-    isList(element: HTMLElement | NodeList): boolean;
-    isHidden(element: HTMLElement): boolean;
-}
-
-const utils: Utils = {
-    /**
-     * Execute a function when the DOM is ready
-     * @param fn - Callback function to execute
-     */
-    ready(fn: () => void): void {
-        if (document.readyState === "complete" || document.readyState === "interactive") {
-            setTimeout(fn, 1);
-        } else {
-            document.addEventListener("DOMContentLoaded", fn);
-        }
-    },
-
-    /**
-     * Get the value of an element from various sources
-     * Priority: value attribute > data-value attribute > innerText
-     * @param element - HTML element to get value from
-     * @returns The element's value as a string
-     */
-    value(element: HTMLElement): string {
-        if (element.hasAttribute('value')) {
-            return element.getAttribute('value') || '';
-        }
-        if (element.hasAttribute('data-value')) {
-            return element.getAttribute('data-value') || '';
-        }
-        return element.innerText;
-    },
-
-    /**
-     * Get the text content of an element
-     * @param element - HTML element to get text from
-     * @returns The element's inner text
-     */
-    text(element: HTMLElement): string {
-        return element.innerText;
-    },
-
-    /**
-     * Get an attribute value from an element
-     * @param element - HTML element to get attribute from
-     * @param attribute - Name of the attribute to retrieve
-     * @returns The attribute value or undefined if not present
-     */
-    attribute(element: HTMLElement, attribute: string): string | undefined {
-        if (element.hasAttribute(attribute)) {
-            return element.getAttribute(attribute) || undefined;
-        }
-        return undefined;
-    },
-
-    /**
-     * Check if an element is a NodeList
-     * @param element - Element or NodeList to check
-     * @returns True if the element is a NodeList
-     */
-    isList(element: HTMLElement | NodeList): element is NodeList {
-        return NodeList.prototype.isPrototypeOf(element);
-    },
-
-    /**
-     * Check if an element is hidden
-     * @param element - HTML element to check
-     * @returns True if the element is hidden
-     */
-    isHidden(element: HTMLElement): boolean {
-        return element.offsetParent === null;
-    }
-};
-
-/**
- * Escape a plain-text string so it is safe to inject into innerHTML.
- * Use this whenever inserting user-controlled strings into HTML templates.
- */
-function escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-/**
- * Sanitize an HTML string by removing dangerous elements and attributes
- * (script, iframe, on* handlers, javascript: hrefs) while preserving safe markup.
- * Use this when a component intentionally accepts rich HTML from callers.
- */
-function sanitizeHtml(html: string): string {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-
-    doc.querySelectorAll('script, style, iframe, object, embed').forEach(el => el.remove());
-
-    doc.querySelectorAll('*').forEach(el => {
-        for (const attr of Array.from(el.attributes)) {
-            if (
-                attr.name.startsWith('on') ||
-                attr.value.trim().toLowerCase().startsWith('javascript:')
-            ) {
-                el.removeAttribute(attr.name);
-            }
-        }
-    });
-
-    return doc.body.innerHTML;
-}
-
-export { utils, escapeHtml, sanitizeHtml };