@coreui/vue-pro 4.3.0 → 4.3.1

package/dist/utils/calendar.d.ts

@@ -3,7 +3,7 @@ export declare const convertToLocalTime: (d: Date, locale: string, options?: {})
 export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
 export declare const getCurrentYear: () => number;
 export declare const getCurrentMonth: () => number;
-export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean | undefined) => Date | undefined;
+export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean) => Date | undefined;
 export declare const getMonthName: (month: number, locale: string) => string;
 export declare const getMonthsNames: (locale: string) => string[];
 export declare const getYears: (year: number) => number[];
@@ -11,8 +11,8 @@ export declare const getMonthDetails: (year: number, month: number, firstDayOfWe
     date: Date;
     month: string;
 }[][];
-export declare const isDisableDateInRange: (startDate?: Date | null | undefined, endDate?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean;
-export declare const isDateDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
+export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][]) => boolean;
+export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][]) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -39,19 +39,19 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
-    "@rollup/plugin-commonjs": "^21.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.1",
-    "@rollup/plugin-typescript": "^8.3.2",
-    "@vue/test-utils": "^2.0.0-rc.20",
-    "date-fns": "^2.28.0",
-    "rollup": "^2.70.2",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@vue/test-utils": "^2.0.2",
+    "date-fns": "^2.29.1",
+    "rollup": "^2.77.2",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.6.3",
-    "vue": "^3.2.33",
-    "vue-types": "^4.1.1"
+    "typescript": "^4.7.4",
+    "vue": "^3.2.37",
+    "vue-types": "^4.2.0"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.2.0",
+    "@coreui/coreui-pro": "^4.3.2",
     "vue": "^3.2.21"
   },
   "standard": {

package/src/components/accordion/index.ts

@@ -2,7 +2,6 @@ import { App } from 'vue'
 import { CAccordion } from './CAccordion'
 import { CAccordionBody } from './CAccordionBody'
 import { CAccordionButton } from './CAccordionButton'
-import { CAccordionCollapse } from './CAccordionCollapse'
 import { CAccordionHeader } from './CAccordionHeader'
 import { CAccordionItem } from './CAccordionItem'
 
@@ -11,7 +10,6 @@ const CAccordionPlugin = {
     app.component(CAccordion.name, CAccordion)
     app.component(CAccordionBody.name, CAccordionBody)
     app.component(CAccordionButton.name, CAccordionButton)
-    app.component(CAccordionCollapse.name, CAccordionCollapse)
     app.component(CAccordionHeader.name, CAccordionHeader)
     app.component(CAccordionItem.name, CAccordionItem)
   },
@@ -22,7 +20,6 @@ export {
   CAccordion,
   CAccordionBody,
   CAccordionButton,
-  CAccordionCollapse,
   CAccordionHeader,
   CAccordionItem,
 }

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

@@ -34,6 +34,7 @@ export const CCloseButton = defineComponent({
     }
     return () =>
       h('button', {
+        type: 'button',
         class: [
           'btn',
           'btn-close',

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCloseButton component renders correctly 1`] = `"<button class=\\"btn btn-close btn-close-white\\" aria-label=\\"Close\\" disabled=\\"\\"></button>"`;
+exports[`Customize CCloseButton component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close btn-close-white\\" aria-label=\\"Close\\" disabled=\\"\\"></button>"`;
 
-exports[`Loads and display CCloseButton component renders correctly 1`] = `"<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;
+exports[`Loads and display CCloseButton component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;

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

@@ -139,6 +139,13 @@ const CDatePicker = defineComponent({
      * Toggle visibility of footer element or set the content of footer.
      */
     footer: Boolean,
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     *
+     * The name attribute for the input element is generated based on the `id` property:
+     * - {id}-date
+     */
+    id: String,
     /**
      * Toggle visibility or set the content of the input indicator.
      */

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

@@ -154,6 +154,14 @@ const CDateRangePicker = defineComponent({
      * Toggle visibility of footer element or set the content of footer.
      */
     footer: Boolean,
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     *
+     * The name attributes for input elements are generated based on the `id` property:
+     * - {id}-start-date
+     * - {id}-end-date
+     */
+    id: String,
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -454,6 +462,7 @@ const CDateRangePicker = defineComponent({
               hover: inputStartHoverValue.value,
             },
             disabled: props.disabled,
+            name: props.range ? `${props.id}-start-date` : `${props.id}-date`,
             onClick: () => {
               selectEndDate.value = false
             },
@@ -489,6 +498,7 @@ const CDateRangePicker = defineComponent({
                 hover: inputEndHoverValue.value,
               },
               disabled: props.disabled,
+              name: `${props.id}-end-date`,
               onClick: () => {
                 selectEndDate.value = true
               },
@@ -552,6 +562,7 @@ const CDateRangePicker = defineComponent({
           confirmButtonVariant: props.confirmButtonVariant,
           disabled: props.disabled,
           footer: props.footer || props.timepicker,
+          id: props.id,
           onCancel: () => {
             startDate.value = initialStartDate.value
             endDate.value = initialEndDate.value

package/src/components/form/CFormCheck.ts

@@ -132,16 +132,14 @@ const CFormCheck = defineComponent({
       attrs.class,
     ]
 
-    const inputClassName = props.button
-      ? 'btn-check'
-      : [
-          'form-check-input',
-          {
-            'is-invalid': props.invalid,
-            'is-valid': props.valid,
-            'me-2': props.hitArea,
-          },
-        ]
+    const inputClassName = [
+      props.button ? 'btn-check' : 'form-check-input',
+      {
+        'is-invalid': props.invalid,
+        'is-valid': props.valid,
+        'me-2': props.hitArea,
+      },
+    ]
 
     const formControl = () => {
       return h('input', {

package/src/components/form/CFormControlWrapper.ts

@@ -43,7 +43,7 @@ const CFormControlWrapper = defineComponent({
   setup(props, { slots }) {
     return () =>
       props.floatingLabel
-        ? h(CFormFloating, [
+        ? h(CFormFloating, () => [
             slots.default && slots.default(),
             h(
               CFormLabel,

package/src/components/form/CFormInput.ts

@@ -67,7 +67,7 @@ const CFormInput = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: String,
+      type: [File, Number, String],
       default: undefined,
     },
     /**
@@ -171,6 +171,7 @@ const CFormInput = defineComponent({
             h(
               'input',
               {
+                id: props.id,
                 ...attrs,
                 class: [
                   props.plainText ? 'form-control-plaintext' : 'form-control',

package/src/components/form/CFormSelect.ts

@@ -165,6 +165,7 @@ const CFormSelect = defineComponent({
             h(
               'select',
               {
+                id: props.id,
                 ...attrs,
                 class: [
                   'form-select',

package/src/components/form/CFormTextarea.ts

@@ -113,6 +113,12 @@ const CFormTextarea = defineComponent({
     'update:modelValue',
   ],
   setup(props, { attrs, emit, slots }) {
+    const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
+      emit('change', event)
+      emit('update:modelValue', target.value)
+    }
+
     const handleInput = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       emit('input', event)
@@ -140,6 +146,7 @@ const CFormTextarea = defineComponent({
             h(
               'textarea',
               {
+                id: props.id,
                 ...attrs,
                 disabled: props.disabled,
                 readonly: props.readonly,
@@ -150,6 +157,7 @@ const CFormTextarea = defineComponent({
                     'is-valid': props.valid,
                   },
                 ],
+                onChange: (event: InputEvent) => handleChange(event),
                 onInput: (event: InputEvent) => handleInput(event),
                 ...(props.modelValue && { value: props.modelValue }),
               },

package/src/components/form/__tests__/CFormInput.spec.ts

@@ -49,7 +49,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-control')).toBe(true)
+    expect(defaultWrapper.find('input').classes('form-control')).toBe(true)
   })
 })
 
@@ -59,11 +59,11 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-control-plaintext')).toBe(true)
-    expect(customWrapper.classes('form-control-color')).toBe(true)
-    expect(customWrapper.classes('form-control-lg')).toBe(true)
-    expect(customWrapper.classes('is-invalid')).toBe(true)
-    expect(customWrapper.classes('is-valid')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-plaintext')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-color')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-lg')).toBe(true)
+    expect(customWrapper.find('input').classes('is-invalid')).toBe(true)
+    expect(customWrapper.find('input').classes('is-valid')).toBe(true)
   })
 })
 
@@ -73,10 +73,10 @@ describe(`Customize (two) ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapperTwo.text()).toContain('Default slot')
-    expect(customWrapperTwo.classes('form-control')).toBe(true)
-    expect(customWrapper.classes('form-control-color')).toBe(true)
-    expect(customWrapper.classes('form-control-lg')).toBe(true)
-    expect(customWrapper.classes('is-invalid')).toBe(true)
-    expect(customWrapper.classes('is-valid')).toBe(true)
+    expect(customWrapperTwo.find('input').classes('form-control')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-color')).toBe(true)
+    expect(customWrapper.find('input').classes('form-control-lg')).toBe(true)
+    expect(customWrapper.find('input').classes('is-invalid')).toBe(true)
+    expect(customWrapper.find('input').classes('is-valid')).toBe(true)
   })
 })

package/src/components/form/__tests__/CFormRange.spec.ts

@@ -33,8 +33,8 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-range')).toBe(true)
-    expect(defaultWrapper.attributes('type')).toBe('range')
+    expect(defaultWrapper.find('input').classes('form-range')).toBe(true)
+    expect(defaultWrapper.find('input').attributes('type')).toBe('range')
   })
 })
 
@@ -44,12 +44,12 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-range')).toBe(true)
-    expect(customWrapper.attributes('type')).toBe('range')
-    expect(customWrapper.attributes('disabled')).toBe('')
-    expect(customWrapper.attributes('max')).toBe('400')
-    expect(customWrapper.attributes('min')).toBe('50')
-    expect(customWrapper.attributes('readonly')).toBe('')
-    expect(customWrapper.attributes('steps')).toBe('10')
+    expect(customWrapper.find('input').classes('form-range')).toBe(true)
+    expect(customWrapper.find('input').attributes('type')).toBe('range')
+    expect(customWrapper.find('input').attributes('disabled')).toBe('')
+    expect(customWrapper.find('input').attributes('max')).toBe('400')
+    expect(customWrapper.find('input').attributes('min')).toBe('50')
+    expect(customWrapper.find('input').attributes('readonly')).toBe('')
+    expect(customWrapper.find('input').attributes('steps')).toBe('10')
   })
 })

package/src/components/form/__tests__/CFormSelect.spec.ts

@@ -31,7 +31,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-select')).toBe(true)
+    expect(defaultWrapper.find('select').classes('form-select')).toBe(true)
   })
 })
 
@@ -41,8 +41,8 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-select')).toBe(true)
-    expect(customWrapper.classes('form-select-lg')).toBe(true)
-    expect(customWrapper.attributes('size')).toBe('200')
+    expect(customWrapper.find('select').classes('form-select')).toBe(true)
+    expect(customWrapper.find('select').classes('form-select-lg')).toBe(true)
+    expect(customWrapper.find('select').attributes('size')).toBe('200')
   })
 })

package/src/components/form/__tests__/CFormTextarea.spec.ts

@@ -32,7 +32,7 @@ describe(`Loads and display ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(defaultWrapper.text()).toContain('Default slot')
-    expect(defaultWrapper.classes('form-control')).toBe(true)
+    expect(defaultWrapper.find('textarea').classes('form-control')).toBe(true)
   })
 })
 
@@ -42,8 +42,8 @@ describe(`Customize ${ComponentName} component`, () => {
   })
   it('contain slots and classes', () => {
     expect(customWrapper.text()).toContain('Default slot')
-    expect(customWrapper.classes('form-control-plaintext')).toBe(true)
-    expect(customWrapper.classes('is-invalid')).toBe(true)
-    expect(customWrapper.classes('is-valid')).toBe(true)
+    expect(customWrapper.find('textarea').classes('form-control-plaintext')).toBe(true)
+    expect(customWrapper.find('textarea').classes('is-invalid')).toBe(true)
+    expect(customWrapper.find('textarea').classes('is-valid')).toBe(true)
   })
 })

package/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap

@@ -1,7 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize with label - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" for=\\"uniqueid\\">some label</label>"`;
+exports[`Customize with label - CFormCheck component renders correctly 1`] = `
+"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\">
+<label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" disabled=\\"false\\" for=\\"uniqueid\\">some label</label>"
+`;
 
-exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\"><label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" for=\\"uniqueid\\">some label</label>"`;
+exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `
+"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\">
+<label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" disabled=\\"false\\" for=\\"uniqueid\\">some label</label>"
+`;
 
 exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class=\\"form-check-input\\" type=\\"checkbox\\">"`;

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" disabled=\\"\\" max=\\"400\\" min=\\"50\\" steps=\\"10\\" readonly=\\"\\" type=\\"range\\">"`;
+exports[`Customize CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" disabled=\\"\\" max=\\"400\\" min=\\"50\\" readonly=\\"\\" steps=\\"10\\" type=\\"range\\">"`;
 
 exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" type=\\"range\\">"`;

package/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap

@@ -7,8 +7,7 @@ exports[`Customize CModal component renders correctly 1`] = `
       <div class=\\"modal-content bazinga\\">Default slot</div>
     </div>
   </div>
-</transition-stub>
-<!---->"
+</transition-stub>"
 `;
 
 exports[`Loads and display CModal component renders correctly 1`] = `

package/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CModalHeader component renders correctly 1`] = `"<span class=\\"modal-header\\">Default slot<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></span>"`;
+exports[`Customize CModalHeader component renders correctly 1`] = `"<span class=\\"modal-header\\">Default slot<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></span>"`;
 
-exports[`Loads and display CModalHeader component renders correctly 1`] = `"<span class=\\"modal-header\\">Default slot<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></span>"`;
+exports[`Loads and display CModalHeader component renders correctly 1`] = `"<span class=\\"modal-header\\">Default slot<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></span>"`;

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>
-<!---->"
-`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class=\\"sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable\\">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `
-"<div class=\\"sidebar hide\\">Default slot</div>
-<!---->"
-`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class=\\"sidebar hide\\">Default slot</div>"`;

package/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap

@@ -2,4 +2,4 @@
 
 exports[`Customize CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-undefined\\" type=\\"button\\">Default slot</button>"`;
 
-exports[`Loads and display CToastClose component renders correctly 1`] = `"<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;
+exports[`Loads and display CToastClose component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;

package/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToastHeader component renders correctly 1`] = `"<div class=\\"toast-header\\">Default slot<button class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></div>"`;
+exports[`Customize CToastHeader component renders correctly 1`] = `"<div class=\\"toast-header\\">Default slot<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button></div>"`;
 
 exports[`Loads and display CToastHeader component renders correctly 1`] = `
 "<div class=\\"toast-header\\">Default slot

package/src/directives/v-c-popover.ts

@@ -96,7 +96,7 @@ export default {
       })
     }
   },
-  unmounted(binding: DirectiveBinding): void {
+  unmounted(_el: HTMLElement, binding: DirectiveBinding): void {
     const popover = binding.arg && document.getElementById(binding.arg)
     popover && popover.remove()
   },

package/src/directives/v-c-tooltip.ts

@@ -92,7 +92,7 @@ export default {
       })
     }
   },
-  beforeUnmount(binding: DirectiveBinding): void {
+  beforeUnmount(_el: HTMLElement, binding: DirectiveBinding): void {
     const tooltip = binding.arg && document.getElementById(binding.arg)
     tooltip && tooltip.remove()
   },