@haiyue/ui 0.1.0

package/dist/tabs.js

@@ -0,0 +1,161 @@
+export class GETabs extends HTMLElement {
+    _style = document.createElement('style');
+    _tabs = document.createElement('div');
+    _panels = document.createElement('div');
+    _options = [];
+    static get observedAttributes() {
+        return ['options', 'value'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        box-sizing: border-box;
+        display: grid;
+        grid-template-rows: 32px minmax(0, 1fr);
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        color: var(--ge-text-color, #d8e2f2);
+        background: var(--ge-panel-bg-color, #171d28);
+        font: 12px system-ui, sans-serif;
+      }
+      .tabs {
+        display: flex;
+        align-items: end;
+        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)));
+      }
+      button {
+        height: 28px;
+        min-width: 0;
+        padding: 0 10px;
+        border: 1px solid transparent;
+        border-bottom: 0;
+        border-radius: 4px 4px 0 0;
+        color: var(--ge-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);
+      }
+      button.active {
+        color: var(--ge-active-text-color, #eef3ff);
+        border-color: var(--ge-border-color, #303746);
+        background: var(--ge-panel-bg-color, #171d28);
+      }
+      button:disabled {
+        opacity: 0.45;
+        cursor: default;
+      }
+      .panels {
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+      }
+      ::slotted(*) {
+        box-sizing: border-box;
+      }
+    `;
+        this._tabs.className = 'tabs';
+        this._panels.className = 'panels';
+        root.append(this._style, this._tabs, this._panels);
+    }
+    connectedCallback() {
+        this._syncFromAttributes();
+        this._render();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'options')
+            this._readOptionsAttribute();
+        if (name === 'value' && newValue === null && this._options[0]) {
+            this.setAttribute('value', this._options[0].value);
+            return;
+        }
+        this._render();
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = Array.isArray(value) ? value : [];
+        if (!this._options.some(item => item.value === this.value)) {
+            this.value = this._options[0]?.value ?? '';
+        }
+        this._render();
+    }
+    get value() {
+        return this.getAttribute('value') ?? '';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+        this._render();
+    }
+    _syncFromAttributes() {
+        this._readOptionsAttribute();
+        if (!this.value && this._options[0])
+            this.setAttribute('value', this._options[0].value);
+    }
+    _readOptionsAttribute() {
+        const raw = this.getAttribute('options');
+        if (!raw) {
+            this._options = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this._options = Array.isArray(parsed)
+                ? parsed.map(item => ({
+                    label: String(item.label ?? item.value ?? ''),
+                    value: String(item.value ?? item.label ?? ''),
+                    disabled: Boolean(item.disabled),
+                }))
+                : [];
+        }
+        catch (error) {
+            console.warn('Invalid ge-tabs options attribute.', error);
+        }
+    }
+    _render() {
+        this._tabs.replaceChildren();
+        this._panels.replaceChildren();
+        const value = this.value || this._options[0]?.value || '';
+        for (const option of this._options) {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.textContent = option.label;
+            button.disabled = Boolean(option.disabled);
+            button.classList.toggle('active', option.value === value);
+            button.addEventListener('click', () => this._select(option.value));
+            this._tabs.append(button);
+        }
+        const slot = document.createElement('slot');
+        slot.name = value;
+        this._panels.append(slot);
+    }
+    _select(value) {
+        if (value === this.value)
+            return;
+        this.setAttribute('value', value);
+        const option = this._options.find(item => item.value === value) ?? null;
+        this.dispatchEvent(new CustomEvent('tab-change', {
+            detail: { value, option },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+export function defineTabsComponents() {
+    if (!customElements.get('ge-tabs')) {
+        customElements.define('ge-tabs', GETabs);
+    }
+}
+//# sourceMappingURL=tabs.js.map

package/dist/tooltip.d.ts

@@ -0,0 +1,37 @@
+export type GETooltipPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+export declare class GETooltip extends HTMLElement {
+    private readonly _root;
+    private readonly _style;
+    private readonly _slot;
+    private readonly _tooltip;
+    private readonly _content;
+    private readonly _arrow;
+    private _showTimer;
+    private _visible;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get label(): string;
+    set label(value: string);
+    get placement(): GETooltipPlacement;
+    set placement(value: GETooltipPlacement);
+    get delay(): number;
+    set delay(value: number);
+    get arrow(): boolean;
+    set arrow(value: boolean);
+    private _onEnter;
+    private _onLeave;
+    private _onKeyDown;
+    private _show;
+    private _hide;
+    private _onViewportChange;
+    private _syncLabel;
+    private _syncArrow;
+    private _syncPosition;
+    private _syncArrowPosition;
+    private _measureTooltip;
+    private _clearShowTimer;
+}
+export declare function defineTooltipComponents(): void;

package/dist/tooltip.js

@@ -0,0 +1,286 @@
+const DEFAULT_DELAY = 1000;
+const VIEWPORT_PADDING = 8;
+const TRIGGER_GAP = 8;
+const ARROW_SIZE = 8;
+const ARROW_OFFSET = 16;
+const TOOLTIP_PLACEMENTS = new Set([
+    'top',
+    'topLeft',
+    'topRight',
+    'bottom',
+    'bottomLeft',
+    'bottomRight',
+    'left',
+    'leftTop',
+    'leftBottom',
+    'right',
+    'rightTop',
+    'rightBottom',
+]);
+export class GETooltip extends HTMLElement {
+    _root;
+    _style = document.createElement('style');
+    _slot = document.createElement('slot');
+    _tooltip = document.createElement('div');
+    _content = document.createElement('div');
+    _arrow = document.createElement('span');
+    _showTimer = null;
+    _visible = false;
+    static get observedAttributes() {
+        return ['label', 'placement', 'delay', 'disabled', 'arrow', 'no-arrow'];
+    }
+    constructor() {
+        super();
+        this._root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        display: inline-block;
+        width: max-content;
+        min-width: 0;
+      }
+      .tooltip {
+        position: fixed;
+        z-index: 10001;
+        box-sizing: border-box;
+        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));
+        font: 12px system-ui, sans-serif;
+        line-height: 1.35;
+        width: max-content;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        pointer-events: none;
+        opacity: 0;
+        transform: translate3d(0, -2px, 0);
+        transition: opacity 0.12s ease, transform 0.12s ease;
+      }
+      .arrow {
+        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));
+        border-width: 0 1px 1px 0;
+        transform: rotate(45deg);
+      }
+      .tooltip.no-arrow .arrow {
+        display: none;
+      }
+      .tooltip.visible {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+      }
+    `;
+        this._tooltip.className = 'tooltip';
+        this._tooltip.setAttribute('role', 'tooltip');
+        this._content.className = 'content';
+        this._arrow.className = 'arrow';
+        this._tooltip.append(this._content, this._arrow);
+        this._root.append(this._style, this._slot, this._tooltip);
+    }
+    connectedCallback() {
+        this.addEventListener('pointerenter', this._onEnter);
+        this.addEventListener('pointerleave', this._onLeave);
+        this.addEventListener('focusin', this._onEnter);
+        this.addEventListener('focusout', this._onLeave);
+        this.addEventListener('keydown', this._onKeyDown);
+        this._syncLabel();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('pointerenter', this._onEnter);
+        this.removeEventListener('pointerleave', this._onLeave);
+        this.removeEventListener('focusin', this._onEnter);
+        this.removeEventListener('focusout', this._onLeave);
+        this.removeEventListener('keydown', this._onKeyDown);
+        this._clearShowTimer();
+        this._hide();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'label')
+            this._syncLabel();
+        if (name === 'arrow' || name === 'no-arrow')
+            this._syncArrow();
+        if ((name === 'placement' || name === 'disabled' || name === 'arrow' || name === 'no-arrow') && this._visible) {
+            this._syncPosition();
+        }
+    }
+    get label() {
+        return this.getAttribute('label') ?? '';
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute('label', value);
+        else
+            this.removeAttribute('label');
+    }
+    get placement() {
+        return normalizePlacement(this.getAttribute('placement'));
+    }
+    set placement(value) {
+        this.setAttribute('placement', value);
+    }
+    get delay() {
+        const value = Number(this.getAttribute('delay'));
+        return Number.isFinite(value) && value >= 0 ? value : DEFAULT_DELAY;
+    }
+    set delay(value) {
+        this.setAttribute('delay', String(Math.max(0, value)));
+    }
+    get arrow() {
+        if (this.hasAttribute('no-arrow'))
+            return false;
+        const value = this.getAttribute('arrow');
+        return value === null || value !== 'false';
+    }
+    set arrow(value) {
+        if (value) {
+            this.removeAttribute('no-arrow');
+            this.setAttribute('arrow', '');
+        }
+        else {
+            this.setAttribute('arrow', 'false');
+        }
+    }
+    _onEnter = () => {
+        if (this.hasAttribute('disabled') || !this.label)
+            return;
+        this._clearShowTimer();
+        this._showTimer = window.setTimeout(() => this._show(), this.delay);
+    };
+    _onLeave = () => {
+        this._clearShowTimer();
+        this._hide();
+    };
+    _onKeyDown = (event) => {
+        if (event.key === 'Escape')
+            this._hide();
+    };
+    _show() {
+        this._showTimer = null;
+        if (!this.isConnected || this.hasAttribute('disabled') || !this.label)
+            return;
+        this._visible = true;
+        this._syncArrow();
+        this._syncPosition();
+        this._tooltip.classList.add('visible');
+        window.addEventListener('scroll', this._onViewportChange, { capture: true, passive: true });
+        window.addEventListener('resize', this._onViewportChange);
+    }
+    _hide() {
+        if (!this._visible)
+            return;
+        this._visible = false;
+        this._tooltip.classList.remove('visible');
+        window.removeEventListener('scroll', this._onViewportChange, { capture: true });
+        window.removeEventListener('resize', this._onViewportChange);
+    }
+    _onViewportChange = () => {
+        if (this._visible)
+            this._syncPosition();
+    };
+    _syncLabel() {
+        this._content.textContent = this.label;
+    }
+    _syncArrow() {
+        this._tooltip.classList.toggle('no-arrow', !this.arrow);
+    }
+    _syncPosition() {
+        const hostRect = this.getBoundingClientRect();
+        const tooltipRect = this._measureTooltip();
+        const placement = this.placement;
+        let top = getAlignedTop(hostRect, tooltipRect, placement);
+        let left = getAlignedLeft(hostRect, tooltipRect, placement);
+        if (placement.startsWith('top'))
+            top = hostRect.top - tooltipRect.height - TRIGGER_GAP;
+        else if (placement.startsWith('bottom'))
+            top = hostRect.bottom + TRIGGER_GAP;
+        else if (placement.startsWith('left'))
+            left = hostRect.left - tooltipRect.width - TRIGGER_GAP;
+        else if (placement.startsWith('right'))
+            left = hostRect.right + TRIGGER_GAP;
+        top = clamp(top, VIEWPORT_PADDING, window.innerHeight - tooltipRect.height - VIEWPORT_PADDING);
+        left = clamp(left, VIEWPORT_PADDING, window.innerWidth - tooltipRect.width - VIEWPORT_PADDING);
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._syncArrowPosition(hostRect, tooltipRect, top, left, placement);
+    }
+    _syncArrowPosition(hostRect, tooltipRect, top, left, placement) {
+        const x = clamp(hostRect.left + hostRect.width / 2 - left - ARROW_SIZE / 2, ARROW_OFFSET, tooltipRect.width - ARROW_OFFSET - ARROW_SIZE);
+        const y = clamp(hostRect.top + hostRect.height / 2 - top - ARROW_SIZE / 2, ARROW_OFFSET, tooltipRect.height - ARROW_OFFSET - ARROW_SIZE);
+        this._arrow.style.inset = 'auto';
+        if (placement.startsWith('top')) {
+            this._arrow.style.left = `${x}px`;
+            this._arrow.style.bottom = `${-ARROW_SIZE / 2}px`;
+            this._arrow.style.transform = 'rotate(45deg)';
+            return;
+        }
+        if (placement.startsWith('bottom')) {
+            this._arrow.style.left = `${x}px`;
+            this._arrow.style.top = `${-ARROW_SIZE / 2}px`;
+            this._arrow.style.transform = 'rotate(225deg)';
+            return;
+        }
+        if (placement.startsWith('left')) {
+            this._arrow.style.top = `${y}px`;
+            this._arrow.style.right = `${-ARROW_SIZE / 2}px`;
+            this._arrow.style.transform = 'rotate(315deg)';
+            return;
+        }
+        this._arrow.style.top = `${y}px`;
+        this._arrow.style.left = `${-ARROW_SIZE / 2}px`;
+        this._arrow.style.transform = 'rotate(135deg)';
+    }
+    _measureTooltip() {
+        const previousVisibility = this._tooltip.style.visibility;
+        const previousOpacity = this._tooltip.style.opacity;
+        this._tooltip.style.visibility = 'hidden';
+        this._tooltip.style.opacity = '0';
+        this._tooltip.classList.add('visible');
+        const rect = this._tooltip.getBoundingClientRect();
+        this._tooltip.classList.toggle('visible', this._visible);
+        this._tooltip.style.visibility = previousVisibility;
+        this._tooltip.style.opacity = previousOpacity;
+        return rect;
+    }
+    _clearShowTimer() {
+        if (this._showTimer === null)
+            return;
+        window.clearTimeout(this._showTimer);
+        this._showTimer = null;
+    }
+}
+function clamp(value, min, max) {
+    if (max < min)
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+function normalizePlacement(value) {
+    return value && TOOLTIP_PLACEMENTS.has(value)
+        ? value
+        : 'top';
+}
+function getAlignedTop(hostRect, tooltipRect, placement) {
+    if (placement.endsWith('Top'))
+        return hostRect.top;
+    if (placement.endsWith('Bottom'))
+        return hostRect.bottom - tooltipRect.height;
+    return hostRect.top + (hostRect.height - tooltipRect.height) / 2;
+}
+function getAlignedLeft(hostRect, tooltipRect, placement) {
+    if (placement.endsWith('Left'))
+        return hostRect.left;
+    if (placement.endsWith('Right'))
+        return hostRect.right - tooltipRect.width;
+    return hostRect.left + (hostRect.width - tooltipRect.width) / 2;
+}
+export function defineTooltipComponents() {
+    if (!customElements.get('ge-tooltip')) {
+        customElements.define('ge-tooltip', GETooltip);
+    }
+}
+//# sourceMappingURL=tooltip.js.map

package/dist/tree-model.d.ts

@@ -0,0 +1,35 @@
+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 {
+    private _data;
+    private readonly _expandedIds;
+    private readonly _nodeIndex;
+    private readonly _visibleNodes;
+    private readonly _visibleIds;
+    private readonly _visibleIndex;
+    private _indexDirty;
+    private _visibleDirty;
+    constructor(expandedIds: Set<string>);
+    get index(): ReadonlyMap<string, IndexedTreeNode>;
+    get visibleIndex(): ReadonlyMap<string, number>;
+    get isVisibilityDirty(): boolean;
+    setData(data: GETreeNodeData[]): void;
+    invalidateVisibility(): void;
+    getVisibleNodes(): readonly FlatTreeNode[];
+    getVisibleIds(): readonly string[];
+    getIndexedNode(id: string): IndexedTreeNode | null;
+    findNode(id: string): {
+        node: GETreeNodeData;
+        parent: GETreeNodeData | null;
+    } | null;
+    topLevelSelection(ids: Iterable<string>): string[];
+    removeNode(id: string): boolean;
+    moveNode(sourceId: string, targetId: string, position: GETreeDropPosition): boolean;
+    private _refreshSiblingIndexes;
+    private _refreshSubtreeIndex;
+    private _moveVisibleSubtree;
+    private _collectVisibleSubtree;
+    private _visibleSubtreeEnd;
+    private _refreshVisibleIndexes;
+    private _ensureIndex;
+}