@haiyue/ui 0.1.0 → 0.1.2

package/src/dropdown.ts

@@ -1,249 +0,0 @@
-import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
-
-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 class GEDropdown extends HTMLElement {
-  private readonly _root: ShadowRoot;
-  private readonly _style = document.createElement('style');
-  private readonly _triggerSlot = document.createElement('slot');
-  private readonly _menu = document.createElement('div');
-  private _items: GEDropdownItem[] = [];
-  private _documentListenerAbort: AbortController | null = null;
-
-  static get observedAttributes(): string[] {
-    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(): void {
-    this._readItemsAttribute();
-    this._render();
-    this.addEventListener('click', this._onHostClick);
-    this._syncDocumentListeners();
-  }
-
-  disconnectedCallback(): void {
-    this.removeEventListener('click', this._onHostClick);
-    this._detachDocumentListeners();
-  }
-
-  attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void {
-    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(): GEDropdownItem[] {
-    return this._items;
-  }
-
-  set items(value: GEDropdownItem[]) {
-    this._items = Array.isArray(value) ? value : [];
-    this._render();
-  }
-
-  get open(): boolean {
-    return this.hasAttribute('open');
-  }
-
-  set open(value: boolean) {
-    if (value) this.setAttribute('open', '');
-    else this.removeAttribute('open');
-  }
-
-  get disabled(): boolean {
-    return this.hasAttribute('disabled');
-  }
-
-  set disabled(value: boolean) {
-    if (value) this.setAttribute('disabled', '');
-    else this.removeAttribute('disabled');
-  }
-
-  get placement(): GEDropdownPlacement {
-    return (this.getAttribute('placement') as GEDropdownPlacement | null) ?? 'bottom-start';
-  }
-
-  set placement(value: GEDropdownPlacement) {
-    this.setAttribute('placement', value);
-  }
-
-  show(): void {
-    if (this.disabled) return;
-    this.open = true;
-    this._syncPosition();
-  }
-
-  close(): void {
-    this.open = false;
-  }
-
-  toggle(): void {
-    if (this.open) this.close();
-    else this.show();
-  }
-
-  private _readItemsAttribute(): void {
-    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);
-    }
-  }
-
-  private _render(): void {
-    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<GEDropdownSelectDetail>('item-select', {
-          detail: { value: item.value, item },
-          bubbles: true,
-          composed: true,
-        }));
-        this.close();
-      });
-      this._menu.append(button);
-    }
-    if (this.open) this._syncPosition();
-  }
-
-  private _syncPosition(): void {
-    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`;
-  }
-
-  private _syncDocumentListeners(): void {
-    if (this.open && this.isConnected) this._attachDocumentListeners();
-    else this._detachDocumentListeners();
-  }
-
-  private _attachDocumentListeners(): void {
-    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 });
-  }
-
-  private _detachDocumentListeners(): void {
-    this._documentListenerAbort?.abort();
-    this._documentListenerAbort = null;
-  }
-
-  private _onHostClick = (event: MouseEvent): void => {
-    if (event.composedPath().includes(this._menu)) return;
-    this.toggle();
-  };
-
-  private _onDocumentPointerDown = (event: PointerEvent): void => {
-    if (!this.open) return;
-    const path = event.composedPath();
-    if (!path.includes(this)) this.close();
-  };
-
-  private _onDocumentKeyDown = (event: KeyboardEvent): void => {
-    if (event.key === 'Escape') this.close();
-  };
-}
-
-function getVisualViewportRect(): { left: number; top: number; width: number; height: number } {
-  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(): void {
-  if (!customElements.get('ge-dropdown')) {
-    customElements.define('ge-dropdown', GEDropdown);
-  }
-}

package/src/index.ts

@@ -1,192 +0,0 @@
-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 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 class GEButton extends HTMLElement {
-  private readonly _button = document.createElement('button');
-  private readonly _slot = document.createElement('slot');
-
-  static get observedAttributes(): string[] {
-    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(): void {
-    this._sync();
-  }
-
-  attributeChangedCallback(): void {
-    this._sync();
-  }
-
-  private _sync(): void {
-    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(): void {
-  if (!customElements.get('ge-button')) {
-    customElements.define('ge-button', GEButton);
-  }
-  defineTreeComponents();
-  defineSplitComponents();
-  defineSelectComponents();
-  defineTabsComponents();
-  defineContextMenuComponents();
-  defineDropdownComponents();
-  defineTooltipComponents();
-  defineCheckboxComponents();
-  defineRadioComponents();
-  defineDialogComponents();
-  defineInputComponents();
-}

package/src/input.ts

@@ -1,150 +0,0 @@
-export type GEInputType = 'text' | 'number' | 'color';
-
-export interface GEInputChangeDetail {
-  value: string;
-  valueAsNumber: number | null;
-  valid: boolean;
-}
-
-export class GEInput extends HTMLElement {
-  private readonly _input = document.createElement('input');
-
-  static get observedAttributes(): string[] {
-    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(): void {
-    this._input.addEventListener('input', this._onInput);
-    this._input.addEventListener('change', this._onChange);
-    this._sync();
-  }
-
-  disconnectedCallback(): void {
-    this._input.removeEventListener('input', this._onInput);
-    this._input.removeEventListener('change', this._onChange);
-  }
-
-  attributeChangedCallback(): void {
-    this._sync();
-  }
-
-  get type(): GEInputType { return normalizedType(this.getAttribute('type')); }
-  set type(value: GEInputType) { this.setAttribute('type', normalizedType(value)); }
-
-  get value(): string { return this.getAttribute('value') ?? ''; }
-  set value(value: string) {
-    this.setAttribute('value', String(value));
-    this._input.value = String(value);
-  }
-
-  get valueAsNumber(): number {
-    return this._input.valueAsNumber;
-  }
-
-  get disabled(): boolean { return this.hasAttribute('disabled'); }
-  set disabled(value: boolean) { this.toggleAttribute('disabled', value); }
-
-  get readOnly(): boolean { return this.hasAttribute('readonly'); }
-  set readOnly(value: boolean) { this.toggleAttribute('readonly', value); }
-
-  get valid(): boolean { return this._input.validity.valid; }
-
-  override focus(options?: FocusOptions): void { this._input.focus(options); }
-  select(): void { this._input.select(); }
-
-  private _sync(): void {
-    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');
-  }
-
-  private _onInput = (): void => {
-    this.setAttribute('value', this._input.value);
-  };
-
-  private _onChange = (): void => {
-    this.setAttribute('value', this._input.value);
-    const number = this.type === 'number' && Number.isFinite(this._input.valueAsNumber)
-      ? this._input.valueAsNumber
-      : null;
-    this.dispatchEvent(new CustomEvent<GEInputChangeDetail>('value-change', {
-      detail: { value: this._input.value, valueAsNumber: number, valid: this.valid },
-      bubbles: true,
-      composed: true,
-    }));
-  };
-}
-
-export function defineInputComponents(): void {
-  if (!customElements.get('ge-input')) customElements.define('ge-input', GEInput);
-}
-
-function normalizedType(value: string | null): GEInputType {
-  return value === 'number' || value === 'color' ? value : 'text';
-}

package/src/menu-shared.ts

@@ -1,65 +0,0 @@
-export interface GEMenuItemLike {
-  label?: string;
-  value?: string;
-  disabled?: boolean;
-  separator?: boolean;
-}
-
-export interface GEMenuButtonOptions {
-  index?: number;
-  role?: string;
-  tabIndex?: number;
-}
-
-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(): HTMLDivElement {
-  const separator = document.createElement('div');
-  separator.className = 'separator';
-  return separator;
-}
-
-export function createMenuItemButton(item: GEMenuItemLike, options: GEMenuButtonOptions = {}): HTMLButtonElement {
-  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;
-}