@coreui/vue-pro 4.3.0-beta.0 → 4.3.1

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

@@ -12,8 +12,11 @@ import {
 
 import { CBackdrop } from './../backdrop/CBackdrop'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CModal = defineComponent({
   name: 'CModal',
+  inheritAttrs: false,
   props: {
     /**
      * Align the modal in the center or top of the screen.
@@ -140,9 +143,7 @@ const CModal = defineComponent({
     )
 
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.add('modal-open')
       el.style.display = 'block'
       setTimeout(() => {
@@ -150,17 +151,22 @@ const CModal = defineComponent({
       }, 1)
       emit('show')
     }
+
     const handleAfterEnter = () => {
       window.addEventListener('mousedown', handleMouseDown)
       window.addEventListener('keyup', handleKeyUp)
     }
+
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       document.body.classList.remove('modal-open')
+      if (document.body.className === '') {
+        document.body.removeAttribute('class')
+      }
+
       el.classList.remove('show')
     }
+
     const handleAfterLeave = (el: RendererElement) => {
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
@@ -177,6 +183,7 @@ const CModal = defineComponent({
         if (props.backdrop !== 'static' && event.key === 'Escape' && props.keyboard) {
           handleDismiss()
         }
+
         if (props.backdrop === 'static') {
           modalRef.value.classList.add('modal-static')
           emit('close-prevented')
@@ -196,6 +203,7 @@ const CModal = defineComponent({
         if (props.backdrop !== 'static') {
           handleDismiss()
         }
+
         if (props.backdrop === 'static') {
           modalRef.value.classList.add('modal-static')
           setTimeout(() => {

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/nav/CNavGroup.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, onMounted, ref, RendererElement, Transition, watch } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CNavGroup = defineComponent({
   name: 'CNavGroup',
   props: {
@@ -62,9 +64,7 @@ const CNavGroup = defineComponent({
     }
 
     const handleEnter = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       el.style.height = `${el.scrollHeight}px`
     }
 
@@ -77,9 +77,7 @@ const CNavGroup = defineComponent({
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.height = '0px'
       }, 1)

package/src/components/offcanvas/COffcanvas.ts

@@ -1,6 +1,9 @@
 import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
+
 import { CBackdrop } from '../backdrop'
+
 import { vVisible } from '../../directives/v-c-visible'
+import { executeAfterTransition } from './../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -88,9 +91,7 @@ const COffcanvas = defineComponent({
 
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       setTimeout(() => {
         el.style.visibility = 'visible'
         el.classList.add('show')
@@ -98,13 +99,10 @@ const COffcanvas = defineComponent({
     }
     const handleAfterEnter = () => {
       window.addEventListener('mousedown', handleMouseDown)
-      // window.addEventListener('click', handleClickOutside)
       window.addEventListener('keyup', handleKeyUp)
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
       window.removeEventListener('mousedown', handleMouseDown)
       window.removeEventListener('keyup', handleKeyUp)
       el.classList.remove('show')

package/src/components/pagination/CSmartPagination.ts

@@ -225,7 +225,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(1)
+                    activePage.value !== 1 && setPage(1)
                   },
                   'aria-label': 'Go to first page',
                   ...(activePage.value === 1 && {
@@ -247,7 +247,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value - 1)
+                    activePage.value !== 1 && setPage(activePage.value - 1)
                   },
                   'aria-label': 'Go to previous page',
                   ...(activePage.value === 1 && {
@@ -304,7 +304,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(activePage.value + 1)
+                    activePage.value !== pages.value && setPage(activePage.value + 1)
                   },
                   'aria-label': 'Go to next page',
                   ...(activePage.value === pages.value && {
@@ -326,7 +326,7 @@ const CSmartPagination = defineComponent({
                 CPaginationItem,
                 {
                   onClick: () => {
-                    setPage(pages.value)
+                    activePage.value !== pages.value && setPage(pages.value)
                   },
                   'aria-label': 'Go to last page',
                   ...(activePage.value === pages.value && {

package/src/components/picker/CPicker.ts

@@ -143,6 +143,7 @@ const CPicker = defineComponent({
 
     const Footer = () =>
       h('div', { class: 'picker-footer' }, [
+        slots.footer && slots.footer(),
         props.cancelButton &&
           h(
             CButton,

package/src/components/popover/CPopover.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CPopover = defineComponent({
   name: 'CPopover',
   props: {
@@ -83,18 +85,16 @@ const CPopover = defineComponent({
       emit('show')
       initPopper()
       el.classList.add('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
+      executeAfterTransition(() => {
         done()
         destroyPopper()
-      })
+      }, el as HTMLElement)
     }
 
     const handleToggle = (event: Event) => {

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

@@ -31,8 +31,6 @@ const CSmartTable = defineComponent({
   props: {
     /**
      * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
-     *
-     * @default 1
      */
     activePage: {
       type: Number,
@@ -41,7 +39,7 @@ const CSmartTable = defineComponent({
     },
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
-     * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
+     * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleanerIcon` slot.
      *
      */
     cleaner: {
@@ -50,8 +48,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Style table items as clickable.
-     *
-     * @type boolean
      */
     clickableRows: {
       type: Boolean,
@@ -62,8 +58,6 @@ const CSmartTable = defineComponent({
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
-     *
-     * @type boolean | ColumnFilter
      */
     columnFilter: {
       type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
@@ -72,7 +66,6 @@ const CSmartTable = defineComponent({
     /**
      * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
      * { user: 'John', age: 12 }
-     * You can track state of this prop by setting .sync modifier.
      */
     columnFilterValue: {
       type: Object as PropType<ColumnFilterValue>,
@@ -80,17 +73,17 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_classes')
+     * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
      *
      * In columns prop each array item represents one column. Item might be specified in two ways:
      * String: each item define column name equal to item value.
      * Object: item is object with following keys available as column configuration:
      * - key (required)(String) - define column name equal to item key.
+     * - filter (Boolean) - removes filter from column when set to false.
      * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
-     * - _classes (String/Array/Object) - adds classes to all cels in column
-     * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      * - sorter (Boolean) - disables sorting of the column when set to false
-     * - filter (Boolean) - removes filter from column when set to false.
+     * - [_props](https://coreui.io/vue/docs/components/table.html#ctableheadercell) (String/Array/Object) - add props to `CTableHeaderCell`.
+     * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
      */
     columns: {
       type: Array as PropType<Column[] | string[]>,
@@ -102,8 +95,6 @@ const CSmartTable = defineComponent({
      * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
      * - external (Boolean) - Disables automatic sorting inside component.
      * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
-     *
-     * @type boolean | Sorter
      */
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
@@ -119,8 +110,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Set to false to remove table header.
-     *
-     * @default true
      */
     header: {
       type: Boolean,
@@ -128,7 +117,11 @@ const CSmartTable = defineComponent({
       default: true,
     },
     /**
-     * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_classes' key and to single cell by '_cellClasses'.
+     * Array of objects, where each object represents one item - row in table. Additionally, you can customize each row by passing them by [_props](http://coreui.io/vue/docs/components/table.html#ctablerow) key and single cell by [_cellProps](http://coreui.io/vue/docs/components/table.html#ctabledatacell).
+     *
+     * Examples:
+     * - `_props: { color: 'primary', align: 'middle'}`
+     * - `_cellProps: { all: { class: 'fw-semibold'}, 'name': { color: 'info' }}`
      */
     items: {
       type: Array as PropType<Item[]>,
@@ -137,8 +130,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Number of items per site, when pagination is enabled.
-     *
-     * @default 10
      */
     itemsPerPage: {
       type: Number,
@@ -146,8 +137,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Label for items per page selector.
-     *
-     * @default 'Items per page:'
      */
     itemsPerPageLabel: {
       type: String,
@@ -156,8 +145,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Items per page selector options.
-     *
-     * @default [5, 10, 20, 50]
      */
     itemsPerPageOptions: {
       type: Array as PropType<number[]>,
@@ -184,7 +171,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * ReactNode or string for passing custom noItemsLabel texts.
-     * @default 'No items found'
      */
     noItemsLabel: {
       type: String,
@@ -199,9 +185,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CSmartPagination` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/smart-pagination#csmartpagination
+     * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
      */
     paginationProps: {
       type: Object,
@@ -213,10 +197,8 @@ const CSmartTable = defineComponent({
      */
     selectable: Boolean,
     /**
-     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. Set .sync modifier to track changes. eg.:
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
      * { column: 'status', state: 'asc' }
-     *
-     * @type SorterValue
      */
     sorterValue: {
       type: Object as PropType<SorterValue>,
@@ -224,9 +206,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableBody` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablebody
+     * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
      */
     tableBodyProps: {
       type: Object,
@@ -234,9 +214,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableFoot` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablefoot
+     * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
      */
     tableFootProps: {
       type: Object,
@@ -247,8 +225,6 @@ const CSmartTable = defineComponent({
      * When set, displays table filter above table, allowing filtering by specific column.
      *
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - placeholder (String) - Sets custom table filter placeholder.
-     * - label (String) - Sets custom table filter label.
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
      */
@@ -266,8 +242,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Specifies a short hint that is visible in the search input.
-     *
-     * @default 'type string...'
      */
     tableFilterPlaceholder: {
       type: String,
@@ -275,9 +249,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Value of table filter. Set .sync modifier to track changes.
-     *
-     * @default 'Filter:'
+     * Value of table filter.
      */
     tableFilterValue: {
       type: String,
@@ -285,9 +257,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTableHead` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctablehead
+     * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
      */
     tableHeadProps: {
       type: Object,
@@ -295,9 +265,7 @@ const CSmartTable = defineComponent({
       required: false,
     },
     /**
-     * Properties to `CTable` component.
-     *
-     * @link https://coreui.io/vue/docs/4.0/components/table/#ctable
+     * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
      */
     tableProps: {
       type: Object,

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

@@ -4,10 +4,10 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable @typescript-eslint/ban-types */
 export interface Column {
-  sorter?: boolean
+  filter?: boolean
   key: string
   label?: string
-  filter?: boolean
+  sorter?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _style?: any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -53,9 +53,11 @@ export interface SorterValue {
 }
 
 export interface TableFilter {
-  lazy?: boolean
   external?: boolean
+  lazy?: boolean
+  // TODO: depracated, remove in v5
   label?: string
+  // TODO: depracated, remove in v5
   placeholder?: string
 }
 

package/src/components/tabs/CTabPane.ts

@@ -1,5 +1,7 @@
 import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue'
 
+import { executeAfterTransition } from './../../utils/transition'
+
 const CTabPane = defineComponent({
   name: 'CTabPane',
   props: {
@@ -30,20 +32,16 @@ const CTabPane = defineComponent({
       firstRender.value = false
       emit('show')
       setTimeout(() => {
+        executeAfterTransition(() => done(), el as HTMLElement)
         el.classList.add('show')
       }, 1)
-      el.addEventListener('transitionend', () => {
-        done()
-      })
     }
 
     const handleLeave = (el: RendererElement, done: () => void) => {
       firstRender.value = false
       emit('hide')
       el.classList.remove('show')
-      el.addEventListener('transitionend', () => {
-        done()
-      })
+      executeAfterTransition(() => done(), el as HTMLElement)
     }
 
     return () =>

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

@@ -9,7 +9,8 @@ import {
   convertTimeToDate,
   getAmPm,
   getListOfHours,
-  getMinutesOrSeconds,
+  getListOfMinutes,
+  getListOfSeconds,
   getSelectedHour,
   getSelectedMinutes,
   getSelectedSeconds,
@@ -288,27 +289,21 @@ const CTimePicker = defineComponent({
         ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
       }),
       ':',
+      // @ts-expect-error the getListOfMinutes function returns corect type
       h(CFormSelect, {
         disabled: props.disabled,
-        options: Array.from({ length: 60 }, (_, i) => {
-          return {
-            value: i.toString(),
-            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
-          }
-        }),
-        onChange: (event) => handleTimeChange('minutes', event.target.value),
+        options: getListOfMinutes(props.locale, true),
+        onChange: (event: Event) =>
+          handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
         ...(date.value && { value: getSelectedMinutes(date.value) }),
       }),
       ':',
+      // @ts-expect-error the getListOfMinutes function returns corect type
       h(CFormSelect, {
         disabled: props.disabled,
-        options: Array.from({ length: 60 }, (_, i) => {
-          return {
-            value: i.toString(),
-            label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
-          }
-        }),
-        onChange: (event) => handleTimeChange('seconds', event.target.value),
+        options: getListOfSeconds(props.locale, true),
+        onChange: (event: Event) =>
+          handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
         ...(date.value && { value: getSelectedSeconds(date.value) }),
       }),
       isAmPm(props.locale) &&
@@ -330,12 +325,12 @@ const CTimePicker = defineComponent({
         selected: getSelectedHour(date.value, props.locale),
       }),
       h(CTimePickerRollCol, {
-        elements: getMinutesOrSeconds(props.locale),
+        elements: getListOfMinutes(props.locale),
         onClick: (index: number) => handleTimeChange('minutes', index.toString()),
         selected: getSelectedMinutes(date.value),
       }),
       h(CTimePickerRollCol, {
-        elements: getMinutesOrSeconds(props.locale),
+        elements: getListOfSeconds(props.locale),
         onClick: (index: number) => handleTimeChange('seconds', index.toString()),
         selected: getSelectedSeconds(date.value),
       }),