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

package/dist/utils/getNextSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getNextSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export default getNextSibling;

package/dist/utils/getPreviousSibling.d.ts

@@ -0,0 +1,2 @@
+declare const getPreviousSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export default getPreviousSibling;

package/dist/utils/index.d.ts

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

package/dist/utils/isVisible.d.ts

@@ -0,0 +1,2 @@
+declare const isVisible: (element: HTMLElement) => boolean;
+export default isVisible;

package/dist/utils/time.d.ts

@@ -2,7 +2,7 @@ export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => numbe
 export declare const convert24hTo12h: (hour: number) => number;
 export declare const convertTimeToDate: (time: Date | string | null | undefined) => Date | null;
 export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
-export declare const getListOfHours: (locale: string) => {
+export declare const getListOfHours: (locale: string, ampm?: 'auto' | boolean) => {
     value: number;
     label: string;
 }[];
@@ -14,7 +14,7 @@ export declare const getListOfSeconds: (locale: string, valueAsString?: boolean)
     value: string | number;
     label: string;
 }[];
-export declare const getSelectedHour: (date: Date | null, locale: string) => number | "";
+export declare const getSelectedHour: (date: Date | null, locale: string, ampm?: 'auto' | boolean) => number | "";
 export declare const getSelectedMinutes: (date: Date | null) => number | "";
 export declare const getSelectedSeconds: (date: Date | null) => number | "";
 export declare const isAmPm: (locale: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.6.0",
+  "version": "4.7.0-alpha.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",

package/src/components/carousel/CCarousel.ts

@@ -11,15 +11,7 @@ import {
   watch,
 } from 'vue'
 
-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)
-  )
-}
+import { isVisible } from './../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',

package/src/components/date-picker/CDatePicker.ts

@@ -265,13 +265,22 @@ const CDatePicker = defineComponent({
      * @property {string} formatedDate - formated date
      */
     'date-change',
+    /**
+     * Callback fired when the date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:date',
   ],
   setup(props, { emit }) {
     return () =>
       h(CDateRangePicker, {
         calendars: 1,
-        onStartDateChange: (date: Date, formatedDate: String) =>
-          emit('date-change', date, formatedDate),
+        onStartDateChange: (date: Date, formatedDate: String) => {
+          emit('date-change', date, formatedDate)
+          emit('update:date', date)
+        },
         range: false,
         startDate: props.date,
         ...props,

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -76,6 +76,15 @@ const CDateRangePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * If true the dropdown will be immediately closed after submitting the full date.
+     *
+     * @since 4.7.0
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: true,
+    },
     /**
      * Toggle visibility or set the content of confirm button.
      */
@@ -377,6 +386,10 @@ const CDateRangePicker = defineComponent({
      * @since 4.6.0
      */
     valid: Boolean,
+    /**
+     * Toggle the visibility of the component.
+     */
+    visible: Boolean,
     /**
      * Set length or format of day name.
      *
@@ -422,8 +435,23 @@ const CDateRangePicker = defineComponent({
      * @property {string} formatedDate - formated date
      */
     'start-date-change',
+    /**
+     * Callback fired when the start date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:start-date',
+    /**
+     * Callback fired when the end date changed.
+     *
+     * @property {Date | null} date - date object
+     * @since 4.7.0
+     */
+    'update:end-date',
   ],
   setup(props, { slots, attrs, emit }) {
+    const visible = ref(props.visible)
     const calendarDate = ref<Date>(
       props.calendarDate
         ? new Date(props.calendarDate)
@@ -526,6 +554,15 @@ const CDateRangePicker = defineComponent({
       }
 
       emit('start-date-change', date, date ? formatDate(date) : undefined)
+      emit('update:start-date', date)
+
+      if (props.timepicker || props.footer) {
+        return
+      }
+
+      if (props.closeOnSelect && !props.range) {
+        visible.value = false
+      }
     }
 
     const handleEndDateChange = (date: Date) => {
@@ -536,6 +573,15 @@ const CDateRangePicker = defineComponent({
       }
 
       emit('end-date-change', date, date ? formatDate(date) : undefined)
+      emit('update:end-date', date)
+
+      if (props.timepicker || props.footer) {
+        return
+      }
+
+      if (props.closeOnSelect && startDate.value !== null) {
+        visible.value = false
+      }
     }
 
     const handleClear = (event: Event) => {
@@ -544,6 +590,10 @@ const CDateRangePicker = defineComponent({
       endDate.value = null
       inputStartHoverValue.value = null
       inputEndHoverValue.value = null
+      emit('start-date-change', null)
+      emit('end-date-change', null)
+      emit('update:start-date', null)
+      emit('update:end-date', null)
     }
 
     const InputGroup = () =>
@@ -681,8 +731,10 @@ const CDateRangePicker = defineComponent({
                 onCancel: () => {
                   startDate.value = initialStartDate.value
                   endDate.value = initialEndDate.value
+                  visible.value = false
                 },
                 onHide: () => {
+                  visible.value = false
                   emit('hide')
                 },
                 onShow: () => {
@@ -694,8 +746,10 @@ const CDateRangePicker = defineComponent({
                     initialEndDate.value = new Date(endDate.value)
                   }
 
+                  visible.value = true
                   emit('show')
                 },
+                visible: visible.value,
               },
               {
                 ...(slots.cancelButton && {

package/src/components/form/CFormInput.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h } from 'vue'
 import { CFormControlWrapper } from './CFormControlWrapper'
 
+export const File = typeof window !== 'undefined' ? window.File : class File extends Object {}
+
 const CFormInput = defineComponent({
   name: 'CFormInput',
   props: {

package/src/components/index.ts

@@ -35,6 +35,7 @@ export * from './placeholder'
 export * from './progress'
 export * from './popover'
 export * from './sidebar'
+export * from './smart-pagination'
 export * from './smart-table'
 export * from './spinner'
 export * from './table'

package/src/components/loading-button/CLoadingButton.ts

@@ -71,11 +71,10 @@ const CLoadingButton = defineComponent({
       h(
         CButton,
         {
+          ...props,
           class: ['btn-loading', { ['is-loading']: loading.value }],
           ...(props.disabledOnLoading && loading.value && { disabled: true }),
           onClick: () => handleOnClick(),
-          // TODO: remove non button props
-          ...props,
         },
         {
           default: () => [

package/src/components/multi-select/CMultiSelect.ts

@@ -16,6 +16,18 @@ export interface Option {
   value: number | string
 }
 
+export interface SelectedOption {
+  disabled?: boolean
+  text: string
+  value: number | string
+}
+
+const flattenArray = (options: Option[]): Option[] => {
+  return options.reduce((acc: Option[], val: Option) => {
+    return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
+  }, [])
+}
+
 const CMultiSelect = defineComponent({
   name: 'CMultiSelect',
   props: {
@@ -137,9 +149,18 @@ const CMultiSelect = defineComponent({
      * Enables search input element.
      */
     search: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true,
       required: false,
+      validator: (value: boolean | string) => {
+        if (typeof value == 'string') {
+          return ['external'].includes(value)
+        }
+        if (typeof value == 'boolean') {
+          return true
+        }
+        return false
+      },
     },
     /**
      * Sets the label for no results when filtering.
@@ -241,70 +262,83 @@ const CMultiSelect = defineComponent({
      * Execute a function when a user changes the selected option. [docs]
      */
     'change',
+    /**
+     * Execute a function when the filter value changed.
+     *
+     * @since 4.7.0
+     */
+    'filterChange',
   ],
   setup(props, { attrs, emit }) {
-    const flattenArray = (options: Option[]): Option[] => {
-      return options.reduce((acc: Option[], val: Option) => {
-        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val)
-      }, [])
-    }
+    const nativeSelectRef = ref<HTMLSelectElement>()
+    provide('nativeSelectRef', nativeSelectRef)
+    const searchRef = ref<HTMLInputElement>()
+
+    const options = ref<Option[]>(props.options)
+    const search = ref('')
+    const selected = ref<SelectedOption[]>([])
+    const visible = ref<Boolean>(props.visible)
+
+    const selectOptions = (options: Option[], deselected?: Option[]) => {
+      let _selected = [...selected.value, ...options]
+
+      if (deselected) {
+        _selected = _selected.filter(
+          (selectedOption) =>
+            !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value),
+        )
+      }
 
-    const getSelectedOptions = (options: Option[]) => {
-      return flattenArray(options).filter((option: Option) => {
-        if (option.selected) {
-          return option
+      const deduplicated = _selected.reduce((unique: Option[], option) => {
+        if (!unique.some((obj) => obj.value === option.value)) {
+          unique.push({
+            value: option.value,
+            text: option.text,
+            ...(option.disabled && { disabled: option.disabled }),
+          })
         }
-        return
-      })
+        return unique
+      }, []) as SelectedOption[]
+
+      selected.value = deduplicated
     }
 
-    const updateOptions = (
-      value: number | string,
-      _options: Option[] = options.value,
-    ): Option[] => {
-      return props.multiple && _options
-        ? _options &&
-            _options.map((option: Option) => {
-              count.value = count.value++
-              return option.options
-                ? { ...option, options: updateOptions(value, option.options) }
-                : option.value == value // TODO: find solution
-                ? { ...option, selected: !option.selected, order: count.value }
-                : { ...option }
+    watch(
+      () => props.options,
+      (newValue, oldValue) => {
+        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+          options.value = newValue
+          const _selected =
+            newValue &&
+            flattenArray(newValue).filter((option: Option) => {
+              if (option.selected) {
+                return option
+              }
+
+              return
             })
-        : _options &&
-            _options.map((option: Option) => {
-              return option.options
-                ? { ...option, options: updateOptions(value, option.options) }
-                : option.value == value // TODO: find solution
-                ? { ...option, selected: true }
-                : { ...option, selected: false }
+
+          const deselected =
+            newValue &&
+            flattenArray(newValue).filter((option: Option) => {
+              if (option.selected === false) {
+                return option
+              }
+
+              return
             })
-    }
 
-    const toggleAllOptions = (
-      options: Option[],
-      selected: boolean,
-      counter: number = count.value,
-    ): Option[] => {
-      return options.map((option: Option) => {
-        !option.selected && counter++
-        count.value = counter
-        if (option.options) {
-          return {
-            ...option,
-            options: toggleAllOptions(option.options, selected, counter),
-          }
+          _selected && selectOptions(_selected, deselected)
         }
-        return option.disabled
-          ? { ...option }
-          : selected && !option.selected
-          ? { ...option, selected: selected, order: counter }
-          : { ...option, selected: selected }
-      })
-    }
+      },
+    )
 
-    const filterOptionsList = (search: string, _options = vOptions.value) => {
+    watch(selected, () => {
+      nativeSelectRef.value &&
+        nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
+    })
+
+    const filterOptionsList = (search: string, _options: Option[]) => {
       return search.length
         ? _options &&
             _options.reduce((acc: Option[], val: Option) => {
@@ -327,84 +361,64 @@ const CMultiSelect = defineComponent({
         : options.value
     }
 
-    const nativeSelectRef = ref<HTMLSelectElement>()
-    provide('nativeSelectRef', nativeSelectRef)
-    const searchRef = ref<HTMLInputElement>()
-
-    const options = ref<Option[]>(props.options)
-    const vOptions = ref<Option[]>(props.options)
-    const search = ref('')
-    const visible = ref<Boolean>(props.visible)
-
-    const selected = ref<Option[]>(getSelectedOptions(props.options))
-    const count = ref<number>(0)
-
-    watch(
-      () => props.options,
-      (newValue, oldValue) => {
-        if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
-      },
-    )
+    // watch(
+    //   () => props.options,
+    //   (newValue, oldValue) => {
+    //     console.log(props.options)
+    //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
+    //   },
+    // )
 
-    watch(options, () => {
-      const _selected = options.value && getSelectedOptions(options.value)
 
-      _selected.sort((a: Option, b: Option) => {
-        if (typeof a.order === 'undefined') {
-          return -1
-        }
-        if (b.order && a.order > b.order) return 1
-        if (b.order && a.order < b.order) return -1
-        return 0
-      })
-
-      selected.value = _selected
-    })
-
-    watch([options, search], () => {
-      vOptions.value = filterOptionsList(search.value, options.value)
-    })
-
-    watch(selected, () => {
-      nativeSelectRef.value &&
-        nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }))
-    })
 
     const handleSearchChange = (event: InputEvent) => {
       const target = event.target as HTMLInputElement
       search.value = target.value.toLowerCase()
+
+      emit('filterChange', target.value)
     }
 
     const handleSearchKeyDown = (event: KeyboardEvent) => {
-      if (search.value.length) return
+      if (search.value.length) {
+        return
+      }
+
       if (event.key === 'Backspace' || event.key === 'Delete') {
         const last = selected.value.filter((option: Option) => !option.disabled).pop()
-
         if (last) {
           selected.value = selected.value.filter((option: Option) => option.value !== last.value)
-          options.value = updateOptions(last.value)
         }
       }
     }
 
     const handleOptionClick = (option: Option) => {
-      options.value = updateOptions(option.value)
-
       if (!props.multiple) {
+        selected.value = [{ value: option.value, text: option.text }] as SelectedOption[]
         visible.value = false
         search.value = ''
         if (searchRef.value) {
           searchRef.value.value = ''
         }
+
+        return
+      }
+
+      if (selected.value.some((_option) => _option.value === option.value)) {
+        selected.value = selected.value.filter((_option) => _option.value !== option.value)
+      } else {
+        selected.value = [
+          ...selected.value,
+          { value: option.value, text: option.text },
+        ] as SelectedOption[]
       }
     }
 
     const handleSelectAll = () => {
-      options.value = toggleAllOptions(options.value, true)
+      selectOptions(flattenArray(options.value).filter((option: Option) => !option.disabled))
     }
 
     const handleDeselectAll = () => {
-      options.value = toggleAllOptions(options.value, false)
+      selected.value = selected.value.filter((option) => option.disabled)
     }
 
     return () => [
@@ -508,15 +522,23 @@ const CMultiSelect = defineComponent({
                       props.selectAll &&
                       h(
                         'button',
-                        { class: 'form-multi-select-all', onClick: () => handleSelectAll() },
+                        {
+                          class: 'form-multi-select-all',
+                          onClick: () => handleSelectAll(),
+                          type: 'button',
+                        },
                         props.selectAllLabel,
                       ),
                     h(CMultiSelectOptions, {
                       onOptionClick: (option: Option) => handleOptionClick(option),
-                      options: vOptions.value,
+                      options:
+                        props.search === 'external'
+                          ? options.value
+                          : filterOptionsList(search.value, options.value),
                       optionsMaxHeight: props.optionsMaxHeight,
                       optionsStyle: props.optionsStyle,
                       searchNoResultsLabel: props.searchNoResultsLabel,
+                      selected: selected.value
                     }),
                   ]),
               },

package/src/components/multi-select/CMultiSelectOptions.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, PropType, VNode } from 'vue'
 import { Option } from './CMultiSelect'
 
+import { getNextSibling, getPreviousSibling } from './../../utils'
+
 const CMultiSelectOptions = defineComponent({
   name: 'CMultiSelectOptions',
   props: {
@@ -44,20 +46,53 @@ const CMultiSelectOptions = defineComponent({
       default: 'no items',
       required: false,
     },
+    selected: {
+      type: Array as PropType<Option[]>,
+      default: () => [],
+      required: false,
+    },
   },
   emits: ['optionClick'],
   setup(props, { emit }) {
+    const handleKeyDown = (event: KeyboardEvent, option: Option) => {
+      if (event.code === 'Space' || event.key === 'Enter') {
+        event.preventDefault()
+        handleOptionClick && handleOptionClick(option)
+        return
+      }
+
+      if (event.key === 'Down' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const next = getNextSibling(target, '.form-multi-select-option')
+        if (next) {
+          ;(next as HTMLElement).focus() // eslint-disable-line prettier/prettier
+        }
+      }
+
+      if (event.key === 'Up' || event.key === 'ArrowUp') {
+        event.preventDefault()
+        const target = event.target as HTMLElement
+        const prev = getPreviousSibling(target, '.form-multi-select-option')
+        if (prev) {
+          ;(prev as HTMLElement).focus() // eslint-disable-line prettier/prettier
+        }
+      }
+    }
+
     const handleOptionClick = (option: Option) => {
       emit('optionClick', option as Option)
     }
-    const createOptions = (options: Option[]): VNode | VNode[] => {
-      return options.length > 0
-        ? options.map((option: Option) => {
-            return option.options
-              ? h('div', { class: 'form-multi-select-options' }, [
+
+    // TODO: find solution how to remove any
+    const createOptions = (options: Option[]): VNode | VNode[] | any =>
+      options.length > 0
+        ? options.map((option: Option) =>
+            option.options
+              ? [
                   h('div', { class: 'form-multi-select-optgroup-label' }, option.label),
                   createOptions(option.options),
-                ])
+                ]
               : h(
                   'div',
                   {
@@ -65,17 +100,20 @@ const CMultiSelectOptions = defineComponent({
                       'form-multi-select-option',
                       {
                         'form-multi-select-option-with-checkbox': props.optionsStyle === 'checkbox',
-                        'form-multi-selected': option.selected,
+                        'form-multi-selected': props.selected.some(
+                          (_option) => _option.value === option.value,
+                        ),
                         disabled: option.disabled,
                       },
                     ],
                     onClick: () => handleOptionClick(option),
+                    onKeydown: (event: any) => handleKeyDown(event, option),
+                    tabindex: 0,
                   },
                   option.text,
-                )
-          })
+                ),
+          )
         : h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel)
-    }
     return () =>
       h(
         'div',

package/src/components/multi-select/CMultiSelectSelection.ts

@@ -18,7 +18,7 @@ const CMultiSelectSelection = defineComponent({
      * Enables search input element.
      */
     search: {
-      type: Boolean,
+      type: [Boolean, String],
       required: false,
       default: false,
     },

package/src/components/pagination/index.ts

@@ -1,14 +1,12 @@
 import { App } from 'vue'
 import { CPagination } from './CPagination'
 import { CPaginationItem } from './CPaginationItem'
-import { CSmartPagination } from './CSmartPagination'
 
 const CPaginationPlugin = {
   install: (app: App): void => {
     app.component(CPagination.name, CPagination)
     app.component(CPaginationItem.name, CPaginationItem)
-    app.component(CSmartPagination.name, CSmartPagination)
   },
 }
 
-export { CPaginationPlugin, CPagination, CPaginationItem, CSmartPagination }
+export { CPaginationPlugin, CPagination, CPaginationItem }