wave-ui 3.25.5 → 3.26.0

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

@@ -6,6 +6,13 @@
 
 import { consoleWarn } from '../utils/console'
 
+// Minimum space (px) from the viewport edge when flipping / nudging.
+const VIEWPORT_MARGIN = 4
+
+function oppositePlacement (side) {
+  return { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }[side] || 'bottom'
+}
+
 export default {
   props: {
     // Position.
@@ -23,7 +30,9 @@ export default {
     zIndex: { type: [Number, String, Boolean] },
     // Optionally designate an external activator.
     // The activator can be a DOM string selector, a ref or a DOM node.
-    activator: { type: [String, Object] }
+    activator: { type: [String, Object] },
+    // When true, the tooltip/menu does not open; the activator stays in the DOM.
+    disable: { type: Boolean, default: false }
   },
 
   inject: {
@@ -40,13 +49,21 @@ export default {
     // The user may open and close the detachable so fast (like when toggling on hover) that it
     // should not show up at all. Keep the ability to cancel the opening timer (if there is a set
     // delay prop).
-    openTimeout: null
+    openTimeout: null,
+    // When set, overrides `position` for CSS (arrow / slide direction) after viewport auto-flip.
+    viewportPlacementOverride: null,
+    // Set to true by computeDetachableCoords after positioning, false until then.
+    // Components use this to bind visibility:hidden, so the element is never visible at the
+    // wrong position before its coordinates are calculated.
+    detachableReady: false
   }),
 
   computed: {
     // DOM element to attach tooltip/menu to.
     // ! \ This computed uses the DOM - NO SSR (only trigger from beforeMount and later).
     appendToTarget () {
+      if (typeof document === 'undefined') return null
+
       let defaultTarget = '.w-app'
 
       // If used inside a w-dialog, w-drawer, or w-menu without an appendTo, default to that open
@@ -91,6 +108,7 @@ export default {
         if (this.hasSeparateActivator) {
           const activator = this.activator?.$el || this.activator
           if (activator instanceof HTMLElement) return activator
+          if (typeof document === 'undefined') return null
           return document.querySelector(this.activator)
         }
         return this.$el.nextElementSibling
@@ -123,12 +141,35 @@ export default {
       // whereas the w-menu has `showOnClick`.
       return (this.$options.props.showOnHover && !this.showOnHover) ||
         (this.$options.props.showOnClick && this.showOnClick)
+    },
+
+    /** Placement used for CSS classes (arrows, margins); reflects viewport flip when applied. */
+    effectiveDetachablePosition () {
+      return this.viewportPlacementOverride || this.position
     }
   },
 
   methods: {
+    // Called by <transition @after-leave>. Resets detachableReady after the leave animation so the
+    // next open starts hidden. Done here rather than on close() to let the leave animation play.
+    onAfterLeave () {
+      this.detachableReady = false
+    },
+
+    unbindActivatorDocEvents () {
+      if (typeof document === 'undefined') return
+      if (this.docEventListenersHandlers.length) {
+        this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
+          document.removeEventListener(eventName, handler)
+        })
+        this.docEventListenersHandlers = []
+      }
+    },
+
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     async open (e) {
+      if (this.disable) return
+
       // 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 => (this.openTimeout = setTimeout(resolve, this.delay)))
@@ -136,6 +177,10 @@ export default {
       // Cancel opening if the timeout has been cancelled by blur event (when going fast).
       if (this.delay && !this.openTimeout) return
 
+      if (this.disable) return
+
+      // Hide before entering the DOM; handles rapid re-opens where detachableReady is still true.
+      this.detachableReady = false
       this.detachableVisible = true
 
       // If the activator is external, there might be multiple,
@@ -144,9 +189,12 @@ export default {
 
       await this.insertInDOM()
 
-      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
+      if (this.minWidth === 'activator' && this.activatorEl) {
+        this.activatorWidth = this.activatorEl.offsetWidth
+      }
 
       if (!this.noPosition) this.computeDetachableCoords()
+      else this.detachableReady = true
 
       // 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
@@ -157,12 +205,20 @@ export default {
         this.$emit('open')
       }, 0)
 
-      if (!this.persistent) document.addEventListener('mousedown', this.onOutsideMousedown)
-      if (!this.noPosition) window.addEventListener('resize', this.onResize)
+      if (typeof document !== 'undefined' && !this.persistent) {
+        document.addEventListener('mousedown', this.onOutsideMousedown)
+      }
+      if (typeof window !== 'undefined' && !this.noPosition) {
+        window.addEventListener('resize', this.onResize)
+      }
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     getActivatorCoordinates () {
+      if (typeof window === 'undefined' || typeof document === 'undefined' || !this.activatorEl || !this.detachableParentEl) {
+        return { top: 0, left: 0, width: 0, height: 0 }
+      }
+
       // Get the activator coordinates relative to window.
       const { top, left, width, height } = this.activatorEl.getBoundingClientRect()
       let coords = { top, left, width, height }
@@ -181,113 +237,127 @@ export default {
       return coords
     },
 
-    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
-    computeDetachableCoords () {
-      // Get the activator coordinates.
-      let { top, left, width, height } = this.getActivatorCoordinates()
+    /**
+     * Apply `placement` (top | bottom | left | right) to activator-relative coords.
+     * @returns {{ top: number, left: number }}
+     */
+    _applyDetachablePlacement (placement, baseCoords, computedStyles) {
+      let { top, left, width, height } = baseCoords
+      const el = this.detachableEl
 
-      // Prevent error in case the detachable component unmounted hook is fired but the activator
-      // is still in the DOM until the end of a transition and the user toggles it.
-      // Unmounted is called straight away from beforeLeave: https://github.com/vuejs/core/issues/994
-      if (!this.detachableEl) return
-
-      // 1. First display the menu but hide it (So we can get its dimension).
-      // --------------------------------------------------
-      this.detachableEl.style.visibility = 'hidden'
-      this.detachableEl.style.display = 'flex'
-      const computedStyles = window.getComputedStyle(this.detachableEl, null)
-
-      // 2. Position the menu top, left, right, bottom and apply chosen alignment.
-      // --------------------------------------------------
-      // Subtract half or full activator width or height and menu width or height according to the
-      // menu alignment.
-      // Note: the menu position relies on transform translate, the custom animation may override the
-      // css transform property so do without it i.e. no translateX(-50%), and recalculate top & left
-      // manually.
-      switch (this.position) {
+      switch (placement) {
         case 'top': {
-          top -= this.detachableEl.offsetHeight
+          top -= el.offsetHeight
           if (this.alignRight) {
-            // left: 100% of activator.
-            left += width - this.detachableEl.offsetWidth +
-                    parseInt(computedStyles.getPropertyValue('border-right-width'))
+            left += width - el.offsetWidth +
+              parseInt(computedStyles.getPropertyValue('border-right-width'), 10)
           }
-          else if (!this.alignLeft) left += (width - this.detachableEl.offsetWidth) / 2 // left: 50% of activator - half menu width.
+          else if (!this.alignLeft) left += (width - el.offsetWidth) / 2
           break
         }
         case 'bottom': {
           top += height
           if (this.alignRight) {
-            // left: 100% of activator.
-            left += width - this.detachableEl.offsetWidth +
-                    parseInt(computedStyles.getPropertyValue('border-right-width'))
+            left += width - el.offsetWidth +
+              parseInt(computedStyles.getPropertyValue('border-right-width'), 10)
           }
-          else if (!this.alignLeft) left += (width - this.detachableEl.offsetWidth) / 2 // left: 50% of activator - half menu width.
+          else if (!this.alignLeft) left += (width - el.offsetWidth) / 2
           break
         }
         case 'left': {
-          left -= this.detachableEl.offsetWidth
-          if (this.alignBottom) top += height - this.detachableEl.offsetHeight
-          else if (!this.alignTop) top += (height - this.detachableEl.offsetHeight) / 2 // top: 50% of activator - half menu height.
+          left -= el.offsetWidth
+          if (this.alignBottom) top += height - el.offsetHeight
+          else if (!this.alignTop) top += (height - el.offsetHeight) / 2
           break
         }
         case 'right': {
           left += width
           if (this.alignBottom) {
-            top += height - this.detachableEl.offsetHeight +
-                   parseInt(computedStyles.getPropertyValue('margin-top'))
+            top += height - el.offsetHeight +
+              parseInt(computedStyles.getPropertyValue('margin-top'), 10)
           }
           else if (!this.alignTop) {
-            top += (height - this.detachableEl.offsetHeight) / 2 + // top: 50% of activator - half menu height.
-                   parseInt(computedStyles.getPropertyValue('margin-top'))
+            top += (height - el.offsetHeight) / 2 +
+              parseInt(computedStyles.getPropertyValue('margin-top'), 10)
           }
           break
         }
       }
+      return { top, left }
+    },
 
-      // 3. Keep fully in viewport.
-      // @todo: do this.
-      // --------------------------------------------------
-      // if (this.position === 'top' && ((top - this.detachableEl.offsetHeight) < 0)) {
-      //   const margin = - parseInt(computedStyles.getPropertyValue('margin-top'))
-      //   top -= top - this.detachableEl.offsetHeight - margin - marginFromWindowSide
-      // }
-      // else if (this.position === 'left' && left - this.detachableEl.offsetWidth < 0) {
-      //   const margin = - parseInt(computedStyles.getPropertyValue('margin-left'))
-      //   left -= left - this.detachableEl.offsetWidth - margin - marginFromWindowSide
-      // }
-      // else if (this.position === 'right' && left + width + this.detachableEl.offsetWidth > window.innerWidth) {
-      //   const margin = parseInt(computedStyles.getPropertyValue('margin-left'))
-      //   left -= left + width + this.detachableEl.offsetWidth - window.innerWidth + margin + marginFromWindowSide
-      // }
-      // else if (this.position === 'bottom' && top + height + this.detachableEl.offsetHeight > window.innerHeight) {
-      //   const margin = parseInt(computedStyles.getPropertyValue('margin-top'))
-      //   top -= top + height + this.detachableEl.offsetHeight - window.innerHeight + margin + marginFromWindowSide
-      // }
-
-      // 4. Hide the menu again so the transition happens correctly.
-      // --------------------------------------------------
-      this.detachableEl.style.visibility = null
-
-      // The menu coordinates are also recalculated while resizing window with open menu: keep the menu visible.
-      if (!this.detachableVisible) this.detachableEl.style.display = 'none'
+    // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
+    async computeDetachableCoords () {
+      if (typeof window === 'undefined' || !this.detachableEl) return
+
+      // Prevent error in case the detachable component unmounted hook is fired but the activator
+      // is still in the DOM until the end of a transition and the user toggles it.
+      // Unmounted is called straight away from beforeLeave: https://github.com/vuejs/core/issues/994
+      if (!this.activatorEl || !this.detachableParentEl) return
+
+      this.viewportPlacementOverride = null
+
+      // Measure the element (already hidden via visibility:hidden in the component :style).
+      this.detachableEl.style.display = 'flex'
+      const computedStyles = window.getComputedStyle(this.detachableEl, null)
+      const elW = this.detachableEl.offsetWidth
+      const elH = this.detachableEl.offsetHeight
+
+      // Flip to the opposite side if the element won't fit — pure arithmetic on the viewport rect.
+      let placement = this.position
+      if (!this.noPosition) {
+        const m = VIEWPORT_MARGIN
+        const vw = window.innerWidth
+        const vh = window.innerHeight
+        const { top: aTop, left: aLeft, width: aW, height: aH } = this.activatorEl.getBoundingClientRect()
+
+        if (
+          (placement === 'bottom' && aTop + aH + elH > vh - m && aTop - elH >= m) ||
+          (placement === 'top'    && aTop - elH < m            && aTop + aH + elH <= vh - m) ||
+          (placement === 'right'  && aLeft + aW + elW > vw - m && aLeft - elW >= m) ||
+          (placement === 'left'   && aLeft - elW < m           && aLeft + aW + elW <= vw - m)
+        ) {
+          placement = oppositePlacement(placement)
+          this.viewportPlacementOverride = placement
+        }
+      }
+
+      // Compute the parent-relative top/left for the chosen placement.
+      const baseCoords = this.getActivatorCoordinates()
+      const { top, left } = this._applyDetachablePlacement(placement, baseCoords, computedStyles)
 
       this.detachableCoords = { top, left }
+      // Reveal: detachableReady = true makes the :style binding clear visibility:hidden.
+      // Always await $nextTick so coordinates, placement class, and visibility are flushed atomically.
+      this.detachableReady = true
+      await this.$nextTick()
+
+      // Guard against the component being unmounted while awaiting.
+      if (!this.detachableEl) return
+      if (!this.detachableVisible) this.detachableEl.style.display = 'none'
     },
 
     onResize () {
-      if (this.minWidth === 'activator') this.activatorWidth = this.activatorEl.offsetWidth
+      if (typeof window === 'undefined') return
+      if (this.minWidth === 'activator' && this.activatorEl) {
+        this.activatorWidth = this.activatorEl.offsetWidth
+      }
       this.computeDetachableCoords()
     },
 
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     onOutsideMousedown (e) {
+      if (!this.detachableEl || !this.activatorEl) return
       if (!this.detachableEl.contains(e.target) && !this.activatorEl.contains(e.target)) {
         this.$emit('update:modelValue', (this.detachableVisible = false))
         this.$emit('input', false)
         this.$emit('close')
-        document.removeEventListener('mousedown', this.onOutsideMousedown)
-        window.removeEventListener('resize', this.onResize)
+        if (typeof document !== 'undefined') {
+          document.removeEventListener('mousedown', this.onOutsideMousedown)
+        }
+        if (typeof window !== 'undefined') {
+          window.removeEventListener('resize', this.onResize)
+        }
       }
     },
 
@@ -297,15 +367,19 @@ export default {
           this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
 
           // Move the tooltip/menu elsewhere in the DOM.
-          if (this.detachableEl) this.appendToTarget.appendChild(this.detachableEl)
+          if (this.detachableEl && this.appendToTarget) this.appendToTarget.appendChild(this.detachableEl)
           resolve()
         })
       })
     },
 
     removeFromDOM () {
-      document.removeEventListener('mousedown', this.onOutsideMousedown)
-      window.removeEventListener('resize', this.onResize)
+      if (typeof document !== 'undefined') {
+        document.removeEventListener('mousedown', this.onOutsideMousedown)
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.onResize)
+      }
       if (this.detachableEl?.parentNode) {
         this.detachableVisible = false
         this.detachableEl.remove()
@@ -317,6 +391,8 @@ export default {
     // the activator when toggling.
     // This way, the activator can be a future DOM element, that is not yet in the DOM.
     bindActivatorEvents () {
+      if (typeof document === 'undefined') return
+
       const activatorIsString = typeof this.activator === 'string'
 
       Object.entries(this.activatorEventHandlers).forEach(([eventName, handler]) => {
@@ -346,17 +422,17 @@ export default {
     else {
       this.$nextTick(() => {
         if (this.activator) this.bindActivatorEvents()
-        if (this.modelValue) this.open({ target: this.activatorEl })
+        if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
       })
     }
 
     // Unwrap the overlay if any.
     if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
-    if (this.modelValue && this.activator) {
+    if (this.modelValue && this.activator && !this.disable) {
       this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
     }
-    else if (this.modelValue) this.open({ target: this.activatorEl })
+    else if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
   },
 
   unmounted () {
@@ -366,18 +442,23 @@ export default {
 
     // Remove the event listeners the exact same way they have been defined.
     // Fixes issues on hot-reloading.
-    if (this.docEventListenersHandlers.length) {
-      this.docEventListenersHandlers.forEach(({ eventName, handler }) => {
-        document.removeEventListener(eventName, handler)
-      })
-    }
+    this.unbindActivatorDocEvents()
   },
 
   watch: {
+    disable (disabled) {
+      if (this.activator) {
+        this.unbindActivatorDocEvents()
+        if (!disabled) this.bindActivatorEvents()
+      }
+      if (disabled) this.close()
+      else if (this.modelValue) this.open({ target: this.activatorEl })
+    },
+
     modelValue (bool) {
       if (!!bool !== this.detachableVisible) {
-        if (bool) this.open({ target: this.activatorEl })
-        else this.close()
+        if (bool && !this.disable) this.open({ target: this.activatorEl })
+        else if (!bool) this.close()
       }
     },
     appendTo () {