@coreui/vue-pro 4.1.1 → 4.1.2

package/dist/index.js

@@ -2001,13 +2001,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;
@@ -2052,6 +2060,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;
 
@@ -2061,9 +2080,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,
@@ -2362,7 +2381,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
@@ -4644,10 +4663,14 @@ const CFormSelect = vue.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:
@@ -4696,9 +4719,8 @@ const CFormSelect = vue.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 () => vue.h('select', {
             class: [
@@ -4709,14 +4731,23 @@ const CFormSelect = vue.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 vue.h('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());
@@ -5742,6 +5773,14 @@ const CModal = vue.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.
          */
@@ -5830,35 +5869,38 @@ const CModal = vue.defineComponent({
             }
         };
         vue.provide('handleDismiss', handleDismiss);
+        const modal = () => vue.h('div', {
+            class: [
+                'modal',
+                {
+                    ['fade']: props.transition,
+                },
+                attrs.class,
+            ],
+            ref: modalRef,
+        }, vue.h('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',
+        }, vue.h('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())));
         return () => [
             vue.h(vue.Transition, {
+                css: false,
                 onEnter: (el, done) => handleEnter(el, done),
                 onAfterEnter: () => handleAfterEnter(),
                 onLeave: (el, done) => handleLeave(el, done),
                 onAfterLeave: (el) => handleAfterLeave(el),
-            }, () => visible.value &&
-                vue.h('div', {
-                    class: [
-                        'modal',
-                        {
-                            ['fade']: props.transition,
-                        },
-                        attrs.class,
-                    ],
-                    ref: modalRef,
-                }, vue.h('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',
-                }, vue.h('div', { class: ['modal-content', props.contentClassName], ref: modalContentRef }, slots.default && slots.default())))),
+            }, () => props.unmountOnClose
+                ? visible.value && modal()
+                : vue.withDirectives(modal(), [[vue.vShow, visible.value]])),
             props.backdrop &&
                 vue.h(CBackdrop, {
                     class: 'modal-backdrop',