@haiyue/ui 0.1.1 → 0.2.1

package/dist/expandable.js

@@ -0,0 +1,136 @@
+/** A non-modal, top-layer expansion of the same slotted content; no cloning or reparenting. */
+export class HYExpandable extends HTMLElement {
+    static get observedAttributes() { return ['expanded', 'expanded-width', 'expanded-height', 'button-position', 'expand-label', 'restore-label']; }
+    panel;
+    placeholder;
+    button;
+    expandIcon;
+    restoreIcon;
+    lifetime;
+    active = false;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display:block; position:relative; min-width:0; min-height:0; }
+      .placeholder { display:none; pointer-events:none; }
+      .panel { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); width:100%; height:100%; min-width:0; min-height:0; box-sizing:border-box; color:inherit; font:inherit; }
+      .panel:popover-open { position:fixed; inset:0; margin:auto; width:var(--_width,90vw); height:var(--_height,90dvh); max-width:calc(100vw - 2 * var(--hy-expandable-margin,16px)); max-height:calc(100dvh - 2 * var(--hy-expandable-margin,16px)); padding:var(--hy-expandable-padding,16px); border:1px solid var(--hy-border-color,#536074); border-radius:var(--hy-expandable-radius,10px); background:var(--hy-surface-color,#18202e); box-shadow:var(--hy-expandable-shadow,0 16px 64px #0006); }
+      .panel::backdrop { background:transparent; pointer-events:none; }
+      button { position:absolute; z-index:2; top:var(--hy-expandable-button-offset,8px); right:var(--hy-expandable-button-offset,8px); display:grid; place-items:center; width:var(--hy-expandable-button-size,32px); height:var(--hy-expandable-button-size,32px); padding:6px; border:1px solid var(--hy-border-color,#536074); border-radius:6px; color:var(--hy-text-color,inherit); background:var(--hy-surface-color,#18202e); cursor:pointer; }
+      button:hover { color:var(--hy-accent-color,#7dd3fc); }
+      button:focus-visible { outline:2px solid var(--hy-accent-color,#7dd3fc); outline-offset:2px; }
+      button[data-position$="left"] { left:var(--hy-expandable-button-offset,8px); right:auto; }
+      button[data-position^="bottom"] { bottom:var(--hy-expandable-button-offset,8px); top:auto; }
+      svg, ::slotted([slot="expand-icon"]), ::slotted([slot="restore-icon"]) { width:100%; height:100%; pointer-events:none; }
+      slot[hidden] { display:none; }
+    `;
+        this.placeholder = document.createElement('div');
+        this.placeholder.className = 'placeholder';
+        this.panel = document.createElement('div');
+        this.panel.className = 'panel';
+        this.panel.id = 'panel';
+        this.panel.part.add('panel');
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.part.add('toggle');
+        this.button.setAttribute('aria-controls', 'panel');
+        const icon = (name, path) => {
+            const slot = document.createElement('slot');
+            slot.name = name;
+            slot.setAttribute('aria-hidden', 'true');
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('viewBox', '0 0 24 24');
+            svg.setAttribute('fill', 'none');
+            svg.setAttribute('stroke', 'currentColor');
+            svg.setAttribute('stroke-width', '1.8');
+            const shape = document.createElementNS(svg.namespaceURI, 'path');
+            shape.setAttribute('d', path);
+            svg.append(shape);
+            slot.append(svg);
+            return slot;
+        };
+        this.expandIcon = icon('expand-icon', 'M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6');
+        this.restoreIcon = icon('restore-icon', 'M3 9h6V3m6 0v6h6M9 21v-6H3m18 0h-6v6M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6');
+        this.button.append(this.expandIcon, this.restoreIcon);
+        this.panel.append(document.createElement('slot'), this.button);
+        root.append(style, this.placeholder, this.panel);
+        this.button.addEventListener('click', () => this.toggle());
+        this.render();
+    }
+    get expanded() { return this.hasAttribute('expanded'); }
+    set expanded(value) { this.toggleAttribute('expanded', Boolean(value)); }
+    get expandedWidth() { return this.getAttribute('expanded-width') ?? '90vw'; }
+    set expandedWidth(value) { this.setAttribute('expanded-width', value); }
+    get expandedHeight() { return this.getAttribute('expanded-height') ?? '90dvh'; }
+    set expandedHeight(value) { this.setAttribute('expanded-height', value); }
+    get buttonPosition() {
+        const value = this.getAttribute('button-position');
+        return (['top-left', 'bottom-right', 'bottom-left'].includes(value ?? '') ? value : 'top-right');
+    }
+    set buttonPosition(value) { this.setAttribute('button-position', value); }
+    toggle() { this.expanded = !this.expanded; }
+    connectedCallback() {
+        this.lifetime?.abort();
+        this.lifetime = new AbortController();
+        this.addEventListener('keydown', event => {
+            // Bubbling follows the composed tree across shadow roots. Child menus and
+            // expanded containers consume Escape before it reaches their ancestors.
+            if (event.key === 'Escape' && !event.defaultPrevented && this.active) {
+                event.preventDefault();
+                this.expanded = false;
+                this.button.focus({ preventScroll: true });
+            }
+        }, { signal: this.lifetime.signal });
+        queueMicrotask(() => { if (this.isConnected)
+            this.sync(); });
+    }
+    disconnectedCallback() {
+        this.lifetime?.abort();
+        this.lifetime = undefined;
+        this.closePanel(); // Attribute remains available if the owner reconnects this element.
+    }
+    attributeChangedCallback() { this.render(); if (this.isConnected)
+        this.sync(); }
+    render() {
+        for (const [name, value] of [['width', this.expandedWidth], ['height', this.expandedHeight]]) {
+            this.panel.style.removeProperty(`--_${name}`);
+            if (CSS.supports(name, value))
+                this.panel.style.setProperty(`--_${name}`, value);
+        }
+        this.button.dataset.position = this.buttonPosition;
+        this.button.setAttribute('aria-expanded', String(this.expanded));
+        const label = this.getAttribute(this.expanded ? 'restore-label' : 'expand-label') ?? (this.expanded ? 'Restore size' : 'Expand');
+        this.button.setAttribute('aria-label', label);
+        this.button.title = label;
+        this.expandIcon.hidden = this.expanded;
+        this.restoreIcon.hidden = !this.expanded;
+    }
+    sync() {
+        if (this.expanded === this.active)
+            return;
+        if (this.expanded) {
+            this.placeholder.style.height = `${this.getBoundingClientRect().height}px`;
+            this.placeholder.style.display = 'block';
+            this.panel.setAttribute('popover', 'manual');
+            this.panel.showPopover();
+            this.active = true;
+        }
+        else
+            this.closePanel();
+        this.dispatchEvent(new CustomEvent('expanded-change', { detail: { expanded: this.active }, bubbles: true, composed: true }));
+    }
+    closePanel() {
+        if (this.panel.matches(':popover-open'))
+            this.panel.hidePopover();
+        this.panel.removeAttribute('popover');
+        this.placeholder.style.display = 'none';
+        this.active = false;
+    }
+}
+export function defineExpandableComponents() {
+    if (!customElements.get('hy-expandable'))
+        customElements.define('hy-expandable', HYExpandable);
+}
+//# sourceMappingURL=expandable.js.map

package/dist/index.d.ts

@@ -1,4 +1,9 @@
+export { defineExpandableComponents, HYExpandable } from './expandable.js';
+export type { HYExpandableButtonPosition, HYExpandableChangeDetail } from './expandable.js';
 export { defineButtonComponents, HYButton, } from './button.js';
+export type { HYButtonIconPosition } from './button.js';
+export { defineButtonGroupComponents, HYButtonGroup, } from './button-group.js';
+export type { HYButtonGroupOrientation } from './button-group.js';
 export { defineBorderBeamComponents, HYBorderBeam, } from './border-beam.js';
 export { defineTreeComponents, HYTree, HYTreeNode, } from './tree.js';
 export { defineSplitComponents, HYSplit, } from './split.js';
@@ -10,14 +15,52 @@ export { defineTooltipComponents, HYTooltip, } from './tooltip.js';
 export { defineCheckboxComponents, HYCheckbox, } from './checkbox.js';
 export { defineRadioComponents, HYRadio, } from './radio.js';
 export { defineRangeComponents, HYRange, } from './range.js';
+export { defineResizableComponents, HYResizable, } from './resizable.js';
 export { defineDialogComponents, HYDialog, } from './dialog.js';
 export { defineDrawerComponents, HYDrawer, } from './drawer.js';
+export { defineDraggableComponents, HYDraggable, } from './draggable.js';
 export { defineInputComponents, HYInput, } from './input.js';
 export { defineNotificationComponents, HYNotification, } from './notification.js';
+export { defineToastComponents, HYToast, } from './toast.js';
 export { defineHistoryControlsComponents, HYHistoryControls, } from './history-controls.js';
 export type { HYHistoryEntry, } from './history-controls.js';
 export { calculateVirtualListRange, defineVirtualListComponents, HYVirtualList, } from './virtual-list.js';
 export type { HYVirtualListAlign, HYVirtualListItemClickDetail, HYVirtualListItemRenderer, HYVirtualListRange, HYVirtualListRangeChangeDetail, } from './virtual-list.js';
+export { defineVirtualMouseComponents, HYVirtualMouse, } from './virtual-mouse.js';
+export { defineVirtualKeyboardComponents, HYVirtualKeyboard, HY_VIRTUAL_KEYBOARD_NUMERIC_LAYOUT, HY_VIRTUAL_KEYBOARD_QWERTY_LAYOUT, } from './virtual-keyboard.js';
+export { defineTableComponents, HYTable, } from './table.js';
+export { defineBreadcrumbComponents, HYBreadcrumb, } from './breadcrumb.js';
+export { defineCascaderComponents, HYCascader, } from './cascader.js';
+export type { HYCascaderChangeDetail, HYCascaderOpenChangeDetail, HYCascaderOption, HYCascaderValue, } from './cascader.js';
+export { defineDatePickerComponents, HYDatePicker, } from './date-picker.js';
+export type { HYDatePickerChangeDetail, HYDatePickerOpenChangeDetail, } from './date-picker.js';
+export { defineTimePickerComponents, HYTimePicker, } from './time-picker.js';
+export type { HYTimePickerChangeDetail, HYTimePickerOpenChangeDetail, } from './time-picker.js';
+export { defineSkeletonComponents, HYSkeleton, } from './skeleton.js';
+export type { HYSkeletonAvatarShape, HYSkeletonSize, } from './skeleton.js';
+export { defineWatermarkComponents, HYWatermark, } from './watermark.js';
+export { defineTimelineComponents, HYTimeline, } from './timeline.js';
+export { defineRateComponents, HYRate, } from './rate.js';
+export type { HYRateChangeDetail, HYRateHoverChangeDetail, } from './rate.js';
+export { defineDividerComponents, HYDivider, } from './divider.js';
+export type { HYDividerLineStyle, HYDividerOrientation, HYDividerTextPlacement, } from './divider.js';
+export { defineStepsComponents, HYSteps, } from './steps.js';
+export { defineAffixComponents, HYAffix, } from './affix.js';
+export type { HYAffixChangeDetail } from './affix.js';
+export { defineTourComponents, HYTour, } from './tour.js';
+export { defineBadgeComponents, HYBadge, } from './badge.js';
+export type { HYBadgeCount, HYBadgeSize, HYBadgeStatus, } from './badge.js';
+export { defineTagComponents, HYTag, } from './tag.js';
+export type { HYTagCheckedChangeDetail, HYTagCloseDetail, HYTagSize, HYTagVariant, } from './tag.js';
+export { defineCollapseComponents, HYCollapse, } from './collapse.js';
+export type { HYCollapseChangeDetail, HYCollapseContent, HYCollapseIconPosition, HYCollapseItem, HYCollapseKey, HYCollapseTrigger, } from './collapse.js';
+export type { HYTourChangeDetail, HYTourCloseDetail, HYTourCloseReason, HYTourFinishDetail, HYTourOpenChangeDetail, HYTourPlacement, HYTourStep, HYTourTarget, } from './tour.js';
+export type { HYStepItem, HYStepsChangeDetail, HYStepsDirection, HYStepsSize, HYStepStatus, } from './steps.js';
+export type { HYTimelineDotRenderer, HYTimelineItem, HYTimelineItemPosition, HYTimelineItemRenderer, HYTimelineMode, HYTimelineStatus, } from './timeline.js';
+export type { HYBreadcrumbClickDetail, HYBreadcrumbItem, HYBreadcrumbItemRenderer, } from './breadcrumb.js';
+export type { HYTableAlign, HYTableChangeDetail, HYTableChangeReason, HYTableColumn, HYTableFilterOption, HYTableFilterState, HYTableRowClickDetail, HYTableSortDirection, HYTableSortState, } from './table.js';
+export type { HYVirtualMouseButton, HYVirtualMouseButtonDetail, HYVirtualMouseClickOptions, HYVirtualMouseImages, HYVirtualMouseMoveDetail, HYVirtualMouseMoveOptions, HYVirtualMousePosition, HYVirtualMouseState, } from './virtual-mouse.js';
+export type { HYVirtualKeyboardAction, HYVirtualKeyboardInputDetail, HYVirtualKeyboardKey, HYVirtualKeyboardKeyDetail, HYVirtualKeyboardLayout, HYVirtualKeyboardMode, HYVirtualKeyboardSource, HYVirtualKeyboardTapOptions, HYVirtualKeyboardTypeOptions, } from './virtual-keyboard.js';
 export type { HYSplitDirection, HYSplitRatioChangeDetail, } from './split.js';
 export type { HYSelectChangeDetail, HYSelectOption, } from './select.js';
 export type { HYTabChangeDetail, HYTabOption, } from './tabs.js';
@@ -27,9 +70,12 @@ export type { HYTooltipPlacement, } from './tooltip.js';
 export type { HYCheckboxChangeDetail, } from './checkbox.js';
 export type { HYRadioChangeDetail, } from './radio.js';
 export type { HYRangeChangeDetail, HYRangeHandle, HYRangeValue, } from './range.js';
+export type { HYResizableBounds, HYResizableBoundsMode, HYResizableChangeDetail, HYResizableEndDetail, HYResizableHandle, HYResizableRect, HYResizableSource, } from './resizable.js';
 export type { HYDialogCloseDetail, HYDialogCloseReason, } from './dialog.js';
 export type { HYDrawerCloseDetail, HYDrawerCloseReason, HYDrawerPlacement, } from './drawer.js';
-export type { HYInputChangeDetail, HYInputType, } from './input.js';
+export type { HYDraggableAxis, HYDraggableBounds, HYDraggableBoundsMode, HYDraggableEndDetail, HYDraggableMoveDetail, HYDraggableMoveSource, HYDraggablePosition, HYDraggableStartDetail, } from './draggable.js';
+export type { HYInputChangeDetail, HYInputSearchDetail, HYInputSearchSource, HYInputType, } from './input.js';
 export type { HYNotificationCloseDetail, HYNotificationCloseReason, HYNotificationMethodOptions, HYNotificationOpenDetail, HYNotificationOptions, HYNotificationPlacement, HYNotificationType, } from './notification.js';
+export type { HYToastCloseDetail, HYToastCloseReason, HYToastMethodOptions, HYToastOpenDetail, HYToastOptions, HYToastPlacement, HYToastType, } from './toast.js';
 export type { HYTreeDataChangeDetail, HYTreeDropPosition, HYTreeNodeContextMenuDetail, HYTreeNodeData, HYTreeSelectionChangeDetail, } from './tree.js';
 export declare function defineHaiyueUI(): void;

package/dist/index.js

@@ -1,4 +1,7 @@
+import { defineExpandableComponents } from './expandable.js';
+export { defineExpandableComponents, HYExpandable } from './expandable.js';
 import { defineButtonComponents } from './button.js';
+import { defineButtonGroupComponents } from './button-group.js';
 import { defineBorderBeamComponents } from './border-beam.js';
 import { defineTreeComponents } from './tree.js';
 import { defineSplitComponents } from './split.js';
@@ -10,13 +13,35 @@ import { defineTooltipComponents } from './tooltip.js';
 import { defineCheckboxComponents } from './checkbox.js';
 import { defineRadioComponents } from './radio.js';
 import { defineRangeComponents } from './range.js';
+import { defineResizableComponents } from './resizable.js';
 import { defineDialogComponents } from './dialog.js';
 import { defineDrawerComponents } from './drawer.js';
+import { defineDraggableComponents } from './draggable.js';
 import { defineInputComponents } from './input.js';
 import { defineNotificationComponents } from './notification.js';
+import { defineToastComponents } from './toast.js';
 import { defineHistoryControlsComponents } from './history-controls.js';
 import { defineVirtualListComponents } from './virtual-list.js';
+import { defineVirtualMouseComponents } from './virtual-mouse.js';
+import { defineVirtualKeyboardComponents } from './virtual-keyboard.js';
+import { defineTableComponents } from './table.js';
+import { defineBreadcrumbComponents } from './breadcrumb.js';
+import { defineCascaderComponents } from './cascader.js';
+import { defineDatePickerComponents } from './date-picker.js';
+import { defineTimePickerComponents } from './time-picker.js';
+import { defineSkeletonComponents } from './skeleton.js';
+import { defineWatermarkComponents } from './watermark.js';
+import { defineTimelineComponents } from './timeline.js';
+import { defineRateComponents } from './rate.js';
+import { defineDividerComponents } from './divider.js';
+import { defineStepsComponents } from './steps.js';
+import { defineAffixComponents } from './affix.js';
+import { defineTourComponents } from './tour.js';
+import { defineBadgeComponents } from './badge.js';
+import { defineTagComponents } from './tag.js';
+import { defineCollapseComponents } from './collapse.js';
 export { defineButtonComponents, HYButton, } from './button.js';
+export { defineButtonGroupComponents, HYButtonGroup, } from './button-group.js';
 export { defineBorderBeamComponents, HYBorderBeam, } from './border-beam.js';
 export { defineTreeComponents, HYTree, HYTreeNode, } from './tree.js';
 export { defineSplitComponents, HYSplit, } from './split.js';
@@ -28,15 +53,38 @@ export { defineTooltipComponents, HYTooltip, } from './tooltip.js';
 export { defineCheckboxComponents, HYCheckbox, } from './checkbox.js';
 export { defineRadioComponents, HYRadio, } from './radio.js';
 export { defineRangeComponents, HYRange, } from './range.js';
+export { defineResizableComponents, HYResizable, } from './resizable.js';
 export { defineDialogComponents, HYDialog, } from './dialog.js';
 export { defineDrawerComponents, HYDrawer, } from './drawer.js';
+export { defineDraggableComponents, HYDraggable, } from './draggable.js';
 export { defineInputComponents, HYInput, } from './input.js';
 export { defineNotificationComponents, HYNotification, } from './notification.js';
+export { defineToastComponents, HYToast, } from './toast.js';
 export { defineHistoryControlsComponents, HYHistoryControls, } from './history-controls.js';
 export { calculateVirtualListRange, defineVirtualListComponents, HYVirtualList, } from './virtual-list.js';
+export { defineVirtualMouseComponents, HYVirtualMouse, } from './virtual-mouse.js';
+export { defineVirtualKeyboardComponents, HYVirtualKeyboard, HY_VIRTUAL_KEYBOARD_NUMERIC_LAYOUT, HY_VIRTUAL_KEYBOARD_QWERTY_LAYOUT, } from './virtual-keyboard.js';
+export { defineTableComponents, HYTable, } from './table.js';
+export { defineBreadcrumbComponents, HYBreadcrumb, } from './breadcrumb.js';
+export { defineCascaderComponents, HYCascader, } from './cascader.js';
+export { defineDatePickerComponents, HYDatePicker, } from './date-picker.js';
+export { defineTimePickerComponents, HYTimePicker, } from './time-picker.js';
+export { defineSkeletonComponents, HYSkeleton, } from './skeleton.js';
+export { defineWatermarkComponents, HYWatermark, } from './watermark.js';
+export { defineTimelineComponents, HYTimeline, } from './timeline.js';
+export { defineRateComponents, HYRate, } from './rate.js';
+export { defineDividerComponents, HYDivider, } from './divider.js';
+export { defineStepsComponents, HYSteps, } from './steps.js';
+export { defineAffixComponents, HYAffix, } from './affix.js';
+export { defineTourComponents, HYTour, } from './tour.js';
+export { defineBadgeComponents, HYBadge, } from './badge.js';
+export { defineTagComponents, HYTag, } from './tag.js';
+export { defineCollapseComponents, HYCollapse, } from './collapse.js';
 export function defineHaiyueUI() {
+    defineExpandableComponents();
     defineBorderBeamComponents();
     defineButtonComponents();
+    defineButtonGroupComponents();
     defineTreeComponents();
     defineSplitComponents();
     defineSelectComponents();
@@ -47,11 +95,32 @@ export function defineHaiyueUI() {
     defineCheckboxComponents();
     defineRadioComponents();
     defineRangeComponents();
+    defineResizableComponents();
     defineDialogComponents();
     defineDrawerComponents();
+    defineDraggableComponents();
     defineInputComponents();
     defineNotificationComponents();
+    defineToastComponents();
     defineHistoryControlsComponents();
     defineVirtualListComponents();
+    defineVirtualMouseComponents();
+    defineVirtualKeyboardComponents();
+    defineTableComponents();
+    defineBreadcrumbComponents();
+    defineCascaderComponents();
+    defineDatePickerComponents();
+    defineTimePickerComponents();
+    defineSkeletonComponents();
+    defineWatermarkComponents();
+    defineTimelineComponents();
+    defineRateComponents();
+    defineDividerComponents();
+    defineStepsComponents();
+    defineAffixComponents();
+    defineTourComponents();
+    defineBadgeComponents();
+    defineTagComponents();
+    defineCollapseComponents();
 }
 //# sourceMappingURL=index.js.map

package/dist/input.d.ts

@@ -1,11 +1,25 @@
-export type HYInputType = 'text' | 'number' | 'color';
+export type HYInputType = 'text' | 'number' | 'color' | 'search' | 'password';
+export type HYInputSearchSource = 'enter' | 'button' | 'api';
 export interface HYInputChangeDetail {
     value: string;
     valueAsNumber: number | null;
     valid: boolean;
 }
+export interface HYInputSearchDetail {
+    value: string;
+    valid: boolean;
+    source: HYInputSearchSource;
+}
 export declare class HYInput extends HTMLElement {
+    private readonly _control;
+    private readonly _prefix;
+    private readonly _prefixSlot;
+    private readonly _prefixText;
     private readonly _input;
+    private readonly _suffix;
+    private readonly _suffixSlot;
+    private readonly _suffixText;
+    private readonly _searchButton;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -16,6 +30,12 @@ export declare class HYInput extends HTMLElement {
     get value(): string;
     set value(value: string);
     get valueAsNumber(): number;
+    get prefix(): string;
+    set prefix(value: string);
+    get suffix(): string;
+    set suffix(value: string);
+    get searchLabel(): string;
+    set searchLabel(value: string);
     get disabled(): boolean;
     set disabled(value: boolean);
     get readOnly(): boolean;
@@ -23,8 +43,17 @@ export declare class HYInput extends HTMLElement {
     get valid(): boolean;
     focus(options?: FocusOptions): void;
     select(): void;
+    search(): boolean;
     private _sync;
+    private _syncAffixes;
+    private _syncAffix;
+    private _syncValidity;
+    private _setOptionalAttribute;
+    private _onSlotChange;
     private _onInput;
     private _onChange;
+    private _onKeydown;
+    private _onSearchClick;
+    private _emitSearch;
 }
 export declare function defineInputComponents(): void;