@haiyue/ui 0.1.0

package/dist/dialog.js

@@ -0,0 +1,183 @@
+/** Accessible modal surface with slotted body/footer content and reflected open state. */
+export class GEDialog extends HTMLElement {
+    _dialog = document.createElement('dialog');
+    _title = document.createElement('h2');
+    _closeButton = document.createElement('button');
+    _returnFocus = null;
+    _closeReason = 'programmatic';
+    static get observedAttributes() {
+        return ['open', 'heading', 'dismissible'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        color: var(--ge-text-color, #e6edf7);
+        font: 13px system-ui, sans-serif;
+      }
+      dialog {
+        width: min(var(--ge-dialog-width, 460px), calc(100vw - 32px));
+        max-height: calc(100vh - 32px);
+        margin: auto;
+        padding: 0;
+        overflow: hidden;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: var(--ge-dialog-radius, 8px);
+        color: inherit;
+        background: var(--ge-dialog-bg-color, var(--ge-surface-elevated-color, #171e2a));
+        box-shadow: 0 22px 70px var(--ge-dialog-shadow-color, rgba(0, 0, 0, 0.52));
+      }
+      dialog::backdrop {
+        background: var(--ge-dialog-backdrop-color, rgba(3, 7, 12, 0.66));
+        backdrop-filter: blur(var(--ge-dialog-backdrop-blur, 2px));
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        min-height: 49px;
+        padding: 0 12px 0 16px;
+        border-bottom: 1px solid var(--ge-border-color, #303746);
+      }
+      h2 {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 650;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .close {
+        display: none;
+        width: 28px;
+        height: 28px;
+        border: 0;
+        border-radius: 5px;
+        color: var(--ge-secondary-text-color, #8b99ad);
+        background: transparent;
+        cursor: pointer;
+        font: 20px/1 system-ui, sans-serif;
+      }
+      :host([dismissible]) .close { display: grid; place-items: center; }
+      .close:hover { color: inherit; background: var(--ge-hover-bg-color, #242d3b); }
+      .body {
+        max-height: calc(100vh - 160px);
+        overflow: auto;
+        padding: var(--ge-dialog-body-padding, 16px);
+        color: var(--ge-dialog-body-color, var(--ge-secondary-text-color, #a8b4c5));
+        line-height: 1.55;
+      }
+      .footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        min-height: 54px;
+        padding: 10px 14px;
+        border-top: 1px solid var(--ge-border-color, #303746);
+        background: var(--ge-dialog-footer-bg-color, rgba(9, 13, 19, 0.22));
+      }
+      slot[name="footer"]::slotted(*) { margin: 0; }
+    `;
+        const header = document.createElement('header');
+        header.className = 'header';
+        this._title.id = 'title';
+        this._closeButton.className = 'close';
+        this._closeButton.type = 'button';
+        this._closeButton.setAttribute('aria-label', 'Close');
+        this._closeButton.textContent = '×';
+        header.append(this._title, this._closeButton);
+        const body = document.createElement('div');
+        body.className = 'body';
+        body.append(document.createElement('slot'));
+        const footer = document.createElement('footer');
+        footer.className = 'footer';
+        const footerSlot = document.createElement('slot');
+        footerSlot.name = 'footer';
+        footer.append(footerSlot);
+        this._dialog.setAttribute('aria-labelledby', this._title.id);
+        this._dialog.append(header, body, footer);
+        root.append(style, this._dialog);
+        this._closeButton.addEventListener('click', () => this.close('action'));
+        this._dialog.addEventListener('cancel', this._onCancel);
+        this._dialog.addEventListener('click', this._onDialogClick);
+        this._dialog.addEventListener('close', this._onNativeClose);
+    }
+    connectedCallback() {
+        this._syncHeading();
+        this._syncOpen();
+    }
+    attributeChangedCallback(name) {
+        if (name === 'heading')
+            this._syncHeading();
+        if (name === 'open' && this.isConnected)
+            this._syncOpen();
+    }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', value); }
+    get dismissible() { return this.hasAttribute('dismissible'); }
+    set dismissible(value) { this.toggleAttribute('dismissible', value); }
+    get heading() { return this.getAttribute('heading') ?? ''; }
+    set heading(value) { this.setAttribute('heading', value); }
+    showModal() {
+        if (this.open && this._dialog.open)
+            return;
+        this._returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        this._closeReason = 'programmatic';
+        this.open = true;
+    }
+    close(reason = 'programmatic') {
+        if (!this.open && !this._dialog.open)
+            return;
+        this._closeReason = reason;
+        this.open = false;
+    }
+    _syncHeading() {
+        this._title.textContent = this.heading || 'Dialog';
+    }
+    _syncOpen() {
+        if (this.open && !this._dialog.open) {
+            this._returnFocus ??= document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            this._dialog.showModal();
+            return;
+        }
+        if (!this.open && this._dialog.open)
+            this._dialog.close();
+    }
+    _onCancel = (event) => {
+        event.preventDefault();
+        if (!this.dismissible)
+            return;
+        const forwarded = new CustomEvent('dialog-cancel', { bubbles: true, composed: true, cancelable: true });
+        if (this.dispatchEvent(forwarded))
+            this.close('escape');
+    };
+    _onDialogClick = (event) => {
+        if (!this.dismissible || event.target !== this._dialog)
+            return;
+        const rect = this._dialog.getBoundingClientRect();
+        const inside = event.clientX >= rect.left && event.clientX <= rect.right
+            && event.clientY >= rect.top && event.clientY <= rect.bottom;
+        if (!inside)
+            this.close('backdrop');
+    };
+    _onNativeClose = () => {
+        this.removeAttribute('open');
+        const reason = this._closeReason;
+        this._closeReason = 'programmatic';
+        this.dispatchEvent(new CustomEvent('dialog-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+        this._returnFocus?.focus();
+        this._returnFocus = null;
+    };
+}
+export function defineDialogComponents() {
+    if (!customElements.get('ge-dialog'))
+        customElements.define('ge-dialog', GEDialog);
+}
+//# sourceMappingURL=dialog.js.map

package/dist/dropdown.d.ts

@@ -0,0 +1,45 @@
+export interface GEDropdownItem {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    separator?: boolean;
+}
+export interface GEDropdownSelectDetail {
+    value: string;
+    item: GEDropdownItem;
+}
+export type GEDropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export declare class GEDropdown extends HTMLElement {
+    private readonly _root;
+    private readonly _style;
+    private readonly _triggerSlot;
+    private readonly _menu;
+    private _items;
+    private _documentListenerAbort;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get items(): GEDropdownItem[];
+    set items(value: GEDropdownItem[]);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get placement(): GEDropdownPlacement;
+    set placement(value: GEDropdownPlacement);
+    show(): void;
+    close(): void;
+    toggle(): void;
+    private _readItemsAttribute;
+    private _render;
+    private _syncPosition;
+    private _syncDocumentListeners;
+    private _attachDocumentListeners;
+    private _detachDocumentListeners;
+    private _onHostClick;
+    private _onDocumentPointerDown;
+    private _onDocumentKeyDown;
+}
+export declare function defineDropdownComponents(): void;

package/dist/dropdown.js

@@ -0,0 +1,228 @@
+import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
+export class GEDropdown extends HTMLElement {
+    _root;
+    _style = document.createElement('style');
+    _triggerSlot = document.createElement('slot');
+    _menu = document.createElement('div');
+    _items = [];
+    _documentListenerAbort = null;
+    static get observedAttributes() {
+        return ['items', 'open', 'disabled', 'placement'];
+    }
+    constructor() {
+        super();
+        this._root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        display: inline-block;
+        width: max-content;
+        min-width: 0;
+        color: var(--ge-text-color, #d8e2f2);
+        font: 12px system-ui, sans-serif;
+      }
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.55;
+      }
+      .menu {
+        position: fixed;
+        z-index: 10000;
+        box-sizing: border-box;
+        min-width: 148px;
+        max-height: min(320px, calc(100vh - 12px));
+        overflow: auto;
+        display: none;
+        padding: 4px;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: 4px;
+        color: var(--ge-text-color, #d8e2f2);
+        background: var(--ge-menu-bg-color, var(--ge-surface-elevated-color, #1b2230));
+        box-shadow: 0 10px 26px var(--ge-menu-shadow-color, rgba(0, 0, 0, 0.36));
+      }
+      :host([open]) .menu {
+        display: block;
+      }
+${GE_MENU_ITEM_STYLES}
+    `;
+        this._triggerSlot.name = 'trigger';
+        this._menu.className = 'menu';
+        this._root.append(this._style, this._triggerSlot, this._menu);
+    }
+    connectedCallback() {
+        this._readItemsAttribute();
+        this._render();
+        this.addEventListener('click', this._onHostClick);
+        this._syncDocumentListeners();
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._onHostClick);
+        this._detachDocumentListeners();
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'items') {
+            this._readItemsAttribute();
+            this._render();
+        }
+        if (name === 'open') {
+            this._syncDocumentListeners();
+            if (newValue !== null)
+                this._syncPosition();
+        }
+        if (name === 'placement' && this.open)
+            this._syncPosition();
+    }
+    get items() {
+        return this._items;
+    }
+    set items(value) {
+        this._items = Array.isArray(value) ? value : [];
+        this._render();
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        if (value)
+            this.setAttribute('open', '');
+        else
+            this.removeAttribute('open');
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        if (value)
+            this.setAttribute('disabled', '');
+        else
+            this.removeAttribute('disabled');
+    }
+    get placement() {
+        return this.getAttribute('placement') ?? 'bottom-start';
+    }
+    set placement(value) {
+        this.setAttribute('placement', value);
+    }
+    show() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this._syncPosition();
+    }
+    close() {
+        this.open = false;
+    }
+    toggle() {
+        if (this.open)
+            this.close();
+        else
+            this.show();
+    }
+    _readItemsAttribute() {
+        const raw = this.getAttribute('items');
+        if (!raw) {
+            this._items = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this._items = Array.isArray(parsed)
+                ? parsed.map(item => ({
+                    ...(item.separator ? {} : {
+                        label: String(item.label ?? item.value ?? ''),
+                        value: String(item.value ?? item.label ?? ''),
+                    }),
+                    disabled: Boolean(item.disabled),
+                    separator: Boolean(item.separator),
+                }))
+                : [];
+        }
+        catch (error) {
+            console.warn('Invalid ge-dropdown items attribute.', error);
+        }
+    }
+    _render() {
+        this._menu.replaceChildren();
+        for (const item of this._items) {
+            if (item.separator) {
+                this._menu.append(createMenuSeparator());
+                continue;
+            }
+            const button = createMenuItemButton(item);
+            button.addEventListener('click', (event) => {
+                event.stopPropagation();
+                if (!item.value || item.disabled)
+                    return;
+                this.dispatchEvent(new CustomEvent('item-select', {
+                    detail: { value: item.value, item },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.close();
+            });
+            this._menu.append(button);
+        }
+        if (this.open)
+            this._syncPosition();
+    }
+    _syncPosition() {
+        if (!this.open)
+            return;
+        const hostRect = this.getBoundingClientRect();
+        this._menu.style.left = '0px';
+        this._menu.style.top = '0px';
+        this._menu.style.minWidth = `${Math.max(148, hostRect.width)}px`;
+        const menuRect = this._menu.getBoundingClientRect();
+        const placement = this.placement;
+        const left = placement.endsWith('end') ? hostRect.right - menuRect.width : hostRect.left;
+        const top = placement.startsWith('top') ? hostRect.top - menuRect.height - 4 : hostRect.bottom + 4;
+        const viewport = getVisualViewportRect();
+        this._menu.style.left = `${Math.max(viewport.left + 4, Math.min(left, viewport.left + viewport.width - menuRect.width - 4))}px`;
+        this._menu.style.top = `${Math.max(viewport.top + 4, Math.min(top, viewport.top + viewport.height - menuRect.height - 4))}px`;
+    }
+    _syncDocumentListeners() {
+        if (this.open && this.isConnected)
+            this._attachDocumentListeners();
+        else
+            this._detachDocumentListeners();
+    }
+    _attachDocumentListeners() {
+        if (this._documentListenerAbort)
+            return;
+        this._documentListenerAbort = new AbortController();
+        const { signal } = this._documentListenerAbort;
+        document.addEventListener('pointerdown', this._onDocumentPointerDown, { capture: true, signal });
+        document.addEventListener('keydown', this._onDocumentKeyDown, { capture: true, signal });
+    }
+    _detachDocumentListeners() {
+        this._documentListenerAbort?.abort();
+        this._documentListenerAbort = null;
+    }
+    _onHostClick = (event) => {
+        if (event.composedPath().includes(this._menu))
+            return;
+        this.toggle();
+    };
+    _onDocumentPointerDown = (event) => {
+        if (!this.open)
+            return;
+        const path = event.composedPath();
+        if (!path.includes(this))
+            this.close();
+    };
+    _onDocumentKeyDown = (event) => {
+        if (event.key === 'Escape')
+            this.close();
+    };
+}
+function getVisualViewportRect() {
+    const viewport = window.visualViewport;
+    return viewport
+        ? { left: viewport.offsetLeft, top: viewport.offsetTop, width: viewport.width, height: viewport.height }
+        : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
+}
+export function defineDropdownComponents() {
+    if (!customElements.get('ge-dropdown')) {
+        customElements.define('ge-dropdown', GEDropdown);
+    }
+}
+//# sourceMappingURL=dropdown.js.map

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+export { defineTreeComponents, GETree, GETreeNode, } from './tree.js';
+export { defineSplitComponents, GESplit, } from './split.js';
+export { defineSelectComponents, GESelect, } from './select.js';
+export { defineTabsComponents, GETabs, } from './tabs.js';
+export { defineContextMenuComponents, GEContextMenu, } from './context-menu.js';
+export { defineDropdownComponents, GEDropdown, } from './dropdown.js';
+export { defineTooltipComponents, GETooltip, } from './tooltip.js';
+export { defineCheckboxComponents, GECheckbox, } from './checkbox.js';
+export { defineRadioComponents, GERadio, } from './radio.js';
+export { defineDialogComponents, GEDialog, } from './dialog.js';
+export { defineInputComponents, GEInput, } from './input.js';
+export type { GESplitDirection, GESplitRatioChangeDetail, } from './split.js';
+export type { GESelectChangeDetail, GESelectOption, } from './select.js';
+export type { GETabChangeDetail, GETabOption, } from './tabs.js';
+export type { GEContextMenuItem, GEContextMenuSelectDetail, } from './context-menu.js';
+export type { GEDropdownItem, GEDropdownPlacement, GEDropdownSelectDetail, } from './dropdown.js';
+export type { GETooltipPlacement, } from './tooltip.js';
+export type { GECheckboxChangeDetail, } from './checkbox.js';
+export type { GERadioChangeDetail, } from './radio.js';
+export type { GEDialogCloseDetail, GEDialogCloseReason, } from './dialog.js';
+export type { GEInputChangeDetail, GEInputType, } from './input.js';
+export type { GETreeDataChangeDetail, GETreeDropPosition, GETreeNodeContextMenuDetail, GETreeNodeData, GETreeSelectionChangeDetail, } from './tree.js';
+export declare class GEButton extends HTMLElement {
+    private readonly _button;
+    private readonly _slot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _sync;
+}
+export declare function defineHaiyueUI(): void;

package/dist/index.js

@@ -0,0 +1,110 @@
+import { defineTreeComponents } from './tree.js';
+import { defineSplitComponents } from './split.js';
+import { defineSelectComponents } from './select.js';
+import { defineTabsComponents } from './tabs.js';
+import { defineContextMenuComponents } from './context-menu.js';
+import { defineDropdownComponents } from './dropdown.js';
+import { defineTooltipComponents } from './tooltip.js';
+import { defineCheckboxComponents } from './checkbox.js';
+import { defineRadioComponents } from './radio.js';
+import { defineDialogComponents } from './dialog.js';
+import { defineInputComponents } from './input.js';
+export { defineTreeComponents, GETree, GETreeNode, } from './tree.js';
+export { defineSplitComponents, GESplit, } from './split.js';
+export { defineSelectComponents, GESelect, } from './select.js';
+export { defineTabsComponents, GETabs, } from './tabs.js';
+export { defineContextMenuComponents, GEContextMenu, } from './context-menu.js';
+export { defineDropdownComponents, GEDropdown, } from './dropdown.js';
+export { defineTooltipComponents, GETooltip, } from './tooltip.js';
+export { defineCheckboxComponents, GECheckbox, } from './checkbox.js';
+export { defineRadioComponents, GERadio, } from './radio.js';
+export { defineDialogComponents, GEDialog, } from './dialog.js';
+export { defineInputComponents, GEInput, } from './input.js';
+export class GEButton extends HTMLElement {
+    _button = document.createElement('button');
+    _slot = document.createElement('slot');
+    static get observedAttributes() {
+        return ['label', 'disabled', 'aria-label', 'title', 'icon-only'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-block; }
+      button {
+        min-height: 28px;
+        padding: 0 10px;
+        border: 1px solid #3d4654;
+        border-radius: 4px;
+        background: #202733;
+        color: #eef3ff;
+        font: 12px system-ui, sans-serif;
+        cursor: pointer;
+      }
+      button.icon-only {
+        width: 28px;
+        padding: 0;
+        display: inline-grid;
+        place-items: center;
+      }
+      ::slotted(svg) {
+        width: 16px;
+        height: 16px;
+        display: block;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+    `;
+        root.append(style, this._button);
+    }
+    connectedCallback() {
+        this._sync();
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    _sync() {
+        const label = this.getAttribute('label');
+        if (label !== null) {
+            this._button.textContent = label;
+            this._button.classList.remove('icon-only');
+            this._button.removeAttribute('aria-label');
+        }
+        else {
+            if (this._button.firstChild !== this._slot)
+                this._button.replaceChildren(this._slot);
+            this._button.classList.toggle('icon-only', this.hasAttribute('icon-only'));
+            const accessibleLabel = this.getAttribute('aria-label') ?? this.getAttribute('title') ?? '';
+            if (accessibleLabel)
+                this._button.setAttribute('aria-label', accessibleLabel);
+            else
+                this._button.removeAttribute('aria-label');
+        }
+        this._button.disabled = this.hasAttribute('disabled');
+    }
+}
+export function defineHaiyueUI() {
+    if (!customElements.get('ge-button')) {
+        customElements.define('ge-button', GEButton);
+    }
+    defineTreeComponents();
+    defineSplitComponents();
+    defineSelectComponents();
+    defineTabsComponents();
+    defineContextMenuComponents();
+    defineDropdownComponents();
+    defineTooltipComponents();
+    defineCheckboxComponents();
+    defineRadioComponents();
+    defineDialogComponents();
+    defineInputComponents();
+}
+//# sourceMappingURL=index.js.map

package/dist/input.d.ts

@@ -0,0 +1,30 @@
+export type GEInputType = 'text' | 'number' | 'color';
+export interface GEInputChangeDetail {
+    value: string;
+    valueAsNumber: number | null;
+    valid: boolean;
+}
+export declare class GEInput extends HTMLElement {
+    private readonly _input;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get type(): GEInputType;
+    set type(value: GEInputType);
+    get value(): string;
+    set value(value: string);
+    get valueAsNumber(): number;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get readOnly(): boolean;
+    set readOnly(value: boolean);
+    get valid(): boolean;
+    focus(options?: FocusOptions): void;
+    select(): void;
+    private _sync;
+    private _onInput;
+    private _onChange;
+}
+export declare function defineInputComponents(): void;