wave-ui 2.32.1 → 2.33.0

package/src/wave-ui/mixins/detachable.js

@@ -22,7 +22,8 @@ export default {
     alignRight: { type: Boolean },
     noPosition: { type: Boolean },
     zIndex: { type: [Number, String, Boolean] },
-    activator: { type: String } // Optionally designate an external activator.
+    // Optionally designate an external activator.
+    activator: { type: [String, Object, HTMLElement] } // The activator can be a DOM string selector, a ref or a DOM node.
   },
 
   data: () => ({
@@ -31,7 +32,7 @@ export default {
     // as is in an array so we can delete them on destroy.
     // This only applies to the activatorEventHandlers, the other events listeners can be removed
     // normally.
-    docAEventListenersHandlers: []
+    docEventListenersHandlers: []
   }),
 
   computed: {
@@ -70,17 +71,22 @@ export default {
     },
 
     hasSeparateActivator () {
-      return !this.$slots.activator && typeof this.activator === 'string'
+      if (this.$slots.activator) return false
+      const activatorIsString = typeof this.activator === 'string'
+      const activatorIsDomEl = (this.activator?.$el || this.activator) instanceof HTMLElement
+      return activatorIsString || activatorIsDomEl
     },
 
     activatorEl: {
       get () {
-        if (this.hasSeparateActivator) return document.querySelector(this.activator)
+        if (this.hasSeparateActivator) {
+          const activator = this.activator?.$el || this.activator
+          if (activator instanceof HTMLElement) return activator
+          return document.querySelector(this.activator)
+        }
         return this.$el.firstElementChild
       },
-      set () {
-
-      }
+      set () {}
     },
 
     position () {
@@ -106,9 +112,40 @@ export default {
 
   methods: {
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    getActivatorCoordinates (e) {
+    async open (e) {
+      // A tiny delay may help positioning the detachable correctly in case of multiple activators
+      // with different menu contents.
+      if (this.delay) await new Promise(resolve => setTimeout(resolve, this.delay))
+
+      this.detachableVisible = true
+
+      // If the activator is external, there might be multiple,
+      // so on open, the activator will be set to the event target.
+      if (this.activator) this.activatorEl = e.target
+
+      await this.insertInDOM()
+
+      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
+
+      if (!this.noPosition) this.computeDetachableCoords()
+
+      // In `getActivatorCoordinates` accessing the menu computed styles takes a few ms (less than 10ms),
+      // if we don't postpone the Menu apparition it will start transition from a visible menu and
+      // thus will not transition.
+      this.timeoutId = setTimeout(() => {
+        this.$emit('update:modelValue', true)
+        this.$emit('input', true)
+        this.$emit('open')
+      }, 0)
+
+      if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
+      if (!this.noPosition) window.addEventListener('resize', this.onResize)
+    },
+
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
+    getActivatorCoordinates () {
       // Get the activator coordinates relative to window.
-      const { top, left, width, height } = (e ? e.target : this.activatorEl).getBoundingClientRect()
+      const { top, left, width, height } = (this.activatorEl).getBoundingClientRect()
       let coords = { top, left, width, height }
 
       // If absolute position, adjust top & left.
@@ -126,9 +163,9 @@ export default {
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    computeDetachableCoords (e) {
+    computeDetachableCoords () {
       // Get the activator coordinates.
-      let { top, left, width, height } = this.getActivatorCoordinates(e)
+      let { top, left, width, height } = this.getActivatorCoordinates()
 
       // 1. First display the menu but hide it (So we can get its dimension).
       // --------------------------------------------------
@@ -251,31 +288,47 @@ export default {
         this.detachableEl.remove()
         this.detachableEl = null
       }
-    }
-  },
-
-  mounted () {
-    const wrapper = this.$el
-
-    // Unwrap the activator element if the activator is in the activator slot.
-    if (this.$slots.activator) wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+    },
 
     // If the activator is external, add event listeners to the document and check the target is
     // the activator when toggling.
     // This way, the activator can be a future DOM element, that is not yet in the DOM.
-    else if (this.activator) {
+    bindActivatorEvents () {
+      const activatorIsString = typeof this.activator === 'string'
+
       Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
         // Convert mouseenter to mouseover & mouseleave to mouseout because we are attaching
-        // event to the document, so it can accept future nodes.
+        // event to the document, so it can accept future DOM nodes.
         eventName = eventName.replace('mouseenter', 'mouseover').replace('mouseleave', 'mouseout')
         const handlerWrap = e => {
-          if (e.target?.matches && e.target.matches(this.activator)) handler(e)
+          // The activator can be a DOM string selector a ref or a DOM node.
+          if (activatorIsString && e.target?.matches && e.target.matches(this.activator)) handler(e)
+          else if (e.target === this.activatorEl || this.activatorEl.contains(e.target)) handler(e)
         }
         document.addEventListener(eventName, handlerWrap)
         // The event listeners handlers have to be removed the exact same way they have been attached.
         // Since the handler functions have variables that change after hot-reload, keep them exactly
         // as is in an array so we can delete them on destroy.
-        this.docAEventListenersHandlers.push({ eventName, handler: handlerWrap })
+        this.docEventListenersHandlers.push({ eventName, handler: handlerWrap })
+      })
+    }
+  },
+
+  mounted () {
+    const wrapper = this.$el
+
+    // Unwrap the activator element if the activator is in the activator slot.
+    if (this.$slots.activator) wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
+
+    // If the activator is external.
+    else if (this.activator) this.bindActivatorEvents()
+
+    // If the activator seems to be undefined, it is probably a DOM node or Vue ref,
+    // so check it on nextTick.
+    else {
+      this.$nextTick(() => {
+        this.activator && this.bindActivatorEvents()
+        if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
       })
     }
 
@@ -285,7 +338,7 @@ export default {
       wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
     }
 
-    if (this.modelValue) this.toggleMenu({ type: 'click', target: this.activatorEl })
+    if (this.modelValue && this.activator) this.toggle({ type: 'click', target: this.activatorEl })
   },
 
   beforeUnmount () {
@@ -295,8 +348,8 @@ export default {
 
     // Remove the event listeners the exact same way they have been defined.
     // Fixes issues on hot-reloading.
-    if (this.docAEventListenersHandlers.length) {
-      this.docAEventListenersHandlers.forEach(({ eventName, handler }) => {
+    if (this.docEventListenersHandlers.length) {
+      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
         document.removeEventListener(eventName, handler)
       })
     }