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

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/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 === true) {
+        if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
           _date.setHours(convert12hTo24h(ampm.value, parseInt(value)))
         } else {
           _date.setHours(parseInt(value))
@@ -353,9 +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 === 'boolean' && props.ampm),
+                hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
                 ...(!props.seconds && { timeStyle: 'short' }),
               })
             : '',
@@ -391,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: [
@@ -433,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 === true) &&
+      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,6 +28,7 @@ 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 === true ? 12 : 24 }, (_, i) => {
     return {
@@ -36,6 +39,7 @@ export const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto')
     }
   })
 
+// TODO: clean-up
 export const getListOfMinutes = (locale: string, valueAsString = false) =>
   Array.from({ length: 60 }, (_, i) => {
     const d = new Date()
@@ -47,10 +51,11 @@ export const getListOfMinutes = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[0],
+        .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()
@@ -62,10 +67,46 @@ export const getListOfSeconds = (locale: string, valueAsString = false) =>
           minute: '2-digit',
           second: '2-digit',
         })
-        .split(/[^A-Za-z0-9]/)[1],
+        .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,

package/src/components/virtual-scroller/CVirtualScroller.ts

@@ -0,0 +1,109 @@
+import { cloneVNode, computed, defineComponent, h, onMounted, ref, VNode } from 'vue'
+
+const CVirtualScroller = defineComponent({
+  name: 'CVirtualScroller',
+  props: {
+    /**
+     * Amount of visible items
+     */
+    visibleItems: {
+      type: Number,
+      default: 10,
+    },
+  },
+  setup(props, { slots }) {
+    const virtualScrollRef = ref<HTMLDivElement>()
+    const virtualScrollContentRef = ref<HTMLDivElement>()
+
+    const currentItemIndex = ref(1)
+    const itemHeight = ref<number>(0)
+    const itemsNumber = ref<number>(0)
+    const viewportPadding = ref(0)
+
+    const buffer = computed(() => Math.floor(props.visibleItems / 2))
+
+    const maxHeight = computed(
+      () => itemsNumber.value * itemHeight.value + 2 * viewportPadding.value,
+    )
+
+    const viewportHeight = computed(
+      () => props.visibleItems * itemHeight.value + 2 * viewportPadding.value,
+    )
+
+    onMounted(() => {
+      if (virtualScrollRef.value) {
+        viewportPadding.value = parseFloat(getComputedStyle(virtualScrollRef.value).paddingTop)
+        // It's necessary to calculate heights of items
+        virtualScrollRef.value.dispatchEvent(new CustomEvent('scroll'))
+      }
+    })
+
+    const handleScroll = (scrollTop: number) => {
+      currentItemIndex.value =
+        itemHeight.value && Math.max(Math.ceil(scrollTop / itemHeight.value), 1)
+    }
+
+    return () => {
+      const children: any = slots.default
+        ? Array.isArray(slots.default()[0].children)
+          ? slots.default()[0].children
+          : slots.default()
+        : []
+      itemsNumber.value = children && children.length ? children.length : 0
+      return h(
+        'div',
+        {
+          class: ['virtual-scroller'],
+          onScroll: (event: any) => handleScroll((event.target as HTMLDivElement).scrollTop),
+          style: {
+            height: `${
+              maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value
+            }px`,
+            overflowY: 'auto',
+          },
+          ref: virtualScrollRef,
+        },
+        h(
+          'div',
+          {
+            class: 'virtual-scroller-content',
+            style: {
+              height: `${maxHeight.value}px`,
+            },
+            ref: virtualScrollContentRef,
+          },
+          children.map(
+            (slot: VNode, index: number) =>
+              index + 1 > Math.max(currentItemIndex.value - buffer.value, 0) &&
+              index + 1 <= currentItemIndex.value + props.visibleItems + buffer.value &&
+              cloneVNode(slot, {
+                class: [
+                  {
+                    'virtual-scroller-item-preload':
+                      index + 1 > currentItemIndex.value + props.visibleItems ||
+                      index + 1 < currentItemIndex.value,
+                  },
+                ],
+                style: {
+                  ...(currentItemIndex.value > buffer.value && {
+                    transform: `translateY(${
+                      (currentItemIndex.value - buffer.value) * itemHeight.value
+                    }px)`,
+                  }),
+                },
+                ref: (node) => {
+                  if (node && (node as HTMLElement).offsetHeight) {
+                    itemHeight.value =
+                      (node as HTMLElement).offsetHeight +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginTop) +
+                      parseFloat(getComputedStyle(node as HTMLElement).marginBottom)
+                  }
+                },
+              }),
+          ),
+        ),
+      )
+    }
+  },
+})
+export { CVirtualScroller }

package/src/components/virtual-scroller/index.ts

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

package/src/utils/index.ts

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

package/src/utils/getNextSibling.ts

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

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