vlossom/dist/index.d.ts

Vlossom UI components for Vue

import { AllowedComponentProps } from 'vue';
import { App } from 'vue';
import { Component } from 'vue';
import { ComponentCustomProps } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComponentPublicInstance } from 'vue';
import { ComputedRef } from 'vue';
import { CreateComponentPublicInstanceWithMixins } from 'vue';
import { CSSProperties } from 'vue';
import { DeepReadonly } from 'vue';
import { DefineComponent } from 'vue';
import { Directive } from 'vue';
import { ExtractPropTypes } from 'vue';
import { GlobalComponents } from 'vue';
import { GlobalDirectives } from 'vue';
import { kebabCase } from 'change-case';
import { LucideIcon } from '@lucide/vue';
import { Options } from 'sortablejs';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { RendererElement } from 'vue';
import { RendererNode } from 'vue';
import { ShallowRef } from 'vue';
import { SortableEvent } from 'sortablejs';
import { TemplateRef } from 'vue';
import { VNode } from 'vue';
import { VNodeProps } from 'vue';
import { WritableComputedRef } from 'vue';

export declare const ALERT_OK = 'vlossom:alert-ok';

declare interface AlertModalOptions extends Omit<ModalOptions, 'beforeClose'> {
    styleSet?: VsAlertStyleSet;
    colorScheme?: ColorScheme;
    okText?: string;
}

declare interface AlertPlugin {
    open(content: string, options?: Omit<AlertModalOptions, 'componentProps'>): Promise<void>;
    open(content: Component, options?: AlertModalOptions): Promise<void>;
}

export declare type Alignment = (typeof ALIGNMENTS)[number];

export declare const ALIGNMENTS: readonly ['start', 'center', 'end'];

export declare const ANIMATION_DURATION = 300;

export declare interface AttachInfo {
    placement?: Placement;
    align?: Alignment;
    margin?: number;
    followWidth?: boolean;
}

export declare type AttrsOf<K extends keyof VsComponentRegistry> = InstanceType<VsComponentRegistry[K]>['$attrs'];

export declare interface BarLayout {
    position: CssPosition;
    height: string;
}

export declare interface Breakpoints {
    xs?: string | number;
    sm?: string | number;
    md?: string | number;
    lg?: string | number;
    xl?: string | number;
}

export declare const chromaticParameters: {
    theme: {
        modes: {
            light: {
                backgrounds: {
                    value: string;
                };
            };
            dark: {
                backgrounds: {
                    value: string;
                };
            };
        };
    };
    mobile: {
        modes: {
            mobile: {
                viewport: string;
            };
        };
    };
};

export declare const clipboardUtil: {
    copy(text: string): Promise<boolean>;
};

export declare const COLOR_SCHEMES: readonly [
    'brown',
    'red',
    'orange',
    'amber',
    'yellow',
    'lime',
    'green',
    'emerald',
    'teal',
    'cyan',
    'sky',
    'blue',
    'indigo',
    'violet',
    'purple',
    'fuchsia',
    'pink',
    'rose',
    'gray',
    'none',
];

export declare const COLORS: readonly [
    'brown',
    'red',
    'orange',
    'amber',
    'yellow',
    'lime',
    'green',
    'emerald',
    'teal',
    'cyan',
    'sky',
    'blue',
    'indigo',
    'violet',
    'purple',
    'fuchsia',
    'pink',
    'rose',
    'gray',
];

export declare type ColorScheme = (typeof COLOR_SCHEMES)[number];

export declare const colorScheme: {
    control: any;
    options: readonly [
        'brown',
        'red',
        'orange',
        'amber',
        'yellow',
        'lime',
        'green',
        'emerald',
        'teal',
        'cyan',
        'sky',
        'blue',
        'indigo',
        'violet',
        'purple',
        'fuchsia',
        'pink',
        'rose',
        'gray',
    ];
};

export declare const compareUtil: {
    compareValues: typeof compareValues;
};

declare function compareValues(aValue: unknown, bValue: unknown): number;

export declare const CONFIRM_CANCEL = 'vlossom:confirm-cancel';

export declare const CONFIRM_OK = 'vlossom:confirm-ok';

declare interface ConfirmModalOptions extends Omit<ModalOptions, 'beforeClose'> {
    styleSet?: VsConfirmStyleSet;
    colorScheme?: ColorScheme;
    okText?: string;
    cancelText?: string;
    swapButtons?: boolean;
}

declare interface ConfirmPlugin {
    open(content: string, options?: Omit<ConfirmModalOptions, 'componentProps'>): Promise<boolean>;
    open(content: Component, options?: ConfirmModalOptions): Promise<boolean>;
}

export declare class ContainerStore<
    T extends {
        container: string;
        id: string;
    },
> {
    private _map;
    map: Readonly<
        Ref<ReadonlyMap<string, readonly DeepReadonly<T>[]>, ReadonlyMap<string, readonly DeepReadonly<T>[]>>
    >;
    get size(): number;
    has(container: string): boolean;
    get(container: string): T[];
    set(container: string, value: T[]): void;
    push(container: string, value: T): void;
    remove(container: string, id: string): void;
    pop(container: string): void;
    delete(container: string): void;
    clear(): void;
    private _updateOrDelete;
}

export declare function createVlossom(options: VlossomOptions): any;

export declare type CssPosition = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';

export declare const deviceUtil: {
    isTouchDevice: () => boolean;
};

export declare const domUtil: {
    isBrowser(): boolean;
    getClientRect(element: HTMLElement): DOMRect;
    isScrollableX(element: HTMLElement): boolean;
    isScrollableY(element: HTMLElement): boolean;
};

export declare interface DrawerLayout {
    isOpen: boolean;
    pushContainer: boolean;
    placement: DrawerPlacement;
    size: string;
}

export declare type DrawerLayouts = {
    [key in DrawerPlacement]: DrawerLayout;
};

export declare type DrawerPlacement = 'top' | 'bottom' | 'left' | 'right';

export declare type EmitsOf<K extends keyof VsComponentRegistry> = InstanceType<VsComponentRegistry[K]>['$emit'];

export declare type FileDropValueType = File[];

export declare interface FocusableRef {
    focus: () => void;
    blur: () => void;
}

export declare const FORM_STORE_KEY = 'vlossom:form-store';

export declare interface FormChildRef {
    validate: () => boolean;
    clear: () => void;
}

export declare class FormStore {
    private _disabled;
    private _readonly;
    private _changedObj;
    private _validObj;
    private _validateFlag;
    private _clearFlag;
    private _resetFlag;
    static getDefaultFormStore(): FormStore;
    disabled: ComputedRef<boolean>;
    setDisabled(value: boolean): void;
    readonly: ComputedRef<boolean>;
    setReadonly(value: boolean): void;
    changedObj: ComputedRef<Record<string, boolean>>;
    updateChanged(id: string, changed: boolean): void;
    validObj: ComputedRef<Record<string, boolean>>;
    updateValid(id: string, valid: boolean): void;
    removeFromForm(id: string): void;
    validateFlag: ComputedRef<boolean>;
    toggleValidateFlag(): void;
    clearFlag: ComputedRef<boolean>;
    toggleClearFlag(): void;
    resetFlag: ComputedRef<boolean>;
    toggleResetFlag(): void;
}

export declare const functionUtil: {
    throttle: <TArgs extends any[]>(
        {
            interval,
        }: {
            interval: number;
        },
        func: (...args: TArgs) => any,
    ) => {
        (...args: TArgs): void;
        isThrottled(): boolean;
    };
    debounce: <TArgs extends any[]>(
        {
            delay,
        }: {
            delay: number;
        },
        func: (...args: TArgs) => any,
    ) => {
        (...args: TArgs): void;
        cancel(): void;
        isPending(): boolean;
        flush(...args: TArgs): void;
    };
    toCallable: typeof toCallable;
};

export declare function getButtonProps(): {
    circle: {
        type: BooleanConstructor;
        default: boolean;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    ghost: {
        type: BooleanConstructor;
        default: boolean;
    };
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    outline: {
        type: BooleanConstructor;
        default: boolean;
    };
    primary: {
        type: BooleanConstructor;
        default: boolean;
    };
    responsive: {
        type: BooleanConstructor;
        default: boolean;
    };
    size: {
        type: PropType<Size>;
        default: string;
    };
    type: {
        type: PropType<'button' | 'submit' | 'reset'>;
        default: string;
    };
};

export declare function getColorSchemeProps(): {
    colorScheme: {
        type: PropType<ColorScheme>;
    };
};

export declare function getColorSchemeTemplate(templateStr: string): string;

export declare function getFloatingProps(defaultValues?: { placement: Placement; align: Alignment; margin: number }): {
    target: {
        type: StringConstructor;
        required: boolean;
        default: string;
    };
    align: {
        type: PropType<Alignment>;
        default: 'start' | 'center' | 'end';
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    enterDelay: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    leaveDelay: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    margin: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    noAnimation: {
        type: BooleanConstructor;
        default: boolean;
    };
    placement: {
        type: PropType<Placement>;
        default: 'top' | 'right' | 'bottom' | 'left' | 'middle';
    };
};

export declare function getGridProps(): {
    gridSize: {
        type: (StringConstructor | NumberConstructor)[];
    };
    columnGap: {
        type: (StringConstructor | NumberConstructor)[];
    };
    rowGap: {
        type: (StringConstructor | NumberConstructor)[];
    };
};

export declare function getGroupByProps(): {
    groupBy: {
        type: PropType<(option: any, index: number) => string | null> | null;
        default: null;
    };
    groupOrder: {
        type: PropType<string[]>;
        default: () => never[];
    };
};

export declare function getInputProps<T = unknown, K extends keyof InputPropsDefinition<T> = never>(
    ...excludes: K[]
): Omit<InputPropsDefinition<T>, K>;

export declare function getInputWrapperProps(): InputWrapperPropsDefinition;

export declare function getLayoutProps(): {
    layout: {
        type: BooleanConstructor;
        default: boolean;
    };
};

export declare function getMinMaxProps(
    componentName: string,
    options?: {
        minDefault?: number | string;
        maxDefault?: number | string;
    },
): {
    min: {
        type: PropType<number | string>;
        default: string | number;
        validator: (value: number | string) => boolean;
    };
    max: {
        type: PropType<number | string>;
        default: string | number;
        validator: (value: number | string) => boolean;
    };
};

export declare function getOptionsProps(): {
    options: {
        type: PropType<any[]>;
        default: () => never[];
    };
    optionLabel: {
        type: StringConstructor;
        default: string;
    };
    optionValue: {
        type: StringConstructor;
        default: string;
    };
};

export declare function getOverlayProps(): {
    callbacks: {
        type: PropType<OverlayCallbacks>;
        default: () => {};
    };
    dimClose: {
        type: BooleanConstructor;
        default: boolean;
    };
    dimmed: {
        type: BooleanConstructor;
        default: boolean;
    };
    escClose: {
        type: BooleanConstructor;
        default: boolean;
    };
    focusLock: {
        type: BooleanConstructor;
        default: boolean;
    };
    hideScroll: {
        type: BooleanConstructor;
        default: boolean;
    };
    id: {
        type: StringConstructor;
        default: string;
    };
};

export declare function getPositionProps(): {
    position: {
        type: PropType<CssPosition>;
    };
};

export declare function getResponsiveProps(): {
    width: {
        type: PropType<string | number | Breakpoints>;
    };
    grid: {
        type: PropType<string | number | Breakpoints>;
    };
};

declare function getRowId(row: VsTableBodyCell[]): string | undefined;

declare function getRowItem(row: VsTableBodyCell[]): VsTableItem;

export declare function getSearchProps(): {
    search: {
        type: PropType<SearchProps>;
        default: boolean;
        validator: (value: SearchProps) => boolean;
    };
};

export declare function getStyleSetProps<
    T extends {
        [key: string]: any;
    },
>(): {
    styleSet: {
        type: PropType<string | T>;
    };
};

export declare type GlobalColorSchemes = {
    [key in VsComponent]?: ColorScheme;
} & {
    default?: ColorScheme;
} & {
    [key: string]: ColorScheme;
};

export declare type GlobalStyleSets = {
    [key: string]: {
        [key in VsComponent]?: any;
    } & {
        [key: string]: any;
    };
};

export declare function inheritAppContext(parent: App, overlay: App): void;

export declare interface InputComponentParams<T = unknown> {
    inputValue: Ref<T>;
    modelValue: Ref<T>;
    id?: Ref<string>;
    disabled?: Ref<boolean>;
    readonly?: Ref<boolean>;
    messages?: Ref<Message<T>[]>;
    rules?: Ref<Rule<T>[]>;
    defaultRules?: Ref<Rule<T>[]>;
    noDefaultRules?: Ref<boolean>;
    state?: Ref<UIState>;
    callbacks?: {
        onBeforeMount?: () => void;
        onMounted?: () => void;
        onChange?: (newValue: T, oldValue: T) => void;
        onClear?: () => void;
        onBeforeUnmount?: () => void;
        onUnmounted?: () => void;
    };
}

export declare const inputOptionPropsArgTypes: {
    options: {
        control: any;
        table: {
            category: string;
        };
    };
    optionLabel: {
        control: any;
        table: {
            category: string;
        };
    };
    optionValue: {
        control: any;
        table: {
            category: string;
        };
    };
};

export declare const inputPropsArgTypes: {
    disabled: {
        control: any;
        table: {
            category: string;
        };
    };
    hidden: {
        control: any;
        table: {
            category: string;
        };
    };
    id: {
        control: any;
        table: {
            category: string;
        };
    };
    label: {
        control: any;
        table: {
            category: string;
        };
    };
    noLabel: {
        control: any;
        table: {
            category: string;
        };
    };
    noMessages: {
        control: any;
        table: {
            category: string;
        };
    };
    required: {
        control: any;
        table: {
            category: string;
        };
    };
    messages: {
        control: any;
        table: {
            category: string;
        };
    };
    name: {
        control: any;
        table: {
            category: string;
        };
    };
    noDefaultRules: {
        control: any;
        table: {
            category: string;
        };
    };
    placeholder: {
        control: any;
        table: {
            category: string;
        };
    };
    readonly: {
        control: any;
        table: {
            category: string;
        };
    };
    rules: {
        control: any;
        table: {
            category: string;
        };
    };
    state: {
        control: any;
        options: string[];
        table: {
            category: string;
        };
    };
    changed: {
        control: any;
        table: {
            category: string;
        };
    };
    valid: {
        control: any;
        table: {
            category: string;
        };
    };
};

declare interface InputPropsDefinition<T = unknown> extends InputWrapperPropsDefinition {
    messages: {
        type: PropType<Message<T>[]>;
        default: () => Message<T>[];
    };
    name: {
        type: typeof String;
        default: string;
    };
    noDefaultRules: {
        type: typeof Boolean;
        default: boolean;
    };
    placeholder: {
        type: typeof String;
        default: string;
    };
    readonly: {
        type: typeof Boolean;
        default: boolean;
    };
    rules: {
        type: PropType<Rule<T>[]>;
        default: () => Rule<T>[];
    };
    state: {
        type: PropType<UIState>;
        default: UIState;
    };
    changed: {
        type: typeof Boolean;
        default: boolean;
    };
    valid: {
        type: typeof Boolean;
        default: boolean;
    };
}

declare interface InputWrapperPropsDefinition {
    disabled: {
        type: typeof Boolean;
        default: boolean;
    };
    hidden: {
        type: typeof Boolean;
        default: boolean;
    };
    id: {
        type: typeof String;
        default: string;
    };
    label: {
        type: typeof String;
        default: string;
    };
    noLabel: {
        type: typeof Boolean;
        default: boolean;
    };
    noMessages: {
        type: typeof Boolean;
        default: boolean;
    };
    required: {
        type: typeof Boolean;
        default: boolean;
    };
}

declare type IsAny<T> = 0 extends 1 & T ? true : false;

declare function isVsTableBodyRow(row: VsTableCell[]): row is VsTableBodyCell[];

declare type Join<Prev extends string, K extends string, Sep extends string> = Prev extends ''
    ? K
    : `${Prev}${Sep}${K}`;

declare type JoinDotField<T> = JoinField<T, '.'>;

declare type JoinField<T, Sep extends string, Prev extends string = ''> = keyof T extends never
    ? string
    : {
          [K in Extract<keyof T, string>]: IsAny<T[K]> extends true
              ? Join<Prev, K, Sep>
              : T[K] extends Record<string, any>
                ? Join<Prev, K, Sep> | JoinField<T[K], Sep, Join<Prev, K, Sep>>
                : Join<Prev, K, Sep>;
      }[Extract<keyof T, string>];

export declare const LAYOUT_PROVIDED_KEY = 'vlossom:layout-provided';

export declare const LAYOUT_STORE_KEY = 'vlossom:layout-store';

export declare class LayoutStore {
    private _header;
    private _footer;
    private _drawers;
    static getDefaultLayoutStore(): LayoutStore;
    header: ComputedRef<BarLayout>;
    setHeader(layout: BarLayout): void;
    footer: ComputedRef<BarLayout>;
    setFooter(layout: BarLayout): void;
    drawers: ComputedRef<DrawerLayouts>;
    setDrawers(layouts: DrawerLayouts): void;
    setDrawer(layout: DrawerLayout): void;
}

export declare const logUtil: {
    error(target: string, message: string): void;
    warning(target: string, message: string): void;
    propError(componentName: string, property: string, message: string): void;
    propWarning(componentName: string, property: string, message: string): void;
};

export declare const LOREM_IPSUM =
    '\nLorem ipsum dolor sit amet, consectetuer adipiscing elit.\nAenean commodo ligula eget dolor. Aenean massa.\nCum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.\nDonec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.\nDonec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.\nIn enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.\nNullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.';

export declare type Message<T = any> = ValueOrFunction<T, StateMessage>;

export declare const minMaxArgTypes: {
    min: {
        control: any;
        table: {
            category: string;
        };
    };
    max: {
        control: any;
        table: {
            category: string;
        };
    };
};

declare interface ModalInfo extends ModalOptions {
    container: string;
    id: string;
    content: string | Component;
}

declare interface ModalOptions {
    beforeClose?: () => Promise<boolean> | boolean;
    container?: string;
    colorScheme?: ColorScheme;
    styleSet?: string | VsModalNodeStyleSet;
    callbacks?: OverlayCallbacks;
    dimClose?: boolean;
    dimmed?: boolean;
    escClose?: boolean;
    focusLock?: boolean;
    hideScroll?: boolean;
    id?: string;
    scrollLock?: boolean | string;
    componentProps?: Record<string, any>;
    size?:
        | SizeProp
        | {
              width?: SizeProp;
              height?: SizeProp;
          };
}

declare interface ModalPlugin {
    open(content: string, options?: Omit<ModalOptions, 'componentProps'>): string;
    open(content: Component, options?: ModalOptions): string;
    emit(eventName: string, ...args: any[]): void | Promise<void>;
    emitWithId(id: string, eventName: string, ...args: any[]): void | Promise<void>;
    close(container?: string): Promise<boolean>;
    closeWithId(id: string): Promise<boolean>;
    clear(container?: string): void;
}

export declare const modes: {
    light: {
        backgrounds: {
            value: string;
        };
    };
    dark: {
        backgrounds: {
            value: string;
        };
    };
    mobile: {
        viewport: string;
    };
    tablet: {
        viewport: string;
    };
    desktop: {
        viewport: string;
    };
};

export declare function mountOverlayApp(parentApp: App): void;

export declare const NOT_SELECTED = -1;

export declare const numberUtil: {
    clamp(value: number, min: number, max: number): number;
};

export declare const objectUtil: {
    assign: <X extends Record<string | number | symbol, any>>(initial: X, override: X) => X;
    clone: <T>(obj: T) => T;
    crush: <TValue extends object>(value: TValue) => object;
    get: <TDefault = unknown>(value: any, path: string, defaultValue?: TDefault | undefined) => TDefault;
    isEmpty: (value: any) => boolean;
    isEqual: <TType>(x: TType, y: TType) => boolean;
    isObject: (value: any) => value is object;
    omit: <T, TKeys extends keyof T>(obj: T, keys: TKeys[]) => Omit<T, TKeys>;
    shake: <RemovedKeys extends string, T>(obj: T, filter?: (value: any) => boolean) => Omit<T, RemovedKeys>;
};

export declare interface OptionItem {
    id: string;
    item: any;
    label: string;
    value: any;
    index: number;
    disabled: boolean;
}

export declare class OptionsStore {
    private _colorScheme;
    private _styleSet;
    private _theme;
    private _radiusRatio;
    colorScheme: ComputedRef<GlobalColorSchemes>;
    setColorScheme(colorScheme: GlobalColorSchemes): void;
    styleSet: ComputedRef<GlobalStyleSets>;
    setStyleSet(styleSet: GlobalStyleSets): void;
    theme: ComputedRef<Theme>;
    setTheme(theme: Theme): void;
    radiusRatio: ComputedRef<number>;
    setRadiusRatio(radiusRatio: number): void;
    getComponentStyleSet<
        T extends {
            [key: string]: any;
        },
    >(styleSetName: string, component: VsComponent | string): Partial<T>;
}

export declare const OVERLAY_CLOSE = 'vlossom:overlay-close';

export declare const OVERLAY_OPEN = 'vlossom:overlay-open';

export declare type OverlayCallbacks<T = void> = {
    [eventName: string]: (...args: any[]) => T | Promise<T>;
};

export declare class OverlayCallbackStore {
    private _overlays;
    overlays: Readonly<
        Ref<
            readonly (readonly [
                string,
                Readonly<
                    Ref<
                        {
                            readonly [x: string]: (...args: any[]) => void | Promise<void>;
                        },
                        {
                            readonly [x: string]: (...args: any[]) => void | Promise<void>;
                        }
                    >
                >,
            ])[],
            readonly (readonly [
                string,
                Readonly<
                    Ref<
                        {
                            readonly [x: string]: (...args: any[]) => void | Promise<void>;
                        },
                        {
                            readonly [x: string]: (...args: any[]) => void | Promise<void>;
                        }
                    >
                >,
            ])[]
        >
    >;
    constructor();
    private addOverlayCallbackKeyEventListener;
    getLastOverlay(): [string, Ref<OverlayCallbacks>] | null;
    getLastOverlayId(): string;
    run<T = void>(id: string, eventName: string, ...args: any[]): Promise<T | void>;
    push(id: string, callbacks: Ref<OverlayCallbacks>): Promise<void>;
    pop(...args: any[]): Promise<void> | undefined;
    remove(id: string, ...args: any[]): Promise<void> | undefined;
    clear(...args: any[]): void;
}

export declare class OverlayContainerStore {
    private _overlayViewMap;
    overlayViewMap: Readonly<Ref<Map<string, OverlayView>>>;
    push(id: string, container: string, component: string | Component): void;
    clear(): void;
    delete(id: string): void;
}

export declare interface OverlayStyle {
    width?: string;
    height?: string;
    pointerEvents?: string;
    zIndex?: number;
}

export declare type OverlayTuple = [string, Ref<OverlayCallbacks>];

export declare type OverlayView = {
    container: string;
    component: string | Component;
};

export declare type Placement = (typeof PLACEMENTS)[number];

export declare const PLACEMENTS: readonly ['top', 'right', 'bottom', 'left', 'middle'];

export declare const PROMPT_CANCEL = 'vlossom:prompt-cancel';

export declare const PROMPT_OK = 'vlossom:prompt-ok';

declare interface PromptModalOptions extends Omit<ModalOptions, 'beforeClose'> {
    styleSet?: VsPromptStyleSet;
    colorScheme?: ColorScheme;
    input?: PropsOf<VsComponent.VsInput> & {
        initialValue?: VsInputValueType;
    };
    okText?: string;
    cancelText?: string;
    swapButtons?: boolean;
}

declare interface PromptPlugin {
    open(content: string, options?: Omit<PromptModalOptions, 'componentProps'>): Promise<VsInputValueType>;
    open(content: Component, options?: PromptModalOptions): Promise<VsInputValueType>;
}

export declare type PropsOf<K extends keyof VsComponentRegistry> = InstanceType<VsComponentRegistry[K]>['$props'];

export declare const propsUtil: {
    checkValidNumber(componentName: string, property: string, value: number | string): boolean;
};

export declare const responsiveArgTypes: {
    width: {
        control: any;
        table: {
            category: string;
        };
    };
    grid: {
        control: any;
        table: {
            category: string;
        };
    };
};

export declare type Rule<T = any> = ((v: T) => string) | ((v: T) => PromiseLike<string>);

export declare class ScrollLockStore {
    private _locks;
    lock(ownerId: string, element: HTMLElement): void;
    unlock(ownerId: string, element: HTMLElement): void;
    clear(): void;
    private _capture;
    private _apply;
    private _restore;
}

export declare const scrollShadow: Directive<HTMLElement, boolean | undefined>;

export declare type SearchProps =
    | boolean
    | {
          useRegex?: boolean;
          useCaseSensitive?: boolean;
          placeholder?: string;
      };

export declare type Size = (typeof SIZES)[number];

export declare type SizeProp = Size | string | number;

export declare const SIZES: readonly ['xs', 'sm', 'md', 'lg', 'xl'];

export declare type SlotsOf<K extends keyof VsComponentRegistry> = InstanceType<VsComponentRegistry[K]>['$slots'];

export declare interface StateMessage<T extends string = UIState> {
    state: T;
    text: string;
}

export declare interface StringModifiers {
    capitalize?: boolean;
    lower?: boolean;
    upper?: boolean;
}

export declare const stringUtil: {
    createID(size?: number): string;
    convertToString(value: any): string;
    toStringSize(value: number | string): string;
    toFileSizeFormat(bytes: number): string;
    hash(str: string): string;
    kebabCase: typeof kebabCase;
};

export declare const styleArgTypes: {
    styleSet: {
        control: any;
        table: {
            category: string;
        };
    };
};

export declare const TABLE_COLOR_SCHEME_TOKEN: unique symbol;

export declare const TABLE_SIZE_TOKEN: unique symbol;

export declare const TABLE_STYLE_SET_TOKEN: unique symbol;

declare type TableComposable = {
    columns: ComputedRef<VsTableColumnDef[] | null>;
    items: Ref<VsTableItem[]>;
    headerCells: Ref<VsTableHeaderCell[]>;
    bodyCells: ComputedRef<VsTableBodyCell[][]>;
    gridTemplateColumns: ComputedRef<string>;
    anyExpandable: ComputedRef<boolean>;
    anySelectable: ComputedRef<boolean>;
    selectedItems: Ref<VsTableItem[]>;
    selectedAll: ComputedRef<boolean>;
    selectedPartial: ComputedRef<boolean>;
    selectable: ComputedRef<(item: VsTableItem, index?: number, items?: VsTableItem[]) => boolean>;
    expandable: ComputedRef<(item: VsTableItem, index?: number, items?: VsTableItem[]) => boolean>;
    state: ComputedRef<(item: VsTableItem, index?: number, items?: VsTableItem[]) => UIState>;
    sortType: Ref<VsTableSortType>;
    sortColumn: Ref<VsTableColumnDef | null>;
    loading: Ref<boolean | undefined> | undefined;
    draggable: Ref<boolean | undefined> | undefined;
    primary: Ref<boolean | undefined> | undefined;
    size: Ref<Size | undefined> | undefined;
    search: ComputedRef<Exclude<SearchProps, boolean>>;
    pagination: ComputedRef<VsTablePaginationOptions>;
    page: WritableComputedRef<number>;
    pageSize: WritableComputedRef<number>;
    totalPages: ComputedRef<number>;
    totalItems: ComputedRef<number>;
    pageStartIndex: ComputedRef<number>;
    pageEndIndex: ComputedRef<number>;
    isExpanded: (row: VsTableCell[]) => boolean;
    toggleExpand: (row: VsTableCell[]) => boolean;
    setExpand: (row: VsTableCell[], shouldExpand: boolean) => boolean;
    updateSortType: (headerKey: string) => void;
    initialize: () => void;
    toggleSelectAll: () => void;
};

export declare const TEXT_ALIGNMENTS: readonly ['left', 'center', 'right'];

export declare type TextAlignment = (typeof TEXT_ALIGNMENTS)[number];

export declare type Theme = 'light' | 'dark';

export declare const THEME_KEY = 'vlossom:theme-mode';

declare interface ToastInfo extends ToastOptions {
    container: string;
    id: string;
    content: string | Component;
}

declare interface ToastOptions {
    container?: string;
    colorScheme?: ColorScheme;
    styleSet?: string | VsToastStyleSet;
    align?: Alignment;
    autoClose?: boolean;
    placement?: Exclude<Placement, 'left' | 'right'>;
    primary?: boolean;
    timeout?: number;
    logger?: (message: string | Component) => string;
}

declare interface ToastPlugin {
    show(message: string | Component, options?: ToastOptions): void;
    info(message: string | Component, options?: ToastOptions): void;
    success(message: string | Component, options?: ToastOptions): void;
    warning(message: string | Component, options?: ToastOptions): void;
    error(message: string | Component, options?: ToastOptions): void;
    remove(container: string, id: string): void;
    clear(container?: string): void;
}

/**
 * NOTE: ex. If type is TResult | ((...args: TArgs) => TResult), return "the only" function that returns the TResult.
 */
declare function toCallable<TArgs extends any[] = [], TResult = boolean>(
    maybeFn: undefined | TResult | ((...args: TArgs) => TResult),
): (...args: TArgs) => TResult;

export declare type UIState = 'idle' | 'success' | 'info' | 'error' | 'warning';

export declare function useClickOutside(
    excludedSelectors: string[],
    callback: () => void,
): {
    addClickOutsideListener: () => void;
    removeClickOutsideListener: () => void;
};

export declare function useColorScheme(
    component: VsComponent | string,
    colorScheme: Ref<ColorScheme | undefined>,
): {
    computedColorScheme: ComputedRef<
        | 'brown'
        | 'red'
        | 'orange'
        | 'amber'
        | 'yellow'
        | 'lime'
        | 'green'
        | 'emerald'
        | 'teal'
        | 'cyan'
        | 'sky'
        | 'blue'
        | 'indigo'
        | 'violet'
        | 'purple'
        | 'fuchsia'
        | 'pink'
        | 'rose'
        | 'gray'
        | 'none'
        | undefined
    >;
    colorSchemeClass: ComputedRef<string>;
};

export declare function useFocusable(wrapperElement: TemplateRef<HTMLElement>): {
    focusIndex: DeepReadonly<Ref<number>>;
    currentFocusableElement: DeepReadonly<Ref<HTMLElement | null>>;
    updateFocusIndex: (index: number) => void;
    getFocusableElements: () => HTMLElement[];
    addMouseMoveListener: () => void;
    removeMouseMoveListener: () => void;
};

export declare function useIndexSelector(
    list: Ref<any[]>,
    disabled?: Ref<boolean | ((item: any, index: number) => boolean) | undefined>,
): {
    selectedIndex: Ref<number, number>;
    isSelected: (index: number) => boolean;
    isDisabled: (index: number) => boolean;
    isAllDisabled: () => boolean;
    isPrevious: (index: number) => boolean;
    findActiveIndexForwardFrom: (targetIndex: number) => number;
    findActiveIndexBackwardFrom: (targetIndex: number) => number;
    selectIndex: (index: number) => void;
    syncIndex: (index: number) => void;
    handleKeydown: (e: KeyboardEvent, isVertical: boolean) => void;
    isFirstEdge: ComputedRef<boolean>;
    isLastEdge: ComputedRef<boolean>;
};

export declare function useInput<T = unknown>(
    ctx: any,
    inputParams: InputComponentParams<T>,
): {
    changed: ComputedRef<boolean>;
    valid: ComputedRef<boolean>;
    shake: Ref<boolean, boolean>;
    computedMessages: ComputedRef<StateMessage<UIState>[]>;
    showRuleMessages: Ref<boolean, boolean>;
    validate: () => boolean;
    clear: () => void;
    reset: () => void;
    computedId: ComputedRef<string>;
    computedDisabled: ComputedRef<boolean>;
    computedReadonly: ComputedRef<boolean>;
    computedState: ComputedRef<UIState>;
};

export declare function useInputForm(
    id: Ref<string>,
    valid: Ref<boolean>,
    changed: Ref<boolean>,
    validate: () => boolean,
    clear: () => void,
    reset: () => void,
): {
    formDisabled: ComputedRef<boolean>;
    formReadonly: ComputedRef<boolean>;
};

export declare function useInputMessages<T>(
    inputValue: Ref<T>,
    messages: Ref<Message<T>[]>,
    ruleMessages: Ref<StateMessage[]>,
): {
    showRuleMessages: Ref<boolean, boolean>;
    computedMessages: ComputedRef<StateMessage<UIState>[]>;
    checkMessages: () => Promise<void>;
};

export declare function useInputOption(
    inputValue: Ref<any>,
    options: Ref<any[]>,
    optionLabel: Ref<string>,
    optionValue: Ref<string>,
    multiple?: Ref<boolean, boolean>,
): {
    getOptionLabel: (option: any) => string;
    getOptionValue: (option: any) => any;
};

export declare function useInputRules<T>(
    inputValue: Ref<T>,
    rules: Ref<Rule<T>[]>,
    defaultRules: Ref<Rule<T>[]>,
    noDefaultRules: Ref<boolean>,
): {
    ruleMessages: Ref<StateMessage<UIState>[], StateMessage<UIState>[]>;
    checkRules: () => Promise<void>;
};

export declare function useLayoutChild(layoutProp: Ref<boolean>): {
    isLayoutChild: ComputedRef<boolean>;
};

export declare function useModalContainerStore(): ContainerStore<ModalInfo>;

export declare function useOptionLabelValue(
    optionLabel: Ref<string>,
    optionValue: Ref<string>,
): {
    getOptionLabel: (option: any) => string;
    getOptionValue: (option: any) => any;
};

export declare function useOptionList(
    options: Ref<any[]>,
    optionLabel: Ref<string>,
    optionValue: Ref<string>,
    disabled: Ref<boolean | ((option: any, index: number, options: any[]) => boolean)>,
): {
    computedOptions: ComputedRef<
        {
            id: string;
            item: any;
            label: string;
            value: any;
            index: number;
            disabled: boolean;
        }[]
    >;
};

export declare function useOptionsStore(): OptionsStore;

export declare function useOverlayCallback(
    id: Ref<string>,
    callbacks?: Ref<OverlayCallbacks>,
): {
    overlayId: ComputedRef<string>;
    isActivated: Ref<boolean, boolean>;
    isUnmounting: Ref<boolean, boolean>;
    activate: () => void;
    deactivate: () => void;
};

export declare function useOverlayCallbackStore(): OverlayCallbackStore;

export declare function useOverlayContainerStore(): OverlayContainerStore;

export declare function useOverlayDom(): {
    appendOverlayDom: (targetElement: Element, overlayId: string, overlayStyle?: OverlayStyle) => Element;
};

export declare function usePositioning(
    target: string,
    attachment: TemplateRef<HTMLElement>,
): {
    isVisible: Ref<boolean, boolean>;
    computedPlacement: Ref<
        'top' | 'right' | 'bottom' | 'left' | 'middle' | null,
        'top' | 'right' | 'bottom' | 'left' | 'middle' | null
    >;
    appear: (attachInfo?: AttachInfo) => void;
    disappear: () => void;
};

export declare function useScrollLock(container?: string): {
    isLocked: Ref<boolean, boolean>;
    lock: () => void;
    unlock: () => void;
};

export declare function useScrollLockStore(): ScrollLockStore;

export declare function useSizeClass(size: Ref<Size | undefined>): {
    sizeClass: ComputedRef<string>;
};

export declare function useStateClass(state: Ref<UIState>): {
    isStated: ComputedRef<boolean>;
    stateClasses: ComputedRef<
        | {
              'vs-stated'?: undefined;
          }
        | {
              [x: string]: true;
              'vs-stated': true;
          }
    >;
    stateBoxClasses: ComputedRef<{}>;
};

export declare function useStringModifier(modifiers: Ref<StringModifiers>): {
    modifyStringValue: (value: string) => string;
};

export declare function useStyleSet<
    T extends {
        [key: string]: any;
    },
>(
    component: VsComponent | string,
    styleSet: Ref<string | T | undefined>,
    baseStyleSet?: Ref<Partial<T>>,
    additionalStyleSet?: Ref<Partial<T>>,
): {
    componentStyleSet: ComputedRef<Partial<T>>;
    styleSetVariables: ComputedRef<Record<string, string>>;
    componentInlineStyle: ComputedRef<CSSProperties>;
};

export declare function useToastContainerStore(): ContainerStore<ToastInfo>;

export declare function useValueMatcher(
    multiple: Ref<boolean>,
    inputValue: Ref<any>,
    trueValue: Ref<any>,
    falseValue: Ref<any>,
): {
    isMatched: ComputedRef<boolean>;
    getInitialValue: () => any;
    getUpdatedValue: (isTruthy: boolean) => any;
    getClearedValue: () => any;
    addTrueValue: () => void;
};

export declare function useVlossom(): Vlossom;

export declare type ValueOrFunction<T = any, V = any> = V | ((value: T) => V) | ((value: T) => PromiseLike<V>);

export declare const VERTICAL_ALIGNMENTS: readonly ['top', 'middle', 'bottom'];

export declare type VerticalAlignment = (typeof VERTICAL_ALIGNMENTS)[number];

export declare class Vlossom {
    private _optionsStore;
    private _toast;
    private _modal;
    private _alert;
    private _confirm;
    private _prompt;
    constructor(options: VlossomOptions);
    get toast(): ToastPlugin;
    get modal(): ModalPlugin;
    get alert(): AlertPlugin;
    get confirm(): ConfirmPlugin;
    get prompt(): PromptPlugin;
    set colorScheme(colorScheme: GlobalColorSchemes);
    get colorScheme(): GlobalColorSchemes;
    set styleSet(styleSet: GlobalStyleSets);
    get styleSet(): GlobalStyleSets;
    set theme(theme: Theme);
    get theme(): Theme;
    set radiusRatio(radiusRatio: number);
    get radiusRatio(): number;
    toggleTheme(): void;
    private setDefaultTheme;
}

/**
 * 모든 Vlossom 컴포넌트를 포함하는 컴포넌트 맵
 *
 * ⚠️ 주의: 이 객체를 application에서 import하면 모든 Vlossom 컴포넌트가 번들에 포함됩니다.
 * Tree shaking 최적화가 필요한 경우 개별 컴포넌트만 import하세요.
 */
export declare const VlossomComponents: {
    readonly VsAccordion: DefineComponent<
        ExtractPropTypes<{
            disabled: {
                type: BooleanConstructor;
                default: boolean;
            };
            open: {
                type: BooleanConstructor;
                default: boolean;
            };
            primary: {
                type: BooleanConstructor;
                default: boolean;
            };
            size: {
                type: PropType<Size>;
                default: string;
            };
            modelValue: {
                type: BooleanConstructor;
                default: boolean;
            };
            styleSet: {
                type: PropType<string | VsAccordionStyleSet>;
            };
            width: {
                type: PropType<string | number | Breakpoints>;
            };
            grid: {
                type: PropType<string | number | Breakpoints>;
            };
            colorScheme: {
                type: PropType<ColorScheme>;
            };
        }>,
        {
            colorSchemeClass: ComputedRef<string>;
            styleSetVariables: ComputedRef<Record<string, string>>;
            componentStyleSet: ComputedRef<Partial<VsAccordionStyleSet>>;
            componentInlineStyle: ComputedRef<CSSProperties>;
            isOpen: Ref<boolean, boolean>;
            classObj: ComputedRef<{
                [x: string]: boolean;
                'vs-focus-visible': boolean;
                'vs-disabled': boolean;
                'vs-primary': boolean;
            }>;
            toggle: () => void;
        },
        {},
        {},
        {},
        ComponentOptionsMixin,
        ComponentOptionsMixin,
        ('toggle' | 'update:modelValue')[],
        'toggle' | 'update:modelValue',
        PublicProps,
        Readonly<
            ExtractPropTypes<{
                disabled: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                open: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                primary: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                size: {
                    type: PropType<Size>;
                    default: string;
                };
                modelValue: {
                    type: BooleanConstructor;
                    default: boolean;
                };
                styleSet: {
                    type: PropType<string | VsAccordionStyleSet>;
                };
                width: {
                    type: PropType<string | number | Breakpoints>;
                };
                grid: {
                    type: PropType<string | number | Breakpoints>;
                };
                colorScheme: {
                    type: PropType<ColorScheme>;
                };
            }>
        > &
            Readonly<{
                onToggle?: ((...args: any[]) => any) | undefined;
                'onUpdate:modelValue'?: ((...args: any[]) => any) | undefined;
            }>,
        {
            disabled: boolean;
            open: boolean;
            size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
            primary: boolean;
            modelValue: boolean;
        },
        {},
        {
            VsResponsive: DefineComponent<
                ExtractPropTypes<{
                    tag: {
                        type: StringConstructor;
                        default: string;
                    };
                    width: {
                        type: PropType<string | number | Breakpoints>;
                    };
                    grid: {
                        type: PropType<string | number | Breakpoints>;
                    };
                }>,
                {
                    responsiveClasses: ComputedRef<string[]>;
                    responsiveStyles: ComputedRef<Record<string, string>>;
                },
                {},
                {},
                {},
                ComponentOptionsMixin,
                ComponentOptionsMixin,
                {},
                string,
                PublicProps,
                Readonly<
                    ExtractPropTypes<{
                        tag: {
                            type: StringConstructor;
                            default: string;
                        };
                        width: {
                            type: PropType<string | number | Breakpoints>;
                        };
                        grid: {
                            type: PropType<string | number | Breakpoints>;
                        };
                    }>
                > &
                    Readonly<{}>,
                {
                    tag: string;
                },
                {},
                {},
                {},
                string,
                ComponentProvideOptions,
                true,
                {},
                any
            >;
            VsExpandable: DefineComponent<
                ExtractPropTypes<{
                    open: {
                        type: BooleanConstructor;
                        required: true;
                        default: boolean;
                    };
                    size: {
                        type: PropType<Size>;
                        default: string;
                    };
                    styleSet: {
                        type: PropType<string | VsExpandableStyleSet>;
                    };
                }>,
                {
                    sizeClass: ComputedRef<string>;
                    componentInlineStyle: ComputedRef<CSSProperties>;
                    beforeEnter: (el: Element) => void;
                    enter: (el: Element, done: () => void) => void;
                    beforeLeave: (el: Element) => void;
                    leave: (el: Element, done: () => void) => void;
                },
                {},
                {},
                {},
                ComponentOptionsMixin,
                ComponentOptionsMixin,
                {},
                string,
                PublicProps,
                Readonly<
                    ExtractPropTypes<{
                        open: {
                            type: BooleanConstructor;
                            required: true;
                            default: boolean;
                        };
                        size: {
                            type: PropType<Size>;
                            default: string;
                        };
                        styleSet: {
                            type: PropType<string | VsExpandableStyleSet>;
                        };
                    }>
                > &
                    Readonly<{}>,
                {
                    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
                },
                {},
                {},
                {},
                string,
                ComponentProvideOptions,
                true,
                {},
                any
            >;
        },
        {},
        string,
        ComponentProvideOptions,
        true,
        {},
        any
    >;
    readonly VsAvatar: DefineComponent<
        ExtractPropTypes<{
            styleSet: {
                type: PropType<string | VsAvatarStyleSet>;
            };
            colorScheme: {
                type: PropType<ColorScheme>;
            };
        }>,
        {
            colorSchemeClass: ComputedRef<string>;
            styleSetVariables: ComputedRef<Record<string, string>>;
            componentInlineStyle: ComputedRef<CSSProperties>;
        },
        {},
        {},
        {},
        ComponentOptionsMixin,
        ComponentOptionsMixin,
        {},
        string,
        PublicProps,
        Readonly<
            ExtractPropTypes<{
                styleSet: {
                    type: PropType<string | VsAvatarStyleSet>;
                };
                colorScheme: {
                    type: PropType<ColorScheme>;
                };
            }>
        > &
            Readonly<{}>,
        {},
        {},
        {},
        {},
        string,
        ComponentProvideOptions,
        true,
        {},
        any
    >;
    readonly VsBar: DefineComponent