wave-ui 3.28.0 → 4.0.1

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

@@ -2,6 +2,10 @@
  * A detachable element is an element that can be appended to another DOM node
  * (but keeping data-driven Vue DOM refreshes).
  * This mixin is used by w-tooltip & w-menu.
+ *
+ * Vue Teleport handles moving the floating content to the right DOM node.
+ * Event listeners are auto-attached to the activator slot's root element so
+ * callers no longer need the `template(#activator="{ on }") v-on="on"` pattern.
  */
 
 import { consoleWarn } from '../utils/console'
@@ -40,6 +44,11 @@ export default {
   },
 
   data: () => ({
+    /**
+     * When false (SSR + first hydrated paint), the Teleport subtree is not rendered so HTML matches.
+     * Set true in mounted(), then the menu/tooltip portal attaches — avoids Nuxt/Vue hydration mismatches.
+     */
+    detachableDomReady: false,
     // 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.
@@ -55,7 +64,11 @@ export default {
     // 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
+    detachableReady: false,
+    // The Vue Teleport target. Stored as data (not computed) so it is resolved lazily at
+    // open()-time — after the DOM is committed — rather than during VNode creation where
+    // document.querySelector() may return null for elements that are part of the same render batch.
+    teleportTarget: null
   }),
 
   computed: {
@@ -74,7 +87,8 @@ export default {
 
       let target = this.appendTo || defaultTarget
       if (target === true) target = defaultTarget
-      else if (this.appendTo === 'activator') target = this.$el.previousElementSibling || this.$el.nextElementSibling
+      // When appendTo is 'activator', teleport into the activator element itself.
+      else if (this.appendTo === 'activator') target = this.activatorEl
       else if (target && !['object', 'string'].includes(typeof target)) target = defaultTarget
       else if (typeof target === 'object' && !target.nodeType) {
         target = defaultTarget
@@ -111,7 +125,9 @@ export default {
           if (typeof document === 'undefined') return null
           return document.querySelector(this.activator)
         }
-        return this.$el.nextElementSibling
+        // For slot-based activators the component root ($el) is a comment fragment anchor in
+        // Vue 3 multi-root components; nextElementSibling is the activator slot's first real element.
+        return this.$el?.nextElementSibling || null
       },
       set () {}
     },
@@ -154,6 +170,7 @@ export default {
     // next open starts hidden. Done here rather than on close() to let the leave animation play.
     onAfterLeave () {
       this.detachableReady = false
+      this.detachableEl = null
     },
 
     unbindActivatorDocEvents () {
@@ -166,6 +183,61 @@ export default {
       }
     },
 
+    /**
+     * Single delegating handler for auto-attached slot-activator DOM events.
+     * Reads the current activatorEventHandlers computed each invocation so that changes to
+     * `disable`, `showOnHover`, etc. are always reflected without re-attaching.
+     */
+    _handleActivatorEvent (e) {
+      const handler = this.activatorEventHandlers[e.type]
+      if (handler) handler(e)
+    },
+
+    /**
+     * Attach DOM event listeners directly to the activator slot's root element.
+     * Called once from mounted(); a single delegating handler covers all event types so we never
+     * need to re-attach when props like `disable` or `showOnHover` change.
+     * ! \ This function uses the DOM - NO SSR.
+     */
+    _attachActivatorListeners () {
+      if (typeof document === 'undefined') return
+      const el = this.activatorEl
+      if (!el) return
+
+      // Inspect the activator slot's first VNode for pre-declared event handlers.
+      // When the slot root already declares onClick / onMouseenter etc. — whether on a native
+      // element (w-select, w-autocomplete) or on a component (w-button @click="...") — the
+      // parent is managing that event itself. Skip auto-attaching the competing handler to avoid
+      // open/close races (both toggle() and the explicit handler firing on the same click).
+      // With the new API, the default slot is the activator (no #activator slot used).
+      let existingHandlers = {}
+      const activatorSlot = this.$slots.activator || this.$slots.default
+      if (activatorSlot) {
+        const vnodes = activatorSlot()
+        const firstVnode = vnodes?.[0]
+        existingHandlers = firstVnode?.props || {}
+      }
+
+      this._activatorDomEl = el
+      this._activatorAttachedEvents = []
+      ;['click', 'mouseenter', 'mouseleave', 'focus', 'blur'].forEach(evt => {
+        // Skip if the slot element already binds this event (camelCase Vue prop name: onClick etc.).
+        const vueProp = `on${evt.charAt(0).toUpperCase()}${evt.slice(1)}`
+        if (existingHandlers[vueProp]) return
+        el.addEventListener(evt, this._handleActivatorEvent)
+        this._activatorAttachedEvents.push(evt)
+      })
+    },
+
+    _detachActivatorListeners () {
+      if (!this._activatorDomEl) return
+      ;(this._activatorAttachedEvents || []).forEach(evt => {
+        this._activatorDomEl.removeEventListener(evt, this._handleActivatorEvent)
+      })
+      this._activatorDomEl = null
+      this._activatorAttachedEvents = []
+    },
+
     // ! \ This function uses the DOM - NO SSR (only trigger from beforeMount and later).
     async open (e) {
       if (this.disable) return
@@ -181,13 +253,22 @@ export default {
 
       // Hide before entering the DOM; handles rapid re-opens where detachableReady is still true.
       this.detachableReady = false
+
+      // Resolve the teleport target here, at open()-time, so the DOM is fully committed and
+      // detachableDefaultRoot() (for nested menus/tooltips) returns the correct element.
+      // Setting teleportTarget and detachableVisible in the same synchronous block lets Vue
+      // batch both into a single render — the content is never shown at the wrong location.
+      if (typeof document !== 'undefined') this.teleportTarget = this.appendToTarget
+
       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()
+      // Wait for Vue Teleport to render the floating element into the target DOM node.
+      await this.$nextTick()
+      this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
 
       if (this.minWidth === 'activator' && this.activatorEl) {
         this.activatorWidth = this.activatorEl.offsetWidth
@@ -361,32 +442,6 @@ export default {
       }
     },
 
-    insertInDOM () {
-      return new Promise(resolve => {
-        this.$nextTick(() => {
-          this.detachableEl = this.$refs.detachable?.$el || this.$refs.detachable
-
-          // Move the tooltip/menu elsewhere in the DOM.
-          if (this.detachableEl && this.appendToTarget) this.appendToTarget.appendChild(this.detachableEl)
-          resolve()
-        })
-      })
-    },
-
-    removeFromDOM () {
-      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()
-        this.detachableEl = null
-      }
-    },
-
     // 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.
@@ -401,8 +456,8 @@ export default {
         eventName = eventName.replace('mouseenter', 'mouseover').replace('mouseleave', 'mouseout')
         const handlerWrap = 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)
+          if (activatorIsString && 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.
@@ -414,34 +469,39 @@ export default {
   },
 
   mounted () {
-    // If the activator is external.
-    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(() => {
-        if (this.activator) this.bindActivatorEvents()
-        if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
-      })
-    }
+    this.detachableDomReady = true
+    this.$nextTick(() => {
+      if (this.activator) {
+        // External activator: attach via document-level delegation.
+        this.bindActivatorEvents()
+      }
+      else {
+        // Slot-based activator: auto-attach DOM listeners to the slot's root element on next tick
+        // so the slot content is guaranteed to be in the DOM.
+        this.$nextTick(() => {
+          // Re-check activator prop (might have resolved from a Vue ref after the tick).
+          if (this.activator) this.bindActivatorEvents()
+          else this._attachActivatorListeners()
+
+          if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+        })
+      }
 
-    // Unwrap the overlay if any.
-    if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
+      // Unwrap the overlay if any.
+      if (this.overlay) this.overlayEl = this.$refs.overlay?.$el
 
-    if (this.modelValue && this.activator && !this.disable) {
-      this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
-    }
-    else if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+      if (this.modelValue && this.activator && !this.disable) {
+        this.toggle({ type: this.shouldShowOnClick ? 'click' : 'mouseenter', target: this.activatorEl })
+      }
+      else if (this.modelValue && !this.disable) this.open({ target: this.activatorEl })
+    })
   },
 
   unmounted () {
     this.close()
 
-    this.removeFromDOM()
-
-    // Remove the event listeners the exact same way they have been defined.
-    // Fixes issues on hot-reloading.
+    // Clean up slot-activator DOM listeners and external-activator document listeners.
+    this._detachActivatorListeners()
     this.unbindActivatorDocEvents()
   },
 
@@ -451,6 +511,8 @@ export default {
         this.unbindActivatorDocEvents()
         if (!disabled) this.bindActivatorEvents()
       }
+      // For slot-based activators, _handleActivatorEvent always reads the current
+      // activatorEventHandlers computed which already respects `disable`, so no re-attach needed.
       if (disabled) this.close()
       else if (this.modelValue) this.open({ target: this.activatorEl })
     },
@@ -461,9 +523,10 @@ export default {
         else if (!bool) this.close()
       }
     },
+
+    // Keep teleportTarget in sync when the appendTo prop changes at runtime.
     appendTo () {
-      this.removeFromDOM()
-      this.insertInDOM()
+      if (typeof document !== 'undefined') this.teleportTarget = this.appendToTarget
     }
   }
 }

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

@@ -21,7 +21,7 @@ export default {
      * Resolve host for applyRipple. Vue (and some browsers) can leave `event.currentTarget` null
      * on delegated handlers, which would otherwise skip the ripple entirely.
      */
-    onRipple (e, hostEl) {
+    onRipple (e, hostEl, options) {
       if (!this.rippleActive || !e) return
       let host = hostEl ?? e.currentTarget
       if (!host?.getBoundingClientRect) {
@@ -33,7 +33,7 @@ export default {
         host = this.$el
       }
       if (!host?.getBoundingClientRect) return
-      applyRipple(host, e)
+      applyRipple(host, e, options)
     }
   }
 }

package/src/wave-ui/scss/_base.scss

@@ -1,11 +1,43 @@
-@use "sass:map";
 @use "variables" as *;
 
 // The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
 // variable presets.
 :root {
-  --w-base-increment: #{$base-increment};
+  --w-base-font-size: 14px;
+  // Keeps spacing in sync when only --w-base-font-size is overridden (matches former Sass rounding).
+  --w-base-increment: round(nearest, calc(var(--w-base-font-size) / 4), 1px);
+  // Sass-only: must match $css-scope in _layout.scss and what dynamic-css reads for injected rules.
   --w-css-scope: #{$css-scope};
+  --w-layout-padding: 16px;
+  --w-border-radius: 4px;
+  --w-border-width: 1px;
+  --w-border-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 12%, transparent)};
+  --w-border: var(--w-border-width) solid var(--w-border-color);
+  --w-transition-duration: 0.25s;
+  --w-transition-duration-fast: 0.15s;
+  --w-transition-timing-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
+  --w-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+                  0 2px 2px 0 rgba(0, 0, 0, 0.15),
+                  0 1px 5px 0 rgba(0, 0, 0, 0.15);
+  --w-form-field-height: round(nearest, calc(2 * var(--w-base-font-size)), 1px);
+  // Even px step (same as former 2 * round(1.3 * $base-font-size / 2)).
+  --w-small-form-el-size: round(nearest, calc(1.3 * var(--w-base-font-size)), 2px);
+  --w-scrollbar-size: 8px;
+
+  @for $i from -6 through -1 {
+    --w-shadow-n#{-1 * $i}: 0 0 round(nearest, calc(#{$i} * var(--w-base-increment)), 1px) rgba(0, 0, 0, max(0.15, calc(0.15 * #{-$i} / 2))) inset;
+  }
+  --w-shadow-0: none;
+  @for $i from 1 through 6 {
+    --w-shadow-#{$i}: 0 0 1px rgba(0, 0, 0, 0.1),
+      round(nearest, calc(var(--w-base-increment) * #{$i} / 4), 1px) round(nearest, calc(var(--w-base-increment) * #{$i} / 4), 1px) round(nearest, calc(#{$i} * var(--w-base-increment)), 1px) rgba(0, 0, 0, max(0.15, calc(0.15 * #{$i} / 2)));
+  }
+
+  --w-base-color-muted: #{color-mix(in srgb, var(--w-base-color) 70%, transparent)};
+  --w-overlay-scrim-color: #{color-mix(in srgb, #000 30%, transparent)};
+  --w-surface-hover-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-surface-active-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 8%, transparent)};
+  --w-surface-selected-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
   --w-contrast-bg-o025-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2.5%, transparent)};
   --w-contrast-bg-o05-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
   --w-contrast-bg-o1-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 10%, transparent)};
@@ -18,26 +50,59 @@
   --w-contrast-bg-o8-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 80%, transparent)};
   --w-contrast-bg-o9-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 90%, transparent)};
 
+  --w-detachable-bg-color: var(--w-base-bg-color);
+  --w-detachable-color: var(--w-base-color);
+  --w-confirm-bg-color: var(--w-detachable-bg-color);
+  --w-confirm-color: var(--w-detachable-color);
+  --w-dialog-bg-color: var(--w-base-bg-color);
+  --w-divider-color: var(--w-border-color);
+  --w-drawer-max-size: 380px;
+  --w-drawer-bg-color: var(--w-base-bg-color);
+  --w-menu-bg-color: var(--w-detachable-bg-color);
+  --w-menu-color: var(--w-detachable-color);
+  --w-progress-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
+  --w-rating-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-slider-height: var(--w-base-increment);
+  --w-slider-track-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 15%, transparent)};
+  --w-slider-thumb-button-bg-color: var(--w-base-bg-color);
+  --w-slider-thumb-label-bg-color: var(--w-base-bg-color);
+  --w-slider-thumb-label-color: #{color-mix(in srgb, var(--w-base-color) 75%, transparent)};
+  --w-slider-step-label-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 20%, transparent)};
+  --w-slider-step-label-color: #{color-mix(in srgb, var(--w-base-color) 50%, transparent)};
+  --w-switch-inactive-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-switch-thumb-color: var(--w-base-bg-color);
+  --w-table-tr-odd-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 2%, transparent)};
+  --w-table-tr-hover-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 5%, transparent)};
+  --w-table-color: #{color-mix(in srgb, var(--w-contrast-color) 70%, transparent)};
+  --w-textarea-line-height: 1.2;
+  --w-timeline-bullet-color: var(--w-base-bg-color);
+  --w-timeline-bg-color: #{color-mix(in srgb, var(--w-contrast-bg-color) 25%, transparent)};
+  --w-toolbar-max-size: 380px;
+  --w-toolbar-bg-color: var(--w-base-bg-color);
+  --w-tooltip-bg-color: var(--w-detachable-bg-color);
+  --w-tooltip-color: var(--w-detachable-color);
+  --w-tooltip-border-color: var(--w-border-color);
+
   background-color: var(--w-base-bg-color);
   color: var(--w-base-color);
 }
 
 :root[data-theme="light"] {
-  --w-base-bg-color: #{map.get($theme-light, 'base-bg-color')};
-  --w-base-color: #{map.get($theme-light, 'base-color')};
-  --w-contrast-bg-color: #{map.get($theme-light, 'contrast-bg-color')};
-  --w-contrast-color: #{map.get($theme-light, 'contrast-color')};
-  --w-caption-color: #{map.get($theme-light, 'caption-color')};
-  --w-disabled-color: #{map.get($theme-light, 'disabled-color')};
+  --w-base-bg-color: #fff;
+  --w-base-color: #000;
+  --w-contrast-bg-color: #000;
+  --w-contrast-color: #fff;
+  --w-caption-color: #a0a0a0;
+  --w-disabled-color: #ccc;
 }
 
 :root[data-theme="dark"] {
-  --w-base-bg-color: #{map.get($theme-dark, 'base-bg-color')};
-  --w-base-color: #{map.get($theme-dark, 'base-color')};
-  --w-contrast-bg-color: #{map.get($theme-dark, 'contrast-bg-color')};
-  --w-contrast-color: #{map.get($theme-dark, 'contrast-color')};
-  --w-caption-color: #{map.get($theme-dark, 'caption-color')};
-  --w-disabled-color: #{map.get($theme-dark, 'disabled-color')};
+  --w-base-bg-color: #222;
+  --w-base-color: #fff;
+  --w-contrast-bg-color: #fff;
+  --w-contrast-color: #000;
+  --w-caption-color: #6e6e6e;
+  --w-disabled-color: #4a4a4a;
 }
 
 * {
@@ -72,13 +137,13 @@ a {text-decoration: none;}
 }
 
 .w-main {
-  padding-left: 3 * $base-increment;
-  padding-right: 3 * $base-increment;
+  padding-left: calc(3 * var(--w-base-increment));
+  padding-right: calc(3 * var(--w-base-increment));
 }
 
 // Structure classes.
 // ----------------------------------------------
 .content-wrap {
   position: relative;
-  padding: $layout-padding;
+  padding: var(--w-layout-padding);
 }

package/src/wave-ui/scss/_colors.scss

@@ -1,4 +1,3 @@
-@use 'sass:color';
 @use 'variables' as *;
 
 #{$css-scope} {
@@ -29,82 +28,14 @@
   // For each color, create a [color] and a [color]--bg associated classes,
   // + 6 shades lighter and 6 shades darker.
   @each $label, $color in $colors {
-    .#{$label}--bg {background-color: $color;}
-    .#{$label} {color: $color;}
+    .#{$label}--bg {background-color: var(--w-#{$label}-color);}
+    .#{$label} {color: var(--w-#{$label}-color);}
 
     @for $i from 1 through 6 {
-      $light-increment: 7.5;
-      $light-offset: 0;
-      $dark-increment: 6.2;
-      // Some color shades need bigger or smaller increments to end up with the same scale.
-      @if $label == 'deep-orange' {
-        $light-increment: 6.4;
-      }
-      @if $label == 'orange' {
-      }
-      @else if $label == 'green' {
-        $light-increment: 7.6;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'amber' {
-      }
-      @else if $label == 'pink' {
-        $light-increment: 6.7;
-        $light-offset: -4;
-      }
-      @else if $label == 'red' {
-        $light-increment: 6.5;
-        $light-offset: -1;
-      }
-      @else if $label == 'indigo' {
-        $light-increment: 8;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'deep-purple' {
-        $light-increment: 8;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'light-blue' {
-        $light-increment: 7.8;
-      }
-      @else if $label == 'light-green' {
-        $light-increment: 6;
-        $light-offset: -5;
-      }
-      @else if $label == 'lime' {
-        $light-increment: 6.2;
-        $light-offset: -6;
-      }
-      @else if $label == 'yellow' {
-        $light-increment: 5.5;
-        $light-offset: -8;
-      }
-      @else if $label == 'purple' {
-        $light-increment: 6.5;
-        $light-offset: -8.5;
-      }
-      @else if $label == 'cyan' {
-        $light-increment: 9.4;
-        $light-offset: 6.5;
-        $dark-increment: 5.7;
-      }
-      @else if $label == 'teal' {
-        $light-increment: 9.6;
-        $light-offset: 5;
-        $dark-increment: 5.4;
-      }
-      @else if $label == 'blue' {
-        $light-increment: 6.8;
-        $dark-increment: 6.8;
-      }
-      @else if $label == 'brown' {
-        $light-increment: 8.8;
-        $dark-increment: 5;
-      }
-      .#{$label}-light#{$i}--bg {background-color: color.adjust($color, $lightness: $light-increment * $i * 1% - $light-offset);}
-      .#{$label}-light#{$i} {color: color.adjust($color, $lightness: $light-increment * $i * 1% - $light-offset);}
-      .#{$label}-dark#{$i}--bg {background-color: color.adjust($color, $lightness: - $dark-increment * $i * 1%);}
-      .#{$label}-dark#{$i} {color: color.adjust($color, $lightness: - $dark-increment * $i * 1%);}
+      .#{$label}-light#{$i}--bg {background-color: var(--w-#{$label}-light#{$i}-color);}
+      .#{$label}-light#{$i} {color: var(--w-#{$label}-light#{$i}-color);}
+      .#{$label}-dark#{$i}--bg {background-color: var(--w-#{$label}-dark#{$i}-color);}
+      .#{$label}-dark#{$i} {color: var(--w-#{$label}-dark#{$i}-color);}
     }
   }