@coreui/vue-pro 4.6.0 → 4.7.0-alpha.0

package/src/components/sidebar/CSidebar.ts

@@ -1,19 +1,11 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { CBackdrop } from '../backdrop'
 
+import { isVisible } from './../../utils'
+
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
 
-const isVisible = (element: HTMLDivElement) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
 const CSidebar = defineComponent({
   name: 'CSidebar',
   props: {

package/src/components/{pagination → smart-pagination}/CSmartPagination.ts

@@ -1,7 +1,6 @@
 import { computed, defineComponent, h, ref, watch } from 'vue'
 
-import { CPagination } from './CPagination'
-import { CPaginationItem } from './CPaginationItem'
+import { CPagination, CPaginationItem } from './../pagination'
 
 const CSmartPagination = defineComponent({
   name: 'CSmartPagination',

package/src/components/smart-pagination/index.ts

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+import { CSmartPagination } from './CSmartPagination'
+
+const CSmartPaginationPlugin = {
+  install: (app: App): void => {
+    app.component(CSmartPagination.name, CSmartPagination)
+  },
+}
+
+export { CSmartPaginationPlugin, CSmartPagination }

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

@@ -1,7 +1,7 @@
 import { computed, defineComponent, h, reactive, ref, PropType, watch, onMounted } from 'vue'
 
-import { CSmartPagination } from '../pagination/CSmartPagination'
 import { CElementCover } from '../element-cover/CElementCover'
+import { CSmartPagination } from '../smart-pagination/CSmartPagination'
 
 import { CTable } from '../table/CTable'
 
@@ -21,6 +21,7 @@ import {
   ColumnFilterValue,
   Item,
   ItemsPerPageSelect,
+  Pagination,
   Sorter,
   SorterValue,
   TableFilter,
@@ -133,6 +134,7 @@ const CSmartTable = defineComponent({
      */
     itemsPerPage: {
       type: Number,
+      default: 10,
       required: false,
     },
     /**
@@ -181,7 +183,7 @@ const CSmartTable = defineComponent({
      * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
      */
     pagination: {
-      type: Boolean,
+      type: [Boolean, Object] as PropType<boolean | Pagination>,
       required: false,
     },
     /**
@@ -789,12 +791,15 @@ const CSmartTable = defineComponent({
                 {
                   class: 'col',
                 },
-                props.pagination && numberOfPages.value > 1
+                (props.pagination && numberOfPages.value > 1) || props.paginationProps
                   ? h(CSmartPagination, {
-                      ...props.paginationProps,
                       pages: numberOfPages.value,
                       activePage: activePage.value,
-                      onActivePageChange: handleActivePageChange,
+                      ...props.paginationProps,
+                      onActivePageChange: (page) =>
+                        typeof props.pagination === 'object' && props.pagination.external
+                          ? emit('activePageChange', page)
+                          : handleActivePageChange(page),
                     })
                   : '',
               ),

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

@@ -38,6 +38,10 @@ export interface ItemsPerPageSelect {
   values?: Array<number>
 }
 
+export interface Pagination {
+  external?: boolean
+}
+
 export interface Sorter {
   resetable?: boolean
   external?: boolean

package/src/components/table/CTableCaption.ts

@@ -2,7 +2,6 @@ import { defineComponent, h } from 'vue'
 
 const CTableCaption = defineComponent({
   name: 'CTableCaption',
-  props: {},
   setup(_, { slots }) {
     return () => h('caption', {}, slots.default && slots.default())
   },

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

@@ -25,6 +25,24 @@ const CTimePicker = defineComponent({
   name: 'CTimePicker',
   props: {
     ...CPicker.props,
+    /**
+     * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
+     *
+     * @since 4.7.0
+     */
+    ampm: {
+      type: [Boolean, String],
+      default: 'auto',
+      validator: (value: boolean | string) => {
+        if (typeof value == 'string') {
+          return ['auto'].includes(value)
+        }
+        if (typeof value == 'boolean') {
+          return true
+        }
+        return false
+      },
+    },
     /**
      * Toggle visibility or set the content of cancel button.
      */
@@ -178,6 +196,15 @@ const CTimePicker = defineComponent({
       type: String,
       default: 'Select time',
     },
+    /**
+     * Show seconds.
+     *
+     * @since 4.7.0
+     */
+    seconds: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Size the component small or large.
      *
@@ -228,6 +255,10 @@ const CTimePicker = defineComponent({
         return ['roll', 'select'].includes(value)
       },
     },
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
   },
   emits: [
     /**
@@ -242,8 +273,15 @@ const CTimePicker = defineComponent({
      * Callback fired when the component requests to be shown.
      */
     'show',
+    /**
+     * Callback fired when the time changed.
+     *
+     * @since 4.7.0
+     */
+    'update:time',
   ],
   setup(props, { emit, attrs, slots }) {
+    const visible = ref(props.visible)
     const date = ref<Date | null>(convertTimeToDate(props.time))
     const initialDate = ref<Date | null>(null)
     const ampm = ref<'am' | 'pm'>(date.value ? getAmPm(new Date(date.value), props.locale) : 'am')
@@ -264,6 +302,8 @@ const CTimePicker = defineComponent({
     const handleClear = (event: Event) => {
       event.stopPropagation()
       date.value = null
+      emit('change', null)
+      emit('update:time', null)
     }
 
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
@@ -279,7 +319,7 @@ const CTimePicker = defineComponent({
       }
 
       if (set === 'hours') {
-        if (isAmPm(props.locale)) {
+        if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) {
           _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -295,7 +335,8 @@ const CTimePicker = defineComponent({
       }
 
       date.value = new Date(_date)
-      emit('change', _date.toTimeString(), _date.toLocaleTimeString(), _date)
+      emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date)
+      emit('update:time', _date.toLocaleTimeString(props.locale))
     }
 
     const InputGroup = () =>
@@ -310,7 +351,13 @@ const CTimePicker = defineComponent({
           },
           placeholder: props.placeholder,
           readonly: props.inputReadOnly,
-          value: date.value ? date.value.toLocaleTimeString(props.locale) : '',
+          value: date.value
+            ? date.value.toLocaleTimeString(props.locale, {
+                hour12:
+                  (props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm ? true : false,
+                ...(!props.seconds && { timeStyle: 'short' }),
+              })
+            : '',
         }),
         (props.indicator || props.cleaner) &&
           h(CInputGroupText, {}, () => [
@@ -361,15 +408,16 @@ const CTimePicker = defineComponent({
           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: getListOfSeconds(props.locale, true),
-        onChange: (event: Event) =>
-          handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
-        ...(date.value && { value: getSelectedSeconds(date.value) }),
-      }),
+      props.seconds && ':',
+      props.seconds &&
+        // @ts-expect-error the getListOfMinutes function returns corect type
+        h(CFormSelect, {
+          disabled: props.disabled,
+          options: getListOfSeconds(props.locale, true),
+          onChange: (event: Event) =>
+            handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
+          ...(date.value && { value: getSelectedSeconds(date.value) }),
+        }),
       isAmPm(props.locale) &&
         h(CFormSelect, {
           disabled: props.disabled,
@@ -384,21 +432,22 @@ const CTimePicker = defineComponent({
 
     const TimePickerRoll = () => [
       h(CTimePickerRollCol, {
-        elements: getListOfHours(props.locale),
+        elements: getListOfHours(props.locale, props.ampm),
         onClick: (index: number) => handleTimeChange('hours', index.toString()),
-        selected: getSelectedHour(date.value, props.locale),
+        selected: getSelectedHour(date.value, props.locale, props.ampm),
       }),
       h(CTimePickerRollCol, {
         elements: getListOfMinutes(props.locale),
         onClick: (index: number) => handleTimeChange('minutes', index.toString()),
         selected: getSelectedMinutes(date.value),
       }),
-      h(CTimePickerRollCol, {
-        elements: getListOfSeconds(props.locale),
-        onClick: (index: number) => handleTimeChange('seconds', index.toString()),
-        selected: getSelectedSeconds(date.value),
-      }),
-      isAmPm(props.locale) &&
+      props.seconds &&
+        h(CTimePickerRollCol, {
+          elements: getListOfSeconds(props.locale),
+          onClick: (index: number) => handleTimeChange('seconds', index.toString()),
+          selected: getSelectedSeconds(date.value),
+        }),
+      ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) &&
         h(CTimePickerRollCol, {
           elements: [
             { value: 'am', label: 'AM' },
@@ -445,8 +494,10 @@ const CTimePicker = defineComponent({
                   if (initialDate.value) {
                     date.value = new Date(initialDate.value)
                   }
+                  visible.value = false
                 },
                 onHide: () => {
+                  visible.value = false
                   emit('hide')
                 },
                 onShow: () => {
@@ -454,8 +505,10 @@ const CTimePicker = defineComponent({
                     initialDate.value = new Date(date.value)
                   }
 
+                  visible.value = true
                   emit('show')
                 },
+                visible: visible.value,
               },
               {
                 ...(slots.cancelButton && {

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

@@ -32,6 +32,13 @@ const CTimePickerRollCol = defineComponent({
       init.value = false
     })
 
+    const handleKeyDown = (event: KeyboardEvent, value: number | string) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        emit('click', value)
+      }
+    }
+
     return () =>
       h(
         'div',
@@ -47,7 +54,9 @@ const CTimePickerRollCol = defineComponent({
                 },
               ],
               onClick: () => emit('click', element.value),
+              onKeydown: (event: KeyboardEvent) => handleKeyDown(event, element.value),
               role: 'button',
+              tabindex: 0,
             },
             element.label,
           )

package/src/utils/getNextSibling.ts

@@ -0,0 +1,18 @@
+const getNextSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.nextElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.nextElementSibling
+  }
+
+  return
+}
+
+export default getNextSibling

package/src/utils/getPreviousSibling.ts

@@ -0,0 +1,18 @@
+const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
+  // Get the next sibling element
+  let sibling = elem.previousElementSibling
+
+  // If there's no selector, return the first sibling
+  if (!selector) return sibling
+
+  // If the sibling matches our selector, use it
+  // If not, jump to the next sibling and continue the loop
+  while (sibling) {
+    if (sibling.matches(selector)) return sibling
+    sibling = sibling.previousElementSibling
+  }
+
+  return
+}
+
+export default getPreviousSibling

package/src/utils/index.ts

@@ -0,0 +1,5 @@
+import getNextSibling from './getNextSibling'
+import getPreviousSibling from './getPreviousSibling'
+import isVisible from './isVisible'
+
+export { getNextSibling, getPreviousSibling, isVisible }

package/src/utils/isVisible.ts

@@ -0,0 +1,11 @@
+const isVisible = (element: HTMLElement) => {
+  const rect = element.getBoundingClientRect()
+  return (
+    rect.top >= 0 &&
+    rect.left >= 0 &&
+    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+  )
+}
+
+export default isVisible

package/src/utils/time.ts

@@ -26,11 +26,11 @@ export const getAmPm = (date: Date, locale: string) => {
   return date.getHours() >= 12 ? 'pm' : 'am'
 }
 
-export const getListOfHours = (locale: string) =>
-  Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>
+  Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm ? 12 : 24 }, (_, i) => {
     return {
-      value: isAmPm(locale) ? i + 1 : i,
-      label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+      value: (ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i,
+      label: ((ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i).toLocaleString(locale),
     }
   })
 
@@ -68,8 +68,16 @@ export const getListOfSeconds = (locale: string, valueAsString = false) =>
     }
   })
 
-export const getSelectedHour = (date: Date | null, locale: string) =>
-  date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : ''
+export const getSelectedHour = (
+  date: Date | null,
+  locale: string,
+  ampm: 'auto' | boolean = 'auto',
+) =>
+  date
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm
+      ? convert24hTo12h(date.getHours())
+      : date.getHours()
+    : ''
 
 export const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')