hys-ui 0.2.0 → 0.4.0

package/dist/types/composables/autocomplete.d.ts

@@ -1,3 +1,4 @@
+import type { HysPopupTransition } from '../motion/popup';
 import type { Component, CSSProperties } from "vue";
 import type { Placement } from "./useFloating";
 import type { HysInputProps } from "./textInput";
@@ -23,6 +24,8 @@ export interface HysAutocompleteContext {
 export type HysAutocompleteCallback = (options: readonly HysAutocompleteDataOption[]) => void;
 export type HysAutocompleteFetch = (query: string, callback: HysAutocompleteCallback, context: HysAutocompleteContext) => void | readonly HysAutocompleteDataOption[] | Promise<void | readonly HysAutocompleteDataOption[]>;
 export interface HysAutocompleteProps {
+    popupTransition?: HysPopupTransition;
+    popupTransitionDuration?: number;
     modelValue?: string;
     defaultValue?: string;
     options?: readonly HysAutocompleteDataOption[];

package/dist/types/composables/avatar.d.ts

@@ -1,3 +1,4 @@
+import type { HysPopupTransition } from '../motion/popup';
 import { type Component, type ComputedRef, type CSSProperties, type ImgHTMLAttributes, type InjectionKey } from "vue";
 import type { Placement } from "./useFloating";
 export type HysAvatarBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
@@ -46,6 +47,8 @@ export interface HysAvatarGroupInstance {
     close: () => void;
 }
 export interface HysAvatarGroupProps {
+    popupTransition?: HysPopupTransition;
+    popupTransitionDuration?: number;
     options?: readonly HysAvatarOption[];
     size?: HysAvatarSize;
     shape?: "circle" | "square";

package/dist/types/composables/buttonGroup.d.ts

@@ -0,0 +1,9 @@
+import type { InjectionKey, Ref } from "vue";
+import type { HysButtonAppearance, HysButtonSize, HysButtonVariant } from "../components/HysButton/HysButton.vue";
+export declare function buttonSize(size: HysButtonSize | undefined): "sm" | "md" | "lg" | undefined;
+export declare function buttonVariant(type: HysButtonAppearance | "button" | "submit" | "reset" | undefined): HysButtonVariant | undefined;
+export declare const buttonGroupKey: InjectionKey<{
+    variant: Readonly<Ref<HysButtonVariant | undefined>>;
+    size: Readonly<Ref<"sm" | "md" | "lg" | undefined>>;
+    disabled: Readonly<Ref<boolean>>;
+}>;

package/dist/types/composables/cascader.d.ts

@@ -1,3 +1,4 @@
+import type { HysPopupTransition } from '../motion/popup';
 import type { CSSProperties, VNodeChild } from "vue";
 import { type HysTreeKey } from "./tree";
 import type { Placement } from "./useFloating";
@@ -72,6 +73,8 @@ export interface HysCascaderLocale {
     limit: string;
 }
 export interface HysCascaderProps<N extends object = HysCascaderNode, V extends HysCascaderValue = HysCascaderValue> {
+    popupTransition?: HysPopupTransition;
+    popupTransitionDuration?: number;
     options: readonly N[];
     modelValue?: V;
     defaultValue?: V;

package/dist/types/composables/color.d.ts

@@ -0,0 +1,97 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import type { HysPopupMotionProps } from "../motion/popup";
+import type { Placement } from "./useFloating";
+export type HysColorFormat = "hex" | "rgb" | "hsl" | "hsv";
+export interface HysColor {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export interface HysColorPickerProps extends HysPopupMotionProps {
+    modelValue?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    ariaLabel?: string;
+    presets?: readonly string[];
+    clearable?: boolean;
+    showAlpha?: boolean;
+    format?: HysColorFormat;
+    immediate?: boolean;
+    showInput?: boolean;
+    showText?: boolean;
+    showPresets?: boolean;
+    inline?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    placement?: Placement;
+    appendTo?: string | HTMLElement | false;
+    popupClass?: string;
+    popupStyle?: CSSProperties;
+    popupWidth?: number | string;
+    showFooter?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    clearText?: string;
+    status?: "error" | "warning" | "success";
+    error?: string;
+    name?: string;
+    form?: string;
+    tabindex?: number;
+    autofocus?: boolean;
+    validateEvent?: boolean;
+    inputProps?: Record<string, unknown>;
+}
+export interface HysColorPickerContext {
+    value: string;
+    draft: string;
+    color: Readonly<HysColor>;
+    disabled: boolean;
+    readonly: boolean;
+    valid: boolean;
+    dirty: boolean;
+    setColor: (value: string) => Promise<boolean>;
+    confirm: () => Promise<boolean>;
+    cancel: () => void;
+    clear: () => Promise<boolean>;
+    show: () => Promise<boolean>;
+    hide: () => Promise<boolean>;
+}
+export interface HysColorPickerSlots {
+    trigger?: (context: HysColorPickerContext) => VNodeChild;
+    header?: (context: HysColorPickerContext) => VNodeChild;
+    footer?: (context: HysColorPickerContext) => VNodeChild;
+    preset?: (context: {
+        value: string;
+        color: string;
+        selected: boolean;
+        disabled: boolean;
+    }) => VNodeChild;
+}
+export interface HysColorPickerInstance {
+    readonly element: HTMLElement | undefined;
+    readonly input: HTMLInputElement | undefined;
+    readonly panel: HTMLElement | undefined;
+    readonly value: string;
+    readonly draft: string;
+    readonly color: Readonly<HysColor>;
+    readonly open: boolean;
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    show: () => Promise<boolean>;
+    hide: () => Promise<boolean>;
+    confirm: () => Promise<boolean>;
+    cancel: () => void;
+    clear: () => Promise<boolean>;
+    setColor: (value: string) => Promise<boolean>;
+}
+export declare const colorClamp: (value: number, min?: number, max?: number) => number;
+export declare function colorFromRgb(r: number, g: number, b: number, a?: number): HysColor;
+export declare function colorRgb(c: HysColor): readonly [number, number, number];
+export declare function parseColor(value: string | undefined): HysColor | undefined;
+export declare function formatColor(color: HysColor, format?: HysColorFormat, alpha?: boolean): string;
+export declare const colorCss: (color: HysColor) => string;
+export declare function sameColor(a: HysColor | undefined, b: HysColor | undefined): boolean;

package/dist/types/composables/dataGrid.d.ts

@@ -0,0 +1,100 @@
+import type { HysPopupMotionProps } from "../motion/popup";
+export type HysDataGridKey = string | number;
+export type HysDataGridSort = {
+    key: string;
+    direction: "asc" | "desc";
+};
+export interface HysDataGridQuery {
+    page: number;
+    pageSize: number;
+    sort: HysDataGridSort[];
+    search: string;
+    filters: Record<string, string>;
+}
+export interface GridColumn<T extends object = Record<string, unknown>> {
+    key: string;
+    label: string;
+    field?: string | ((row: T) => unknown);
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    sortable?: boolean;
+    sortMethod?: (a: T, b: T) => number;
+    filterable?: boolean;
+    filterMethod?: (value: string, row: T) => boolean;
+    hideable?: boolean;
+    resizable?: boolean;
+    reorderable?: boolean;
+    pinned?: "left" | "right";
+    align?: "left" | "center" | "right";
+    summary?: "sum" | "avg" | "min" | "max" | "count";
+    editable?: boolean;
+}
+export interface HysDataGridResult<T extends object> {
+    rows: readonly T[];
+    total: number;
+}
+export type HysDataGridLoader<T extends object> = (query: HysDataGridQuery, context: {
+    signal: AbortSignal;
+}) => Promise<HysDataGridResult<T>> | HysDataGridResult<T>;
+export interface HysDataGridProps<T extends object> extends HysPopupMotionProps {
+    columns: readonly GridColumn<T>[];
+    rows: readonly T[];
+    rowKey?: string | ((row: T, index: number) => HysDataGridKey);
+    page?: number;
+    pageSize?: number;
+    query?: HysDataGridQuery;
+    defaultQuery?: Partial<HysDataGridQuery>;
+    immediateQuery?: boolean;
+    serverMode?: boolean;
+    loadRows?: HysDataGridLoader<T>;
+    totalRows?: number;
+    storageKey?: string;
+    selectable?: boolean;
+    rowSelectable?: (row: T, index: number) => boolean;
+    selectedRowKeys?: readonly HysDataGridKey[];
+    defaultSelectedRowKeys?: readonly HysDataGridKey[];
+    reserveSelection?: boolean;
+    selectionType?: "checkbox" | "radio";
+    loading?: boolean;
+    emptyText?: string;
+    density?: "compact" | "normal" | "comfortable";
+    multiSort?: boolean;
+    stickyHeader?: boolean;
+    maxHeight?: number | string;
+    scrollToTopOnQuery?: boolean;
+    groupable?: boolean;
+    showSummary?: boolean;
+    summaryMethod?: (column: GridColumn<T>, rows: readonly T[]) => string | number;
+    treeMode?: boolean;
+    parentKey?: string;
+    editable?: boolean;
+}
+export interface HysDataGridInstance {
+    resetColumns(): void;
+    getQuery(): HysDataGridQuery;
+    setQuery(query: Partial<HysDataGridQuery>): void;
+    resetQuery(): void;
+    reload(): void;
+    getSelection(): HysDataGridKey[];
+    clearSelection(): void;
+    toggleRowSelection(key: HysDataGridKey, checked?: boolean): void;
+    scrollTo(options: ScrollToOptions): void;
+    scrollToRow(key: HysDataGridKey): boolean;
+}
+export type GridRow<T extends object> = {
+    row: T;
+    id: HysDataGridKey;
+    index: number;
+};
+export type GridTreeRow<T extends object> = GridRow<T> & {
+    depth: number;
+    hasChildren: boolean;
+};
+export declare const gridKey: (value: unknown) => value is HysDataGridKey;
+export declare const gridToken: (key: HysDataGridKey) => string;
+export declare const positiveInteger: (value: number | undefined, fallback: number) => number;
+export declare function gridField(row: object, path: string): unknown;
+export declare function gridValue<T extends object>(row: T, column: GridColumn<T>): unknown;
+export declare function gridRows<T extends object>(rows: readonly T[], rowKey: NonNullable<HysDataGridProps<T>["rowKey"]>, offset: number): GridRow<T>[];
+export declare function gridTree<T extends object>(rows: readonly GridRow<T>[], parentKey: string, expanded: ReadonlySet<HysDataGridKey>): GridTreeRow<T>[];

package/dist/types/composables/datePicker.d.ts

@@ -1,3 +1,4 @@
+import type { HysPopupTransition } from '../motion/popup';
 import type { CSSProperties } from "vue";
 import type { Placement } from "./useFloating";
 export type HysDateScalar = string | Date | number;
@@ -82,6 +83,8 @@ export interface HysDatePickerLocale {
     limit: string;
 }
 export interface HysDatePickerProps<V extends HysDatePickerValue = HysDatePickerValue> {
+    popupTransition?: HysPopupTransition;
+    popupTransitionDuration?: number;
     modelValue?: V;
     defaultValue?: V;
     clearValue?: V;

package/dist/types/composables/drawer.d.ts

@@ -0,0 +1,102 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import type { HysModalProps, HysModalActionContext, HysModalCloseReason, HysModalInitialFocus, HysModalSectionSize } from "./modal";
+export type HysDrawerPlacement = "left" | "right" | "top" | "bottom";
+export type HysDrawerSizeName = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export type HysDrawerCloseReason = HysModalCloseReason;
+export type HysDrawerActionContext = HysModalActionContext;
+export type HysDrawerInitialFocus = HysModalInitialFocus;
+export type HysDrawerSectionSize = HysModalSectionSize;
+export type HysDrawerBeforeClose = Function & {
+    invoke(reason: HysDrawerCloseReason, context: HysDrawerActionContext): boolean | void | Promise<boolean | void>;
+}["invoke"];
+export interface HysDrawerResizeOptions {
+    minSize?: number | string;
+    maxSize?: number | string;
+    step?: number;
+}
+export interface HysDrawerResizeInfo {
+    placement: HysDrawerPlacement;
+    cancelled: boolean;
+    accepted: boolean;
+}
+export interface HysDrawerPushOptions {
+    distance?: number | string;
+}
+export interface HysDrawerProps extends Pick<HysModalProps, "open" | "modelValue" | "defaultOpen" | "title" | "description" | "opacity" | "maskOpacity" | "width" | "height" | "fullscreen" | "defaultFullscreen" | "showFullscreen" | "closeOnMask" | "closeOnEscape" | "showClose" | "destroyOnClose" | "forceRender" | "modal" | "modalPenetrable" | "appendTo" | "lockScroll" | "trapFocus" | "restoreFocus" | "initialFocus" | "openDelay" | "closeDelay" | "transitionDuration" | "zIndex" | "headerClass" | "headerSize" | "footerSize" | "headerHeight" | "footerHeight" | "titleFontSize" | "bodyClass" | "footerClass" | "overlayClass" | "headerStyle" | "bodyStyle" | "footerStyle" | "maskStyle" | "ariaLabel" | "ariaLabelledby" | "ariaDescribedby" | "role" | "headerAriaLevel" | "closeText" | "fullscreenText" | "restoreText" | "footer" | "footerAlign" | "showCancel" | "okText" | "cancelText" | "okVariant" | "okButtonProps" | "cancelButtonProps" | "confirmLoading" | "confirmDisabled" | "cancelDisabled" | "closeWhileConfirming" | "loading" | "loadingText" | "showError" | "errorText" | "confirmOnCtrlEnter" | "closeOnConfirm"> {
+    beforeClose?: HysDrawerBeforeClose;
+    beforeConfirm?: (context: HysDrawerActionContext) => boolean | void | Promise<boolean | void>;
+    placement?: HysDrawerPlacement;
+    size?: HysDrawerSizeName | number | (string & {});
+    drawerClass?: string;
+    drawerStyle?: CSSProperties;
+    overlayStyle?: CSSProperties;
+    bodyTabindex?: number;
+    contained?: boolean;
+    withHeader?: boolean;
+    autofocus?: boolean;
+    transition?: "slide" | "fade" | "slide-fade" | "none" | false;
+    push?: boolean | HysDrawerPushOptions;
+    resizable?: boolean | HysDrawerResizeOptions;
+    resizeValue?: number | null;
+    defaultResizeValue?: number | null;
+    resetSizeOnClose?: boolean;
+    resizeText?: string;
+}
+export interface HysDrawerSlotContext {
+    close: (reasonOrEvent?: HysDrawerCloseReason | Event, event?: Event) => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    closing: boolean;
+    confirming: boolean;
+    busy: boolean;
+    error: string;
+    titleId: string;
+    descriptionId: string;
+    fullscreen: boolean;
+    toggleFullscreen: () => Promise<boolean>;
+    resizing: boolean;
+    size: number;
+    resetSize: () => Promise<boolean>;
+    pushed: boolean;
+}
+export interface HysDrawerSlots {
+    default?: (scope: HysDrawerSlotContext) => VNodeChild;
+    header?: (scope: HysDrawerSlotContext) => VNodeChild;
+    title?: (scope: HysDrawerSlotContext) => VNodeChild;
+    extra?: (scope: HysDrawerSlotContext) => VNodeChild;
+    footer?: (scope: HysDrawerSlotContext) => VNodeChild;
+    loading?: (scope: HysDrawerSlotContext) => VNodeChild;
+    "close-icon"?: (scope: HysDrawerSlotContext) => VNodeChild;
+    "fullscreen-icon"?: (scope: HysDrawerSlotContext) => VNodeChild;
+}
+export interface HysDrawerInstance {
+    readonly element: HTMLElement | undefined;
+    readonly body: HTMLElement | undefined;
+    readonly open: boolean;
+    readonly closing: boolean;
+    readonly confirming: boolean;
+    readonly fullscreen: boolean;
+    readonly resizing: boolean;
+    readonly size: number;
+    readonly pushed: boolean;
+    focus: () => void;
+    show: () => Promise<boolean>;
+    close: (reasonOrEvent?: HysDrawerCloseReason | Event, event?: Event) => Promise<boolean>;
+    hide: () => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    setFullscreen: (value: boolean) => Promise<boolean>;
+    toggleFullscreen: () => Promise<boolean>;
+    resizeTo: (value: number | string) => Promise<boolean>;
+    resetSize: () => Promise<boolean>;
+}
+export declare const drawerSizes: {
+    readonly xs: 280;
+    readonly sm: 360;
+    readonly md: 520;
+    readonly lg: 736;
+    readonly xl: 960;
+    readonly full: "100%";
+};
+export declare const drawerVertical: (placement?: HysDrawerPlacement) => placement is "top" | "bottom";
+export declare function drawerSize(props: HysDrawerProps): string | number;

package/dist/types/composables/feedback.d.ts

@@ -0,0 +1,98 @@
+import type { CSSProperties, VNodeChild } from "vue";
+export type HysAlertTone = "info" | "primary" | "success" | "warning" | "danger";
+export type HysAlertEffect = "light" | "dark" | "outline";
+export type HysAlertTransition = "fade" | "slide" | "collapse" | "none";
+export interface HysAlertCloseContext {
+    reason: "button" | "api";
+    event?: Event;
+    signal: AbortSignal;
+}
+export interface HysAlertProps {
+    tone?: HysAlertTone;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    center?: boolean;
+    visible?: boolean;
+    modelValue?: boolean;
+    defaultVisible?: boolean;
+    effect?: HysAlertEffect;
+    banner?: boolean;
+    bordered?: boolean;
+    size?: "sm" | "md" | "lg";
+    closeText?: string;
+    closeLabel?: string;
+    disabled?: boolean;
+    beforeClose?: (context: HysAlertCloseContext) => boolean | void | Promise<boolean | void>;
+    transition?: HysAlertTransition;
+    transitionDuration?: number;
+    appear?: boolean;
+    ariaLabel?: string;
+    ariaLive?: "off" | "polite" | "assertive";
+    ariaAtomic?: boolean;
+}
+export interface HysAlertSlotContext {
+    tone: HysAlertTone;
+    visible: boolean;
+    closing: boolean;
+    disabled: boolean;
+    close: () => Promise<boolean>;
+}
+export interface HysAlertSlots {
+    default?: (context: HysAlertSlotContext) => VNodeChild;
+    title?: (context: HysAlertSlotContext) => VNodeChild;
+    description?: (context: HysAlertSlotContext) => VNodeChild;
+    icon?: (context: HysAlertSlotContext) => VNodeChild;
+    action?: (context: HysAlertSlotContext) => VNodeChild;
+    "close-icon"?: (context: HysAlertSlotContext) => VNodeChild;
+}
+export interface HysAlertInstance {
+    readonly element: HTMLElement | undefined;
+    readonly visible: boolean;
+    readonly closing: boolean;
+    close: () => Promise<boolean>;
+    show: () => Promise<boolean>;
+}
+export type HysEmptyIllustration = "inbox" | "simple" | "default";
+export interface HysEmptyProps {
+    title?: string | false;
+    description?: string | false;
+    image?: string | false;
+    imageSize?: number;
+    imageStyle?: CSSProperties;
+    imageFit?: "contain" | "cover" | "fill" | "none" | "scale-down";
+    imageAlt?: string;
+    imageLoading?: "eager" | "lazy";
+    crossOrigin?: "" | "anonymous" | "use-credentials";
+    referrerPolicy?: ReferrerPolicy;
+    illustration?: HysEmptyIllustration;
+    size?: "sm" | "md" | "lg";
+    showImageLoading?: boolean;
+    ariaLabel?: string;
+    ariaLive?: "off" | "polite" | "assertive";
+}
+export interface HysEmptySlotContext {
+    title: string | false;
+    description: string | false;
+    imageLoading: boolean;
+    imageError: boolean;
+    retryImage: () => boolean;
+}
+export interface HysEmptySlots {
+    default?: (context: HysEmptySlotContext) => VNodeChild;
+    image?: (context: HysEmptySlotContext) => VNodeChild;
+    title?: (context: HysEmptySlotContext) => VNodeChild;
+    description?: (context: HysEmptySlotContext) => VNodeChild;
+    action?: (context: HysEmptySlotContext) => VNodeChild;
+    fallback?: (context: HysEmptySlotContext) => VNodeChild;
+}
+export interface HysEmptyInstance {
+    readonly element: HTMLElement | undefined;
+    readonly imageElement: HTMLImageElement | undefined;
+    readonly loadingImage: boolean;
+    readonly failedImage: boolean;
+    retryImage: () => boolean;
+}
+export declare function feedbackImage(value: string | false | undefined): string | undefined;
+export declare const feedbackNumber: (value: number | undefined, fallback: number, min: number, max: number) => number;

package/dist/types/composables/floatingPosition.d.ts

@@ -0,0 +1,14 @@
+import type { Placement } from "./useFloating";
+export declare function positionFloating(anchor: DOMRect, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}, placement: Placement, gap: number, padding: number, flip: boolean): {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    placement: Placement;
+};

package/dist/types/composables/formContext.d.ts

@@ -123,6 +123,8 @@ export interface HysFieldContext {
     invalid?: ComputedRef<boolean>;
     status?: ComputedRef<HysFormStatus>;
     validate?: (trigger?: HysFormTrigger) => Promise<boolean>;
+    /** Temporarily defer model-watch validation during a continuous control gesture. */
+    deferChangeValidation?: () => () => void;
     disabled?: ComputedRef<boolean>;
     size?: ComputedRef<"sm" | "md" | "lg">;
 }