@coreui/vue-pro 5.0.0-alpha.0 → 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.0",
+  "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.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.2",
-    "@types/jest": "^29.5.2",
-    "@vue/test-utils": "^2.4.0",
-    "@vue/vue3-jest": "29.2.4",
-    "date-fns": "^2.29.3",
-    "jest": "^29.6.0",
-    "jest-environment-jsdom": "^29.6.0",
-    "rollup": "^3.26.2",
+    "@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",
+    "cross-env": "^7.0.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.2.0",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6",
-    "vue": "^3.3.4",
-    "vue-types": "^5.1.0"
+    "typescript": "^5.2.2",
+    "vue": "^3.3.7",
+    "vue-types": "^5.1.1"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^5.0.0-alpha.0",
+    "@coreui/coreui-pro": "^5.0.0-beta.1",
+    "@popperjs/core": "^2.11.8",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/breadcrumb/CBreadcrumb.ts

@@ -2,6 +2,7 @@ import { defineComponent, h } from 'vue'
 
 const CBreadcrumb = defineComponent({
   name: 'CBreadcrumb',
+  inheritAttrs: false,
   setup(_, { slots, attrs }) {
     return () =>
       h(

package/src/components/button/CButton.ts

@@ -79,6 +79,7 @@ export const CButton = defineComponent({
     'click',
   ],
   setup(props, { emit, slots }) {
+    const component = props.href ? 'a' : props.component
     const handleClick = (event: Event) => {
       if (props.disabled) {
         return
@@ -88,7 +89,7 @@ export const CButton = defineComponent({
     }
     return () =>
       h(
-        props.component,
+        component,
         {
           class: [
             'btn',
@@ -100,10 +101,9 @@ export const CButton = defineComponent({
             },
             props.shape,
           ],
-          disabled: props.disabled && props.component !== 'a',
-          ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
-          ...(props.component === 'a' && props.href && { href: props.href }),
-          ...(props.component === 'button' && { type: props.type }),
+          ...(component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+          ...(component === 'a' && props.href && { href: props.href }),
+          ...(component === 'button' && { type: props.type, disabled: props.disabled }),
           onClick: handleClick,
         },
         slots.default && slots.default(),