symbiote-ui 0.3.0-alpha.4

package/tree/TreePanel/TreePanel.js

@@ -0,0 +1,147 @@
+import Symbiote from '@symbiotejs/symbiote';
+import '../TreeView/TreeView.js';
+import '../../control/Button/Button.js';
+import template from './TreePanel.tpl.js';
+import css from './TreePanel.css.js';
+import { translate } from '../../locale/index.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+export class TreePanel extends Symbiote {
+  init$ = {
+    title: '',
+    titleIcon: '',
+    hideTitle: true,
+    placeholder: translate('tree.loading'),
+    filterText: '',
+    onFilterInput: (event) => {
+      this.filterText = event.target.value;
+      emit(this, 'sn-tree-panel-filter', { filterText: this.filterText });
+    },
+    onCollapseAll: () => {
+      this.collapseAll();
+      emit(this, 'sn-tree-panel-collapse');
+    },
+  };
+
+  initCallback() {
+    this.#syncAttributes();
+    this.#syncInputChrome();
+  }
+
+  get tree() {
+    return this.ref.tree;
+  }
+
+  get items() {
+    return this.tree?.items || [];
+  }
+
+  set items(items) {
+    this.setItems(items);
+  }
+
+  get selectedId() {
+    return this.tree?.selectedId || '';
+  }
+
+  set selectedId(value) {
+    if (this.tree) this.tree.selectedId = value;
+  }
+
+  get expandedIds() {
+    return this.tree?.expandedIds || [];
+  }
+
+  set expandedIds(value) {
+    if (this.tree) this.tree.expandedIds = value;
+  }
+
+  get defaultExpandedIds() {
+    return this.tree?.defaultExpandedIds || [];
+  }
+
+  set defaultExpandedIds(value) {
+    if (this.tree) this.tree.defaultExpandedIds = value;
+  }
+
+  get filterText() {
+    return this.$.filterText || '';
+  }
+
+  set filterText(value) {
+    let next = String(value || '');
+    this.$.filterText = next;
+    if (this.ref.filter && this.ref.filter.value !== next) this.ref.filter.value = next;
+    if (this.tree) this.tree.filterText = next;
+  }
+
+  get storageKey() {
+    return this.tree?.storageKey || '';
+  }
+
+  set storageKey(value) {
+    if (this.tree) this.tree.storageKey = value;
+  }
+
+  get toggleBranchesOnSelect() {
+    return this.tree?.toggleBranchesOnSelect || false;
+  }
+
+  set toggleBranchesOnSelect(value) {
+    if (this.tree) this.tree.toggleBranchesOnSelect = value;
+  }
+
+  setItems(items = []) {
+    this.tree?.setItems?.(items);
+    this.filterText = this.filterText;
+  }
+
+  collapseAll() {
+    this.tree?.collapseAll?.();
+  }
+
+  expandAncestors(path) {
+    return this.tree?.expandAncestors?.(path) || false;
+  }
+
+  scrollSelectedIntoView() {
+    this.tree?.scrollSelectedIntoView?.();
+  }
+
+  showPlaceholder(message = '') {
+    if (message) this.$.placeholder = message;
+    if (this.ref.placeholder) this.ref.placeholder.hidden = false;
+    if (this.tree) this.tree.hidden = true;
+  }
+
+  showTree() {
+    if (this.ref.placeholder) this.ref.placeholder.hidden = true;
+    if (this.tree) this.tree.hidden = false;
+  }
+
+  #syncAttributes() {
+    this.$.title = this.getAttribute('title') || '';
+    this.$.titleIcon = this.getAttribute('title-icon') || '';
+    this.$.hideTitle = !this.$.title && !this.$.titleIcon;
+    this.$.placeholder = this.getAttribute('placeholder') || this.$.placeholder;
+  }
+
+  #syncInputChrome() {
+    if (this.ref.filter) {
+      this.ref.filter.placeholder = this.getAttribute('filter-placeholder') || translate('tree.filterPlaceholder');
+      this.ref.filter.value = this.filterText;
+    }
+    if (this.ref.collapseButton) {
+      this.ref.collapseButton.title = this.getAttribute('collapse-title') || translate('tree.collapseAll');
+    }
+  }
+}
+
+TreePanel.template = template;
+TreePanel.rootStyles = css;
+TreePanel.reg('sn-tree-panel');
+
+export default TreePanel;

package/tree/TreePanel/TreePanel.tpl.js

@@ -0,0 +1,18 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div class="sn-tree-panel-title" ${{ '@hidden': 'hideTitle' }}>
+  <span class="material-symbols-outlined sn-tree-panel-title-icon" ${{ textContent: 'titleIcon', '@hidden': '!titleIcon' }}></span>
+  <span ${{ textContent: 'title' }}></span>
+</div>
+<div class="sn-tree-panel-toolbar">
+  <input class="sn-tree-panel-filter" ref="filter" type="search" ${{ oninput: 'onFilterInput' }}>
+  <sn-button class="sn-tree-panel-collapse" ref="collapseButton" variant="icon" ${{ onclick: 'onCollapseAll' }}>
+    <span class="material-symbols-outlined sn-tree-panel-toolbar-icon">unfold_less</span>
+  </sn-button>
+</div>
+<div class="sn-tree-panel-content">
+  <div class="sn-tree-panel-placeholder" ref="placeholder" ${{ textContent: 'placeholder' }}></div>
+  <sn-tree-view ref="tree" hidden></sn-tree-view>
+</div>
+`;

package/tree/TreeView/TreeView.css.js

@@ -0,0 +1,122 @@
+export default /*css*/ `
+:host,
+sn-tree-view {
+  display: block;
+  color: var(--sn-text);
+  font-family: var(--sn-font-family);
+}
+
+:host([hidden]),
+sn-tree-view[hidden] {
+  display: none !important;
+}
+
+.sn-tree-view {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  width: 100%;
+  outline: none;
+}
+
+.sn-tree-row {
+  --sn-tree-depth-indent: 0px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: var(--sn-tree-toggle-width) var(--sn-tree-icon-width) minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--sn-tree-gap);
+  min-height: var(--sn-tree-row-min-height, var(--sn-tree-row-height));
+  padding-block: var(--sn-tree-row-padding-block);
+  padding-inline: var(--sn-tree-depth-indent) 8px;
+  border: 1px solid transparent;
+  border-radius: var(--sn-tree-row-radius);
+  background: var(--sn-tree-row-bg, transparent);
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+.sn-tree-row:hover {
+  background: var(--sn-tree-row-hover-bg, var(--sn-node-hover));
+}
+
+.sn-tree-row:focus-visible {
+  border-color: var(--sn-tree-row-focus-border, var(--sn-node-selected));
+}
+
+.sn-tree-row[aria-selected="true"] {
+  background: var(--sn-tree-row-selected-bg, var(--sn-node-bg));
+  border-color: var(--sn-tree-row-selected-border, var(--sn-node-selected));
+}
+
+.sn-tree-row[muted] {
+  color: var(--sn-tree-muted-color, var(--sn-text-dim));
+}
+
+.sn-tree-toggle,
+.sn-tree-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sn-tree-icon-width);
+  height: var(--sn-tree-icon-width);
+  color: var(--sn-tree-icon-color, var(--sn-text-dim));
+  font-family: var(--sn-icon-font);
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+  font-size: var(--sn-tree-icon-size);
+  line-height: 1;
+}
+
+.sn-tree-toggle {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.sn-tree-toggle[hidden] {
+  visibility: hidden;
+}
+
+.sn-tree-label {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--sn-tree-label-color, var(--sn-text));
+  font-size: var(--sn-tree-label-size);
+  font-weight: var(--sn-tree-label-weight);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-tree-kind {
+  overflow: hidden;
+  max-width: var(--sn-tree-kind-max-width);
+  color: var(--sn-tree-kind-color, var(--sn-text-dim));
+  font-size: var(--sn-tree-kind-size);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sn-tree-badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.sn-tree-badge {
+  max-width: var(--sn-tree-badge-max-width);
+  overflow: hidden;
+  padding: 1px 5px;
+  border-radius: var(--sn-tree-badge-radius);
+  background: var(--sn-tree-badge-bg, var(--sn-node-hover));
+  color: var(--sn-tree-badge-color, var(--sn-text-dim));
+  font-size: var(--sn-tree-badge-size);
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;

package/tree/TreeView/TreeView.js

@@ -0,0 +1,365 @@
+import Symbiote from '@symbiotejs/symbiote';
+import template from './TreeView.tpl.js';
+import css from './TreeView.css.js';
+
+function emit(el, type, detail = {}) {
+  el.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+}
+
+function escapeCssValue(value = '') {
+  if (globalThis.CSS?.escape) return globalThis.CSS.escape(String(value));
+  return String(value).replaceAll('\\', '\\\\').replaceAll('"', '\\"');
+}
+
+function normalizeBadges(badges = []) {
+  if (!Array.isArray(badges)) return [];
+  return badges
+    .map((badge) => {
+      if (badge && typeof badge === 'object') return badge.label || badge.text || badge.value || '';
+      return badge;
+    })
+    .filter((badge) => badge !== null && badge !== undefined && badge !== '');
+}
+
+function textMatches(item, needle) {
+  if (!needle) return true;
+  let fields = [item.label, item.kind, item.icon, item.path, item.id, ...normalizeBadges(item.badges)];
+  return fields.some((field) => String(field || '').toLowerCase().includes(needle));
+}
+
+function hasStorage() {
+  return typeof localStorage !== 'undefined' && localStorage;
+}
+
+function serializeDragPayload(payload) {
+  if (payload === null || payload === undefined) return '';
+  return typeof payload === 'string' ? payload : JSON.stringify(payload);
+}
+
+function getItemId(item) {
+  return String(item?.id || item?.path || '');
+}
+
+export class TreeView extends Symbiote {
+  #items = [];
+  #selectedId = '';
+  #expandedIds = new Set();
+  #defaultExpandedIds = [];
+  #expandedIdsLoaded = false;
+  #filterText = '';
+  #storageKey = '';
+  #toggleBranchesOnSelect = false;
+  #visibleItems = [];
+
+  init$ = {
+    onTreeClick: (event) => {
+      let row = event.target?.closest?.('.sn-tree-row');
+      if (!row) return;
+      let item = this.#visibleItems[Number(row.dataset.index)];
+      if (!item) return;
+
+      if (event.target?.closest?.('.sn-tree-toggle')) {
+        this.#toggleItem(item);
+        return;
+      }
+
+      this.selectedId = getItemId(item);
+      if (this.#toggleBranchesOnSelect && Array.isArray(item.children) && item.children.length > 0) {
+        this.#toggleItem(item);
+      }
+      emit(this, 'sn-tree-select', { item });
+    },
+
+    onTreeKeydown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      let row = event.target?.closest?.('.sn-tree-row');
+      if (!row) return;
+      event.preventDefault();
+      row.click();
+    },
+
+    onTreeDragStart: (event) => {
+      let row = event.target?.closest?.('.sn-tree-row');
+      if (!row) return;
+      let item = this.#visibleItems[Number(row.dataset.index)];
+      if (!item?.draggable) {
+        event.preventDefault();
+        return;
+      }
+      let payload = item.payload ?? item.dragText ?? item.path ?? item.id ?? '';
+      if (payload && event.dataTransfer) {
+        event.dataTransfer.setData('text/plain', serializeDragPayload(payload));
+        event.dataTransfer.effectAllowed = item.dragEffect || 'copy';
+      }
+      emit(this, 'sn-tree-dragstart', { item, payload, nativeEvent: event });
+    },
+  };
+
+  get items() {
+    return this.#items;
+  }
+
+  set items(items) {
+    this.setItems(items);
+  }
+
+  get selectedId() {
+    return this.#selectedId;
+  }
+
+  set selectedId(value) {
+    this.#selectedId = value || '';
+    this.#renderTree();
+  }
+
+  get expandedIds() {
+    return [...this.#expandedIds];
+  }
+
+  set expandedIds(value) {
+    this.#expandedIds = new Set(Array.from(value || []).map(String));
+    this.#expandedIdsLoaded = true;
+    this.#persistExpandedIds();
+    this.#renderTree();
+  }
+
+  get defaultExpandedIds() {
+    return [...this.#defaultExpandedIds];
+  }
+
+  set defaultExpandedIds(value) {
+    this.#defaultExpandedIds = Array.from(value || []).map(String);
+    this.#expandedIdsLoaded = false;
+    this.#loadExpandedIds();
+    this.#renderTree();
+  }
+
+  get filterText() {
+    return this.#filterText;
+  }
+
+  set filterText(value) {
+    this.#filterText = String(value || '');
+    this.#renderTree();
+  }
+
+  get storageKey() {
+    return this.#storageKey;
+  }
+
+  set storageKey(value) {
+    this.#storageKey = String(value || '');
+    this.#expandedIdsLoaded = false;
+    this.#loadExpandedIds();
+    this.#renderTree();
+  }
+
+  get toggleBranchesOnSelect() {
+    return this.#toggleBranchesOnSelect;
+  }
+
+  set toggleBranchesOnSelect(value) {
+    this.#toggleBranchesOnSelect = Boolean(value);
+  }
+
+  static filterItems(items = [], filterText = '') {
+    let needle = String(filterText || '').trim().toLowerCase();
+    return TreeView.#filterBranch(Array.isArray(items) ? items : [], needle);
+  }
+
+  static #filterBranch(items, needle) {
+    let result = [];
+    for (let item of items) {
+      if (!item || typeof item !== 'object') continue;
+      let children = Array.isArray(item.children) ? item.children : [];
+      let filteredChildren = TreeView.#filterBranch(children, needle);
+      if (!needle || textMatches(item, needle) || filteredChildren.length > 0) {
+        result.push({ item, children: filteredChildren });
+      }
+    }
+    return result;
+  }
+
+  renderCallback() {
+    this.#loadExpandedIds();
+    this.#renderTree();
+  }
+
+  setItems(items = []) {
+    this.#items = Array.isArray(items) ? items : [];
+    this.#renderTree();
+  }
+
+  collapseAll() {
+    this.#expandedIds.clear();
+    this.#persistExpandedIds();
+    this.#renderTree();
+  }
+
+  toggleItem(item) {
+    if (!item) return;
+    this.#toggleItem(item);
+  }
+
+  expandAncestors(idOrPath) {
+    let target = String(idOrPath || '');
+    if (!target) return false;
+    let ancestors = [];
+    let found = this.#collectAncestors(this.#items, target, ancestors);
+    if (!found) return false;
+    for (let item of ancestors) {
+      let id = getItemId(item);
+      if (id) this.#expandedIds.add(id);
+    }
+    this.#persistExpandedIds();
+    this.#renderTree();
+    return true;
+  }
+
+  scrollSelectedIntoView() {
+    if (!this.#selectedId || !this.ref.tree?.querySelector) return;
+    let selector = `.sn-tree-row[data-tree-id="${escapeCssValue(this.#selectedId)}"]`;
+    this.ref.tree.querySelector(selector)?.scrollIntoView?.({ block: 'nearest' });
+  }
+
+  #toggleItem(item) {
+    let id = getItemId(item);
+    if (!id) return;
+    let expanded = !this.#expandedIds.has(id);
+    if (expanded) {
+      this.#expandedIds.add(id);
+    } else {
+      this.#expandedIds.delete(id);
+    }
+    this.#persistExpandedIds();
+    this.#renderTree();
+    emit(this, 'sn-tree-toggle', { item, expanded });
+  }
+
+  #collectAncestors(items, target, ancestors) {
+    for (let item of items) {
+      if (!item || typeof item !== 'object') continue;
+      let id = getItemId(item);
+      let path = String(item.path || '');
+      if (id === target || path === target) return true;
+
+      let children = Array.isArray(item.children) ? item.children : [];
+      ancestors.push(item);
+      if (this.#collectAncestors(children, target, ancestors)) return true;
+      ancestors.pop();
+    }
+    return false;
+  }
+
+  #loadExpandedIds() {
+    if (this.#expandedIdsLoaded) return;
+    if (!this.#storageKey || !hasStorage()) {
+      this.#expandedIds = new Set(this.#defaultExpandedIds);
+      this.#expandedIdsLoaded = true;
+      return;
+    }
+    try {
+      let value = localStorage.getItem(this.#storageKey);
+      if (!value) {
+        this.#expandedIds = new Set(this.#defaultExpandedIds);
+        this.#expandedIdsLoaded = true;
+        return;
+      }
+      let ids = JSON.parse(value);
+      if (Array.isArray(ids)) {
+        this.#expandedIds = new Set(ids.map(String));
+      }
+    } catch {
+      this.#expandedIds = new Set();
+    }
+    this.#expandedIdsLoaded = true;
+  }
+
+  #persistExpandedIds() {
+    if (!this.#storageKey || !hasStorage()) return;
+    localStorage.setItem(this.#storageKey, JSON.stringify(this.expandedIds));
+  }
+
+  #getIndentSize() {
+    if (typeof getComputedStyle !== 'function') return 16;
+    let rawValue = getComputedStyle(this).getPropertyValue('--sn-tree-indent').trim();
+    if (!rawValue.endsWith('px')) return 16;
+    let size = Number.parseFloat(rawValue);
+    return Number.isFinite(size) ? size : 16;
+  }
+
+  #renderTree() {
+    if (!this.ref.tree) return;
+    this.#visibleItems = [];
+    let filtered = TreeView.filterItems(this.#items, this.#filterText);
+    let nodes = [];
+    let indentSize = this.#getIndentSize();
+    this.#appendBranches(nodes, filtered, 0, Boolean(this.#filterText.trim()), indentSize);
+    this.ref.tree.replaceChildren(...nodes);
+  }
+
+  #appendBranches(parent, branches, depth, forceExpanded, indentSize) {
+    for (let { item, children } of branches) {
+      let id = getItemId(item);
+      let hasChildren = children.length > 0;
+      let expanded = forceExpanded || this.#expandedIds.has(id);
+      let rowIndex = this.#visibleItems.push(item) - 1;
+      let row = document.createElement('div');
+      row.className = 'sn-tree-row';
+      row.setAttribute('role', 'treeitem');
+      row.tabIndex = 0;
+      row.dataset.index = String(rowIndex);
+      row.dataset.treeId = id;
+      row.style.setProperty('--sn-tree-depth', String(depth));
+      row.style.setProperty('--sn-tree-depth-indent', `${depth * indentSize}px`);
+      row.setAttribute('aria-selected', String(id === this.#selectedId));
+      row.setAttribute('aria-expanded', hasChildren ? String(expanded) : 'false');
+      row.toggleAttribute('muted', Boolean(item.muted));
+      row.draggable = Boolean(item.draggable);
+
+      let toggle = document.createElement('button');
+      toggle.className = 'sn-tree-toggle';
+      toggle.type = 'button';
+      toggle.hidden = !hasChildren;
+      toggle.textContent = expanded ? 'expand_more' : 'chevron_right';
+
+      let icon = document.createElement('span');
+      icon.className = 'sn-tree-icon';
+      icon.hidden = !item.icon;
+      icon.textContent = item.icon || '';
+
+      let label = document.createElement('span');
+      label.className = 'sn-tree-label';
+      label.textContent = item.label || id;
+
+      let kind = document.createElement('span');
+      kind.className = 'sn-tree-kind';
+      kind.hidden = !item.kind;
+      kind.textContent = item.kind || '';
+
+      let badges = document.createElement('span');
+      badges.className = 'sn-tree-badges';
+      let normalizedBadges = normalizeBadges(item.badges);
+      badges.hidden = normalizedBadges.length === 0;
+      for (let badge of normalizedBadges) {
+        let badgeEl = document.createElement('span');
+        badgeEl.className = 'sn-tree-badge';
+        badgeEl.textContent = badge;
+        badges.appendChild(badgeEl);
+      }
+
+      row.append(toggle, icon, label, kind, badges);
+      parent.push(row);
+
+      if (hasChildren && expanded) {
+        this.#appendBranches(parent, children, depth + 1, forceExpanded, indentSize);
+      }
+    }
+  }
+}
+
+TreeView.template = template;
+TreeView.rootStyles = css;
+TreeView.reg('sn-tree-view');
+
+export default TreeView;

package/tree/TreeView/TreeView.tpl.js

@@ -0,0 +1,10 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`
+<div
+  class="sn-tree-view"
+  ref="tree"
+  role="tree"
+  ${{ onclick: 'onTreeClick', onkeydown: 'onTreeKeydown', ondragstart: 'onTreeDragStart' }}
+></div>
+`;