wave-ui 3.27.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.27.2",
+  "version": "4.0.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/index.js

@@ -2,7 +2,6 @@ export { default as WAccordion } from './w-accordion/index.vue'
 export { default as WAccordionItem } from './w-accordion/item.vue'
 export { default as WAlert } from './w-alert.vue'
 export { default as WAutocomplete } from './w-autocomplete.vue'
-export { default as WApp } from './w-app.vue'
 export { default as WBadge } from './w-badge.vue'
 export { default as WBreadcrumbs } from './w-breadcrumbs.vue'
 export { default as WButton } from './w-button/index.vue'

package/src/wave-ui/components/transitions/w-transition-bounce.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-bounce',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-expand.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 transition(
   name="expand"
-  mode="out-in"
+  :mode="mode"
   :css="false"
   @before-appear="beforeAppear"
   @appear="appear"
@@ -22,7 +22,8 @@ export default {
   props: {
     x: { type: Boolean },
     y: { type: Boolean },
-    duration: { type: Number, default: 250 }
+    duration: { type: Number, default: 250 },
+    mode: { type: String, default: 'out-in' }
   },
 
   data: () => ({

package/src/wave-ui/components/transitions/w-transition-fade.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-fade',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-scale-fade.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-scale-fade',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-scale.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-scale',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

package/src/wave-ui/components/transitions/w-transition-slide-fade.vue

@@ -12,7 +12,8 @@ export default {
     right: { type: Boolean },
     up: { type: Boolean },
     down: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   },
 
   computed: {

package/src/wave-ui/components/transitions/w-transition-slide.vue

@@ -12,7 +12,8 @@ export default {
     right: { type: Boolean },
     up: { type: Boolean },
     down: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   },
 
   computed: {

package/src/wave-ui/components/transitions/w-transition-twist.vue

@@ -8,7 +8,8 @@ export default {
   name: 'w-transition-twist',
   props: {
     appear: { type: Boolean },
-    duration: { type: [Number, String] }
+    duration: { type: [Number, String] },
+    mode: { type: String }
   }
 }
 </script>

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

@@ -45,13 +45,17 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 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 },
@@ -65,6 +69,7 @@ export default {
     itemClass: { type: [String, Array, Object] },
     titleClass: { type: [String, Array, Object] },
     contentClass: { type: [String, Array, Object] },
+    expandedClass: { type: [String, Array, Object] },
     expandIcon: { type: [String, Boolean], default: 'wi-triangle-down' },
     expandIconRight: { type: Boolean },
     expandIconRotate90: { type: Boolean },
@@ -86,15 +91,17 @@ export default {
   // All provided to the WAccordionItem, not passed as prop since it could be used externally.
   provide () {
     return {
-      titleClasses: this.titleClasses,
-      contentClasses: this.contentClasses,
+      titleClasses: computed(() => this.titleClasses),
+      contentClasses: computed(() => this.contentClasses),
+      expandedClass: computed(() => this.expandedClass),
       onItemToggle: this.onItemToggle,
       onEndOfCollapse: this.onEndOfCollapse,
       getOriginalItem: this.getOriginalItem,
       options: this.$props,
       registerItem: this.registerItem,
       unregisterItem: this.unregisterItem,
-      getAccordionItem: this.getAccordionItem
+      getAccordionItem: this.getAccordionItem,
+      getAccordionNoRipple: () => this.noRipple
     }
   },
 
@@ -112,7 +119,7 @@ export default {
 
     // Detect if the accordion items are directly provided through slot using WAccordionItem.
     accordionItemsProvided () {
-      return this.$slots.default?.()?.some(item => item?.type?.name)
+      return this.$slots.default?.()?.some(item => item?.type?.name === 'w-accordion-item')
     },
 
     accordionClasses () {
@@ -129,7 +136,9 @@ export default {
     },
 
     itemClasses () {
-      return objectifyClasses(this.itemClass)
+      const classes = [this.itemClass]
+      if (this.expandedClass) classes.push(this.expandedClass)
+      return objectifyClasses(classes)
     },
 
     titleClasses () {
@@ -213,6 +222,6 @@ export default {
 
   @include themeable;
 
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
 }
 </style>

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"
@@ -44,11 +45,19 @@
       :item="accordionItem"
       :class="contentClasses")
       slot(
+        v-if="$slots.content"
         name="content"
         :item="getOriginalItem(accordionItem)"
         :expanded="accordionItem._expanded"
         :index="accordionItem._index + 1")
         div(v-html="accordionItem[options.itemContentKey]")
+      slot(
+        v-else
+        name="default"
+        :item="getOriginalItem(accordionItem)"
+        :expanded="accordionItem._expanded"
+        :index="accordionItem._index + 1")
+        div(v-html="accordionItem[options.itemContentKey]")
   w-transition-expand(
     v-else
     y
@@ -61,20 +70,32 @@
         :item="accordionItem"
         :class="contentClasses")
         slot(
+          v-if="$slots.content"
           name="content"
           :item="getOriginalItem(accordionItem)"
           :expanded="accordionItem._expanded"
           :index="accordionItem._index + 1")
           div(v-html="accordionItem[options.itemContentKey]")
+        slot(
+          v-else
+          name="default"
+          :item="getOriginalItem(accordionItem)"
+          :expanded="accordionItem._expanded"
+          :index="accordionItem._index + 1")
+          div(v-html="accordionItem[options.itemContentKey]")
 </template>
 
 <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 +109,41 @@ 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' },
+    expandedClass: { from: 'expandedClass' },
+    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)
@@ -113,12 +154,19 @@ export default {
       return {
         'w-accordion__item--expanded': this.accordionItem._expanded,
         'w-accordion__item--disabled': this.accordionItem._disabled,
-        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey]
+        [this.accordionItem[this.options.itemColorKey]]: this.accordionItem[this.options.itemColorKey],
+        [this.expandedClass]: this.accordionItem._expanded
       }
     }
   },
 
   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
 
@@ -151,13 +199,11 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-accordion__item {position: relative;}
 
 button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 40%, transparent);}
 .w-accordion__expand-icon {
-  margin-right: $base-increment;
+  margin-right: var(--w-base-increment);
 
   .w-accordion--rotate-icon & {@include default-transition;}
   &--rotate90 {transform: rotate(-90deg);}
@@ -171,11 +217,11 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
   position: relative;
   display: flex;
   align-items: center;
-  font-size: math.round(1.2 * $base-font-size);
-  padding: 1 * $base-increment;
+  font-size: round(nearest, calc(1.2 * var(--w-base-font-size)), 1px);
+  padding: var(--w-base-increment);
   user-select: none;
   cursor: pointer;
-  border-top: $border;
+  border-top: var(--w-border);
   -webkit-tap-highlight-color: transparent;
 
   .w-accordion__item--disabled & {
@@ -183,7 +229,7 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
     opacity: 0.6;
     -webkit-tap-highlight-color: transparent;
   }
-  .w-accordion--no-icon &, .w-accordion--icon-right & {padding-left: 3 * $base-increment;}
+  .w-accordion--no-icon &, .w-accordion--icon-right & {padding-left: calc(var(--w-base-increment) * 3);}
 
   .w-accordion__item:first-child & {border-top-color: transparent;}
 
@@ -191,18 +237,17 @@ button.w-accordion__expand-icon {color: color-mix(in srgb, var(--w-base-color) 4
     content: '';
     position: absolute;
     inset: 0;
-    background-color: currentColor;
-    opacity: 0;
-    transition: $fast-transition-duration;
+    background-color: transparent;
+    transition: background-color var(--w-transition-duration-fast);
     pointer-events: none;
   }
 
-  &:focus:before, &:hover:before {opacity: 0.03;}
-  &:active:before {opacity: 0.05;}
+  &:focus:before, &:hover:before {background-color: color-mix(in srgb, currentColor 3%, transparent);}
+  &:active:before {background-color: color-mix(in srgb, currentColor 5%, transparent);}
   .w-accordion__item--disabled &:before {display: none;}
 }
 
 .w-accordion__item-content {
-  padding: (2 * $base-increment) (3 * $base-increment);
+  padding: calc(var(--w-base-increment) * 2) calc(var(--w-base-increment) * 3);
 }
 </style>

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

@@ -131,15 +131,13 @@ export default {
 </script>
 
 <style lang="scss">
-@use "sass:math";
-
 .w-alert {
   position: relative;
-  margin-top: 4 * $base-increment;
-  margin-bottom: 4 * $base-increment;
-  padding: 2 * $base-increment;
-  font-size: $base-font-size;
-  border-radius: $border-radius;
+  margin-top: calc(var(--w-base-increment) * 4);
+  margin-bottom: calc(var(--w-base-increment) * 4);
+  padding: calc(var(--w-base-increment) * 2);
+  font-size: var(--w-base-font-size);
+  border-radius: var(--w-border-radius);
   border: 0 solid currentColor;
 
   @include themeable;
@@ -154,10 +152,10 @@ export default {
   &--tile {border-radius: 0;}
   &--round {
     border-radius: 99em;
-    padding-left: 3 * $base-increment;
-    padding-right: 3 * $base-increment;
+    padding-left: calc(var(--w-base-increment) * 3);
+    padding-right: calc(var(--w-base-increment) * 3);
   }
-  &--shadow {box-shadow: $box-shadow;}
+  &--shadow {box-shadow: var(--w-box-shadow);}
   &--one-border, &--plain {border: transparent;}
 
   // Before for the border, after for the background color.
@@ -171,33 +169,33 @@ export default {
 
   // Single side border.
   // ------------------------------------------------------
-  &--border-left {padding-left: 3 * $base-increment;}
-  &--border-right {padding-right: 3 * $base-increment;}
-  &--border-top {padding-top: 3 * $base-increment;}
-  &--border-bottom {padding-bottom: 3 * $base-increment;}
+  &--border-left {padding-left: calc(var(--w-base-increment) * 3);}
+  &--border-right {padding-right: calc(var(--w-base-increment) * 3);}
+  &--border-top {padding-top: calc(var(--w-base-increment) * 3);}
+  &--border-bottom {padding-bottom: calc(var(--w-base-increment) * 3);}
 
   &--one-border:before {content: '';opacity: 0.3;}
   &--border-left:before {
     right: auto;
-    width: $base-increment;
+    width: var(--w-base-increment);
     border-top-left-radius: inherit;
     border-bottom-left-radius: inherit;
   }
   &--border-right:before {
     left: auto;
-    width: $base-increment;
+    width: var(--w-base-increment);
     border-top-right-radius: inherit;
     border-bottom-right-radius: inherit;
   }
   &--border-top:before {
     bottom: auto;
-    height: $base-increment;
+    height: var(--w-base-increment);
     border-top-left-radius: inherit;
     border-top-right-radius: inherit;
   }
   &--border-bottom:before {
     top: auto;
-    height: $base-increment;
+    height: var(--w-base-increment);
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
   }
@@ -215,15 +213,15 @@ export default {
   // ------------------------------------------------------
   &__dismiss.w-button {
     align-self: flex-start;
-    margin-left: 2 * $base-increment;
-    margin-top: math.round(-0.5 * $base-increment);
-    margin-right: math.round(-0.5 * $base-increment);
+    margin-left: calc(var(--w-base-increment) * 2);
+    margin-top: calc(var(--w-base-increment) * -0.5);
+    margin-right: calc(var(--w-base-increment) * -0.5);
   }
 
   & &__icon {
     opacity: 0.9;
     align-self: flex-start;
-    margin-right: 2 * $base-increment;
+    margin-right: calc(var(--w-base-increment) * 2);
     font-size: 1.3em;
   }
   &--has-icon &__content {flex-grow: 1;}
@@ -238,18 +236,18 @@ export default {
     z-index: 1;
     transform: translateX(-50%);
     border: 1px solid color-mix(in srgb, var(--w-base-bg-color) 70%, transparent);
-    background-color: $base-bg-color;
+    background-color: var(--w-base-bg-color);
   }
   &--icon-outside &__icon:before {transform: scale(1.05);}
 
-  &--icon-outside &__content {padding-left: 3 * $base-increment;}
+  &--icon-outside &__content {padding-left: calc(var(--w-base-increment) * 3);}
 
   // Sizes.
   // ------------------------------------------------------
-  &.size--xs {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--sm {padding-top: $base-increment;padding-bottom: $base-increment;}
-  &.size--md {padding-top: math.round(2 * $base-increment);padding-bottom: math.round(2 * $base-increment);}
-  &.size--lg {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(2.5 * $base-increment);}
-  &.size--xl {padding-top: math.round(3 * $base-increment);padding-bottom: math.round(3 * $base-increment);}
+  &.size--xs {padding-top: var(--w-base-increment);padding-bottom: var(--w-base-increment);}
+  &.size--sm {padding-top: var(--w-base-increment);padding-bottom: var(--w-base-increment);}
+  &.size--md {padding-top: calc(var(--w-base-increment) * 2);padding-bottom: calc(var(--w-base-increment) * 2);}
+  &.size--lg {padding-top: calc(var(--w-base-increment) * 3);padding-bottom: calc(var(--w-base-increment) * 2.5);}
+  &.size--xl {padding-top: calc(var(--w-base-increment) * 3);padding-bottom: calc(var(--w-base-increment) * 3);}
 }
 </style>