@coreui/vue-pro 4.9.0-beta.2 → 5.0.0-alpha.0

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string;
-export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
+export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | string;
 export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
 export type Triggers = 'hover' | 'focus' | 'click';

package/dist/utils/getRTLPlacement.d.ts

@@ -0,0 +1,3 @@
+import { Placement } from '@popperjs/core';
+declare const getRTLPlacement: (placement: string, element: HTMLDivElement | null) => Placement;
+export default getRTLPlacement;

package/dist/utils/index.d.ts

@@ -1,5 +1,6 @@
+import getRTLPlacement from './getRTLPlacement';
 import getUID from './getUID';
 import isInViewport from './isInViewport';
 import isObjectInArray from './isObjectInArray';
 import isRTL from './isRTL';
-export { getUID, isInViewport, isObjectInArray, isRTL };
+export { getRTLPlacement, getUID, isInViewport, isObjectInArray, isRTL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "4.9.0-beta.2",
+  "version": "5.0.0-alpha.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -38,24 +38,24 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.8",
-    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@types/jest": "^29.5.2",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.0",
     "@vue/vue3-jest": "29.2.4",
     "date-fns": "^2.29.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "rollup": "^3.25.0",
+    "jest": "^29.6.0",
+    "jest-environment-jsdom": "^29.6.0",
+    "rollup": "^3.26.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.0",
-    "typescript": "^4.9.5",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6",
     "vue": "^3.3.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "^5.1.0"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.3.4",
+    "@coreui/coreui-pro": "^5.0.0-alpha.0",
     "vue": "^3.2.21"
   },
   "standard": {

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

@@ -495,8 +495,9 @@ const CDateRangePicker = defineComponent({
       () => props.startDate,
       () => {
         if (props.startDate) {
-          calendarDate.value = new Date(props.startDate)
-          startDate.value = new Date(props.startDate)
+          const date = new Date(props.startDate)
+          calendarDate.value = date
+          startDate.value = date
         }
       },
     )
@@ -505,8 +506,9 @@ const CDateRangePicker = defineComponent({
       () => props.endDate,
       () => {
         if (props.endDate) {
-          calendarDate.value = new Date(props.endDate)
-          endDate.value = new Date(props.endDate)
+          const date = new Date(props.endDate)
+          calendarDate.value = date
+          endDate.value = date
         }
       },
     )

package/src/components/dropdown/CDropdown.ts

@@ -1,9 +1,53 @@
-import { defineComponent, h, ref, provide, watch, PropType, onMounted } from 'vue'
-import { createPopper, Placement } from '@popperjs/core'
+import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
+import type { Placement } from '@popperjs/core'
 
-import { Triggers } from '../../types'
+import { usePopper } from '../../composables'
+import type { Placements, Triggers } from '../../types'
 import { isRTL } from '../../utils'
 
+export type Directions = 'start' | 'end'
+
+export type Breakpoints =
+  | { xs: Directions }
+  | { sm: Directions }
+  | { md: Directions }
+  | { lg: Directions }
+  | { xl: Directions }
+  | { xxl: Directions }
+
+export type Alignments = Directions | Breakpoints
+
+const getPlacement = (
+  placement: Placement,
+  direction: string | undefined,
+  alignment: Alignments | string | undefined,
+  isRTL: boolean,
+): Placements => {
+  let _placement = placement
+
+  if (direction === 'dropup') {
+    _placement = isRTL ? 'top-end' : 'top-start'
+  }
+
+  if (direction === 'dropup-center') {
+    _placement = 'top'
+  }
+
+  if (direction === 'dropend') {
+    _placement = isRTL ? 'left-start' : 'right-start'
+  }
+
+  if (direction === 'dropstart') {
+    _placement = isRTL ? 'right-start' : 'left-start'
+  }
+
+  if (alignment === 'end') {
+    _placement = isRTL ? 'bottom-start' : 'bottom-end'
+  }
+
+  return _placement
+}
+
 const CDropdown = defineComponent({
   name: 'CDropdown',
   props: {
@@ -13,7 +57,7 @@ const CDropdown = defineComponent({
      * @values { 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'} }
      */
     alignment: {
-      type: [String, Object],
+      type: [String, Object] as PropType<string | Alignments>,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       validator: (value: string | any) => {
         if (value === 'start' || value === 'end') {
@@ -74,6 +118,15 @@ const CDropdown = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
+    /**
+     * Offset of the dropdown menu relative to its target.
+     *
+     * @since 4.9.0
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 2],
+    },
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
      *
@@ -127,10 +180,28 @@ const CDropdown = defineComponent({
   setup(props, { slots, emit }) {
     const dropdownToggleRef = ref()
     const dropdownMenuRef = ref()
-    const placement = ref(props.placement)
-    const popper = ref()
+    const popper = ref(typeof props.alignment === 'object' ? false : props.popper)
     const visible = ref(props.visible)
 
+    const { initPopper, destroyPopper } = usePopper()
+
+    const popperConfig = {
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: props.offset,
+          },
+        },
+      ],
+      placement: getPlacement(
+        props.placement,
+        props.direction,
+        props.alignment,
+        isRTL(dropdownMenuRef.value),
+      ) as Placement,
+    }
+
     watch(
       () => props.visible,
       () => {
@@ -138,8 +209,22 @@ const CDropdown = defineComponent({
       },
     )
 
+    watch(visible, () => {
+      if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
+        popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig)
+        window.addEventListener('mouseup', handleMouseUp)
+        window.addEventListener('keyup', handleKeyup)
+        emit('show')
+        return
+      }
+
+      popper.value && destroyPopper()
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+      emit('hide')
+    })
+
     provide('config', {
-      autoClose: props.autoClose,
       alignment: props.alignment,
       dark: props.dark,
       popper: props.popper,
@@ -150,27 +235,38 @@ const CDropdown = defineComponent({
     provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
-    const initPopper = () => {
-      // Disable popper if responsive aligment is set.
-      if (typeof props.alignment === 'object') {
+    const handleKeyup = (event: KeyboardEvent) => {
+      if (props.autoClose === false) {
         return
       }
 
-      if (dropdownToggleRef.value) {
-        popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
-          placement: placement.value,
-        })
+      if (event.key === 'Escape') {
+        setVisible(false)
       }
     }
 
-    const destroyPopper = () => {
-      if (popper.value) {
-        popper.value.destroy()
+    const handleMouseUp = (event: Event) => {
+      if (!dropdownToggleRef.value || !dropdownMenuRef.value) {
+        return
+      }
+
+      if (dropdownToggleRef.value.contains(event.target as HTMLElement)) {
+        return
+      }
+
+      if (
+        props.autoClose === true ||
+        (props.autoClose === 'inside' &&
+          dropdownMenuRef.value.contains(event.target as HTMLElement)) ||
+        (props.autoClose === 'outside' &&
+          !dropdownMenuRef.value.contains(event.target as HTMLElement))
+      ) {
+        setVisible(false)
+        return
       }
-      popper.value = undefined
     }
 
-    const toggleMenu = (_visible?: boolean) => {
+    const setVisible = (_visible?: boolean) => {
       if (props.disabled) {
         return
       }
@@ -188,48 +284,7 @@ const CDropdown = defineComponent({
       visible.value = true
     }
 
-    provide('toggleMenu', toggleMenu)
-
-    const hideMenu = () => {
-      if (props.disabled) {
-        return
-      }
-
-      visible.value = false
-    }
-
-    provide('hideMenu', hideMenu)
-
-    watch(visible, () => {
-      props.popper && (visible.value ? initPopper() : destroyPopper())
-      visible.value ? emit('show') : emit('hide')
-    })
-
-    onMounted(() => {
-      if (props.direction === 'center') {
-        placement.value = 'bottom'
-      }
-
-      if (props.direction === 'dropup') {
-        placement.value = isRTL(dropdownMenuRef.value) ? 'top-end' : 'top-start'
-      }
-
-      if (props.direction === 'dropup-center') {
-        placement.value = 'top'
-      }
-
-      if (props.direction === 'dropend') {
-        placement.value = isRTL(dropdownMenuRef.value) ? 'left-start' : 'right-start'
-      }
-
-      if (props.direction === 'dropstart') {
-        placement.value = isRTL(dropdownMenuRef.value) ? 'right-start' : 'left-start'
-      }
-
-      if (props.alignment === 'end') {
-        placement.value = isRTL(dropdownMenuRef.value) ? 'bottom-start' : 'bottom-end'
-      }
-    })
+    provide('setVisible', setVisible)
 
     return () =>
       props.variant === 'input-group'

package/src/components/dropdown/CDropdownMenu.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, onUnmounted, onUpdated, Ref } from 'vue'
+import { defineComponent, h, inject, Ref } from 'vue'
 
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
@@ -14,13 +14,11 @@ const CDropdownMenu = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
     const config = inject('config') as any // eslint-disable-line @typescript-eslint/no-explicit-any
-    const hideMenu = inject('hideMenu') as () => void
     const visible = inject('visible') as Ref<boolean>
 
-    const { autoClose, alignment, dark, popper } = config
+    const { alignment, dark, popper } = config
 
     // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
     const alignmentClassNames = (alignment: object | string) => {
@@ -36,49 +34,6 @@ const CDropdownMenu = defineComponent({
       return classNames
     }
 
-    const handleKeyup = (event: KeyboardEvent) => {
-      if (autoClose === false) {
-        return
-      }
-
-      if (event.key === 'Escape') {
-        hideMenu()
-      }
-    }
-
-    const handleMouseUp = (event: Event) => {
-      if (dropdownToggleRef.value?.contains(event.target as HTMLElement)) {
-        return
-      }
-
-      if (autoClose === true) {
-        hideMenu()
-        return
-      }
-
-      if (autoClose === 'inside' && dropdownMenuRef.value?.contains(event.target as HTMLElement)) {
-        hideMenu()
-        return
-      }
-
-      if (
-        autoClose === 'outside' &&
-        !dropdownMenuRef.value?.contains(event.target as HTMLElement)
-      ) {
-        hideMenu()
-      }
-    }
-
-    onUpdated(() => {
-      visible.value && window.addEventListener('mouseup', handleMouseUp)
-      visible.value && window.addEventListener('keyup', handleKeyup)
-    })
-
-    onUnmounted(() => {
-      window.removeEventListener('mouseup', handleMouseUp)
-      window.removeEventListener('keyup', handleKeyup)
-    })
-
     return () =>
       h(
         props.component,

package/src/components/dropdown/CDropdownToggle.ts

@@ -3,7 +3,7 @@ import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref }
 import { CButton } from '../button'
 
 import { Color, Shape } from '../../props'
-import { Triggers } from '../../types'
+import type { Triggers } from '../../types'
 
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
@@ -85,7 +85,7 @@ const CDropdownToggle = defineComponent({
     const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownVariant = inject('variant') as string
     const visible = inject('visible') as Ref<boolean>
-    const toggleMenu = inject('toggleMenu') as (_visible?: boolean) => void
+    const setVisible = inject('setVisible') as (_visible?: boolean) => void
 
     const className = [
       {
@@ -103,7 +103,7 @@ const CDropdownToggle = defineComponent({
             return
           }
 
-          toggleMenu()
+          setVisible()
         },
       }),
       ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
@@ -112,13 +112,13 @@ const CDropdownToggle = defineComponent({
             return
           }
 
-          toggleMenu(true)
+          setVisible(true)
         },
         onblur: () => {
           if (props.disabled) {
             return
           }
-          toggleMenu(false)
+          setVisible(false)
         },
       }),
     }

package/src/components/form/CFormCheck.ts

@@ -14,6 +14,12 @@ const CFormCheck = defineComponent({
      * @see http://coreui.io/vue/docs/components/button.html
      */
     button: Object,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+     *
+     * @since 4.9.0
+     */
+    falseValue: String,
     /**
      * Provide valuable, actionable feedback.
      *
@@ -66,7 +72,7 @@ const CFormCheck = defineComponent({
      * The default name for a value passed using v-model.
      */
     modelValue: {
-      type: [Boolean, String],
+      type: [Array, Boolean, String],
       value: undefined,
     },
     /**
@@ -81,6 +87,12 @@ const CFormCheck = defineComponent({
      * @since 4.3.0
      */
     tooltipFeedback: Boolean,
+    /**
+     * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+     *
+     * @since 4.9.0
+     */
+    trueValue: String,
     /**
      * Specifies the type of component.
      *
@@ -111,8 +123,35 @@ const CFormCheck = defineComponent({
   ],
   setup(props, { attrs, emit, slots }) {
     const handleChange = (event: InputEvent) => {
+      const target = event.target as HTMLInputElement
       emit('change', event)
-      emit('update:modelValue', (event.target as HTMLInputElement).value)
+
+      if (props.falseValue && props.trueValue) {
+        emit('update:modelValue', target.checked ? props.trueValue : props.falseValue)
+        return
+      }
+
+      if (props.value && Array.isArray(props.modelValue)) {
+        if (props.modelValue.includes(props.value)) {
+          emit(
+            'update:modelValue',
+            props.modelValue.filter((value) => value !== props.value),
+          )
+        } else {
+          emit('update:modelValue', [...props.modelValue, props.value])
+        }
+
+        return
+      }
+
+      if (props.value === undefined) {
+        emit('update:modelValue', target.checked)
+        return
+      }
+
+      if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
+        emit('update:modelValue', target.checked ? props.value : undefined)
+      }
     }
 
     const className = [
@@ -135,12 +174,22 @@ const CFormCheck = defineComponent({
       },
     ]
 
-    const isChecked = computed(() => props.modelValue == props.value)
+    const isChecked = computed(() => {
+      if (Array.isArray(props.modelValue)) {
+        return props.modelValue.includes(props.value)
+      }
+
+      if (typeof props.modelValue === 'string') {
+        return props.modelValue === props.value
+      }
+
+      return props.modelValue
+    })
 
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...(props.modelValue && { checked: isChecked.value }),
+        ...(props.modelValue && props.value && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,

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

@@ -19,7 +19,7 @@ const CMultiSelect = defineComponent({
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     allowCreateOptions: Boolean,
     /**
@@ -34,7 +34,7 @@ const CMultiSelect = defineComponent({
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     clearSearchOnSelect: Boolean,
     /**
@@ -78,7 +78,7 @@ const CMultiSelect = defineComponent({
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.9.0-next.0
+     * @since 4.9.0
      */
     loading: Boolean,
     /**