@coreui/vue-pro 5.0.0-rc.3 → 5.1.0-alpha.0

package/dist/esm/index.js

@@ -142,6 +142,8 @@ export { CProgressBar } from './components/progress/CProgressBar.js';
 export { CProgressStacked } from './components/progress/CProgressStacked.js';
 export { CPopoverPlugin } from './components/popover/index.js';
 export { CPopover } from './components/popover/CPopover.js';
+export { CRating } from './components/rating/CRating.js';
+export { CRatingPlugin } from './components/rating/index.js';
 export { CSidebarPlugin } from './components/sidebar/index.js';
 export { CSidebar } from './components/sidebar/CSidebar.js';
 export { CSidebarBrand } from './components/sidebar/CSidebarBrand.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Components","Directives"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,SAAS,GAAG;AAChB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;AAC1B,QAAA,KAAK,MAAM,GAAG,IAAIA,KAAU,EAAE;YAC5B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAGA,KAAqC,CAAC,GAAG,CAAC,CAAC,CAAA;SAChE;AAED,QAAA,KAAK,MAAM,GAAG,IAAIC,OAAU,EAAE;AAC5B,YAAA,GAAG,CAAC,SAAS,CACVA,OAAqC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAClDA,OAAqC,CAAC,GAAG,CAAC,CAC5C,CAAA;SACF;KACF;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":[null],"names":["Components","Directives"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,SAAS,GAAG;AAChB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;AAC1B,QAAA,KAAK,MAAM,GAAG,IAAIA,KAAU,EAAE;YAC5B,GAAG,CAAC,SAAS,CAAC,GAAG,EAAGA,KAAqC,CAAC,GAAG,CAAC,CAAC,CAAA;SAChE;AAED,QAAA,KAAK,MAAM,GAAG,IAAIC,OAAU,EAAE;AAC5B,YAAA,GAAG,CAAC,SAAS,CACVA,OAAqC,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAClDA,OAAqC,CAAC,GAAG,CAAC,CAC5C,CAAA;SACF;KACF;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.0.0-rc.3",
+  "version": "5.1.0-alpha.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,7 +41,7 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.0.0-rc.3",
+    "@coreui/coreui-pro": "^5.1.0-alpha.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
@@ -54,7 +54,7 @@
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.13.0",
+    "rollup": "^4.13.2",
     "rollup-plugin-vue": "^6.0.0",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.3",

package/src/components/badge/CBadge.ts

@@ -50,7 +50,7 @@ const CBadge = defineComponent({
      * 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-rc.3
+     * @since 5.0.0
      */
     textBgColor: Color,
     /**

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.3
+     * @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.3
+     * @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.3
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

package/src/components/card/CCard.ts

@@ -15,7 +15,7 @@ const CCard = defineComponent({
      * 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-rc.3
+     * @since 5.0.0
      */
     textBgColor: Color,
     /**

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.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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.3
+     * @since v5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.3
+     * @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.3
+     * @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.3
+     * @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.3
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

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.3
+     * @since v5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.3
+     * @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.3
+     * @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.3
+     * @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.3
+     * @since 5.0.0
      */
     weekNumbersLabel: String,
   },

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.3
+     * @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.3
+     * @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.3
+     * @since v5.0.0
      */
     navLink: {
       type: Boolean,

package/src/components/index.ts

@@ -35,6 +35,7 @@ export * from './picker'
 export * from './placeholder'
 export * from './progress'
 export * from './popover'
+export * from './rating'
 export * from './sidebar'
 export * from './smart-pagination'
 export * from './smart-table'

package/src/components/modal/CModal.ts

@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     focus: {
       type: Boolean,

package/src/components/popover/CPopover.ts

@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover 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.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

package/src/components/progress/CProgress.ts

@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.3
+     * @since 5.0.0
      */
     progressBarClassName: String,
     /**

package/src/components/rating/CRating.ts

@@ -0,0 +1,288 @@
+import { PropType, defineComponent, h, ref, watch, withDirectives } from 'vue'
+import vCTooltip from '../../directives/v-c-tooltip'
+
+const CRating = defineComponent({
+  name: 'CRating',
+  props: {
+    /**
+     * Enables the clearing upon clicking the selected item again.
+     */
+    allowClear: Boolean,
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled: Boolean,
+    /**
+     * If enabled, only the currently selected icon will be visibly highlighted.
+     */
+    highlightOnlySelected: Boolean,
+    /**
+     * Specifies the total number of stars to be displayed in the star rating component. This property determines the scale of the rating, such as out of 5 stars, 10 stars, etc.
+     */
+    itemCount: {
+      type: Number,
+      default: 5,
+    },
+    /**
+     * The default name for a value passed using v-model.
+     */
+    modelValue: Number,
+    /**
+     * The name attribute of the radio input elements.
+     */
+    name: String,
+    /**
+     * Minimum increment value change allowed.
+     */
+    precision: {
+      type: Number,
+      default: 1,
+    },
+    /**
+     * Toggle the readonly state for the component.
+     */
+    readOnly: Boolean,
+    /**
+     * Size the component small, large, or custom if you define custom icons with custom height.
+     *
+     * @values 'sm', 'lg', 'custom'
+     */
+    size: {
+      type: String,
+      validator: (value: string) => {
+        return ['sm', 'lg', 'custom'].includes(value)
+      },
+    },
+    /**
+     * Enable tooltips with default values or set specific labels for each icon.
+     */
+    tooltips: {
+      type: [Boolean, Array] as PropType<boolean | string[]>,
+    },
+    /**
+     * The `value` attribute of component.
+     * */
+    value: Number,
+  },
+  emits: [
+    /**
+     * Execute a function when a user changes the selected element.
+     *
+     * @property {number | null} value
+     */
+    'change',
+    /**
+     * Execute a function when a user hover the element.
+     *
+     * @property {number | null} value
+     */
+    'hover',
+    /**
+     * Emit the new value whenever there’s a change event.
+     */
+    'update:modelValue',
+  ],
+  setup(props, { slots, emit }) {
+    const cleared = ref(false)
+    const currentValue = ref((props.modelValue || props.value) ?? null)
+    const hoverValue = ref<number | null>(null)
+    const tooltipValue = ref<number | null>(null)
+    const name = props.name || `name${Math.floor(Math.random() * 1_000_000)}`
+    const uid = `id${Math.floor(Math.random() * 1_000_000)}`
+
+    watch(
+      () => props.value,
+      () => {
+        if (props.value !== undefined) {
+          currentValue.value = props.value
+        }
+      },
+    )
+
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.modelValue !== undefined) {
+          currentValue.value = props.modelValue
+        }
+      },
+    )
+
+    const handleMouseEnter = (value: number) => {
+      if (props.disabled || props.readOnly) {
+        return
+      }
+
+      emit('hover', value)
+      hoverValue.value = value
+      tooltipValue.value = value
+    }
+
+    const handleMouseLeave = () => {
+      if (props.disabled || props.readOnly) {
+        return
+      }
+
+      emit('hover', null)
+      hoverValue.value = null
+    }
+
+    const handleOnChange = (value: number) => {
+      if (props.disabled || props.readOnly) {
+        return
+      }
+
+      if (cleared.value) {
+        cleared.value = false
+        return
+      }
+
+      currentValue.value = value
+      emit('change', value)
+      emit('update:modelValue', value)
+    }
+
+    const handleOnClick = (value: number) => {
+      if (props.disabled || props.readOnly) {
+        return
+      }
+
+      if (props.allowClear && value === currentValue.value) {
+        emit('change', value)
+        cleared.value = true
+        currentValue.value = null
+        hoverValue.value = null
+      }
+    }
+
+    return () =>
+      h(
+        'div',
+        {
+          class: [
+            'rating',
+            {
+              [`rating-${props.size}`]: props.size,
+              disabled: props.disabled,
+              readonly: props.readOnly,
+            },
+          ],
+          role: 'radiogroup',
+        },
+        [
+          Array.from({ length: props.itemCount }, (_, index) => {
+            const numberOfRadios = 1 / props.precision
+            return withDirectives(
+              h(
+                'div',
+                {
+                  class: 'rating-item',
+                },
+                [
+                  Array.from({ length: numberOfRadios }, (_, _index) => {
+                    const isNotLastItem = _index + 1 < numberOfRadios
+                    const value =
+                      numberOfRadios === 1
+                        ? index + 1
+                        : index + (_index + 1) * (1 * props.precision)
+                    const id = `${uid}${value}`
+
+                    const isItemChecked = () => value === currentValue.value
+
+                    const isItemActive = () => {
+                      if (
+                        props.highlightOnlySelected
+                          ? hoverValue.value === value
+                          : hoverValue.value && hoverValue.value >= value
+                      ) {
+                        return true
+                      }
+
+                      if (
+                        hoverValue.value === null &&
+                        (props.highlightOnlySelected
+                          ? isItemChecked()
+                          : currentValue.value && currentValue.value >= value)
+                      ) {
+                        return true
+                      }
+
+                      return false
+                    }
+
+                    return [
+                      h(
+                        'label',
+                        {
+                          class: [
+                            'rating-item-label',
+                            {
+                              active: isItemActive(),
+                            },
+                          ],
+                          for: id,
+                          onClick: () => handleOnClick(value),
+                          onMouseenter: () => handleMouseEnter(value),
+                          onMouseleave: () => handleMouseLeave(),
+                          ...(isNotLastItem && {
+                            style: {
+                              zIndex: 1 / props.precision - _index,
+                              position: 'absolute',
+                              width: `${props.precision * (_index + 1) * 100}%`,
+                              overflow: 'hidden',
+                              opacity: 0,
+                            },
+                          }),
+                        },
+                        {
+                          default: () => [
+                            slots.icon
+                              ? h(
+                                  'div',
+                                  { class: 'rating-item-custom-icon' },
+                                  slots.icon({ value: index + 1 }),
+                                )
+                              : h('div', { class: 'rating-item-icon' }),
+                            slots.activeIcon &&
+                              h(
+                                'div',
+                                { class: 'rating-item-custom-icon-active' },
+                                slots.activeIcon({ value: index + 1 }),
+                              ),
+                          ],
+                        },
+                      ),
+                      h('input', {
+                        checked: isItemChecked(),
+                        class: 'rating-item-input',
+                        disabled: props.disabled || props.readOnly,
+                        id: id,
+                        name: name,
+                        onBlur: () => handleMouseLeave(),
+                        onChange: () => handleOnChange(value),
+                        onFocus: () => handleMouseEnter(value),
+                        type: 'radio',
+                        value: value,
+                      }),
+                    ]
+                  }),
+                ],
+              ),
+              props.tooltips
+                ? [
+                    [
+                      vCTooltip,
+                      {
+                        content: Array.isArray(props.tooltips) ? props.tooltips[index] : index + 1,
+                        placement: 'top',
+                      },
+                    ],
+                  ]
+                : [],
+            )
+          }),
+        ],
+      )
+  },
+})
+export { CRating }

package/src/components/rating/index.ts

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

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

@@ -9,6 +9,7 @@ import { ITEM_INTERNAL_KEYS } from './consts'
 import {
   getClickedColumnName,
   getColumnName,
+  getColumns,
   getTableDataCellProps,
   getTableDataCellStyles,
 } from './utils'
@@ -45,6 +46,7 @@ const CSmartTableBody = defineComponent({
   emits: ['rowChecked', 'rowClick'],
   setup(props, { emit }) {
     const colspan: number = props.selectable ? props.columns.length + 1 : props.columns.length
+    const columns = getColumns(props.columns)
     return () =>
       h(
         CTableBody,
@@ -88,7 +90,7 @@ const CSmartTableBody = defineComponent({
                               },
                             }),
                           ),
-                        props.columns.map((column) => {
+                        columns.map((column) => {
                           const colName = getColumnName(column)
                           return props.scopedSlots &&
                             props.scopedSlots[colName] &&

package/src/components/time-picker/CTimePicker.ts

@@ -151,7 +151,7 @@ const CTimePicker = defineComponent({
     /**
      * Specify a list of available hours using an array, or customize the filtering of hours through a function.
      *
-     * @since 5.0.0-rc.3
+     * @since 5.0.0
      */
     hours: {
       type: [Array, Function] as PropType<number[] | ((hour: number) => number[])>,
@@ -170,7 +170,7 @@ const CTimePicker = defineComponent({
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.3
+     * @since v5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -205,7 +205,7 @@ const CTimePicker = defineComponent({
     /**
      * Toggle the display of minutes, specify a list of available minutes using an array, or customize the filtering of minutes through a function.
      *
-     * @since 5.0.0-rc.3
+     * @since 5.0.0
      */
     minutes: {
       type: [Array, Boolean, Function] as PropType<

package/src/components/tooltip/CTooltip.ts

@@ -23,7 +23,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.3
+     * @since v5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,