@coreui/vue-pro 4.7.0-alpha.1 → 4.8.0-next.0

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

@@ -0,0 +1,212 @@
+import type {
+  Column,
+  ColumnFilter,
+  ColumnFilterValue,
+  Item,
+  Sorter,
+  SorterValue,
+  TableFilter,
+} from './types'
+
+export const filterColumns = (
+  items: Item[],
+  columnFilter: boolean | ColumnFilter | undefined,
+  columnFilterState: ColumnFilterValue,
+  itemsDataColumns: string[],
+) => {
+  if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
+    return items
+  }
+
+  Object.entries(columnFilterState).forEach(([key, value]) => {
+    if (value instanceof Function) {
+      items = items.filter((item) => value(item[key]))
+      return
+    }
+
+    const columnFilter = String(value).toLowerCase()
+    if (columnFilter && itemsDataColumns.includes(key)) {
+      items = items.filter((item) => {
+        return String(item[key]).toLowerCase().includes(columnFilter)
+      })
+    }
+  })
+
+  return items
+}
+
+export const filterTable = (
+  items: Item[],
+  tableFilter: boolean | TableFilter | undefined,
+  tableFilterState: string,
+  itemsDataColumns: string[],
+) => {
+  if (
+    !tableFilterState ||
+    (tableFilter && typeof tableFilter === 'object' && tableFilter.external)
+  ) {
+    return items
+  }
+
+  const filter = tableFilterState.toLowerCase()
+  const valueContainFilter = (val: any) => String(val).toLowerCase().includes(filter)
+  items = items.filter((item) => {
+    return !!itemsDataColumns.find((key) => valueContainFilter(item[key]))
+  })
+
+  return items
+}
+
+export const getClickedColumnName = (
+  target: HTMLTextAreaElement,
+  columnNames: string[],
+): string => {
+  const closest = target.closest('tr')
+  const children = closest ? Array.from(closest.children) : []
+  const clickedCell = children.filter((child) => child.contains(target))[0]
+  return columnNames[children.indexOf(clickedCell)]
+}
+
+export const getColumnKey = (column: Column | string) =>
+  typeof column === 'object' ? column.key : column
+
+export const getColumnLabel = (column: Column | string) =>
+  typeof column === 'object'
+    ? column.label !== undefined
+      ? column.label
+      : pretifyName(column.key)
+    : pretifyName(column)
+
+export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
+  columns
+    ? columns.map((column: Column | string) => {
+        if (typeof column === 'object') return column.key
+        else return column
+      })
+    : getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
+
+export const getColumnSorterState = (
+  key: string,
+  sorterState: SorterValue | undefined,
+): string | number => {
+  if (sorterState && sorterState.column === key) {
+    if (sorterState.state) {
+      return sorterState.state
+    }
+    return 0
+  }
+
+  return 0
+}
+
+export const getColumnValues = (items: Item[], key: string) => {
+  return items.map((item) => item[key])
+}
+
+export const getTableDataCellProps = (item: Item, colName: string) => {
+  const props = item._cellProps && {
+    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+  }
+
+  return props
+}
+
+export const getTableHeaderCellProps = (column: Column | string) => {
+  if (typeof column === 'object' && column._props) {
+    return column._props
+  }
+
+  return {}
+}
+
+export const getTableHeaderCellStyles = (
+  column: Column | string,
+  columnSorter: boolean | Sorter | undefined,
+) => {
+  const style = {}
+
+  if (
+    columnSorter &&
+    (typeof column !== 'object' ||
+      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
+  ) {
+    style['cursor'] = 'pointer'
+  }
+
+  if (typeof column === 'object' && column._style) {
+    return { ...style, ...column._style }
+  }
+  return style
+}
+
+export const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
+  array.some((_item: T) => {
+    let result = true
+    for (const key in item) {
+      if (!ignore.includes(key) && item[key] !== _item[key]) {
+        result = false
+        break
+      }
+    }
+
+    return result
+  })
+
+export const isSortable = (
+  i: number,
+  columns: (string | Column)[] | undefined,
+  columnSorter: Sorter | boolean | undefined,
+  itemsDataColumns: string[],
+  columnNames: string[],
+): boolean | undefined => {
+  const isDataColumn = itemsDataColumns.includes(columnNames[i])
+  let column
+  if (columns) column = columns[i]
+  return (
+    columnSorter &&
+    (!columns ||
+      typeof column !== 'object' ||
+      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+    isDataColumn
+  )
+}
+
+export const pretifyName = (name: string) => {
+  return name
+    .replace(/[-_.]/g, ' ')
+    .replace(/ +/g, ' ')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+export const sortItems = (
+  columnSorter: boolean | Sorter | undefined,
+  items: Item[],
+  itemsDataColumns: string[],
+  sorterState: SorterValue,
+) => {
+  const column = sorterState.column
+  if (
+    !column ||
+    !itemsDataColumns.includes(column) ||
+    (columnSorter && typeof columnSorter === 'object' && columnSorter.external)
+  ) {
+    return items
+  }
+
+  const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0
+  const sorted = items.slice().sort((item, item2) => {
+    const value = item[column]
+    const value2 = item2[column]
+    const a = typeof value === 'number' ? value : String(value).toLowerCase()
+    const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase()
+    return a > b ? 1 * flip : b > a ? -1 * flip : 0
+  })
+  return sorted
+}

package/src/components/table/CTable.ts

@@ -117,7 +117,7 @@ const CTable = defineComponent({
      * @since 4.5.0
      */
     columns: {
-      type: Array as PropType<Column[] | string[]>,
+      type: Array as PropType<(Column | string)[]>,
       required: false,
     },
     /**
@@ -137,8 +137,7 @@ const CTable = defineComponent({
      * @since 4.5.0
      */
     footer: {
-      type: Array as PropType<FooterItem[]>,
-      default: () => [],
+      type: Array as PropType<(FooterItem | string)[]>,
       required: false,
     },
     /**
@@ -158,7 +157,6 @@ const CTable = defineComponent({
      */
     items: {
       type: Array as PropType<Item[]>,
-      default: () => [],
       required: false,
     },
     responsive: {
@@ -228,7 +226,7 @@ const CTable = defineComponent({
             if (typeof column === 'object') return column.key
             else return column
           })
-        : Object.keys(props.items[0] || {}).filter((el) => el.charAt(0) !== '_'),
+        : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'),
     )
 
     const table = () =>
@@ -301,34 +299,37 @@ const CTable = defineComponent({
                 {},
                 {
                   default: () => [
-                    props.items.map((item: Item) =>
-                      h(
-                        CTableRow,
-                        {
-                          ...(item._props && { ...item._props }),
-                        },
-                        {
-                          default: () => [
-                            rawColumnNames.value.map(
-                              (colName: string) =>
-                                item[colName] &&
-                                h(
-                                  CTableDataCell,
-                                  {
-                                    ...(item._cellProps &&
-                                      item._cellProps['all'] && { ...item._cellProps['all'] }),
-                                    ...(item._cellProps &&
-                                      item._cellProps[colName] && { ...item._cellProps[colName] }),
-                                  },
-                                  {
-                                    default: () => item[colName],
-                                  },
-                                ),
-                            ),
-                          ],
-                        },
+                    props.items &&
+                      props.items.map((item: Item) =>
+                        h(
+                          CTableRow,
+                          {
+                            ...(item._props && { ...item._props }),
+                          },
+                          {
+                            default: () => [
+                              rawColumnNames.value.map(
+                                (colName: string) =>
+                                  item[colName] &&
+                                  h(
+                                    CTableDataCell,
+                                    {
+                                      ...(item._cellProps &&
+                                        item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                      ...(item._cellProps &&
+                                        item._cellProps[colName] && {
+                                          ...item._cellProps[colName],
+                                        }),
+                                    },
+                                    {
+                                      default: () => item[colName],
+                                    },
+                                  ),
+                              ),
+                            ],
+                          },
+                        ),
                       ),
-                    ),
                   ],
                 },
               ),
@@ -346,17 +347,19 @@ const CTable = defineComponent({
                       {},
                       {
                         default: () => [
-                          props.footer.map((item: FooterItem | string) =>
-                            h(
-                              CTableDataCell,
-                              {
-                                ...(typeof item === 'object' && item._props && { ...item._props }),
-                              },
-                              {
-                                default: () => (typeof item === 'object' ? item.label : item),
-                              },
+                          props.footer &&
+                            props.footer.map((item: FooterItem | string) =>
+                              h(
+                                CTableDataCell,
+                                {
+                                  ...(typeof item === 'object' &&
+                                    item._props && { ...item._props }),
+                                },
+                                {
+                                  default: () => (typeof item === 'object' ? item.label : item),
+                                },
+                              ),
                             ),
-                          ),
                         ],
                       },
                     ),

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

@@ -1,25 +1,24 @@
 import { defineComponent, h, ref, watch } from 'vue'
 
 import { CFormInput, CFormSelect, CInputGroup, CInputGroupText } from '../form/'
-import { CFormControlWrapper } from './../form/CFormControlWrapper'
+import { CFormControlWrapper } from '../form/CFormControlWrapper'
 import { CPicker } from '../picker'
+
 import { CTimePickerRollCol } from './CTimePickerRollCol'
 
 import {
   convert12hTo24h,
   convertTimeToDate,
   getAmPm,
-  getListOfHours,
-  getListOfMinutes,
-  getListOfSeconds,
+  getLocalizedTimePartials,
   getSelectedHour,
   getSelectedMinutes,
   getSelectedSeconds,
-  isAmPm,
   isValidTime,
-} from '../../utils/time'
+} from './utils'
 
 import { Color } from '../props'
+import type { LocalizedTimePartials } from './types'
 
 const CTimePicker = defineComponent({
   name: 'CTimePicker',
@@ -281,10 +280,16 @@ const CTimePicker = defineComponent({
     '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')
+    const initialDate = ref<Date | null>(null)
+    const visible = ref(props.visible)
+    const localizedTimePartials = ref<LocalizedTimePartials>({
+      listOfHours: [],
+      listOfMinutes: [],
+      listOfSeconds: [],
+      hour12: false,
+    })
 
     watch(
       () => props.time,
@@ -294,6 +299,8 @@ const CTimePicker = defineComponent({
     )
 
     watch(date, () => {
+      localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm)
+
       if (date.value) {
         ampm.value = getAmPm(new Date(date.value), props.locale)
       }
@@ -313,13 +320,14 @@ const CTimePicker = defineComponent({
         if (value === 'am') {
           _date.setHours(_date.getHours() - 12)
         }
+
         if (value === 'pm') {
           _date.setHours(_date.getHours() + 12)
         }
       }
 
       if (set === 'hours') {
-        if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) {
+        if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
           _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -353,8 +361,7 @@ const CTimePicker = defineComponent({
           readonly: props.inputReadOnly,
           value: date.value
             ? date.value.toLocaleTimeString(props.locale, {
-                hour12:
-                  (props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm ? true : false,
+                hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
                 ...(!props.seconds && { timeStyle: 'short' }),
               })
             : '',
@@ -390,35 +397,50 @@ const CTimePicker = defineComponent({
       h('span', { class: 'time-picker-inline-icon' }),
       h(CFormSelect, {
         disabled: props.disabled,
-        options: getListOfHours(props.locale).map((option) => {
-          return {
-            value: option.value.toString(),
-            label: option.label,
-          }
-        }),
+        options:
+          localizedTimePartials.value &&
+          localizedTimePartials.value.listOfHours?.map((option) => {
+            return {
+              value: option.value.toString(),
+              label: option.label,
+            }
+          }),
         onChange: (event) => handleTimeChange('hours', event.target.value),
         ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
       }),
       ':',
-      // @ts-expect-error the getListOfMinutes function returns corect type
       h(CFormSelect, {
         disabled: props.disabled,
-        options: getListOfMinutes(props.locale, true),
+        options:
+          localizedTimePartials.value &&
+          localizedTimePartials.value.listOfMinutes.map((option) => {
+            return {
+              value: option.value.toString(),
+              label: option.label,
+            }
+          }),
         onChange: (event: Event) =>
           handleTimeChange('minutes', (event.target as HTMLSelectElement).value),
         ...(date.value && { value: getSelectedMinutes(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),
+          options:
+            localizedTimePartials.value &&
+            localizedTimePartials.value.listOfSeconds.map((option) => {
+              return {
+                value: option.value.toString(),
+                label: option.label,
+              }
+            }),
           onChange: (event: Event) =>
             handleTimeChange('seconds', (event.target as HTMLSelectElement).value),
           ...(date.value && { value: getSelectedSeconds(date.value) }),
         }),
-      isAmPm(props.locale) &&
+      localizedTimePartials.value &&
+        localizedTimePartials.value.hour12 &&
         h(CFormSelect, {
           disabled: props.disabled,
           options: [
@@ -432,22 +454,23 @@ const CTimePicker = defineComponent({
 
     const TimePickerRoll = () => [
       h(CTimePickerRollCol, {
-        elements: getListOfHours(props.locale, props.ampm),
+        elements: localizedTimePartials.value && localizedTimePartials.value.listOfHours,
         onClick: (index: number) => handleTimeChange('hours', index.toString()),
         selected: getSelectedHour(date.value, props.locale, props.ampm),
       }),
       h(CTimePickerRollCol, {
-        elements: getListOfMinutes(props.locale),
+        elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
         onClick: (index: number) => handleTimeChange('minutes', index.toString()),
         selected: getSelectedMinutes(date.value),
       }),
       props.seconds &&
         h(CTimePickerRollCol, {
-          elements: getListOfSeconds(props.locale),
+          elements: localizedTimePartials.value && localizedTimePartials.value.listOfSeconds,
           onClick: (index: number) => handleTimeChange('seconds', index.toString()),
           selected: getSelectedSeconds(date.value),
         }),
-      ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) &&
+      localizedTimePartials.value &&
+        localizedTimePartials.value.hour12 &&
         h(CTimePickerRollCol, {
           elements: [
             { value: 'am', label: 'AM' },

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

@@ -0,0 +1,15 @@
+export type LocalizedTimePartials = {
+  listOfHours: {
+    value: number
+    label: string
+  }[]
+  listOfMinutes: {
+    value: number
+    label: string
+  }[]
+  listOfSeconds: {
+    value: number
+    label: string
+  }[]
+  hour12: boolean
+}

package/src/{utils/time.ts → components/time-picker/utils.ts}

@@ -1,3 +1,5 @@
+import type { LocalizedTimePartials } from './types'
+
 export const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {
   if (abbr === 'am' && hour === 12) {
     return 0
@@ -26,14 +28,18 @@ export const getAmPm = (date: Date, locale: string) => {
   return date.getHours() >= 12 ? 'pm' : 'am'
 }
 
+// TODO: clean-up
 export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>
-  Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm ? 12 : 24 }, (_, i) => {
+  Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
     return {
-      value: (ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i,
-      label: ((ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i).toLocaleString(locale),
+      value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
+      label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(
+        locale,
+      ),
     }
   })
 
+// TODO: clean-up
 export const getListOfMinutes = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -42,15 +48,14 @@ export const getListOfMinutes = (locale: string, valueAsString = false) =>
       value: valueAsString ? i.toString() : i,
       label: d
         .toLocaleTimeString(locale, {
-          hour: '2-digit',
-          hour12: false,
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(':')[1],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
     }
   })
 
+// TODO: clean-up
 export const getListOfSeconds = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -59,22 +64,56 @@ export const getListOfSeconds = (locale: string, valueAsString = false) =>
       value: valueAsString ? i.toString() : i,
       label: d
         .toLocaleTimeString(locale, {
-          hour: '2-digit',
-          hour12: false,
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(':')[2],
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+    }
+  })
+
+export const getLocalizedTimePartials = (
+  locale: string,
+  ampm: 'auto' | boolean = 'auto',
+): LocalizedTimePartials => {
+  const date = new Date()
+  const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el))
+  const listOfHours = Array.from(
+    { length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 },
+    (_, i) => {
+      return {
+        value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
+        label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
+      }
+    },
+  )
+  const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
+    date.setMinutes(i)
+    return {
+      value: i,
+      label: date
+        .toLocaleTimeString(locale, {
+          minute: '2-digit',
+          second: '2-digit',
+        })
+        .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
     }
   })
 
+  return {
+    listOfHours,
+    listOfMinutes: listOfMinutesSeconds,
+    listOfSeconds: listOfMinutesSeconds,
+    hour12,
+  }
+}
+
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
   ampm: 'auto' | boolean = 'auto',
 ) =>
   date
-    ? (ampm === 'auto' && isAmPm(locale)) || ampm
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
       : date.getHours()
     : ''

package/src/utils/index.ts

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

package/src/utils/isInViewport.ts

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

package/src/utils/isVisible.ts

@@ -1,11 +0,0 @@
-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