@haiyue/ui 0.1.2 → 0.2.1

package/dist/rate.js

@@ -0,0 +1,193 @@
+function finiteNumber(value, fallback) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+}
+/** Accessible star rating with optional half-step pointer and keyboard selection. */
+export class HYRate extends HTMLElement {
+    _group = document.createElement('div');
+    _value = 0;
+    _hoverValue = null;
+    _tooltips = [];
+    _reflecting = false;
+    static get observedAttributes() {
+        return ['value', 'count', 'allow-half', 'allow-clear', 'disabled', 'readonly', 'character', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-block; color: var(--hy-text-color, #eef3ff); font: 12px/1 system-ui, sans-serif; }
+      .group { display: inline-flex; align-items: center; gap: var(--hy-rate-gap, 5px); border-radius: var(--hy-rate-focus-radius, 5px); }
+      .group:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 3px; }
+      .star { position: relative; width: 1em; height: 1em; padding: 0; overflow: hidden; border: 0; color: inherit; background: transparent; cursor: pointer; font: var(--hy-rate-font-size, 25px)/1 system-ui, sans-serif; transition: transform 120ms ease; }
+      .star:hover { transform: scale(1.12); }
+      .empty, .fill-inner { display: block; width: 1em; height: 1em; }
+      .empty { color: var(--hy-rate-empty-color, color-mix(in srgb, var(--hy-text-color, #eef3ff) 16%, transparent)); }
+      .fill { position: absolute; inset: 0 auto 0 0; width: var(--_fill, 0%); overflow: hidden; pointer-events: none; }
+      .fill-inner { color: var(--hy-rate-color, #f2b84b); }
+      .star:focus { outline: none; }
+      :host([disabled]), :host([readonly]) { opacity: .62; }
+      :host([disabled]) .star, :host([readonly]) .star { cursor: default; }
+      :host([disabled]) .star:hover, :host([readonly]) .star:hover { transform: none; }
+      @media (prefers-reduced-motion: reduce) { .star { transition: none; } }
+    `;
+        this._group.className = 'group';
+        this._group.part.add('group');
+        this._group.setAttribute('role', 'slider');
+        root.append(style, this._group);
+        this._group.addEventListener('pointermove', event => this._handlePointerMove(event));
+        this._group.addEventListener('pointerleave', () => this._setHover(null));
+        this._group.addEventListener('click', event => this._handleClick(event));
+        this._group.addEventListener('keydown', event => this._handleKeydown(event));
+    }
+    connectedCallback() { this._value = this._normalize(this.getAttribute('value')); this._reflectValue(); this._render(); }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue || this._reflecting)
+            return;
+        if (name === 'value' || name === 'count' || name === 'allow-half') {
+            this._value = this._normalize(this.getAttribute('value'));
+            this._reflectValue();
+        }
+        this._render();
+    }
+    get value() { return this._value; }
+    set value(value) { this._value = this._normalize(value); this._reflectValue(); this._render(); }
+    get count() { return Math.min(20, Math.max(1, Math.floor(finiteNumber(this.getAttribute('count'), 5)))); }
+    set count(value) { this.setAttribute('count', String(Math.min(20, Math.max(1, Math.floor(finiteNumber(value, 5)))))); }
+    get allowHalf() { return this.hasAttribute('allow-half'); }
+    set allowHalf(value) { this.toggleAttribute('allow-half', Boolean(value)); }
+    get allowClear() { return this.getAttribute('allow-clear') !== 'false'; }
+    set allowClear(value) { this.setAttribute('allow-clear', String(Boolean(value))); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get readOnly() { return this.hasAttribute('readonly'); }
+    set readOnly(value) { this.toggleAttribute('readonly', Boolean(value)); }
+    get character() { return this.getAttribute('character') || '★'; }
+    set character(value) { const normalized = String(value); if (normalized)
+        this.setAttribute('character', normalized);
+    else
+        this.removeAttribute('character'); }
+    get tooltips() { return this._tooltips; }
+    set tooltips(value) { this._tooltips = Array.isArray(value) ? value.map(String) : []; this._render(); }
+    _normalize(value) {
+        const step = this.allowHalf ? 0.5 : 1;
+        const number = Math.min(this.count, Math.max(0, finiteNumber(value, 0)));
+        return Math.round(number / step) * step;
+    }
+    _reflectValue() {
+        const value = String(this._value);
+        if (this.getAttribute('value') === value)
+            return;
+        this._reflecting = true;
+        this.setAttribute('value', value);
+        this._reflecting = false;
+    }
+    _render() {
+        if (!this.isConnected)
+            return;
+        const stars = [];
+        for (let index = 0; index < this.count; index += 1) {
+            const button = document.createElement('button');
+            const empty = document.createElement('span');
+            const fill = document.createElement('span');
+            const fillInner = document.createElement('span');
+            button.type = 'button';
+            button.className = 'star';
+            button.part.add('star');
+            button.dataset.index = String(index);
+            button.tabIndex = -1;
+            button.setAttribute('aria-hidden', 'true');
+            empty.className = 'empty';
+            empty.textContent = this.character;
+            fill.className = 'fill';
+            fill.part.add('fill');
+            fillInner.className = 'fill-inner';
+            fillInner.textContent = this.character;
+            fill.append(fillInner);
+            button.append(empty, fill);
+            stars.push(button);
+        }
+        this._group.replaceChildren(...stars);
+        this._group.tabIndex = this.disabled || this.readOnly ? -1 : 0;
+        this._group.setAttribute('aria-disabled', String(this.disabled));
+        this._group.setAttribute('aria-readonly', String(this.readOnly));
+        this._group.setAttribute('aria-valuemin', '0');
+        this._group.setAttribute('aria-valuemax', String(this.count));
+        this._group.setAttribute('aria-valuenow', String(this._value));
+        this._group.setAttribute('aria-valuetext', this._valueText(this._value));
+        this._group.setAttribute('aria-label', this.getAttribute('aria-label') || 'Rating');
+        this._updateVisuals();
+    }
+    _updateVisuals() {
+        const shown = this._hoverValue ?? this._value;
+        this._group.querySelectorAll('.star').forEach((star, index) => { const fill = Math.min(1, Math.max(0, shown - index)); star.style.setProperty('--_fill', `${fill * 100}%`); star.title = this._valueText(index + 1); });
+    }
+    _pointerValue(event) {
+        const target = event.target?.closest('.star');
+        if (!target || !this._group.contains(target))
+            return null;
+        const index = Number(target.dataset.index);
+        if (!this.allowHalf)
+            return index + 1;
+        const rect = target.getBoundingClientRect();
+        return index + (event.clientX < rect.left + rect.width / 2 ? 0.5 : 1);
+    }
+    _handlePointerMove(event) { if (this.disabled || this.readOnly)
+        return; const value = this._pointerValue(event); if (value != null)
+        this._setHover(value); }
+    _handleClick(event) {
+        if (this.disabled || this.readOnly)
+            return;
+        const pointed = this._pointerValue(event);
+        if (pointed == null)
+            return;
+        const value = this.allowClear && pointed === this._value ? 0 : pointed;
+        this._setHover(null);
+        this._commit(value);
+    }
+    _handleKeydown(event) {
+        if (this.disabled || this.readOnly)
+            return;
+        const step = this.allowHalf ? 0.5 : 1;
+        let next = null;
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp')
+            next = this._value + step;
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown')
+            next = this._value - step;
+        else if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = this.count;
+        if (next == null)
+            return;
+        event.preventDefault();
+        this._commit(next);
+    }
+    _setHover(value) {
+        if (this._hoverValue === value)
+            return;
+        this._hoverValue = value;
+        this._updateVisuals();
+        this.dispatchEvent(new CustomEvent('hover-change', { bubbles: true, composed: true, detail: { value } }));
+    }
+    _commit(value) {
+        const next = this._normalize(value);
+        if (next === this._value)
+            return;
+        this._value = next;
+        this._reflectValue();
+        this._group.setAttribute('aria-valuenow', String(next));
+        this._group.setAttribute('aria-valuetext', this._valueText(next));
+        this._updateVisuals();
+        this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true, detail: { value: next } }));
+    }
+    _valueText(value) { const index = Math.ceil(value) - 1; return value > 0 && this._tooltips[index] ? `${value}: ${this._tooltips[index]}` : `${value} of ${this.count}`; }
+}
+export function defineRateComponents() {
+    if (!customElements.get('hy-rate'))
+        customElements.define('hy-rate', HYRate);
+}
+//# sourceMappingURL=rate.js.map

package/dist/resizable.d.ts

@@ -0,0 +1,97 @@
+export type HYResizableHandle = 'move' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+export type HYResizableBoundsMode = 'none' | 'parent' | 'viewport';
+export type HYResizableBounds = HYResizableBoundsMode | HTMLElement;
+export type HYResizableSource = 'pointer' | 'keyboard' | 'api';
+export interface HYResizableRect {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+}
+export interface HYResizableChangeDetail extends HYResizableRect {
+    readonly handle: HYResizableHandle;
+    readonly source: HYResizableSource;
+}
+export interface HYResizableEndDetail extends HYResizableChangeDetail {
+    readonly cancelled: boolean;
+}
+/** Eight-handle resize frame that can also move its slotted content. */
+export declare class HYResizable extends HTMLElement {
+    private readonly _frame;
+    private readonly _content;
+    private readonly _handles;
+    private _x;
+    private _y;
+    private _width;
+    private _height;
+    private _initialRect;
+    private _boundsTarget;
+    private _reflecting;
+    private _pointerId;
+    private _activeHandle;
+    private _origin;
+    private _pointerX;
+    private _pointerY;
+    private _dragAbort;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get width(): number;
+    set width(value: number);
+    get height(): number;
+    set height(value: number);
+    get rect(): HYResizableRect;
+    get minWidth(): number;
+    set minWidth(value: number);
+    get minHeight(): number;
+    set minHeight(value: number);
+    get maxWidth(): number;
+    set maxWidth(value: number);
+    get maxHeight(): number;
+    set maxHeight(value: number);
+    get grid(): number;
+    set grid(value: number);
+    get aspectRatio(): number | null;
+    set aspectRatio(value: number | null);
+    get bounds(): HYResizableBounds;
+    set bounds(value: HYResizableBounds);
+    get boundsMode(): HYResizableBoundsMode;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get movable(): boolean;
+    set movable(value: boolean);
+    get keyboard(): boolean;
+    set keyboard(value: boolean);
+    get cancel(): string;
+    set cancel(value: string);
+    get resizing(): boolean;
+    setRect(rect: HYResizableRect): HYResizableRect;
+    moveTo(x: number, y: number): HYResizableRect;
+    moveBy(deltaX: number, deltaY: number): HYResizableRect;
+    resizeTo(width: number, height: number): HYResizableRect;
+    reset(): HYResizableRect;
+    refresh(): HYResizableRect;
+    private _startPointer;
+    private _handlePointerMove;
+    private _finishPointer;
+    private _cancelDrag;
+    private _handleKeydown;
+    private _rectFromDelta;
+    private _applyRect;
+    private _normalizeRect;
+    private _relativeBounds;
+    private _resolveHandle;
+    private _isCancelledTarget;
+    private _readRectAttributes;
+    private _sync;
+    private _reflectRect;
+    private _syncAccessibility;
+    private _setFiniteLimit;
+}
+export declare function defineResizableComponents(): void;