@coreui/vue-pro 4.1.0 → 4.1.4

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.
          */
@@ -5776,7 +5815,7 @@ const CModal = defineComponent({
             emit('show');
         };
         const handleAfterEnter = () => {
-            window.addEventListener('click', handleClickOutside);
+            window.addEventListener('mousedown', handleMouseDown);
             window.addEventListener('keyup', handleKeyUp);
         };
         const handleLeave = (el, done) => {
@@ -5787,7 +5826,7 @@ const CModal = defineComponent({
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
-            window.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('mousedown', handleMouseDown);
             window.removeEventListener('keyup', handleKeyUp);
             el.style.display = 'none';
         };
@@ -5809,7 +5848,10 @@ const CModal = defineComponent({
                 }
             }
         };
-        const handleClickOutside = (event) => {
+        const handleMouseDown = (event) => {
+            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
+        };
+        const handleMouseUp = (event) => {
             if (modalContentRef.value && !modalContentRef.value.contains(event.target)) {
                 if (props.backdrop !== 'static') {
                     handleDismiss();
@@ -5823,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',
@@ -7018,19 +7063,20 @@ const COffcanvas = defineComponent({
             }, 1);
         };
         const handleAfterEnter = () => {
-            window.addEventListener('click', handleClickOutside);
+            window.addEventListener('mousedown', handleMouseDown);
+            // window.addEventListener('click', handleClickOutside)
             window.addEventListener('keyup', handleKeyUp);
         };
         const handleLeave = (el, done) => {
             el.addEventListener('transitionend', () => {
                 done();
             });
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('keyup', handleKeyUp);
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
             el.style.visibility = 'hidden';
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyUp);
         };
         const handleDismiss = () => {
             visible.value = false;
@@ -7043,13 +7089,17 @@ const COffcanvas = defineComponent({
                 }
             }
         };
-        const handleClickOutside = (event) => {
+        const handleMouseDown = (event) => {
+            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
+        };
+        const handleMouseUp = (event) => {
             if (offcanvasRef.value && !offcanvasRef.value.contains(event.target)) {
                 props.backdrop && handleDismiss();
             }
         };
         return () => [
             h$1(Transition, {
+                css: false,
                 onEnter: (el, done) => handleEnter(el, done),
                 onAfterEnter: () => handleAfterEnter(),
                 onLeave: (el, done) => handleLeave(el, done),
@@ -8500,11 +8550,6 @@ const CSmartTableBody = defineComponent({
             default: undefined,
             require: false,
         },
-        columns: {
-            type: Array,
-            default: () => [],
-            require: true,
-        },
         rawColumnNames: {
             type: Array,
             default: () => [],
@@ -8611,9 +8656,12 @@ const CSmartTableHead = defineComponent({
         },
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             require: false,
         },
+        columnFilterValue: {
+            type: Object,
+            required: false,
+        },
         columnSorter: {
             type: [Boolean, Object],
             default: undefined,
@@ -8752,9 +8800,9 @@ const CSmartTableHead = defineComponent({
                                         onInput: (event) => handleFilterInput(key(column), event.target.value),
                                         onChange: (event) => handleFilterChange(key(column), event.target.value),
                                         'aria-label': `column name: '${label(column)}' filter input`,
-                                        ...(props.columnFilter &&
-                                            props.columnFilter[key(column)] && {
-                                            value: props.columnFilter[key(column)],
+                                        ...(props.columnFilterValue &&
+                                            props.columnFilterValue[key(column)] && {
+                                            value: props.columnFilterValue[key(column)],
                                         }),
                                     }),
                             })),
@@ -9068,7 +9116,6 @@ const CSmartTable = defineComponent({
          */
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             required: false,
         },
         /**
@@ -9096,7 +9143,6 @@ const CSmartTable = defineComponent({
          */
         columns: {
             type: Array,
-            default: () => [],
             required: false,
         },
         /**
@@ -9145,7 +9191,6 @@ const CSmartTable = defineComponent({
          */
         itemsPerPage: {
             type: Number,
-            default: 10,
             required: false,
         },
         /**
@@ -9217,7 +9262,8 @@ const CSmartTable = defineComponent({
          */
         selectable: Boolean,
         /**
-         * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes.
+         * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+         * { column: 'status', state: 'asc' }
          *
          * @type SorterValue
          */
@@ -9391,7 +9437,7 @@ const CSmartTable = defineComponent({
                 selectedAll.value = 'indeterminate';
             }
         });
-        const itemsPerPage = ref(props.itemsPerPage);
+        const itemsPerPage = ref(props.itemsPerPage || items.value.length);
         const activePage = ref(props.activePage);
         const sorterState = reactive(props.sorterValue || {});
         const columnFilterState = ref(props.columnFilterValue ? props.columnFilterValue : {});
@@ -9404,7 +9450,7 @@ const CSmartTable = defineComponent({
         });
         // functions
         const isSortable = (i) => {
-            const isDataColumn = itemsDataColumns.value.includes(rawColumnNames[i]);
+            const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i]);
             let column;
             if (props.columns)
                 column = props.columns[i];
@@ -9502,16 +9548,16 @@ const CSmartTable = defineComponent({
             sorterState.state = '';
         };
         // computed
-        const genCols = Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_');
-        const rawColumnNames = props.columns
+        const genCols = computed(() => Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'));
+        const rawColumnNames = computed(() => props.columns
             ? props.columns.map((column) => {
                 if (typeof column === 'object')
                     return column.key;
                 else
                     return column;
             })
-            : genCols; //! || el
-        const itemsDataColumns = computed(() => rawColumnNames.filter((name) => genCols.includes(name)));
+            : genCols.value); //! || el
+        const itemsDataColumns = computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
         // variables
         const columnFiltered = () => {
             let _items = items.value;
@@ -9584,6 +9630,8 @@ const CSmartTable = defineComponent({
                             class: 'col-auto p-0',
                         }, props.tableFilter &&
                             h$1(CSmartTableFilter, {
+                                filterLabel: props.tableFilterLabel,
+                                filterPlaceholder: props.tableFilterPlaceholder,
                                 onFilterInput: (value) => tableFilterChange(value, 'input'),
                                 onFilterChange: (value) => tableFilterChange(value, 'change'),
                                 value: tableFilterState.value,
@@ -9613,8 +9661,9 @@ const CSmartTable = defineComponent({
                                 h$1(CSmartTableHead, {
                                     component: 'head',
                                     ...props.tableHeadProps,
-                                    columnFilter: columnFilterState.value,
-                                    columns: props.columns,
+                                    columnFilter: props.columnFilter,
+                                    columnFilterValue: columnFilterState.value,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     columnSorter: props.columnSorter,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
@@ -9661,12 +9710,11 @@ const CSmartTable = defineComponent({
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
-                                columns: props.columns,
                                 scopedSlots: slots,
                                 selectable: props.selectable,
                                 onRowChecked: (id, value) => handleRowChecked(id, value),
                                 onRowClick: (item, index, columnName, event) => handleRowClick(item, index, columnName, event),
-                                rawColumnNames: rawColumnNames,
+                                rawColumnNames: rawColumnNames.value,
                                 clickableRows: props.clickableRows,
                                 ...props.tableBodyProps,
                             }),
@@ -9676,7 +9724,7 @@ const CSmartTable = defineComponent({
                                     ...props.tableFootProps,
                                     columnFilter: false,
                                     columnSorter: false,
-                                    columns: props.columns,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
@@ -9706,7 +9754,6 @@ const CSmartTable = defineComponent({
                             pages: numberOfPages.value,
                             activePage: activePage.value,
                             onActivePageChange: handleActivePageChange,
-                            limit: itemsPerPage.value,
                         })
                         : ''),
                     h$1('div', {