@coreui/vue-pro 4.9.0-beta.2 → 4.9.0-rc.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/v4.9.0-rc.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-rc.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-rc.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

@@ -187,7 +187,7 @@ declare const CFormCheck: import("vue").DefineComponent<{
     type: string;
     valid: boolean;
     tooltipFeedback: boolean;
-    inline: boolean;
     indeterminate: boolean;
+    inline: boolean;
 }, {}>;
 export { CFormCheck };

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

@@ -184,7 +184,7 @@ declare const CFormControl: import("vue").DefineComponent<{
 }>>, {
     disabled: boolean;
     component: string;
-    readonly: boolean;
     plainText: boolean;
+    readonly: boolean;
 }, {}>;
 export { CFormControl, CFormControlProps };

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

@@ -355,15 +355,15 @@ declare const CFormInput: import("vue").DefineComponent<{
     valid: BooleanConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
 }, {
     invalid: boolean;
     type: string;
     disabled: boolean;
     valid: boolean;
     tooltipFeedback: boolean;
-    readonly: boolean;
     plainText: boolean;
+    readonly: boolean;
 }, {}>;
 export { CFormInput };

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

@@ -144,14 +144,14 @@ declare const CFormTextarea: import("vue").DefineComponent<{
     valid: BooleanConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
-    onInput?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
 }, {
     invalid: boolean;
     disabled: boolean;
     valid: boolean;
     tooltipFeedback: boolean;
-    readonly: boolean;
     plainText: boolean;
+    readonly: boolean;
 }, {}>;
 export { CFormTextarea };

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

@@ -449,10 +449,10 @@ declare const CMultiSelect: import("vue").DefineComponent<{
     required: boolean;
     valid: boolean;
     tooltipFeedback: boolean;
+    multiple: boolean;
     options: (Option | OptionsGroup)[];
     cleaner: boolean;
     placeholder: string;
-    multiple: boolean;
     loading: boolean;
     visibleItems: number;
     optionsMaxHeight: string | number;

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

@@ -30,7 +30,7 @@ declare const CMultiSelectNativeSelect: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     required: boolean;
-    options: Option[];
     multiple: boolean;
+    options: Option[];
 }, {}>;
 export { CMultiSelectNativeSelect };

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

@@ -45,8 +45,8 @@ declare const CMultiSelectSelection: import("vue").DefineComponent<{
 }>> & {
     onRemove?: ((...args: any[]) => any) | undefined;
 }, {
-    selected: Option[];
     multiple: boolean;
+    selected: Option[];
     selectionType: string;
     selectionTypeCounterText: string;
 }, {}>;

package/dist/components/picker/CPicker.d.ts

@@ -4,7 +4,7 @@ declare const CPicker: import("vue").DefineComponent<{
      * Set container type for the component.
      */
     container: {
-        type: PropType<"dropdown" | "inline">;
+        type: PropType<"inline" | "dropdown">;
         default: string;
     };
     /**
@@ -30,7 +30,7 @@ declare const CPicker: import("vue").DefineComponent<{
      * Set container type for the component.
      */
     container: {
-        type: PropType<"dropdown" | "inline">;
+        type: PropType<"inline" | "dropdown">;
         default: string;
     };
     /**
@@ -56,6 +56,6 @@ declare const CPicker: import("vue").DefineComponent<{
     visible: boolean;
     disabled: boolean;
     footer: boolean;
-    container: "dropdown" | "inline";
+    container: "inline" | "dropdown";
 }, {}>;
 export { CPicker };

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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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-rc.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,2 @@
-import { useColorModes } from './useColorModes';
-export { useColorModes };
+import { usePopper } from './usePopper';
+export { 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;
+};