@coreui/vue-pro 4.1.1 → 4.1.2

package/dist/components/widgets/CWidgetStatsB.d.ts

@@ -46,25 +46,53 @@ declare const CWidgetStatsB: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    color?: unknown;
-    inverse?: unknown;
-    progress?: unknown;
-    text?: unknown;
-    title?: unknown;
-    value?: unknown;
-} & {
-    value: string | number;
-} & {
-    color?: string | undefined;
-    progress?: {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Colors have been inverted from their default dark shade.
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    progress: import("vue-types").VueTypeShape<{
         color: string;
         value: number;
-    } | undefined;
-    title?: string | undefined;
-    text?: string | undefined;
-    inverse?: boolean | undefined;
-}>, {
+    }>;
+    /**
+     * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
+     */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
+     */
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+        require: boolean;
+    };
+}>>, {
     value: string | number;
     title: string;
     text: string;

package/dist/components/widgets/CWidgetStatsC.d.ts

@@ -38,23 +38,45 @@ declare const CWidgetStatsC: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    color?: unknown;
-    inverse?: unknown;
-    progress?: unknown;
-    title?: unknown;
-    value?: unknown;
-} & {
-    value: string | number;
-} & {
-    color?: string | undefined;
-    progress?: {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Colors have been inverted from their default dark shade.
+     */
+    inverse: {
+        type: BooleanConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    progress: import("vue-types").VueTypeShape<{
         color: string;
         value: number;
-    } | undefined;
-    title?: string | undefined;
-    inverse?: boolean | undefined;
-}>, {
+    }>;
+    /**
+     * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
+     */
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+        require: boolean;
+    };
+}>>, {
     value: string | number;
     title: string;
     inverse: boolean;

package/dist/components/widgets/CWidgetStatsD.d.ts

@@ -23,14 +23,25 @@ declare const CWidgetStatsD: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    color?: unknown;
-    values?: unknown;
-} & {
-    values: Value[];
-} & {
-    color?: string | undefined;
-}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Values and titles for your component.
+     */
+    values: {
+        type: PropType<Value[]>;
+        default: () => never[];
+        require: boolean;
+    };
+}>>, {
     values: Value[];
 }>;
 export { CWidgetStatsD };

package/dist/components/widgets/CWidgetStatsE.d.ts

@@ -17,14 +17,24 @@ declare const CWidgetStatsE: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    title?: unknown;
-    value?: unknown;
-} & {
-    value: string | number;
-} & {
-    title?: string | undefined;
-}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
+     */
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+        require: boolean;
+    };
+}>>, {
     value: string | number;
     title: string;
 }>;

package/dist/components/widgets/CWidgetStatsF.d.ts

@@ -41,20 +41,48 @@ declare const CWidgetStatsF: import("vue").DefineComponent<{
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    color?: unknown;
-    padding?: unknown;
-    title?: unknown;
-    text?: unknown;
-    value?: unknown;
-} & {
-    value: string | number;
-    padding: boolean;
-} & {
-    color?: string | undefined;
-    title?: string | undefined;
-    text?: string | undefined;
-}>, {
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * Set padding of your component.
+     */
+    padding: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
+     */
+    title: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
+     */
+    text: {
+        type: StringConstructor;
+        default: undefined;
+        require: boolean;
+    };
+    /**
+     * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
+     */
+    value: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+        require: boolean;
+    };
+}>>, {
     value: string | number;
     title: string;
     text: string;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, nextTick, computed, Teleport, onBeforeUnmount, vShow } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -1997,13 +1997,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -2048,6 +2056,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -2057,9 +2076,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -2358,7 +2377,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -4640,10 +4659,14 @@ const CFormSelect = defineComponent({
          * The default name for a value passed using v-model.
          */
         modelValue: {
-            type: String,
+            type: [String, Array],
             default: undefined,
             require: false,
         },
+        multiple: {
+            type: Boolean,
+            required: false,
+        },
         /**
          * Options list of the select component. Available keys: `label`, `value`, `disabled`.
          * Examples:
@@ -4692,9 +4715,8 @@ const CFormSelect = defineComponent({
             const selected = Array.from(target.options)
                 .filter((option) => option.selected)
                 .map((option) => option.value);
-            const value = target.multiple ? selected : selected[0];
             emit('change', event);
-            emit('update:modelValue', value);
+            emit('update:modelValue', target.multiple ? selected : selected[0]);
         };
         return () => h$1('select', {
             class: [
@@ -4705,14 +4727,23 @@ const CFormSelect = defineComponent({
                     'is-valid': props.valid,
                 },
             ],
+            multiple: props.multiple,
             onChange: (event) => handleChange(event),
             size: props.htmlSize,
+            ...(props.modelValue && !props.multiple && { value: props.modelValue }),
         }, props.options
             ? props.options.map((option) => {
                 return h$1('option', {
-                    ...(typeof option === 'object' &&
-                        option.disabled && { disabled: option.disabled }),
-                    ...(typeof option === 'object' && option.value && { value: option.value }),
+                    ...(typeof option === 'object' && {
+                        ...(option.disabled && { disabled: option.disabled }),
+                        ...(option.selected && { selected: option.selected }),
+                        ...(option.value && {
+                            value: option.value,
+                            ...(props.modelValue &&
+                                props.multiple &&
+                                props.modelValue.includes(option.value) && { selected: true }),
+                        }),
+                    }),
                 }, typeof option === 'string' ? option : option.label);
             })
             : slots.default && slots.default());
@@ -5738,6 +5769,14 @@ const CModal = defineComponent({
             default: true,
             required: false,
         },
+        /**
+         * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+         */
+        unmountOnClose: {
+            type: Boolean,
+            default: true,
+            required: false,
+        },
         /**
          * Toggle the visibility of alert component.
          */
@@ -5826,35 +5865,38 @@ const CModal = defineComponent({
             }
         };
         provide('handleDismiss', handleDismiss);
+        const modal = () => h$1('div', {
+            class: [
+                'modal',
+                {
+                    ['fade']: props.transition,
+                },
+                attrs.class,
+            ],
+            ref: modalRef,
+        }, h$1('div', {
+            class: [
+                'modal-dialog',
+                {
+                    'modal-dialog-centered': props.alignment === 'center',
+                    [`modal-fullscreen-${props.fullscreen}-down`]: props.fullscreen && typeof props.fullscreen === 'string',
+                    'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
+                    ['modal-dialog-scrollable']: props.scrollable,
+                    [`modal-${props.size}`]: props.size,
+                },
+            ],
+            role: 'dialog',
+        }, h$1('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())));
         return () => [
             h$1(Transition, {
+                css: false,
                 onEnter: (el, done) => handleEnter(el, done),
                 onAfterEnter: () => handleAfterEnter(),
                 onLeave: (el, done) => handleLeave(el, done),
                 onAfterLeave: (el) => handleAfterLeave(el),
-            }, () => visible.value &&
-                h$1('div', {
-                    class: [
-                        'modal',
-                        {
-                            ['fade']: props.transition,
-                        },
-                        attrs.class,
-                    ],
-                    ref: modalRef,
-                }, h$1('div', {
-                    class: [
-                        'modal-dialog',
-                        {
-                            'modal-dialog-centered': props.alignment === 'center',
-                            [`modal-fullscreen-${props.fullscreen}-down`]: props.fullscreen && typeof props.fullscreen === 'string',
-                            'modal-fullscreen': props.fullscreen && typeof props.fullscreen === 'boolean',
-                            ['modal-dialog-scrollable']: props.scrollable,
-                            [`modal-${props.size}`]: props.size,
-                        },
-                    ],
-                    role: 'dialog',
-                }, h$1('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())))),
+            }, () => props.unmountOnClose
+                ? visible.value && modal()
+                : withDirectives(modal(), [[vShow, visible.value]])),
             props.backdrop &&
                 h$1(CBackdrop, {
                     class: 'modal-backdrop',