@coreui/vue-pro 5.0.0-alpha.1 → 5.0.0-beta.0

package/dist/esm/props.js

@@ -0,0 +1,71 @@
+const Shape = {
+    type: String,
+    validator: (value) => {
+        // The value must match one of these strings
+        return [
+            'rounded',
+            'rounded-top',
+            'rounded-end',
+            'rounded-bottom',
+            'rounded-start',
+            'rounded-circle',
+            'rounded-pill',
+            'rounded-0',
+            'rounded-1',
+            'rounded-2',
+            'rounded-3',
+        ].includes(value);
+    },
+};
+const Color = {
+    type: String,
+    validator: (value) => {
+        // The value must match one of these strings
+        return [
+            'primary',
+            'secondary',
+            'success',
+            'danger',
+            'warning',
+            'info',
+            'dark',
+            'light',
+            'link',
+            'transparent',
+            'primary-gradient',
+            'secondary-gradient',
+            'success-gradient',
+            'danger-gradient',
+            'warning-gradient',
+            'info-gradient',
+            'dark-gradient',
+            'light-gradient',
+        ].includes(value);
+    },
+};
+const TextColor = {
+    type: String,
+    validator: (value) => {
+        return [
+            'primary',
+            'secondary',
+            'success',
+            'danger',
+            'warning',
+            'info',
+            'dark',
+            'light',
+            'white',
+            'muted',
+            'high-emphasis',
+            'medium-emphasis',
+            'disabled',
+            'high-emphasis-inverse',
+            'medium-emphasis-inverse',
+            'disabled-inverse',
+        ].includes(value);
+    },
+};
+
+export { Color, Shape, TextColor };
+//# sourceMappingURL=props.js.map

package/dist/esm/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sources":["../../src/props.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAa,MAAA,KAAK,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,SAAS,EAAE,CAAC,KAAa,KAAa;;QAEpC,OAAO;YACL,SAAS;YACT,aAAa;YACb,aAAa;YACb,gBAAgB;YAChB,eAAe;YACf,gBAAgB;YAChB,cAAc;YACd,WAAW;YACX,WAAW;YACX,WAAW;YACX,WAAW;AACZ,SAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClB;EACF;AAUY,MAAA,KAAK,GAAG;AACnB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,SAAS,EAAE,CAAC,KAAa,KAAa;;QAEpC,OAAO;YACL,SAAS;YACT,WAAW;YACX,SAAS;YACT,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;YACN,OAAO;YACP,MAAM;YACN,aAAa;YACb,kBAAkB;YAClB,oBAAoB;YACpB,kBAAkB;YAClB,iBAAiB;YACjB,kBAAkB;YAClB,eAAe;YACf,eAAe;YACf,gBAAgB;AACjB,SAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClB;EACF;AAEY,MAAA,SAAS,GAAG;AACvB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,SAAS,EAAE,CAAC,KAAa,KAAa;QACpC,OAAO;YACL,SAAS;YACT,WAAW;YACX,SAAS;YACT,QAAQ;YACR,SAAS;YACT,MAAM;YACN,MAAM;YACN,OAAO;YACP,OAAO;YACP,OAAO;YACP,eAAe;YACf,iBAAiB;YACjB,UAAU;YACV,uBAAuB;YACvB,yBAAyB;YACzB,kBAAkB;AACnB,SAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;KAClB;;;;;"}

package/dist/esm/types.d.ts

@@ -0,0 +1,5 @@
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string;
+export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | string;
+export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
+export type Triggers = 'hover' | 'focus' | 'click';

package/dist/esm/utils/getRTLPlacement.d.ts

@@ -0,0 +1,3 @@
+import { Placement } from '@popperjs/core';
+declare const getRTLPlacement: (placement: string, element: HTMLDivElement | null) => Placement;
+export default getRTLPlacement;

package/dist/esm/utils/getRTLPlacement.js

@@ -0,0 +1,18 @@
+import isRTL from './isRTL.js';
+
+const getRTLPlacement = (placement, element) => {
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
+
+export { getRTLPlacement as default };
+//# sourceMappingURL=getRTLPlacement.js.map

package/dist/esm/utils/getRTLPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRTLPlacement.js","sources":["../../../src/utils/getRTLPlacement.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,eAAe,GAAG,CAAC,SAAiB,EAAE,OAA8B,KAAe;AACvF,IAAA,QAAQ,SAAS;QACf,KAAK,OAAO,EAAE;AACZ,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA;AACzC,SAAA;QACD,KAAK,MAAM,EAAE;AACX,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,MAAM,CAAA;AACzC,SAAA;AACD,QAAA,SAAS;AACP,YAAA,OAAO,SAAsB,CAAA;AAC9B,SAAA;AACF,KAAA;AACH;;;;"}

package/dist/esm/utils/getUID.d.ts

@@ -0,0 +1,2 @@
+declare const getUID: (prefix: string) => string;
+export default getUID;

package/dist/esm/utils/getUID.js

@@ -0,0 +1,9 @@
+const getUID = (prefix) => {
+    do {
+        prefix += Math.floor(Math.random() * 1_000_000);
+    } while (document.getElementById(prefix));
+    return prefix;
+};
+
+export { getUID as default };
+//# sourceMappingURL=getUID.js.map

package/dist/esm/utils/getUID.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getUID.js","sources":["../../../src/utils/getUID.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,MAAM,GAAG,CAAC,MAAc,KAAI;IAChC,GAAG;AACD,QAAA,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,CAAA;AAChD,KAAA,QAAQ,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,EAAC;AAEzC,IAAA,OAAO,MAAM,CAAA;AACf;;;;"}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,6 @@
+import getRTLPlacement from './getRTLPlacement';
+import getUID from './getUID';
+import isInViewport from './isInViewport';
+import isObjectInArray from './isObjectInArray';
+import isRTL from './isRTL';
+export { getRTLPlacement, getUID, isInViewport, isObjectInArray, isRTL };

package/dist/esm/utils/isInViewport.d.ts

@@ -0,0 +1,2 @@
+declare const isInViewport: (element: HTMLElement) => boolean;
+export default isInViewport;

package/dist/esm/utils/isInViewport.js

@@ -0,0 +1,10 @@
+const isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (Math.floor(rect.top) >= 0 &&
+        Math.floor(rect.left) >= 0 &&
+        Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
+};
+
+export { isInViewport as default };
+//# sourceMappingURL=isInViewport.js.map

package/dist/esm/utils/isInViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isInViewport.js","sources":["../../../src/utils/isInViewport.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,OAAoB,KAAI;AAC5C,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAA;IAC5C,QACE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC;QACxF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC,EACtF;AACH;;;;"}

package/dist/esm/utils/isObjectInArray.d.ts

@@ -0,0 +1,2 @@
+declare const isObjectInArray: <T>(array: T[], item: T, ignore?: string[]) => boolean;
+export default isObjectInArray;

package/dist/esm/utils/isObjectInArray.js

@@ -0,0 +1,13 @@
+const isObjectInArray = (array, item, ignore = []) => array.some((_item) => {
+    let result = true;
+    for (const key in _item) {
+        if (!ignore.includes(key) && item[key] !== _item[key]) {
+            result = false;
+            break;
+        }
+    }
+    return result;
+});
+
+export { isObjectInArray as default };
+//# sourceMappingURL=isObjectInArray.js.map

package/dist/esm/utils/isObjectInArray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isObjectInArray.js","sources":["../../../src/utils/isObjectInArray.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,eAAe,GAAG,CAAI,KAAU,EAAE,IAAO,EAAE,MAAmB,GAAA,EAAE,KACpE,KAAK,CAAC,IAAI,CAAC,CAAC,KAAQ,KAAI;IACtB,IAAI,MAAM,GAAG,IAAI,CAAA;AACjB,IAAA,KAAK,MAAM,GAAG,IAAI,KAAK,EAAE;AACvB,QAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,EAAE;YACrD,MAAM,GAAG,KAAK,CAAA;YACd,MAAK;AACN,SAAA;AACF,KAAA;AAED,IAAA,OAAO,MAAM,CAAA;AACf,CAAC;;;;"}

package/dist/esm/utils/isRTL.d.ts

@@ -0,0 +1,2 @@
+declare const isRTL: (element?: HTMLElement | HTMLDivElement | null) => boolean;
+export default isRTL;

package/dist/esm/utils/isRTL.js

@@ -0,0 +1,12 @@
+const isRTL = (element) => {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
+export { isRTL as default };
+//# sourceMappingURL=isRTL.js.map

package/dist/esm/utils/isRTL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isRTL.js","sources":["../../../src/utils/isRTL.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,CAAC,OAA6C,KAAI;AAC9D,IAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,GAAG,KAAK,KAAK,EAAE;AAC7E,QAAA,OAAO,IAAI,CAAA;AACZ,KAAA;AAED,IAAA,IAAI,OAAO,EAAE;QACX,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;AAC/C,KAAA;AAED,IAAA,OAAO,KAAK,CAAA;AACd;;;;"}

package/dist/esm/utils/transition.d.ts

@@ -0,0 +1,3 @@
+export declare const executeAfterTransition: (callback: () => void, transitionElement: HTMLElement, waitForTransition?: boolean) => void;
+export declare const getTransitionDurationFromElement: (element: HTMLElement) => number;
+export declare const triggerTransitionEnd: (element: HTMLElement) => void;

package/dist/esm/utils/transition.js

@@ -0,0 +1,51 @@
+const execute = (callback) => {
+    if (typeof callback === 'function') {
+        callback();
+    }
+};
+const executeAfterTransition = (callback, transitionElement, waitForTransition = true) => {
+    if (!waitForTransition) {
+        execute(callback);
+        return;
+    }
+    const durationPadding = 5;
+    const emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
+    let called = false;
+    const handler = ({ target }) => {
+        if (target !== transitionElement) {
+            return;
+        }
+        called = true;
+        transitionElement.removeEventListener('transitionend', handler);
+        execute(callback);
+    };
+    transitionElement.addEventListener('transitionend', handler);
+    setTimeout(() => {
+        if (!called) {
+            triggerTransitionEnd(transitionElement);
+        }
+    }, emulatedDuration);
+};
+const getTransitionDurationFromElement = (element) => {
+    if (!element) {
+        return 0;
+    }
+    // Get transition-duration of the element
+    let { transitionDuration, transitionDelay } = window.getComputedStyle(element);
+    const floatTransitionDuration = Number.parseFloat(transitionDuration);
+    const floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
+const triggerTransitionEnd = (element) => {
+    element.dispatchEvent(new Event('transitionend'));
+};
+
+export { executeAfterTransition, getTransitionDurationFromElement, triggerTransitionEnd };
+//# sourceMappingURL=transition.js.map

package/dist/esm/utils/transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.js","sources":["../../../src/utils/transition.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG,CAAC,QAAoB,KAAI;AACvC,IAAA,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;AAClC,QAAA,QAAQ,EAAE,CAAA;AACX,KAAA;AACH,CAAC,CAAA;AAEM,MAAM,sBAAsB,GAAG,CACpC,QAAoB,EACpB,iBAA8B,EAC9B,iBAAiB,GAAG,IAAI,KACtB;IACF,IAAI,CAAC,iBAAiB,EAAE;QACtB,OAAO,CAAC,QAAQ,CAAC,CAAA;QACjB,OAAM;AACP,KAAA;IAED,MAAM,eAAe,GAAG,CAAC,CAAA;IACzB,MAAM,gBAAgB,GAAG,gCAAgC,CAAC,iBAAiB,CAAC,GAAG,eAAe,CAAA;IAE9F,IAAI,MAAM,GAAG,KAAK,CAAA;AAElB,IAAA,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,EAAmB,KAAI;QAC9C,IAAI,MAAM,KAAK,iBAAiB,EAAE;YAChC,OAAM;AACP,SAAA;QAED,MAAM,GAAG,IAAI,CAAA;AACb,QAAA,iBAAiB,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;QAC/D,OAAO,CAAC,QAAQ,CAAC,CAAA;AACnB,KAAC,CAAA;AAED,IAAA,iBAAiB,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;IAC5D,UAAU,CAAC,MAAK;QACd,IAAI,CAAC,MAAM,EAAE;YACX,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AACxC,SAAA;KACF,EAAE,gBAAgB,CAAC,CAAA;AACtB,EAAC;AAEY,MAAA,gCAAgC,GAAG,CAAC,OAAoB,KAAI;IACvE,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,OAAO,CAAC,CAAA;AACT,KAAA;;AAGD,IAAA,IAAI,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;IAE9E,MAAM,uBAAuB,GAAG,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAA;IACrE,MAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;;AAG/D,IAAA,IAAI,CAAC,uBAAuB,IAAI,CAAC,oBAAoB,EAAE;AACrD,QAAA,OAAO,CAAC,CAAA;AACT,KAAA;;IAGD,kBAAkB,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;IACrD,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C,IAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,IAAI,CAAA;AAC5F,EAAC;AAEY,MAAA,oBAAoB,GAAG,CAAC,OAAoB,KAAI;IAC3D,OAAO,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,CAAA;AACnD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-beta.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -23,39 +23,44 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "jsnext:main": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
   "files": [
     "dist/",
     "src/"
   ],
   "scripts": {
-    "build": "rollup -c --bundleConfigAsCjs",
+    "build": "npm-run-all clean build-*",
+    "build-cjs": "rollup --environment ESM:false --config",
+    "build-esm": "rollup --environment ESM:true --config",
+    "clean": "cross-env-shell \"rm -rf dist\"",
     "test": "jest --coverage",
     "test:clear": "jest --clearCache",
     "test:update": "jest --coverage --updateSnapshot"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
-    "@types/jest": "^29.5.5",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/jest": "^29.5.7",
     "@vue/test-utils": "^2.4.1",
     "@vue/vue3-jest": "29.2.6",
-    "date-fns": "^2.30.0",
+    "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^3.29.4",
+    "rollup": "^4.2.0",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.2.2",
-    "vue": "^3.3.4",
+    "vue": "^3.3.7",
     "vue-types": "^5.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^5.0.0-alpha.2",
+    "@coreui/coreui-pro": "^5.0.0-beta.1",
+    "@popperjs/core": "^2.11.8",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/calendar/CCalendar.ts

@@ -124,7 +124,7 @@ const CCalendar = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -143,7 +143,7 @@ const CCalendar = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     weekNumbersLabel: String,
   },
@@ -284,18 +284,14 @@ const CCalendar = defineComponent({
     watch(
       () => props.maxDate,
       () => {
-        if (props.maxDate) {
-          maxDate.value = convertToDateObject(props.maxDate, props.selectionType)
-        }
+        maxDate.value = props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null
       },
     )
 
     watch(
       () => props.minDate,
       () => {
-        if (props.minDate) {
-          minDate.value = convertToDateObject(props.minDate, props.selectionType)
-        }
+        minDate.value = props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null
       },
     )
 
@@ -436,12 +432,6 @@ const CCalendar = defineComponent({
               ),
             )
           : []
-        // const list: HTMLElement[] = [].concat(
-        //   ...Element.prototype.querySelectorAll.call(
-        //     calendarRef.value,
-        //     props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
-        //   ),
-        // )
 
         const index = list.indexOf(element)
         const first = index === 0

package/src/components/calendar/utils.ts

@@ -8,14 +8,9 @@ export const convertIsoWeekToDate = (isoWeek: string) => {
 }
 
 export const convertToDateObject = (
-  date: Date | string | null,
+  date: Date | string,
   selectionType?: 'day' | 'week' | 'month' | 'year',
 ) => {
-  // TODO: clean-up ?
-  // if (date === null) {
-  //   return null
-  // }
-
   if (date instanceof Date) {
     return date
   }

package/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h, PropType, ref, Teleport, watch } from 'vue'
+
+const getContainer = (
+  container?: HTMLElement | (() => HTMLElement) | string,
+): HTMLElement | string => {
+  if (container) {
+    return typeof container === 'function' ? container() : container
+  }
+
+  return 'body'
+}
+
+const CConditionalTeleport = defineComponent({
+  name: 'CConditionalTeleport',
+  props: {
+    /**
+     * An HTML element or function that returns a single element, with `document.body` as the default.
+     *
+     * @since v5.0.0-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
+    /**
+     * Render some children into a different part of the DOM
+     */
+    teleport: {
+      type: [Boolean],
+      default: true,
+    },
+  },
+  setup(props, { slots }) {
+    const container = ref<HTMLElement | string>(getContainer(props.container))
+
+    watch(
+      () => [props.container, props.teleport],
+      () => {
+        if (props.teleport) {
+          container.value = getContainer(props.container)
+        }
+      },
+    )
+
+    return () =>
+      h(
+        Teleport,
+        {
+          disabled: props.teleport === false,
+          to: container.value,
+        },
+        {
+          default: () => slots.default && slots.default(),
+        },
+      )
+  },
+})
+export { CConditionalTeleport }

package/src/components/conditional-teleport/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CConditionalTeleport } from './CConditionalTeleport'
+
+const CConditionalTeleportPlugin = {
+  install: (app: App): void => {
+    app.component(CConditionalTeleport.name, CConditionalTeleport)
+  },
+}
+
+export { CConditionalTeleport, CConditionalTeleportPlugin }

package/src/components/date-picker/CDatePicker.ts

@@ -249,7 +249,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -268,7 +268,7 @@ const CDatePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     weekNumbersLabel: String,
   },

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -211,10 +211,6 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
-    /**
-     * Toggle the readonly state for the component.
-     */
-    inputReadOnly: Boolean,
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
@@ -236,6 +232,10 @@ const CDateRangePicker = defineComponent({
       type: Number,
       default: 750,
     },
+    /**
+     * Toggle the readonly state for the component.
+     */
+    inputReadOnly: Boolean,
     /**
      * Set component validation state to invalid.
      *
@@ -316,7 +316,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -335,7 +335,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-alpha.1
+     * @since 5.0.0-beta.0
      */
     weekNumbersLabel: String,
   },
@@ -531,38 +531,30 @@ const CDateRangePicker = defineComponent({
     watch(
       () => props.startDate,
       () => {
-        if (props.startDate) {
-          calendarDate.value = props.startDate
-          startDate.value = props.startDate
-        }
+        calendarDate.value = props.startDate ? props.startDate : null
+        startDate.value = props.startDate ? props.startDate : null
       },
     )
 
     watch(
       () => props.endDate,
       () => {
-        if (props.endDate) {
-          calendarDate.value = props.endDate
-          endDate.value = props.endDate
-        }
+        calendarDate.value = props.endDate ? props.endDate : null
+        endDate.value = props.endDate ? props.endDate : null
       },
     )
 
     watch(
       () => props.maxDate,
       () => {
-        if (props.maxDate) {
-          maxDate.value = props.maxDate
-        }
+        maxDate.value = props.maxDate ? props.maxDate : null
       },
     )
 
     watch(
       () => props.minDate,
       () => {
-        if (props.minDate) {
-          minDate.value = props.minDate
-        }
+        minDate.value = props.minDate ? props.minDate : null
       },
     )
 

package/src/components/dropdown/CDropdown.ts

@@ -59,6 +59,17 @@ const CDropdown = defineComponent({
         return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
       },
     },
+    /**
+     * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v5.0.0-beta.0
+     */
+    container: {
+      type: [HTMLElement, () => HTMLElement, String] as PropType<
+        HTMLElement | (() => HTMLElement) | string
+      >,
+      default: 'body',
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -103,6 +114,15 @@ const CDropdown = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Generates dropdown menu using Teleport.
+     *
+     * @since v5.0.0-beta.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      */
@@ -191,8 +211,10 @@ const CDropdown = defineComponent({
 
     provide('config', {
       alignment: props.alignment,
+      container: props.container,
       dark: props.dark,
       popper: props.popper,
+      teleport: props.teleport,
     })
 
     provide('variant', props.variant)