wave-ui 3.13.2 → 3.13.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.13.2",
+  "version": "3.13.4",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-.w-autocomplete(:class="classes" @click="onClick")
+.w-autocomplete(:class="classes" @click="onClick" :style="$attrs.style")
   template(v-if="selection.length")
     .w-autocomplete__selection(v-for="(item, i) in selection")
       slot(name="selection" :item="item" :unselect="i => unselectItem(i)")
@@ -11,7 +11,8 @@
   input.w-autocomplete__input(
     ref="input"
     :value="keywords"
-    v-on="inputEventListeners")
+    v-on="inputEventListeners"
+    v-bind="inputAttrs")
   w-transition-slide-fade
     ul.w-autocomplete__menu(
       v-if="menuOpen"
@@ -42,6 +43,7 @@
 <script>
 export default {
   name: 'w-autocomplete',
+  inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
   props: {
     items: { type: Array, required: true },
@@ -110,12 +112,25 @@ export default {
     highlightedItemIndex () {
       if (this.highlightedItem === null) return -1
       else if (this.highlightedItem === 'extra-item') return this.filteredItems.length
+
       return this.filteredItems.findIndex(item => item.uid === this.highlightedItem)
     },
 
+    wrapperAttrs () {
+      const { style, class: classes } = this.$attrs
+      return { style, class: classes }
+    },
+
+    inputAttrs () {
+      // Remove class and style which are meant to stay on the wrapper.
+      // eslint-disable-next-line no-unused-vars
+      const { style, class: classes, ...attrs } = this.$attrs
+
+      return attrs
+    },
+
     inputEventListeners () {
       return {
-        ...this.$attrs,
         input: e => {
           this.keywords = e.target.value
         },
@@ -142,7 +157,9 @@ export default {
         'w-autocomplete--open': this.menuOpen,
         'w-autocomplete--filled': this.selection.length,
         'w-autocomplete--has-keywords': this.keywords,
-        'w-autocomplete--empty': !this.selection.length && !this.keywords
+        'w-autocomplete--empty': !this.selection.length && !this.keywords,
+        // With the inheritAttrs set to false any class on the component would be lost, so add it back.
+        [this.$attrs.class]: !!this.$attrs.class
       }
     }
   },

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

@@ -5,7 +5,7 @@ component.w-button(
   :href="(route && (externalLink ? route : resolvedRoute)) || null"
   :class="classes"
   :disabled="!!disabled || null"
-  v-on="listeners"
+  v-bind="attrs"
   :style="styles")
   w-icon(v-if="icon" v-bind="iconProps || {}") {{ icon }}
   slot(v-else)
@@ -23,6 +23,10 @@ component.w-button(
 
 <script>
 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,
+
   props: {
     color: { type: String },
     bgColor: { type: String },
@@ -70,25 +74,21 @@ export default {
     resolvedRoute () {
       return this.hasRouter ? this.$router.resolve(this.route).href : this.route
     },
-    listeners () {
-      // Extract the potential class & style from v-on listeners. It will still be added from the
-      // built-in attributes fallthrough (implicit v-bind="$attrs" when single root node).
-      const { class: classes, style, ...attrs } = this.$attrs
-
+    attrs () {
       // If the button is a router-link, we can't apply events on it since vue-router needs the .native
       // modifier but it's not available with the v-on directive.
       // So do a manual router.push if $router is present.
-      // eslint-disable-next-line multiline-ternary
-      return this.route && this.hasRouter && !this.forceLink && !this.externalLink ? {
-        ...attrs,
-        click: e => {
-          if (attrs.click) attrs.click(e)
+      const attrsForRouterLink = {
+        ...this.$attrs,
+        onClick: e => {
+          if (this.$attrs.onClick) this.$attrs.onClick(e)
 
           this.$router.push(this.route)
           e.stopPropagation() // If going to a route, no need to bubble up the event.
           e.preventDefault()
         }
-      } : attrs
+      }
+      return this.route && this.hasRouter && !this.forceLink && !this.externalLink ? attrsForRouterLink : this.$attrs
     },
     size () {
       return (

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

@@ -1,5 +1,5 @@
 <template lang="pug">
-component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps || {}")
+component(v-if="tooltip" is="w-tooltip" v-bind="tooltipProps")
   template(#activator="{ on }")
     button-partial(v-bind="buttonProps" v-on="on")
       slot
@@ -62,7 +62,7 @@ export default {
 
   computed: {
     buttonProps () {
-      const { tooltip, tooltipProps, ...props } = this.$props
+      const { tooltip, tooltipProps = {}, ...props } = this.$props
       return { ...props, ...this.$attrs }
     }
   }

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

@@ -6,7 +6,8 @@ component(
   v-model:valid="valid"
   @reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
   :wrap="hasLabel && labelPosition !== 'inside'"
-  :class="classes")
+  :class="classes"
+  :style="$attrs.style")
   input(v-if="type === 'hidden'" type="hidden" :name="name || null" v-model="inputValue")
 
   template(v-else)
@@ -31,7 +32,6 @@ component(
         v-if="type !== 'file'"
         ref="input"
         v-model="inputValue"
-        v-on="listeners"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -133,6 +133,7 @@ import { reactive } from 'vue'
 export default {
   name: 'w-input',
   mixins: [FormElementMixin],
+  inheritAttrs: false, // The attrs should only be added to the input not the wrapper.
 
   props: {
     modelValue: { default: '' },
@@ -186,20 +187,13 @@ export default {
 
   computed: {
     attrs () {
-      // Keep the `class` attribute bound to the wrapper and not the input.
+      // Remove class and style which are meant to stay on the wrapper.
+      // Note: in Vue 3 $attrs may contain both HTML attributes AND JS events (onClick, onFocus, etc.).
       // eslint-disable-next-line no-unused-vars
-      const { class: classes, ...htmlAttrs } = this.$attrs
+      const { class: classes, style, ...attrs } = this.$attrs
       // Resets the input[type=file] the native HTML way.
-      if (this.type === 'file' && !this.inputFiles.length) htmlAttrs.value = null
-      return htmlAttrs
-    },
-
-    listeners () {
-      // Remove the events that are fired separately, so they don't fire twice.
-      // Also remove class and style which are meant to stay on the wrapper.
-      // eslint-disable-next-line no-unused-vars
-      const { input, focus, blur, class: classes, style, ...listeners } = this.$attrs
-      return listeners
+      if (this.type === 'file' && !this.inputFiles.length) attrs.value = null
+      return attrs
     },
 
     hasValue () {
@@ -265,7 +259,9 @@ export default {
         'w-input--no-padding': !this.outline && !this.bgColor && !this.shadow && !this.round,
         'w-input--has-placeholder': this.placeholder,
         'w-input--inner-icon-left': this.innerIconLeft,
-        'w-input--inner-icon-right': this.innerIconRight
+        'w-input--inner-icon-right': this.innerIconRight,
+        // With the inheritAttrs set to false any class on the component would be lost, so add it back.
+        [this.$attrs.class]: !!this.$attrs.class
       }
     },
 

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

@@ -5,7 +5,8 @@ component(
   v-bind="formRegister && { validators, inputValue: isOn, disabled: isDisabled, readonly: isReadonly }"
   v-model:valid="valid"
   @reset="$emit('update:modelValue', isOn = null);$emit('input', null)"
-  :class="classes")
+  :class="classes"
+  :style="$attrs.style")
   input(
     ref="input"
     :id="`w-switch--${_.uid}`"
@@ -17,6 +18,7 @@ component(
     :aria-readonly="isReadonly ? 'true' : 'false'"
     :required="required || null"
     :tabindex="tabindex || null"
+    v-bind="attrs"
     @change="onInput() /* Edge doesn't fire input on checkbox/radio/select change */"
     @focus="$emit('focus', $event)"
     :aria-checked="isOn || 'false'"
@@ -29,7 +31,6 @@ component(
       slot {{ label }}
   .w-switch__input(
     @click="$refs.input.focus();$refs.input.click()"
-    v-on="listeners"
     :class="inputClasses")
     .w-switch__track(v-if="$slots.track")
       slot(name="track")
@@ -54,6 +55,7 @@ import FormElementMixin 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.
 
   props: {
     modelValue: { default: false }, // v-model.
@@ -84,12 +86,12 @@ export default {
   },
 
   computed: {
-    listeners () {
-      // Remove the events that are fired separately, so they don't fire twice.
-      // Also remove class and style which are meant to stay on the wrapper.
+    attrs () {
+      // Remove class and style which are meant to stay on the wrapper.
+      // Note: in Vue 3 $attrs may contain both HTML attributes AND JS events (onClick, onFocus, etc.).
       // eslint-disable-next-line no-unused-vars
-      const { click, class: classes, style, ...listeners } = this.$attrs
-      return listeners
+      const { class: classes, style, ...attrs } = this.$attrs
+      return attrs
     },
     hasLabel () {
       return this.label || this.$slots.default
@@ -106,7 +108,9 @@ export default {
         'w-switch--loading': this.loading,
         'w-switch--rippled': this.ripple.end,
         'w-switch--dark': this.dark,
-        'w-switch--light': this.light
+        'w-switch--light': this.light,
+        // With the inheritAttrs set to false any class on the component would be lost, so add it back.
+        [this.$attrs.class]: !!this.$attrs.class
       }
     },
     inputClasses () {

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

@@ -6,7 +6,8 @@ component(
   v-model:valid="valid"
   :wrap="hasLabel && labelPosition !== 'inside'"
   @reset="$emit('update:modelValue', inputValue = '');$emit('input', '')"
-  :class="classes")
+  :class="classes"
+  :style="$attrs.style")
   //- Left label.
   template(v-if="labelPosition === 'left'")
     label.w-textarea__label.w-textarea__label--left.w-form-el-shakable(
@@ -26,7 +27,7 @@ component(
     textarea.w-textarea__textarea(
       ref="textarea"
       v-model="inputValue"
-      v-on="listeners"
+      v-bind="attrs"
       @input="onInput"
       @focus="onFocus"
       @blur="onBlur"
@@ -71,6 +72,7 @@ import FormElementMixin 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.
 
   props: {
     modelValue: { default: '' },
@@ -111,12 +113,12 @@ export default {
   },
 
   computed: {
-    listeners () {
-      // Remove the events that are fired separately, so they don't fire twice.
-      // Also remove class and style which are meant to stay on the wrapper.
+    attrs () {
+      // Remove class and style which are meant to stay on the wrapper.
+      // Note: in Vue 3 $attrs may contain both HTML attributes AND JS events (onClick, onFocus, etc.).
       // eslint-disable-next-line no-unused-vars
-      const { input, focus, blur, class: classes, style, ...listeners } = this.$attrs
-      return listeners
+      const { class: classes, style, ...attrs } = this.$attrs
+      return attrs
     },
     hasValue () {
       return this.inputValue || this.inputValue === 0
@@ -141,7 +143,9 @@ export default {
         'w-textarea--no-padding': !this.outline && !this.bgColor && !this.shadow,
         'w-textarea--has-placeholder': this.placeholder,
         'w-textarea--inner-icon-left': this.innerIconLeft,
-        'w-textarea--inner-icon-right': this.innerIconRight
+        'w-textarea--inner-icon-right': this.innerIconRight,
+        // With the inheritAttrs set to false any class on the component would be lost, so add it back.
+        [this.$attrs.class]: !!this.$attrs.class
       }
     },
     inputWrapClasses () {

package/src/wave-ui/core.js

@@ -144,10 +144,7 @@ export default class WaveUI {
   }
 
   constructor (app, options = {}) {
-    if (WaveUI.#registered) {
-      console.warn('Wave UI is already instantiated.')
-      return
-    }
+    if (WaveUI.#registered) return // May happen with SSR.
 
     this.$waveui._notificationManager = new NotificationManager()