@haiyue/ui 0.1.2 → 0.2.1

package/dist/button-group.js

@@ -0,0 +1,72 @@
+export class HYButtonGroup extends HTMLElement {
+    _group = document.createElement('div');
+    static get observedAttributes() {
+        return ['orientation', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-flex; max-width: 100%; }
+      .group { display: inline-flex; align-items: stretch; max-width: 100%; }
+      :host([orientation="vertical"]) .group { flex-direction: column; }
+      ::slotted(hy-button) {
+        position: relative;
+        display: block;
+        --hy-button-radius: 0;
+      }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:not(:first-child)) { margin-left: -1px; }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:first-child) {
+        --hy-button-radius-top-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-left: var(--hy-button-group-radius, 4px);
+      }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:last-child) {
+        --hy-button-radius-top-right: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-right: var(--hy-button-group-radius, 4px);
+      }
+      :host([orientation="vertical"]) ::slotted(hy-button:not(:first-child)) { margin-top: -1px; }
+      :host([orientation="vertical"]) ::slotted(hy-button:first-child) {
+        --hy-button-radius-top-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-top-right: var(--hy-button-group-radius, 4px);
+      }
+      :host([orientation="vertical"]) ::slotted(hy-button:last-child) {
+        --hy-button-radius-bottom-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-right: var(--hy-button-group-radius, 4px);
+      }
+      ::slotted(hy-button:hover), ::slotted(hy-button:focus-within) { z-index: 1; }
+    `;
+        this._group.className = 'group';
+        this._group.part.add('group');
+        this._group.setAttribute('role', 'group');
+        this._group.append(document.createElement('slot'));
+        root.append(style, this._group);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('orientation'))
+            this.setAttribute('orientation', 'horizontal');
+        this._sync();
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    get orientation() {
+        return this.getAttribute('orientation') === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    set orientation(value) {
+        this.setAttribute('orientation', value === 'vertical' ? 'vertical' : 'horizontal');
+    }
+    _sync() {
+        const label = this.getAttribute('aria-label');
+        if (label)
+            this._group.setAttribute('aria-label', label);
+        else
+            this._group.removeAttribute('aria-label');
+    }
+}
+export function defineButtonGroupComponents() {
+    if (!customElements.get('hy-button-group')) {
+        customElements.define('hy-button-group', HYButtonGroup);
+    }
+}
+//# sourceMappingURL=button-group.js.map

package/dist/button.d.ts

@@ -1,10 +1,24 @@
+export type HYButtonIconPosition = 'start' | 'end';
 export declare class HYButton extends HTMLElement {
     private readonly _button;
-    private readonly _slot;
+    private readonly _content;
+    private readonly _contentSlot;
+    private readonly _icon;
+    private readonly _iconSlot;
+    private readonly _iconFallback;
+    private readonly _spinner;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    get loading(): boolean;
+    set loading(value: boolean);
+    get icon(): string;
+    set icon(value: string);
+    get iconPosition(): HYButtonIconPosition;
+    set iconPosition(value: HYButtonIconPosition);
+    click(): void;
     private _sync;
+    private _syncIcon;
 }
 export declare function defineButtonComponents(): void;

package/dist/button.js

@@ -1,20 +1,34 @@
 export class HYButton extends HTMLElement {
     _button = document.createElement('button');
-    _slot = document.createElement('slot');
+    _content = document.createElement('span');
+    _contentSlot = document.createElement('slot');
+    _icon = document.createElement('span');
+    _iconSlot = document.createElement('slot');
+    _iconFallback = document.createElement('span');
+    _spinner = document.createElement('span');
     static get observedAttributes() {
-        return ['label', 'disabled', 'aria-label', 'title', 'icon-only'];
+        return ['label', 'disabled', 'aria-label', 'aria-pressed', 'title', 'icon-only', 'icon', 'icon-position', 'loading'];
     }
     constructor() {
         super();
         const root = this.attachShadow({ mode: 'open' });
         const style = document.createElement('style');
         style.textContent = `
-      :host { display: inline-block; }
+      :host { display: inline-block; min-width: 0; }
       button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--hy-button-icon-gap, 7px);
+        width: 100%;
         min-height: 28px;
         padding: 0 10px;
         border: 1px solid var(--hy-border-color, #3d4654);
-        border-radius: 4px;
+        border-radius:
+          var(--hy-button-radius-top-left, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-top-right, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-bottom-right, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-bottom-left, var(--hy-button-radius, 4px));
         background: var(--hy-surface-elevated-color, #202733);
         color: var(--hy-text-color, #eef3ff);
         font: 12px system-ui, sans-serif;
@@ -31,9 +45,21 @@ export class HYButton extends HTMLElement {
       button.icon-only {
         width: 28px;
         padding: 0;
-        display: inline-grid;
-        place-items: center;
+        gap: 0;
       }
+      .icon { display: inline-grid; flex: 0 0 auto; place-items: center; line-height: 1; }
+      button.icon-end .icon { order: 2; }
+      .icon[hidden], .spinner[hidden] { display: none; }
+      .spinner {
+        width: var(--hy-button-loading-size, 14px);
+        height: var(--hy-button-loading-size, 14px);
+        box-sizing: border-box;
+        border: var(--hy-button-loading-stroke, 2px) solid color-mix(in srgb, currentColor 28%, transparent);
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: hy-button-spin var(--hy-button-loading-duration, 0.72s) linear infinite;
+      }
+      @keyframes hy-button-spin { to { transform: rotate(360deg); } }
       ::slotted(svg) {
         width: 16px;
         height: 16px;
@@ -48,7 +74,26 @@ export class HYButton extends HTMLElement {
         opacity: 0.5;
         cursor: default;
       }
+      @media (prefers-reduced-motion: reduce) {
+        .spinner { animation-duration: 1.5s; }
+      }
     `;
+        this._button.type = 'button';
+        this._button.part.add('button');
+        this._content.className = 'content';
+        this._content.part.add('content');
+        this._icon.className = 'icon';
+        this._icon.part.add('icon');
+        this._iconSlot.name = 'icon';
+        this._iconFallback.className = 'icon-fallback';
+        this._spinner.className = 'spinner';
+        this._spinner.part.add('spinner');
+        this._spinner.setAttribute('aria-hidden', 'true');
+        this._iconSlot.append(this._iconFallback);
+        this._icon.append(this._iconSlot, this._spinner);
+        this._content.append(this._contentSlot);
+        this._button.append(this._icon, this._content);
+        this._iconSlot.addEventListener('slotchange', () => this._syncIcon());
         root.append(style, this._button);
     }
     connectedCallback() {
@@ -57,24 +102,68 @@ export class HYButton extends HTMLElement {
     attributeChangedCallback() {
         this._sync();
     }
+    get loading() {
+        return this.hasAttribute('loading');
+    }
+    set loading(value) {
+        this.toggleAttribute('loading', Boolean(value));
+    }
+    get icon() {
+        return this.getAttribute('icon') ?? '';
+    }
+    set icon(value) {
+        if (value)
+            this.setAttribute('icon', value);
+        else
+            this.removeAttribute('icon');
+    }
+    get iconPosition() {
+        return this.getAttribute('icon-position') === 'end' ? 'end' : 'start';
+    }
+    set iconPosition(value) {
+        this.setAttribute('icon-position', value === 'end' ? 'end' : 'start');
+    }
+    click() {
+        this._button.click();
+    }
     _sync() {
         const label = this.getAttribute('label');
         if (label !== null) {
-            this._button.textContent = label;
-            this._button.classList.remove('icon-only');
+            if (this._content.textContent !== label || this._content.firstChild === this._contentSlot)
+                this._content.textContent = label;
             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'));
+            if (this._content.firstChild !== this._contentSlot)
+                this._content.replaceChildren(this._contentSlot);
             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');
+        const loading = this.loading;
+        this._button.classList.toggle('icon-only', label === null && this.hasAttribute('icon-only'));
+        this._button.classList.toggle('icon-end', this.iconPosition === 'end');
+        this._button.disabled = this.hasAttribute('disabled') || loading;
+        if (loading)
+            this._button.setAttribute('aria-busy', 'true');
+        else
+            this._button.removeAttribute('aria-busy');
+        const pressed = this.getAttribute('aria-pressed');
+        if (pressed === 'true' || pressed === 'false' || pressed === 'mixed')
+            this._button.setAttribute('aria-pressed', pressed);
+        else
+            this._button.removeAttribute('aria-pressed');
+        this._syncIcon();
+    }
+    _syncIcon() {
+        const loading = this.loading;
+        const assignedIcon = this._iconSlot.assignedNodes({ flatten: true }).some(node => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()));
+        this._iconFallback.textContent = this.icon;
+        this._iconSlot.hidden = loading;
+        this._spinner.hidden = !loading;
+        this._icon.hidden = !loading && !this.icon && !assignedIcon;
     }
 }
 export function defineButtonComponents() {

package/dist/cascader.d.ts

@@ -0,0 +1,65 @@
+export type HYCascaderValue = string | number;
+export interface HYCascaderOption {
+    readonly label: string;
+    readonly value: HYCascaderValue;
+    readonly disabled?: boolean;
+    readonly children?: readonly HYCascaderOption[];
+}
+export interface HYCascaderChangeDetail {
+    readonly value: readonly HYCascaderValue[];
+    readonly options: readonly HYCascaderOption[];
+}
+export interface HYCascaderOpenChangeDetail {
+    readonly open: boolean;
+}
+/** Tree-backed cascading dropdown that commits a complete value path. */
+export declare class HYCascader extends HTMLElement {
+    private readonly _control;
+    private readonly _trigger;
+    private readonly _label;
+    private readonly _arrow;
+    private readonly _clear;
+    private readonly _panel;
+    private readonly _panelId;
+    private _options;
+    private _value;
+    private _activePath;
+    private _reflecting;
+    private _outsideAbort;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get options(): readonly HYCascaderOption[];
+    set options(value: readonly HYCascaderOption[]);
+    get value(): readonly HYCascaderValue[];
+    set value(value: readonly HYCascaderValue[]);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get clearable(): boolean;
+    set clearable(value: boolean);
+    get changeOnSelect(): boolean;
+    set changeOnSelect(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get displaySeparator(): string;
+    set displaySeparator(value: string);
+    private _syncAttributes;
+    private _readOptionsAttribute;
+    private _readValueAttribute;
+    private _reflectValue;
+    private _normalizePath;
+    private _resolveOptions;
+    private _render;
+    private _renderPanel;
+    private _createOption;
+    private _activateOption;
+    private _commit;
+    private _handleOptionKeydown;
+    private _syncOutsideListener;
+    private _dispatchOpenChange;
+}
+export declare function defineCascaderComponents(): void;