@haiyue/ui 0.1.0 → 0.1.1

package/dist/tabs.js

@@ -1,4 +1,4 @@
-export class GETabs extends HTMLElement {
+export class HYTabs extends HTMLElement {
     _style = document.createElement('style');
     _tabs = document.createElement('div');
     _panels = document.createElement('div');
@@ -18,8 +18,8 @@ export class GETabs extends HTMLElement {
         height: 100%;
         min-width: 0;
         min-height: 0;
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-panel-bg-color, #171d28);
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-panel-bg-color, #171d28);
         font: 12px system-ui, sans-serif;
       }
       .tabs {
@@ -28,8 +28,8 @@ export class GETabs extends HTMLElement {
         gap: 2px;
         min-width: 0;
         padding: 4px 6px 0;
-        border-bottom: 1px solid var(--ge-border-color, #303746);
-        background: var(--ge-tabs-bar-bg-color, var(--ge-menu-bg-color, var(--ge-surface-elevated-color, #1b2230)));
+        border-bottom: 1px solid var(--hy-border-color, #303746);
+        background: var(--hy-tabs-bar-bg-color, var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #1b2230)));
       }
       button {
         height: 28px;
@@ -38,19 +38,19 @@ export class GETabs extends HTMLElement {
         border: 1px solid transparent;
         border-bottom: 0;
         border-radius: 4px 4px 0 0;
-        color: var(--ge-secondary-text-color, #8fa7c8);
+        color: var(--hy-secondary-text-color, #8fa7c8);
         background: transparent;
         font: inherit;
         cursor: pointer;
       }
       button:hover {
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-hover-bg-color, #222b3a);
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-hover-bg-color, #222b3a);
       }
       button.active {
-        color: var(--ge-active-text-color, #eef3ff);
-        border-color: var(--ge-border-color, #303746);
-        background: var(--ge-panel-bg-color, #171d28);
+        color: var(--hy-active-text-color, #eef3ff);
+        border-color: var(--hy-border-color, #303746);
+        background: var(--hy-panel-bg-color, #171d28);
       }
       button:disabled {
         opacity: 0.45;
@@ -121,7 +121,7 @@ export class GETabs extends HTMLElement {
                 : [];
         }
         catch (error) {
-            console.warn('Invalid ge-tabs options attribute.', error);
+            console.warn('Invalid hy-tabs options attribute.', error);
         }
     }
     _render() {
@@ -154,8 +154,8 @@ export class GETabs extends HTMLElement {
     }
 }
 export function defineTabsComponents() {
-    if (!customElements.get('ge-tabs')) {
-        customElements.define('ge-tabs', GETabs);
+    if (!customElements.get('hy-tabs')) {
+        customElements.define('hy-tabs', HYTabs);
     }
 }
 //# sourceMappingURL=tabs.js.map

package/dist/tooltip.d.ts

@@ -1,5 +1,5 @@
-export type GETooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
-export declare class GETooltip extends HTMLElement {
+export type HYTooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+export declare class HYTooltip extends HTMLElement {
     private readonly _root;
     private readonly _style;
     private readonly _slot;
@@ -15,8 +15,8 @@ export declare class GETooltip extends HTMLElement {
     attributeChangedCallback(name: string): void;
     get label(): string;
     set label(value: string);
-    get placement(): GETooltipPlacement;
-    set placement(value: GETooltipPlacement);
+    get placement(): HYTooltipPlacement;
+    set placement(value: HYTooltipPlacement);
     get delay(): number;
     set delay(value: number);
     get arrow(): boolean;

package/dist/tooltip.js

@@ -17,7 +17,7 @@ const TOOLTIP_PLACEMENTS = new Set([
     'rightTop',
     'rightBottom',
 ]);
-export class GETooltip extends HTMLElement {
+export class HYTooltip extends HTMLElement {
     _root;
     _style = document.createElement('style');
     _slot = document.createElement('slot');
@@ -45,10 +45,10 @@ export class GETooltip extends HTMLElement {
         max-width: min(280px, calc(100vw - 16px));
         padding: 5px 8px;
         border-radius: 4px;
-        color: var(--ge-tooltip-text-color, #f4f7fb);
-        background: var(--ge-tooltip-bg-color, #0f141c);
-        border: 1px solid var(--ge-tooltip-border-color, rgba(255, 255, 255, 0.08));
-        box-shadow: 0 8px 24px var(--ge-tooltip-shadow-color, rgba(0, 0, 0, 0.35));
+        color: var(--hy-tooltip-text-color, #f4f7fb);
+        background: var(--hy-tooltip-bg-color, #0f141c);
+        border: 1px solid var(--hy-tooltip-border-color, rgba(255, 255, 255, 0.08));
+        box-shadow: 0 8px 24px var(--hy-tooltip-shadow-color, rgba(0, 0, 0, 0.35));
         font: 12px system-ui, sans-serif;
         line-height: 1.35;
         width: max-content;
@@ -63,8 +63,8 @@ export class GETooltip extends HTMLElement {
         position: absolute;
         width: ${ARROW_SIZE}px;
         height: ${ARROW_SIZE}px;
-        background: var(--ge-tooltip-bg-color, #0f141c);
-        border: solid var(--ge-tooltip-border-color, rgba(255, 255, 255, 0.08));
+        background: var(--hy-tooltip-bg-color, #0f141c);
+        border: solid var(--hy-tooltip-border-color, rgba(255, 255, 255, 0.08));
         border-width: 0 1px 1px 0;
         transform: rotate(45deg);
       }
@@ -279,8 +279,8 @@ function getAlignedLeft(hostRect, tooltipRect, placement) {
     return hostRect.left + (hostRect.width - tooltipRect.width) / 2;
 }
 export function defineTooltipComponents() {
-    if (!customElements.get('ge-tooltip')) {
-        customElements.define('ge-tooltip', GETooltip);
+    if (!customElements.get('hy-tooltip')) {
+        customElements.define('hy-tooltip', HYTooltip);
     }
 }
 //# sourceMappingURL=tooltip.js.map

package/dist/tree-model.d.ts

@@ -1,6 +1,6 @@
-import type { FlatTreeNode, GETreeDropPosition, GETreeNodeData, IndexedTreeNode } from './tree-types.js';
-/** Mutable hierarchy model owned by ge-tree. It has no DOM dependency and is safe to unit test. */
-export declare class GETreeModel {
+import type { FlatTreeNode, HYTreeDropPosition, HYTreeNodeData, IndexedTreeNode } from './tree-types.js';
+/** Mutable hierarchy model owned by hy-tree. It has no DOM dependency and is safe to unit test. */
+export declare class HYTreeModel {
     private _data;
     private readonly _expandedIds;
     private readonly _nodeIndex;
@@ -13,21 +13,29 @@ export declare class GETreeModel {
     get index(): ReadonlyMap<string, IndexedTreeNode>;
     get visibleIndex(): ReadonlyMap<string, number>;
     get isVisibilityDirty(): boolean;
-    setData(data: GETreeNodeData[]): void;
+    setData(data: HYTreeNodeData[]): void;
     invalidateVisibility(): void;
     getVisibleNodes(): readonly FlatTreeNode[];
     getVisibleIds(): readonly string[];
     getIndexedNode(id: string): IndexedTreeNode | null;
     findNode(id: string): {
-        node: GETreeNodeData;
-        parent: GETreeNodeData | null;
+        node: HYTreeNodeData;
+        parent: HYTreeNodeData | null;
     } | null;
     topLevelSelection(ids: Iterable<string>): string[];
     removeNode(id: string): boolean;
-    moveNode(sourceId: string, targetId: string, position: GETreeDropPosition): boolean;
+    moveNode(sourceId: string, targetId: string, position: HYTreeDropPosition): boolean;
+    private _createMovePlan;
+    private _visibleRange;
+    private _resolveMoveDestination;
+    private _refreshMovedSubtree;
     private _refreshSiblingIndexes;
     private _refreshSubtreeIndex;
     private _moveVisibleSubtree;
+    private _removeVisibleRange;
+    private _insertExpandedChildren;
+    private _resolveVisibleInsertAt;
+    private _insertVisibleSubtrees;
     private _collectVisibleSubtree;
     private _visibleSubtreeEnd;
     private _refreshVisibleIndexes;

package/dist/tree-model.js

@@ -1,5 +1,5 @@
-/** Mutable hierarchy model owned by ge-tree. It has no DOM dependency and is safe to unit test. */
-export class GETreeModel {
+/** Mutable hierarchy model owned by hy-tree. It has no DOM dependency and is safe to unit test. */
+export class HYTreeModel {
     _data = [];
     _expandedIds;
     _nodeIndex = new Map();
@@ -87,58 +87,74 @@ export class GETreeModel {
     moveNode(sourceId, targetId, position) {
         this._ensureIndex();
         this.getVisibleNodes();
+        const plan = this._createMovePlan(sourceId, targetId);
+        if (!plan)
+            return false;
+        const destination = this._resolveMoveDestination(plan, position);
+        if (!destination)
+            return false;
+        plan.sourceList.splice(plan.sourceIndex, 1);
+        destination.targetList.splice(destination.insertIndex, 0, plan.source.node);
+        this._refreshSiblingIndexes(plan.sourceList);
+        if (destination.targetList !== plan.sourceList)
+            this._refreshSiblingIndexes(destination.targetList);
+        this._refreshMovedSubtree(plan.source.node, destination.nextParent);
+        this._moveVisibleSubtree(plan.source.node, plan.start, plan.count, destination.nextParent, destination.expandedNextParent);
+        return true;
+    }
+    _createMovePlan(sourceId, targetId) {
         const source = this._nodeIndex.get(sourceId);
         const target = this._nodeIndex.get(targetId);
         if (!source || !target || sourceId === targetId)
-            return false;
+            return null;
         if (target.ancestorIds.includes(sourceId))
-            return false;
+            return null;
         const sourceList = source.parent?.children ?? this._data;
         const sourceIndex = source.index;
         if (sourceIndex < 0)
-            return false;
-        const previousDepth = source.depth;
-        const visibleStart = this._visibleIndex.get(sourceId) ?? -1;
-        let visibleCount = 0;
-        if (visibleStart >= 0) {
-            visibleCount = 1;
-            while (visibleStart + visibleCount < this._visibleNodes.length
-                && (this._visibleNodes[visibleStart + visibleCount]?.depth ?? -1) > previousDepth) {
-                visibleCount++;
-            }
+            return null;
+        return { source, target, sourceList, sourceIndex, ...this._visibleRange(source) };
+    }
+    _visibleRange(source) {
+        const start = this._visibleIndex.get(source.node.id) ?? -1;
+        if (start < 0)
+            return { start, count: 0 };
+        let count = 1;
+        while (start + count < this._visibleNodes.length
+            && (this._visibleNodes[start + count]?.depth ?? -1) > source.depth) {
+            count++;
         }
-        sourceList.splice(sourceIndex, 1);
-        let nextParent;
-        let targetList;
-        let insertIndex;
-        let expandedNextParent = false;
+        return { start, count };
+    }
+    _resolveMoveDestination(plan, position) {
         if (position === 'inside') {
-            target.node.children ??= [];
-            nextParent = target.node;
-            targetList = target.node.children;
-            insertIndex = targetList.length;
-            expandedNextParent = !this._expandedIds.has(target.node.id);
-            this._expandedIds.add(target.node.id);
+            plan.target.node.children ??= [];
+            const expandedNextParent = !this._expandedIds.has(plan.target.node.id);
+            this._expandedIds.add(plan.target.node.id);
+            return {
+                nextParent: plan.target.node,
+                targetList: plan.target.node.children,
+                insertIndex: plan.target.node.children.length,
+                expandedNextParent,
+            };
         }
-        else {
-            nextParent = target.parent;
-            targetList = target.parent?.children ?? this._data;
-            let targetIndex = target.index;
-            if (sourceList === targetList && sourceIndex < targetIndex)
-                targetIndex--;
-            if (targetIndex < 0)
-                return false;
-            insertIndex = position === 'before' ? targetIndex : targetIndex + 1;
-        }
-        targetList.splice(insertIndex, 0, source.node);
-        this._refreshSiblingIndexes(sourceList);
-        if (targetList !== sourceList)
-            this._refreshSiblingIndexes(targetList);
+        const targetList = plan.target.parent?.children ?? this._data;
+        let targetIndex = plan.target.index;
+        if (plan.sourceList === targetList && plan.sourceIndex < targetIndex)
+            targetIndex--;
+        if (targetIndex < 0)
+            return null;
+        return {
+            nextParent: plan.target.parent,
+            targetList,
+            insertIndex: position === 'before' ? targetIndex : targetIndex + 1,
+            expandedNextParent: false,
+        };
+    }
+    _refreshMovedSubtree(source, nextParent) {
         const parentIndex = nextParent ? this._nodeIndex.get(nextParent.id) : null;
-        const ancestorIds = parentIndex ? [...parentIndex.ancestorIds, nextParent.id] : [];
-        this._refreshSubtreeIndex(source.node, nextParent, parentIndex ? parentIndex.depth + 1 : 0, ancestorIds);
-        this._moveVisibleSubtree(source.node, visibleStart, visibleCount, nextParent, expandedNextParent);
-        return true;
+        const ancestorIds = parentIndex && nextParent ? [...parentIndex.ancestorIds, nextParent.id] : [];
+        this._refreshSubtreeIndex(source, nextParent, parentIndex ? parentIndex.depth + 1 : 0, ancestorIds);
     }
     _refreshSiblingIndexes(nodes) {
         for (let index = 0; index < nodes.length; index++) {
@@ -167,49 +183,46 @@ export class GETreeModel {
         }
     }
     _moveVisibleSubtree(source, previousStart, previousCount, nextParent, expandedNextParent) {
-        if (previousStart >= 0 && previousCount > 0) {
-            this._visibleNodes.splice(previousStart, previousCount);
-            this._visibleIds.splice(previousStart, previousCount);
-            this._refreshVisibleIndexes(previousStart);
-        }
+        this._removeVisibleRange(previousStart, previousCount);
         if (expandedNextParent && nextParent) {
-            const parentVisible = this._visibleIndex.get(nextParent.id);
-            if (parentVisible === undefined)
-                return;
-            const expandedChildren = [];
-            for (const child of nextParent.children ?? []) {
-                this._collectVisibleSubtree(child, expandedChildren);
-            }
-            if (expandedChildren.length === 0)
-                return;
-            const insertAt = parentVisible + 1;
-            this._visibleNodes.splice(insertAt, 0, ...expandedChildren);
-            this._visibleIds.splice(insertAt, 0, ...expandedChildren.map(item => item.node.id));
-            this._refreshVisibleIndexes(insertAt);
+            this._insertExpandedChildren(nextParent);
             return;
         }
-        let insertAt = -1;
+        const insertAt = this._resolveVisibleInsertAt(source, nextParent);
+        if (insertAt >= 0)
+            this._insertVisibleSubtrees(insertAt, [source]);
+    }
+    _removeVisibleRange(start, count) {
+        if (start < 0 || count <= 0)
+            return;
+        this._visibleNodes.splice(start, count);
+        this._visibleIds.splice(start, count);
+        this._refreshVisibleIndexes(start);
+    }
+    _insertExpandedChildren(parent) {
+        const parentVisible = this._visibleIndex.get(parent.id);
+        if (parentVisible === undefined)
+            return;
+        this._insertVisibleSubtrees(parentVisible + 1, parent.children ?? []);
+    }
+    _resolveVisibleInsertAt(source, nextParent) {
         const sourceIndex = this._nodeIndex.get(source.id)?.index ?? -1;
+        if (sourceIndex < 0)
+            return -1;
         const siblings = nextParent?.children ?? this._data;
-        if (sourceIndex >= 0) {
-            if (nextParent) {
-                const parentVisible = this._visibleIndex.get(nextParent.id);
-                if (parentVisible !== undefined && this._expandedIds.has(nextParent.id)) {
-                    insertAt = sourceIndex === 0
-                        ? parentVisible + 1
-                        : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
-                }
-            }
-            else {
-                insertAt = sourceIndex === 0
-                    ? 0
-                    : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
-            }
-        }
-        if (insertAt < 0)
-            return;
+        if (!nextParent)
+            return sourceIndex === 0 ? 0 : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+        const parentVisible = this._visibleIndex.get(nextParent.id);
+        if (parentVisible === undefined || !this._expandedIds.has(nextParent.id))
+            return -1;
+        return sourceIndex === 0
+            ? parentVisible + 1
+            : this._visibleSubtreeEnd(siblings[sourceIndex - 1]?.id);
+    }
+    _insertVisibleSubtrees(insertAt, roots) {
         const moved = [];
-        this._collectVisibleSubtree(source, moved);
+        for (const root of roots)
+            this._collectVisibleSubtree(root, moved);
         if (moved.length === 0)
             return;
         this._visibleNodes.splice(insertAt, 0, ...moved);

package/dist/tree-node.d.ts

@@ -1,11 +1,11 @@
-import type { GETreeNodeData } from './tree-types.js';
-export declare class GETreeNode extends HTMLElement {
+import type { HYTreeNodeData } from './tree-types.js';
+export declare class HYTreeNode extends HTMLElement {
     private readonly _icon;
     private readonly _label;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    set node(value: GETreeNodeData);
+    set node(value: HYTreeNodeData);
     private _sync;
 }

package/dist/tree-node.js

@@ -1,4 +1,4 @@
-export class GETreeNode extends HTMLElement {
+export class HYTreeNode extends HTMLElement {
     _icon = document.createElement('span');
     _label = document.createElement('span');
     static get observedAttributes() {
@@ -22,7 +22,7 @@ export class GETreeNode extends HTMLElement {
         flex: 0 0 16px;
         display: inline-grid;
         place-items: center;
-        color: var(--ge-tree-icon-color, var(--ge-secondary-text-color, #8fa7c8));
+        color: var(--hy-tree-icon-color, var(--hy-secondary-text-color, #8fa7c8));
         font-size: 12px;
       }
       .label {
@@ -32,7 +32,7 @@ export class GETreeNode extends HTMLElement {
         white-space: nowrap;
       }
       :host([selected]) .label {
-        color: var(--ge-selected-text-color, #ffffff);
+        color: var(--hy-selected-text-color, #ffffff);
       }
     `;
         this._icon.className = 'icon';

package/dist/tree-types.d.ts

@@ -1,38 +1,38 @@
-export interface GETreeNodeData {
+export interface HYTreeNodeData {
     id: string;
     label?: string;
     icon?: string;
     expanded?: boolean;
     renderer?: string;
-    children?: GETreeNodeData[];
+    children?: HYTreeNodeData[];
     [key: string]: unknown;
 }
-export type GETreeDropPosition = 'before' | 'after' | 'inside';
-export interface GETreeSelectionChangeDetail {
+export type HYTreeDropPosition = 'before' | 'after' | 'inside';
+export interface HYTreeSelectionChangeDetail {
     selectedId: string | null;
-    node: GETreeNodeData | null;
+    node: HYTreeNodeData | null;
     selectedIds: string[];
-    nodes: GETreeNodeData[];
+    nodes: HYTreeNodeData[];
 }
-export interface GETreeDataChangeDetail {
-    data: GETreeNodeData[];
+export interface HYTreeDataChangeDetail {
+    data: HYTreeNodeData[];
     action?: 'copy' | 'paste' | 'delete' | 'drop';
     sourceId?: string;
     targetId?: string | null;
-    dropPosition?: GETreeDropPosition;
-    pastedNodes?: GETreeNodeData[];
+    dropPosition?: HYTreeDropPosition;
+    pastedNodes?: HYTreeNodeData[];
     deletedIds?: string[];
 }
-export interface GETreeNodeContextMenuDetail {
+export interface HYTreeNodeContextMenuDetail {
     id: string;
-    node: GETreeNodeData;
+    node: HYTreeNodeData;
     selectedIds: string[];
     clientX: number;
     clientY: number;
 }
 export interface FlatTreeNode {
-    node: GETreeNodeData;
-    parent: GETreeNodeData | null;
+    node: HYTreeNodeData;
+    parent: HYTreeNodeData | null;
     depth: number;
 }
 export interface IndexedTreeNode extends FlatTreeNode {

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;