@haiyue/ui 0.1.1 → 0.2.1

package/dist/input.js

@@ -1,9 +1,18 @@
 export class HYInput extends HTMLElement {
+    _control = document.createElement('div');
+    _prefix = document.createElement('span');
+    _prefixSlot = document.createElement('slot');
+    _prefixText = document.createElement('span');
     _input = document.createElement('input');
+    _suffix = document.createElement('span');
+    _suffixSlot = document.createElement('slot');
+    _suffixText = document.createElement('span');
+    _searchButton = document.createElement('button');
     static get observedAttributes() {
         return [
             'type', 'value', 'min', 'max', 'step', 'placeholder', 'disabled', 'readonly',
-            'required', 'name', 'autocomplete', 'aria-label', 'title',
+            'required', 'name', 'autocomplete', 'aria-label', 'title', 'prefix', 'suffix',
+            'search-label',
         ];
     }
     constructor() {
@@ -11,74 +20,132 @@ export class HYInput extends HTMLElement {
         const root = this.attachShadow({ mode: 'open' });
         const style = document.createElement('style');
         style.textContent = `
-      :host {
-        display: block;
+      :host { display: block; width: 100%; min-width: 0; }
+      .control {
+        display: flex;
         width: 100%;
         min-width: 0;
-      }
-      input {
-        box-sizing: border-box;
-        width: 100%;
         height: var(--hy-input-height, 28px);
-        min-width: 0;
-        padding: 0 8px;
+        box-sizing: border-box;
+        align-items: stretch;
+        overflow: hidden;
         border: 1px solid var(--hy-border-color, #303746);
-        border-radius: 4px;
-        outline: none;
+        border-radius: var(--hy-input-radius, 4px);
         color: var(--hy-text-color, #d8e2f2);
         background: var(--hy-input-bg-color, var(--hy-surface-color, #121822));
+        transition: border-color 120ms ease, box-shadow 120ms ease;
+      }
+      .control:hover:not(.disabled):not(.readonly) { border-color: var(--hy-hover-border-color, #435268); }
+      .control:focus-within { border-color: var(--hy-focus-border-color, #3d6fa8); box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(61, 111, 168, 0.24)); }
+      .control.invalid { border-color: var(--hy-invalid-border-color, #b64f62); }
+      .control.disabled, .control.readonly { opacity: 0.55; }
+      input {
+        flex: 1 1 auto;
+        width: 0;
+        min-width: 0;
+        box-sizing: border-box;
+        padding: 0 var(--hy-input-padding-inline, 8px);
+        border: 0;
+        outline: none;
+        color: inherit;
+        background: transparent;
         font: var(--hy-input-font, 12px system-ui, sans-serif);
         color-scheme: inherit;
       }
-      input:hover:not(:disabled):not(:read-only) {
-        border-color: var(--hy-hover-border-color, #435268);
-      }
-      input:focus {
-        border-color: var(--hy-focus-border-color, #3d6fa8);
-        box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(61, 111, 168, 0.24));
-      }
-      input:invalid {
-        border-color: var(--hy-invalid-border-color, #b64f62);
-      }
-      input:disabled,
-      input:read-only {
-        opacity: 0.55;
-        cursor: default;
-      }
-      input[type="color"] {
-        padding: 3px;
-        cursor: pointer;
-      }
+      input:disabled, input:read-only { cursor: default; }
+      input[type="color"] { min-width: 42px; padding: 3px; cursor: pointer; }
       input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
-      input[type="color"]::-webkit-color-swatch {
+      input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }
+      input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
+      .affix {
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+        max-width: 42%;
+        padding-inline: var(--hy-input-affix-padding, 8px);
+        overflow: hidden;
+        color: var(--hy-input-affix-color, var(--hy-muted-text-color, #8290a3));
+        font: var(--hy-input-affix-font, 12px system-ui, sans-serif);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .prefix { padding-right: 0; }
+      .suffix { padding-left: 0; }
+      .affix[hidden], .search-button[hidden] { display: none; }
+      .search-button {
+        display: grid;
+        flex: 0 0 var(--hy-input-search-button-width, 32px);
+        width: var(--hy-input-search-button-width, 32px);
+        padding: 0;
+        place-items: center;
         border: 0;
-        border-radius: 2px;
+        border-left: 1px solid var(--hy-border-color, #303746);
+        color: var(--hy-input-search-color, var(--hy-accent-color, #79a8ff));
+        background: var(--hy-input-search-bg, color-mix(in srgb, var(--hy-accent-color, #79a8ff) 11%, transparent));
+        cursor: pointer;
+        font: 16px/1 system-ui, sans-serif;
       }
+      .search-button:hover:not(:disabled) { background: var(--hy-input-search-hover-bg, color-mix(in srgb, var(--hy-accent-color, #79a8ff) 20%, transparent)); }
+      .search-button:focus-visible { outline: 2px solid var(--hy-focus-border-color, #3d6fa8); outline-offset: -3px; }
+      .search-button:disabled { cursor: default; }
+      @media (prefers-reduced-motion: reduce) { .control { transition: none; } }
     `;
-        root.append(style, this._input);
+        this._control.className = 'control';
+        this._control.part.add('control');
+        this._prefix.className = 'affix prefix';
+        this._prefix.part.add('prefix');
+        this._prefixSlot.name = 'prefix';
+        this._prefixText.className = 'affix-text';
+        this._prefix.append(this._prefixSlot, this._prefixText);
+        this._input.part.add('input');
+        this._suffix.className = 'affix suffix';
+        this._suffix.part.add('suffix');
+        this._suffixSlot.name = 'suffix';
+        this._suffixText.className = 'affix-text';
+        this._suffix.append(this._suffixSlot, this._suffixText);
+        this._searchButton.className = 'search-button';
+        this._searchButton.type = 'button';
+        this._searchButton.part.add('search-button');
+        this._searchButton.textContent = '⌕';
+        this._control.append(this._prefix, this._input, this._suffix, this._searchButton);
+        root.append(style, this._control);
     }
     connectedCallback() {
         this._input.addEventListener('input', this._onInput);
         this._input.addEventListener('change', this._onChange);
+        this._input.addEventListener('keydown', this._onKeydown);
+        this._searchButton.addEventListener('click', this._onSearchClick);
+        this._prefixSlot.addEventListener('slotchange', this._onSlotChange);
+        this._suffixSlot.addEventListener('slotchange', this._onSlotChange);
         this._sync();
     }
     disconnectedCallback() {
         this._input.removeEventListener('input', this._onInput);
         this._input.removeEventListener('change', this._onChange);
+        this._input.removeEventListener('keydown', this._onKeydown);
+        this._searchButton.removeEventListener('click', this._onSearchClick);
+        this._prefixSlot.removeEventListener('slotchange', this._onSlotChange);
+        this._suffixSlot.removeEventListener('slotchange', this._onSlotChange);
     }
-    attributeChangedCallback() {
-        this._sync();
-    }
+    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;
+        const text = String(value);
+        if (this.getAttribute('value') !== text)
+            this.setAttribute('value', text);
+        if (this._input.value !== text)
+            this._input.value = text;
+        this._syncValidity();
     }
+    get valueAsNumber() { return this._input.valueAsNumber; }
+    get prefix() { return this.getAttribute('prefix') ?? ''; }
+    set prefix(value) { this._setOptionalAttribute('prefix', value); }
+    get suffix() { return this.getAttribute('suffix') ?? ''; }
+    set suffix(value) { this._setOptionalAttribute('suffix', value); }
+    get searchLabel() { return this.getAttribute('search-label')?.trim() || 'Search'; }
+    set searchLabel(value) { this._setOptionalAttribute('search-label', value); }
     get disabled() { return this.hasAttribute('disabled'); }
     set disabled(value) { this.toggleAttribute('disabled', value); }
     get readOnly() { return this.hasAttribute('readonly'); }
@@ -86,46 +153,91 @@ export class HYInput extends HTMLElement {
     get valid() { return this._input.validity.valid; }
     focus(options) { this._input.focus(options); }
     select() { this._input.select(); }
+    search() { return this._emitSearch('api'); }
     _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;
+            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
+            if (attribute === null) {
+                if (this._input.hasAttribute(name))
+                    this._input.removeAttribute(name);
+            }
+            else if (this._input.getAttribute(name) !== attribute)
                 this._input.setAttribute(name, attribute);
         }
-        this._input.disabled = this.disabled;
-        this._input.readOnly = this.readOnly;
-        this._input.required = this.hasAttribute('required');
+        // Reassigning even an unchanged placeholder or state can split Chromium's undo group.
+        if (this._input.disabled !== this.disabled)
+            this._input.disabled = this.disabled;
+        if (this._input.readOnly !== this.readOnly)
+            this._input.readOnly = this.readOnly;
+        if (this._input.required !== this.hasAttribute('required'))
+            this._input.required = this.hasAttribute('required');
+        this._searchButton.hidden = type !== 'search';
+        this._searchButton.disabled = this.disabled;
+        this._searchButton.setAttribute('aria-label', this.searchLabel);
+        this._control.classList.toggle('disabled', this.disabled);
+        this._control.classList.toggle('readonly', this.readOnly);
+        this._syncAffixes();
+        this._syncValidity();
     }
+    _syncAffixes() {
+        this._syncAffix(this._prefix, this._prefixSlot, this._prefixText, this.prefix);
+        this._syncAffix(this._suffix, this._suffixSlot, this._suffixText, this.suffix);
+    }
+    _syncAffix(container, slot, fallback, text) {
+        const hasAssignedContent = slot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+        fallback.textContent = hasAssignedContent ? '' : text;
+        fallback.hidden = hasAssignedContent || !text;
+        container.hidden = !hasAssignedContent && !text;
+    }
+    _syncValidity() { this._control.classList.toggle('invalid', !this.valid); }
+    _setOptionalAttribute(name, value) {
+        const normalized = String(value ?? '').trim();
+        if (normalized)
+            this.setAttribute(name, normalized);
+        else
+            this.removeAttribute(name);
+    }
+    _onSlotChange = () => { this._syncAffixes(); };
     _onInput = () => {
         this.setAttribute('value', this._input.value);
+        this._syncValidity();
     };
     _onChange = () => {
         this.setAttribute('value', this._input.value);
-        const number = this.type === 'number' && Number.isFinite(this._input.valueAsNumber)
-            ? this._input.valueAsNumber
-            : null;
+        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,
         }));
     };
+    _onKeydown = (event) => {
+        if (event.key === 'Enter' && this.type === 'search' && !event.isComposing)
+            this._emitSearch('enter');
+    };
+    _onSearchClick = () => { this._emitSearch('button'); };
+    _emitSearch(source) {
+        if (this.disabled || this.type !== 'search')
+            return false;
+        return this.dispatchEvent(new CustomEvent('search', {
+            detail: { value: this._input.value, valid: this.valid, source },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        }));
+    }
 }
 export function defineInputComponents() {
     if (!customElements.get('hy-input'))
         customElements.define('hy-input', HYInput);
 }
 function normalizedType(value) {
-    return value === 'number' || value === 'color' ? value : 'text';
+    return value === 'number' || value === 'color' || value === 'search' || value === 'password' ? value : 'text';
 }
 //# sourceMappingURL=input.js.map

package/dist/portable/index.d.ts

@@ -0,0 +1,4 @@
+export { HYPage } from './page.js';
+export type { HYPageOptions, HYPageStatus, HYBinding } from './page.js';
+export { HY_THEME_TOKENS, hyNativeTheme, hyThemeVariables } from './theme.js';
+export type { HYThemeVariables } from './theme.js';

package/dist/portable/index.js

@@ -0,0 +1,3 @@
+export { HYPage } from './page.js';
+export { HY_THEME_TOKENS, hyNativeTheme, hyThemeVariables } from './theme.js';
+//# sourceMappingURL=index.js.map

package/dist/portable/page.d.ts

@@ -0,0 +1,38 @@
+import type { HYCapabilities, HYComponentKind, HYComponentProps, HYDispose, HYNode, HYReason, HYRenderer, HYStore, HYUIEvent } from '../core/types.js';
+export type HYPageStatus = 'new' | 'mounted' | 'suspended' | 'faulted' | 'disposed';
+export interface HYPageOptions {
+    readonly onEvent?: (event: HYUIEvent) => void;
+    /** Scoped key from hyKey(). If unavailable the root receives focus. */
+    readonly defaultFocus?: string;
+}
+export type HYBinding<S> = {
+    [K in HYComponentKind]: {
+        readonly key: string;
+        readonly kind: K;
+        readonly select: (state: Readonly<S>) => Readonly<HYComponentProps[K]>;
+        readonly equal?: (a: Readonly<HYComponentProps[K]>, b: Readonly<HYComponentProps[K]>) => boolean;
+    };
+}[HYComponentKind];
+/** A synchronous, bounded page reconciler. It owns bindings/rendering, never the application store. */
+export declare class HYPage {
+    #private;
+    private readonly options;
+    constructor(renderer: HYRenderer, options?: HYPageOptions);
+    get status(): HYPageStatus;
+    get revision(): number;
+    get capabilities(): HYCapabilities;
+    mount(root: HYNode): void;
+    render(root: HYNode): void;
+    setProps<K extends HYComponentKind>(key: string, kind: K, props: HYComponentProps[K]): void;
+    transaction(run: () => void): void;
+    /** One store subscription: a store transaction produces one final page batch across all bindings. */
+    bind<S, A>(store: HYStore<S, A>, bindings: readonly HYBinding<S>[]): HYDispose;
+    focus(key: string): boolean;
+    /** The shell chooses this single system-back owner. A modal consumes even a non-dismissible back. */
+    back(reason?: HYReason): boolean;
+    suspend(): void;
+    resume(): void;
+    /** Replaces the failed backend, preserving latest requested data and existing store bindings. */
+    rebuild(renderer: HYRenderer): void;
+    dispose(): void;
+}