@haiyue/ui 0.1.0

package/src/radio.ts

@@ -0,0 +1,216 @@
+export interface GERadioChangeDetail {
+  checked: boolean;
+  value: string;
+  name: string;
+}
+
+export class GERadio extends HTMLElement {
+  private readonly _input = document.createElement('input');
+  private readonly _marker = document.createElement('span');
+  private readonly _label = document.createElement('span');
+  private readonly _slot = document.createElement('slot');
+
+  static get observedAttributes(): string[] {
+    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(): void {
+    this._input.addEventListener('change', this._onChange);
+    this._sync();
+    if (this.checked) this._uncheckNamedPeers();
+  }
+
+  disconnectedCallback(): void {
+    this._input.removeEventListener('change', this._onChange);
+  }
+
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {
+    this._sync();
+    if (name === 'checked' && oldValue !== newValue && newValue !== null) {
+      this._uncheckNamedPeers();
+    }
+  }
+
+  get checked(): boolean {
+    return this.hasAttribute('checked');
+  }
+
+  set checked(value: boolean) {
+    if (value) this.setAttribute('checked', '');
+    else this.removeAttribute('checked');
+  }
+
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) this.setAttribute('disabled', '');
+    else this.removeAttribute('disabled');
+  }
+
+  get label(): string {
+    return this.getAttribute('label') ?? '';
+  }
+
+  set label(value: string) {
+    if (value) this.setAttribute('label', value);
+    else this.removeAttribute('label');
+  }
+
+  get value(): string {
+    return this.getAttribute('value') ?? 'on';
+  }
+
+  set value(value: string) {
+    this.setAttribute('value', value);
+  }
+
+  get name(): string {
+    return this.getAttribute('name') ?? '';
+  }
+
+  set name(value: string) {
+    if (value) this.setAttribute('name', value);
+    else this.removeAttribute('name');
+  }
+
+  private _sync(): void {
+    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');
+  }
+
+  private _onChange = (): void => {
+    if (!this._input.checked) return;
+    this.setAttribute('checked', '');
+    this._uncheckNamedPeers();
+    this.dispatchEvent(new CustomEvent<GERadioChangeDetail>('checked-change', {
+      detail: { checked: true, value: this.value, name: this.name },
+      bubbles: true,
+      composed: true,
+    }));
+    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+  };
+
+  private _uncheckNamedPeers(): void {
+    if (!this.name) return;
+    const root = this.getRootNode();
+    const peers = root instanceof Document || root instanceof ShadowRoot
+      ? root.querySelectorAll<GERadio>(`ge-radio[name="${cssEscape(this.name)}"]`)
+      : [];
+    for (const peer of peers) {
+      if (peer === this || peer.disabled) continue;
+      peer.removeAttribute('checked');
+    }
+  }
+}
+
+function cssEscape(value: string): string {
+  if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') return CSS.escape(value);
+  return value.replace(/["\\]/g, '\\$&');
+}
+
+export function defineRadioComponents(): void {
+  if (!customElements.get('ge-radio')) {
+    customElements.define('ge-radio', GERadio);
+  }
+}

package/src/select.ts

@@ -0,0 +1,271 @@
+export interface GESelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface GESelectChangeDetail {
+  value: string;
+  option: GESelectOption | null;
+}
+
+export class GESelect extends HTMLElement {
+  private readonly _wrap = document.createElement('div');
+  private readonly _search = document.createElement('input');
+  private readonly _select = document.createElement('select');
+  private _options: GESelectOption[] = [];
+  private _filterText = '';
+
+  static get observedAttributes(): string[] {
+    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(): void {
+    this._select.addEventListener('change', this._onChange);
+    this._search.addEventListener('input', this._onSearchInput);
+    this._syncFromAttributes();
+    this._render();
+  }
+
+  disconnectedCallback(): void {
+    this._select.removeEventListener('change', this._onChange);
+    this._search.removeEventListener('input', this._onSearchInput);
+    this._filterText = '';
+    this._search.value = '';
+  }
+
+  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {
+    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(): GESelectOption[] {
+    return this._options;
+  }
+
+  set options(value: GESelectOption[]) {
+    this._options = Array.isArray(value) ? value : [];
+    this._render();
+  }
+
+  get value(): string {
+    return this.getAttribute('value') ?? '';
+  }
+
+  set value(value: string) {
+    this.setAttribute('value', value);
+    this._select.value = value;
+  }
+
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) this.setAttribute('disabled', '');
+    else this.removeAttribute('disabled');
+  }
+
+  get searchable(): boolean {
+    return this.hasAttribute('searchable');
+  }
+
+  set searchable(value: boolean) {
+    if (value) this.setAttribute('searchable', '');
+    else this.removeAttribute('searchable');
+  }
+
+  get label(): string {
+    return this.getAttribute('label') ?? '';
+  }
+
+  set label(value: string) {
+    if (value) this.setAttribute('label', value);
+    else this.removeAttribute('label');
+  }
+
+  private _syncFromAttributes(): void {
+    // 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();
+  }
+
+  private _readOptionsAttribute(): void {
+    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);
+    }
+  }
+
+  private _render(): void {
+    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();
+  }
+
+  private _syncDisabled(): void {
+    this._select.disabled = this.disabled;
+    this._search.disabled = this.disabled;
+  }
+
+  private _syncAriaLabel(): void {
+    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');
+    }
+  }
+
+  private _matchesFilter(option: GESelectOption, filter: string): boolean {
+    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;
+  }
+
+  private _onChange = (): void => {
+    this.value = this._select.value;
+    const option = this._options.find(item => item.value === this.value) ?? null;
+    this.dispatchEvent(new CustomEvent<GESelectChangeDetail>('value-change', {
+      detail: { value: this.value, option },
+      bubbles: true,
+      composed: true,
+    }));
+  };
+
+  private _onSearchInput = (): void => {
+    this._filterText = this._search.value;
+    this._render();
+  };
+}
+
+export function defineSelectComponents(): void {
+  if (!customElements.get('ge-select')) {
+    customElements.define('ge-select', GESelect);
+  }
+}