@dodlhuat/basix 1.0.0 → 1.1.0

package/js/tree.ts

@@ -1,218 +1,239 @@
-type NodeType = 'file' | 'folder';
-
-interface TreeNodeConfig {
-  label: string;
-  type?: NodeType;
-  children?: TreeNode[];
-}
-
-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;
-
-  constructor(elementOrSelector: string | HTMLElement, data: TreeNode[]) {
-    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.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');
-    }
-
-    node.children.forEach(child => {
-      this.renderNode(child, childrenUl);
-    });
-
-    return childrenUl;
-  }
-
-  private toggleNode(node: TreeNode): void {
-    node.expanded = !node.expanded;
-    
-    if (node.element) {
-      node.element.classList.toggle('expanded', node.expanded);
-    }
-
-    if (node.childrenContainer) {
-      node.childrenContainer.classList.toggle('expanded', node.expanded);
-    }
-  }
-
-  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;
-    
-    console.log('Selected:', node.label);
-  }
-
-  public expandAll(): void {
-    this.traverseNodes(this.data, (node) => {
-      if (node.type === 'folder') {
-        node.expanded = true;
-        node.element?.classList.add('expanded');
-        node.childrenContainer?.classList.add('expanded');
-      }
-    });
-  }
-
-  public collapseAll(): void {
-    this.traverseNodes(this.data, (node) => {
-      if (node.type === 'folder') {
-        node.expanded = false;
-        node.element?.classList.remove('expanded');
-        node.childrenContainer?.classList.remove('expanded');
-      }
-    });
-  }
-
-  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 getSelectedNode(): TreeNode | null {
-    return this.selectedNode;
-  }
-
-  public findNodeByLabel(label: string): TreeNode | null {
-    let result: TreeNode | null = null;
-    
-    this.traverseNodes(this.data, (node) => {
-      if (node.label === label) {
-        result = node;
-      }
-    });
-    
-    return result;
-  }
-}
-export { TreeComponent, TreeNode };
-export type { NodeType, TreeNodeConfig };
+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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "main": "js/index.js",
   "exports": {

package/css/accordion.css

@@ -1,109 +0,0 @@
-:root {
-  --primary-text: #1E1F24;
-  --secondary-text: #62636C;
-  --divider: #D8D9E0;
-  --accent-text: #3D63DD;
-  --error: #D64545;
-  --warning: #C28A00;
-  --success: #2E8B57;
-  --secondary-background: #E7E8EC;
-  --background: #F9F9FB;
-  --accent-color: #3D63DD;
-  --accent-color-lighten: #87A5EF;
-  --accent-color-text: #D8D9E0;
-  --disabled: #D8D9E0;
-}
-
-[data-theme=dark] {
-  --primary-text: #EEEEF0;
-  --secondary-text: #B2B3BD;
-  --divider: #393A40;
-  --accent-text: #0E496D;
-  --error: #FF6B6B;
-  --warning: #F7B500;
-  --success: #5CC689;
-  --background: #111113;
-  --secondary-background: #19191B;
-  --accent-color: #1B7BB4;
-  --accent-color-lighten: #175982;
-  --accent-color-text: #B2B3BD;
-  --disabled: #303136;
-}
-
-.accordion {
-  margin: 0 auto;
-  border: 1px solid var(--divider);
-  border-radius: 0.4rem;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-}
-
-.accordion-item {
-  border-bottom: 1px solid var(--divider);
-}
-
-.accordion-item:last-child {
-  border-bottom: none;
-}
-
-.accordion-input {
-  display: none;
-}
-
-.accordion-label {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem 1.5rem;
-  background: var(--divider);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-.accordion-label:hover {
-  background: var(--accent-color-lighten);
-}
-
-.accordion-label::after {
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-right: 2px solid currentColor;
-  border-bottom: 2px solid currentColor;
-  transform: rotate(45deg);
-  transition: transform 0.3s ease;
-  margin-left: 1rem;
-}
-
-.accordion-input:checked + .accordion-label {
-  background: var(--accent-color);
-  color: var(--acc-accent);
-}
-
-.accordion-input:checked + .accordion-label::after {
-  transform: rotate(-135deg);
-}
-
-.accordion-content {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 0.3s ease-out;
-  overflow: hidden;
-}
-
-.accordion-body {
-  min-height: 0;
-}
-
-.accordion-body > div {
-  padding: 1.5rem;
-  border-top: 1px solid transparent;
-}
-
-.accordion-input:checked ~ .accordion-content {
-  grid-template-rows: 1fr;
-}/*# sourceMappingURL=accordion.css.map */

package/css/accordion.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["properties.scss","accordion.css","accordion.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,cAAA;EACA,gCAAA;EACA,qBCLc;EDMd,gBAAA;EACA,4CCLO;AFmCT;;AC3BA;EACE,uCAAA;AD8BF;;AC3BA;EACE,mBAAA;AD8BF;;AC3BA;EACE,aAAA;AD8BF;;AC3BA;EACE,aAAA;EACA,8BAAA;EACA,mBAAA;EACA,oBAAA;EACA,0BAAA;EACA,gBAAA;EACA,eAAA;EACA,sCAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AD8BF;;AC3BA;EACE,uCAAA;AD8BF;;AC3BA;EACE,WAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,qCAAA;EACA,wBAAA;EACA,+BAAA;EACA,iBC/CQ;AF6EV;;AC3BA;EACE,+BAAA;EACA,wBAAA;AD8BF;;AC3BA;EACE,0BAAA;AD8BF;;AC3BA;EACE,aAAA;EACA,uBAAA;EACA,4CAAA;EACA,gBAAA;AD8BF;;AC3BA;EACE,aAAA;AD8BF;;AC3BA;EACE,eAAA;EACA,iCAAA;AD8BF;;AC3BA;EACE,uBAAA;AD8BF","file":"accordion.css"}

package/css/alert.css

@@ -1,57 +0,0 @@
-:root {
-  --primary-text: #1E1F24;
-  --secondary-text: #62636C;
-  --divider: #D8D9E0;
-  --accent-text: #3D63DD;
-  --error: #D64545;
-  --warning: #C28A00;
-  --success: #2E8B57;
-  --secondary-background: #E7E8EC;
-  --background: #F9F9FB;
-  --accent-color: #3D63DD;
-  --accent-color-lighten: #87A5EF;
-  --accent-color-text: #D8D9E0;
-  --disabled: #D8D9E0;
-}
-
-[data-theme=dark] {
-  --primary-text: #EEEEF0;
-  --secondary-text: #B2B3BD;
-  --divider: #393A40;
-  --accent-text: #0E496D;
-  --error: #FF6B6B;
-  --warning: #F7B500;
-  --success: #5CC689;
-  --background: #111113;
-  --secondary-background: #19191B;
-  --accent-color: #1B7BB4;
-  --accent-color-lighten: #175982;
-  --accent-color-text: #B2B3BD;
-  --disabled: #303136;
-}
-
-.alert {
-  border-radius: 0.4rem;
-  padding: 0.5rem;
-  border-left: 0.5rem solid;
-  color: var(--primary-text);
-  box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
-}
-
-.alert-error {
-  background: var(--error);
-  border-left: 0.5rem solid color-mix(in srgb, var(--error) 80%, black);
-  color: var(--divider);
-}
-
-.alert-warning {
-  background: var(--warning);
-  border-left: 0.5rem solid color-mix(in srgb, var(--warning) 80%, black);
-  color: var(--divider);
-}
-
-.alert-success {
-  background: var(--success);
-  border-left: 0.5rem solid color-mix(in srgb, var(--success) 80%, black);
-  color: var(--divider);
-}/*# sourceMappingURL=alert.css.map */

package/css/alert.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["properties.scss","alert.css","alert.scss","parameters.scss"],"names":[],"mappings":"AAAA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,+BAAA;EACA,qBAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;ADEA;EACE,uBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,+BAAA;EACA,uBAAA;EACA,+BAAA;EACA,4BAAA;EACA,mBAAA;ACCF;;AC3BA;EACE,qBCHc;EDId,eAAA;EACA,yBAAA;EACA,0BAAA;EACA,4CCLO;AFmCT;;AC3BA;EACE,wBAAA;EACA,qEAAA;EACA,qBAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,uEAAA;EACA,qBAAA;AD8BF;;AC3BA;EACE,0BAAA;EACA,uEAAA;EACA,qBAAA;AD8BF","file":"alert.css"}