@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

package/dist/components/VvCombobox/index.d.ts

@@ -1,6 +1,18 @@
+import type { MaybeElement } from '@vueuse/core';
 import type { PropType } from 'vue';
 import type { Option } from '../../types/generic';
-export declare const VvComboboxEvents: string[];
+export type VvComboboxEvents = {
+    'update:modelValue': [any];
+    'update:search': [string];
+    'update:options': [(Option | string)[]];
+    'focus': [MaybeElement];
+    'blur': [MaybeElement];
+    'clear': [];
+    /**
+     * @deprecated use update:search instead
+     */
+    'change:search': [string];
+};
 export declare const VvComboboxProps: {
     /**
      * Dropdown show / hide transition name
@@ -13,7 +25,7 @@ export declare const VvComboboxProps: {
      * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
      */
     modelValue: {
-        type: (ObjectConstructor | ArrayConstructor | StringConstructor | BooleanConstructor | NumberConstructor)[];
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
         default: undefined;
     };
     /**
@@ -30,6 +42,13 @@ export declare const VvComboboxProps: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Label for selected option not found
+     */
+    selectedOptionNotFoundLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Label for selected option hint
      */
@@ -58,6 +77,13 @@ export declare const VvComboboxProps: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Label for add new option hint
+     */
+    addOptionHintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     /**
      * Label close button
      */
@@ -69,10 +95,18 @@ export declare const VvComboboxProps: {
      * Select input placeholder
      */
     placeholder: StringConstructor;
+    /**
+     * The options to add new options
+     */
+    addable: BooleanConstructor;
     /**
      * Use input text to search on options
      */
     searchable: BooleanConstructor;
+    /**
+     * If true, the search input will retain its value even when the dropdown is closed
+     */
+    keepSearch: BooleanConstructor;
     /**
      * Search function to filter options
      */
@@ -98,10 +132,25 @@ export declare const VvComboboxProps: {
      * Manage modelValue as string[] or object[]
      */
     multiple: BooleanConstructor;
+    /**
+     * The min number of selected values
+     */
+    minValues: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
     /**
      * The max number of selected values
      */
     maxValues: (StringConstructor | NumberConstructor)[];
+    /**
+     * If true the input will be unselectable
+     * @deprecated use minValues instead
+     */
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * The select label separator visible to the user
      */
@@ -145,6 +194,13 @@ export declare const VvComboboxProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Keep open dropdown on single select
      */
@@ -152,147 +208,63 @@ export declare const VvComboboxProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    label: (StringConstructor | NumberConstructor)[]; /**
-     * Use input text to search on options
+    /**
+     * Focus on hover option (this prop remove the focus from the input search)
      */
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconClear: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: "close";
+    };
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     placement: {
-        type: PropType<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end">;
+        type: PropType<`${import("../../constants").Side}` | `${import("../../constants").Placement}`>;
         default: import("../../constants").Side;
-        validator: (value: never) => boolean;
+        validator: (value: import("../../constants").Side & import("../../constants").Placement) => boolean;
     };
     strategy: {
-        type: PropType<"absolute" | "fixed">;
+        type: PropType<`${import("../../constants").Strategy}`>;
         default: undefined;
         validator: (value: import("../../constants").Strategy) => boolean;
     };
     offset: {
-        type: PropType<string | import("@floating-ui/core").OffsetOptions | undefined>;
+        type: PropType<import("../..").OffsetOptions | number | string>;
         default: number;
     };
     shift: {
-        type: PropType<boolean | {
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            mainAxis?: boolean | undefined;
-            limiter?: {
-                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/core").Coords;
-                options?: any;
-            } | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        } | import("@floating-ui/dom").Derivable<{
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            mainAxis?: boolean | undefined;
-            limiter?: {
-                fn: (state: import("@floating-ui/core").MiddlewareState) => import("@floating-ui/core").Coords;
-                options?: any;
-            } | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        }> | undefined>;
+        type: PropType<import("../..").ShiftOptions | boolean>;
         default: boolean;
     };
     flip: {
-        type: PropType<boolean | {
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            mainAxis?: boolean | undefined;
-            fallbackPlacements?: import("@floating-ui/utils").Placement[] | undefined;
-            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
-            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
-            flipAlignment?: boolean | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        } | import("@floating-ui/dom").Derivable<{
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            mainAxis?: boolean | undefined;
-            fallbackPlacements?: import("@floating-ui/utils").Placement[] | undefined;
-            fallbackStrategy?: "initialPlacement" | "bestFit" | undefined;
-            fallbackAxisSideDirection?: "start" | "end" | "none" | undefined;
-            flipAlignment?: boolean | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        }> | undefined>;
+        type: PropType<import("../..").FlipOptions | boolean>;
         default: boolean;
     };
     size: {
-        type: PropType<boolean | {
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-            apply?: ((args: {
-                x: number;
-                y: number;
-                initialPlacement: import("@floating-ui/utils").Placement;
-                placement: import("@floating-ui/utils").Placement;
-                strategy: import("@floating-ui/utils").Strategy;
-                middlewareData: import("@floating-ui/core").MiddlewareData;
-                rects: import("@floating-ui/utils").ElementRects;
-                platform: import("@floating-ui/core").Platform;
-                elements: import("@floating-ui/dom").Elements;
-            } & {
-                availableWidth: number;
-                availableHeight: number;
-            }) => void | Promise<void>) | undefined;
-        } | import("@floating-ui/dom").Derivable<{
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-            apply?: ((args: {
-                x: number;
-                y: number;
-                initialPlacement: import("@floating-ui/utils").Placement;
-                placement: import("@floating-ui/utils").Placement;
-                strategy: import("@floating-ui/utils").Strategy;
-                middlewareData: import("@floating-ui/core").MiddlewareData;
-                rects: import("@floating-ui/utils").ElementRects;
-                platform: import("@floating-ui/core").Platform;
-                elements: import("@floating-ui/dom").Elements;
-            } & {
-                availableWidth: number;
-                availableHeight: number;
-            }) => void | Promise<void>) | undefined;
-        }> | undefined>;
+        type: PropType<import("../..").SizeOptions | boolean>;
         default: () => {
             padding: number;
         };
     };
     autoPlacement: {
-        type: PropType<boolean | {
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            alignment?: import("@floating-ui/utils").Alignment | null | undefined;
-            autoAlignment?: boolean | undefined;
-            allowedPlacements?: import("@floating-ui/utils").Placement[] | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        } | import("@floating-ui/dom").Derivable<{
-            rootBoundary?: import("@floating-ui/core").RootBoundary | undefined;
-            elementContext?: import("@floating-ui/core").ElementContext | undefined;
-            altBoundary?: boolean | undefined;
-            padding?: import("@floating-ui/utils").Padding | undefined;
-            crossAxis?: boolean | undefined;
-            alignment?: import("@floating-ui/utils").Alignment | null | undefined;
-            autoAlignment?: boolean | undefined;
-            allowedPlacements?: import("@floating-ui/utils").Placement[] | undefined;
-            boundary?: import("@floating-ui/dom").Boundary | undefined;
-        }> | undefined>;
+        type: PropType<import("../..").AutoPlacementOptions | boolean>;
         default: boolean;
     };
     arrow: {
@@ -303,29 +275,24 @@ export declare const VvComboboxProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    unselectable: {
+    floating: {
         type: BooleanConstructor;
         default: boolean;
     };
-    floating: BooleanConstructor;
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
-        type: PropType<"before" | "after">;
+        type: PropType<`${import("../../constants").Position}`>;
         default: import("../../constants").Position;
         validation: (value: import("../../constants").Position) => boolean;
     };
     options: {
-        type: PropType<(string | Option)[]>; /**
-         * The input search debounce time in ms
-         */
+        type: PropType<(Option | string)[]>;
         default: () => never[];
     };
     labelKey: {
-        /**
-         * Manage modelValue as string[] or object[]
-         */
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
     };
@@ -337,10 +304,22 @@ export declare const VvComboboxProps: {
         type: (StringConstructor | FunctionConstructor)[];
         default: string;
     };
-    modifiers: PropType<string | string[]>;
-    readonly: BooleanConstructor;
-    disabled: BooleanConstructor;
-    loading: BooleanConstructor;
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     loadingLabel: {
         type: StringConstructor;
         default: string;
@@ -349,10 +328,360 @@ export declare const VvComboboxProps: {
         type: StringConstructor;
         default: string;
     };
-    invalid: BooleanConstructor;
-    invalidLabel: (ArrayConstructor | StringConstructor)[];
-    valid: BooleanConstructor;
-    validLabel: (ArrayConstructor | StringConstructor)[];
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalidLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    tabindex: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    name: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    id: (StringConstructor | NumberConstructor)[];
+};
+export declare function useVvComboboxProps<T extends Option | string>(): {
+    options: {
+        type: PropType<T[]>;
+        default: () => never[];
+    };
+    searchFunction: {
+        type: PropType<(search: string, options: T[]) => T[] | Promise<T[]>>;
+        default: undefined;
+    };
+    /**
+     * Dropdown show / hide transition name
+     */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
+     */
+    modelValue: {
+        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    /**
+     * Label for no search results
+     */
+    noResultsLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for no options	available
+     */
+    noOptionsLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for selected option not found
+     */
+    selectedOptionNotFoundLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for selected option hint
+     */
+    selectedHintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for deselect action button
+     */
+    deselectActionLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for select option hint
+     */
+    selectHintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for deselected option hint
+     */
+    deselectHintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label for add new option hint
+     */
+    addOptionHintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Label close button
+     */
+    closeLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Select input placeholder
+     */
+    placeholder: StringConstructor;
+    /**
+     * The options to add new options
+     */
+    addable: BooleanConstructor;
+    /**
+     * Use input text to search on options
+     */
+    searchable: BooleanConstructor;
+    /**
+     * If true, the search input will retain its value even when the dropdown is closed
+     */
+    keepSearch: BooleanConstructor;
+    /**
+     * On searchable select is the input search placeholder
+     */
+    searchPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The input search debounce time in ms
+     */
+    debounceSearch: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /**
+     * Manage modelValue as string[] or object[]
+     */
+    multiple: BooleanConstructor;
+    /**
+     * The min number of selected values
+     */
+    minValues: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    /**
+     * The max number of selected values
+     */
+    maxValues: (StringConstructor | NumberConstructor)[];
+    /**
+     * If true the input will be unselectable
+     * @deprecated use minValues instead
+     */
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The select label separator visible to the user
+     */
+    separator: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * Show native select
+     */
+    native: BooleanConstructor;
+    /**
+     * Show badges
+     */
+    badges: BooleanConstructor;
+    /**
+     * Badge modifiers
+     */
+    badgeModifiers: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    /**
+     * Set dropdown width to the same as the trigger
+     */
+    triggerWidth: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    /**
+     * Dropdown modifiers
+     */
+    dropdownModifiers: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    /**
+     * Open dropdown on focus
+     */
+    autoOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Select first option automatically
+     */
+    autoselectFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Keep open dropdown on single select
+     */
+    keepOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Focus on hover option (this prop remove the focus from the input search)
+     */
+    focusOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showClearAction: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    iconClear: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: "close";
+    };
+    labelClear: {
+        type: StringConstructor;
+        default: string;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    placement: {
+        type: PropType<`${import("../../constants").Side}` | `${import("../../constants").Placement}`>;
+        default: import("../../constants").Side;
+        validator: (value: import("../../constants").Side & import("../../constants").Placement) => boolean;
+    };
+    strategy: {
+        type: PropType<`${import("../../constants").Strategy}`>;
+        default: undefined;
+        validator: (value: import("../../constants").Strategy) => boolean;
+    };
+    offset: {
+        type: PropType<import("../..").OffsetOptions | number | string>;
+        default: number;
+    };
+    shift: {
+        type: PropType<import("../..").ShiftOptions | boolean>;
+        default: boolean;
+    };
+    flip: {
+        type: PropType<import("../..").FlipOptions | boolean>;
+        default: boolean;
+    };
+    size: {
+        type: PropType<import("../..").SizeOptions | boolean>;
+        default: () => {
+            padding: number;
+        };
+    };
+    autoPlacement: {
+        type: PropType<import("../..").AutoPlacementOptions | boolean>;
+        default: boolean;
+    };
+    arrow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autofocusFirst: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    floating: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
+    };
+    iconPosition: {
+        type: PropType<`${import("../../constants").Position}`>;
+        default: import("../../constants").Position;
+        validation: (value: import("../../constants").Position) => boolean;
+    };
+    labelKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    valueKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    disabledKey: {
+        type: (StringConstructor | FunctionConstructor)[];
+        default: string;
+    };
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    hintLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    invalid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    invalidLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    valid: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    validLabel: {
+        type: (ArrayConstructor | StringConstructor)[];
+        default: undefined;
+    };
     tabindex: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;