@coreui/vue-pro 5.0.0-rc.2 → 5.0.0

package/dist/esm/components/tooltip/CTooltip.js

@@ -21,7 +21,7 @@ const CTooltip = defineComponent({
         /**
          * Appends the vue tooltip 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-rc.2
+         * @since v5.0.0
          */
         container: {
             type: [Object, String],

package/dist/esm/components/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/tooltip/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,cAAc,GAAG;AACrB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;KACvC;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/tooltip/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,cAAc,GAAG;AACrB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAc,EAAE,QAAQ,CAAC,CAAA;KACjD;;;;;"}

package/dist/esm/components/virtual-scroller/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/virtual-scroller/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,sBAAsB,GAAG;AAC7B,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAA;KACvD;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/virtual-scroller/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA,MAAM,sBAAsB,GAAG;AAC7B,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,gBAAgB,CAAC,IAAc,EAAE,gBAAgB,CAAC,CAAA;KACjE;;;;;"}

package/dist/esm/components/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/widgets/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA,MAAM,mBAAmB,GAAG;AAC1B,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;KACjD;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/widgets/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA,MAAM,mBAAmB,GAAG;AAC1B,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;QAC1D,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;QAC1D,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;QAC1D,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;QAC1D,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;QAC1D,GAAG,CAAC,SAAS,CAAC,aAAa,CAAC,IAAc,EAAE,aAAa,CAAC,CAAA;KAC3D;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,24 +41,24 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.0.0-rc.2",
+    "@coreui/coreui-pro": "^5.0.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@types/jest": "^29.5.11",
-    "@vue/test-utils": "^2.4.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jest": "^29.5.12",
+    "@vue/test-utils": "^2.4.5",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.9.2",
+    "rollup": "^4.13.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3",
-    "vue": "^3.4.3",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.4.3",
+    "vue": "^3.4.21",
     "vue-types": "^5.1.1"
   },
   "peerDependencies": {

package/src/components/accordion/index.ts

@@ -7,11 +7,11 @@ import { CAccordionItem } from './CAccordionItem'
 
 const CAccordionPlugin = {
   install: (app: App): void => {
-    app.component(CAccordion.name, CAccordion)
-    app.component(CAccordionBody.name, CAccordionBody)
-    app.component(CAccordionButton.name, CAccordionButton)
-    app.component(CAccordionHeader.name, CAccordionHeader)
-    app.component(CAccordionItem.name, CAccordionItem)
+    app.component(CAccordion.name as string, CAccordion)
+    app.component(CAccordionBody.name as string, CAccordionBody)
+    app.component(CAccordionButton.name as string, CAccordionButton)
+    app.component(CAccordionHeader.name as string, CAccordionHeader)
+    app.component(CAccordionItem.name as string, CAccordionItem)
   },
 }
 

package/src/components/alert/index.ts

@@ -5,9 +5,9 @@ import { CAlertLink } from './CAlertLink'
 
 const CAlertPlugin = {
   install: (app: App): void => {
-    app.component(CAlert.name, CAlert)
-    app.component(CAlertHeading.name, CAlertHeading)
-    app.component(CAlertLink.name, CAlertLink)
+    app.component(CAlert.name as string, CAlert)
+    app.component(CAlertHeading.name as string, CAlertHeading)
+    app.component(CAlertLink.name as string, CAlertLink)
   },
 }
 

package/src/components/avatar/index.ts

@@ -3,7 +3,7 @@ import { CAvatar } from './CAvatar'
 
 const CAvatarPlugin = {
   install: (app: App): void => {
-    app.component(CAvatar.name, CAvatar)
+    app.component(CAvatar.name as string, CAvatar)
   },
 }
 

package/src/components/backdrop/index.ts

@@ -3,7 +3,7 @@ import { CBackdrop } from './CBackdrop'
 
 const CBackdropPlugin = {
   install: (app: App): void => {
-    app.component(CBackdrop.name, CBackdrop)
+    app.component(CBackdrop.name as string, CBackdrop)
   },
 }
 

package/src/components/badge/CBadge.ts

@@ -5,12 +5,6 @@ import { Color, Shape, TextColor } from '../../props'
 const CBadge = defineComponent({
   name: 'CBadge',
   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: Color,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
@@ -18,6 +12,12 @@ const CBadge = defineComponent({
       type: String,
       default: 'span',
     },
+    /**
+     * 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,
     /**
      * Position badge in one of the corners of a link or button.
      *
@@ -46,6 +46,13 @@ const CBadge = defineComponent({
         return value === 'sm'
       },
     },
+    /**
+     * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0
+     */
+    textBgColor: Color,
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
@@ -61,7 +68,7 @@ const CBadge = defineComponent({
           class: [
             'badge',
             {
-              [`text-bg-${props.color}`]: props.color,
+              [`bg-${props.color}`]: props.color,
               'position-absolute translate-middle': props.position,
               'top-0': props.position && props.position.includes('top'),
               'top-100': props.position && props.position.includes('bottom'),
@@ -69,6 +76,7 @@ const CBadge = defineComponent({
               'start-0': props.position && props.position.includes('start'),
               [`badge-${props.size}`]: props.size,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
             props.shape,
           ],

package/src/components/badge/index.ts

@@ -3,7 +3,7 @@ import { CBadge } from './CBadge'
 
 const CBadgePlugin = {
   install: (app: App): void => {
-    app.component(CBadge.name, CBadge)
+    app.component(CBadge.name as string, CBadge)
   },
 }
 

package/src/components/breadcrumb/index.ts

@@ -4,8 +4,8 @@ import { CBreadcrumb } from './CBreadcrumb'
 
 const CBreadcrumbPlugin = {
   install: (app: App): void => {
-    app.component(CBreadcrumb.name, CBreadcrumb)
-    app.component(CBreadcrumbItem.name, CBreadcrumbItem)
+    app.component(CBreadcrumb.name as string, CBreadcrumb)
+    app.component(CBreadcrumbItem.name as string, CBreadcrumbItem)
   },
 }
 

package/src/components/button/index.ts

@@ -3,7 +3,7 @@ import { CButton } from './CButton'
 
 const CButtonPlugin = {
   install: (app: App): void => {
-    app.component(CButton.name, CButton)
+    app.component(CButton.name as string, CButton)
   },
 }
 

package/src/components/button-group/index.ts

@@ -4,8 +4,8 @@ import { CButtonGroup } from './CButtonGroup'
 
 const CButtonGroupPlugin = {
   install: (app: App): void => {
-    app.component(CButtonToolbar.name, CButtonToolbar)
-    app.component(CButtonGroup.name, CButtonGroup)
+    app.component(CButtonToolbar.name as string, CButtonToolbar)
+    app.component(CButtonGroup.name as string, CButtonGroup)
   },
 }
 

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-rc.2
+     * @since 5.0.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-rc.2
+     * @since 5.0.0
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

package/src/components/calendar/index.ts

@@ -3,7 +3,7 @@ import { CCalendar } from './CCalendar'
 
 const CCalendarPlugin = {
   install: (app: App): void => {
-    app.component(CCalendar.name, CCalendar)
+    app.component(CCalendar.name as string, CCalendar)
   },
 }
 

package/src/components/callout/index.ts

@@ -3,7 +3,7 @@ import { CCallout } from './CCallout'
 
 const CCalloutPlugin = {
   install: (app: App): void => {
-    app.component(CCallout.name, CCallout)
+    app.component(CCallout.name as string, CCallout)
   },
 }
 

package/src/components/card/CCard.ts

@@ -11,6 +11,13 @@ const CCard = defineComponent({
      * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
      */
     color: Color,
+    /**
+     * Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     * @since 5.0.0
+     */
+    textBgColor: Color,
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
@@ -28,6 +35,7 @@ const CCard = defineComponent({
             {
               [`bg-${props.color}`]: props.color,
               [`text-${props.textColor}`]: props.textColor,
+              [`text-bg-${props.textBgColor}`]: props.textBgColor,
             },
           ],
         },

package/src/components/card/index.ts

@@ -13,17 +13,17 @@ import { CCardTitle } from './CCardTitle'
 
 const CCardPlugin = {
   install: (app: App): void => {
-    app.component(CCard.name, CCard)
-    app.component(CCardBody.name, CCardBody)
-    app.component(CCardFooter.name, CCardFooter)
-    app.component(CCardGroup.name, CCardGroup)
-    app.component(CCardHeader.name, CCardHeader)
-    app.component(CCardImage.name, CCardImage)
-    app.component(CCardImageOverlay.name, CCardImageOverlay)
-    app.component(CCardLink.name, CCardLink)
-    app.component(CCardSubtitle.name, CCardSubtitle)
-    app.component(CCardText.name, CCardText)
-    app.component(CCardTitle.name, CCardTitle)
+    app.component(CCard.name as string, CCard)
+    app.component(CCardBody.name as string, CCardBody)
+    app.component(CCardFooter.name as string, CCardFooter)
+    app.component(CCardGroup.name as string, CCardGroup)
+    app.component(CCardHeader.name as string, CCardHeader)
+    app.component(CCardImage.name as string, CCardImage)
+    app.component(CCardImageOverlay.name as string, CCardImageOverlay)
+    app.component(CCardLink.name as string, CCardLink)
+    app.component(CCardSubtitle.name as string, CCardSubtitle)
+    app.component(CCardText.name as string, CCardText)
+    app.component(CCardTitle.name as string, CCardTitle)
   },
 }
 

package/src/components/carousel/index.ts

@@ -5,9 +5,9 @@ import { CCarouselItem } from './CCarouselItem'
 
 const CCarouselPlugin = {
   install: (app: App): void => {
-    app.component(CCarousel.name, CCarousel)
-    app.component(CCarouselCaption.name, CCarouselCaption)
-    app.component(CCarouselItem.name, CCarouselItem)
+    app.component(CCarousel.name as string, CCarousel)
+    app.component(CCarouselCaption.name as string, CCarouselCaption)
+    app.component(CCarouselItem.name as string, CCarouselItem)
   },
 }
 

package/src/components/close-button/index.ts

@@ -3,7 +3,7 @@ import { CCloseButton } from './CCloseButton'
 
 const CCloseButtonPlugin = {
   install: (app: App): void => {
-    app.component(CCloseButton.name, CCloseButton)
+    app.component(CCloseButton.name as string, CCloseButton)
   },
 }
 

package/src/components/collapse/index.ts

@@ -3,7 +3,7 @@ import { CCollapse } from './CCollapse'
 
 const CCollapsePlugin = {
   install: (app: App): void => {
-    app.component(CCollapse.name, CCollapse)
+    app.component(CCollapse.name as string, CCollapse)
   },
 }
 

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

@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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

@@ -3,7 +3,7 @@ import { CConditionalTeleport } from './CConditionalTeleport'
 
 const CConditionalTeleportPlugin = {
   install: (app: App): void => {
-    app.component(CConditionalTeleport.name, CConditionalTeleport)
+    app.component(CConditionalTeleport.name as string, CConditionalTeleport)
   },
 }
 

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

@@ -183,19 +183,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -249,7 +249,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.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-rc.2
+     * @since 5.0.0
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

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

@@ -3,7 +3,7 @@ import { CDatePicker } from './CDatePicker'
 
 const CDatePickerPlugin = {
   install: (app: App): void => {
-    app.component(CDatePicker.name, CDatePicker)
+    app.component(CDatePicker.name as string, CDatePicker)
   },
 }
 

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

@@ -214,19 +214,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -316,7 +316,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.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-rc.2
+     * @since 5.0.0
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.2
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

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

@@ -3,7 +3,7 @@ import { CDateRangePicker } from './CDateRangePicker'
 
 const CDateRangePickerPlugin = {
   install: (app: App): void => {
-    app.component(CDateRangePicker.name, CDateRangePicker)
+    app.component(CDateRangePicker.name as string, CDateRangePicker)
   },
 }
 

package/src/components/dropdown/CDropdown.ts

@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * 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-rc.2
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     teleport: {
       type: Boolean,

package/src/components/dropdown/CDropdownToggle.ts

@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-rc.2
+     * @since v5.0.0
      */
     navLink: {
       type: Boolean,
@@ -176,8 +176,8 @@ const CDropdownToggle = defineComponent({
               CButton,
               {
                 ...togglerProps.value,
+                as: props.as,
                 color: props.color,
-                component: props.as,
                 disabled: props.disabled,
                 shape: props.shape,
                 size: props.size,

package/src/components/dropdown/index.ts

@@ -8,12 +8,12 @@ import { CDropdownToggle } from './CDropdownToggle'
 
 const CDropdownPlugin = {
   install: (app: App): void => {
-    app.component(CDropdown.name, CDropdown)
-    app.component(CDropdownItem.name, CDropdownItem)
-    app.component(CDropdownHeader.name, CDropdownHeader)
-    app.component(CDropdownDivider.name, CDropdownDivider)
-    app.component(CDropdownMenu.name, CDropdownMenu)
-    app.component(CDropdownToggle.name, CDropdownToggle)
+    app.component(CDropdown.name as string, CDropdown)
+    app.component(CDropdownItem.name as string, CDropdownItem)
+    app.component(CDropdownHeader.name as string, CDropdownHeader)
+    app.component(CDropdownDivider.name as string, CDropdownDivider)
+    app.component(CDropdownMenu.name as string, CDropdownMenu)
+    app.component(CDropdownToggle.name as string, CDropdownToggle)
   },
 }
 

package/src/components/element-cover/index.ts

@@ -3,7 +3,7 @@ import { CElementCover } from './CElementCover'
 
 const CElementCoverPlugin = {
   install: (app: App): void => {
-    app.component(CElementCover.name, CElementCover)
+    app.component(CElementCover.name as string, CElementCover)
   },
 }
 

package/src/components/footer/index.ts

@@ -3,7 +3,7 @@ import { CFooter } from './CFooter'
 
 const CFooterPlugin = {
   install: (app: App): void => {
-    app.component(CFooter.name, CFooter)
+    app.component(CFooter.name as string, CFooter)
   },
 }
 

package/src/components/form/index.ts

@@ -15,19 +15,19 @@ import { CInputGroupText } from './CInputGroupText'
 
 const CFormPlugin = {
   install: (app: App): void => {
-    app.component(CForm.name, CForm)
-    app.component(CFormCheck.name, CFormCheck)
-    app.component(CFormFeedback.name, CFormFeedback)
-    app.component(CFormFloating.name, CFormFloating)
-    app.component(CFormInput.name, CFormInput)
-    app.component(CFormLabel.name, CFormLabel)
-    app.component(CFormRange.name, CFormRange)
-    app.component(CFormSelect.name, CFormSelect)
-    app.component(CFormSwitch.name, CFormSwitch)
-    app.component(CFormText.name, CFormText)
-    app.component(CFormTextarea.name, CFormTextarea)
-    app.component(CInputGroup.name, CInputGroup)
-    app.component(CInputGroupText.name, CInputGroupText)
+    app.component(CForm.name as string, CForm)
+    app.component(CFormCheck.name as string, CFormCheck)
+    app.component(CFormFeedback.name as string, CFormFeedback)
+    app.component(CFormFloating.name as string, CFormFloating)
+    app.component(CFormInput.name as string, CFormInput)
+    app.component(CFormLabel.name as string, CFormLabel)
+    app.component(CFormRange.name as string, CFormRange)
+    app.component(CFormSelect.name as string, CFormSelect)
+    app.component(CFormSwitch.name as string, CFormSwitch)
+    app.component(CFormText.name as string, CFormText)
+    app.component(CFormTextarea.name as string, CFormTextarea)
+    app.component(CInputGroup.name as string, CInputGroup)
+    app.component(CInputGroupText.name as string, CInputGroupText)
   },
 }
 

package/src/components/grid/index.ts

@@ -5,9 +5,9 @@ import { CRow } from './CRow'
 
 const CGridPlugin = {
   install: (app: App): void => {
-    app.component(CCol.name, CCol)
-    app.component(CContainer.name, CContainer)
-    app.component(CRow.name, CRow)
+    app.component(CCol.name as string, CCol)
+    app.component(CContainer.name as string, CContainer)
+    app.component(CRow.name as string, CRow)
   },
 }
 export { CGridPlugin, CCol, CContainer, CRow }

package/src/components/header/index.ts

@@ -8,12 +8,12 @@ import { CHeaderToggler } from './CHeaderToggler'
 
 const CHeaderPlugin = {
   install: (app: App): void => {
-    app.component(CHeader.name, CHeader)
-    app.component(CHeaderBrand.name, CHeaderBrand)
-    app.component(CHeaderDivider.name, CHeaderDivider)
-    app.component(CHeaderNav.name, CHeaderNav)
-    app.component(CHeaderText.name, CHeaderText)
-    app.component(CHeaderToggler.name, CHeaderToggler)
+    app.component(CHeader.name as string, CHeader)
+    app.component(CHeaderBrand.name as string, CHeaderBrand)
+    app.component(CHeaderDivider.name as string, CHeaderDivider)
+    app.component(CHeaderNav.name as string, CHeaderNav)
+    app.component(CHeaderText.name as string, CHeaderText)
+    app.component(CHeaderToggler.name as string, CHeaderToggler)
   },
 }