@coreui/vue-pro 5.4.0 → 5.5.0

package/dist/esm/node_modules/@coreui/icons-vue/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../../../@coreui/icons-vue/dist/index.es.js"],"sourcesContent":["import { defineComponent, inject, computed, h, cloneVNode } from 'vue';\n\nconst CIcon = defineComponent({\n    name: 'CIcon',\n    props: {\n        /**\n         * Use `:icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        content: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: {\n            type: [String, Array, Object],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Name of the icon placed in React object or SVG content.\n         */\n        icon: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use `icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        name: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            default: undefined,\n            required: false,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * If defined component will be rendered using 'use' tag.\n         */\n        use: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n    },\n    setup(props, { attrs }) {\n        const icons = inject('icons');\n        const _icon = props.icon || props.content || props.name;\n        const toCamelCase = (str) => {\n            return str\n                .replace(/([-_][a-z0-9])/gi, ($1) => {\n                return $1.toUpperCase();\n            })\n                .replace(/-/gi, '');\n        };\n        const iconName = computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');\n        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';\n        const code = computed(() => Array.isArray(_icon)\n            ? _icon\n            : typeof _icon === 'string' && iconName.value && icons[iconName.value]\n                ? icons[iconName.value]\n                : 'undefined');\n        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;\n        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';\n        const viewBox = attrs.viewBox || `0 0 ${scale}`;\n        const size = () => {\n            const addCustom = !props.size && (attrs.width || attrs.height);\n            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;\n        };\n        const classNames = (() => {\n            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];\n        })();\n        return () => props.use\n            ? h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                role: 'img',\n            }, h('use', { href: props.use }))\n            : h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                viewBox: viewBox,\n                innerHTML: `${titleCode}${iconCode}`,\n                role: 'img',\n            });\n    },\n});\n\nconst CIconSvg = defineComponent({\n    name: 'CIconSvg',\n    props: {\n        /**\n         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: [String, Array, Object],\n        /**\n         * The height attribute defines the vertical length of an icon.\n         */\n        height: Number,\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: String,\n        /**\n         * The width attribute defines the horizontal length of an icon.\n         */\n        width: Number,\n    },\n    setup(props, { attrs, slots }) {\n        return () => slots.default &&\n            slots.default().map((slot) => cloneVNode(slot, {\n                'aria-hidden': true,\n                class: [\n                    props.customClassName || [\n                        'icon',\n                        {\n                            [`icon-${props.size}`]: props.size,\n                            [`icon-custom-size`]: props.height || props.width,\n                        },\n                        attrs.class,\n                    ],\n                ],\n                height: props.height,\n                focusable: 'false',\n                role: 'img',\n                width: props.width,\n                ...attrs,\n            }));\n    },\n});\n\nexport { CIcon, CIconSvg, CIcon as default };\n//# sourceMappingURL=index.es.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es.js","sources":["../../../../../../../@coreui/icons-vue/dist/index.es.js"],"sourcesContent":["import { defineComponent, inject, ref, watch, computed, h, cloneVNode } from 'vue';\n\nconst CIcon = defineComponent({\n    name: 'CIcon',\n    props: {\n        /**\n         * Use `:icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        content: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: {\n            type: [String, Array, Object],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Name of the icon placed in React object or SVG content.\n         */\n        icon: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use `icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        name: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            default: undefined,\n            required: false,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * If defined component will be rendered using 'use' tag.\n         */\n        use: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n    },\n    setup(props, { attrs }) {\n        const icons = inject('icons');\n        const _icon = ref(props.icon || props.content || props.name);\n        watch(() => props.icon, () => {\n            _icon.value = props.icon;\n        });\n        const toCamelCase = (str) => {\n            return str\n                .replace(/([-_][a-z0-9])/gi, ($1) => {\n                return $1.toUpperCase();\n            })\n                .replace(/-/gi, '');\n        };\n        const iconName = computed(() => _icon.value && typeof _icon.value === 'string'\n            ? _icon.value.includes('-')\n                ? toCamelCase(_icon.value)\n                : _icon.value\n            : '');\n        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';\n        const code = computed(() => Array.isArray(_icon.value)\n            ? _icon.value\n            : typeof _icon.value === 'string' && iconName.value && icons[iconName.value]\n                ? icons[iconName.value]\n                : 'undefined');\n        const iconCode = computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);\n        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';\n        const viewBox = attrs.viewBox || `0 0 ${scale}`;\n        const size = () => {\n            const addCustom = !props.size && (attrs.width || attrs.height);\n            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;\n        };\n        const classNames = (() => {\n            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];\n        })();\n        return () => props.use\n            ? h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                role: 'img',\n            }, h('use', { href: props.use }))\n            : h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                viewBox: viewBox,\n                innerHTML: `${titleCode}${iconCode.value}`,\n                role: 'img',\n            });\n    },\n});\n\nconst CIconSvg = defineComponent({\n    name: 'CIconSvg',\n    props: {\n        /**\n         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: [String, Array, Object],\n        /**\n         * The height attribute defines the vertical length of an icon.\n         */\n        height: Number,\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: String,\n        /**\n         * The width attribute defines the horizontal length of an icon.\n         */\n        width: Number,\n    },\n    setup(props, { attrs, slots }) {\n        return () => slots.default &&\n            slots.default().map((slot) => cloneVNode(slot, {\n                'aria-hidden': true,\n                class: [\n                    props.customClassName || [\n                        'icon',\n                        {\n                            [`icon-${props.size}`]: props.size,\n                            [`icon-custom-size`]: props.height || props.width,\n                        },\n                        attrs.class,\n                    ],\n                ],\n                height: props.height,\n                focusable: 'false',\n                role: 'img',\n                width: props.width,\n                ...attrs,\n            }));\n    },\n});\n\nexport { CIcon, CIconSvg, CIcon as default };\n//# sourceMappingURL=index.es.js.map\n"],"names":[],"mappings":";;AAEK,MAAC,KAAK,GAAG,eAAe,CAAC;AAC9B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,KAAK,EAAE;AACX;AACA;AACA;AACA;AACA;AACA,QAAQ,OAAO,EAAE;AACjB,YAAY,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACjC,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT;AACA;AACA;AACA,QAAQ,eAAe,EAAE;AACzB,YAAY,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AACzC,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT;AACA;AACA;AACA,QAAQ,IAAI,EAAE;AACd,YAAY,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;AACjC,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,QAAQ,IAAI,EAAE;AACd,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT;AACA;AACA;AACA,QAAQ,IAAI,EAAE;AACd,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,YAAY,SAAS,EAAE,CAAC,KAAK,KAAK;AAClC,gBAAgB,OAAO;AACvB,oBAAoB,QAAQ;AAC5B,oBAAoB,aAAa;AACjC,oBAAoB,IAAI;AACxB,oBAAoB,IAAI;AACxB,oBAAoB,IAAI;AACxB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClC,aAAa;AACb,SAAS;AACT;AACA;AACA;AACA,QAAQ,KAAK,EAAE;AACf,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT;AACA;AACA;AACA,QAAQ,GAAG,EAAE;AACb,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,OAAO,EAAE,SAAS;AAC9B,YAAY,QAAQ,EAAE,KAAK;AAC3B,SAAS;AACT,KAAK;AACL,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;AAC5B,QAAQ,MAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;AACtC,QAAQ,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;AACrE,QAAQ,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,EAAE,MAAM;AACtC,YAAY,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC;AACrC,SAAS,CAAC,CAAC;AACX,QAAQ,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK;AACrC,YAAY,OAAO,GAAG;AACtB,iBAAiB,OAAO,CAAC,kBAAkB,EAAE,CAAC,EAAE,KAAK;AACrD,gBAAgB,OAAO,EAAE,CAAC,WAAW,EAAE,CAAC;AACxC,aAAa,CAAC;AACd,iBAAiB,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;AACpC,SAAS,CAAC;AACV,QAAQ,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;AACtF,cAAc,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;AACvC,kBAAkB,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;AAC1C,kBAAkB,KAAK,CAAC,KAAK;AAC7B,cAAc,EAAE,CAAC,CAAC;AAClB,QAAQ,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,WAAW,CAAC;AACtF,QAAQ,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9D,cAAc,KAAK,CAAC,KAAK;AACzB,cAAc,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AACxF,kBAAkB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AACvC,kBAAkB,WAAW,CAAC,CAAC;AAC/B,QAAQ,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;AACjH,QAAQ,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC;AACnG,QAAQ,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AACxD,QAAQ,MAAM,IAAI,GAAG,MAAM;AAC3B,YAAY,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC;AAC3E,YAAY,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,SAAS,GAAG,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC;AACrF,SAAS,CAAC;AACV,QAAQ,MAAM,UAAU,GAAG,CAAC,MAAM;AAClC,YAAY,OAAO,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACpG,SAAS,GAAG,CAAC;AACb,QAAQ,OAAO,MAAM,KAAK,CAAC,GAAG;AAC9B,cAAc,CAAC,CAAC,KAAK,EAAE;AACvB,gBAAgB,GAAG,KAAK;AACxB,gBAAgB,KAAK,EAAE,4BAA4B;AACnD,gBAAgB,KAAK,EAAE,UAAU;AACjC,gBAAgB,IAAI,EAAE,KAAK;AAC3B,aAAa,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;AAC7C,cAAc,CAAC,CAAC,KAAK,EAAE;AACvB,gBAAgB,GAAG,KAAK;AACxB,gBAAgB,KAAK,EAAE,4BAA4B;AACnD,gBAAgB,KAAK,EAAE,UAAU;AACjC,gBAAgB,OAAO,EAAE,OAAO;AAChC,gBAAgB,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,gBAAgB,IAAI,EAAE,KAAK;AAC3B,aAAa,CAAC,CAAC;AACf,KAAK;AACL,CAAC,EAAE;AACH;AACiB,eAAe,CAAC;AACjC,IAAI,IAAI,EAAE,UAAU;AACpB,IAAI,KAAK,EAAE;AACX;AACA;AACA;AACA,QAAQ,eAAe,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC;AAChD;AACA;AACA;AACA,QAAQ,MAAM,EAAE,MAAM;AACtB;AACA;AACA;AACA,QAAQ,IAAI,EAAE;AACd,YAAY,IAAI,EAAE,MAAM;AACxB,YAAY,SAAS,EAAE,CAAC,KAAK,KAAK;AAClC,gBAAgB,OAAO;AACvB,oBAAoB,QAAQ;AAC5B,oBAAoB,aAAa;AACjC,oBAAoB,IAAI;AACxB,oBAAoB,IAAI;AACxB,oBAAoB,IAAI;AACxB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,oBAAoB,KAAK;AACzB,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClC,aAAa;AACb,SAAS;AACT;AACA;AACA;AACA,QAAQ,KAAK,EAAE,MAAM;AACrB;AACA;AACA;AACA,QAAQ,KAAK,EAAE,MAAM;AACrB,KAAK;AACL,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE;AACnC,QAAQ,OAAO,MAAM,KAAK,CAAC,OAAO;AAClC,YAAY,KAAK,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,UAAU,CAAC,IAAI,EAAE;AAC3D,gBAAgB,aAAa,EAAE,IAAI;AACnC,gBAAgB,KAAK,EAAE;AACvB,oBAAoB,KAAK,CAAC,eAAe,IAAI;AAC7C,wBAAwB,MAAM;AAC9B,wBAAwB;AACxB,4BAA4B,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,IAAI;AAC9D,4BAA4B,CAAC,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK;AAC7E,yBAAyB;AACzB,wBAAwB,KAAK,CAAC,KAAK;AACnC,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,MAAM,EAAE,KAAK,CAAC,MAAM;AACpC,gBAAgB,SAAS,EAAE,OAAO;AAClC,gBAAgB,IAAI,EAAE,KAAK;AAC3B,gBAAgB,KAAK,EAAE,KAAK,CAAC,KAAK;AAClC,gBAAgB,GAAG,KAAK;AACxB,aAAa,CAAC,CAAC,CAAC;AAChB,KAAK;AACL,CAAC;;;;","x_google_ignoreList":[0]}

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

@@ -0,0 +1,2 @@
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue';
+export type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -48,20 +48,20 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.21.2",
+    "rollup": "^4.22.4",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.5.4",
-    "vue": "^3.4.38",
+    "typescript": "^5.6.2",
+    "vue": "^3.5.8",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
-    "vue": "^3.2.21"
+    "vue": "^3.5.0"
   }
 }

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

@@ -824,7 +824,9 @@ const CDateRangePicker = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
@@ -1037,7 +1039,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleStartDateChange(date),
-                                  time: startDate.value && new Date(startDate.value),
+                                  ...(startDate.value && {time: new Date(startDate.value)}),
                                   variant: 'select',
                                 }),
                                 h(CTimePicker, {
@@ -1046,7 +1048,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleEndDateChange(date),
-                                  time: endDate.value && new Date(endDate.value),
+                                  ...(endDate.value && {time: new Date(endDate.value)}),
                                   variant: 'select',
                                 }),
                               ]
@@ -1066,6 +1068,7 @@ const CDateRangePicker = defineComponent({
                                     index === 0
                                       ? handleStartDateChange(date)
                                       : handleEndDateChange(date),
+                                  // @ts-expect-error
                                   time:
                                     index === 0
                                       ? startDate.value && new Date(startDate.value)

package/src/components/form/CFormControlWrapper.ts

@@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
+import type { ComponentProps } from '../../utils/ComponentProps'
+
+interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
+  floatingLabel?: string
+  id?: string
+  label?: string
+  text?: string
+}
+
 const CFormControlWrapper = defineComponent({
   name: 'CFormControlWrapper',
   inheritAttrs: false,
@@ -18,7 +27,9 @@ const CFormControlWrapper = defineComponent({
     /**
      * @ignore
      */
-    id: String,
+    id: {
+      type: String,
+    },
     /**
      * Add a caption for a component.
      *
@@ -32,7 +43,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props, { slots }) {
+  setup(props: CFormControlWrapperProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,
@@ -41,7 +52,6 @@ const CFormControlWrapper = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          floatingLabel: props.floatingLabel,
           invalid: props.invalid,
           tooltipFeedback: props.tooltipFeedback,
           valid: props.valid,

package/src/components/form/CFormInput.ts

@@ -130,7 +130,9 @@ const CFormInput = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/form/CFormSelect.ts

@@ -119,7 +119,9 @@ const CFormSelect = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/form/CFormTextarea.ts

@@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/loading-button/CLoadingButton.ts

@@ -2,6 +2,15 @@ import { defineComponent, h, ref, watch } from 'vue'
 import { CButton } from '../button/CButton'
 import { CSpinner } from '../spinner/CSpinner'
 
+import type { ComponentProps } from '../../utils/ComponentProps'
+
+interface CLoadingButtonProps extends ComponentProps<typeof CButton> {
+  disabledOnLoading?: boolean
+  loading?: boolean
+  spinnerType?: 'border' | 'grow'
+  timeout?: number
+}
+
 const CLoadingButton = defineComponent({
   name: 'CLoadingButton',
   props: {
@@ -47,7 +56,7 @@ const CLoadingButton = defineComponent({
      */
     'click',
   ],
-  setup(props, { emit, slots }) {
+  setup(props: CLoadingButtonProps, { emit, slots }) {
     const loading = ref(props.loading)
 
     watch(

package/src/components/multi-select/CMultiSelect.ts

@@ -544,7 +544,9 @@ const CMultiSelect = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/nav/CNavItem.ts

@@ -1,7 +1,12 @@
 import { defineComponent, h } from 'vue'
-
 import { CNavLink } from './CNavLink'
 
+import type { ComponentProps } from '../../utils/ComponentProps'
+
+interface CNavItemProps extends ComponentProps<typeof CNavLink> {
+  as: string
+}
+
 const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
@@ -14,12 +19,11 @@ const CNavItem = defineComponent({
       default: 'li',
     },
   },
-  setup(props, { slots }) {
+  setup(props: CNavItemProps, { slots }) {
     return () =>
       h(
         props.as,
         {
-          as: props.component,
           class: 'nav-item',
         },
         props.href

package/src/components/offcanvas/COffcanvas.ts

@@ -45,7 +45,7 @@ const COffcanvas = defineComponent({
      */
     placement: {
       type: String,
-      require: true,
+      required: true,
       validator: (value: string) => {
         return ['start', 'end', 'top', 'bottom'].includes(value)
       },

package/src/components/popover/CPopover.ts

@@ -1,8 +1,8 @@
-import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, PropType, ref, RendererElement, Transition, useId } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
-import { useUniqueId, usePopper } from '../../composables'
+import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
 import { getRTLPlacement } from '../../utils'
@@ -117,10 +117,10 @@ const CPopover = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
-    const uID = ref()
     const visible = ref(props.visible)
-    const { getUID } = useUniqueId('popover')
+
     const { initPopper, destroyPopper } = usePopper()
+    const uniqueId = `popover-${useId()}`
 
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
@@ -149,10 +149,6 @@ const CPopover = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
-    onMounted(() => {
-      uID.value = getUID()
-    })
-
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -212,7 +208,7 @@ const CPopover = defineComponent({
                       },
                       attrs.class,
                     ],
-                    id: uID.value,
+                    id: uniqueId,
                     ref: popoverRef,
                     role: 'tooltip',
                   },
@@ -241,7 +237,7 @@ const CPopover = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
-          id: visible.value ? uID.value : null,
+          id: visible.value ? uniqueId : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),

package/src/components/smart-pagination/CSmartPagination.ts

@@ -13,7 +13,6 @@ const CSmartPagination = defineComponent({
     align: {
       type: String,
       default: 'start',
-      require: false,
       validator: (value: string) => {
         return ['start', 'center', 'end'].includes(value)
       },
@@ -26,7 +25,6 @@ const CSmartPagination = defineComponent({
     activePage: {
       type: Number,
       default: 1,
-      require: false,
     },
     /**
      * Show/hide arrows
@@ -36,7 +34,6 @@ const CSmartPagination = defineComponent({
     arrows: {
       type: Boolean,
       default: true,
-      require: false,
     },
     /**
      * Show/hide dots
@@ -46,7 +43,6 @@ const CSmartPagination = defineComponent({
     dots: {
       type: Boolean,
       default: true,
-      require: false,
     },
 
     /**
@@ -57,7 +53,6 @@ const CSmartPagination = defineComponent({
     doubleArrows: {
       type: Boolean,
       default: true,
-      require: false,
     },
     /**
      * The content of 'firstButton' button
@@ -67,7 +62,6 @@ const CSmartPagination = defineComponent({
     firstButton: {
       type: String,
       default: '«',
-      require: false,
     },
     /**
      * The content of 'lastButton' button
@@ -77,7 +71,6 @@ const CSmartPagination = defineComponent({
     lastButton: {
       type: String,
       default: '»',
-      require: false,
     },
     /**
      * Maximum items number
@@ -87,7 +80,6 @@ const CSmartPagination = defineComponent({
     limit: {
       type: Number,
       default: 5,
-      require: false,
     },
     /**
      * The content of 'nextButton' button
@@ -97,7 +89,6 @@ const CSmartPagination = defineComponent({
     nextButton: {
       type: String,
       default: '›',
-      require: false,
     },
     /**
      * Number of pages
@@ -105,7 +96,6 @@ const CSmartPagination = defineComponent({
     pages: {
       type: Number,
       default: 1000,
-      require: true,
     },
     /**
      * The content of 'previousButton' button
@@ -115,7 +105,6 @@ const CSmartPagination = defineComponent({
     previousButton: {
       type: String,
       default: '‹',
-      require: false,
     },
     /**
      * Size of pagination, valid values: 'sm', 'lg'

package/src/components/smart-table/CSmartTable.ts

@@ -91,8 +91,9 @@ const CSmartTable = defineComponent({
      * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
      *
      * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - external (Boolean) - Disables automatic sorting inside component.
-     * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
+     * - external (Boolean) - Disables automatic sorting inside the component, allowing for external sorting control.
+     * - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order will be maintained across multiple columns based on the order of interaction.
+     * - resetable (Boolean) - If set to true, clicking on the sorter cycles through three states: ascending, descending, and null (no sorting). The third click on the sorter will reset the sorting and restore the table to its original order.
      */
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
@@ -213,7 +214,7 @@ const CSmartTable = defineComponent({
      * { column: 'status', state: 'asc' }
      */
     sorterValue: {
-      type: Object as PropType<SorterValue>,
+      type: [Array, Object] as PropType<SorterValue[] | SorterValue>,
     },
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
@@ -309,7 +310,8 @@ const CSmartTable = defineComponent({
     /**
      * Sorter value change callback.
      *
-     * @property {object} SorterValue { column?: string, state?: number | string}
+     * @property {object} SorterValue | SorterValue[] { column?: string, state?: number | string}
+     * @property {array} SorterValue[]
      */
     'sorterChange',
     /**
@@ -327,13 +329,20 @@ const CSmartTable = defineComponent({
         return { ...item, _id: index }
       }),
     )
-    const itemsNumber = ref(props.itemsNumber)
-    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
+    const itemsPerPage = ref<number>(props.itemsPerPage)
     const selected = ref<Item[]>([])
     const selectedAll = ref<boolean | string>()
-    const sorterState = ref<SorterValue>(props.sorterValue || {})
+    const sorterState = ref<SorterValue[]>(
+      props.sorterValue
+        ? Array.isArray(props.sorterValue)
+          ? props.sorterValue
+          : [props.sorterValue]
+        : [],
+    )
     const tableFilterState = ref(props.tableFilterValue ?? '')
 
+    const itemsNumber = computed(() => props.itemsNumber ?? props.items.length)
+
     watch(
       () => props.activePage,
       () => {
@@ -353,10 +362,7 @@ const CSmartTable = defineComponent({
     watch(
       () => props.items,
       () => {
-        if (
-          props.items &&
-          props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value
-        ) {
+        if (props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
           activePage.value = 1
         }
 
@@ -364,10 +370,10 @@ const CSmartTable = defineComponent({
           if (item._selected) {
             const _item = { ...item }
             for (const key of ITEM_INTERNAL_KEYS) {
-              delete _item[key]
+              delete _item[key] // Remove internal keys
             }
 
-            selected.value = [...selected.value, _item]
+            selected.value = [...selected.value, _item] // Add cleaned item to selected array
           }
         })
 
@@ -375,7 +381,6 @@ const CSmartTable = defineComponent({
           items.value = props.items.map((item: Item, index: number) => {
             return { ...item, _id: index }
           })
-          itemsNumber.value = props.itemsNumber || props.items.length
         }
       },
       {
@@ -383,13 +388,6 @@ const CSmartTable = defineComponent({
       },
     )
 
-    watch(
-      () => props.itemsNumber,
-      () => {
-        itemsNumber.value = props.itemsNumber
-      },
-    )
-
     watch(
       () => props.itemsPerPage,
       () => {
@@ -408,7 +406,9 @@ const CSmartTable = defineComponent({
       () => props.sorterValue,
       () => {
         if (props.sorterValue) {
-          sorterState.value = props.sorterValue
+          sorterState.value = Array.isArray(props.sorterValue)
+            ? props.sorterValue
+            : [props.sorterValue]
         }
       },
     )
@@ -469,36 +469,42 @@ const CSmartTable = defineComponent({
         return
       }
 
-      //if column changed or sort was descending change asc to true
-      const state = sorterState.value
+      const existingColumnState = sorterState.value.find((x) => x.column === column)
+      const multiple = typeof props.columnSorter === 'object' && props.columnSorter.multiple
 
-      if (order) {
-        state.state = order
-      }
+      // If the column already has a sort state
+      if (existingColumnState) {
+        // No need to update if the order is already the same
+        if (existingColumnState.state === order) {
+          return
+        }
 
-      if (state.column === column) {
-        if (order) {
-          state.state = order
-        } else if (state.state === 0) {
-          state.state = 'asc'
-        } else if (state.state === 'asc') {
-          state.state = 'desc'
+        // Remove the column from sorting if resetable and descending
+        if (
+          typeof props.columnSorter === 'object' &&
+          props.columnSorter.resetable &&
+          existingColumnState.state === 'desc' &&
+          order !== 'asc'
+        ) {
+          sorterState.value = multiple ? sorterState.value.filter((x) => x.column !== column) : []
         } else {
-          if (typeof props.columnSorter === 'object' && !props.columnSorter.resetable) {
-            state.state = 'asc'
-          } else {
-            state.state = 0
+          // Toggle between ascending and descending
+          const newState = {
+            column,
+            state: order || (existingColumnState.state === 'asc' ? 'desc' : 'asc'),
           }
+
+          sorterState.value = multiple
+            ? sorterState.value.map((item) => (item.column === column ? newState : item))
+            : [newState]
         }
       } else {
-        state.column = column
-        state.state = order || 'asc'
+        // If the column is not yet sorted, add it with the default or provided order
+        const newSorter = { column, state: order || 'asc' }
+        sorterState.value = multiple ? [...sorterState.value, newSorter] : [newSorter]
       }
 
-      sorterState.value.column = state.column
-      sorterState.value.state = state.state
-
-      emit('sorterChange', sorterState.value)
+      emit('sorterChange', multiple ? sorterState.value : sorterState.value[0])
     }
 
     const handleActivePageChange = (page: number) => {
@@ -571,8 +577,16 @@ const CSmartTable = defineComponent({
         return
       }
 
+      const newState = { ...columnFilterState.value }
+
+      if (value === '') {
+        delete newState[colName]
+      } else {
+        newState[colName] = value
+      }
+
       activePage.value = 1
-      columnFilterState.value = { ...columnFilterState.value, [`${colName}`]: value }
+      columnFilterState.value = newState
 
       emit('columnFilterChange', columnFilterState.value)
     }
@@ -595,7 +609,7 @@ const CSmartTable = defineComponent({
     const handleClean = () => {
       tableFilterState.value = ''
       columnFilterState.value = {}
-      sorterState.value = {}
+      sorterState.value = []
     }
 
     const columnNames = computed(() => getColumnNames(props.columns, items.value))
@@ -623,7 +637,13 @@ const CSmartTable = defineComponent({
     )
 
     const sortedItems = computed(() =>
-      sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value),
+      sortItems(
+        props.columns,
+        props.columnSorter,
+        filteredTable.value,
+        itemsDataColumns.value,
+        sorterState.value,
+      ),
     )
 
     watch(sortedItems, () => {
@@ -718,7 +738,7 @@ const CSmartTable = defineComponent({
                       class: 'btn btn-transparent',
                       ...(!(
                         tableFilterState.value ||
-                        sorterState.value.column ||
+                        sorterState.value.length > 0 ||
                         Object.values(columnFilterState.value).join('')
                       ) && { disabled: true, tabIndex: -1 }),
                       onClick: () => handleClean(),