wave-ui 2.27.0 → 2.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "2.27.0",
+  "version": "2.30.0",
   "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",
@@ -43,26 +43,26 @@
     "*.vue"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/eslint-parser": "^7.16.3",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@mdi/font": "^5.9.55",
-    "@vitejs/plugin-vue": "^1.9.4",
+    "@vitejs/plugin-vue": "^1.10.2",
     "@vue/compiler-sfc": "3.1.5",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.1",
     "axios": "^0.21.4",
     "eslint": "^7.32.0",
     "font-awesome": "^4.7.0",
-    "gsap": "^3.8.0",
+    "gsap": "^3.9.1",
     "ionicons": "^4.6.3",
     "material-design-icons": "^3.0.1",
     "rollup-plugin-delete": "^2.0.0",
-    "sass": "^1.43.4",
+    "sass": "^1.45.1",
     "simple-syntax-highlighter": "^2.2.0",
     "splitpanes": "^3.0.6",
-    "vite": "^2.6.14",
+    "vite": "^2.7.9",
     "vite-plugin-pug": "^0.3.0",
-    "vue": "^3.2.22",
+    "vue": "^3.2.26",
     "vue-cal": "^4.2.0",
     "vue-router": "^4.0.12",
     "vueperslides": "^3.3.2",

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="$slots[`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")
@@ -148,8 +150,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-alert.vue

@@ -229,7 +229,6 @@ export default {
   &--icon-outside &__icon {
     position: absolute;
     opacity: 1;
-    // top: 2 * $base-increment - 1px; // Needed for IE 11, but dropping support.
     left: 1px;
     z-index: 1;
     transform: translateX(-50%);

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-confirm.vue

@@ -2,23 +2,23 @@
 .w-confirm
   w-menu(v-model="showPopup" v-bind="wMenuProps")
     template(#activator="{ on }")
-      w-button.w-confirm__button(v-on="on" v-bind="buttonProps")
+      w-button.w-confirm__button(v-on="{ ...$listeners, ...on }" v-bind="buttonProps")
         slot
     w-flex(:column="!inline" align-center)
       div
-        slot(name="question") Are you sure?
+        slot(name="question") {{ question }}
       .w-flex.justify-end(:class="inline ? 'ml2' : 'mt2'")
         w-button.mr2(
-          v-if="!noCancel"
-          v-bind="cancelButton"
+          v-if="cancel !== false"
+          v-bind="cancelButtonProps"
           :bg-color="(cancelButton || {}).bgColor || 'error'"
           @click="onCancel")
-          slot(name="cancel") Cancel
+          slot(name="cancel") {{ cancelButton.label }}
         w-button(
-          v-bind="confirmButton"
+          v-bind="confirmButtonProps"
           :bg-color="(confirmButton || {}).bgColor || 'success'"
           @click="onConfirm")
-          slot(name="confirm") Confirm
+          slot(name="confirm") {{ confirmButton.label }}
 </template>
 
 <script>
@@ -30,11 +30,16 @@ export default {
     color: { type: String },
     icon: { type: String },
     mainButton: { type: Object }, // Allow passing down an object of props to the w-button component.
+    question: { type: String, default: 'Are you sure?' },
 
     // Cancel & confirm buttons props.
-    noCancel: { type: Boolean }, // Removes the cancel button.
-    cancelButton: { type: [Boolean, Object] }, // Allow passing down an object of props to the w-button component.
-    confirmButton: { type: Object }, // Allow passing down an object of props to the w-button component.
+    // Allow passing down an object of props to the w-button component.
+    // If a string is given, that will be the label of the button.
+    // If false, no cancel button.
+    cancel: { type: [Boolean, Object, String], default: undefined },
+    // Allow passing down an object of props to the w-button component.
+    // If a string is given, that will be the label of the button.
+    confirm: { type: [Object, String] },
 
     // global menu props.
     inline: { type: Boolean }, // The layout inside the menu.
@@ -63,6 +68,26 @@ export default {
   }),
 
   computed: {
+    cancelButton () {
+      let button = { label: typeof this.cancel === 'string' ? this.cancel : 'Cancel' }
+      if (typeof this.cancel === 'object') button = Object.assign({}, button, this.cancel)
+      return button
+    },
+    // Props to pass down to the w-button component.
+    cancelButtonProps () {
+      const { label, ...props } = this.cancelButton // Everything except label.
+      return props
+    },
+    confirmButton () {
+      let button = { label: typeof this.confirm === 'string' ? this.confirm : 'Confirm' }
+      if (typeof this.confirm === 'object') button = Object.assign({}, button, this.confirm)
+      return button
+    },
+    // Props to pass down to the w-button component.
+    confirmButtonProps () {
+      const { label, ...props } = this.confirmButton // Everything except label.
+      return props
+    },
     wMenuProps () {
       return {
         top: this.top,

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"
@@ -160,7 +164,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
     }
   },
 
@@ -186,6 +191,7 @@ export default {
     hasValue () {
       return (
         this.inputValue ||
+        this.inputValue === 0 ||
         ['date', 'time'].includes(this.type) ||
         (this.type === 'number' && this.inputNumberError) ||
         (this.type === 'file' && this.inputFiles.length)
@@ -206,7 +212,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,
@@ -271,6 +277,8 @@ export default {
         return file
       })
       this.$emit('update:modelValue', this.inputFiles)
+      this.$emit('input', this.inputFiles)
+      this.$emit('change', this.inputFiles)
     },
 
     // For file input.
@@ -293,9 +301,19 @@ export default {
     }
   },
 
+  mounted () {
+    // On page load, check if the field is autofilled by the browser.
+    // 20211229. Only a problem on Chrome. Firefox ok, Safari always prompts before filling up.
+    setTimeout(() => {
+      if (this.$refs.input && this.$refs.input.matches(':-webkit-autofill')) this.isAutofilled = true
+    }, 400) // Can't be less than 350: time for the browser to autofill.
+  },
+
   watch: {
     modelValue (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
     }
   }
 }