@redvars/peacock 3.4.0 → 3.5.1

package/src/tree-view/tree-view.ts

@@ -1,182 +0,0 @@
-import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
-import styles from './tree-view.scss';
-import { TreeNode } from './tree-node.js';
-
-/**
- * @label Tree View
- * @tag wc-tree-view
- * @rawTag tree-view
- * @summary A tree view is a hierarchical structure that provides nested levels of navigation. It supports keyboard navigation, single/multi select, and expandable nodes.
- *
- * @example
- * ```html
- * <wc-tree-view>
- *   <wc-tree-node label="Parent" expanded>
- *     <wc-tree-node label="Child 1"></wc-tree-node>
- *     <wc-tree-node label="Child 2"></wc-tree-node>
- *   </wc-tree-node>
- * </wc-tree-view>
- * ```
- * @tags navigation
- */
-export class TreeView extends LitElement {
-  static styles = [styles];
-
-  /**
-   * The value of the currently selected node.
-   */
-  @property({ type: String, attribute: 'selected-node', reflect: true })
-  selectedNode: string = '';
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('tree-node:click', this._onNodeClick as EventListener);
-    this.addEventListener('keydown', this._onKeyDown);
-    this.setAttribute('role', 'tree');
-  }
-
-  updated(changedProps: Map<string, unknown>) {
-    super.updated(changedProps);
-
-    if (changedProps.has('selectedNode')) {
-      this._syncSelectedStateFromProperty();
-    }
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('tree-node:click', this._onNodeClick as EventListener);
-    this.removeEventListener('keydown', this._onKeyDown);
-  }
-
-  private _getTopLevelNodes(): TreeNode[] {
-    return Array.from(this.children).filter(
-      el => el.tagName.toLowerCase() === 'wc-tree-node',
-    ) as TreeNode[];
-  }
-
-  private _getAllVisibleNodes(): TreeNode[] {
-    const result: TreeNode[] = [];
-    const collect = (nodes: TreeNode[]) => {
-      nodes.forEach(node => {
-        result.push(node);
-        if (node.expanded) {
-          const children = Array.from(node.children).filter(
-            el => el.tagName.toLowerCase() === 'wc-tree-node',
-          ) as TreeNode[];
-          collect(children);
-        }
-      });
-    };
-    collect(this._getTopLevelNodes());
-    return result;
-  }
-
-  private _onNodeClick = (event: CustomEvent) => {
-    const target = event.target as TreeNode;
-    if (target.disabled) return;
-
-    const value = event.detail?.value ?? target.value ?? target.label;
-    this.selectedNode = value;
-
-    // Update selected state on all nodes
-    this._updateSelectedState(value);
-
-    this.dispatchEvent(
-      new CustomEvent('tree-view:change', {
-        bubbles: true,
-        composed: true,
-        detail: { value, node: target },
-      }),
-    );
-  };
-
-  private _updateSelectedState(selectedValue: string) {
-    const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-    allNodes.forEach(node => {
-      const nodeValue = node.value || node.label;
-      // eslint-disable-next-line no-param-reassign
-      node.selected = nodeValue === selectedValue;
-    });
-  }
-
-  private _clearSelectedState() {
-    const allNodes = this._collectAllNodes(this._getTopLevelNodes());
-    allNodes.forEach(node => {
-      // eslint-disable-next-line no-param-reassign
-      node.selected = false;
-    });
-  }
-
-  private _syncSelectedStateFromProperty() {
-    if (this.selectedNode) {
-      this._updateSelectedState(this.selectedNode);
-      return;
-    }
-
-    this._clearSelectedState();
-  }
-
-  private _onSlotChange = () => {
-    this._syncSelectedStateFromProperty();
-  };
-
-  private _collectAllNodes(nodes: TreeNode[]): TreeNode[] {
-    const result: TreeNode[] = [];
-    nodes.forEach(node => {
-      result.push(node);
-      const children = Array.from(node.children).filter(
-        el => el.tagName.toLowerCase() === 'wc-tree-node',
-      ) as TreeNode[];
-      result.push(...this._collectAllNodes(children));
-    });
-    return result;
-  }
-
-  private _onKeyDown = (event: KeyboardEvent) => {
-    const visibleNodes = this._getAllVisibleNodes().filter(n => !n.disabled);
-    if (visibleNodes.length === 0) return;
-
-    const focusedIndex = visibleNodes.findIndex(node => {
-      const root = node.shadowRoot;
-      return root?.activeElement !== null && root?.activeElement !== undefined;
-    });
-
-    if (focusedIndex === -1 && event.key !== 'Tab') return;
-
-    switch (event.key) {
-      case 'ArrowDown': {
-        event.preventDefault();
-        const nextIndex = (focusedIndex + 1) % visibleNodes.length;
-        visibleNodes[nextIndex]?.focus();
-        break;
-      }
-      case 'ArrowUp': {
-        event.preventDefault();
-        const prevIndex =
-          (focusedIndex - 1 + visibleNodes.length) % visibleNodes.length;
-        visibleNodes[prevIndex]?.focus();
-        break;
-      }
-      case 'Home':
-        event.preventDefault();
-        visibleNodes[0]?.focus();
-        break;
-      case 'End':
-        event.preventDefault();
-        visibleNodes[visibleNodes.length - 1]?.focus();
-        break;
-      default:
-        break;
-    }
-  };
-
-  render() {
-    return html`<div class="tree-view">
-      <slot @slotchange=${this._onSlotChange}></slot>
-    </div>`;
-  }
-
-  static Node = TreeNode;
-}

package/src/tree-view/wc-tree-view.ts

@@ -1,9 +0,0 @@
-import { customElement } from 'lit/decorators.js';
-import { TreeView } from './tree-view.js';
-import { TreeNode } from './tree-node.js';
-
-@customElement('wc-tree-node')
-export class WcTreeNode extends TreeNode {}
-
-@customElement('wc-tree-view')
-export class WcTreeView extends TreeView {}

package/src/utils.ts

@@ -1,193 +0,0 @@
-export async function createCacheFetch(name: string) {
-  let cache: Cache | null = null;
-  // This map tracks requests currently being processed
-  const inFlightRequests = new Map<string, Promise<string>>();
-
-  try {
-    cache = await window.caches.open(name);
-  } catch (e) {
-    console.warn('window.caches access not allowed');
-  }
-
-  return async (url: string): Promise<string> => {
-    // 1. Check if we are already fetching this URL
-    if (inFlightRequests.has(url)) {
-      // Return the existing promise instead of starting a new one
-      return inFlightRequests.get(url)!;
-    }
-
-    // 2. Create the main logic as a promise
-    const fetchPromise = (async () => {
-      const request = new Request(url);
-
-      // Check Cache first
-      if (cache) {
-        const cachedResponse = await cache.match(request);
-        if (cachedResponse) {
-          return cachedResponse.text();
-        }
-      }
-
-      // Prepare network request
-      const urlObj = new URL(request.url);
-      const isSameOrigin = urlObj.origin === window.location.origin;
-
-      const response = await fetch(request.url, {
-        method: 'GET',
-        mode: isSameOrigin ? 'no-cors' : 'cors',
-        credentials: isSameOrigin ? 'same-origin' : 'omit',
-      });
-
-      // --- Handle 404 ---
-      if (response.status === 404) {
-        console.error(`[Fetch Error] Resource not found (404): ${url}`);
-        return ''; // Return empty string as requested
-      }
-
-      const result = await response.text();
-
-      // Update Cache if applicable
-      if (cache && response.status === 200) {
-        // We clone the response logic by creating a new Response with the text body
-        await cache.put(
-          request,
-          new Response(result, {
-            status: response.status,
-            statusText: response.statusText,
-            headers: response.headers,
-          }),
-        );
-      }
-
-      return result;
-    })();
-
-    // 3. Store the promise in the map
-    inFlightRequests.set(url, fetchPromise);
-
-    try {
-      // 4. Wait for the result
-      return await fetchPromise;
-    } finally {
-      // 5. Clean up: Remove the promise from the map when done
-      // This ensures subsequent calls (after this one finishes) can start fresh
-      inFlightRequests.delete(url);
-    }
-  };
-}
-
-// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
-export function sanitizeSvg(rawSvg: string) {
-  try {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
-
-    // remove script tags
-    const scripts = Array.from(doc.querySelectorAll('script'));
-    scripts.forEach(n => n.remove());
-
-    // remove foreignObject and iframe-like elements
-    const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
-    foreigns.forEach(n => n.remove());
-
-    // remove event handler attributes like onload, onclick, etc.
-    const all = Array.from(doc.querySelectorAll('*'));
-    all.forEach(el => {
-      const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
-      attrs.forEach(a => el.removeAttribute(a.name));
-    });
-
-    const el = doc.documentElement;
-    if (!el) return '';
-
-    // serialize back to string
-    const serializer = new XMLSerializer();
-    return serializer.serializeToString(el);
-  } catch (e) {
-    // parsing failed; fall back to empty content to avoid injecting unsafe content
-    return '';
-  }
-}
-
-function __hasMeaningfulContent(slotElement: any) {
-  const nodes = slotElement.assignedNodes({ flatten: true });
-
-  for (const node of nodes) {
-    // If it's an element node, it has content
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      return true;
-    }
-    // If it's a text node and contains non-whitespace characters, it has content
-    if (
-      node.nodeType === Node.TEXT_NODE &&
-      node.textContent.trim().length > 0
-    ) {
-      return true;
-    }
-  }
-
-  // No meaningful content found
-  return false;
-}
-
-export function observerSlotChangesWithCallback(
-  slot: HTMLSlotElement | null,
-  callback: (hasContent: boolean) => void,
-) {
-  const observer = new MutationObserver(() => {
-    callback(__hasMeaningfulContent(slot));
-  });
-
-  // Observe the elements currently assigned to the slot
-  const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
-  assignedNodes.forEach(node => {
-    observer.observe(node, {
-      attributes: true,
-      childList: true,
-      characterData: true,
-      subtree: true,
-    });
-  });
-
-  callback(__hasMeaningfulContent(slot));
-}
-
-export function throttle(
-  func: Function,
-  delay: number,
-  options = { leading: true, trailing: true },
-) {
-  let timerId: any;
-  let lastExec = 0;
-
-  return function (...args: any[]) {
-    // @ts-ignore
-    const context = this;
-    const now = Date.now();
-
-    const shouldCallNow = options.leading && now - lastExec >= delay;
-
-    if (shouldCallNow) {
-      func.apply(context, args);
-      lastExec = now;
-    } else if (options.trailing && !timerId) {
-      timerId = setTimeout(() => {
-        func.apply(context, args);
-        lastExec = Date.now();
-        timerId = null;
-      }, delay);
-    }
-  };
-}
-
-export function isInViewport(element: HTMLElement) {
-  const rect = element.getBoundingClientRect();
-  return (
-    rect.top !== 0 || rect.left !== 0 || rect.bottom !== 0 || rect.right !== 0
-  );
-}
-
-
-export function isDarkMode() {
-  return document.documentElement.dataset.theme === 'dark';
-};