@coreui/vue-pro 4.9.0-beta.2 → 4.9.0-rc.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-rc.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -55,7 +55,7 @@
     "vue-types": "^5.0.3"
   },
   "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

@@ -4,6 +4,7 @@ import { format as dateFormat } from 'date-fns'
 
 import { CButton } from '../button'
 import { CCalendar } from '../calendar'
+import { CInputGroup } from '../form'
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
@@ -495,8 +496,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 +507,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
         }
       },
     )
@@ -642,24 +645,61 @@ const CDateRangePicker = defineComponent({
     }
 
     const InputGroup = () =>
-      h(
-        'div',
-        {
-          class: 'date-picker-input-group',
-        },
-        [
+      h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
+        h('input', {
+          autocomplete: 'off',
+          class: [
+            'form-control date-picker-input',
+            {
+              hover: inputStartHoverValue.value,
+            },
+          ],
+          disabled: props.disabled,
+          ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
+          onClick: () => {
+            selectEndDate.value = false
+          },
+          onInput: (event: Event) => {
+            const date = getLocalDateFromString(
+              (event.target as HTMLInputElement).value,
+              props.locale,
+              props.timepicker,
+            )
+            if (date instanceof Date && date.getTime()) {
+              calendarDate.value = date
+              startDate.value = date
+            }
+          },
+          placeholder: Array.isArray(props.placeholder) ? props.placeholder[0] : props.placeholder,
+          readonly: props.inputReadOnly || typeof props.format === 'string',
+          required: props.required,
+          ref: inputStartRef,
+          value: inputStartHoverValue.value
+            ? setInputValue(inputStartHoverValue.value)
+            : setInputValue(startDate.value),
+        }),
+        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: inputStartHoverValue.value,
+                hover: inputEndHoverValue.value,
               },
             ],
             disabled: props.disabled,
-            ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
+            ...(props.id && { name: `${props.id}-end-date` }),
             onClick: () => {
-              selectEndDate.value = false
+              selectEndDate.value = true
             },
             onInput: (event: Event) => {
               const date = getLocalDateFromString(
@@ -669,62 +709,43 @@ const CDateRangePicker = defineComponent({
               )
               if (date instanceof Date && date.getTime()) {
                 calendarDate.value = date
-                startDate.value = date
+                endDate.value = date
               }
             },
-            placeholder: Array.isArray(props.placeholder)
-              ? props.placeholder[0]
-              : props.placeholder,
+            placeholder: props.placeholder[1],
             readonly: props.inputReadOnly || typeof props.format === 'string',
             required: props.required,
-            ref: inputStartRef,
-            value: inputStartHoverValue.value
-              ? setInputValue(inputStartHoverValue.value)
-              : setInputValue(startDate.value),
+            ref: inputEndRef,
+            value: inputEndHoverValue.value
+              ? setInputValue(inputEndHoverValue.value)
+              : setInputValue(endDate.value),
           }),
-          props.range && props.separator !== false && h('div', { class: 'date-picker-separator' }),
-          props.range &&
-            h('input', {
-              autocomplete: 'off',
-              class: [
-                'date-picker-input',
+        (props.indicator || props.cleaner) &&
+          h('span', { class: 'input-group-text' }, [
+            props.indicator &&
+              h(
+                'span',
                 {
-                  hover: inputEndHoverValue.value,
+                  class: 'picker-input-group-indicator',
                 },
-              ],
-              disabled: props.disabled,
-              ...(props.id && { name: `${props.id}-end-date` }),
-              onClick: () => {
-                selectEndDate.value = true
-              },
-              onInput: (event: Event) => {
-                const date = getLocalDateFromString(
-                  (event.target as HTMLInputElement).value,
-                  props.locale,
-                  props.timepicker,
-                )
-                if (date instanceof Date && date.getTime()) {
-                  calendarDate.value = date
-                  endDate.value = date
-                }
-              },
-              placeholder: props.placeholder[1],
-              readonly: props.inputReadOnly || typeof props.format === 'string',
-              required: props.required,
-              ref: inputEndRef,
-              value: inputEndHoverValue.value
-                ? 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),
-            }),
-        ],
-      )
+                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' }),
+              ),
+          ]),
+      ])
 
     return () =>
       h(
@@ -749,7 +770,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 +800,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-rc.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)
         },
       }),
     }