@coreui/vue-pro 4.9.0-beta.2 → 4.9.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": "4.9.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.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "rollup": "^3.26.2",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.1.0",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.9.5",
     "vue": "^3.3.4",
-    "vue-types": "^5.0.3"
+    "vue-types": "^5.1.0"
   },
   "peerDependencies": {
-    "@coreui/coreui-pro": "^4.3.4",
+    "@coreui/coreui-pro": "^4.5.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
         }
       },
     )
@@ -645,13 +647,19 @@ const CDateRangePicker = defineComponent({
       h(
         'div',
         {
-          class: 'date-picker-input-group',
+          class: [
+            'input-group',
+            'picker-input-group',
+            {
+              [`input-group-${props.size}`]: props.size,
+            },
+          ],
         },
         [
           h('input', {
             autocomplete: 'off',
             class: [
-              'date-picker-input',
+              'form-control date-picker-input',
               {
                 hover: inputStartHoverValue.value,
               },
@@ -682,12 +690,20 @@ const CDateRangePicker = defineComponent({
               ? setInputValue(inputStartHoverValue.value)
               : setInputValue(startDate.value),
           }),
-          props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
+          props.range &&
+            props.separator !== false &&
+            h(
+              'span',
+              { class: 'input-group-text' },
+              slots.separator
+                ? slots.separator()
+                : h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' }),
+            ),
           props.range &&
             h('input', {
               autocomplete: 'off',
               class: [
-                'date-picker-input',
+                'form-control date-picker-input',
                 {
                   hover: inputEndHoverValue.value,
                 },
@@ -716,13 +732,31 @@ const CDateRangePicker = defineComponent({
                 ? setInputValue(inputEndHoverValue.value)
                 : setInputValue(endDate.value),
             }),
-          props.indicator && h('div', { class: 'date-picker-indicator' }),
-          props.cleaner &&
-            (startDate.value || endDate.value) &&
-            h('div', {
-              class: 'date-picker-cleaner',
-              onClick: (event: Event) => handleClear(event),
-            }),
+          (props.indicator || props.cleaner) &&
+            h('span', { class: 'input-group-text' }, [
+              props.indicator &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-indicator',
+                  },
+                  slots.indicator
+                    ? slots.indicator()
+                    : h('span', { class: 'picker-input-group-icon date-picker-input-icon' }),
+                ),
+              props.cleaner &&
+                h(
+                  'span',
+                  {
+                    class: 'picker-input-group-cleaner',
+                    onClick: (event: Event) => handleClear(event),
+                    role: 'button',
+                  },
+                  slots.cleaner
+                    ? slots.cleaner()
+                    : h('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' }),
+                ),
+            ]),
         ],
       )
 
@@ -749,7 +783,6 @@ const CDateRangePicker = defineComponent({
                 class: [
                   'date-picker',
                   {
-                    [`date-picker-${props.size}`]: props.size,
                     disabled: props.disabled,
                     'is-invalid': isValid.value === false ? true : false,
                     'is-valid': isValid.value,
@@ -780,7 +813,7 @@ const CDateRangePicker = defineComponent({
               {
                 toggler: () => InputGroup(),
                 footer: () =>
-                  h('div', { class: 'date-picker-footer' }, [
+                  h('div', { class: 'picker-footer' }, [
                     props.todayButton &&
                       h(
                         CButton,

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)
         },
       }),
     }