hys-ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,101 @@
+import { type HysColor, type HysColorPickerProps, type HysColorPickerContext } from "./color";
+export declare function useColorPicker(props: HysColorPickerProps, emit: (name: string, ...args: any[]) => void): {
+    attrs: import("vue").Attrs;
+    field: import("./formContext").HysFieldContext | undefined;
+    control: {
+        disabled: import("vue").ComputedRef<boolean>;
+        size: import("vue").ComputedRef<"sm" | "md" | "lg">;
+        label: import("vue").ComputedRef<string | undefined>;
+    };
+    element: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    trigger: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    input: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+    panel: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    live: import("vue").Ref<boolean, boolean>;
+    draft: import("vue").Ref<string, string>;
+    working: import("vue").Ref<{
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    }, HysColor | {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    }>;
+    hasColor: import("vue").Ref<boolean, boolean>;
+    focused: import("vue").Ref<boolean, boolean>;
+    errorId: string;
+    panelId: string;
+    value: import("vue").ComputedRef<string>;
+    locked: import("vue").ComputedRef<boolean>;
+    format: import("vue").ComputedRef<import("./color").HysColorFormat>;
+    serialized: import("vue").ComputedRef<string>;
+    css: import("vue").ComputedRef<string>;
+    valid: import("vue").ComputedRef<boolean>;
+    dirty: import("vue").ComputedRef<boolean>;
+    status: import("vue").ComputedRef<import("./formContext").HysFormStatus | undefined>;
+    floating: {
+        open: import("vue").Ref<boolean, boolean>;
+        style: import("vue").ComputedRef<{
+            zIndex: string;
+        }>;
+        placement: import("vue").Ref<import("./useFloating").Placement, import("./useFloating").Placement>;
+        update: () => void;
+        show: (force?: boolean) => Promise<void>;
+        close: (restore?: boolean, force?: boolean) => void;
+        toggle: () => void | Promise<void>;
+        restoringFocus: import("vue").Ref<boolean, boolean>;
+        schedule: () => void;
+        isTop: () => boolean;
+    };
+    open: import("vue").ComputedRef<boolean>;
+    teleportTo: import("vue").ComputedRef<Element>;
+    presets: import("vue").ComputedRef<{
+        value: string;
+        color: string;
+        parsed: HysColor;
+        key: string;
+    }[]>;
+    context: import("vue").ComputedRef<HysColorPickerContext>;
+    gesture: import("vue").ShallowRef<{
+        node: HTMLElement;
+        id: number;
+        kind: "palette" | "hue" | "alpha";
+        rect: DOMRect;
+        value: string;
+        color: HysColor;
+        hasColor: boolean;
+        lastRequest: string;
+        releaseValidation: () => void;
+    } | undefined, {
+        node: HTMLElement;
+        id: number;
+        kind: "palette" | "hue" | "alpha";
+        rect: DOMRect;
+        value: string;
+        color: HysColor;
+        hasColor: boolean;
+        lastRequest: string;
+        releaseValidation: () => void;
+    } | undefined>;
+    sync: () => void;
+    publish: (final?: boolean) => Promise<boolean>;
+    setColor: (raw: string) => Promise<boolean>;
+    commitText: () => Promise<boolean>;
+    confirm: () => Promise<boolean>;
+    clear: () => Promise<boolean>;
+    cancel: () => void;
+    show: () => Promise<boolean>;
+    hide: (restore?: boolean) => Promise<boolean>;
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    focusIn: (event: FocusEvent) => void;
+    focusOut: (event: FocusEvent) => void;
+    start: (event: PointerEvent, kind: "hue" | "alpha" | "palette") => void;
+    move: (event: PointerEvent) => void;
+    end: (event: PointerEvent) => Promise<void>;
+    pointerCancel: (event: PointerEvent) => void;
+    keyboard: (event: KeyboardEvent, kind: "hue" | "alpha" | "palette") => void;
+};

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

@@ -0,0 +1,81 @@
+import { type CSSProperties, type Ref } from "vue";
+import { type HysContextMenuProps, type HysMenuKey, type MenuRow, type HysMenuShowOptions } from "./menu";
+export declare function useContextMenu<N extends object>(props: HysContextMenuProps<N>, root: Ref<HTMLElement | undefined>, layer: Ref<HTMLElement | undefined>, panel: Ref<HTMLElement | undefined>, id: string, emit: (name: string, ...args: any[]) => void): {
+    control: {
+        disabled: import("vue").ComputedRef<boolean>;
+        size: import("vue").ComputedRef<"sm" | "md" | "lg">;
+        label: import("vue").ComputedRef<string | undefined>;
+    };
+    live: Ref<boolean, boolean>;
+    busy: import("vue").ComputedRef<boolean>;
+    graph: import("vue").ComputedRef<{
+        roots: MenuRow<N>[];
+        all: MenuRow<N>[];
+        byKey: Map<string, MenuRow<N>>;
+    }>;
+    triggers: import("vue").ComputedRef<any[]>;
+    open: Ref<boolean, boolean>;
+    branches: import("vue").ComputedRef<MenuRow<N>[]>;
+    menus: import("vue").ComputedRef<MenuRow<N>[][]>;
+    openPath: import("vue").ComputedRef<HysMenuKey[]>;
+    checkedKeys: import("vue").ComputedRef<HysMenuKey[]>;
+    selectedKeys: import("vue").ComputedRef<HysMenuKey[]>;
+    context: (row: MenuRow<N>) => {
+        item: N;
+        value: HysMenuKey | undefined;
+        label: string;
+        path: N[];
+        keys: HysMenuKey[];
+        level: number;
+        disabled: boolean;
+        checked: boolean;
+        selected: boolean;
+        expanded: boolean;
+        submenu: boolean;
+    };
+    tabbable: (row: MenuRow<N>) => 0 | -1;
+    active: Ref<Map<number, HysMenuKey> & Omit<Map<number, HysMenuKey>, keyof Map<any, any>>, Map<number, HysMenuKey> | (Map<number, HysMenuKey> & Omit<Map<number, HysMenuKey>, keyof Map<any, any>>)>;
+    childStyles: import("vue").ShallowRef<Record<number, CSSProperties>, Record<number, CSSProperties>>;
+    floating: {
+        open: Ref<boolean, boolean>;
+        style: import("vue").ComputedRef<{
+            zIndex: string;
+        }>;
+        placement: Ref<import("./useFloating").Placement, import("./useFloating").Placement>;
+        update: () => void;
+        show: (force?: boolean) => Promise<void>;
+        close: (restore?: boolean, force?: boolean) => void;
+        toggle: () => void | Promise<void>;
+        restoringFocus: Ref<boolean, boolean>;
+        schedule: () => void;
+        isTop: () => boolean;
+    };
+    forceHide: () => void;
+    focusableChild: Ref<boolean, boolean>;
+    measureTrigger: () => void;
+    setPanel: (level: number, element?: HTMLElement) => void;
+    scheduleLayout: (updateRoot?: boolean) => void;
+    show: (event?: MouseEvent | KeyboardEvent | HysMenuShowOptions) => Promise<boolean>;
+    hide: (restore?: boolean) => Promise<boolean>;
+    focus: () => void;
+    toggle: () => Promise<boolean>;
+    focusItem: (key: HysMenuKey) => Promise<boolean>;
+    openSubmenu: (key: HysMenuKey, focusChild?: boolean) => Promise<boolean>;
+    closeSubmenus: () => Promise<boolean>;
+    setCheckedKeys: (keys: readonly HysMenuKey[]) => Promise<boolean>;
+    setSelectedKeys: (keys: readonly HysMenuKey[]) => Promise<boolean>;
+    choose: (row: MenuRow<N>, event?: MouseEvent | KeyboardEvent) => Promise<boolean>;
+    setActive: (row: MenuRow<N>, focus?: boolean) => void;
+    hoverRoot: (value: boolean, event?: PointerEvent) => void;
+    enterPanel: () => void;
+    hoverRow: (row: MenuRow<N>) => void;
+    triggerClick: (event: MouseEvent) => void;
+    contextmenu: (event: MouseEvent) => void;
+    triggerFocus: (event: FocusEvent) => void;
+    focusOut: (event: FocusEvent) => void;
+    triggerKey: (event: KeyboardEvent) => void;
+    keyboard: (level: number, event: KeyboardEvent) => void;
+    first: (level?: number, last?: boolean) => void;
+    setPath: (keys: readonly HysMenuKey[], focusChild?: boolean) => Promise<boolean>;
+    getItems: () => N[];
+};

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

@@ -0,0 +1,15 @@
+import { type ComputedRef } from "vue";
+import type { HysDataGridProps, HysDataGridQuery } from "./dataGrid";
+export declare function useDataGridRemote<T extends object>(props: HysDataGridProps<T>, query: ComputedRef<HysDataGridQuery>, onError: (error: unknown) => void): {
+    pending: import("vue").Ref<boolean, boolean>;
+    failure: import("vue").ShallowRef<{
+        error: unknown;
+        query: string;
+    } | undefined, {
+        error: unknown;
+        query: string;
+    } | undefined>;
+    reload: () => Promise<void>;
+    sourceRows: ComputedRef<readonly T[]>;
+    remoteTotal: ComputedRef<number | undefined>;
+};

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

@@ -1,4 +1,17 @@
-import { type Ref } from 'vue';
-export declare function useDialog(open: Ref<boolean>, dialog: Ref<HTMLElement | undefined>, close: () => void): {
-    active: Ref<boolean, boolean>;
+import { type Ref } from "vue";
+interface DialogOptions {
+    lockScroll?: () => boolean;
+    trapFocus?: () => boolean;
+    restoreFocus?: () => boolean;
+    initialFocus?: () => HTMLElement | false | undefined;
+    zIndex?: () => number | undefined;
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    childVisible?: () => boolean;
+}
+export declare function useDialog(open: Ref<boolean>, dialog: Ref<HTMLElement | undefined>, close: () => void, options?: DialogOptions): {
+    active: import("vue").ComputedRef<boolean>;
+    zIndex: import("vue").ComputedRef<number>;
+    focus: () => void;
 };
+export {};

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

@@ -0,0 +1,6 @@
+import { type Ref, type CSSProperties } from "vue";
+import type { HysDrawerProps } from "./drawer";
+export declare function useDrawerPush(props: HysDrawerProps, shown: Readonly<Ref<boolean>>, fullscreen: Readonly<Ref<boolean>>): {
+    pushed: import("vue").ComputedRef<boolean>;
+    style: import("vue").ComputedRef<CSSProperties>;
+};

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

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+import { type HysDrawerProps } from "./drawer";
+export declare function useDrawerResize(props: HysDrawerProps, root: Ref<HTMLElement | undefined>, panel: Ref<HTMLElement | undefined>, shown: Readonly<Ref<boolean>>, fullscreen: Readonly<Ref<boolean>>, busy: Readonly<Ref<boolean>>, emit: (name: string, ...args: any[]) => void): {
+    handle: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    resizing: Ref<boolean, boolean>;
+    size: import("vue").ComputedRef<number>;
+    vertical: import("vue").ComputedRef<boolean>;
+    limits: (availableSize?: number) => {
+        min: number;
+        max: number;
+    };
+    model: {
+        current: import("vue").ComputedRef<number | null>;
+        commit: (value: number | null, update: (value: number | null) => void, change: (value: number | null) => void, notifyOnRequest?: boolean) => Promise<boolean>;
+        reset: () => void;
+        invalidate: () => void;
+        isLive: () => boolean;
+    };
+    resolvedSize: import("vue").ComputedRef<number | undefined>;
+    start: (event: PointerEvent) => void;
+    stop: (cancelled?: boolean) => Promise<boolean>;
+    keyboard: (event: KeyboardEvent) => Promise<void>;
+    resizeTo: (value: number | string) => Promise<boolean>;
+    reset: () => Promise<boolean>;
+    measure: () => void;
+    resetAfterClose: () => void;
+};

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

@@ -1,5 +1,13 @@
 import { type Ref } from "vue";
-export type Placement = "bottom-start" | "bottom-end" | "top-start" | "top-end" | "right" | "left";
+export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface FloatingPosition {
+    anchor: DOMRect;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    placement: Placement;
+}
 export interface FloatingAnchor {
     getBoundingClientRect(): DOMRect;
     contains(node: Node | null): boolean;
@@ -12,15 +20,26 @@ export declare function useFloating(anchor: Readonly<Ref<FloatingAnchor | undefi
     padding?: number;
     matchWidth?: boolean | "min" | (() => boolean | "min");
     width?: () => number | string | undefined;
+    maxWidth?: () => number | string | undefined;
     requestOpen?: (open: boolean, restoreFocus?: boolean) => boolean | void;
     closeOnTab?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOutside?: boolean;
+    autoAdjustOverflow?: boolean;
+    strategy?: "fixed" | "absolute";
+    zIndex?: () => number | undefined;
+    onPosition?: (position: FloatingPosition) => void;
 }): {
     open: Ref<boolean, boolean>;
-    style: Ref<Record<string, string>, Record<string, string>>;
+    style: import("vue").ComputedRef<{
+        zIndex: string;
+    }>;
     placement: Ref<Placement, Placement>;
     update: () => void;
     show: (force?: boolean) => Promise<void>;
     close: (restore?: boolean, force?: boolean) => void;
     toggle: () => void | Promise<void>;
     restoringFocus: Ref<boolean, boolean>;
+    schedule: () => void;
+    isTop: () => boolean;
 };

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

@@ -0,0 +1,44 @@
+import { type VNodeChild } from "vue";
+import { type HysConfig } from "../config";
+import type { HysModalProps, HysModalActionContext, HysModalCloseReason, HysModalSlotContext } from "./modal";
+export interface HysModalResult {
+    action: "confirm" | "cancel" | "destroy" | "owner-dispose";
+    reason: HysModalCloseReason | "destroy" | "owner-dispose";
+}
+export interface HysModalOptions extends Omit<HysModalProps, "open" | "modelValue" | "defaultOpen" | "fullscreen" | "appendTo"> {
+    content?: VNodeChild | ((context: HysModalSlotContext) => VNodeChild);
+    onOk?: (context: HysModalActionContext) => boolean | void | Promise<boolean | void>;
+    onCancel?: (context: HysModalActionContext) => boolean | void | Promise<boolean | void>;
+    onAfterClose?: (result: HysModalResult) => void;
+}
+export interface HysModalHandle {
+    readonly id: string;
+    readonly closed: Promise<HysModalResult>;
+    update(options: Partial<HysModalOptions>): void;
+    confirm(): Promise<boolean>;
+    cancel(): Promise<boolean>;
+    close(): Promise<boolean>;
+    destroy(): void;
+}
+export interface HysModalConfig {
+    defaults?: HysModalOptions;
+    appendTo?: string | HTMLElement;
+}
+export interface HysModalApi {
+    show(options: HysModalOptions): HysModalHandle;
+    confirm(options: HysModalOptions | string): HysModalHandle;
+    info(options: HysModalOptions | string): HysModalHandle;
+    success(options: HysModalOptions | string): HysModalHandle;
+    warning(options: HysModalOptions | string): HysModalHandle;
+    error(options: HysModalOptions | string): HysModalHandle;
+    destroyAll(): void;
+}
+export interface HysModalService extends HysModalApi {
+    dispose(): void;
+}
+export interface HysModalServiceConfig extends HysModalConfig, HysConfig {
+}
+/** Call in setup. Dialogs inherit ancestor providers and are disposed when their owner leaves. */
+export declare function useHysModal(config?: HysModalConfig): HysModalApi;
+/** Standalone browser service. Call dispose when its owning application is destroyed. */
+export declare function createHysModal(config?: HysModalServiceConfig): HysModalService;

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

@@ -0,0 +1,62 @@
+import { type Ref } from "vue";
+import type { HysModalProps, HysModalCloseReason } from "./modal";
+export declare function useModal(props: HysModalProps, dialog: Ref<HTMLElement | undefined>, emit: (name: string, ...args: any[]) => void, options?: {
+    interaction?: boolean;
+}): {
+    model: {
+        current: import("vue").ComputedRef<boolean>;
+        commit: (value: boolean, update: (value: boolean) => void, change: (value: boolean) => void, notifyOnRequest?: boolean) => Promise<boolean>;
+        reset: () => void;
+        invalidate: () => void;
+        isLive: () => boolean;
+    };
+    alpha: (value: number) => number;
+    fullscreen: import("vue").ComputedRef<boolean>;
+    live: Ref<boolean, boolean>;
+    state: {
+        active: import("vue").ComputedRef<boolean>;
+        zIndex: import("vue").ComputedRef<number>;
+        focus: () => void;
+    };
+    shown: Ref<boolean, boolean>;
+    engaged: Ref<boolean, boolean>;
+    rendered: Ref<boolean, boolean>;
+    leaving: Ref<boolean, boolean>;
+    error: Ref<string, string>;
+    confirming: import("vue").ComputedRef<boolean>;
+    closing: import("vue").ComputedRef<boolean>;
+    busy: import("vue").ComputedRef<boolean>;
+    motion: import("vue").ComputedRef<boolean>;
+    interaction: {
+        position: import("vue").ShallowRef<import("./modal").HysModalPosition, import("./modal").HysModalPosition>;
+        dimensions: import("vue").ShallowRef<import("./modal").HysModalSize | undefined, import("./modal").HysModalSize | undefined>;
+        previewing: Ref<boolean, boolean>;
+        previewLayer: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+        getPosition: () => import("./modal").HysModalPosition;
+        getDimensions: () => import("./modal").HysModalSize | undefined;
+        dragging: Ref<boolean, boolean>;
+        resizing: Ref<boolean, boolean>;
+        gesturing: import("vue").ComputedRef<boolean>;
+        start: (event: PointerEvent, kind: "drag" | "resize") => void;
+        stop: (cancel?: boolean) => void;
+        headerKey: (event: KeyboardEvent) => void;
+        resizeKey: (event: KeyboardEvent) => void;
+        resetPosition: () => void;
+        resetSize: () => void;
+        setPosition: (next: import("./modal").HysModalPosition) => void;
+        setSize: (next: import("./modal").HysModalSize) => void;
+        clampViewport: () => void;
+        activate(): void;
+    };
+    show: () => Promise<boolean>;
+    requestClose: (reasonOrEvent?: HysModalCloseReason | Event, event?: Event) => Promise<boolean>;
+    confirm: (event?: Event) => Promise<boolean>;
+    cancel: (event?: Event) => Promise<boolean>;
+    setFullscreen: (value: boolean) => Promise<boolean>;
+    toggleFullscreen: () => Promise<boolean>;
+    afterEnter: () => Promise<void>;
+    afterLeave: () => Promise<void>;
+    key: (event: KeyboardEvent) => void;
+    maskDown: (event: PointerEvent) => void;
+    maskUp: (event: PointerEvent) => void;
+};

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

@@ -0,0 +1,27 @@
+import { type Ref } from "vue";
+import { type HysModalProps, type HysModalPosition, type HysModalSize } from "./modal";
+export declare function useModalInteraction(props: HysModalProps, dialog: Ref<HTMLElement | undefined>, visible: Readonly<Ref<boolean>>, fullscreen: Readonly<Ref<boolean>>, emit: (name: string, ...args: any[]) => void, options?: {
+    beforeStart?: () => void;
+    motion?: () => boolean;
+    enabled?: boolean;
+}): {
+    position: import("vue").ShallowRef<HysModalPosition, HysModalPosition>;
+    dimensions: import("vue").ShallowRef<HysModalSize | undefined, HysModalSize | undefined>;
+    previewing: Ref<boolean, boolean>;
+    previewLayer: Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    getPosition: () => HysModalPosition;
+    getDimensions: () => HysModalSize | undefined;
+    dragging: Ref<boolean, boolean>;
+    resizing: Ref<boolean, boolean>;
+    gesturing: import("vue").ComputedRef<boolean>;
+    start: (event: PointerEvent, kind: "drag" | "resize") => void;
+    stop: (cancel?: boolean) => void;
+    headerKey: (event: KeyboardEvent) => void;
+    resizeKey: (event: KeyboardEvent) => void;
+    resetPosition: () => void;
+    resetSize: () => void;
+    setPosition: (next: HysModalPosition) => void;
+    setSize: (next: HysModalSize) => void;
+    clampViewport: () => void;
+    activate(): void;
+};