wave-ui 1.45.5 → 1.45.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "1.45.5",
+  "version": "1.45.10",
   "description": "An emerging UI framework for Vue.js & Vue 3 with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "main": "./dist/wave-ui.umd.js",

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

@@ -19,7 +19,8 @@
         :tabindex="-1"
         text
         @keypress.stop
-        @click.stop="!item._disabled && toggleItem(item, $event)")
+        @click.stop="!item._disabled && toggleItem(item, $event)"
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
       //- Title.
       slot(
         v-if="$scopedSlots[`item-title.${item.id || i + 1}`]"
@@ -34,7 +35,8 @@
         :icon="(item._expanded && collapseIcon) || expandIcon"
         text
         @keypress.stop
-        @click.stop="!item._disabled && toggleItem(item, $event)")
+        @click.stop="!item._disabled && toggleItem(item, $event)"
+        :class="{ 'w-accordion__expand-icon--expanded': item._expanded }")
     //- Content.
     w-transition-expand(y)
       .w-accordion__item-content(v-if="item._expanded" :class="contentClass")
@@ -76,6 +78,7 @@ export default {
   computed: {
     accordionItems () {
       const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items || []
+      // eslint-disable-next-line new-cap
       return items.map((item, _index) => new Vue.observable({
         ...item,
         _index,
@@ -148,8 +151,8 @@ export default {
     margin-right: $base-increment;
 
     .w-accordion--rotate-icon & {@include default-transition;}
-    .w-accordion--rotate-icon .w-accordion__item--expanded & {transform: rotate(-180deg);}
-    .w-accordion--rotate-icon.w-accordion--icon-right .w-accordion__item--expanded & {transform: rotate(180deg);}
+    &--expanded {transform: rotate(-180deg);}
+    .w-accordion--icon-right &--expanded {transform: rotate(180deg);}
 
     .w-icon:before {font-size: 1.1em;}
   }

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

@@ -40,7 +40,7 @@ export default {
     classes () {
       return {
         'd-block': this.block,
-        'row': this.row,
+        row: this.row,
         'align-center': this.alignCenter,
         'align-end': this.alignEnd,
         'justify-center': this.justifyCenter,

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

@@ -26,6 +26,7 @@ export default {
     justifyEnd: { type: Boolean },
     justifySpaceBetween: { type: Boolean },
     justifySpaceAround: { type: Boolean },
+    justifySpaceEvenly: { type: Boolean },
     basisZero: { type: Boolean },
     gap: { type: Number, default: 0 }
   },
@@ -48,6 +49,7 @@ export default {
         'justify-end': this.justifyEnd,
         'justify-space-between': this.justifySpaceBetween,
         'justify-space-around': this.justifySpaceAround,
+        'justify-space-evenly': this.justifySpaceEvenly,
         'basis-zero': this.basisZero,
         [`w-flex--gap${this.gap}`]: this.gap
       }

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

@@ -23,8 +23,10 @@ component(
         tag="label"
         :for="`w-input--${_uid}`"
         @click="$emit('click:inner-icon-left', $event)") {{ innerIconLeft }}
+      //- All types of input except file.
       input.w-input__input(
         v-if="type !== 'file'"
+        ref="input"
         v-model="inputValue"
         v-on="listeners"
         @input="onInput"
@@ -45,8 +47,10 @@ component(
         :required="required || null"
         :tabindex="tabindex || null"
         v-bind="attrs")
-      template(v-if="type === 'file'")
+      //- Input type file.
+      template(v-else)
         input(
+          ref="input"
           :id="`w-input--${_uid}`"
           type="file"
           :name="name || null"
@@ -148,7 +152,8 @@ export default {
       inputNumberError: false,
       isFocused: false,
       inputFiles: [], // For input type file.
-      fileReader: null // For input type file.
+      fileReader: null, // For input type file.
+      isAutofilled: false
     }
   },
 
@@ -191,7 +196,7 @@ export default {
         'w-input--file': this.type === 'file',
         'w-input--disabled': this.isDisabled,
         'w-input--readonly': this.isReadonly,
-        [`w-input--${this.hasValue ? 'filled' : 'empty'}`]: true,
+        [`w-input--${this.hasValue || this.isAutofilled ? 'filled' : 'empty'}`]: true,
         'w-input--focused': this.isFocused && !this.isReadonly,
         'w-input--dark': this.dark,
         'w-input--floating-label': this.hasLabel && this.labelPosition === 'inside' && !this.staticLabel,
@@ -273,7 +278,6 @@ export default {
       reader.addEventListener('progress', event => {
         if (event.loaded && event.total) {
           this.$set(file, 'progress', event.loaded * 100 / event.total)
-          console.log(`Progress: ${Math.round(file.progress)}`)
         }
       })
 
@@ -281,9 +285,18 @@ export default {
     }
   },
 
+  mounted () {
+    // On page load, check if the field is autofilled by the browser.
+    setTimeout(() => {
+      if (this.$refs.input.value) this.isAutofilled = true
+    }, 250)
+  },
+
   watch: {
     value (value) {
       this.inputValue = value
+      // When clearing the field value, also reset the isAutofilled var for the CSS class.
+      if (!value && value !== 0) this.isAutofilled = false
     }
   }
 }

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

@@ -106,6 +106,7 @@ export default {
     tabsItems () {
       const items = typeof this.items === 'number' ? Array(this.items).fill({}) : this.items
 
+      // eslint-disable-next-line new-cap
       return items.map((item, _index) => new Vue.observable({
         ...item,
         _index,

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

@@ -6,6 +6,6 @@
  */
 export const objectifyClasses = (classes = {}) => {
   if (typeof classes === 'string') classes = { [classes]: true }
-  else if (typeof classes === 'array') classes = { [classes.join(' ')]: true }
+  else if (Array.isArray(classes)) classes = { [classes.join(' ')]: true }
   return classes
 }