@coreui/vue-pro 4.9.0-beta.2 → 5.0.0-alpha.0

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v4.9.0-beta.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v5.0.0-alpha.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/components/dropdown/CDropdown.d.ts

@@ -1,6 +1,21 @@
 import { PropType } from 'vue';
-import { Placement } from '@popperjs/core';
-import { Triggers } from '../../types';
+import type { Placement } from '@popperjs/core';
+import type { Triggers } from '../../types';
+export type Directions = 'start' | 'end';
+export type Breakpoints = {
+    xs: Directions;
+} | {
+    sm: Directions;
+} | {
+    md: Directions;
+} | {
+    lg: Directions;
+} | {
+    xl: Directions;
+} | {
+    xxl: Directions;
+};
+export type Alignments = Directions | Breakpoints;
 declare const CDropdown: import("vue").DefineComponent<{
     /**
      * Set aligment of dropdown menu.
@@ -8,7 +23,19 @@ declare const CDropdown: import("vue").DefineComponent<{
      * @values { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
      */
     alignment: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: PropType<string | {
+            xs: Directions;
+        } | {
+            sm: Directions;
+        } | {
+            md: Directions;
+        } | {
+            lg: Directions;
+        } | {
+            xl: Directions;
+        } | {
+            xxl: Directions;
+        }>;
         validator: (value: string | any) => boolean;
     };
     /**
@@ -40,6 +67,15 @@ declare const CDropdown: import("vue").DefineComponent<{
      * Toggle the disabled state for the component.
      */
     disabled: BooleanConstructor;
+    /**
+     * Offset of the dropdown menu relative to its target.
+     *
+     * @since 4.9.0
+     */
+    offset: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
      *
@@ -88,7 +124,19 @@ declare const CDropdown: import("vue").DefineComponent<{
      * @values { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
      */
     alignment: {
-        type: (StringConstructor | ObjectConstructor)[];
+        type: PropType<string | {
+            xs: Directions;
+        } | {
+            sm: Directions;
+        } | {
+            md: Directions;
+        } | {
+            lg: Directions;
+        } | {
+            xl: Directions;
+        } | {
+            xxl: Directions;
+        }>;
         validator: (value: string | any) => boolean;
     };
     /**
@@ -120,6 +168,15 @@ declare const CDropdown: import("vue").DefineComponent<{
      * Toggle the disabled state for the component.
      */
     disabled: BooleanConstructor;
+    /**
+     * Offset of the dropdown menu relative to its target.
+     *
+     * @since 4.9.0
+     */
+    offset: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
      *
@@ -166,6 +223,7 @@ declare const CDropdown: import("vue").DefineComponent<{
     dark: boolean;
     variant: string;
     placement: Placement;
+    offset: unknown[];
     autoClose: string | boolean;
     popper: boolean;
     trigger: Triggers;

package/dist/components/dropdown/CDropdownToggle.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { Triggers } from '../../types';
+import type { Triggers } from '../../types';
 declare const CDropdownToggle: import("vue").DefineComponent<{
     /**
      * Toggle the active state for the component.

package/dist/components/form/CFormCheck.d.ts

@@ -5,6 +5,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: ObjectConstructor;
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.9.0
+     */
+    falseValue: StringConstructor;
     /**
      * Provide valuable, actionable feedback.
      *
@@ -54,7 +60,7 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * The default name for a value passed using v-model.
      */
     modelValue: {
-        type: (StringConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ArrayConstructor)[];
         value: undefined;
     };
     /**
@@ -69,6 +75,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * @since 4.3.0
      */
     tooltipFeedback: BooleanConstructor;
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.9.0
+     */
+    trueValue: StringConstructor;
     /**
      * Specifies the type of component.
      *
@@ -97,6 +109,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: ObjectConstructor;
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.9.0
+     */
+    falseValue: StringConstructor;
     /**
      * Provide valuable, actionable feedback.
      *
@@ -146,7 +164,7 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * The default name for a value passed using v-model.
      */
     modelValue: {
-        type: (StringConstructor | BooleanConstructor)[];
+        type: (StringConstructor | BooleanConstructor | ArrayConstructor)[];
         value: undefined;
     };
     /**
@@ -161,6 +179,12 @@ declare const CFormCheck: import("vue").DefineComponent<{
      * @since 4.3.0
      */
     tooltipFeedback: BooleanConstructor;
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.9.0
+     */
+    trueValue: StringConstructor;
     /**
      * Specifies the type of component.
      *

package/dist/components/form/CFormInput.d.ts

@@ -47,12 +47,8 @@ export declare const File: {
     };
     fromEntries<T_13 = any>(entries: Iterable<readonly [PropertyKey, T_13]>): {
         [k: string]: T_13;
-    }; /**
-     * Set component validation state to invalid.
-     */
-    fromEntries(entries: Iterable<readonly any[]>): any; /**
-     * Set component validation state to invalid.
-     */
+    };
+    fromEntries(entries: Iterable<readonly any[]>): any;
 } | {
     new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
     prototype: File;
@@ -152,12 +148,8 @@ declare const CFormInput: import("vue").DefineComponent<{
         };
         fromEntries<T_13 = any>(entries: Iterable<readonly [PropertyKey, T_13]>): {
             [k: string]: T_13;
-        }; /**
-         * Set component validation state to invalid.
-         */
-        fromEntries(entries: Iterable<readonly any[]>): any; /**
-         * Set component validation state to invalid.
-         */
+        };
+        fromEntries(entries: Iterable<readonly any[]>): any;
     } | {
         new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
         prototype: File;
@@ -301,12 +293,8 @@ declare const CFormInput: import("vue").DefineComponent<{
         };
         fromEntries<T_13 = any>(entries: Iterable<readonly [PropertyKey, T_13]>): {
             [k: string]: T_13;
-        }; /**
-         * Set component validation state to invalid.
-         */
-        fromEntries(entries: Iterable<readonly any[]>): any; /**
-         * Set component validation state to invalid.
-         */
+        };
+        fromEntries(entries: Iterable<readonly any[]>): any;
     } | {
         new (fileBits: BlobPart[], fileName: string, options?: FilePropertyBag | undefined): File;
         prototype: File;

package/dist/components/multi-select/CMultiSelect.d.ts

@@ -4,7 +4,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     allowCreateOptions: BooleanConstructor;
     /**
@@ -19,7 +19,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     clearSearchOnSelect: BooleanConstructor;
     /**
@@ -63,7 +63,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     loading: BooleanConstructor;
     /**
@@ -223,7 +223,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     allowCreateOptions: BooleanConstructor;
     /**
@@ -238,7 +238,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     clearSearchOnSelect: BooleanConstructor;
     /**
@@ -282,7 +282,7 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     loading: BooleanConstructor;
     /**

package/dist/components/popover/CPopover.d.ts

@@ -1,10 +1,42 @@
 import { PropType, RendererElement } from 'vue';
-import { Placement } from '@popperjs/core';
+import type { Placement } from '@popperjs/core';
+import type { Placements, Triggers } from '../../types';
 declare const CPopover: import("vue").DefineComponent<{
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @since 4.9.0
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
     content: StringConstructor;
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay: {
+        type: PropType<number | {
+            show: number;
+            hide: number;
+        }>;
+        default: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements: {
+        type: PropType<string | string[]>;
+        default: () => string[];
+        validator: (value: Placements | Placements[]) => boolean;
+    };
     /**
      * Offset of the popover relative to its target.
      */
@@ -30,9 +62,9 @@ declare const CPopover: import("vue").DefineComponent<{
      * @values 'click', 'focus', 'hover'
      */
     trigger: {
-        type: PropType<string | string[]>;
+        type: PropType<Triggers | Triggers[]>;
         default: string;
-        validator: (value: string | string[]) => boolean;
+        validator: (value: Triggers | Triggers[]) => boolean;
     };
     /**
      * Toggle the visibility of popover component.
@@ -43,10 +75,41 @@ declare const CPopover: import("vue").DefineComponent<{
 }> | import("vue").VNode<import("vue").RendererNode, RendererElement, {
     [key: string]: any;
 }>[] | undefined)[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Apply a CSS fade transition to the popover.
+     *
+     * @since 4.9.0
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
     content: StringConstructor;
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay: {
+        type: PropType<number | {
+            show: number;
+            hide: number;
+        }>;
+        default: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements: {
+        type: PropType<string | string[]>;
+        default: () => string[];
+        validator: (value: Placements | Placements[]) => boolean;
+    };
     /**
      * Offset of the popover relative to its target.
      */
@@ -72,9 +135,9 @@ declare const CPopover: import("vue").DefineComponent<{
      * @values 'click', 'focus', 'hover'
      */
     trigger: {
-        type: PropType<string | string[]>;
+        type: PropType<Triggers | Triggers[]>;
         default: string;
-        validator: (value: string | string[]) => boolean;
+        validator: (value: Triggers | Triggers[]) => boolean;
     };
     /**
      * Toggle the visibility of popover component.
@@ -87,6 +150,12 @@ declare const CPopover: import("vue").DefineComponent<{
     visible: boolean;
     placement: Placement;
     offset: unknown[];
-    trigger: string | string[];
+    trigger: Triggers | Triggers[];
+    animation: boolean;
+    delay: number | {
+        show: number;
+        hide: number;
+    };
+    fallbackPlacements: string | string[];
 }, {}>;
 export { CPopover };

package/dist/components/toast/CToast.d.ts

@@ -92,7 +92,7 @@ declare const CToast: import("vue").DefineComponent<{
 }, {
     visible: boolean;
     dismissible: boolean;
-    autohide: boolean;
     delay: number;
+    autohide: boolean;
 }, {}>;
 export { CToast };

package/dist/components/tooltip/CTooltip.d.ts

@@ -1,10 +1,42 @@
 import { PropType, RendererElement } from 'vue';
-import { Placement } from '@popperjs/core';
+import type { Placement } from '@popperjs/core';
+import type { Placements, Triggers } from '../../types';
 declare const CTooltip: import("vue").DefineComponent<{
+    /**
+     * Apply a CSS fade transition to the tooltip.
+     *
+     * @since 4.9.0
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
     content: StringConstructor;
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay: {
+        type: PropType<number | {
+            show: number;
+            hide: number;
+        }>;
+        default: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements: {
+        type: PropType<string | string[]>;
+        default: () => string[];
+        validator: (value: Placements | Placements[]) => boolean;
+    };
     /**
      * Offset of the tooltip relative to its target.
      */
@@ -26,9 +58,9 @@ declare const CTooltip: import("vue").DefineComponent<{
      * @values 'click', 'focus', 'hover'
      */
     trigger: {
-        type: PropType<string | string[]>;
-        default: string;
-        validator: (value: string | string[]) => boolean;
+        type: PropType<Triggers | Triggers[]>;
+        default: () => string[];
+        validator: (value: Triggers | Triggers[]) => boolean;
     };
     /**
      * Toggle the visibility of tooltip component.
@@ -39,10 +71,41 @@ declare const CTooltip: import("vue").DefineComponent<{
 }> | import("vue").VNode<import("vue").RendererNode, RendererElement, {
     [key: string]: any;
 }>[] | undefined)[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Apply a CSS fade transition to the tooltip.
+     *
+     * @since 4.9.0
+     */
+    animation: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
     content: StringConstructor;
+    /**
+     * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay: {
+        type: PropType<number | {
+            show: number;
+            hide: number;
+        }>;
+        default: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements: {
+        type: PropType<string | string[]>;
+        default: () => string[];
+        validator: (value: Placements | Placements[]) => boolean;
+    };
     /**
      * Offset of the tooltip relative to its target.
      */
@@ -64,9 +127,9 @@ declare const CTooltip: import("vue").DefineComponent<{
      * @values 'click', 'focus', 'hover'
      */
     trigger: {
-        type: PropType<string | string[]>;
-        default: string;
-        validator: (value: string | string[]) => boolean;
+        type: PropType<Triggers | Triggers[]>;
+        default: () => string[];
+        validator: (value: Triggers | Triggers[]) => boolean;
     };
     /**
      * Toggle the visibility of tooltip component.
@@ -79,6 +142,12 @@ declare const CTooltip: import("vue").DefineComponent<{
     visible: boolean;
     placement: Placement;
     offset: unknown[];
-    trigger: string | string[];
+    trigger: Triggers | Triggers[];
+    animation: boolean;
+    delay: number | {
+        show: number;
+        hide: number;
+    };
+    fallbackPlacements: string | string[];
 }, {}>;
 export { CTooltip };

package/dist/composables/index.d.ts

@@ -1,2 +1,3 @@
 import { useColorModes } from './useColorModes';
-export { useColorModes };
+import { usePopper } from './usePopper';
+export { useColorModes, usePopper };

package/dist/composables/useColorModes.d.ts

@@ -1,5 +1,5 @@
 export declare const useColorModes: (localStorageItemName?: string) => {
-    getColorMode: () => string | undefined;
+    colorMode: import("vue").Ref<string | undefined>;
     isColorModeSet: () => boolean;
     setColorMode: (mode: string) => void;
 };

package/dist/composables/usePopper.d.ts

@@ -0,0 +1,6 @@
+import type { Instance, Options } from '@popperjs/core';
+export declare const usePopper: () => {
+    popper: Instance | undefined;
+    initPopper: (reference: HTMLElement, popper: HTMLElement, options: Partial<Options>) => void;
+    destroyPopper: () => void;
+};