@coreui/vue-pro 4.3.0 → 4.4.0

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.4.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -35,23 +35,23 @@
     "watch": "rollup -c -w"
   },
   "config": {
-    "version_short": "4.2"
+    "version_short": "4.4"
   },
   "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",
+    "@popperjs/core": "^2.11.6",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@vue/test-utils": "^2.0.2",
+    "date-fns": "^2.29.3",
+    "rollup": "^2.79.0",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^4.6.3",
-    "vue": "^3.2.33",
-    "vue-types": "^4.1.1"
+    "typescript": "^4.8.3",
+    "vue": "^3.2.39",
+    "vue-types": "^4.2.1"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.2.0",
+    "@coreui/coreui-pro": "^4.3.4",
     "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.
      */
@@ -218,9 +225,12 @@ const CDatePicker = defineComponent({
       },
     },
   },
-  emit: [
+  emits: [
     /**
      * Callback fired when the date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'date-change',
   ],

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.
      */
@@ -300,9 +308,12 @@ const CDateRangePicker = defineComponent({
       },
     },
   },
-  emit: [
+  emits: [
     /**
      * Callback fired when the end date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'end-date-change',
     /**
@@ -315,6 +326,9 @@ const CDateRangePicker = defineComponent({
     'show',
     /**
      * Callback fired when the start date changed.
+     *
+     * @property {Date} date - date object
+     * @property {string} formatedDate - formated date
      */
     'start-date-change',
   ],
@@ -450,10 +464,12 @@ const CDateRangePicker = defineComponent({
         },
         () => [
           h(CFormInput, {
+            autocomplete: 'off',
             class: {
               hover: inputStartHoverValue.value,
             },
             disabled: props.disabled,
+            ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
             onClick: () => {
               selectEndDate.value = false
             },
@@ -485,10 +501,12 @@ const CDateRangePicker = defineComponent({
             ),
           props.range &&
             h(CFormInput, {
+              autocomplete: 'off',
               class: {
                 hover: inputEndHoverValue.value,
               },
               disabled: props.disabled,
+              ...(props.id && { name: `${props.id}-end-date` }),
               onClick: () => {
                 selectEndDate.value = true
               },
@@ -552,6 +570,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/dropdown/CDropdown.ts

@@ -64,14 +64,14 @@ const CDropdown = defineComponent({
     /**
      * Sets a specified  direction and location of the dropdown menu.
      *
-     * @values 'dropup', 'dropend', 'dropstart'
+     * @values 'center', 'dropup', 'dropup-center', 'dropend', 'dropstart'
      */
     direction: {
       type: String,
       default: undefined,
       required: false,
       validator: (value: string) => {
-        return ['dropup', 'dropend', 'dropstart'].includes(value)
+        return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value)
       },
     },
     /**
@@ -164,15 +164,26 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
+    if (props.direction === 'center') {
+      placement.value = 'bottom'
+    }
+
     if (props.direction === 'dropup') {
       placement.value = 'top-start'
     }
+
+    if (props.direction === 'dropup-center') {
+      placement.value = 'top'
+    }
+
     if (props.direction === 'dropend') {
       placement.value = 'right-start'
     }
+
     if (props.direction === 'dropstart') {
       placement.value = 'left-start'
     }
+
     if (props.alignment === 'end') {
       placement.value = 'bottom-end'
     }
@@ -240,7 +251,11 @@ const CDropdown = defineComponent({
             {
               class: [
                 props.variant === 'nav-item' ? 'nav-item dropdown' : props.variant,
-                props.direction,
+                props.direction === 'center'
+                  ? 'dropdown-center'
+                  : props.direction === 'dropup-center'
+                  ? 'dropup dropup-center'
+                  : props.direction,
               ],
             },
             slots.default && slots.default(),

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/CModal.ts

@@ -145,6 +145,8 @@ const CModal = defineComponent({
     const handleEnter = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
+      document.body.style.overflow = 'hidden'
+      document.body.style.paddingRight = '0px'
       el.style.display = 'block'
       setTimeout(() => {
         el.classList.add('show')
@@ -160,6 +162,8 @@ const CModal = defineComponent({
     const handleLeave = (el: RendererElement, done: () => void) => {
       executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')
+      document.body.style.removeProperty('overflow')
+      document.body.style.removeProperty('padding-right')
       if (document.body.className === '') {
         document.body.removeAttribute('class')
       }

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/CSidebar.ts

@@ -144,6 +144,7 @@ const CSidebar = defineComponent({
 
     const handleHide = () => {
       visible.value = false
+      emit('visible-change', false)
     }
 
     const handleResize = () => {
@@ -198,9 +199,7 @@ const CSidebar = defineComponent({
         h(CBackdrop, {
           class: 'sidebar-backdrop d-none',
           visible: props.visible,
-          onClick: () => {
-            visible.value = false
-          },
+          onClick: () => handleHide(),
         }),
     ]
   },

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/table/CTable.ts

@@ -97,6 +97,15 @@ const CTable = defineComponent({
       type: Boolean,
       required: false,
     },
+    /**
+     * Add zebra-striping to any table column.
+     *
+     * @since 4.4.0
+     */
+    stripedColumns: {
+      type: Boolean,
+      required: false,
+    },
   },
   setup(props, { slots, attrs }) {
     const table = () =>
@@ -115,6 +124,7 @@ const CTable = defineComponent({
               'table-hover': props.hover,
               'table-sm': props.small,
               'table-striped': props.striped,
+              'table-striped-columns': props.stripedColumns,
             },
             attrs.class,
           ],

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

@@ -238,6 +238,7 @@ const CTimePicker = defineComponent({
     const InputGroup = () =>
       h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
         h(CFormInput, {
+          autocomplete: 'off',
           disabled: props.disabled,
           onInput: (event) => {
             if (isValidTime(event.target.value)) {

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()
   },