hys-ui 0.1.1 → 0.2.0

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

@@ -0,0 +1,180 @@
+import type { CSSProperties, VNodeChild } from "vue";
+export type HysTransferKey = string | number;
+export type HysTransferSide = "left" | "right";
+export interface HysTransferOption<K extends HysTransferKey = HysTransferKey> {
+    value: K;
+    label: string;
+    disabled?: boolean;
+}
+export interface HysTransferFieldNames {
+    value?: string;
+    label?: string;
+    disabled?: string;
+}
+export interface HysTransferPagination {
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showSizeChanger?: boolean;
+    compact?: boolean;
+}
+export interface HysTransferLocale {
+    leftTitle: string;
+    rightTitle: string;
+    search: string;
+    emptyLeft: string;
+    emptyRight: string;
+    noMatch: string;
+    loading: string;
+    selectAll: string;
+    invert: string;
+    remove: string;
+    moveRight: string;
+    moveLeft: string;
+    dragRight: string;
+    dragLeft: string;
+    dragCount: string;
+    moved: string;
+    added: string;
+    removed: string;
+    firstPage: string;
+    previousPage: string;
+    nextPage: string;
+    lastPage: string;
+    perPage: string;
+}
+export interface HysTransferHeaderInfo {
+    side: HysTransferSide;
+    total: number;
+    filtered: number;
+    checked: number;
+}
+export interface HysTransferRecord<T extends object, K extends HysTransferKey> {
+    key: K;
+    label: string;
+    disabled: boolean;
+    option: T;
+}
+export interface HysTransferProps<T extends object, K extends HysTransferKey> {
+    options: readonly T[];
+    modelValue?: readonly K[];
+    defaultValue?: readonly K[];
+    fieldNames?: HysTransferFieldNames;
+    rowKey?: (option: T) => K;
+    disabled?: boolean;
+    loading?: boolean;
+    filterable?: boolean;
+    filterMethod?: (query: string, option: T, side: HysTransferSide) => boolean;
+    filterPlaceholder?: string | readonly [string, string];
+    searchValues?: Partial<Record<HysTransferSide, string>>;
+    titles?: readonly [string, string];
+    buttonTexts?: readonly [string, string];
+    showSelectAll?: boolean;
+    showInvert?: boolean;
+    checkedKeys?: readonly K[];
+    defaultCheckedKeys?: readonly K[];
+    leftDefaultChecked?: readonly K[];
+    rightDefaultChecked?: readonly K[];
+    targetOrder?: "original" | "push" | "unshift";
+    oneWay?: boolean;
+    draggable?: boolean;
+    dragChecked?: boolean;
+    animated?: boolean;
+    size?: "sm" | "md" | "lg";
+    listHeight?: number;
+    listStyle?: CSSProperties;
+    operationStyle?: CSSProperties;
+    status?: "error" | "warning";
+    pagination?: boolean | HysTransferPagination;
+    pages?: Partial<Record<HysTransferSide, number>>;
+    pageSizes?: Partial<Record<HysTransferSide, number>>;
+    virtual?: boolean;
+    itemHeight?: number;
+    overscan?: number;
+    locale?: Partial<HysTransferLocale>;
+    format?: (info: HysTransferHeaderInfo) => string;
+    renderContent?: (option: T, side: HysTransferSide) => VNodeChild;
+    ariaLabel?: string;
+    validateEvent?: boolean;
+}
+export interface HysTransferPanelContext<T extends object, K extends HysTransferKey> {
+    side: HysTransferSide;
+    items: T[];
+    filteredItems: T[];
+    checkedKeys: K[];
+    disabled: boolean;
+    query: string;
+    check: (key: K, checked?: boolean) => Promise<boolean>;
+    setCheckedKeys: (keys: readonly K[]) => Promise<boolean>;
+    checkAll: (checked?: boolean) => Promise<boolean>;
+    remove: (keys: readonly K[]) => Promise<boolean>;
+}
+export interface HysTransferInstance<T extends object = HysTransferOption, K extends HysTransferKey = HysTransferKey> {
+    readonly element: HTMLElement | undefined;
+    readonly targetKeys: K[];
+    readonly checkedKeys: K[];
+    getCheckedKeys: (side?: HysTransferSide) => K[];
+    getTargetItems: () => T[];
+    move: (direction: HysTransferSide, keys?: readonly K[]) => Promise<boolean>;
+    remove: (keys: readonly K[]) => Promise<boolean>;
+    setCheckedKeys: (keys: readonly K[]) => Promise<boolean>;
+    clearChecked: (side?: HysTransferSide) => Promise<boolean>;
+    checkAll: (side: HysTransferSide, checked?: boolean, scope?: "page" | "filtered" | "all") => Promise<boolean>;
+    invertSelection: (side: HysTransferSide, scope?: "page" | "filtered" | "all") => Promise<boolean>;
+    setSearch: (side: HysTransferSide, value: string) => void;
+    clearSearch: (side?: HysTransferSide) => void;
+    setPage: (side: HysTransferSide, page: number) => void;
+    setPageSize: (side: HysTransferSide, size: number) => void;
+    scrollTo: (side: HysTransferSide, options: {
+        key?: K;
+        top?: number;
+        behavior?: ScrollBehavior;
+    }) => Promise<void>;
+    focus: (side?: HysTransferSide) => void;
+}
+export declare const transferToken: (key: HysTransferKey) => string;
+export interface HysTransferSlots<T extends object, K extends HysTransferKey> {
+    default?: (props: {
+        option: T;
+        label: string;
+        side: HysTransferSide;
+        checked: boolean;
+        disabled: boolean;
+    }) => any;
+    option?: (props: {
+        option: T;
+        label: string;
+        side: HysTransferSide;
+        checked: boolean;
+        disabled: boolean;
+    }) => any;
+    panel?: (props: HysTransferPanelContext<T, K>) => any;
+    header?: (props: {
+        info: HysTransferHeaderInfo;
+        side: HysTransferSide;
+        allChecked: boolean;
+        indeterminate: boolean;
+        checkAll: (checked?: boolean) => Promise<boolean>;
+    }) => any;
+    footer?: (props: HysTransferPanelContext<T, K>) => any;
+    "left-footer"?: (props: HysTransferPanelContext<T, K>) => any;
+    "right-footer"?: (props: HysTransferPanelContext<T, K>) => any;
+    empty?: (props: HysTransferPanelContext<T, K>) => any;
+    "left-empty"?: (props: HysTransferPanelContext<T, K>) => any;
+    "right-empty"?: (props: HysTransferPanelContext<T, K>) => any;
+    loading?: (props: {
+        side: HysTransferSide;
+    }) => any;
+    operations?: (props: {
+        move: (side: HysTransferSide, keys?: readonly K[]) => Promise<boolean>;
+        disabled: boolean;
+        leftChecked: K[];
+        rightChecked: K[];
+    }) => any;
+}
+export declare function transferValue(option: object, path: string): unknown;
+export declare function transferRows<T extends object, K extends HysTransferKey>(props: Pick<HysTransferProps<T, K>, "options" | "fieldNames" | "rowKey">): {
+    rows: HysTransferRecord<T, K>[];
+    map: Map<K, HysTransferRecord<T, K>>;
+};
+export declare const transferWords: (locale?: Partial<HysTransferLocale>) => HysTransferLocale;
+export declare const transferLabel: (text: string, values: Record<string, string | number>) => string;

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

@@ -0,0 +1,237 @@
+import type { CSSProperties, VNodeChild } from "vue";
+export type HysTreeKey = string | number;
+export type HysTreeValue = HysTreeKey | readonly HysTreeKey[] | null;
+export interface HysTreeNode<K extends HysTreeKey = HysTreeKey> {
+    id: K;
+    label: string;
+    children?: HysTreeNode<K>[];
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    icon?: string;
+    hasChildren?: boolean;
+    isLeaf?: boolean;
+    loading?: boolean;
+}
+/** Existing string-key node type remains available. */
+export type TreeNode = HysTreeNode<string>;
+export type HysTreeDropPosition = "before" | "inside" | "after";
+export interface HysTreeFieldNames {
+    id: string;
+    label: string;
+    children: string;
+    disabled: string;
+    disableCheckbox: string;
+    selectable: string;
+    checkable: string;
+    icon: string;
+    hasChildren: string;
+    isLeaf: string;
+}
+export interface HysTreeLoadContext {
+    signal: AbortSignal;
+    key: HysTreeKey;
+}
+export interface HysTreeLocale {
+    search: string;
+    empty: string;
+    noMatch: string;
+    loading: string;
+    retry: string;
+    loadError: string;
+    expand: string;
+    collapse: string;
+    check: string;
+    select: string;
+    clear: string;
+    close: string;
+    tree: string;
+}
+export interface HysTreeRecord<N extends object> {
+    key: HysTreeKey;
+    node: N;
+    label: string;
+    parent?: HysTreeKey;
+    children: HysTreeKey[];
+    depth: number;
+    index: number;
+    pos: number;
+    size: number;
+    disabled: boolean;
+    checkboxDisabled: boolean;
+    selectable: boolean;
+    checkable: boolean;
+    leaf: boolean;
+    hasChildren: boolean;
+    icon: unknown;
+}
+export interface HysTreeCheckInfo<N extends object> {
+    node?: N;
+    checked?: boolean;
+    checkedKeys: HysTreeKey[];
+    checkedNodes: N[];
+    halfCheckedKeys: HysTreeKey[];
+    halfCheckedNodes: N[];
+    event?: Event;
+}
+export interface HysTreeSelectInfo<N extends object> {
+    node: N | null;
+    selected: boolean;
+    selectedKeys: HysTreeKey[];
+    selectedNodes: N[];
+    event?: Event;
+}
+export interface HysTreeDropInfo<N extends object, K extends HysTreeKey = HysTreeKey> {
+    dragId: K;
+    targetId: K;
+    position: HysTreeDropPosition;
+    dragNode: N;
+    targetNode: N;
+    event: DragEvent;
+}
+export interface HysTreeNodeContext<N extends object> {
+    node: N;
+    key: HysTreeKey;
+    label: string;
+    depth: number;
+    expanded: boolean;
+    selected: boolean;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    loading: boolean;
+    leaf: boolean;
+}
+export interface HysTreeProps<N extends object = TreeNode, V extends HysTreeValue = HysTreeValue> {
+    nodes: readonly N[];
+    modelValue?: V;
+    defaultValue?: V;
+    checkedKeys?: readonly HysTreeKey[];
+    defaultCheckedKeys?: readonly HysTreeKey[];
+    halfCheckedKeys?: readonly HysTreeKey[];
+    expandedKeys?: readonly HysTreeKey[];
+    defaultExpandedKeys?: readonly HysTreeKey[];
+    loadedKeys?: readonly HysTreeKey[];
+    multiple?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    searchable?: boolean;
+    disabled?: boolean;
+    inheritDisabled?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    defaultExpandAll?: boolean;
+    autoExpandParent?: boolean;
+    accordion?: boolean;
+    expandOnClickNode?: boolean;
+    expandOnDoubleClick?: boolean;
+    checkOnClickNode?: boolean;
+    checkOnClickLeaf?: boolean;
+    selectOnClickNode?: boolean;
+    allowDeselect?: boolean;
+    highlightCurrent?: boolean;
+    fieldNames?: Partial<HysTreeFieldNames>;
+    nodeKey?: string | ((node: N) => HysTreeKey);
+    showLine?: boolean;
+    showIcon?: boolean;
+    indent?: number;
+    blockNode?: boolean;
+    virtual?: boolean;
+    rowHeight?: number;
+    viewportHeight?: number;
+    overscan?: number;
+    draggable?: boolean;
+    dragExpandDelay?: number;
+    allowDrag?: (node: N) => boolean;
+    allowDrop?: (drag: N, target: N, position: HysTreeDropPosition) => boolean;
+    contextMenu?: boolean;
+    checkStrictly?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    searchPlaceholder?: string;
+    filterNode?: (query: string, node: N) => boolean;
+    filterMode?: "hide" | "highlight";
+    showMatchedChildren?: boolean;
+    emptyText?: string;
+    ariaLabel?: string;
+    locale?: Partial<HysTreeLocale>;
+    loadChildren?: (node: N, context: HysTreeLoadContext) => Promise<readonly N[]>;
+    renderContent?: (context: HysTreeNodeContext<N>) => VNodeChild;
+    nodeClass?: string | ((node: N) => string | undefined);
+    nodeStyle?: CSSProperties | ((node: N) => CSSProperties | undefined);
+    validateEvent?: boolean;
+}
+export interface HysTreeInstance<N extends object = TreeNode> {
+    readonly element: HTMLElement | undefined;
+    getNode: (key: HysTreeKey | N) => N | undefined;
+    getNodeInfo: (key: HysTreeKey | N) => HysTreeRecord<N> | undefined;
+    getCheckedKeys: (leafOnly?: boolean) => HysTreeKey[];
+    getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => N[];
+    getHalfCheckedKeys: () => HysTreeKey[];
+    getHalfCheckedNodes: () => N[];
+    setCheckedKeys: (keys: readonly HysTreeKey[], leafOnly?: boolean) => Promise<boolean>;
+    setCheckedNodes: (nodes: readonly N[], leafOnly?: boolean) => Promise<boolean>;
+    setChecked: (key: HysTreeKey | N, checked: boolean, deep?: boolean) => Promise<boolean>;
+    getCurrentKey: () => HysTreeKey | null;
+    getCurrentNode: () => N | null;
+    getSelectedKeys: () => HysTreeKey[];
+    setCurrentKey: (key: HysTreeKey | null, expandParents?: boolean) => Promise<boolean>;
+    setCurrentNode: (node: N | null, expandParents?: boolean) => Promise<boolean>;
+    setSelectedKeys: (keys: readonly HysTreeKey[]) => Promise<boolean>;
+    getExpandedKeys: () => HysTreeKey[];
+    setExpandedKeys: (keys: readonly HysTreeKey[]) => Promise<boolean>;
+    expandNode: (key: HysTreeKey, expanded?: boolean) => Promise<boolean>;
+    expandAll: () => Promise<boolean>;
+    collapseAll: () => Promise<boolean>;
+    filter: (value: string) => void;
+    reloadNode: (key: HysTreeKey) => Promise<boolean>;
+    updateKeyChildren: (key: HysTreeKey, children: readonly N[]) => Promise<boolean>;
+    append: (node: N, parent?: HysTreeKey | N) => Promise<boolean>;
+    insertBefore: (node: N, reference: HysTreeKey | N) => Promise<boolean>;
+    insertAfter: (node: N, reference: HysTreeKey | N) => Promise<boolean>;
+    remove: (key: HysTreeKey | N) => Promise<boolean>;
+    scrollTo: (options: {
+        key?: HysTreeKey;
+        top?: number;
+        align?: "top" | "bottom" | "auto";
+        offset?: number;
+        behavior?: ScrollBehavior;
+    }) => Promise<void>;
+    focus: (key?: HysTreeKey) => Promise<void>;
+}
+export declare const treeLocale: HysTreeLocale;
+export declare const treeKey: (v: unknown) => v is HysTreeKey;
+export declare const treeKeys: (v: readonly HysTreeKey[]) => HysTreeKey[];
+export declare function treeField(value: unknown, path: string): unknown;
+export declare function treeAssign<N extends object>(node: N, path: string, value: unknown): N;
+export declare function treeFields<N extends object>(props: HysTreeProps<N>): {
+    id: string;
+    label: string;
+    children: string;
+    disabled: string;
+    disableCheckbox: string;
+    selectable: string;
+    checkable: string;
+    icon: string;
+    hasChildren: string;
+    isLeaf: string;
+};
+export declare function treeIndex<N extends object>(nodes: readonly N[], props: HysTreeProps<N>, asyncChildren?: Map<HysTreeKey, readonly N[]>): {
+    map: Map<HysTreeKey, HysTreeRecord<N>>;
+    rows: HysTreeRecord<N>[];
+    roots: HysTreeKey[];
+    fields: {
+        id: string;
+        label: string;
+        children: string;
+        disabled: string;
+        disableCheckbox: string;
+        selectable: string;
+        checkable: string;
+        icon: string;
+        hasChildren: string;
+        isLeaf: string;
+    };
+    invalid: boolean;
+};

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

@@ -0,0 +1,167 @@
+import type { CSSProperties, VNodeChild } from "vue";
+import { type HysTreeKey, type HysTreeFieldNames, type HysTreeLoadContext, type HysTreeLocale } from "./tree";
+import type { Placement } from "./useFloating";
+export interface HysTreeSelectDataNode<K extends HysTreeKey = HysTreeKey> {
+    value: K;
+    label: string;
+    children?: HysTreeSelectDataNode<K>[];
+    disabled?: boolean;
+    disableCheckbox?: boolean;
+    checkable?: boolean;
+    selectable?: boolean;
+    hasChildren?: boolean;
+    isLeaf?: boolean;
+}
+export type HysTreeSelectNode = HysTreeSelectDataNode<string>;
+export interface HysTreeSelectLabelValue {
+    value: HysTreeKey;
+    label?: VNodeChild;
+    disabled?: boolean;
+}
+export type HysTreeSelectValue = HysTreeKey | HysTreeSelectLabelValue | readonly (HysTreeKey | HysTreeSelectLabelValue)[] | null;
+export interface HysTreeSelectFieldNames extends Omit<HysTreeFieldNames, "id"> {
+    value: string;
+}
+export interface HysTreeSelectSimpleMode {
+    id?: string;
+    parentId?: string;
+    rootParentId?: HysTreeKey | null;
+}
+export type HysTreeSelectStrategy = "all" | "parent" | "child";
+export interface HysTreeSelectItem<N extends object = HysTreeSelectNode> {
+    value: HysTreeKey;
+    label: VNodeChild;
+    node?: N;
+    disabled: boolean;
+    missing: boolean;
+}
+export interface HysTreeSelectChange<N extends object = HysTreeSelectNode> {
+    reason: "select" | "check" | "remove" | "clear" | "api";
+    node?: N;
+    values: HysTreeKey[];
+    items: HysTreeSelectItem<N>[];
+    halfCheckedKeys: HysTreeKey[];
+    event?: Event;
+}
+export interface HysTreeSelectProps<N extends object = HysTreeSelectNode, V extends HysTreeSelectValue = HysTreeSelectValue> {
+    modelValue?: V;
+    defaultValue?: V;
+    nodes: readonly N[];
+    cacheData?: readonly N[];
+    fieldNames?: Partial<HysTreeSelectFieldNames>;
+    nodeKey?: string | ((node: N) => HysTreeKey);
+    simpleMode?: boolean | HysTreeSelectSimpleMode;
+    labelInValue?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    loading?: boolean;
+    size?: "sm" | "md" | "lg";
+    status?: "error" | "warning" | "success";
+    placeholder?: string;
+    ariaLabel?: string;
+    name?: string;
+    multiple?: boolean;
+    leafOnly?: boolean;
+    checkable?: boolean;
+    checkStrictly?: boolean;
+    showCheckedStrategy?: HysTreeSelectStrategy;
+    clearable?: boolean;
+    clearValue?: HysTreeKey | null;
+    removable?: boolean;
+    multipleLimit?: number;
+    maxTagCount?: number;
+    maxTagTextLength?: number;
+    searchable?: boolean;
+    searchValue?: string;
+    defaultSearchValue?: string;
+    searchPlaceholder?: string;
+    filterNode?: (query: string, node: N) => boolean;
+    filterMode?: "hide" | "highlight";
+    showMatchedChildren?: boolean;
+    retainSearch?: boolean;
+    clearSearchAfterSelect?: boolean;
+    remote?: boolean;
+    remoteMethod?: (query: string, context: {
+        signal: AbortSignal;
+    }) => void | readonly N[] | Promise<void | readonly N[]>;
+    debounce?: number;
+    expandedKeys?: readonly HysTreeKey[];
+    defaultExpandedKeys?: readonly HysTreeKey[];
+    defaultExpandAll?: boolean;
+    autoExpandParent?: boolean;
+    accordion?: boolean;
+    expandOnClickNode?: boolean;
+    expandSelected?: boolean;
+    loadedKeys?: readonly HysTreeKey[];
+    loadChildren?: (node: N, context: HysTreeLoadContext) => Promise<readonly N[]>;
+    showLine?: boolean;
+    showIcon?: boolean;
+    indent?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    showOnFocus?: boolean;
+    popupMatchWidth?: boolean;
+    popupWidth?: number | string;
+    popupClass?: string;
+    popupStyle?: CSSProperties;
+    appendTo?: string | HTMLElement | false;
+    placement?: Placement;
+    listHeight?: number;
+    virtual?: boolean;
+    itemHeight?: number;
+    overscan?: number;
+    emptyText?: string;
+    noMatchText?: string;
+    loadingText?: string;
+    locale?: Partial<HysTreeLocale>;
+    validateEvent?: boolean;
+}
+export interface HysTreeSelectInstance<N extends object = HysTreeSelectNode> {
+    readonly element: HTMLElement | undefined;
+    readonly open: boolean;
+    focus: () => void;
+    blur: () => void;
+    show: () => Promise<boolean>;
+    hide: (restoreFocus?: boolean) => void;
+    clear: () => Promise<boolean>;
+    removeTag: (key: HysTreeKey) => Promise<boolean>;
+    setValue: (value: HysTreeSelectValue) => Promise<boolean>;
+    filter: (query: string) => void;
+    getSelectedKeys: () => HysTreeKey[];
+    getSelectedItems: () => HysTreeSelectItem<N>[];
+    getCheckedKeys: (leafOnly?: boolean) => HysTreeKey[];
+    getHalfCheckedKeys: () => HysTreeKey[];
+    getNode: (key: HysTreeKey) => N | undefined;
+    getExpandedKeys: () => HysTreeKey[];
+    setExpandedKeys: (keys: readonly HysTreeKey[]) => Promise<boolean>;
+    expandNode: (key: HysTreeKey, expanded?: boolean) => Promise<boolean>;
+    reloadNode: (key: HysTreeKey) => Promise<boolean>;
+    scrollTo: (options: {
+        key?: HysTreeKey;
+        top?: number;
+        align?: "top" | "bottom" | "auto";
+    }) => Promise<void>;
+}
+export declare function treeSelectFields<N extends object>(props: HysTreeSelectProps<N>): Partial<HysTreeFieldNames>;
+export declare function treeSelectForest<N extends object>(nodes: readonly N[], props: HysTreeSelectProps<N>): {
+    nodes: readonly N[];
+    raw: Map<HysTreeKey, N>;
+};
+export declare const selectTreeIndex: <N extends object>(nodes: readonly N[], props: HysTreeSelectProps<N>) => {
+    map: Map<HysTreeKey, import("./tree").HysTreeRecord<N>>;
+    rows: import("./tree").HysTreeRecord<N>[];
+    roots: HysTreeKey[];
+    fields: {
+        id: string;
+        label: string;
+        children: string;
+        disabled: string;
+        disableCheckbox: string;
+        selectable: string;
+        checkable: string;
+        icon: string;
+        hasChildren: string;
+        isLeaf: string;
+    };
+    invalid: boolean;
+};