@coreui/vue-pro 4.9.0-rc.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.9.0-rc.0",
+  "version": "4.10.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -38,21 +38,21 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@types/jest": "^29.5.2",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.0",
     "@vue/vue3-jest": "29.2.4",
     "date-fns": "^2.29.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "rollup": "^3.25.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "rollup": "^3.26.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.9.5",
     "vue": "^3.3.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "^5.1.0"
   },
   "peerDependencies": {
     "@coreui/coreui-pro": "^4.5.0",

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

@@ -4,7 +4,6 @@ import { format as dateFormat } from 'date-fns'
 
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
-import { CInputGroup } from '../form'
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
@@ -645,61 +644,30 @@ const CDateRangePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
-        h('input', {
-          autocomplete: 'off',
+      h(
+        'div',
+        {
           class: [
-            'form-control date-picker-input',
+            'input-group',
+            'picker-input-group',
             {
-              hover: inputStartHoverValue.value,
+              [`input-group-${props.size}`]: props.size,
             },
           ],
-          disabled: props.disabled,
-          ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
-          onClick: () => {
-            selectEndDate.value = false
-          },
-          onInput: (event: Event) => {
-            const date = getLocalDateFromString(
-              (event.target as HTMLInputElement).value,
-              props.locale,
-              props.timepicker,
-            )
-            if (date instanceof Date && date.getTime()) {
-              calendarDate.value = date
-              startDate.value = date
-            }
-          },
-          placeholder: Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder,
-          readonly: props.inputReadOnly || typeof props.format === 'string',
-          required: props.required,
-          ref: inputStartRef,
-          value: inputStartHoverValue.value
-            ? setInputValue(inputStartHoverValue.value)
-            : setInputValue(startDate.value),
-        }),
-        props.range &&
-          props.separator !== false &&
-          h(
-            'span',
-            { class: 'input-group-text' },
-            slots.separator
-              ? slots.separator()
-              : h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' }),
-          ),
-        props.range &&
+        },
+        [
           h('input', {
             autocomplete: 'off',
             class: [
               'form-control date-picker-input',
               {
-                hover: inputEndHoverValue.value,
+                hover: inputStartHoverValue.value,
               },
             ],
             disabled: props.disabled,
-            ...(props.id && { name: `${props.id}-end-date` }),
+            ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
             onClick: () => {
-              selectEndDate.value = true
+              selectEndDate.value = false
             },
             onInput: (event: Event) => {
               const date = getLocalDateFromString(
@@ -709,43 +677,88 @@ const CDateRangePicker = defineComponent({
               )
               if (date instanceof Date && date.getTime()) {
                 calendarDate.value = date
-                endDate.value = date
+                startDate.value = date
               }
             },
-            placeholder: props.placeholder[1],
+            placeholder: Array.isArray(props.placeholder)
+              ? props.placeholder[0]
+              : props.placeholder,
             readonly: props.inputReadOnly || typeof props.format === 'string',
             required: props.required,
-            ref: inputEndRef,
-            value: inputEndHoverValue.value
-              ? setInputValue(inputEndHoverValue.value)
-              : setInputValue(endDate.value),
+            ref: inputStartRef,
+            value: inputStartHoverValue.value
+              ? setInputValue(inputStartHoverValue.value)
+              : setInputValue(startDate.value),
           }),
-        (props.indicator || props.cleaner) &&
-          h('span', { class: 'input-group-text' }, [
-            props.indicator &&
-              h(
-                'span',
-                {
-                  class: 'picker-input-group-indicator',
-                },
-                slots.indicator
-                  ? slots.indicator()
-                  : h('span', { class: 'picker-input-group-icon date-picker-input-icon' }),
-              ),
-            props.cleaner &&
-              h(
-                'span',
+          props.range &&
+            props.separator !== false &&
+            h(
+              'span',
+              { class: 'input-group-text' },
+              slots.separator
+                ? slots.separator()
+                : h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' }),
+            ),
+          props.range &&
+            h('input', {
+              autocomplete: 'off',
+              class: [
+                'form-control date-picker-input',
                 {
-                  class: 'picker-input-group-cleaner',
-                  onClick: (event: Event) => handleClear(event),
-                  role: 'button',
+                  hover: inputEndHoverValue.value,
                 },
-                slots.cleaner
-                  ? slots.cleaner()
-                  : h('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' }),
-              ),
-          ]),
-      ])
+              ],
+              disabled: props.disabled,
+              ...(props.id && { name: `${props.id}-end-date` }),
+              onClick: () => {
+                selectEndDate.value = true
+              },
+              onInput: (event: Event) => {
+                const date = getLocalDateFromString(
+                  (event.target as HTMLInputElement).value,
+                  props.locale,
+                  props.timepicker,
+                )
+                if (date instanceof Date && date.getTime()) {
+                  calendarDate.value = date
+                  endDate.value = date
+                }
+              },
+              placeholder: props.placeholder[1],
+              readonly: props.inputReadOnly || typeof props.format === 'string',
+              required: props.required,
+              ref: inputEndRef,
+              value: inputEndHoverValue.value
+                ? setInputValue(inputEndHoverValue.value)
+                : setInputValue(endDate.value),
+            }),
+          (props.indicator || props.cleaner) &&
+            h('span', { class: 'input-group-text' }, [
+              props.indicator &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-indicator',
+                  },
+                  slots.indicator
+                    ? slots.indicator()
+                    : h('span', { class: 'picker-input-group-icon date-picker-input-icon' }),
+                ),
+              props.cleaner &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-cleaner',
+                    onClick: (event: Event) => handleClear(event),
+                    role: 'button',
+                  },
+                  slots.cleaner
+                    ? slots.cleaner()
+                    : h('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' }),
+                ),
+            ]),
+        ],
+      )
 
     return () =>
       h(

package/src/components/dropdown/CDropdown.ts

@@ -121,7 +121,7 @@ const CDropdown = defineComponent({
     /**
      * Offset of the dropdown menu relative to its target.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     offset: {
       type: Array,

package/src/components/form/CFormCheck.ts

@@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: Object,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.10.0
+     */
+    falseValue: String,
     /**
      * Provide valuable, actionable feedback.
      *
@@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: [Boolean, String],
+      type: [Array, Boolean, String],
       value: undefined,
     },
     /**
@@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
      * @since 4.3.0
      */
     tooltipFeedback: Boolean,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.10.0
+     */
+    trueValue: String,
     /**
      * Specifies the type of component.
      *
@@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
   ],
   setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
       emit('change', event)
-      emit('update:modelValue', (event.target as HTMLInputElement).value)
+
+      if (props.falseValue && props.trueValue) {
+        emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
+        return
+      }
+
+      if (props.value && Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(props.value)) {
+          emit(
+            'update:modelValue',
+            props.modelValue.filter((value) => value !== props.value),
+          )
+        } else {
+          emit('update:modelValue', [...props.modelValue, props.value])
+        }
+
+        return
+      }
+
+      if (props.value === undefined) {
+        emit('update:modelValue', target.checked)
+        return
+      }
+
+      if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
+        emit('update:modelValue', target.checked ? props.value : undefined)
+      }
     }
 
     const className = [
@@ -135,12 +174,22 @@ const CFormCheck = defineComponent({
       },
     ]
 
-    const isChecked = computed(() => props.modelValue == props.value)
+    const isChecked = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value)
+      }
+
+      if (typeof props.modelValue === 'string') {
+        return props.modelValue === props.value
+      }
+
+      return props.modelValue
+    })
 
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && { checked: isChecked.value }),
+        ...(props.modelValue && props.value && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -210,4 +259,4 @@ const CFormCheck = defineComponent({
   },
 })
 
-export { CFormCheck }
+export { CFormCheck }

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

@@ -19,7 +19,7 @@ const CMultiSelect = defineComponent({
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     allowCreateOptions: Boolean,
     /**
@@ -34,7 +34,7 @@ const CMultiSelect = defineComponent({
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     clearSearchOnSelect: Boolean,
     /**
@@ -78,7 +78,7 @@ const CMultiSelect = defineComponent({
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     loading: Boolean,
     /**

package/src/components/popover/CPopover.ts

@@ -12,7 +12,7 @@ const CPopover = defineComponent({
     /**
      * Apply a CSS fade transition to the popover.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     animation: {
       type: Boolean,
@@ -25,7 +25,7 @@ const CPopover = defineComponent({
     /**
      * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     delay: {
       type: [Number, Object] as PropType<number | { show: number; hide: number }>,
@@ -34,7 +34,7 @@ const CPopover = defineComponent({
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     fallbackPlacements: {
       type: [String, Array] as PropType<Placements | Placements[]>,

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

@@ -1,7 +1,6 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CButton } from '../button'
-import { CInputGroup } from '../form'
 import { CFormControlWrapper } from '../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 
@@ -392,60 +391,72 @@ const CTimePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
-        h('input', {
-          autocomplete: 'off',
-          class: 'form-control',
-          disabled: props.disabled,
-          onInput: (event: Event) => {
-            if (isValidTime((event.target as HTMLInputElement).value)) {
-              date.value = convertTimeToDate((event.target as HTMLInputElement).value)
-            }
-          },
-          placeholder: props.placeholder,
-          readonly: props.inputReadOnly,
-          ref: inputRef,
-          required: props.required,
-          value: date.value
-            ? date.value.toLocaleTimeString(props.locale, {
-                hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
-                ...(!props.seconds && { timeStyle: 'short' }),
-              })
-            : '',
-        }),
-        (props.indicator || props.cleaner) &&
-          h('div', { class: 'input-group-text' }, [
-            props.indicator &&
-              h(
-                'span',
-                {
-                  class: 'picker-input-group-indicator',
-                },
-                slots.indicator
-                  ? slots.indicator()
-                  : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
-              ),
-            props.cleaner &&
-              h(
-                'span',
-                {
-                  class: 'picker-input-group-cleaner',
-                  onClick: (event: Event) => handleClear(event),
-                  role: 'button',
-                },
-                slots.cleaner
-                  ? slots.cleaner()
-                  : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
-              ),
-          ]),
-      ])
+      h(
+        'div',
+        {
+          class: [
+            'input-group',
+            'picker-input-group',
+            {
+              [`input-group-${props.size}`]: props.size,
+            },
+          ],
+        },
+        [
+          h('input', {
+            autocomplete: 'off',
+            class: 'form-control',
+            disabled: props.disabled,
+            onInput: (event: Event) => {
+              if (isValidTime((event.target as HTMLInputElement).value)) {
+                date.value = convertTimeToDate((event.target as HTMLInputElement).value)
+              }
+            },
+            placeholder: props.placeholder,
+            readonly: props.inputReadOnly,
+            ref: inputRef,
+            required: props.required,
+            value: date.value
+              ? date.value.toLocaleTimeString(props.locale, {
+                  hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
+                  ...(!props.seconds && { timeStyle: 'short' }),
+                })
+              : '',
+          }),
+          (props.indicator || props.cleaner) &&
+            h('div', { class: 'input-group-text' }, [
+              props.indicator &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-indicator',
+                  },
+                  slots.indicator
+                    ? slots.indicator()
+                    : h('span', { class: 'picker-input-group-icon time-picker-input-icon' }),
+                ),
+              props.cleaner &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-cleaner',
+                    onClick: (event: Event) => handleClear(event),
+                    role: 'button',
+                  },
+                  slots.cleaner
+                    ? slots.cleaner()
+                    : h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' }),
+                ),
+            ]),
+        ],
+      )
 
     const TimePickerSelect = () => [
       h('span', { class: 'time-picker-inline-icon' }),
       h(
         'select',
         {
-          class: 'time-picker-inline-select',
+          class: 'form-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('hours', (event.target as HTMLSelectElement).value),
@@ -466,7 +477,7 @@ const CTimePicker = defineComponent({
       h(
         'select',
         {
-          class: 'time-picker-inline-select',
+          class: 'form-select',
           disabled: props.disabled,
           onChange: (event: Event) =>
             handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
@@ -488,7 +499,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'time-picker-inline-select',
+            class: 'form-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
@@ -510,7 +521,7 @@ const CTimePicker = defineComponent({
         h(
           'select',
           {
-            class: 'time-picker-inline-select',
+            class: 'form-select',
             disabled: props.disabled,
             onChange: (event: Event) =>
               handleTimeChange('toggle', (event.target as HTMLSelectElement).value),

package/src/components/tooltip/CTooltip.ts

@@ -12,7 +12,7 @@ const CTooltip = defineComponent({
     /**
      * Apply a CSS fade transition to the tooltip.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     animation: {
       type: Boolean,
@@ -25,7 +25,7 @@ const CTooltip = defineComponent({
     /**
      * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     delay: {
       type: [Number, Object] as PropType<number | { show: number; hide: number }>,
@@ -34,7 +34,7 @@ const CTooltip = defineComponent({
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-rc.0
+     * @since 4.9.0
      */
     fallbackPlacements: {
       type: [String, Array] as PropType<Placements | Placements[]>,

package/src/utils/getRTLPlacement.ts

@@ -1,5 +1,5 @@
 import { Placement } from '@popperjs/core'
-import { isRTL } from '../utils'
+import isRTL from './isRTL'
 
 const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
   switch (placement) {