@coreui/vue-pro 4.0.4 → 4.1.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, vShow, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, computed, Teleport, onBeforeUnmount, nextTick } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, nextTick, computed, Teleport, onBeforeUnmount, vShow } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -32,9 +32,45 @@ const CAccordion = 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 = defineComponent({
     name: 'CCollapse',
     props: {
+        /**
+         * Set horizontal collapsing to transition the width instead of height.
+         */
+        horizontal: {
+            type: Boolean,
+            required: false,
+        },
         /**
          * Toggle the visibility of component.
          */
@@ -54,42 +90,58 @@ const CCollapse = defineComponent({
         'show',
     ],
     setup(props, { slots, emit }) {
-        const handleBeforeEnter = (el) => {
-            el.classList.remove('collapse');
-            el.classList.add('collapsing');
+        const collapsing = ref(false);
+        const show = 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 () => h$1(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),
@@ -97,12 +149,10 @@ const CCollapse = defineComponent({
             onAfterLeave: (el) => handleAfterLeave(el),
         }, () => withDirectives(h$1('div', {
             class: [
-                'collapse',
-                {
-                    show: props.visible,
-                },
+                collapsing.value ? 'collapsing' : 'collapse',
+                { 'collapse-horizontal': props.horizontal, show: show.value },
             ],
-        }, slots.default && slots.default()), [[vShow, props.visible]]));
+        }, slots.default && slots.default()), [[vVisible, props.visible]]));
     },
 });
 
@@ -796,6 +846,7 @@ const CButton = 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());
     },
 });
@@ -1610,29 +1661,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,
@@ -1787,13 +1841,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 {
@@ -1925,8 +1979,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
   };
 }
 
@@ -1941,7 +1995,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,
@@ -1973,16 +2028,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;
     }
   }
@@ -2025,7 +2082,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) {
@@ -2283,7 +2341,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`
@@ -2300,7 +2358,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
@@ -2800,6 +2858,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
@@ -2809,13 +2875,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
@@ -2835,36 +2903,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;
@@ -2896,8 +2973,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.
@@ -2909,9 +2986,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
@@ -2928,7 +3005,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) {
@@ -3848,6 +3925,176 @@ const CDropdownPlugin = {
     },
 };
 
+const CSpinner = 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 () => h$1(props.component, {
+            class: [
+                `spinner-${props.variant}`,
+                `text-${props.color}`,
+                props.size && `spinner-${props.variant}-${props.size}`,
+            ],
+            role: 'status',
+        }, h$1('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
+    },
+});
+
+const CSpinnerPlugin = {
+    install: (app) => {
+        app.component(CSpinner.name, CSpinner);
+    },
+};
+
+const CElementCover = 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 = 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;
+        };
+        onMounted(function () {
+            nextTick(function () {
+                containerCoords = getCustomBoundaries();
+            });
+        });
+        return () => h$1('div', {
+            style: {
+                ...containerCoords,
+                position: 'absolute',
+                'background-color': `rgb(255,255,255,${props.opacity})`,
+            },
+            ref: elementRef,
+        }, h$1('div', // TODO: use slot to override this
+        {
+            style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            },
+        }, h$1(CSpinner, {
+            variant: 'grow',
+            color: 'primary',
+        })));
+    },
+});
+
+const CElementCoverPlugin = {
+    install: (app) => {
+        app.component(CElementCover.name, CElementCover);
+    },
+};
+
 const CFooter = defineComponent({
     name: 'CFooter',
     props: {
@@ -4250,11 +4497,11 @@ const CFormInput = 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);
@@ -4271,7 +4518,7 @@ const CFormInput = defineComponent({
                 },
             ],
             disabled: props.disabled,
-            // onChange: (event: InputEvent) => handleChange(event),
+            onChange: (event) => handleChange(event),
             onInput: (event) => handleInput(event),
             readonly: props.readonly,
             type: props.type,
@@ -4454,6 +4701,8 @@ const CFormSelect = defineComponent({
                 'form-select',
                 {
                     [`form-select-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
                 },
             ],
             onChange: (event) => handleChange(event),
@@ -4762,7 +5011,7 @@ const CFormPlugin = {
     },
 };
 
-const BREAKPOINTS$2 = [
+const BREAKPOINTS$4 = [
     'xxl',
     'xl',
     'lg',
@@ -4835,40 +5084,40 @@ const CCol = 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 () => h$1('div', {
-            class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'col'],
+            class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'col'],
         }, slots.default && slots.default());
     },
 });
 
-const BREAKPOINTS$1 = [
+const BREAKPOINTS$3 = [
     'xxl',
     'xl',
     'lg',
@@ -4923,18 +5172,18 @@ const CContainer = 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 () => h$1('div', {
-            class: [repsonsiveCLassNames.length ? repsonsiveCLassNames : 'container'],
+            class: [repsonsiveClassNames.length ? repsonsiveClassNames : 'container'],
         }, slots.default && slots.default());
     },
 });
 
-const BREAKPOINTS = [
+const BREAKPOINTS$2 = [
     'xxl',
     'xl',
     'lg',
@@ -5007,27 +5256,27 @@ const CRow = 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 () => h$1('div', {
-            class: ['row', repsonsiveCLassNames],
+            class: ['row', repsonsiveClassNames],
         }, slots.default && slots.default());
     },
 });
@@ -5321,88 +5570,8 @@ const CListGroupPlugin = {
     },
 };
 
-const CSpinner = 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 () => h$1(props.component, {
-            class: [
-                `spinner-${props.variant}`,
-                `text-${props.color}`,
-                props.size && `spinner-${props.variant}-${props.size}`,
-            ],
-            role: 'status',
-        }, h$1('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
-    },
-});
-
-const CLoadingButton = defineComponent({
-    name: 'CLoadingButton',
+const CLoadingButton = defineComponent({
+    name: 'CLoadingButton',
     props: {
         /**
          * Makes button disabled when loading.
@@ -6885,20 +7054,19 @@ const COffcanvas = defineComponent({
                 onAfterEnter: () => handleAfterEnter(),
                 onLeave: (el, done) => handleLeave(el, done),
                 onAfterLeave: (el) => handleAfterLeave(el),
-            }, () => visible.value &&
-                h$1('div', {
-                    class: [
-                        'offcanvas',
-                        {
-                            [`offcanvas-${props.placement}`]: props.placement,
-                        },
-                    ],
-                    ref: offcanvasRef,
-                    role: 'dialog',
-                }, slots.default && slots.default())),
+            }, () => withDirectives(h$1('div', {
+                class: [
+                    'offcanvas',
+                    {
+                        [`offcanvas-${props.placement}`]: props.placement,
+                    },
+                ],
+                ref: offcanvasRef,
+                role: 'dialog',
+            }, slots.default && slots.default()), [[vVisible, props.visible]])),
             props.backdrop &&
                 h$1(CBackdrop, {
-                    class: 'modal-backdrop',
+                    class: 'offcanvas-backdrop',
                     visible: visible.value,
                 }),
         ];
@@ -7345,6 +7513,137 @@ const CPaginationPlugin = {
     },
 };
 
+const BREAKPOINTS$1 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CPlaceholder = 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 () => h$1(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 = defineComponent({
     name: 'CProgressBar',
     props: {
@@ -7862,90 +8161,6 @@ const CSidebarPlugin = {
     },
 };
 
-const CSpinnerPlugin = {
-    install: (app) => {
-        app.component(CSpinner.name, CSpinner);
-    },
-};
-
-const CElementCover = 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 = 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;
-        };
-        onMounted(function () {
-            nextTick(function () {
-                containerCoords = getCustomBoundaries();
-            });
-        });
-        return () => h$1('div', {
-            style: {
-                ...containerCoords,
-                position: 'absolute',
-                'background-color': `rgb(255,255,255,${props.opacity})`,
-            },
-            ref: elementRef,
-        }, h$1('div', // TODO: use slot to override this
-        {
-            style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-            },
-        }, h$1(CSpinner, {
-            variant: 'grow',
-            color: 'primary',
-        })));
-    },
-});
-
 const CTable = defineComponent({
     name: 'CTable',
     props: {
@@ -10520,6 +10735,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CDropdownDivider: CDropdownDivider,
     CDropdownMenu: CDropdownMenu,
     CDropdownToggle: CDropdownToggle,
+    CElementCoverPlugin: CElementCoverPlugin,
+    CElementCover: CElementCover,
     CFooterPlugin: CFooterPlugin,
     CFooter: CFooter,
     CFormPlugin: CFormPlugin,
@@ -10586,6 +10803,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CPagination: CPagination,
     CPaginationItem: CPaginationItem,
     CSmartPagination: CSmartPagination,
+    CPlaceholderPlugin: CPlaceholderPlugin,
+    CPlaceholder: CPlaceholder,
     CProgressPlugin: CProgressPlugin,
     CProgress: CProgress,
     CProgressBar: CProgressBar,
@@ -10631,49 +10850,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,
@@ -10686,33 +10935,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();
     },
 };
 
@@ -10722,47 +10971,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,
@@ -10775,33 +11020,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();
     },
 };
 
@@ -10828,10 +11073,11 @@ 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);
     },
 };
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, vcpopover, vctooltip };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, vcplaceholder, vcpopover, vctooltip };
 //# sourceMappingURL=index.es.js.map