wave-ui 2.30.0 → 2.31.0

package/src/wave-ui/components/w-tooltip.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .w-tooltip-wrap
-  slot(name="activator" :on="eventHandlers")
+  slot(name="activator" :on="activatorEventHandlers")
   transition(:name="transitionName" appear)
     .w-tooltip(
       v-if="detachableVisible"
@@ -41,21 +41,11 @@ export default {
     round: { type: Boolean },
     transition: { type: String },
     tooltipClass: { type: [String, Object, Array] },
-    // Position.
-    detachTo: { type: [String, Boolean, Object], deprecated: true },
-    appendTo: { type: [String, Boolean, Object] },
-    fixed: { type: Boolean },
-    top: { type: Boolean },
-    bottom: { type: Boolean },
-    left: { type: Boolean },
-    right: { type: Boolean },
-    alignTop: { type: Boolean },
-    alignBottom: { type: Boolean },
-    alignLeft: { type: Boolean },
-    alignRight: { type: Boolean },
-    zIndex: { type: [Number, String, Boolean] },
     persistent: { type: Boolean },
-    noPosition: { type: Boolean }
+    delay: { type: Number }
+    // Other props in the detachable mixin:
+    // detachTo, appendTo, fixed, top, bottom, left, right, alignTop, alignBottom, alignLeft,
+    // alignRight, noPosition, zIndex, activator.
   },
 
   emits: ['input', 'update:modelValue', 'open', 'close'],
@@ -63,12 +53,11 @@ export default {
   data: () => ({
     detachableVisible: false,
     hoveringActivator: false,
-    // The activator coordinates.
+    // The tooltip computed top & left coordinates.
     detachableCoords: {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     detachableEl: null,
     timeoutId: null
   }),
@@ -78,6 +67,9 @@ export default {
      * Other computed in the detachable mixin:
      * - `appendToTarget`
      * - `detachableParentEl`
+     * - `activatorEl`
+     * - `position`
+     * - `alignment`
      **/
 
     tooltipClasses () {
@@ -89,26 +81,6 @@ export default {
       return this.transition || `w-tooltip-slide-fade-${direction}`
     },
 
-    position () {
-      return (
-        (this.top && 'top') ||
-        (this.bottom && 'bottom') ||
-        (this.left && 'left') ||
-        (this.right && 'right') ||
-        'bottom'
-      )
-    },
-
-    alignment () {
-      return (
-        (['top', 'bottom'].includes(this.position) && this.alignLeft && 'left') ||
-        (['top', 'bottom'].includes(this.position) && this.alignRight && 'right') ||
-        (['left', 'right'].includes(this.position) && this.alignTop && 'top') ||
-        (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
-        ''
-      )
-    },
-
     classes () {
       return {
         [this.color]: this.color,
@@ -135,7 +107,7 @@ export default {
       }
     },
 
-    eventHandlers () {
+    activatorEventHandlers () {
       let handlers = {}
       if (this.showOnClick) handlers = { click: this.toggle }
       else {
@@ -181,19 +153,22 @@ export default {
       else if (['mouseleave', 'blur'].includes(e.type) && !this.showOnClick) shouldShowTooltip = false
 
       this.timeoutId = clearTimeout(this.timeoutId)
-      if (shouldShowTooltip) {
-        this.$emit('update:modelValue', (this.detachableVisible = true))
-        this.$emit('input', true)
-        this.$emit('open')
-
-        this.open(e)
-      }
+      if (shouldShowTooltip) this.open(e)
       else this.close()
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     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
@@ -241,37 +216,9 @@ export default {
       document.removeEventListener('mousedown', this.onOutsideMousedown)
       window.removeEventListener('resize', this.onResize)
     }
-  },
-
-  mounted () {
-    const wrapper = this.$el
-    this.activatorEl = wrapper.firstElementChild
-
-    // Unwrap the activator element.
-    wrapper.parentNode.insertBefore(this.activatorEl, wrapper)
-
-    if (this.modelValue) this.toggle({ type: 'click', target: this.activatorEl })
-  },
-
-  beforeUnmount () {
-    this.removeFromDOM()
-
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
-  },
-
-  watch: {
-    modelValue (bool) {
-      if (bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
-    },
-    detachTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
-    },
-    appendTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
-    }
   }
+
+  // watch, mounted & beforeDestroy hooks are set in the detachable.js mixin.
 }
 </script>
 

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

@@ -7,6 +7,33 @@
 import { consoleWarn } from '../utils/console'
 
 export default {
+  props: {
+    // Position.
+    detachTo: { type: [String, Boolean, Object], deprecated: true },
+    appendTo: { type: [String, Boolean, Object] },
+    fixed: { type: Boolean },
+    top: { type: Boolean },
+    bottom: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+    alignTop: { type: Boolean },
+    alignBottom: { type: Boolean },
+    alignLeft: { type: Boolean },
+    alignRight: { type: Boolean },
+    noPosition: { type: Boolean },
+    zIndex: { type: [Number, String, Boolean] },
+    activator: { type: String } // Optionally designate an external activator.
+  },
+
+  data: () => ({
+    // 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 only applies to the activatorEventHandlers, the other events listeners can be removed
+    // normally.
+    docAEventListenersHandlers: []
+  }),
+
   computed: {
     // DOM element to attach tooltip/menu to.
     // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
@@ -40,6 +67,40 @@ export default {
     // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     detachableParentEl () {
       return this.appendToTarget
+    },
+
+    hasSeparateActivator () {
+      return !this.$slots.activator && typeof this.activator === 'string'
+    },
+
+    activatorEl: {
+      get () {
+        if (this.hasSeparateActivator) return document.querySelector(this.activator)
+        return this.$el.firstElementChild
+      },
+      set () {
+
+      }
+    },
+
+    position () {
+      return (
+        (this.top && 'top') ||
+        (this.bottom && 'bottom') ||
+        (this.left && 'left') ||
+        (this.right && 'right') ||
+        'bottom'
+      )
+    },
+
+    alignment () {
+      return (
+        (['top', 'bottom'].includes(this.position) && this.alignLeft && 'left') ||
+        (['top', 'bottom'].includes(this.position) && this.alignRight && 'right') ||
+        (['left', 'right'].includes(this.position) && this.alignTop && 'top') ||
+        (['left', 'right'].includes(this.position) && this.alignBottom && 'bottom') ||
+        ''
+      )
     }
   },
 
@@ -176,14 +237,85 @@ export default {
 
           // Move the tooltip/menu elsewhere in the DOM.
           // wrapper.parentNode.insertBefore(this.detachableEl, wrapper)
-          this.appendToTarget.appendChild(this.detachableEl)
+          if (this.detachableEl) this.appendToTarget.appendChild(this.detachableEl)
           resolve()
         })
       })
     },
 
     removeFromDOM () {
-      if (this.detachableEl && this.detachableEl.parentNode) this.detachableEl.remove()
+      document.removeEventListener('mousedown', this.onOutsideMousedown)
+      window.removeEventListener('resize', this.onResize)
+      if (this.detachableEl && this.detachableEl.parentNode) {
+        this.detachableVisible = false
+        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) {
+      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.
+        eventName = eventName.replace('mouseenter', 'mouseover').replace('mouseleave', 'mouseout')
+        const handlerWrap = e => {
+          if (e.target?.matches && e.target.matches(this.activator)) 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 })
+      })
+    }
+
+    // Unwrap the overlay if any.
+    if (this.overlay) {
+      this.overlayEl = this.$refs.overlay?.$el
+      wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
+    }
+
+    if (this.modelValue) this.toggleMenu({ type: 'click', target: this.activatorEl })
+  },
+
+  beforeUnmount () {
+    this.close()
+
+    this.removeFromDOM()
+
+    // 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 }) => {
+        document.removeEventListener(eventName, handler)
+      })
+    }
+
+    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
+    if (this.activatorEl?.parentNode && this.$slots.activator) this.activatorEl.remove()
+  },
+
+  watch: {
+    modelValue (bool) {
+      if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
+    },
+    detachTo () {
+      this.removeFromDOM()
+      this.insertInDOM()
+    },
+    appendTo () {
+      this.removeFromDOM()
+      this.insertInDOM()
     }
   }
 }