wave-ui 1.48.0 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

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

@@ -74,26 +74,16 @@ export default {
     menuClass: { type: [String, Object, Array] },
     titleClass: { type: [String, Object, Array] },
     contentClass: { type: [String, Object, Array] },
-    // Position.
     arrow: { type: Boolean }, // The small triangle pointing toward the activator.
-    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] },
     minWidth: { type: [Number, String] }, // can be like: `40`, `5em`, `activator`.
     overlay: { type: Boolean },
     overlayClass: { type: [String, Object, Array] },
     overlayProps: { type: Object }, // Allow passing down an object of props to the w-overlay component.
     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'],
@@ -107,7 +97,6 @@ export default {
       top: 0,
       left: 0
     },
-    activatorEl: null,
     activatorWidth: 0,
     detachableEl: null,
     timeoutId: null
@@ -118,32 +107,15 @@ export default {
      * Other computed in the detachable mixin:
      * - `appendToTarget`
      * - `detachableParentEl`
+     * - `activatorEl`
+     * - `position`
+     * - `alignment`
      **/
 
     transitionName () {
       return this.transition || 'scale-fade'
     },
 
-    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') ||
-        ''
-      )
-    },
-
     menuMinWidth () {
       if (this.minWidth === 'activator') return this.activatorWidth ? `${this.activatorWidth}px` : 0
       else return isNaN(this.minWidth) ? this.minWidth : (this.minWidth ? `${this.minWidth}px` : 0)
@@ -197,8 +169,8 @@ export default {
 
       if (this.showOnHover) {
         handlers = {
-          focus: this.toggleMenu,
-          blur: this.toggleMenu,
+          focus: this.toggle,
+          blur: this.toggle,
           mouseenter: e => {
             this.hoveringActivator = true
             this.open(e)
@@ -213,10 +185,10 @@ export default {
         }
         // Check the window exists: SSR-proof.
         if (typeof window !== 'undefined' && 'ontouchstart' in window) {
-          handlers.click = this.toggleMenu
+          handlers.click = this.toggle
         }
       }
-      else handlers = { click: this.toggleMenu }
+      else handlers = { click: this.toggle }
       return handlers
     }
   },
@@ -233,7 +205,7 @@ export default {
      **/
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    toggleMenu (e) {
+    toggle (e) {
       let shouldShowMenu = this.detachableVisible
       if ('ontouchstart' in window && this.showOnHover && e.type === 'click') {
         shouldShowMenu = !shouldShowMenu
@@ -250,19 +222,22 @@ export default {
 
       this.timeoutId = clearTimeout(this.timeoutId)
 
-      if (shouldShowMenu) {
-        this.$emit('update:modelValue', (this.detachableVisible = true))
-        this.$emit('input', true)
-        this.$emit('open')
-
-        this.open(e)
-      }
+      if (shouldShowMenu) 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
@@ -310,43 +285,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)
-
-    // Unwrap the overlay.
-    if (this.overlay) {
-      this.overlayEl = this.$refs.overlay?.$el
-      wrapper.parentNode.insertBefore(this.overlayEl, wrapper)
-    }
-
-    if (this.value) this.toggleMenu({ type: 'click', target: this.activatorEl })
-  },
-
-  beforeDestroy () {
-    this.removeFromDOM()
-    if (this.overlay && this.overlayEl.parentNode) this.overlayEl.remove()
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
-  },
-
-  watch: {
-    value (bool) {
-      if (!!bool !== this.detachableVisible) this.toggleMenu({ 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/components/w-notification-manager.vue

@@ -11,8 +11,8 @@ transition-group(
       :key="notif._uid"
       v-model="notif._value"
       @close="notifManager.dismiss(notif._uid)"
-      v-bind="notif")
-      | {{ notif.message }}
+      v-bind="notifProps(notif)")
+      div(v-html="notif.message")
 </template>
 
 <script>
@@ -42,6 +42,13 @@ export default {
     }
   },
 
+  methods: {
+    notifProps (notif) {
+      const { _value, _uid, message, timeout, ...props } = notif
+      return props
+    }
+  },
+
   created () {
     this.notifManager = new NotificationManager()
   },

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" ref="detachable" :class="classes" :style="styles")
       slot
@@ -36,21 +36,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'],
@@ -58,12 +48,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
   }),
@@ -73,6 +62,9 @@ export default {
      * Other computed in the detachable mixin:
      * - `appendToTarget`
      * - `detachableParentEl`
+     * - `activatorEl`
+     * - `position`
+     * - `alignment`
      **/
 
     tooltipClasses () {
@@ -84,26 +76,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,
@@ -130,7 +102,7 @@ export default {
       }
     },
 
-    eventHandlers () {
+    activatorEventHandlers () {
       let handlers = {}
       if (this.showOnClick) handlers = { click: this.toggle }
       else {
@@ -176,19 +148,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
@@ -236,37 +211,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.value) this.toggle({ type: 'click', target: this.activatorEl })
-  },
-
-  beforeDestroy () {
-    this.removeFromDOM()
-
-    if (this.activatorEl && this.activatorEl.parentNode) this.activatorEl.remove()
-  },
-
-  watch: {
-    value (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.$scopedSlots.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.$scopedSlots.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.value) this.toggleMenu({ type: 'click', target: this.activatorEl })
+  },
+
+  beforeDestroy () {
+    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.$scopedSlots.activator) this.activatorEl.remove()
+  },
+
+  watch: {
+    value (bool) {
+      if (!!bool !== this.detachableVisible) this.toggle({ type: 'click', target: this.activatorEl })
+    },
+    detachTo () {
+      this.removeFromDOM()
+      this.insertInDOM()
+    },
+    appendTo () {
+      this.removeFromDOM()
+      this.insertInDOM()
     }
   }
 }