wave-ui 3.27.1 → 3.28.0

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

@@ -108,12 +108,21 @@ component(
  * @todo Share the common parts between w-input, w-textarea & w-select.
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import { computed } from 'vue'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-select',
   mixins: [FormElementMixin],
 
+  setup (props) {
+    const { waveUiUseId } = useWaveUiFormIds()
+    const selectListId = computed(() =>
+      props.id ? `${props.id}__listbox` : `w-select-menu--${waveUiUseId}`
+    )
+    return { waveUiUseId, selectListId }
+  },
+
   props: {
     items: { type: Array, required: true },
     modelValue: {}, // v-model on selected item if any.
@@ -147,7 +156,7 @@ export default {
     light: { type: Boolean },
     fitToContent: { type: Boolean }
     // Props from mixin: id, name, disabled, readonly, required, tabindex, validators.
-    // Computed from mixin: inputId, selectListId, inputName, isDisabled & isReadonly.
+    // Computed from mixin: inputId, inputName, isDisabled & isReadonly. `selectListId` from setup.
   },
 
   emits: ['input', 'update:modelValue', 'focus', 'blur', 'item-click', 'item-select', 'click:inner-icon-left', 'click:inner-icon-right'],
@@ -166,11 +175,6 @@ export default {
   }),
 
   computed: {
-    /** Prefix for w-list item ids (`id_item-N`) and ARIA listbox linkage; stable with SSR. */
-    selectListId () {
-      return this.id ? `${this.id}__listbox` : `w-select-menu--${this.waveUiUseId}`
-    },
-
     // Check all the items and add a `value` if missing, containing either: value, label or index
     // in this order.
     selectItems () {

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

@@ -78,12 +78,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-slider',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { type: Number, default: 0 },
     color: { type: String, default: 'primary' },

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

@@ -53,13 +53,17 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-switch',
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: false }, // v-model.
     label: { type: String, default: '' },

package/src/wave-ui/components/w-tabs/index.vue

@@ -5,6 +5,7 @@
       v-for="(item, i) in tabs"
       :key="i"
       :class="barItemClasses(item)"
+      @pointerdown="onTabsBarPointerDown($event, item)"
       @click="!item._disabled && item._uid !== activeTabUid && openTab(item._uid)"
       @focus="$emit('focus', getOriginalItem(item))"
       :tabindex="!item._disabled && 0"
@@ -73,11 +74,14 @@
 <script>
 import { useId } from 'vue'
 import { objectifyClasses } from '../../utils/index'
+import RippleMixin from '../../mixins/ripple'
 import TabContent from './tab-content.vue'
 
 export default {
   name: 'w-tabs',
 
+  mixins: [RippleMixin],
+
   setup () {
     return { tabsStableId: useId() }
   },
@@ -235,6 +239,7 @@ export default {
       const isActive = item._index === this.activeTabIndex
 
       return {
+        'w-ripple': this.rippleActive,
         [`${this.bgColor}--bg`]: this.bgColor,
         [this.color]: this.color && !item._disabled && !(this.activeClass && isActive),
         'w-tabs__bar-item--active': isActive,
@@ -244,6 +249,11 @@ export default {
       }
     },
 
+    onTabsBarPointerDown (e, item) {
+      if (item._disabled) return
+      this.onRipple(e)
+    },
+
     // Switching tabs.
     openTab (uid) {
       this.prevTabIndex = this.activeTabIndex // To resolve the transition direction.

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

@@ -1,6 +1,7 @@
 <template lang="pug">
 span.w-tag(
   @click="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
+  @pointerdown="onTagPointerDown"
   @keypress.enter="$emit('update:modelValue', !modelValue);$emit('input', !modelValue)"
   :class="classes"
   :role="modelValue !== -1 && 'button'"
@@ -17,9 +18,13 @@ span.w-tag(
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
+
 export default {
   name: 'w-tag',
 
+  mixins: [RippleMixin],
+
   props: {
     modelValue: { type: [Boolean, Number], default: -1 },
     color: { type: String },
@@ -58,6 +63,7 @@ export default {
         [this.color]: this.color,
         [`${this.bgColor}--bg`]: this.bgColor,
         [`size--${this.presetSize}`]: true,
+        'w-ripple': this.rippleActive && this.modelValue !== -1,
         'w-tag--dark': this.dark,
         'w-tag--light': this.light,
         'w-tag--clickable': this.modelValue !== -1,
@@ -74,6 +80,14 @@ export default {
         height: (!isNaN(this.height) ? `${this.height}px` : this.height) || null
       }
     }
+  },
+
+  methods: {
+    onTagPointerDown (e) {
+      if (this.modelValue === -1) return
+      if (e.target.closest?.('.w-tag__closable')) return
+      this.onRipple(e)
+    }
   }
 }
 </script>

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

@@ -67,13 +67,17 @@ component(
  * @todo Share the common parts between w-input, w-textarea & w-select.
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-textarea',
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the textarea not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: '' },
     label: { type: String },

package/src/wave-ui/core.js

@@ -4,6 +4,7 @@ import { consoleWarn } from './utils/console'
 import { colorPalette, generateColorShades, flattenColors } from './utils/colors'
 import { injectColorsCSSInDOM, injectCSSInDOM } from './utils/dynamic-css'
 import { injectNotifManagerInDOM, NotificationManager } from './utils/notification-manager'
+import { waveRippleDirective } from './utils/wave-ripple-directive'
 import './scss/index.scss'
 
 let mounted = false
@@ -122,6 +123,7 @@ export default class WaveUI {
         window.addEventListener('scroll', f)
       }
     })
+    app.directive('waveRipple', waveRippleDirective)
 
     // Register a-la-carte components from the given list.
     const { components = {} } = options || {}

package/src/wave-ui/mixins/form-elements.js

@@ -1,5 +1,10 @@
 import { useId } from 'vue'
 
+/** SSR-safe id suffix; call from each component's `setup()` (mixin `setup` is not reliably merged). */
+export function useWaveUiFormIds () {
+  return { waveUiUseId: useId() }
+}
+
 export default {
   inject: {
     // Used in each form component to determine whether to use the w-form-element wrap or not.
@@ -9,14 +14,6 @@ export default {
     formProps: { default: () => ({ disabled: false, readonly: false }) }
   },
 
-  setup () {
-    return {
-      // SSR-safe unique suffix (Vue 3.5+). Must not start with `_`/`$` or Vue omits it from the
-      // render context and template/slot access can warn or fail (see exposeSetupStateOnRenderContext).
-      waveUiUseId: useId()
-    }
-  },
-
   props: {
     /** When set, used as the DOM `id` and for associated labels (`for`). SSR-safe when provided. */
     id: { type: String },

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

@@ -0,0 +1,39 @@
+import { applyRipple, isRippleEnabled } from '../utils/ripple'
+
+export default {
+  inject: {
+    $waveui: { from: '$waveui', default: () => ({ config: { ripple: true } }) }
+  },
+
+  props: {
+    /** Set to `true` to disable the ripple for this component only. */
+    noRipple: { type: Boolean, default: undefined }
+  },
+
+  computed: {
+    rippleActive () {
+      return isRippleEnabled(this.noRipple ? false : undefined, this.$waveui)
+    }
+  },
+
+  methods: {
+    /**
+     * 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) {
+      if (!this.rippleActive || !e) return
+      let host = hostEl ?? e.currentTarget
+      if (!host?.getBoundingClientRect) {
+        const raw = e.target
+        const el = raw?.nodeType === 1 ? raw : raw?.parentElement
+        host = el?.closest?.('.w-ripple') ?? null
+      }
+      if (!host?.getBoundingClientRect && this.$el instanceof Element && this.$el.classList?.contains('w-ripple')) {
+        host = this.$el
+      }
+      if (!host?.getBoundingClientRect) return
+      applyRipple(host, e)
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+// Pointer ripple (v-wave-ripple + components using applyRipple).
+// Note: avoid overflow:hidden here so hosts like w-button keep focus rings that extend past the box.
+.w-ripple {
+  position: relative;
+
+  .w-ripple__ink-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    border-radius: inherit;
+    pointer-events: none;
+  }
+}
+
+.w-ripple__ink {
+  position: absolute;
+  z-index: 2; // Above .w-button:before hover overlay (explicit z-index:0 on :before keeps ink visible).
+  border-radius: 50%;
+  pointer-events: none;
+  transform: scale(0);
+  opacity: 0.5;
+  // currentColor is often invisible on filled buttons (e.g. white on white); use a neutral ink.
+  background-color: rgba(#000, 0.22);
+  will-change: transform, opacity;
+  animation: w-ripple-ink-expand 0.65s ease-out forwards;
+}
+
+html[data-theme='dark'] .w-ripple__ink {
+  background-color: rgba(#fff, 0.2);
+}
+
+@keyframes w-ripple-ink-expand {
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}

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

@@ -4,3 +4,4 @@
 @forward 'colors';
 @forward 'icons';
 @forward 'transitions';
+@forward 'ripple';

package/src/wave-ui/scss/variables/_variables.scss

@@ -152,6 +152,4 @@ $tooltip-border-color: $border-color !default;
 // w-scrollable.
 // --------------------------------------------------------
 $scrollbar-size: 8px !default;
-$scrollbar-bg-color: color-mix(in srgb, var(--w-contrast-bg-color) 8%, var(--w-base-bg-color)) !default;
-$scrollbar-thumb-color: color-mix(in srgb, var(--w-contrast-bg-color) 25%, var(--w-base-bg-color)) !default;
 // --------------------------------------------------------

package/src/wave-ui/utils/config.js

@@ -57,6 +57,8 @@ const config = reactive({
     align: 'right',
     transition: 'default' // Sliding from the side by default.
   },
+  // Default ripple for v-wave-ripple and components (unless their `no-ripple` prop is set).
+  ripple: true,
   presets: {} // User presets for each component.
 })
 

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

@@ -0,0 +1,71 @@
+/**
+ * Material-style pointer ripple: appends a transient node at the pointer, removes after animation.
+ * SSR-safe: no-op when window/document are unavailable.
+ *
+ * @param {HTMLElement} hostEl
+ * @param {PointerEvent|MouseEvent|TouchEvent} event
+ * @param {{ disabled?: boolean }} [options]
+ */
+export function applyRipple (hostEl, event, options = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return
+  if (!hostEl?.ownerDocument || options.disabled) return
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches) return
+
+  let clientX = typeof event.clientX === 'number' ? event.clientX : null
+  let clientY = typeof event.clientY === 'number' ? event.clientY : null
+  if ((clientX == null || clientY == null) && event.touches?.length) {
+    clientX = event.touches[0].clientX
+    clientY = event.touches[0].clientY
+  }
+  if (clientX == null || clientY == null) return
+
+  const rect = hostEl.getBoundingClientRect()
+  const maxSide = Math.max(rect.width, rect.height)
+  const size = Math.max(maxSide * 2.5, 48)
+  const x = clientX - rect.left - size / 2
+  const y = clientY - rect.top - size / 2
+
+  const inkContainer = document.createElement('span')
+  inkContainer.className = 'w-ripple__ink-container'
+  inkContainer.setAttribute('aria-hidden', 'true')
+
+  const ink = document.createElement('span')
+  ink.className = 'w-ripple__ink'
+  ink.style.width = `${size}px`
+  ink.style.height = `${size}px`
+  ink.style.left = `${x}px`
+  ink.style.top = `${y}px`
+
+  inkContainer.appendChild(ink)
+  hostEl.appendChild(inkContainer)
+
+  const done = () => {
+    ink.removeEventListener('animationend', done)
+    inkContainer.remove()
+  }
+  ink.addEventListener('animationend', done, { once: true })
+  // Fallback if animationend does not fire
+  window.setTimeout(() => {
+    if (inkContainer.parentNode === hostEl) inkContainer.remove()
+  }, 600)
+}
+
+/**
+ * @param {import('vue').ComponentPublicInstance | null | undefined} instance
+ * @returns {{ config: { ripple?: boolean } }}
+ */
+export function getWaveUiFromInstance (instance) {
+  const $waveui = instance?.$waveui
+  if ($waveui && typeof $waveui === 'object') return $waveui
+  return { config: { ripple: true } }
+}
+
+/**
+ * @param {boolean|undefined} propRipple
+ * @param {{ config?: { ripple?: boolean } }} $waveui
+ */
+export function isRippleEnabled (propRipple, $waveui) {
+  if (typeof propRipple === 'boolean') return propRipple
+  const g = $waveui?.config?.ripple
+  return g !== false
+}

package/src/wave-ui/utils/wave-ripple-directive.js

@@ -0,0 +1,40 @@
+import { applyRipple, getWaveUiFromInstance, isRippleEnabled } from './ripple'
+
+function bindingDisabled (binding) {
+  const v = binding.value
+  if (v === false) return true
+  if (v && typeof v === 'object' && v.disabled) return true
+  return false
+}
+
+function rippleAllowed (binding, instance) {
+  if (bindingDisabled(binding)) return false
+  const $waveui = getWaveUiFromInstance(instance)
+  if (binding.value === true) return isRippleEnabled(true, $waveui)
+  return isRippleEnabled(undefined, $waveui)
+}
+
+export const waveRippleDirective = {
+  mounted (el, binding) {
+    el.classList.add('w-ripple')
+    el.__waveRippleLastBinding = binding
+    const handler = e => {
+      if (typeof e.button === 'number' && e.button !== 0) return
+      const b = el.__waveRippleLastBinding
+      if (!rippleAllowed(b, b?.instance)) return
+      applyRipple(el, e)
+    }
+    el.__waveRippleHandler = handler
+    el.addEventListener('pointerdown', handler)
+  },
+
+  updated (el, binding) {
+    el.__waveRippleLastBinding = binding
+  },
+
+  unmounted (el) {
+    el.removeEventListener('pointerdown', el.__waveRippleHandler)
+    delete el.__waveRippleHandler
+    delete el.__waveRippleLastBinding
+  }
+}