@haiyue/ui 0.1.0

package/dist/select.js

@@ -0,0 +1,253 @@
+export class GESelect extends HTMLElement {
+    _wrap = document.createElement('div');
+    _search = document.createElement('input');
+    _select = document.createElement('select');
+    _options = [];
+    _filterText = '';
+    static get observedAttributes() {
+        return ['options', 'value', 'disabled', 'searchable', 'aria-label', 'label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+        width: 100%;
+        min-width: 0;
+      }
+      .wrap {
+        display: grid;
+        gap: 4px;
+        width: 100%;
+        min-width: 0;
+      }
+      input,
+      select {
+        box-sizing: border-box;
+        width: 100%;
+        height: 28px;
+        min-width: 0;
+        padding: 0 28px 0 8px;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: 4px;
+        color: var(--ge-text-color, #d8e2f2);
+        background-color: var(--ge-input-bg-color, var(--ge-surface-color, #121822));
+        font: 12px system-ui, sans-serif;
+        outline: none;
+        color-scheme: dark;
+      }
+      select {
+        appearance: none;
+        cursor: pointer;
+        background-image:
+          linear-gradient(45deg, transparent 50%, var(--ge-select-arrow-color, var(--ge-secondary-text-color, #8fa7c8)) 50%),
+          linear-gradient(135deg, var(--ge-select-arrow-color, var(--ge-secondary-text-color, #8fa7c8)) 50%, transparent 50%);
+        background-position:
+          calc(100% - 15px) 11px,
+          calc(100% - 10px) 11px;
+        background-size: 5px 5px, 5px 5px;
+        background-repeat: no-repeat;
+      }
+      select:hover:not(:disabled) {
+        border-color: var(--ge-hover-border-color, #435268);
+        background-color: var(--ge-select-hover-bg-color, var(--ge-input-bg-color, #151d2a));
+      }
+      option {
+        min-height: 28px;
+        padding: 6px 8px;
+        color: var(--ge-select-option-text-color, var(--ge-text-color, #d8e2f2));
+        background: var(--ge-select-option-bg-color, var(--ge-menu-bg-color, #1b2230));
+        font: 12px system-ui, sans-serif;
+      }
+      option:checked {
+        color: var(--ge-select-option-selected-text-color, var(--ge-selected-text-color, #ffffff));
+        background: var(--ge-select-option-selected-bg-color, var(--ge-selected-bg-color, #255a91));
+      }
+      option:disabled {
+        color: var(--ge-disabled-text-color, #65738a);
+        background: var(--ge-select-option-bg-color, var(--ge-menu-bg-color, #1b2230));
+      }
+      input {
+        display: none;
+      }
+      :host([searchable]) input {
+        display: block;
+      }
+      input:focus,
+      select:focus {
+        border-color: var(--ge-focus-border-color, #3d6fa8);
+        box-shadow: 0 0 0 2px var(--ge-focus-ring-color, rgba(61, 111, 168, 0.24));
+      }
+      input:disabled,
+      select:disabled {
+        opacity: 0.55;
+        cursor: default;
+        background-image: none;
+      }
+    `;
+        this._wrap.className = 'wrap';
+        this._search.type = 'search';
+        this._search.placeholder = 'Search...';
+        this._wrap.append(this._search, this._select);
+        root.append(style, this._wrap);
+    }
+    connectedCallback() {
+        this._select.addEventListener('change', this._onChange);
+        this._search.addEventListener('input', this._onSearchInput);
+        this._syncFromAttributes();
+        this._render();
+    }
+    disconnectedCallback() {
+        this._select.removeEventListener('change', this._onChange);
+        this._search.removeEventListener('input', this._onSearchInput);
+        this._filterText = '';
+        this._search.value = '';
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === 'options')
+            this._readOptionsAttribute();
+        if (name === 'value')
+            this._select.value = newValue ?? '';
+        if (name === 'disabled' || name === 'searchable')
+            this._syncDisabled();
+        if (name === 'aria-label' || name === 'label')
+            this._syncAriaLabel();
+        if (name === 'options' || name === 'searchable')
+            this._render();
+    }
+    get options() {
+        return this._options;
+    }
+    set options(value) {
+        this._options = Array.isArray(value) ? value : [];
+        this._render();
+    }
+    get value() {
+        return this.getAttribute('value') ?? '';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+        this._select.value = value;
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        if (value)
+            this.setAttribute('disabled', '');
+        else
+            this.removeAttribute('disabled');
+    }
+    get searchable() {
+        return this.hasAttribute('searchable');
+    }
+    set searchable(value) {
+        if (value)
+            this.setAttribute('searchable', '');
+        else
+            this.removeAttribute('searchable');
+    }
+    get label() {
+        return this.getAttribute('label') ?? '';
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute('label', value);
+        else
+            this.removeAttribute('label');
+    }
+    _syncFromAttributes() {
+        // Dynamic consumers commonly assign `options` before appending the element.
+        // Do not erase that programmatic state merely because no attribute exists.
+        if (this.hasAttribute('options'))
+            this._readOptionsAttribute();
+        this._select.value = this.value;
+        this._syncDisabled();
+        this._syncAriaLabel();
+    }
+    _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-select options attribute.', error);
+        }
+    }
+    _render() {
+        this._select.replaceChildren();
+        const visibleOptions = this.searchable && this._filterText
+            ? this._options.filter(item => this._matchesFilter(item, this._filterText))
+            : this._options;
+        for (const item of visibleOptions) {
+            const option = document.createElement('option');
+            option.value = item.value;
+            option.textContent = item.label;
+            option.disabled = Boolean(item.disabled);
+            this._select.append(option);
+        }
+        this._select.value = this.value;
+        this._syncDisabled();
+    }
+    _syncDisabled() {
+        this._select.disabled = this.disabled;
+        this._search.disabled = this.disabled;
+    }
+    _syncAriaLabel() {
+        const label = this.getAttribute('aria-label') ?? this.getAttribute('label') ?? '';
+        if (label) {
+            this._select.setAttribute('aria-label', label);
+            this._search.setAttribute('aria-label', `${label} search`);
+        }
+        else {
+            this._select.removeAttribute('aria-label');
+            this._search.removeAttribute('aria-label');
+        }
+    }
+    _matchesFilter(option, filter) {
+        const haystack = `${option.label} ${option.value}`.toLowerCase();
+        const needle = filter.trim().toLowerCase();
+        if (!needle)
+            return true;
+        let index = 0;
+        for (const char of needle) {
+            index = haystack.indexOf(char, index);
+            if (index < 0)
+                return false;
+            index++;
+        }
+        return true;
+    }
+    _onChange = () => {
+        this.value = this._select.value;
+        const option = this._options.find(item => item.value === this.value) ?? null;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value, option },
+            bubbles: true,
+            composed: true,
+        }));
+    };
+    _onSearchInput = () => {
+        this._filterText = this._search.value;
+        this._render();
+    };
+}
+export function defineSelectComponents() {
+    if (!customElements.get('ge-select')) {
+        customElements.define('ge-select', GESelect);
+    }
+}
+//# sourceMappingURL=select.js.map

package/dist/split.d.ts

@@ -0,0 +1,46 @@
+export type GESplitDirection = 'horizontal' | 'vertical';
+export interface GESplitRatioChangeDetail {
+    ratio: number;
+    direction: GESplitDirection;
+}
+export declare class GESplit extends HTMLElement {
+    private readonly _style;
+    private readonly _first;
+    private readonly _second;
+    private readonly _bar;
+    private readonly _resizeObserver;
+    private _dragging;
+    private _pointerId;
+    private _layoutFrame;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get direction(): GESplitDirection;
+    set direction(value: GESplitDirection);
+    get ratio(): number;
+    set ratio(value: number);
+    get minFirst(): number;
+    set minFirst(value: number);
+    get minSecond(): number;
+    set minSecond(value: number);
+    get barSize(): number;
+    set barSize(value: number);
+    private _createSlot;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onKeyDown;
+    private _onPointerUp;
+    private _applyLayout;
+    private _clampRatio;
+    private _scheduleLayout;
+    private _syncAria;
+    private _emitRatioChange;
+    private _getAvailablePaneSize;
+    private _getLayoutSize;
+    private _getLayoutBarSize;
+    private _snapFirstSize;
+    private _clampFirstSize;
+}
+export declare function defineSplitComponents(): void;

package/dist/split.js

@@ -0,0 +1,277 @@
+const DEFAULT_BAR_SIZE = 6;
+export class GESplit extends HTMLElement {
+    _style = document.createElement('style');
+    _first = document.createElement('div');
+    _second = document.createElement('div');
+    _bar = document.createElement('div');
+    _resizeObserver = new ResizeObserver(() => this._scheduleLayout());
+    _dragging = false;
+    _pointerId = -1;
+    _layoutFrame = 0;
+    static get observedAttributes() {
+        return ['direction', 'ratio', 'min-first', 'min-second', 'bar-size'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        this._style.textContent = `
+      :host {
+        box-sizing: border-box;
+        display: grid;
+        width: 100%;
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        color: var(--ge-split-text-color, var(--ge-text-color, #d8e2f2));
+        background: var(--ge-split-bg-color, var(--ge-surface-color, #121822));
+      }
+      .pane {
+        min-width: 0;
+        min-height: 0;
+        overflow: auto;
+        background: var(--ge-split-pane-bg-color, transparent);
+      }
+      .bar {
+        background: var(--ge-split-bar-color, var(--ge-border-strong-color, #273142));
+        position: relative;
+        z-index: 1;
+        transition: background var(--ge-split-bar-transition-duration, 0.12s) ease;
+      }
+      .bar:focus {
+        outline: var(--ge-split-focus-ring-width, 1px) solid var(--ge-split-focus-ring-color, var(--ge-focus-border-color, var(--ge-accent-color, #3d6fa8)));
+        outline-offset: -1px;
+      }
+      .bar:hover,
+      .bar.dragging {
+        background: var(--ge-split-bar-active-color, var(--ge-accent-color, #3d6fa8));
+      }
+      :host([direction="vertical"]) .bar {
+        cursor: row-resize;
+      }
+      :host(:not([direction="vertical"])) .bar {
+        cursor: col-resize;
+      }
+      :host([direction="vertical"]) .bar::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+        bottom: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+      }
+      :host(:not([direction="vertical"])) .bar::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+        right: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+      }
+    `;
+        this._first.className = 'pane first';
+        this._second.className = 'pane second';
+        this._bar.className = 'bar';
+        this._bar.tabIndex = 0;
+        this._bar.setAttribute('role', 'separator');
+        this._bar.setAttribute('aria-valuemin', '0');
+        this._bar.setAttribute('aria-valuemax', '100');
+        this._first.append(this._createSlot('first'));
+        this._second.append(this._createSlot('second'));
+        root.append(this._style, this._first, this._bar, this._second);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('direction'))
+            this.setAttribute('direction', 'horizontal');
+        if (!this.hasAttribute('ratio'))
+            this.setAttribute('ratio', '0.5');
+        this._bar.addEventListener('pointerdown', this._onPointerDown);
+        this._bar.addEventListener('keydown', this._onKeyDown);
+        this._resizeObserver.observe(this);
+        this._syncAria();
+        this._scheduleLayout();
+    }
+    disconnectedCallback() {
+        this._resizeObserver.disconnect();
+        this._bar.removeEventListener('pointerdown', this._onPointerDown);
+        this._bar.removeEventListener('keydown', this._onKeyDown);
+        window.removeEventListener('pointermove', this._onPointerMove);
+        window.removeEventListener('pointerup', this._onPointerUp);
+        window.removeEventListener('pointercancel', this._onPointerUp);
+        if (this._layoutFrame) {
+            cancelAnimationFrame(this._layoutFrame);
+            this._layoutFrame = 0;
+        }
+    }
+    attributeChangedCallback() {
+        this._syncAria();
+        this._scheduleLayout();
+    }
+    get direction() {
+        return this.getAttribute('direction') === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    set direction(value) {
+        this.setAttribute('direction', value);
+    }
+    get ratio() {
+        return this._clampRatio(Number(this.getAttribute('ratio') ?? 0.5));
+    }
+    set ratio(value) {
+        this.setAttribute('ratio', String(this._clampRatio(value)));
+    }
+    get minFirst() {
+        return Math.max(0, Number(this.getAttribute('min-first') ?? 80));
+    }
+    set minFirst(value) {
+        this.setAttribute('min-first', String(Math.max(0, value)));
+    }
+    get minSecond() {
+        return Math.max(0, Number(this.getAttribute('min-second') ?? 80));
+    }
+    set minSecond(value) {
+        this.setAttribute('min-second', String(Math.max(0, value)));
+    }
+    get barSize() {
+        const value = Number(this.getAttribute('bar-size') ?? DEFAULT_BAR_SIZE);
+        return Number.isFinite(value) ? Math.max(1, value) : DEFAULT_BAR_SIZE;
+    }
+    set barSize(value) {
+        this.setAttribute('bar-size', String(Math.max(1, value)));
+    }
+    _createSlot(name) {
+        const slot = document.createElement('slot');
+        slot.name = name;
+        return slot;
+    }
+    _onPointerDown = (event) => {
+        this._dragging = true;
+        this._pointerId = event.pointerId;
+        this._bar.classList.add('dragging');
+        this._bar.setPointerCapture(event.pointerId);
+        window.addEventListener('pointermove', this._onPointerMove);
+        window.addEventListener('pointerup', this._onPointerUp);
+        window.addEventListener('pointercancel', this._onPointerUp);
+        event.preventDefault();
+    };
+    _onPointerMove = (event) => {
+        if (!this._dragging || event.pointerId !== this._pointerId)
+            return;
+        const rect = this.getBoundingClientRect();
+        const size = this._getLayoutSize();
+        const available = this._getAvailablePaneSize(size);
+        if (available <= 0)
+            return;
+        // Pointer coordinates and DOMRect are visual (and may be transformed or
+        // fractional), while CSS layout consumers usually observe integer
+        // clientWidth/clientHeight. Map between the two coordinate spaces before
+        // snapping the divider to the layout pixel grid.
+        const visualSize = this.direction === 'vertical' ? rect.height : rect.width;
+        const visualOffset = this.direction === 'vertical'
+            ? event.clientY - rect.top
+            : event.clientX - rect.left;
+        const offset = visualSize > 0 ? visualOffset * size / visualSize : 0;
+        const firstSize = this._snapFirstSize(offset - this._getLayoutBarSize() / 2, available);
+        this.ratio = firstSize / available;
+        this._emitRatioChange();
+    };
+    _onKeyDown = (event) => {
+        const direction = this.direction;
+        const backward = direction === 'vertical' ? event.key === 'ArrowUp' : event.key === 'ArrowLeft';
+        const forward = direction === 'vertical' ? event.key === 'ArrowDown' : event.key === 'ArrowRight';
+        if (!backward && !forward && event.key !== 'Home' && event.key !== 'End')
+            return;
+        event.preventDefault();
+        const step = event.shiftKey ? 0.1 : 0.02;
+        if (event.key === 'Home')
+            this.ratio = 0;
+        else if (event.key === 'End')
+            this.ratio = 1;
+        else
+            this.ratio = this.ratio + (forward ? step : -step);
+        this._emitRatioChange();
+    };
+    _onPointerUp = (event) => {
+        if (!this._dragging || event.pointerId !== this._pointerId)
+            return;
+        this._dragging = false;
+        this._pointerId = -1;
+        this._bar.classList.remove('dragging');
+        window.removeEventListener('pointermove', this._onPointerMove);
+        window.removeEventListener('pointerup', this._onPointerUp);
+        window.removeEventListener('pointercancel', this._onPointerUp);
+    };
+    _applyLayout() {
+        this._layoutFrame = 0;
+        const size = this._getLayoutSize();
+        const available = this._getAvailablePaneSize(size);
+        const firstSize = available > 0 ? this._snapFirstSize(this.ratio * available, available) : 0;
+        const secondSize = Math.max(0, available - firstSize);
+        const barSize = `${this._getLayoutBarSize()}px`;
+        if (this.direction === 'vertical') {
+            this.style.gridTemplateColumns = 'minmax(0, 1fr)';
+            this.style.gridTemplateRows = `${firstSize}px ${barSize} minmax(0, ${secondSize}px)`;
+        }
+        else {
+            this.style.gridTemplateRows = 'minmax(0, 1fr)';
+            this.style.gridTemplateColumns = `${firstSize}px ${barSize} minmax(0, ${secondSize}px)`;
+        }
+        this._syncAria();
+    }
+    _clampRatio(value) {
+        if (!Number.isFinite(value))
+            return 0.5;
+        return Math.max(0, Math.min(1, value));
+    }
+    _scheduleLayout() {
+        if (!this.isConnected)
+            return;
+        if (this._layoutFrame)
+            return;
+        this._layoutFrame = requestAnimationFrame(() => this._applyLayout());
+    }
+    _syncAria() {
+        const direction = this.direction;
+        this._bar.setAttribute('aria-orientation', direction === 'vertical' ? 'horizontal' : 'vertical');
+        this._bar.setAttribute('aria-valuenow', String(Math.round(this.ratio * 100)));
+    }
+    _emitRatioChange() {
+        this._syncAria();
+        this.dispatchEvent(new CustomEvent('ratio-change', {
+            detail: { ratio: this.ratio, direction: this.direction },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _getAvailablePaneSize(size) {
+        return Math.max(0, size - this._getLayoutBarSize());
+    }
+    _getLayoutSize() {
+        return this.direction === 'vertical' ? this.clientHeight : this.clientWidth;
+    }
+    _getLayoutBarSize() {
+        return Math.max(1, Math.round(this.barSize));
+    }
+    _snapFirstSize(value, available) {
+        if (available <= 0)
+            return 0;
+        const clamped = this._clampFirstSize(value, available);
+        const minFirst = Math.ceil(Math.min(this.minFirst, available));
+        const minSecond = Math.ceil(Math.min(this.minSecond, Math.max(0, available - minFirst)));
+        const maxFirst = Math.max(minFirst, available - minSecond);
+        return Math.max(minFirst, Math.min(maxFirst, Math.round(clamped)));
+    }
+    _clampFirstSize(value, available) {
+        if (available <= 0)
+            return 0;
+        const minFirst = Math.min(this.minFirst, available);
+        const minSecond = Math.min(this.minSecond, Math.max(0, available - minFirst));
+        const maxFirst = Math.max(minFirst, available - minSecond);
+        return Math.max(minFirst, Math.min(maxFirst, value));
+    }
+}
+export function defineSplitComponents() {
+    if (!customElements.get('ge-split')) {
+        customElements.define('ge-split', GESplit);
+    }
+}
+//# sourceMappingURL=split.js.map

package/dist/tabs.d.ts

@@ -0,0 +1,28 @@
+export interface GETabOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface GETabChangeDetail {
+    value: string;
+    option: GETabOption | null;
+}
+export declare class GETabs extends HTMLElement {
+    private readonly _style;
+    private readonly _tabs;
+    private readonly _panels;
+    private _options;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get options(): GETabOption[];
+    set options(value: GETabOption[]);
+    get value(): string;
+    set value(value: string);
+    private _syncFromAttributes;
+    private _readOptionsAttribute;
+    private _render;
+    private _select;
+}
+export declare function defineTabsComponents(): void;