wave-ui 3.27.1 → 3.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.27.1",
+  "version": "3.28.0",
   "description": "A UI framework for Vue.js 3 (and 2) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -50,13 +50,13 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@biomejs/biome": "^2.4.12",
+    "@biomejs/biome": "^2.4.13",
     "@faker-js/faker": "^10.4.0",
     "@mdi/font": "^7.4.47",
     "@tsconfig/recommended": "^1.0.13",
     "@vitejs/plugin-vue": "^6.0.6",
     "autoprefixer": "^10.5.0",
-    "axios": "^1.15.1",
+    "axios": "^1.15.2",
     "font-awesome": "^4.7.0",
     "globals": "^17.5.0",
     "gsap": "^3.15.0",
@@ -69,10 +69,10 @@
     "simple-syntax-highlighter": "^3.1.1",
     "splitpanes": "^4.0.4",
     "typescript": "^6.0.3",
-    "vite": "^8.0.9",
+    "vite": "^8.0.10",
     "vite-svg-loader": "^5.1.1",
-    "vue": "^3.5.32",
-    "vue-router": "^5.0.4",
+    "vue": "^3.5.33",
+    "vue-router": "^5.0.6",
     "vueperslides": "^3.6.0",
     "vuex": "^4.1.0"
   },

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

@@ -47,11 +47,14 @@
 <script>
 import { objectifyClasses } from '../../utils/index'
 import { consoleError } from '../../utils/console'
+import RippleMixin from '../../mixins/ripple'
 import WAccordionItem from './item.vue'
 
 export default {
   name: 'w-accordion',
 
+  mixins: [RippleMixin],
+
   props: {
     modelValue: { type: Array },
     color: { type: String },
@@ -94,7 +97,8 @@ export default {
       options: this.$props,
       registerItem: this.registerItem,
       unregisterItem: this.unregisterItem,
-      getAccordionItem: this.getAccordionItem
+      getAccordionItem: this.getAccordionItem,
+      getAccordionNoRipple: () => this.noRipple
     }
   },
 

package/src/wave-ui/components/w-accordion/item.vue

@@ -2,10 +2,11 @@
 .w-accordion__item(:class="itemClasses" :aria-expanded="accordionItem._expanded ? 'true' : 'false'")
   .w-accordion__item-title(
     @click="!accordionItem._disabled && toggleItem(accordionItem, $event)"
+    @pointerdown="onAccordionTitlePointerDown"
     @focus="$emit('focus', (accordionItem))"
     @keypress.enter="!accordionItem._disabled && toggleItem(accordionItem, $event)"
     :tabindex="!accordionItem._disabled && 0"
-    :class="titleClasses")
+    :class="accordionTitleClasses")
     //- Expand icon on left.
     w-button.w-accordion__expand-icon(
       v-if="options.expandIcon && !options.expandIconRight"
@@ -70,11 +71,15 @@
 
 <script>
 import { useId } from 'vue'
+import RippleMixin from '../../mixins/ripple'
+import { isRippleEnabled } from '../../utils/ripple'
 import AccordionContent from './accordion-content.vue'
 
 export default {
   name: 'w-accordion-item',
 
+  mixins: [RippleMixin],
+
   setup () {
     return { accordionItemUid: useId() }
   },
@@ -88,21 +93,40 @@ export default {
     disabled: { type: Boolean }
   },
 
-  inject: [
-    'options',
-    'titleClasses',
-    'contentClasses',
-    'onItemToggle',
-    'onEndOfCollapse',
-    'getOriginalItem',
-    'getAccordionItem',
-    'registerItem',
-    'unregisterItem'
-  ],
+  inject: {
+    options: { from: 'options' },
+    titleClasses: { from: 'titleClasses' },
+    contentClasses: { from: 'contentClasses' },
+    onItemToggle: { from: 'onItemToggle' },
+    onEndOfCollapse: { from: 'onEndOfCollapse' },
+    getOriginalItem: { from: 'getOriginalItem' },
+    getAccordionItem: { from: 'getAccordionItem' },
+    registerItem: { from: 'registerItem' },
+    unregisterItem: { from: 'unregisterItem' },
+    getAccordionNoRipple: { from: 'getAccordionNoRipple', default: () => undefined }
+  },
 
   emits: ['focus'],
 
   computed: {
+    /** Per-item noRipple override, else parent `w-accordion` noRipple, else global config. */
+    rippleActive () {
+      let resolvedNoRipple
+      if (typeof this.noRipple === 'boolean') resolvedNoRipple = this.noRipple
+      else {
+        const p = this.getAccordionNoRipple?.()
+        resolvedNoRipple = typeof p === 'boolean' ? p : undefined
+      }
+      return isRippleEnabled(resolvedNoRipple ? false : undefined, this.$waveui)
+    },
+
+    accordionTitleClasses () {
+      return {
+        ...this.titleClasses,
+        'w-ripple': this.rippleActive
+      }
+    },
+
     accordionItem: {
       get () {
         return this.getAccordionItem(this.accordionItemUid)
@@ -119,6 +143,12 @@ export default {
   },
 
   methods: {
+    onAccordionTitlePointerDown (e) {
+      if (this.accordionItem._disabled) return
+      if (e.target.closest?.('.w-accordion__expand-icon')) return
+      this.onRipple(e)
+    },
+
     toggleItem (item, e) {
       item._expanded = !item._expanded
 

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

@@ -20,7 +20,8 @@
         :is="hasRouter ? 'router-link' : 'a'"
         :to="hasRouter && item[itemRouteKey]"
         :href="item[itemRouteKey]"
-        :class="color || null")
+        :class="breadcrumbLinkClasses"
+        @pointerdown="onRipple")
         slot(name="item" :item="item" :index="i + 1" :isLast="i === items.length - 1")
       component.w-breadcrumbs__item(
         v-else
@@ -29,7 +30,8 @@
         :to="hasRouter && item[itemRouteKey]"
         :href="item[itemRouteKey]"
         v-html="item[itemLabelKey]"
-        :class="color || null")
+        :class="breadcrumbLinkClasses"
+        @pointerdown="onRipple")
 
     //- Current page when linkLastItem is false.
     slot(
@@ -43,8 +45,13 @@
 </template>
 
 <script>
+import RippleMixin from '../mixins/ripple'
+
 export default {
   name: 'w-breadcrumbs',
+
+  mixins: [RippleMixin],
+
   props: {
     items: { type: Array, required: true },
     linkLastItem: { type: Boolean },
@@ -63,6 +70,10 @@ export default {
   emits: [],
 
   computed: {
+    breadcrumbLinkClasses () {
+      return [this.color || null, { 'w-ripple': this.rippleActive }]
+    },
+
     hasRouter () {
       return '$router' in this
     },

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

@@ -6,7 +6,8 @@ component.w-button(
   :class="classes"
   :disabled="!!disabled || null"
   v-bind="attrs"
-  :style="styles")
+  :style="styles"
+  @pointerdown="onPointerDownRipple")
   w-icon(v-if="icon" v-bind="iconProps || {}") {{ icon }}
   slot(v-else)
   transition(name="scale-fade")
@@ -22,11 +23,15 @@ component.w-button(
 </template>
 
 <script>
+import RippleMixin from '../../mixins/ripple'
+
 export default {
   // Fully handle the attrs and listeners manually for the case of a router link that has both a
   // route and onClick.
   inheritAttrs: false,
 
+  mixins: [RippleMixin],
+
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -67,6 +72,13 @@ export default {
 
   emits: [],
 
+  methods: {
+    onPointerDownRipple (e) {
+      if (this.disabled || this.loading || !this.rippleActive) return
+      this.onRipple(e)
+    }
+  },
+
   computed: {
     hasRouter () {
       return '$router' in this
@@ -112,6 +124,7 @@ export default {
     },
     classes () {
       return {
+        'w-ripple': this.rippleActive,
         // If no color / bg color is set, set a primary color by default.
         'primary--bg': !this.bgColor && !this.color && !(this.outline || this.text),
         primary: !this.bgColor && !this.color && !this.dark && (this.outline || this.text),
@@ -246,6 +259,7 @@ $spinner-size: 40;
     content: '';
     position: absolute;
     inset: 0;
+    z-index: 0;
     opacity: 0;
     background-color: #000;
     border-radius: inherit;

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

@@ -53,7 +53,8 @@ export default {
     sm: { type: Boolean },
     md: { type: Boolean },
     lg: { type: Boolean },
-    xl: { type: Boolean }
+    xl: { type: Boolean },
+    noRipple: { type: Boolean, default: undefined }
   },
 
   components: { ButtonPartial },

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

@@ -49,12 +49,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-checkbox',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   inject: {
     wCheckboxes: { default: null }
   },

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

@@ -31,12 +31,16 @@ component(
 
 <script>
 import { reactive } from 'vue'
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-checkboxes',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     items: { type: Array, required: true }, // All the possible options.
     modelValue: { type: Array }, // v-model on selected option.

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

@@ -128,7 +128,7 @@ component(
  * - option to fit to the content using contenteditable div
  **/
 
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 import { reactive } from 'vue'
 
 export default {
@@ -136,6 +136,10 @@ export default {
   mixins: [FormElementMixin],
   inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     modelValue: { default: '' },
     type: { type: String, default: 'text' },

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

@@ -44,10 +44,13 @@ ul.w-list(:class="classes")
 
 <script>
 import { useId } from 'vue'
+import RippleMixin from '../mixins/ripple'
 
 export default {
   name: 'w-list',
 
+  mixins: [RippleMixin],
+
   setup () {
     return { waveUiUseId: useId() }
   },
@@ -161,7 +164,13 @@ export default {
     },
 
     liLabelClasses (item) {
+      const rippleHost =
+        this.rippleActive &&
+        !item.disabled &&
+        (this.checklist || this.isSelectable || (this.nav && item[this.itemRouteKey]))
+
       return {
+        'w-ripple': rippleHost,
         'w-list__item-label--disabled': item.disabled || (this.nav && !item[this.itemRouteKey] && !item.children),
         'w-list__item-label--active': (this.isSelectable && item._selected) || null,
         'w-list__item-label--focused': item._focused,
@@ -188,6 +197,7 @@ export default {
       // If selectable list, on mousedown select the item.
       const mousedown = this.isSelectable && (e => {
         e.stopPropagation()
+        this.onRipple(e)
         !li.disabled && this.selectItem(li)
       })
       // If selectable list, on enter key press select item.
@@ -230,6 +240,7 @@ export default {
         props.onFocus = () => (li._focused = true)
         props.onBlur = () => (li._focused = false)
         props.onInput = value => this.selectItem(li, value)
+        props.onPointerdown = e => this.onRipple(e)
         // When clicking on the checkbox component wrapper, trigger a focus & click on the checkbox.
         props.onClick = e => {
           const checkbox = e.target.querySelector('input[type="checkbox"]')
@@ -250,6 +261,7 @@ export default {
         if (!li.disabled && li[this.itemRouteKey]) {
           props.onKeydown = keydown
           props.onMousedown = mousedown
+          props.onPointerdown = e => this.onRipple(e)
 
           if (this.$router) {
             props.to = li[this.itemRouteKey]

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

@@ -47,11 +47,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-radio',
   mixins: [FormElementMixin],
+
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   inject: { wRadios: { default: null } },
 
   props: {

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

@@ -30,12 +30,16 @@ component(
 </template>
 
 <script>
-import FormElementMixin from '../mixins/form-elements'
+import FormElementMixin, { useWaveUiFormIds } from '../mixins/form-elements'
 
 export default {
   name: 'w-radios',
   mixins: [FormElementMixin],
 
+  setup () {
+    return useWaveUiFormIds()
+  },
+
   props: {
     items: { type: Array, required: true }, // All the possible options.
     modelValue: { type: [String, Number, Boolean] }, // v-model on selected option.

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

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