refactor(CDropdown): rebuild the component, and improve the syntax

Author: mrholek

packages/coreui-vue/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') {
@@ -127,19 +171,43 @@ 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 = {
+      placement: getPlacement(
+        props.placement,
+        props.direction,
+        props.alignment,
+        isRTL(dropdownMenuRef.value),
+      ) as Placement,
+    }
+
     watch(
       () => props.visible,
       () => {
         visible.value = props.visible
       },
     )
 
+    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 +218,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 +267,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'

packages/coreui-vue/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,

packages/coreui-vue/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)
         },
       }),
     }