@coreui/vue-pro 4.0.4 → 4.1.3

package/dist/index.js

@@ -36,9 +36,45 @@ const CAccordion = vue.defineComponent({
     },
 });
 
+const vVisible = {
+    beforeMount(el, { value }, { transition }) {
+        el._vod = el.style.display === 'none' ? '' : el.style.display;
+        if (transition && value) {
+            transition.beforeEnter(el);
+        }
+    },
+    mounted(el, { value }, { transition }) {
+        if (transition && value) {
+            transition.enter(el);
+        }
+    },
+    updated(el, { value, oldValue }, { transition }) {
+        if (!value === !oldValue)
+            return;
+        if (transition) {
+            if (value) {
+                transition.beforeEnter(el);
+                transition.enter(el);
+            }
+            else {
+                transition.leave(el, () => {
+                    // setDisplay(el, false)
+                });
+            }
+        }
+    },
+};
+
 const CCollapse = vue.defineComponent({
     name: 'CCollapse',
     props: {
+        /**
+         * Set horizontal collapsing to transition the width instead of height.
+         */
+        horizontal: {
+            type: Boolean,
+            required: false,
+        },
         /**
          * Toggle the visibility of component.
          */
@@ -58,42 +94,58 @@ const CCollapse = vue.defineComponent({
         'show',
     ],
     setup(props, { slots, emit }) {
-        const handleBeforeEnter = (el) => {
-            el.classList.remove('collapse');
-            el.classList.add('collapsing');
+        const collapsing = vue.ref(false);
+        const show = vue.ref(props.visible);
+        const handleBeforeEnter = () => {
+            collapsing.value = true;
         };
         const handleEnter = (el, done) => {
             emit('show');
             el.addEventListener('transitionend', () => {
-                el.classList.add('collapse', 'show');
                 done();
             });
-            el.style.height = `${el.scrollHeight}px`;
+            setTimeout(() => {
+                if (props.horizontal) {
+                    el.style.width = `${el.scrollWidth}px`;
+                    return;
+                }
+                el.style.height = `${el.scrollHeight}px`;
+            }, 1);
         };
         const handleAfterEnter = (el) => {
-            el.classList.remove('collapsing');
-            el.style.removeProperty('height');
+            show.value = true;
+            collapsing.value = false;
+            props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height');
         };
         const handleBeforeLeave = (el) => {
-            el.classList.add('show');
+            collapsing.value = true;
+            show.value = false;
+            if (props.horizontal) {
+                el.style.width = `${el.scrollWidth}px`;
+                return;
+            }
             el.style.height = `${el.scrollHeight}px`;
         };
         const handleLeave = (el, done) => {
             emit('hide');
-            el.classList.remove('collapse', 'show');
-            el.classList.add('collapsing');
             el.addEventListener('transitionend', () => {
                 done();
             });
-            el.style.height = '0px';
+            setTimeout(() => {
+                if (props.horizontal) {
+                    el.style.width = '0px';
+                    return;
+                }
+                el.style.height = '0px';
+            }, 1);
         };
         const handleAfterLeave = (el) => {
-            el.classList.remove('collapsing');
-            el.classList.add('collapse');
+            collapsing.value = false;
+            props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height');
         };
         return () => vue.h(vue.Transition, {
-            name: 'fade',
-            onBeforeEnter: (el) => handleBeforeEnter(el),
+            css: false,
+            onBeforeEnter: () => handleBeforeEnter(),
             onEnter: (el, done) => handleEnter(el, done),
             onAfterEnter: (el) => handleAfterEnter(el),
             onBeforeLeave: (el) => handleBeforeLeave(el),
@@ -101,12 +153,10 @@ const CCollapse = vue.defineComponent({
             onAfterLeave: (el) => handleAfterLeave(el),
         }, () => vue.withDirectives(vue.h('div', {
             class: [
-                'collapse',
-                {
-                    show: props.visible,
-                },
+                collapsing.value ? 'collapsing' : 'collapse',
+                { 'collapse-horizontal': props.horizontal, show: show.value },
             ],
-        }, slots.default && slots.default()), [[vue.vShow, props.visible]]));
+        }, slots.default && slots.default()), [[vVisible, props.visible]]));
     },
 });
 
@@ -800,6 +850,7 @@ const CButton = vue.defineComponent({
             ],
             disabled: props.disabled && props.component !== 'a',
             ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+            ...(props.component === 'a' && props.href && { href: props.href }),
         }, slots.default && slots.default());
     },
 });
@@ -1614,29 +1665,32 @@ function getBasePlacement(placement) {
   return placement.split('-')[0];
 }
 
-// import { isHTMLElement } from './instanceOf';
-function getBoundingClientRect(element, // eslint-disable-next-line unused-imports/no-unused-vars
-includeScale) {
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getBoundingClientRect(element, includeScale) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
 
   var rect = element.getBoundingClientRect();
   var scaleX = 1;
-  var scaleY = 1; // FIXME:
-  // `offsetWidth` returns an integer while `getBoundingClientRect`
-  // returns a float. This results in `scaleX` or `scaleY` being
-  // non-1 when it should be for elements that aren't a full pixel in
-  // width or height.
-  // if (isHTMLElement(element) && includeScale) {
-  //   const offsetHeight = element.offsetHeight;
-  //   const offsetWidth = element.offsetWidth;
-  //   // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-  //   // Fallback to 1 in case both values are `0`
-  //   if (offsetWidth > 0) {
-  //     scaleX = rect.width / offsetWidth || 1;
-  //   }
-  //   if (offsetHeight > 0) {
-  //     scaleY = rect.height / offsetHeight || 1;
-  //   }
-  // }
+  var scaleY = 1;
+
+  if (isHTMLElement(element) && includeScale) {
+    var offsetHeight = element.offsetHeight;
+    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
+    // Fallback to 1 in case both values are `0`
+
+    if (offsetWidth > 0) {
+      scaleX = round(rect.width) / offsetWidth || 1;
+    }
+
+    if (offsetHeight > 0) {
+      scaleY = round(rect.height) / offsetHeight || 1;
+    }
+  }
 
   return {
     width: rect.width / scaleX,
@@ -1791,13 +1845,13 @@ function getMainAxisFromPlacement(placement) {
   return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
 }
 
-var max = Math.max;
-var min = Math.min;
-var round = Math.round;
-
 function within(min$1, value, max$1) {
   return max(min$1, min(value, max$1));
 }
+function withinMaxClamp(min, value, max) {
+  var v = within(min, value, max);
+  return v > max ? max : v;
+}
 
 function getFreshSideObject() {
   return {
@@ -1929,8 +1983,8 @@ function roundOffsetsByDPR(_ref) {
   var win = window;
   var dpr = win.devicePixelRatio || 1;
   return {
-    x: round(round(x * dpr) / dpr) || 0,
-    y: round(round(y * dpr) / dpr) || 0
+    x: round(x * dpr) / dpr || 0,
+    y: round(y * dpr) / dpr || 0
   };
 }
 
@@ -1945,14 +1999,23 @@ function mapToStyles(_ref2) {
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
-
-  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;
+      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 = 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;
@@ -1977,16 +2040,18 @@ function mapToStyles(_ref2) {
     offsetParent = offsetParent;
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
-      sideY = bottom; // $FlowFixMe[prop-missing]
-
-      y -= offsetParent[heightProp] - popperRect.height;
+      sideY = bottom;
+      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      offsetParent[heightProp];
+      y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
     }
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
-      sideX = right; // $FlowFixMe[prop-missing]
-
-      x -= offsetParent[widthProp] - popperRect.width;
+      sideX = right;
+      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      offsetParent[widthProp];
+      x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
     }
   }
@@ -1995,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;
 
@@ -2004,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,
@@ -2029,7 +2105,8 @@ function computeStyles(_ref4) {
     variation: getVariation(state.placement),
     popper: state.elements.popper,
     popperRect: state.rects.popper,
-    gpuAcceleration: gpuAcceleration
+    gpuAcceleration: gpuAcceleration,
+    isFixed: state.options.strategy === 'fixed'
   };
 
   if (state.modifiersData.popperOffsets != null) {
@@ -2287,7 +2364,7 @@ function getInnerBoundingClientRect(element) {
 }
 
 function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -2804,6 +2881,14 @@ function preventOverflow(_ref) {
   var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
     placement: state.placement
   })) : tetherOffset;
+  var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
+    mainAxis: tetherOffsetValue,
+    altAxis: tetherOffsetValue
+  } : Object.assign({
+    mainAxis: 0,
+    altAxis: 0
+  }, tetherOffsetValue);
+  var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
   var data = {
     x: 0,
     y: 0
@@ -2813,13 +2898,15 @@ function preventOverflow(_ref) {
     return;
   }
 
-  if (checkMainAxis || checkAltAxis) {
+  if (checkMainAxis) {
+    var _offsetModifierState$;
+
     var mainSide = mainAxis === 'y' ? top : left;
     var altSide = mainAxis === 'y' ? bottom : right;
     var len = mainAxis === 'y' ? 'height' : 'width';
     var offset = popperOffsets[mainAxis];
-    var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
-    var max$1 = popperOffsets[mainAxis] - overflow[altSide];
+    var min$1 = offset + overflow[mainSide];
+    var max$1 = offset - overflow[altSide];
     var additive = tether ? -popperRect[len] / 2 : 0;
     var minLen = variation === start ? referenceRect[len] : popperRect[len];
     var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -2839,36 +2926,45 @@ function preventOverflow(_ref) {
     // width or height)
 
     var arrowLen = within(0, referenceRect[len], arrowRect[len]);
-    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
-    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+    var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
+    var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
     var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
     var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
-    var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
-    var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
-    var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+    var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
+    var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
+    var tetherMax = offset + maxOffset - offsetModifierValue;
+    var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
+    popperOffsets[mainAxis] = preventedOffset;
+    data[mainAxis] = preventedOffset - offset;
+  }
 
-    if (checkMainAxis) {
-      var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
-      popperOffsets[mainAxis] = preventedOffset;
-      data[mainAxis] = preventedOffset - offset;
-    }
+  if (checkAltAxis) {
+    var _offsetModifierState$2;
 
-    if (checkAltAxis) {
-      var _mainSide = mainAxis === 'x' ? top : left;
+    var _mainSide = mainAxis === 'x' ? top : left;
 
-      var _altSide = mainAxis === 'x' ? bottom : right;
+    var _altSide = mainAxis === 'x' ? bottom : right;
 
-      var _offset = popperOffsets[altAxis];
+    var _offset = popperOffsets[altAxis];
 
-      var _min = _offset + overflow[_mainSide];
+    var _len = altAxis === 'y' ? 'height' : 'width';
 
-      var _max = _offset - overflow[_altSide];
+    var _min = _offset + overflow[_mainSide];
 
-      var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
+    var _max = _offset - overflow[_altSide];
 
-      popperOffsets[altAxis] = _preventedOffset;
-      data[altAxis] = _preventedOffset - _offset;
-    }
+    var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
+
+    var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
+
+    var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
+
+    var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
+
+    var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
+
+    popperOffsets[altAxis] = _preventedOffset;
+    data[altAxis] = _preventedOffset - _offset;
   }
 
   state.modifiersData[name] = data;
@@ -2900,8 +2996,8 @@ function getNodeScroll(node) {
 
 function isElementScaled(element) {
   var rect = element.getBoundingClientRect();
-  var scaleX = rect.width / element.offsetWidth || 1;
-  var scaleY = rect.height / element.offsetHeight || 1;
+  var scaleX = round(rect.width) / element.offsetWidth || 1;
+  var scaleY = round(rect.height) / element.offsetHeight || 1;
   return scaleX !== 1 || scaleY !== 1;
 } // Returns the composite rect of an element relative to its offsetParent.
 // Composite means it takes into account transforms as well as layout.
@@ -2913,9 +3009,9 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   }
 
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
-  isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -2932,7 +3028,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
     }
 
     if (isHTMLElement(offsetParent)) {
-      offsets = getBoundingClientRect(offsetParent);
+      offsets = getBoundingClientRect(offsetParent, true);
       offsets.x += offsetParent.clientLeft;
       offsets.y += offsetParent.clientTop;
     } else if (documentElement) {
@@ -3852,6 +3948,176 @@ const CDropdownPlugin = {
     },
 };
 
+const CSpinner = vue.defineComponent({
+    name: 'CSpinner',
+    props: {
+        /**
+         * 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: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return [
+                    'primary',
+                    'secondary',
+                    'success',
+                    'danger',
+                    'warning',
+                    'info',
+                    'dark',
+                    'light',
+                ].includes(value);
+            },
+        },
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'div',
+            required: false,
+        },
+        /**
+         * Size the component small.
+         *
+         * @values 'sm'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return value === 'sm';
+            },
+        },
+        /**
+         * Set the button variant to an outlined button or a ghost button.
+         *
+         * @values 'border', 'grow'
+         */
+        variant: {
+            type: String,
+            default: 'border',
+            required: false,
+            validator: (value) => {
+                return ['border', 'grow'].includes(value);
+            },
+        },
+        /**
+         * Set visually hidden label for accessibility purposes.
+         */
+        visuallyHiddenLabel: {
+            type: String,
+            default: 'Loading...',
+            required: false,
+        },
+    },
+    setup(props) {
+        return () => vue.h(props.component, {
+            class: [
+                `spinner-${props.variant}`,
+                `text-${props.color}`,
+                props.size && `spinner-${props.variant}-${props.size}`,
+            ],
+            role: 'status',
+        }, vue.h('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
+    },
+});
+
+const CSpinnerPlugin = {
+    install: (app) => {
+        app.component(CSpinner.name, CSpinner);
+    },
+};
+
+const CElementCover = vue.defineComponent({
+    name: 'CElementCover',
+    props: {
+        /**
+         * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
+         * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
+         * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
+         *
+         * @type {sides: string[], query: string}[]
+         */
+        boundaries: {
+            // TODO: check if this is correct, TJ
+            type: Array,
+            require: true,
+        },
+        /**
+         * Opacity of the cover. [docs]
+         *
+         * @type number
+         */
+        opacity: {
+            type: Number,
+            require: false,
+        },
+    },
+    setup(props) {
+        let containerCoords = {};
+        const elementRef = vue.ref();
+        const getCustomBoundaries = () => {
+            if (!props.boundaries || elementRef === null) {
+                return {};
+            }
+            const parent = elementRef.value.parentElement;
+            if (!parent) {
+                return {};
+            }
+            const parentCoords = parent.getBoundingClientRect();
+            const customBoundaries = {};
+            props.boundaries.forEach((value) => {
+                const element = parent.querySelector(value.query);
+                if (!element || !value.sides) {
+                    return;
+                }
+                const coords = element.getBoundingClientRect();
+                value.sides.forEach((side) => {
+                    const sideMargin = Math.abs(coords[side] - parentCoords[side]);
+                    customBoundaries[side] = `${sideMargin}px`;
+                });
+            });
+            return customBoundaries;
+        };
+        vue.onMounted(function () {
+            vue.nextTick(function () {
+                containerCoords = getCustomBoundaries();
+            });
+        });
+        return () => vue.h('div', {
+            style: {
+                ...containerCoords,
+                position: 'absolute',
+                'background-color': `rgb(255,255,255,${props.opacity})`,
+            },
+            ref: elementRef,
+        }, vue.h('div', // TODO: use slot to override this
+        {
+            style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            },
+        }, vue.h(CSpinner, {
+            variant: 'grow',
+            color: 'primary',
+        })));
+    },
+});
+
+const CElementCoverPlugin = {
+    install: (app) => {
+        app.component(CElementCover.name, CElementCover);
+    },
+};
+
 const CFooter = vue.defineComponent({
     name: 'CFooter',
     props: {
@@ -4254,11 +4520,11 @@ const CFormInput = vue.defineComponent({
         'update:modelValue',
     ],
     setup(props, { emit, slots }) {
-        // const handleChange = (event: InputEvent) => {
-        //   const target = event.target as HTMLInputElement
-        //   emit('change', event)
-        //   emit('update:modelValue', target.value)
-        // }
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.value);
+        };
         const handleInput = (event) => {
             const target = event.target;
             emit('input', event);
@@ -4275,7 +4541,7 @@ const CFormInput = vue.defineComponent({
                 },
             ],
             disabled: props.disabled,
-            // onChange: (event: InputEvent) => handleChange(event),
+            onChange: (event) => handleChange(event),
             onInput: (event) => handleInput(event),
             readonly: props.readonly,
             type: props.type,
@@ -4397,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:
@@ -4449,25 +4719,35 @@ 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: [
                 'form-select',
                 {
                     [`form-select-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    '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());
@@ -4766,7 +5046,7 @@ const CFormPlugin = {
     },
 };
 
-const BREAKPOINTS$2 = [
+const BREAKPOINTS$4 = [
     'xxl',
     'xl',
     'lg',
@@ -4839,40 +5119,40 @@ const CCol = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
-        const repsonsiveCLassNames = [];
-        BREAKPOINTS$2.forEach((bp) => {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS$4.forEach((bp) => {
             const breakpoint = props[bp];
             const infix = bp === 'xs' ? '' : `-${bp}`;
             if (breakpoint) {
                 if (typeof breakpoint === 'number' || typeof breakpoint === 'string') {
-                    repsonsiveCLassNames.push(`col${infix}-${breakpoint}`);
+                    repsonsiveClassNames.push(`col${infix}-${breakpoint}`);
                 }
                 if (typeof breakpoint === 'boolean') {
-                    repsonsiveCLassNames.push(`col${infix}`);
+                    repsonsiveClassNames.push(`col${infix}`);
                 }
             }
             if (breakpoint && typeof breakpoint === 'object') {
                 if (typeof breakpoint.span === 'number' || typeof breakpoint.span === 'string') {
-                    repsonsiveCLassNames.push(`col${infix}-${breakpoint.span}`);
+                    repsonsiveClassNames.push(`col${infix}-${breakpoint.span}`);
                 }
                 if (typeof breakpoint.span === 'boolean') {
-                    repsonsiveCLassNames.push(`col${infix}`);
+                    repsonsiveClassNames.push(`col${infix}`);
                 }
                 if (typeof breakpoint.order === 'number' || typeof breakpoint.order === 'string') {
-                    repsonsiveCLassNames.push(`order${infix}-${breakpoint.order}`);
+                    repsonsiveClassNames.push(`order${infix}-${breakpoint.order}`);
                 }
                 if (typeof breakpoint.offset === 'number') {
-                    repsonsiveCLassNames.push(`offset${infix}-${breakpoint.offset}`);
+                    repsonsiveClassNames.push(`offset${infix}-${breakpoint.offset}`);
                 }
             }
         });
         return () => vue.h('div', {
-            class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col'],
+            class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'],
         }, slots.default && slots.default());
     },
 });
 
-const BREAKPOINTS$1 = [
+const BREAKPOINTS$3 = [
     'xxl',
     'xl',
     'lg',
@@ -4927,18 +5207,18 @@ const CContainer = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
-        const repsonsiveCLassNames = [];
-        BREAKPOINTS$1.forEach((bp) => {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS$3.forEach((bp) => {
             const breakpoint = props[bp];
-            breakpoint && repsonsiveCLassNames.push(`container-${bp}`);
+            breakpoint && repsonsiveClassNames.push(`container-${bp}`);
         });
         return () => vue.h('div', {
-            class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container'],
+            class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'],
         }, slots.default && slots.default());
     },
 });
 
-const BREAKPOINTS = [
+const BREAKPOINTS$2 = [
     'xxl',
     'xl',
     'lg',
@@ -5011,27 +5291,27 @@ const CRow = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
-        const repsonsiveCLassNames = [];
-        BREAKPOINTS.forEach((bp) => {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS$2.forEach((bp) => {
             const breakpoint = props[bp];
             const infix = bp === 'xs' ? '' : `-${bp}`;
             if (typeof breakpoint === 'object') {
                 if (breakpoint.cols) {
-                    repsonsiveCLassNames.push(`row-cols${infix}-${breakpoint.cols}`);
+                    repsonsiveClassNames.push(`row-cols${infix}-${breakpoint.cols}`);
                 }
                 if (typeof breakpoint.gutter === 'number') {
-                    repsonsiveCLassNames.push(`g${infix}-${breakpoint.gutter}`);
+                    repsonsiveClassNames.push(`g${infix}-${breakpoint.gutter}`);
                 }
                 if (typeof breakpoint.gutterX === 'number') {
-                    repsonsiveCLassNames.push(`gx${infix}-${breakpoint.gutterX}`);
+                    repsonsiveClassNames.push(`gx${infix}-${breakpoint.gutterX}`);
                 }
                 if (typeof breakpoint.gutterY === 'number') {
-                    repsonsiveCLassNames.push(`gy${infix}-${breakpoint.gutterY}`);
+                    repsonsiveClassNames.push(`gy${infix}-${breakpoint.gutterY}`);
                 }
             }
         });
         return () => vue.h('div', {
-            class: ['row', repsonsiveCLassNames],
+            class: ['row', repsonsiveClassNames],
         }, slots.default && slots.default());
     },
 });
@@ -5325,86 +5605,6 @@ const CListGroupPlugin = {
     },
 };
 
-const CSpinner = vue.defineComponent({
-    name: 'CSpinner',
-    props: {
-        /**
-         * 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: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return [
-                    'primary',
-                    'secondary',
-                    'success',
-                    'danger',
-                    'warning',
-                    'info',
-                    'dark',
-                    'light',
-                ].includes(value);
-            },
-        },
-        /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
-         */
-        component: {
-            type: String,
-            default: 'div',
-            required: false,
-        },
-        /**
-         * Size the component small.
-         *
-         * @values 'sm'
-         */
-        size: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return value === 'sm';
-            },
-        },
-        /**
-         * Set the button variant to an outlined button or a ghost button.
-         *
-         * @values 'border', 'grow'
-         */
-        variant: {
-            type: String,
-            default: 'border',
-            required: false,
-            validator: (value) => {
-                return ['border', 'grow'].includes(value);
-            },
-        },
-        /**
-         * Set visually hidden label for accessibility purposes.
-         */
-        visuallyHiddenLabel: {
-            type: String,
-            default: 'Loading...',
-            required: false,
-        },
-    },
-    setup(props) {
-        return () => vue.h(props.component, {
-            class: [
-                `spinner-${props.variant}`,
-                `text-${props.color}`,
-                props.size && `spinner-${props.variant}-${props.size}`,
-            ],
-            role: 'status',
-        }, vue.h('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
-    },
-});
-
 const CLoadingButton = vue.defineComponent({
     name: 'CLoadingButton',
     props: {
@@ -5573,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.
          */
@@ -5611,7 +5819,7 @@ const CModal = vue.defineComponent({
             emit('show');
         };
         const handleAfterEnter = () => {
-            window.addEventListener('click', handleClickOutside);
+            window.addEventListener('mousedown', handleMouseDown);
             window.addEventListener('keyup', handleKeyUp);
         };
         const handleLeave = (el, done) => {
@@ -5622,7 +5830,7 @@ const CModal = vue.defineComponent({
             el.classList.remove('show');
         };
         const handleAfterLeave = (el) => {
-            window.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('mousedown', handleMouseDown);
             window.removeEventListener('keyup', handleKeyUp);
             el.style.display = 'none';
         };
@@ -5644,7 +5852,10 @@ const CModal = vue.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();
@@ -5658,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',
@@ -6853,19 +7067,20 @@ const COffcanvas = vue.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;
@@ -6878,31 +7093,34 @@ const COffcanvas = vue.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 () => [
             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: [
-                        'offcanvas',
-                        {
-                            [`offcanvas-${props.placement}`]: props.placement,
-                        },
-                    ],
-                    ref: offcanvasRef,
-                    role: 'dialog',
-                }, slots.default && slots.default())),
+            }, () => vue.withDirectives(vue.h('div', {
+                class: [
+                    'offcanvas',
+                    {
+                        [`offcanvas-${props.placement}`]: props.placement,
+                    },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+            }, slots.default && slots.default()), [[vVisible, props.visible]])),
             props.backdrop &&
                 vue.h(CBackdrop, {
-                    class: 'modal-backdrop',
+                    class: 'offcanvas-backdrop',
                     visible: visible.value,
                 }),
         ];
@@ -7349,6 +7567,137 @@ const CPaginationPlugin = {
     },
 };
 
+const BREAKPOINTS$1 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CPlaceholder = vue.defineComponent({
+    name: 'CPlaceholder',
+    props: {
+        /**
+         * Set animation type to better convey the perception of something being actively loaded.
+         *
+         * @values 'glow', 'wave'
+         */
+        animation: {
+            type: String,
+            default: undefined,
+            require: false,
+            validator: (value) => {
+                return ['glow', 'wave'].includes(value);
+            },
+        },
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        color: Color,
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'span',
+            required: false,
+        },
+        /**
+         * Size the component extra small, small, or large.
+         *
+         * @values 'xs', 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['xs', 'sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * The number of columns on extra small devices (<576px).
+         */
+        xs: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * The number of columns on small devices (<768px).
+         */
+        sm: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * The number of columns on medium devices (<992px).
+         */
+        md: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * The number of columns on large devices (<1200px).
+         */
+        lg: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * The number of columns on X-Large devices (<1400px).
+         */
+        xl: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * The number of columns on XX-Large devices (≥1400px).
+         */
+        xxl: {
+            type: Number,
+            default: undefined,
+            require: false,
+        },
+    },
+    setup(props, { slots }) {
+        const repsonsiveClassNames = [];
+        BREAKPOINTS$1.forEach((bp) => {
+            const breakpoint = props[bp];
+            const infix = bp === 'xs' ? '' : `-${bp}`;
+            if (typeof breakpoint === 'number') {
+                repsonsiveClassNames.push(`col${infix}-${breakpoint}`);
+            }
+            if (typeof breakpoint === 'boolean') {
+                repsonsiveClassNames.push(`col${infix}`);
+            }
+        });
+        return () => vue.h(props.component, {
+            class: [
+                props.animation ? `placeholder-${props.animation}` : 'placeholder',
+                {
+                    [`bg-${props.color}`]: props.color,
+                    [`placeholder-${props.size}`]: props.size,
+                },
+                repsonsiveClassNames,
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+const CPlaceholderPlugin = {
+    install: (app) => {
+        app.component(CPlaceholder.name, CPlaceholder);
+    },
+};
+
 const CProgressBar = vue.defineComponent({
     name: 'CProgressBar',
     props: {
@@ -7866,90 +8215,6 @@ const CSidebarPlugin = {
     },
 };
 
-const CSpinnerPlugin = {
-    install: (app) => {
-        app.component(CSpinner.name, CSpinner);
-    },
-};
-
-const CElementCover = vue.defineComponent({
-    name: 'CElementCover',
-    props: {
-        /**
-         * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
-         * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
-         * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
-         *
-         * @type {sides: string[], query: string}[]
-         */
-        boundaries: {
-            // TODO: check if this is correct, TJ
-            type: Array,
-            require: true,
-        },
-        /**
-         * Opacity of the cover. [docs]
-         *
-         * @type number
-         */
-        opacity: {
-            type: Number,
-            require: false,
-        },
-    },
-    setup(props) {
-        let containerCoords = {};
-        const elementRef = vue.ref();
-        const getCustomBoundaries = () => {
-            if (!props.boundaries || elementRef === null) {
-                return {};
-            }
-            const parent = elementRef.value.parentElement;
-            if (!parent) {
-                return {};
-            }
-            const parentCoords = parent.getBoundingClientRect();
-            const customBoundaries = {};
-            props.boundaries.forEach((value) => {
-                const element = parent.querySelector(value.query);
-                if (!element || !value.sides) {
-                    return;
-                }
-                const coords = element.getBoundingClientRect();
-                value.sides.forEach((side) => {
-                    const sideMargin = Math.abs(coords[side] - parentCoords[side]);
-                    customBoundaries[side] = `${sideMargin}px`;
-                });
-            });
-            return customBoundaries;
-        };
-        vue.onMounted(function () {
-            vue.nextTick(function () {
-                containerCoords = getCustomBoundaries();
-            });
-        });
-        return () => vue.h('div', {
-            style: {
-                ...containerCoords,
-                position: 'absolute',
-                'background-color': `rgb(255,255,255,${props.opacity})`,
-            },
-            ref: elementRef,
-        }, vue.h('div', // TODO: use slot to override this
-        {
-            style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-            },
-        }, vue.h(CSpinner, {
-            variant: 'grow',
-            color: 'primary',
-        })));
-    },
-});
-
 const CTable = vue.defineComponent({
     name: 'CTable',
     props: {
@@ -8400,9 +8665,12 @@ const CSmartTableHead = vue.defineComponent({
         },
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             require: false,
         },
+        columnFilterValue: {
+            type: Object,
+            required: false,
+        },
         columnSorter: {
             type: [Boolean, Object],
             default: undefined,
@@ -8541,9 +8809,9 @@ const CSmartTableHead = vue.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)],
                                         }),
                                     }),
                             })),
@@ -8857,7 +9125,6 @@ const CSmartTable = vue.defineComponent({
          */
         columnFilter: {
             type: [Boolean, Object],
-            default: undefined,
             required: false,
         },
         /**
@@ -8885,7 +9152,6 @@ const CSmartTable = vue.defineComponent({
          */
         columns: {
             type: Array,
-            default: () => [],
             required: false,
         },
         /**
@@ -8934,7 +9200,6 @@ const CSmartTable = vue.defineComponent({
          */
         itemsPerPage: {
             type: Number,
-            default: 10,
             required: false,
         },
         /**
@@ -9006,7 +9271,8 @@ const CSmartTable = vue.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
          */
@@ -9180,7 +9446,7 @@ const CSmartTable = vue.defineComponent({
                 selectedAll.value = 'indeterminate';
             }
         });
-        const itemsPerPage = vue.ref(props.itemsPerPage);
+        const itemsPerPage = vue.ref(props.itemsPerPage || items.value.length);
         const activePage = vue.ref(props.activePage);
         const sorterState = vue.reactive(props.sorterValue || {});
         const columnFilterState = vue.ref(props.columnFilterValue ? props.columnFilterValue : {});
@@ -9193,7 +9459,7 @@ const CSmartTable = vue.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];
@@ -9291,16 +9557,16 @@ const CSmartTable = vue.defineComponent({
             sorterState.state = '';
         };
         // computed
-        const genCols = Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_');
-        const rawColumnNames = props.columns
+        const genCols = vue.computed(() => Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'));
+        const rawColumnNames = vue.computed(() => props.columns
             ? props.columns.map((column) => {
                 if (typeof column === 'object')
                     return column.key;
                 else
                     return column;
             })
-            : genCols; //! || el
-        const itemsDataColumns = vue.computed(() => rawColumnNames.filter((name) => genCols.includes(name)));
+            : genCols.value); //! || el
+        const itemsDataColumns = vue.computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
         // variables
         const columnFiltered = () => {
             let _items = items.value;
@@ -9373,6 +9639,8 @@ const CSmartTable = vue.defineComponent({
                             class: 'col-auto p-0',
                         }, props.tableFilter &&
                             vue.h(CSmartTableFilter, {
+                                filterLabel: props.tableFilterLabel,
+                                filterPlaceholder: props.tableFilterPlaceholder,
                                 onFilterInput: (value) => tableFilterChange(value, 'input'),
                                 onFilterChange: (value) => tableFilterChange(value, 'change'),
                                 value: tableFilterState.value,
@@ -9402,8 +9670,9 @@ const CSmartTable = vue.defineComponent({
                                 vue.h(CSmartTableHead, {
                                     component: 'head',
                                     ...props.tableHeadProps,
-                                    columnFilter: columnFilterState.value,
-                                    columns: props.columns,
+                                    columnFilter: props.columnFilter,
+                                    columnFilterValue: columnFilterState.value,
+                                    columns: rawColumnNames.value,
                                     columnSorter: props.columnSorter,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
@@ -9450,12 +9719,12 @@ const CSmartTable = vue.defineComponent({
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
-                                columns: props.columns,
+                                columns: rawColumnNames.value,
                                 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,
                             }),
@@ -9465,7 +9734,7 @@ const CSmartTable = vue.defineComponent({
                                     ...props.tableFootProps,
                                     columnFilter: false,
                                     columnSorter: false,
-                                    columns: props.columns,
+                                    columns: rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
@@ -9495,7 +9764,6 @@ const CSmartTable = vue.defineComponent({
                             pages: numberOfPages.value,
                             activePage: activePage.value,
                             onActivePageChange: handleActivePageChange,
-                            limit: itemsPerPage.value,
                         })
                         : ''),
                     vue.h('div', {
@@ -10524,6 +10792,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CDropdownDivider: CDropdownDivider,
     CDropdownMenu: CDropdownMenu,
     CDropdownToggle: CDropdownToggle,
+    CElementCoverPlugin: CElementCoverPlugin,
+    CElementCover: CElementCover,
     CFooterPlugin: CFooterPlugin,
     CFooter: CFooter,
     CFormPlugin: CFormPlugin,
@@ -10590,6 +10860,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CPagination: CPagination,
     CPaginationItem: CPaginationItem,
     CSmartPagination: CSmartPagination,
+    CPlaceholderPlugin: CPlaceholderPlugin,
+    CPlaceholder: CPlaceholder,
     CProgressPlugin: CProgressPlugin,
     CProgress: CProgress,
     CProgressBar: CProgressBar,
@@ -10635,49 +10907,79 @@ var Components = /*#__PURE__*/Object.freeze({
     CWidgetStatsF: CWidgetStatsF
 });
 
+const BREAKPOINTS = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+var vcplaceholder = {
+    name: 'c-placeholder',
+    mounted(el, binding) {
+        const value = binding.value;
+        el.classList.add(value.animation ? `placeholder-${value.animation}` : 'placeholder');
+        BREAKPOINTS.forEach((bp) => {
+            const breakpoint = value[bp];
+            const infix = bp === 'xs' ? '' : `-${bp}`;
+            if (typeof breakpoint === 'number') {
+                el.classList.add(`col${infix}-${breakpoint}`);
+            }
+            if (typeof breakpoint === 'boolean') {
+                el.classList.add(`col${infix}`);
+            }
+        });
+    },
+};
+
 const getUID$1 = (prefix) => {
     do {
         prefix += Math.floor(Math.random() * 1000000);
     } while (document.getElementById(prefix));
     return prefix;
 };
-const createTooltipElement = (id, content) => {
-    const tooltip = document.createElement('div');
-    tooltip.id = id;
-    tooltip.classList.add('tooltip', 'bs-tooltip-auto', 'fade');
-    tooltip.setAttribute('role', 'tooltip');
-    tooltip.innerHTML = `<div class="tooltip-arrow" data-popper-arrow></div>
-     <div class="tooltip-inner" id="">${content}</div>`;
-    return tooltip;
+const createPopoverElement = (id, header, content) => {
+    const popover = document.createElement('div');
+    popover.id = id;
+    popover.classList.add('popover', 'bs-popover-auto', 'fade');
+    popover.setAttribute('role', 'popover');
+    popover.innerHTML = `<div class="popover-arrow" data-popper-arrow></div>
+     <div class="popover-header">${header}</div>
+     <div class="popover-body" id="">${content}</div>`;
+    return popover;
 };
-const addTooltipElement = (tooltip, el, popperOptions) => {
-    document.body.appendChild(tooltip);
-    createPopper(el, tooltip, popperOptions);
+const addPopoverElement = (popover, el, popperOptions) => {
+    document.body.appendChild(popover);
+    createPopper(el, popover, popperOptions);
     setTimeout(() => {
-        tooltip.classList.add('show');
+        popover.classList.add('show');
     }, 1);
 };
-const removeTooltipElement = (tooltip) => {
-    tooltip.classList.remove('show');
+const removePopoverElement = (popover) => {
+    popover.classList.remove('show');
     setTimeout(() => {
-        document.body.removeChild(tooltip);
+        document.body.removeChild(popover);
     }, 300);
 };
-const toggleTooltipElement = (tooltip, el, popperOptions) => {
-    const popperElement = document.getElementById(tooltip.id);
+const togglePopoverElement = (popover, el, popperOptions) => {
+    const popperElement = document.getElementById(popover.id);
     if (popperElement && popperElement.classList.contains('show')) {
-        removeTooltipElement(tooltip);
+        removePopoverElement(popover);
         return;
     }
-    addTooltipElement(tooltip, el, popperOptions);
+    addPopoverElement(popover, el, popperOptions);
 };
-var vctooltip = {
+var vcpopover = {
+    name: 'c-popover',
+    uid: '',
     mounted(el, binding) {
         const value = binding.value;
         const content = typeof value === 'string' ? value : value.content ? value.content : '';
-        const trigger = value.trigger ? value.trigger : 'hover';
+        const header = value.header ? value.header : '';
+        const trigger = value.trigger ? value.trigger : 'click';
         // Popper Config
-        const offset = value.offset ? value.offset : [0, 0];
+        const offset = value.offset ? value.offset : [0, 8];
         const placement = value.placement ? value.placement : 'top';
         const popperOptions = {
             placement: placement,
@@ -10690,33 +10992,33 @@ var vctooltip = {
                 },
             ],
         };
-        const tooltipUID = getUID$1('tooltip');
-        binding.arg = tooltipUID;
-        const tooltip = createTooltipElement(tooltipUID, content);
+        const popoverUID = getUID$1('popover');
+        binding.arg = popoverUID;
+        const popover = createPopoverElement(popoverUID, header, content);
         trigger.includes('click') &&
             el.addEventListener('click', () => {
-                toggleTooltipElement(tooltip, el, popperOptions);
+                togglePopoverElement(popover, el, popperOptions);
             });
         if (trigger.includes('focus')) {
             el.addEventListener('focus', () => {
-                addTooltipElement(tooltip, el, popperOptions);
+                addPopoverElement(popover, el, popperOptions);
             });
             el.addEventListener('blur', () => {
-                removeTooltipElement(tooltip);
+                removePopoverElement(popover);
             });
         }
         if (trigger.includes('hover')) {
             el.addEventListener('mouseenter', () => {
-                addTooltipElement(tooltip, el, popperOptions);
+                addPopoverElement(popover, el, popperOptions);
             });
             el.addEventListener('mouseleave', () => {
-                removeTooltipElement(tooltip);
+                removePopoverElement(popover);
             });
         }
     },
-    beforeUnmount(binding) {
-        const tooltip = binding.arg && document.getElementById(binding.arg);
-        tooltip && tooltip.remove();
+    unmounted(binding) {
+        const popover = binding.arg && document.getElementById(binding.arg);
+        popover && popover.remove();
     },
 };
 
@@ -10726,47 +11028,43 @@ const getUID = (prefix) => {
     } while (document.getElementById(prefix));
     return prefix;
 };
-const createPopoverElement = (id, header, content) => {
-    const popover = document.createElement('div');
-    popover.id = id;
-    popover.classList.add('popover', 'bs-popover-auto', 'fade');
-    popover.setAttribute('role', 'popover');
-    popover.innerHTML = `<div class="popover-arrow" data-popper-arrow></div>
-     <div class="popover-header">${header}</div>
-     <div class="popover-body" id="">${content}</div>`;
-    return popover;
+const createTooltipElement = (id, content) => {
+    const tooltip = document.createElement('div');
+    tooltip.id = id;
+    tooltip.classList.add('tooltip', 'bs-tooltip-auto', 'fade');
+    tooltip.setAttribute('role', 'tooltip');
+    tooltip.innerHTML = `<div class="tooltip-arrow" data-popper-arrow></div>
+     <div class="tooltip-inner" id="">${content}</div>`;
+    return tooltip;
 };
-const addPopoverElement = (popover, el, popperOptions) => {
-    document.body.appendChild(popover);
-    createPopper(el, popover, popperOptions);
+const addTooltipElement = (tooltip, el, popperOptions) => {
+    document.body.appendChild(tooltip);
+    createPopper(el, tooltip, popperOptions);
     setTimeout(() => {
-        popover.classList.add('show');
+        tooltip.classList.add('show');
     }, 1);
 };
-const removePopoverElement = (popover) => {
-    popover.classList.remove('show');
+const removeTooltipElement = (tooltip) => {
+    tooltip.classList.remove('show');
     setTimeout(() => {
-        document.body.removeChild(popover);
+        document.body.removeChild(tooltip);
     }, 300);
 };
-const togglePopoverElement = (popover, el, popperOptions) => {
-    const popperElement = document.getElementById(popover.id);
+const toggleTooltipElement = (tooltip, el, popperOptions) => {
+    const popperElement = document.getElementById(tooltip.id);
     if (popperElement && popperElement.classList.contains('show')) {
-        removePopoverElement(popover);
+        removeTooltipElement(tooltip);
         return;
     }
-    addPopoverElement(popover, el, popperOptions);
+    addTooltipElement(tooltip, el, popperOptions);
 };
-var vcpopover = {
-    name: 'c-popover',
-    uid: '',
+var vctooltip = {
     mounted(el, binding) {
         const value = binding.value;
         const content = typeof value === 'string' ? value : value.content ? value.content : '';
-        const header = value.header ? value.header : '';
-        const trigger = value.trigger ? value.trigger : 'click';
+        const trigger = value.trigger ? value.trigger : 'hover';
         // Popper Config
-        const offset = value.offset ? value.offset : [0, 8];
+        const offset = value.offset ? value.offset : [0, 0];
         const placement = value.placement ? value.placement : 'top';
         const popperOptions = {
             placement: placement,
@@ -10779,33 +11077,33 @@ var vcpopover = {
                 },
             ],
         };
-        const popoverUID = getUID('popover');
-        binding.arg = popoverUID;
-        const popover = createPopoverElement(popoverUID, header, content);
+        const tooltipUID = getUID('tooltip');
+        binding.arg = tooltipUID;
+        const tooltip = createTooltipElement(tooltipUID, content);
         trigger.includes('click') &&
             el.addEventListener('click', () => {
-                togglePopoverElement(popover, el, popperOptions);
+                toggleTooltipElement(tooltip, el, popperOptions);
             });
         if (trigger.includes('focus')) {
             el.addEventListener('focus', () => {
-                addPopoverElement(popover, el, popperOptions);
+                addTooltipElement(tooltip, el, popperOptions);
             });
             el.addEventListener('blur', () => {
-                removePopoverElement(popover);
+                removeTooltipElement(tooltip);
             });
         }
         if (trigger.includes('hover')) {
             el.addEventListener('mouseenter', () => {
-                addPopoverElement(popover, el, popperOptions);
+                addTooltipElement(tooltip, el, popperOptions);
             });
             el.addEventListener('mouseleave', () => {
-                removePopoverElement(popover);
+                removeTooltipElement(tooltip);
             });
         }
     },
-    unmounted(binding) {
-        const popover = binding.arg && document.getElementById(binding.arg);
-        popover && popover.remove();
+    beforeUnmount(binding) {
+        const tooltip = binding.arg && document.getElementById(binding.arg);
+        tooltip && tooltip.remove();
     },
 };
 
@@ -10832,6 +11130,7 @@ const CoreuiVue = {
         // for (const directive in pluginDirectives) {
         //   app.directive(directive, Directives[directive])
         // }
+        app.directive('c-placeholder', vcplaceholder);
         app.directive('c-popover', vcpopover);
         app.directive('c-tooltip', vctooltip);
     },
@@ -10894,6 +11193,8 @@ exports.CDropdownItem = CDropdownItem;
 exports.CDropdownMenu = CDropdownMenu;
 exports.CDropdownPlugin = CDropdownPlugin;
 exports.CDropdownToggle = CDropdownToggle;
+exports.CElementCover = CElementCover;
+exports.CElementCoverPlugin = CElementCoverPlugin;
 exports.CFooter = CFooter;
 exports.CFooterPlugin = CFooterPlugin;
 exports.CForm = CForm;
@@ -10955,6 +11256,8 @@ exports.COffcanvasTitle = COffcanvasTitle;
 exports.CPagination = CPagination;
 exports.CPaginationItem = CPaginationItem;
 exports.CPaginationPlugin = CPaginationPlugin;
+exports.CPlaceholder = CPlaceholder;
+exports.CPlaceholderPlugin = CPlaceholderPlugin;
 exports.CPopover = CPopover;
 exports.CPopoverPlugin = CPopoverPlugin;
 exports.CProgress = CProgress;
@@ -11001,6 +11304,7 @@ exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
 exports.CWidgetsStatsPlugin = CWidgetsStatsPlugin;
 exports["default"] = CoreuiVue;
+exports.vcplaceholder = vcplaceholder;
 exports.vcpopover = vcpopover;
 exports.vctooltip = vctooltip;
 //# sourceMappingURL=index.js.map