@coreui/vue-pro 4.5.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

@@ -1,6 +1,7 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
+import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePickerRollCol } from './CTimePickerRollCol'
 
@@ -24,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.
      */
@@ -110,6 +129,34 @@ const CTimePicker = defineComponent({
         return ['ghost', 'outline'].includes(value)
       },
     },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedback: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable feedback.
+     *
+     * @since 4.6.0
+     */
+    feedbackInvalid: {
+      type: String,
+    },
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+     *
+     * @since 4.6.0
+     */
+    feedbackValid: {
+      type: String,
+    },
+    /**
+     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     */
+    id: String,
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -121,6 +168,20 @@ const CTimePicker = defineComponent({
      * Toggle the readonly state for the component.
      */
     inputReadOnly: Boolean,
+    /**
+     * Set component validation state to invalid.
+     *
+     * @since 4.6.0
+     */
+    invalid: Boolean,
+    /**
+     * Add a caption for a component.
+     *
+     * @since 4.6.0
+     */
+    label: {
+      type: String,
+    },
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -135,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.
      *
@@ -147,12 +217,32 @@ const CTimePicker = defineComponent({
         return ['sm', 'lg'].includes(value)
       },
     },
+    /**
+     * Add helper text to the component.
+     *
+     * @since 4.6.0
+     */
+    text: {
+      type: String,
+    },
     /**
      * Initial selected time.
      */
     time: {
       type: [Date, String],
     },
+    /**
+     * Display validation feedback in a styled tooltip.
+     *
+     * @since 4.6.0
+     */
+    tooltipFeedback: Boolean,
+    /**
+     * Set component validation state to valid.
+     *
+     * @since 4.6.0
+     */
+    valid: Boolean,
     /**
      * Set the time picker variant to a roll or select.
      *
@@ -165,6 +255,10 @@ const CTimePicker = defineComponent({
         return ['roll', 'select'].includes(value)
       },
     },
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
   },
   emits: [
     /**
@@ -179,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, slots }) {
+  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')
@@ -201,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) => {
@@ -216,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))
@@ -232,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 = () =>
@@ -247,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, {}, () => [
@@ -298,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,
@@ -321,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' },
@@ -348,56 +460,78 @@ const CTimePicker = defineComponent({
 
     return () =>
       h(
-        CPicker,
+        CFormControlWrapper,
         {
-          cancelButton: props.cancelButton,
-          cancelButtonColor: props.cancelButtonColor,
-          cancelButtonSize: props.cancelButtonSize,
-          cancelButtonVariant: props.cancelButtonVariant,
-          class: 'time-picker',
-          confirmButton: props.confirmButton,
-          confirmButtonColor: props.confirmButtonColor,
-          confirmButtonSize: props.confirmButtonSize,
-          confirmButtonVariant: props.confirmButtonVariant,
-          container: props.container,
-          disabled: props.disabled,
-          footer: true,
-          onCancel: () => {
-            if (initialDate.value) {
-              date.value = new Date(initialDate.value)
-            }
-          },
-          onHide: () => {
-            emit('hide')
-          },
-          onShow: () => {
-            if (date.value) {
-              initialDate.value = new Date(date.value)
-            }
-
-            emit('show')
-          },
+          describedby: attrs['aria-describedby'],
+          feedback: props.feedback,
+          feedbackInvalid: props.feedbackInvalid,
+          feedbackValid: props.feedbackValid,
+          id: props.id,
+          invalid: props.invalid,
+          label: props.label,
+          text: props.text,
+          tooltipFeedback: props.tooltipFeedback,
+          valid: props.valid,
         },
         {
-          ...(slots.cancelButton && {
-            cancelButton: () => slots.cancelButton && slots.cancelButton(),
-          }),
-          ...(slots.confirmButton && {
-            confirmButton: () => slots.confirmButton && slots.confirmButton(),
-          }),
-          toggler: () => InputGroup(),
           default: () =>
             h(
-              'div',
+              CPicker,
+              {
+                cancelButton: props.cancelButton,
+                cancelButtonColor: props.cancelButtonColor,
+                cancelButtonSize: props.cancelButtonSize,
+                cancelButtonVariant: props.cancelButtonVariant,
+                class: ['time-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
+                confirmButton: props.confirmButton,
+                confirmButtonColor: props.confirmButtonColor,
+                confirmButtonSize: props.confirmButtonSize,
+                confirmButtonVariant: props.confirmButtonVariant,
+                container: props.container,
+                disabled: props.disabled,
+                footer: true,
+                onCancel: () => {
+                  if (initialDate.value) {
+                    date.value = new Date(initialDate.value)
+                  }
+                  visible.value = false
+                },
+                onHide: () => {
+                  visible.value = false
+                  emit('hide')
+                },
+                onShow: () => {
+                  if (date.value) {
+                    initialDate.value = new Date(date.value)
+                  }
+
+                  visible.value = true
+                  emit('show')
+                },
+                visible: visible.value,
+              },
               {
-                class: [
-                  'time-picker-body',
-                  {
-                    ['time-picker-roll']: props.variant === 'roll',
-                  },
-                ],
+                ...(slots.cancelButton && {
+                  cancelButton: () => slots.cancelButton && slots.cancelButton(),
+                }),
+                ...(slots.confirmButton && {
+                  confirmButton: () => slots.confirmButton && slots.confirmButton(),
+                }),
+                toggler: () => InputGroup(),
+                default: () =>
+                  h(
+                    'div',
+                    {
+                      class: [
+                        'time-picker-body',
+                        {
+                          ['time-picker-roll']: props.variant === 'roll',
+                        },
+                      ],
+                    },
+                    props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
+                  ),
               },
-              props.variant === 'select' ? TimePickerSelect() : TimePickerRoll(),
             ),
         },
       )

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() : '')