@coreui/vue-pro 4.0.1 → 4.1.0

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]]));
     },
 });
 
@@ -786,9 +836,8 @@ const CButton = vue.defineComponent({
             },
         },
     },
-    setup(props, { slots, attrs }) {
+    setup(props, { slots }) {
         return () => vue.h(props.component, {
-            ...attrs,
             class: [
                 'btn',
                 props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
@@ -801,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());
     },
 });
@@ -979,10 +1029,9 @@ const CCardImage = vue.defineComponent({
             },
         },
     },
-    setup(props, { slots, attrs }) {
+    setup(props, { slots }) {
         return () => vue.h(props.component, {
-            ...attrs,
-            class: [props.orientation ? `card-img-${props.orientation}` : 'card-img'],
+            class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         }, slots.default && slots.default());
     },
 });
@@ -1616,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,
@@ -1793,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 {
@@ -1931,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
   };
 }
 
@@ -1947,7 +1999,8 @@ function mapToStyles(_ref2) {
       position = _ref2.position,
       gpuAcceleration = _ref2.gpuAcceleration,
       adaptive = _ref2.adaptive,
-      roundOffsets = _ref2.roundOffsets;
+      roundOffsets = _ref2.roundOffsets,
+      isFixed = _ref2.isFixed;
 
   var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
       _ref3$x = _ref3.x,
@@ -1979,16 +2032,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;
     }
   }
@@ -2031,7 +2086,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) {
@@ -2289,7 +2345,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`
@@ -2306,7 +2362,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -2806,6 +2862,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
@@ -2815,13 +2879,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
@@ -2841,36 +2907,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;
@@ -2902,8 +2977,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.
@@ -2915,9 +2990,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
@@ -2934,7 +3009,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) {
@@ -3854,6 +3929,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: {
@@ -3945,9 +4190,8 @@ const CFormLabel = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs, slots }) {
+    setup(props, { slots }) {
         return () => vue.h('label', {
-            ...attrs,
             class: props.customClassName ? props.customClassName : 'form-label',
         }, slots.default && slots.default());
     },
@@ -3955,6 +4199,7 @@ const CFormLabel = vue.defineComponent({
 
 const CFormCheck = vue.defineComponent({
     name: 'CFormCheck',
+    inheritAttrs: false,
     props: {
         /**
          * Create button-like checkboxes and radio buttons.
@@ -4005,6 +4250,10 @@ const CFormCheck = vue.defineComponent({
             default: undefined,
             required: false,
         },
+        /**
+         * Input Checkbox indeterminate Property
+         */
+        indeterminate: Boolean,
         /**
          * Group checkboxes or radios on the same horizontal row by adding.
          */
@@ -4027,6 +4276,14 @@ const CFormCheck = vue.defineComponent({
             default: undefined,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [Boolean, String],
+            value: undefined,
+            required: false,
+        },
         /**
          * Specifies the type of component.
          *
@@ -4045,19 +4302,37 @@ const CFormCheck = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { slots, attrs }) {
-        const formControl = () => {
-            return vue.h('input', {
-                ...attrs,
-                class: [
-                    props.button ? 'btn-check' : 'form-check-input',
-                    {
-                        'is-invalid': props.invalid,
-                        'is-valid': props.valid,
+    emits: [
+        /**
+         * Event occurs when the checked value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.checked);
+        };
+        const formControl = () => {
+            return vue.h('input', {
+                checked: props.modelValue,
+                class: [
+                    props.button ? 'btn-check' : 'form-check-input',
+                    {
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
                     },
                 ],
                 id: props.id,
+                indeterminate: props.indeterminate,
+                onChange: (event) => handleChange(event),
                 type: props.type,
+                ...attrs,
             });
         };
         const formLabel = () => {
@@ -4158,6 +4433,14 @@ const CFormInput = vue.defineComponent({
             type: Boolean,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            default: undefined,
+            require: false,
+        },
         /**
          * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
          */
@@ -4203,12 +4486,32 @@ const CFormInput = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs, slots }) {
+    emits: [
+        /**
+         * Event occurs when the element loses focus, after the content has been changed.
+         */
+        'change',
+        /**
+         * Event occurs immediately after the value of a component has changed.
+         */
+        'input',
+        /**
+         * Emit the new value whenever there’s an input or change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        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);
+            emit('update:modelValue', target.value);
+        };
         return () => vue.h('input', {
-            type: props.type,
-            disabled: props.disabled,
-            readonly: props.readonly,
-            ...attrs,
             class: [
                 props.plainText ? 'form-control-plaintext' : 'form-control',
                 {
@@ -4218,6 +4521,12 @@ const CFormInput = vue.defineComponent({
                     'is-valid': props.valid,
                 },
             ],
+            disabled: props.disabled,
+            onChange: (event) => handleChange(event),
+            onInput: (event) => handleInput(event),
+            readonly: props.readonly,
+            type: props.type,
+            value: props.modelValue,
         }, slots.default && slots.default());
     },
 });
@@ -4249,6 +4558,14 @@ const CFormRange = vue.defineComponent({
             default: undefined,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            value: undefined,
+            required: false,
+        },
         /**
          * Toggle the readonly state for the component.
          */
@@ -4275,12 +4592,32 @@ const CFormRange = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs, slots }) {
+    emits: [
+        /**
+         * Event occurs when the value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.value);
+        };
         return () => vue.h('input', {
             class: 'form-range',
+            disabled: props.disabled,
+            max: props.max,
+            min: props.min,
+            onChange: (event) => handleChange(event),
+            steps: props.steps,
+            readonly: props.readonly,
             type: 'range',
-            ...attrs,
-            ...props,
+            value: props.modelValue,
         }, slots.default && slots.default());
     },
 });
@@ -4303,6 +4640,25 @@ const CFormSelect = vue.defineComponent({
             type: Boolean,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+         * Examples:
+         * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
+         * - `:options="['js', 'html']"`
+         */
+        options: {
+            type: Array,
+            default: undefined,
+            required: false,
+        },
         /**
          * Size the component small or large.
          *
@@ -4324,22 +4680,52 @@ const CFormSelect = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs, slots }) {
+    emits: [
+        /**
+         * Event occurs when when a user changes the selected option of a `<select>` element.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            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);
+        };
         return () => vue.h('select', {
-            ...attrs,
             class: [
                 'form-select',
                 {
                     [`form-select-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
                 },
             ],
+            onChange: (event) => handleChange(event),
             size: props.htmlSize,
-        }, slots.default && slots.default());
+        }, 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 === 'string' ? option : option.label);
+            })
+            : slots.default && slots.default());
     },
 });
 
 const CFormSwitch = vue.defineComponent({
     name: 'CFormSwitch',
+    inheritAttrs: false,
     props: {
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document
@@ -4364,6 +4750,14 @@ const CFormSwitch = vue.defineComponent({
             default: undefined,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [Boolean, String],
+            value: undefined,
+            required: false,
+        },
         /**
          * Size the component large or extra large. Works only with `switch`.
          *
@@ -4395,7 +4789,32 @@ const CFormSwitch = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs }) {
+    emits: [
+        /**
+         * Event occurs when the checked value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit }) {
+        const checked = vue.ref(attrs.checked);
+        vue.onMounted(() => {
+            if (props.modelValue && typeof props.modelValue === 'boolean') {
+                console.log(props.modelValue);
+            }
+        });
+        vue.watch(() => props.modelValue, () => {
+            if (typeof props.modelValue === 'boolean')
+                checked.value = props.modelValue;
+        });
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.checked);
+        };
         return () => vue.h('div', {
             class: [
                 'form-check form-switch',
@@ -4408,8 +4827,7 @@ const CFormSwitch = vue.defineComponent({
         }, [
             vue.h('input', {
                 ...attrs,
-                id: props.id,
-                type: props.type,
+                checked: checked.value,
                 class: [
                     'form-check-input',
                     {
@@ -4417,6 +4835,9 @@ const CFormSwitch = vue.defineComponent({
                         'is-valid': props.valid,
                     },
                 ],
+                id: props.id,
+                onChange: (event) => handleChange(event),
+                type: props.type,
             }),
             props.label &&
                 vue.h(CFormLabel, {
@@ -4463,6 +4884,14 @@ const CFormTextarea = vue.defineComponent({
             type: Boolean,
             required: false,
         },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            default: undefined,
+            require: false,
+        },
         /**
          * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
          */
@@ -4485,9 +4914,27 @@ const CFormTextarea = vue.defineComponent({
             required: false,
         },
     },
-    setup(props, { attrs, slots }) {
+    emits: [
+        /**
+         * Event occurs when the element loses focus, after the content has been changed.
+         */
+        'change',
+        /**
+         * Event occurs immediately after the value of a component has changed.
+         */
+        'input',
+        /**
+         * Emit the new value whenever there’s an input or change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleInput = (event) => {
+            const target = event.target;
+            emit('input', event);
+            emit('update:modelValue', target.value);
+        };
         return () => vue.h('textarea', {
-            ...attrs,
             disabled: props.disabled,
             readonly: props.readonly,
             class: [
@@ -4497,6 +4944,8 @@ const CFormTextarea = vue.defineComponent({
                     'is-valid': props.valid,
                 },
             ],
+            onInput: (event) => handleInput(event),
+            value: props.modelValue,
         }, slots.default && slots.default());
     },
 });
@@ -4566,7 +5015,7 @@ const CFormPlugin = {
     },
 };
 
-const BREAKPOINTS$2 = [
+const BREAKPOINTS$4 = [
     'xxl',
     'xl',
     'lg',
@@ -4639,40 +5088,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',
@@ -4727,18 +5176,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',
@@ -4811,27 +5260,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());
     },
 });
@@ -5125,86 +5574,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: {
@@ -6689,20 +7058,19 @@ const COffcanvas = vue.defineComponent({
                 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,
                 }),
         ];
@@ -7040,7 +7408,7 @@ const CSmartPagination = vue.defineComponent({
             }
         };
         return () => vue.h(CPagination, {
-            class: [`justify-content-${props.align}`],
+            align: props.align,
             'aria-label': 'pagination',
             size: props.size,
         }, {
@@ -7149,15 +7517,29 @@ const CPaginationPlugin = {
     },
 };
 
-const CProgressBar = vue.defineComponent({
-    name: 'CProgressBar',
+const BREAKPOINTS$1 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CPlaceholder = vue.defineComponent({
+    name: 'CPlaceholder',
     props: {
         /**
-         * Use to animate the stripes right to left via CSS3 animations.
+         * Set animation type to better convey the perception of something being actively loaded.
+         *
+         * @values 'glow', 'wave'
          */
-        animated: {
-            type: Boolean,
-            required: false,
+        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.
@@ -7166,7 +7548,124 @@ const CProgressBar = vue.defineComponent({
          */
         color: Color,
         /**
-         * The percent to progress the ProgressBar.
+         * 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: {
+        /**
+         * Use to animate the stripes right to left via CSS3 animations.
+         */
+        animated: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * 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,
+        /**
+         * The percent to progress the ProgressBar.
          */
         value: {
             type: Number,
@@ -7666,90 +8165,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: {
@@ -8324,30 +8739,31 @@ const CSmartTableHead = vue.defineComponent({
                         })),
                     ],
                 }),
-                vue.h(CTableRow, {}, {
-                    default: () => [
-                        props.selectable && vue.h(CTableHeaderCell),
-                        props.columns.map((column) => vue.h(CTableHeaderCell, {
-                            ...tableHeaderCellProps(column),
-                        }, {
-                            default: () => (typeof column !== 'object'
-                                ? true
-                                : typeof column.filter === 'undefined'
+                props.columnFilter &&
+                    vue.h(CTableRow, {}, {
+                        default: () => [
+                            props.selectable && vue.h(CTableHeaderCell),
+                            props.columns.map((column) => vue.h(CTableHeaderCell, {
+                                ...tableHeaderCellProps(column),
+                            }, {
+                                default: () => (typeof column !== 'object'
                                     ? true
-                                    : column.filter) &&
-                                vue.h(CFormInput, {
-                                    size: 'sm',
-                                    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)],
+                                    : typeof column.filter === 'undefined'
+                                        ? true
+                                        : column.filter) &&
+                                    vue.h(CFormInput, {
+                                        size: 'sm',
+                                        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)],
+                                        }),
                                     }),
-                                }),
-                        })),
-                    ],
-                }),
+                            })),
+                        ],
+                    }),
             ],
         });
     },
@@ -8635,7 +9051,6 @@ const CSmartTable = vue.defineComponent({
          */
         cleaner: {
             type: Boolean,
-            default: true,
             required: false,
         },
         /**
@@ -8846,7 +9261,6 @@ const CSmartTable = vue.defineComponent({
          */
         tableFilter: {
             type: [Boolean, Object],
-            default: undefined,
             required: false,
         },
         /**
@@ -8956,16 +9370,19 @@ const CSmartTable = vue.defineComponent({
         const items = vue.ref(props.items.map((item, index) => {
             return { ...item, _id: index };
         }));
-        vue.watch(props.items, () => {
+        vue.watch(() => props.items, () => {
             items.value = props.items.map((item, index) => {
                 return { ...item, _id: index };
             });
-            console.log(props.items);
+            if (items.value &&
+                items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
+                activePage.value = 1;
+            }
         });
         const selectedAll = vue.ref();
         vue.watch(items, () => {
-            console.log(items.value);
             const selected = items.value.filter((item) => item._selected === true);
+            emit('selectedItemsChange', selected);
             if (selected.length === items.value.length) {
                 selectedAll.value = true;
                 return;
@@ -8977,13 +9394,18 @@ const CSmartTable = vue.defineComponent({
             if (selected.length !== 0 && selected.length !== items.value.length) {
                 selectedAll.value = 'indeterminate';
             }
-            emit('selectedItemsChange', selected);
         });
         const itemsPerPage = vue.ref(props.itemsPerPage);
         const activePage = vue.ref(props.activePage);
         const sorterState = vue.reactive(props.sorterValue || {});
         const columnFilterState = vue.ref(props.columnFilterValue ? props.columnFilterValue : {});
         const tableFilterState = vue.ref(props.tableFilterValue ? props.tableFilterValue : '');
+        vue.onMounted(() => {
+            if (items.value &&
+                items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
+                activePage.value = 1;
+            }
+        });
         // functions
         const isSortable = (i) => {
             const isDataColumn = itemsDataColumns.value.includes(rawColumnNames[i]);
@@ -9011,7 +9433,12 @@ const CSmartTable = vue.defineComponent({
                     state.state = 'desc';
                 }
                 else {
-                    state.state = 0;
+                    if (typeof props.columnSorter === 'object' && !props.columnSorter.resetable) {
+                        state.state = 'asc';
+                    }
+                    else {
+                        state.state = 0;
+                    }
                 }
             }
             else {
@@ -9024,7 +9451,6 @@ const CSmartTable = vue.defineComponent({
         };
         const handleActivePageChange = (page) => {
             activePage.value = page;
-            // currentItems.value = updatePage(sortedItems)
             emit('activePageChange', page);
         };
         const handleItemsPerPageChange = (itemsPerPageNumber) => {
@@ -9153,22 +9579,23 @@ const CSmartTable = vue.defineComponent({
                 Object.values(columnFilterState.value).join(''));
         });
         return () => vue.h('div', {}, [
-            vue.h('div', {
-                class: 'row my-2 mx-0',
-            }, {
-                default: () => (props.tableFilter || props.cleaner) && [
-                    vue.h('div', {
-                        class: 'col-auto p-0',
-                    }, props.tableFilter &&
-                        vue.h(CSmartTableFilter, {
-                            onFilterInput: (value) => tableFilterChange(value, 'input'),
-                            onFilterChange: (value) => tableFilterChange(value, 'change'),
-                            value: tableFilterState.value,
-                        })),
-                    vue.h('div', {
-                        class: 'col-auto p-0',
-                    }, props.cleaner &&
-                        vue.h(CSmartTableCleaner, {
+            (props.tableFilter || props.cleaner) &&
+                vue.h('div', {
+                    class: 'row my-2 mx-0',
+                }, [
+                    props.tableFilter &&
+                        vue.h('div', {
+                            class: 'col-auto p-0',
+                        }, props.tableFilter &&
+                            vue.h(CSmartTableFilter, {
+                                onFilterInput: (value) => tableFilterChange(value, 'input'),
+                                onFilterChange: (value) => tableFilterChange(value, 'change'),
+                                value: tableFilterState.value,
+                            })),
+                    props.cleaner &&
+                        vue.h('div', {
+                            class: 'col-auto p-0',
+                        }, vue.h(CSmartTableCleaner, {
                             onClick: () => clean(),
                             isFiltered: isFiltered.value,
                         }, {
@@ -9177,8 +9604,7 @@ const CSmartTable = vue.defineComponent({
                                 ? slots.cleanerIcon()
                                 : vue.h(CIcon, { width: '18', content: cilFilterX }),
                         })),
-                ],
-            }),
+                ]),
             vue.h('div', {
                 class: 'position-relative',
             }, {
@@ -9277,7 +9703,7 @@ const CSmartTable = vue.defineComponent({
                     class: 'row',
                 }, [
                     vue.h('div', {
-                        class: 'col-auto',
+                        class: 'col',
                     }, props.pagination && numberOfPages.value > 1
                         ? vue.h(CSmartPagination, {
                             ...props.paginationProps,
@@ -9552,7 +9978,7 @@ const CToastClose = vue.defineComponent({
             updateVisible(false);
         };
         return () => props.component
-            ? vue.h(vue.resolveComponent(props.component), {
+            ? vue.h(props.component, {
                 onClick: () => {
                     handleClose();
                 },
@@ -10313,6 +10739,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CDropdownDivider: CDropdownDivider,
     CDropdownMenu: CDropdownMenu,
     CDropdownToggle: CDropdownToggle,
+    CElementCoverPlugin: CElementCoverPlugin,
+    CElementCover: CElementCover,
     CFooterPlugin: CFooterPlugin,
     CFooter: CFooter,
     CFormPlugin: CFormPlugin,
@@ -10379,6 +10807,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CPagination: CPagination,
     CPaginationItem: CPaginationItem,
     CSmartPagination: CSmartPagination,
+    CPlaceholderPlugin: CPlaceholderPlugin,
+    CPlaceholder: CPlaceholder,
     CProgressPlugin: CProgressPlugin,
     CProgress: CProgress,
     CProgressBar: CProgressBar,
@@ -10424,49 +10854,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,
@@ -10479,33 +10939,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();
     },
 };
 
@@ -10515,47 +10975,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,
@@ -10568,33 +11024,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();
     },
 };
 
@@ -10621,6 +11077,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);
     },
@@ -10683,6 +11140,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;
@@ -10744,6 +11203,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;
@@ -10790,6 +11251,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