@haiyue/ui 0.1.0 → 0.1.2

package/dist/tree.d.ts

@@ -1,7 +1,7 @@
-import type { GETreeNodeData } from './tree-types.js';
-export { GETreeNode } from './tree-node.js';
-export type { GETreeDataChangeDetail, GETreeDropPosition, GETreeNodeContextMenuDetail, GETreeNodeData, GETreeSelectionChangeDetail, } from './tree-types.js';
-export declare class GETree extends HTMLElement {
+import type { HYTreeNodeData } from './tree-types.js';
+export { HYTreeNode } from './tree-node.js';
+export type { HYTreeDataChangeDetail, HYTreeDropPosition, HYTreeNodeContextMenuDetail, HYTreeNodeData, HYTreeSelectionChangeDetail, } from './tree-types.js';
+export declare class HYTree extends HTMLElement {
     private static readonly VIRTUALIZATION_THRESHOLD;
     private static readonly ROW_HEIGHT;
     private static readonly OVERSCAN_ROWS;
@@ -25,15 +25,15 @@ export declare class GETree extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
-    get data(): GETreeNodeData[];
-    set data(value: GETreeNodeData[]);
+    get data(): HYTreeNodeData[];
+    set data(value: HYTreeNodeData[]);
     get selectedId(): string | null;
     set selectedId(value: string | null);
     get selectedIds(): string[];
     set selectedIds(value: string[]);
     get allowDrag(): boolean;
     set allowDrag(value: boolean);
-    updateData(value: GETreeNodeData[]): void;
+    updateData(value: HYTreeNodeData[]): void;
     expand(id: string): void;
     collapse(id: string): void;
     toggle(id: string): void;
@@ -76,6 +76,8 @@ export declare class GETree extends HTMLElement {
     private _onDrop;
     private _onKeyDown;
     private _handleNavigationKey;
+    private _linearNavigationTarget;
+    private _handleNavigationAction;
     private _moveActiveRight;
     private _moveActiveLeft;
     private _getActiveVisibleId;

package/dist/tree.js

@@ -1,6 +1,6 @@
-import { GETreeModel } from './tree-model.js';
-import { GETreeNode } from './tree-node.js';
-export { GETreeNode } from './tree-node.js';
+import { HYTreeModel } from './tree-model.js';
+import { HYTreeNode } from './tree-node.js';
+export { HYTreeNode } from './tree-node.js';
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 const TREE_TOGGLE_ICON_PATHS = [
     'M318.57 223.95l322.99 322.99c21.87 21.87 57.33 21.87 79.2 0 21.87-21.87 21.87-57.33 0-79.2l-323-322.99c-21.87-21.87-57.33-21.87-79.2 0-21.86 21.87-21.86 57.33 0.01 79.2z',
@@ -32,7 +32,7 @@ function createTreeToggleIconSvg() {
     }
     return svg;
 }
-export class GETree extends HTMLElement {
+export class HYTree extends HTMLElement {
     static VIRTUALIZATION_THRESHOLD = 160;
     static ROW_HEIGHT = 28;
     static OVERSCAN_ROWS = 8;
@@ -47,7 +47,7 @@ export class GETree extends HTMLElement {
     _selectionAnchorId = null;
     _activeId = null;
     _expandedIds = new Set();
-    _model = new GETreeModel(this._expandedIds);
+    _model = new HYTreeModel(this._expandedIds);
     _dragNodeId = null;
     _syncingSelectionAttributes = false;
     _resizeObserver = null;
@@ -66,8 +66,8 @@ export class GETree extends HTMLElement {
         justify-content: flex-start;
         width: 100%;
         min-height: 0;
-        color: var(--ge-tree-text-color, var(--ge-text-color, #c8d3e4));
-        background: var(--ge-panel-bg-color, #171d28);
+        color: var(--hy-tree-text-color, var(--hy-text-color, #c8d3e4));
+        background: var(--hy-panel-bg-color, #171d28);
         font: 12px system-ui, sans-serif;
         text-align: left;
         user-select: none;
@@ -85,7 +85,7 @@ export class GETree extends HTMLElement {
         align-items: center;
         gap: 4px;
         border-radius: 4px;
-        color: var(--ge-tree-text-color, var(--ge-text-color, #c8d3e4));
+        color: var(--hy-tree-text-color, var(--hy-text-color, #c8d3e4));
         cursor: default;
       }
       .virtual-spacer {
@@ -93,18 +93,18 @@ export class GETree extends HTMLElement {
         pointer-events: none;
       }
       .row:hover {
-        background: var(--ge-hover-bg-color, #222b3a);
+        background: var(--hy-hover-bg-color, #222b3a);
       }
       .row.selected {
-        background: var(--ge-selected-bg-color, var(--ge-accent-strong-color, #255a91));
-        color: var(--ge-selected-text-color, #fff);
+        background: var(--hy-selected-bg-color, var(--hy-accent-strong-color, #255a91));
+        color: var(--hy-selected-text-color, #fff);
       }
       .row.active:not(.selected) {
-        background: var(--ge-tree-active-bg-color, var(--ge-hover-bg-color, #222b3a));
-        color: var(--ge-tree-active-text-color, var(--ge-tree-text-color, #dce8fb));
+        background: var(--hy-tree-active-bg-color, var(--hy-hover-bg-color, #222b3a));
+        color: var(--hy-tree-active-text-color, var(--hy-tree-text-color, #dce8fb));
       }
       .row.active {
-        outline: var(--ge-tree-active-ring-width, 1px) solid var(--ge-tree-active-ring-color, var(--ge-focus-border-color, #3d6fa8));
+        outline: var(--hy-tree-active-ring-width, 1px) solid var(--hy-tree-active-ring-color, var(--hy-focus-border-color, #3d6fa8));
         outline-offset: -1px;
       }
       .toggle {
@@ -114,7 +114,7 @@ export class GETree extends HTMLElement {
         border: 0;
         padding: 0;
         background: transparent;
-        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        color: var(--hy-tree-icon-color, var(--hy-secondary-text-color, #8fa7c8));
         cursor: pointer;
         display: inline-grid;
         place-items: center;
@@ -126,29 +126,29 @@ export class GETree extends HTMLElement {
       .toggle-icon {
         width: 12px;
         height: 12px;
-        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        color: var(--hy-tree-icon-color, var(--hy-secondary-text-color, #8fa7c8));
         transition: transform 0.16s ease, color 0.16s ease;
       }
       .toggle.expanded .toggle-icon {
         transform: rotate(90deg);
-        color: var(--ge-tree-icon-active-color, #b9d4ff);
+        color: var(--hy-tree-icon-active-color, #b9d4ff);
       }
       .row:hover .toggle-icon {
-        color: var(--ge-tree-icon-active-color, #b9d4ff);
+        color: var(--hy-tree-icon-active-color, #b9d4ff);
       }
       .content {
         min-width: 0;
         flex: 1 1 auto;
       }
       .row.drop-before {
-        box-shadow: inset 0 2px 0 var(--ge-drop-indicator-color, #62a8ff);
+        box-shadow: inset 0 2px 0 var(--hy-drop-indicator-color, #62a8ff);
       }
       .row.drop-after {
-        box-shadow: inset 0 -2px 0 var(--ge-drop-indicator-color, #62a8ff);
+        box-shadow: inset 0 -2px 0 var(--hy-drop-indicator-color, #62a8ff);
       }
       .row.drop-inside {
-        outline: 1px solid var(--ge-drop-indicator-color, #62a8ff);
-        background: var(--ge-drop-target-bg-color, #223650);
+        outline: 1px solid var(--hy-drop-indicator-color, #62a8ff);
+        background: var(--hy-drop-target-bg-color, #223650);
       }
     `;
         this._list.className = 'list';
@@ -299,7 +299,7 @@ export class GETree extends HTMLElement {
             this._model.setData(this._data);
         }
         catch (error) {
-            console.warn('Invalid ge-tree data attribute.', error);
+            console.warn('Invalid hy-tree data attribute.', error);
         }
     }
     _seedExpanded(nodes) {
@@ -320,7 +320,7 @@ export class GETree extends HTMLElement {
         const visibleIds = new Set();
         const fragment = document.createDocumentFragment();
         if (window.start > 0)
-            fragment.append(this._createVirtualSpacer(window.start * GETree.ROW_HEIGHT));
+            fragment.append(this._createVirtualSpacer(window.start * HYTree.ROW_HEIGHT));
         for (let index = window.start; index < window.end; index++) {
             const item = visible[index];
             if (!item)
@@ -331,7 +331,7 @@ export class GETree extends HTMLElement {
             fragment.append(rendered.row);
         }
         if (window.end < visible.length) {
-            fragment.append(this._createVirtualSpacer((visible.length - window.end) * GETree.ROW_HEIGHT));
+            fragment.append(this._createVirtualSpacer((visible.length - window.end) * HYTree.ROW_HEIGHT));
         }
         for (const [id, rendered] of this._rowCache) {
             if (visibleIds.has(id))
@@ -343,13 +343,13 @@ export class GETree extends HTMLElement {
     }
     _getRenderWindow(itemCount) {
         const viewportHeight = this.clientHeight;
-        if (itemCount < GETree.VIRTUALIZATION_THRESHOLD || viewportHeight <= 0)
+        if (itemCount < HYTree.VIRTUALIZATION_THRESHOLD || viewportHeight <= 0)
             return { start: 0, end: itemCount };
-        const first = Math.floor(this.scrollTop / GETree.ROW_HEIGHT);
-        const last = Math.ceil((this.scrollTop + viewportHeight) / GETree.ROW_HEIGHT);
+        const first = Math.floor(this.scrollTop / HYTree.ROW_HEIGHT);
+        const last = Math.ceil((this.scrollTop + viewportHeight) / HYTree.ROW_HEIGHT);
         return {
-            start: Math.max(0, first - GETree.OVERSCAN_ROWS),
-            end: Math.min(itemCount, last + GETree.OVERSCAN_ROWS),
+            start: Math.max(0, first - HYTree.OVERSCAN_ROWS),
+            end: Math.min(itemCount, last + HYTree.OVERSCAN_ROWS),
         };
     }
     _createVirtualSpacer(height) {
@@ -372,7 +372,7 @@ export class GETree extends HTMLElement {
         const row = document.createElement('div');
         const toggle = document.createElement('button');
         const content = document.createElement('div');
-        const renderer = document.createElement('ge-tree-node');
+        const renderer = document.createElement('hy-tree-node');
         row.className = 'row';
         row.dataset.id = id;
         toggle.type = 'button';
@@ -380,7 +380,7 @@ export class GETree extends HTMLElement {
         content.className = 'content';
         content.append(renderer);
         row.append(toggle, content);
-        const rendered = { row, toggle, content, renderer, rendererTag: 'ge-tree-node' };
+        const rendered = { row, toggle, content, renderer, rendererTag: 'hy-tree-node' };
         this._rowCache.set(id, rendered);
         return rendered;
     }
@@ -408,7 +408,7 @@ export class GETree extends HTMLElement {
         this._syncRenderer(rendered.renderer, node, depth, expanded, hasChildren, selected);
     }
     _getRendererTag(node) {
-        return typeof node.renderer === 'string' && node.renderer ? node.renderer : 'ge-tree-node';
+        return typeof node.renderer === 'string' && node.renderer ? node.renderer : 'hy-tree-node';
     }
     _syncRenderer(el, node, depth, expanded, hasChildren, selected) {
         el.node = node;
@@ -540,7 +540,7 @@ export class GETree extends HTMLElement {
             this._activeId = this._selectedId;
         }
         catch (error) {
-            console.warn('Invalid ge-tree selected-ids attribute.', error);
+            console.warn('Invalid hy-tree selected-ids attribute.', error);
             this._setSelectionFromSelectedIdAttribute();
         }
     }
@@ -698,33 +698,33 @@ export class GETree extends HTMLElement {
         if (activeId === undefined)
             return false;
         const activeIndex = this._model.visibleIndex.get(activeId) ?? 0;
-        if (event.key === 'ArrowDown') {
-            this._setActiveId(visibleIds[Math.min(activeIndex + 1, visibleIds.length - 1)] ?? activeId);
+        const linearTarget = this._linearNavigationTarget(event.key, activeIndex, visibleIds);
+        if (linearTarget) {
+            this._setActiveId(linearTarget);
             return true;
         }
-        if (event.key === 'ArrowUp') {
-            this._setActiveId(visibleIds[Math.max(activeIndex - 1, 0)] ?? activeId);
-            return true;
-        }
-        if (event.key === 'Home') {
-            this._setActiveId(visibleIds[0] ?? activeId);
-            return true;
-        }
-        if (event.key === 'End') {
-            this._setActiveId(visibleIds[visibleIds.length - 1] ?? activeId);
-            return true;
-        }
-        if (event.key === 'ArrowRight') {
+        return this._handleNavigationAction(event.key, activeId);
+    }
+    _linearNavigationTarget(key, activeIndex, visibleIds) {
+        if (key === 'ArrowDown')
+            return visibleIds[Math.min(activeIndex + 1, visibleIds.length - 1)] ?? null;
+        if (key === 'ArrowUp')
+            return visibleIds[Math.max(activeIndex - 1, 0)] ?? null;
+        if (key === 'Home')
+            return visibleIds[0] ?? null;
+        if (key === 'End')
+            return visibleIds[visibleIds.length - 1] ?? null;
+        return null;
+    }
+    _handleNavigationAction(key, activeId) {
+        if (key === 'ArrowRight')
             return this._moveActiveRight(activeId);
-        }
-        if (event.key === 'ArrowLeft') {
+        if (key === 'ArrowLeft')
             return this._moveActiveLeft(activeId);
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-            this._setSelection([activeId], activeId, true);
-            return true;
-        }
-        return false;
+        if (key !== 'Enter' && key !== ' ')
+            return false;
+        this._setSelection([activeId], activeId, true);
+        return true;
     }
     _moveActiveRight(activeId) {
         const indexed = this._model.getIndexedNode(activeId);
@@ -799,7 +799,7 @@ export class GETree extends HTMLElement {
             this.removeAttribute('aria-activedescendant');
     }
     _getTreeItemElementId(id) {
-        return `ge-tree-item-${encodeURIComponent(id)}`;
+        return `hy-tree-item-${encodeURIComponent(id)}`;
     }
     _scrollActiveIntoView() {
         if (!this._activeId)
@@ -809,8 +809,8 @@ export class GETree extends HTMLElement {
             this._getVisibleFlatNodes();
             const index = this._model.visibleIndex.get(this._activeId);
             if (index !== undefined) {
-                const rowTop = index * GETree.ROW_HEIGHT;
-                const rowBottom = rowTop + GETree.ROW_HEIGHT;
+                const rowTop = index * HYTree.ROW_HEIGHT;
+                const rowBottom = rowTop + HYTree.ROW_HEIGHT;
                 if (rowTop < this.scrollTop)
                     this.scrollTop = rowTop;
                 else if (rowBottom > this.scrollTop + this.clientHeight)
@@ -822,7 +822,7 @@ export class GETree extends HTMLElement {
         rendered?.row.scrollIntoView({ block: 'nearest' });
     }
     _onScroll = () => {
-        if (this._getVisibleFlatNodes().length >= GETree.VIRTUALIZATION_THRESHOLD)
+        if (this._getVisibleFlatNodes().length >= HYTree.VIRTUALIZATION_THRESHOLD)
             this._render();
     };
     _isEditableTarget(target) {
@@ -842,7 +842,9 @@ export class GETree extends HTMLElement {
         if (this._clipboard.length === 0)
             return false;
         const target = this._selectedId ? this._model.findNode(this._selectedId) : null;
-        const targetList = target ? (target.node.children ??= []) : this._data;
+        if (target && !target.node.children)
+            target.node.children = [];
+        const targetList = target?.node.children ?? this._data;
         if (target) {
             this._expandedIds.add(target.node.id);
         }
@@ -932,11 +934,11 @@ export class GETree extends HTMLElement {
     }
 }
 export function defineTreeComponents() {
-    if (!customElements.get('ge-tree-node')) {
-        customElements.define('ge-tree-node', GETreeNode);
+    if (!customElements.get('hy-tree-node')) {
+        customElements.define('hy-tree-node', HYTreeNode);
     }
-    if (!customElements.get('ge-tree')) {
-        customElements.define('ge-tree', GETree);
+    if (!customElements.get('hy-tree')) {
+        customElements.define('hy-tree', HYTree);
     }
 }
 //# sourceMappingURL=tree.js.map

package/dist/virtual-list.d.ts

@@ -0,0 +1,61 @@
+export type HYVirtualListAlign = 'auto' | 'start' | 'center' | 'end';
+export type HYVirtualListItemRenderer<T = unknown> = (item: T, index: number) => Node | string | number | null | undefined;
+/** All end indexes are exclusive and can be passed directly to Array#slice. */
+export interface HYVirtualListRange {
+    readonly startIndex: number;
+    readonly endIndex: number;
+    readonly visibleStartIndex: number;
+    readonly visibleEndIndex: number;
+}
+export interface HYVirtualListRangeChangeDetail extends HYVirtualListRange {
+    readonly renderedCount: number;
+    readonly total: number;
+}
+export interface HYVirtualListItemClickDetail<T = unknown> {
+    readonly item: T;
+    readonly index: number;
+}
+export declare function calculateVirtualListRange(itemCount: number, itemHeight: number, viewportHeight: number, scrollTop: number, overscan: number): HYVirtualListRange;
+export declare class HYVirtualList<T = unknown> extends HTMLElement {
+    private readonly _viewport;
+    private readonly _spacer;
+    private readonly _window;
+    private readonly _empty;
+    private _items;
+    private _renderItem;
+    private _itemHeight;
+    private _height;
+    private _overscan;
+    private _range;
+    private _resizeObserver;
+    private _connected;
+    private readonly _onScroll;
+    private readonly _onClick;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get items(): readonly T[];
+    set items(value: readonly T[]);
+    get renderItem(): HYVirtualListItemRenderer<T> | null;
+    set renderItem(value: HYVirtualListItemRenderer<T> | null);
+    get itemHeight(): number;
+    set itemHeight(value: number);
+    get height(): number;
+    set height(value: number);
+    get overscan(): number;
+    set overscan(value: number);
+    refresh(): void;
+    scrollToIndex(index: number, align?: HYVirtualListAlign): void;
+    private _syncAttributes;
+    private _applyHeight;
+    private _readPositiveAttribute;
+    private _readNonNegativeAttribute;
+    private _reflectNumber;
+    private _clampScrollTop;
+    private _renderWindow;
+    private _handleClick;
+    private _replaceRows;
+}
+export declare function defineVirtualListComponents(): void;