@haiyue/ui 0.1.0

package/dist/input.js

@@ -0,0 +1,131 @@
+export class GEInput extends HTMLElement {
+    _input = document.createElement('input');
+    static get observedAttributes() {
+        return [
+            'type', 'value', 'min', 'max', 'step', 'placeholder', 'disabled', 'readonly',
+            'required', 'name', 'autocomplete', 'aria-label', 'title',
+        ];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: block;
+        width: 100%;
+        min-width: 0;
+      }
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        height: var(--ge-input-height, 28px);
+        min-width: 0;
+        padding: 0 8px;
+        border: 1px solid var(--ge-border-color, #303746);
+        border-radius: 4px;
+        outline: none;
+        color: var(--ge-text-color, #d8e2f2);
+        background: var(--ge-input-bg-color, var(--ge-surface-color, #121822));
+        font: var(--ge-input-font, 12px system-ui, sans-serif);
+        color-scheme: dark;
+      }
+      input:hover:not(:disabled):not(:read-only) {
+        border-color: var(--ge-hover-border-color, #435268);
+      }
+      input: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:invalid {
+        border-color: var(--ge-invalid-border-color, #b64f62);
+      }
+      input:disabled,
+      input:read-only {
+        opacity: 0.55;
+        cursor: default;
+      }
+      input[type="color"] {
+        padding: 3px;
+        cursor: pointer;
+      }
+      input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+      input[type="color"]::-webkit-color-swatch {
+        border: 0;
+        border-radius: 2px;
+      }
+    `;
+        root.append(style, this._input);
+    }
+    connectedCallback() {
+        this._input.addEventListener('input', this._onInput);
+        this._input.addEventListener('change', this._onChange);
+        this._sync();
+    }
+    disconnectedCallback() {
+        this._input.removeEventListener('input', this._onInput);
+        this._input.removeEventListener('change', this._onChange);
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    get type() { return normalizedType(this.getAttribute('type')); }
+    set type(value) { this.setAttribute('type', normalizedType(value)); }
+    get value() { return this.getAttribute('value') ?? ''; }
+    set value(value) {
+        this.setAttribute('value', String(value));
+        this._input.value = String(value);
+    }
+    get valueAsNumber() {
+        return this._input.valueAsNumber;
+    }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', value); }
+    get readOnly() { return this.hasAttribute('readonly'); }
+    set readOnly(value) { this.toggleAttribute('readonly', value); }
+    get valid() { return this._input.validity.valid; }
+    focus(options) { this._input.focus(options); }
+    select() { this._input.select(); }
+    _sync() {
+        const type = this.type;
+        if (this._input.type !== type)
+            this._input.type = type;
+        const value = this.value;
+        if (this._input.value !== value)
+            this._input.value = type === 'color' && !/^#[0-9a-f]{6}$/iu.test(value)
+                ? '#000000'
+                : value;
+        for (const name of ['min', 'max', 'step', 'placeholder', 'name', 'autocomplete', 'aria-label', 'title']) {
+            const attribute = this.getAttribute(name);
+            if (attribute === null)
+                this._input.removeAttribute(name);
+            else
+                this._input.setAttribute(name, attribute);
+        }
+        this._input.disabled = this.disabled;
+        this._input.readOnly = this.readOnly;
+        this._input.required = this.hasAttribute('required');
+    }
+    _onInput = () => {
+        this.setAttribute('value', this._input.value);
+    };
+    _onChange = () => {
+        this.setAttribute('value', this._input.value);
+        const number = this.type === 'number' && Number.isFinite(this._input.valueAsNumber)
+            ? this._input.valueAsNumber
+            : null;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this._input.value, valueAsNumber: number, valid: this.valid },
+            bubbles: true,
+            composed: true,
+        }));
+    };
+}
+export function defineInputComponents() {
+    if (!customElements.get('ge-input'))
+        customElements.define('ge-input', GEInput);
+}
+function normalizedType(value) {
+    return value === 'number' || value === 'color' ? value : 'text';
+}
+//# sourceMappingURL=input.js.map

package/dist/menu-shared.d.ts

@@ -0,0 +1,14 @@
+export interface GEMenuItemLike {
+    label?: string;
+    value?: string;
+    disabled?: boolean;
+    separator?: boolean;
+}
+export interface GEMenuButtonOptions {
+    index?: number;
+    role?: string;
+    tabIndex?: number;
+}
+export declare const GE_MENU_ITEM_STYLES = "\n      button {\n        box-sizing: border-box;\n        width: 100%;\n        height: 26px;\n        display: flex;\n        align-items: center;\n        padding: 0 8px;\n        border: 0;\n        border-radius: 3px;\n        color: var(--ge-text-color, #d8e2f2);\n        background: transparent;\n        font: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      button:hover,\n      button:focus,\n      button.active {\n        background: var(--ge-menu-item-hover-bg-color, var(--ge-accent-strong-color, #255a91));\n        outline: none;\n      }\n      button:disabled {\n        color: var(--ge-muted-color, #66758b);\n        cursor: default;\n      }\n      button:disabled:hover {\n        background: transparent;\n      }\n      .separator {\n        height: 1px;\n        margin: 4px 2px;\n        background: var(--ge-border-color, #303746);\n      }\n";
+export declare function createMenuSeparator(): HTMLDivElement;
+export declare function createMenuItemButton(item: GEMenuItemLike, options?: GEMenuButtonOptions): HTMLButtonElement;

package/dist/menu-shared.js

@@ -0,0 +1,54 @@
+export const GE_MENU_ITEM_STYLES = `
+      button {
+        box-sizing: border-box;
+        width: 100%;
+        height: 26px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        border: 0;
+        border-radius: 3px;
+        color: var(--ge-text-color, #d8e2f2);
+        background: transparent;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+      }
+      button:hover,
+      button:focus,
+      button.active {
+        background: var(--ge-menu-item-hover-bg-color, var(--ge-accent-strong-color, #255a91));
+        outline: none;
+      }
+      button:disabled {
+        color: var(--ge-muted-color, #66758b);
+        cursor: default;
+      }
+      button:disabled:hover {
+        background: transparent;
+      }
+      .separator {
+        height: 1px;
+        margin: 4px 2px;
+        background: var(--ge-border-color, #303746);
+      }
+`;
+export function createMenuSeparator() {
+    const separator = document.createElement('div');
+    separator.className = 'separator';
+    return separator;
+}
+export function createMenuItemButton(item, options = {}) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = item.label ?? item.value ?? '';
+    button.disabled = Boolean(item.disabled);
+    if (options.index !== undefined)
+        button.dataset.index = String(options.index);
+    if (options.role)
+        button.setAttribute('role', options.role);
+    if (options.tabIndex !== undefined)
+        button.tabIndex = options.tabIndex;
+    return button;
+}
+//# sourceMappingURL=menu-shared.js.map

package/dist/radio.d.ts

@@ -0,0 +1,30 @@
+export interface GERadioChangeDetail {
+    checked: boolean;
+    value: string;
+    name: string;
+}
+export declare class GERadio extends HTMLElement {
+    private readonly _input;
+    private readonly _marker;
+    private readonly _label;
+    private readonly _slot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
+    get name(): string;
+    set name(value: string);
+    private _sync;
+    private _onChange;
+    private _uncheckNamedPeers;
+}
+export declare function defineRadioComponents(): void;

package/dist/radio.js

@@ -0,0 +1,205 @@
+export class GERadio extends HTMLElement {
+    _input = document.createElement('input');
+    _marker = document.createElement('span');
+    _label = document.createElement('span');
+    _slot = document.createElement('slot');
+    static get observedAttributes() {
+        return ['checked', 'disabled', 'label', 'value', 'name', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: inline-block;
+        width: max-content;
+        min-width: 0;
+        color: var(--ge-radio-text-color, var(--ge-text-color, #d8e2f2));
+        font: 12px system-ui, sans-serif;
+      }
+      :host([disabled]) {
+        opacity: 0.55;
+        cursor: default;
+      }
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-width: 0;
+        cursor: pointer;
+        user-select: none;
+      }
+      :host([disabled]) label {
+        cursor: default;
+      }
+      input {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        margin: -1px;
+        padding: 0;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0;
+      }
+      .marker {
+        box-sizing: border-box;
+        width: 14px;
+        height: 14px;
+        flex: 0 0 14px;
+        display: inline-grid;
+        place-items: center;
+        border: 1px solid var(--ge-radio-border-color, var(--ge-border-color, #303746));
+        border-radius: 50%;
+        background: var(--ge-radio-bg-color, var(--ge-input-bg-color, #121822));
+        color: var(--ge-radio-dot-color, var(--ge-selected-text-color, #ffffff));
+        transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+      }
+      input:focus-visible + .marker {
+        border-color: var(--ge-focus-border-color, #3d6fa8);
+        box-shadow: 0 0 0 2px var(--ge-focus-ring-color, rgba(61, 111, 168, 0.28));
+      }
+      input:checked + .marker {
+        border-color: var(--ge-radio-checked-border-color, var(--ge-accent-color, #3d6fa8));
+        background: var(--ge-radio-checked-bg-color, var(--ge-accent-strong-color, #255a91));
+      }
+      .marker::after {
+        content: "";
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+        transform: scale(0);
+        transition: transform 0.12s ease;
+      }
+      input:checked + .marker::after {
+        transform: scale(1);
+      }
+      .label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    `;
+        const label = document.createElement('label');
+        this._input.type = 'radio';
+        this._marker.className = 'marker';
+        this._marker.setAttribute('aria-hidden', 'true');
+        this._label.className = 'label';
+        this._label.append(this._slot);
+        label.append(this._input, this._marker, this._label);
+        root.append(style, label);
+    }
+    connectedCallback() {
+        this._input.addEventListener('change', this._onChange);
+        this._sync();
+        if (this.checked)
+            this._uncheckNamedPeers();
+    }
+    disconnectedCallback() {
+        this._input.removeEventListener('change', this._onChange);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        this._sync();
+        if (name === 'checked' && oldValue !== newValue && newValue !== null) {
+            this._uncheckNamedPeers();
+        }
+    }
+    get checked() {
+        return this.hasAttribute('checked');
+    }
+    set checked(value) {
+        if (value)
+            this.setAttribute('checked', '');
+        else
+            this.removeAttribute('checked');
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        if (value)
+            this.setAttribute('disabled', '');
+        else
+            this.removeAttribute('disabled');
+    }
+    get label() {
+        return this.getAttribute('label') ?? '';
+    }
+    set label(value) {
+        if (value)
+            this.setAttribute('label', value);
+        else
+            this.removeAttribute('label');
+    }
+    get value() {
+        return this.getAttribute('value') ?? 'on';
+    }
+    set value(value) {
+        this.setAttribute('value', value);
+    }
+    get name() {
+        return this.getAttribute('name') ?? '';
+    }
+    set name(value) {
+        if (value)
+            this.setAttribute('name', value);
+        else
+            this.removeAttribute('name');
+    }
+    _sync() {
+        this._input.checked = this.checked;
+        this._input.disabled = this.disabled;
+        this._input.value = this.value;
+        this._input.name = this.name;
+        const label = this.getAttribute('label');
+        if (label !== null)
+            this._slot.textContent = label;
+        else if (this._slot.textContent !== '')
+            this._slot.textContent = '';
+        const ariaLabel = this.getAttribute('aria-label') ?? label ?? '';
+        if (ariaLabel)
+            this._input.setAttribute('aria-label', ariaLabel);
+        else
+            this._input.removeAttribute('aria-label');
+    }
+    _onChange = () => {
+        if (!this._input.checked)
+            return;
+        this.setAttribute('checked', '');
+        this._uncheckNamedPeers();
+        this.dispatchEvent(new CustomEvent('checked-change', {
+            detail: { checked: true, value: this.value, name: this.name },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    };
+    _uncheckNamedPeers() {
+        if (!this.name)
+            return;
+        const root = this.getRootNode();
+        const peers = root instanceof Document || root instanceof ShadowRoot
+            ? root.querySelectorAll(`ge-radio[name="${cssEscape(this.name)}"]`)
+            : [];
+        for (const peer of peers) {
+            if (peer === this || peer.disabled)
+                continue;
+            peer.removeAttribute('checked');
+        }
+    }
+}
+function cssEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function')
+        return CSS.escape(value);
+    return value.replace(/["\\]/g, '\\$&');
+}
+export function defineRadioComponents() {
+    if (!customElements.get('ge-radio')) {
+        customElements.define('ge-radio', GERadio);
+    }
+}
+//# sourceMappingURL=radio.js.map

package/dist/select.d.ts

@@ -0,0 +1,40 @@
+export interface GESelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface GESelectChangeDetail {
+    value: string;
+    option: GESelectOption | null;
+}
+export declare class GESelect extends HTMLElement {
+    private readonly _wrap;
+    private readonly _search;
+    private readonly _select;
+    private _options;
+    private _filterText;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+    get options(): GESelectOption[];
+    set options(value: GESelectOption[]);
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get searchable(): boolean;
+    set searchable(value: boolean);
+    get label(): string;
+    set label(value: string);
+    private _syncFromAttributes;
+    private _readOptionsAttribute;
+    private _render;
+    private _syncDisabled;
+    private _syncAriaLabel;
+    private _matchesFilter;
+    private _onChange;
+    private _onSearchInput;
+}
+export declare function defineSelectComponents(): void;