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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.9.0-rc.0",
+  "version": "5.0.0-alpha.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -38,24 +38,24 @@
   },
   "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.0",
+    "jest-environment-jsdom": "^29.6.0",
+    "rollup": "^3.26.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^4.9.5",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
     "vue": "^3.3.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "^5.1.0"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.5.0",
+    "@coreui/coreui-pro": "^5.0.0-alpha.0",
     "vue": "^3.2.21"
   },
   "standard": {

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,24 @@ const CDateRangePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
-        h('input', {
-          autocomplete: 'off',
-          class: [
-            'form-control date-picker-input',
-            {
-              hover: inputStartHoverValue.value,
-            },
-          ],
-          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(
+        'div',
+        {
+          class: 'date-picker-input-group',
+        },
+        [
           h('input', {
             autocomplete: 'off',
             class: [
-              'form-control date-picker-input',
+              '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 +671,62 @@ 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',
+          props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
+          props.range &&
+            h('input', {
+              autocomplete: 'off',
+              class: [
+                'date-picker-input',
                 {
-                  class: 'picker-input-group-indicator',
+                  hover: inputEndHoverValue.value,
                 },
-                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' }),
-              ),
-          ]),
-      ])
+              ],
+              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 && h('div', { class: 'date-picker-indicator' }),
+          props.cleaner &&
+            (startDate.value || endDate.value) &&
+            h('div', {
+              class: 'date-picker-cleaner',
+              onClick: (event: Event) => handleClear(event),
+            }),
+        ],
+      )
 
     return () =>
       h(
@@ -770,6 +751,7 @@ const CDateRangePicker = defineComponent({
                 class: [
                   'date-picker',
                   {
+                    [`date-picker-${props.size}`]: props.size,
                     disabled: props.disabled,
                     'is-invalid': isValid.value === false ? true : false,
                     'is-valid': isValid.value,
@@ -800,7 +782,7 @@ const CDateRangePicker = defineComponent({
               {
                 toggler: () => InputGroup(),
                 footer: () =>
-                  h('div', { class: 'picker-footer' }, [
+                  h('div', { class: 'date-picker-footer' }, [
                     props.todayButton &&
                       h(
                         CButton,

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.9.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.9.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,

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,
     /**
@@ -535,18 +535,13 @@ const CMultiSelect = defineComponent({
               'div',
               {
                 class: [
-                  'dropdown',
-                  'picker',
                   'form-multi-select',
                   {
-                    'form-multi-select-with-cleaner': props.cleaner,
                     disabled: props.disabled,
                     [`form-multi-select-${props.size}`]: props.size,
-                    'form-multi-select-selection-tags':
-                      props.multiple && props.selectionType === 'tags',
-                    show: visible.value,
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
+                    show: visible.value,
                   },
                 ],
                 'aria-expanded': visible.value,
@@ -566,64 +561,78 @@ const CMultiSelect = defineComponent({
                     },
                     {
                       default: () => [
-                        h(CMultiSelectSelection, {
-                          multiple: props.multiple,
-                          placeholder: props.placeholder,
-                          onRemove: (option: Option) =>
-                            !props.disabled && handleOptionClick(option),
-                          search: props.search,
-                          selected: selected.value,
-                          selectionType: props.selectionType,
-                          selectionTypeCounterText: props.selectionTypeCounterText,
-                        }),
-                        props.multiple &&
-                          props.cleaner &&
-                          selected.value.length > 0 &&
-                          !props.disabled &&
-                          h('button', {
-                            type: 'button',
-                            class: 'form-multi-select-selection-cleaner',
-                            onClick: () => handleDeselectAll(),
-                          }),
-                        props.search &&
-                          h('input', {
-                            type: 'text',
-                            class: 'form-multi-select-search',
-                            disabled: props.disabled,
-                            autocomplete: 'off',
-                            onInput: (event: InputEvent) => handleSearchChange(event),
-                            onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
-                            ...(selected.value.length === 0 && {
-                              placeholder: props.placeholder,
-                            }),
-                            ...(selected.value.length > 0 &&
-                              props.selectionType === 'counter' && {
-                                placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                        h(
+                          CMultiSelectSelection,
+                          {
+                            multiple: props.multiple,
+                            placeholder: props.placeholder,
+                            onRemove: (option: Option) =>
+                              !props.disabled && handleOptionClick(option),
+                            search: props.search,
+                            selected: selected.value,
+                            selectionType: props.selectionType,
+                            selectionTypeCounterText: props.selectionTypeCounterText,
+                          },
+                          {
+                            default: () =>
+                              props.search &&
+                              h('input', {
+                                type: 'text',
+                                class: 'form-multi-select-search',
+                                disabled: props.disabled,
+                                autocomplete: 'off',
+                                onInput: (event: InputEvent) => handleSearchChange(event),
+                                onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
+                                ...(selected.value.length === 0 && {
+                                  placeholder: props.placeholder,
+                                }),
+                                ...(selected.value.length > 0 &&
+                                  props.selectionType === 'counter' && {
+                                    placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                                  }),
+                                ...(selected.value.length > 0 &&
+                                  !props.multiple && {
+                                    placeholder: selected.value.map((option) => option.text)[0],
+                                  }),
+
+                                ...(props.multiple &&
+                                  selected.value.length > 0 &&
+                                  props.selectionType !== 'counter' && {
+                                    size: searchValue.value.length + 2,
+                                  }),
+                                ref: searchRef,
                               }),
-                            ...(selected.value.length > 0 &&
-                              !props.multiple && {
-                                placeholder: selected.value.map((option) => option.text)[0],
+                          },
+                        ),
+                        h(
+                          'div',
+                          { class: 'form-multi-select-buttons' },
+                          {
+                            default: () => [
+                              h('button', {
+                                class: 'form-multi-select-cleaner',
+                                onClick: () => handleDeselectAll(),
+                                type: 'button',
                               }),
-
-                            ...(props.multiple &&
-                              selected.value.length > 0 &&
-                              props.selectionType !== 'counter' && {
-                                size: searchValue.value.length + 2,
+                              h('button', {
+                                class: 'form-multi-select-indicator',
+                                onClick: (event: Event) => {
+                                  event.preventDefault()
+                                  event.stopPropagation()
+                                  visible.value = !visible.value
+                                },
+                                type: 'button',
                               }),
-                            ref: searchRef,
-                          }),
+                            ],
+                          },
+                        ),
                       ],
                     },
                   ),
                   h(
                     'div',
                     {
-                      class: [
-                        'dropdown-menu',
-                        {
-                          show: visible.value,
-                        },
-                      ],
+                      class: 'form-multi-select-dropdown',
                       role: 'menu',
                       ref: dropdownRef,
                     },

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

@@ -36,7 +36,12 @@ const CMultiSelectSelection = defineComponent({
       h(
         'div',
         {
-          class: 'form-multi-select-selection',
+          class: [
+            'form-multi-select-selection',
+            {
+              'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+            },
+          ],
         },
         [
           props.multiple &&
@@ -56,15 +61,11 @@ const CMultiSelectSelection = defineComponent({
                 return h('span', { class: 'form-multi-select-tag' }, [
                   option.text,
                   !option.disabled &&
-                    h(
-                      'button',
-                      {
-                        class: 'form-multi-select-tag-delete close',
-                        ariaLabel: 'Close',
-                        onClick: () => handleRemove(option),
-                      },
-                      h('span', { ariaHidden: 'true' }, 'x'),
-                    ),
+                    h('button', {
+                      class: 'form-multi-select-tag-delete',
+                      ariaLabel: 'Close',
+                      onClick: () => handleRemove(option),
+                    }),
                 ])
               }
               return

package/src/components/picker/CPicker.ts

@@ -130,8 +130,6 @@ const CPicker = defineComponent({
             'div',
             {
               class: [
-                'dropdown',
-                'picker',
                 attrs.class,
                 {
                   show: visible.value,
@@ -156,26 +154,13 @@ const CPicker = defineComponent({
                     },
                   }),
                 ),
-              h(
-                'div',
-                {
-                  class: [
-                    'dropdown-menu',
-                    {
-                      show: visible.value,
-                    },
-                    props.dropdownClassNames,
-                  ],
-                  ref: dropdownRef,
-                },
-                [
-                  slots.default && slots.default(),
-                  /**
-                   * @slot Location for the footer element.
-                   */
-                  slots.footer && slots.footer(),
-                ],
-              ),
+              h('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
+                slots.default && slots.default(),
+                /**
+                 * @slot Location for the footer element.
+                 */
+                slots.footer && slots.footer(),
+              ]),
             ],
           )
       }

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[]>,