feat(CDropdown): add custom toggler, add autoClose options

mrholek · mrholek · commit 197e3ccc935e · 2022-03-21T00:31:34.000+01:00
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdown.ts b/packages/coreui-vue/src/components/dropdown/CDropdown.ts
@@ -1,15 +1,4 @@
-import {
-  defineComponent,
-  h,
-  ref,
-  onUnmounted,
-  onMounted,
-  provide,
-  reactive,
-  toRefs,
-  watch,
-  PropType,
-} from 'vue'
+import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
 const CDropdown = defineComponent({
@@ -51,6 +40,20 @@ const CDropdown = defineComponent({
         }
       },
     },
+    /**
+     * Configure the auto close behavior of the dropdown:
+     * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+     * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+     * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+     * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+     */
+    autoClose: {
+      type: [Boolean, String],
+      default: true,
+      validator: (value: boolean | string) => {
+        return typeof value === 'boolean' || ['inside', 'outside'].includes(value)
+      },
+    },
     /**
      * Sets a darker color scheme to match a dark navbar.
      */
@@ -136,25 +139,29 @@ const CDropdown = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const dropdownRef = ref()
+    const dropdownToggleRef = ref()
     const dropdownMenuRef = ref()
     const placement = ref(props.placement)
     const popper = ref()
+    const visible = ref(props.visible)
+
+    watch(
+      () => props.visible,
+      () => {
+        visible.value = props.visible
+      },
+    )
 
-    const config = reactive({
+    provide('config', {
+      autoClose: props.autoClose,
       alignment: props.alignment,
       dark: props.dark,
       popper: props.popper,
-      visible: props.visible,
     })
 
-    const { visible } = toRefs(config)
-
-    provide('config', config)
-
     provide('variant', props.variant)
     provide('visible', visible)
-    provide('dropdownRef', dropdownRef)
+    provide('dropdownToggleRef', dropdownToggleRef)
     provide('dropdownMenuRef', dropdownMenuRef)
 
     if (props.direction === 'dropup') {
@@ -176,8 +183,8 @@ const CDropdown = defineComponent({
         return
       }
 
-      if (dropdownRef.value) {
-        popper.value = createPopper(dropdownRef.value, dropdownMenuRef.value, {
+      if (dropdownToggleRef.value) {
+        popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
           placement: placement.value,
         })
       }
@@ -190,43 +197,30 @@ const CDropdown = defineComponent({
       popper.value = undefined
     }
 
-    const toggleMenu = function () {
-      if (props.disabled === false) {
-        if (visible.value === true) {
-          visible.value = false
-        } else {
-          visible.value = true
-        }
+    const toggleMenu = () => {
+      if (props.disabled) {
+        return
       }
-    }
 
-    provide('toggleMenu', toggleMenu)
-
-    const hideMenu = function () {
-      if (props.disabled === false) {
+      if (visible.value === true) {
         visible.value = false
+        return
       }
-    }
 
-    const handleKeyup = (event: Event) => {
-      if (dropdownRef.value && !dropdownRef.value.contains(event.target as HTMLElement)) {
-        hideMenu()
-      }
+      visible.value = true
     }
-    const handleClickOutside = (event: Event) => {
-      if (dropdownRef.value && !dropdownRef.value.contains(event.target as HTMLElement)) {
-        hideMenu()
+
+    provide('toggleMenu', toggleMenu)
+
+    const hideMenu = () => {
+      if (props.disabled) {
+        return
       }
+
+      visible.value = false
     }
 
-    onMounted(() => {
-      window.addEventListener('click', handleClickOutside)
-      window.addEventListener('keyup', handleKeyup)
-    })
-    onUnmounted(() => {
-      window.removeEventListener('click', handleClickOutside)
-      window.removeEventListener('keyup', handleKeyup)
-    })
+    provide('hideMenu', hideMenu)
 
     watch(visible, () => {
       props.popper && (visible.value ? initPopper() : destroyPopper())
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, toRefs, Ref } from 'vue'
+import { defineComponent, h, inject, onUnmounted, onUpdated, Ref } from 'vue'
 
 const CDropdownMenu = defineComponent({
   name: 'CDropdownMenu',
@@ -15,11 +15,13 @@ const CDropdownMenu = defineComponent({
     },
   },
   setup(props, { slots }) {
+    const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownMenuRef = inject('dropdownMenuRef') as Ref<HTMLElement>
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const config = inject('config') as any
+    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 { alignment, dark, popper, visible } = toRefs(config)
+    const { autoClose, alignment, dark, popper } = config
 
     // eslint-disable-next-line @typescript-eslint/ban-types
     const alignmentClassNames = (alignment: object | string) => {
@@ -35,16 +37,57 @@ const CDropdownMenu = defineComponent({
       return classNames
     }
 
+    const handleKeyup = (event: Event) => {
+      if (autoClose === false) {
+        return
+      }
+      if (!dropdownMenuRef.value?.contains(event.target as HTMLElement)) {
+        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,
         {
           class: [
             'dropdown-menu',
-            { 'dropdown-menu-dark': dark.value, show: visible.value },
-            alignmentClassNames(alignment.value),
+            { 'dropdown-menu-dark': dark, show: visible.value },
+            alignmentClassNames(alignment),
           ],
-          ...((typeof alignment.value === 'object' || !popper.value) && {
+          ...((typeof alignment === 'object' || !popper) && {
             'data-coreui-popper': 'static',
           }),
           ref: dropdownMenuRef,
diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts
@@ -1,5 +1,5 @@
-import { defineComponent, h, inject, Ref } from 'vue'
-
+import { cloneVNode, defineComponent, h, inject, onMounted, Ref, ref } from 'vue'
+import { CButton } from '../button'
 import { Color, Shape } from '../props'
 
 const CDropdownToggle = defineComponent({
@@ -35,6 +35,10 @@ const CDropdownToggle = defineComponent({
       default: 'button',
       require: false,
     },
+    /**
+     * Create a custom toggler which accepts any content.
+     */
+    custom: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
@@ -81,31 +85,37 @@ const CDropdownToggle = defineComponent({
     },
   },
   setup(props, { slots }) {
-    const dropdownRef = inject('dropdownRef') as Ref<HTMLElement>
+    const buttonRef = ref()
+    const dropdownToggleRef = inject('dropdownToggleRef') as Ref<HTMLElement>
     const dropdownVariant = inject('variant') as string
-    const visible = inject('visible') as boolean
+    const visible = inject('visible') as Ref<boolean>
     const toggleMenu = inject('toggleMenu') as () => void
     const className = [
       {
         'dropdown-toggle': props.caret,
         'dropdown-toggle-split': props.split,
-        show: visible,
+        show: visible.value,
         active: props.active,
         disabled: props.disabled,
       },
     ]
 
-    const buttonClassName = [
-      'btn',
-      props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
-      {
-        [`btn-${props.size}`]: props.size,
-      },
-      props.shape,
-    ]
+    onMounted(() => {
+      if (buttonRef.value) {
+        dropdownToggleRef.value = buttonRef.value.$el
+      }
+    })
 
     return () =>
-      dropdownVariant === 'nav-item'
+      props.custom
+        ? slots.default &&
+          slots.default().map((slot) =>
+            cloneVNode(slot, {
+              onClick: () => toggleMenu(),
+              ref: dropdownToggleRef,
+            }),
+          )
+        : dropdownVariant === 'nav-item'
         ? h(
             'a',
             {
@@ -115,26 +125,32 @@ const CDropdownToggle = defineComponent({
               href: '#',
               onClick: (event: Event) => {
                 event.preventDefault()
-                return toggleMenu()
+                toggleMenu()
               },
-              ref: dropdownRef,
+              ref: dropdownToggleRef,
             },
             { default: () => slots.default && slots.default() },
           )
         : h(
-            // TODO: check how to use CButton component
-            props.component,
+            CButton,
             {
-              class: [...className, ...buttonClassName],
+              class: className,
               active: props.active,
+              color: props.color,
               disabled: props.disabled,
               onClick: () => toggleMenu(),
               ...(props.component === 'button' && { type: 'button' }),
-              ref: dropdownRef,
+              ref: (el) => {
+                buttonRef.value = el
+              },
+              shape: props.shape,
+              size: props.size,
+              variant: props.variant,
             },
-            props.split
-              ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-              : slots.default && slots.default(),
+            () =>
+              props.split
+                ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                : slots.default && slots.default(),
           )
   },
 })
