wave-ui 1.47.0 → 1.48.0

package/dist/wave-ui.es.js

@@ -2531,7 +2531,6 @@ var wImage = /* @__PURE__ */ function() {
   return __component__$v.exports;
 }();
 var render$u = function() {
-  var _obj, _obj$1;
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2545,7 +2544,7 @@ var render$u = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+  } } }) : [_vm.labelPosition === "left" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--left w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _c("div", { staticClass: "w-input__input-wrap", class: _vm.inputWrapClasses }, [_vm.innerIconLeft ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-left", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-left", $event);
   } } }, [_vm._v(_vm._s(_vm.innerIconLeft))]) : _vm._e(), _vm.type === "checkbox" && _vm.type !== "file" ? _c("input", _vm._g(_vm._b({ directives: [{ name: "model", rawName: "v-model", value: _vm.inputValue, expression: "inputValue" }], ref: "input", staticClass: "w-input__input", attrs: { "id": "w-input--" + _vm._uid, "name": _vm.inputName, "placeholder": _vm.placeholder || null, "step": _vm.step || null, "min": _vm.min || null, "max": _vm.max || null, "minlength": _vm.minlength || null, "maxlength": _vm.maxlength || null, "readonly": _vm.isReadonly || null, "aria-readonly": _vm.isReadonly ? "true" : "false", "disabled": _vm.isDisabled || null, "required": _vm.required || null, "tabindex": _vm.tabindex || null, "type": "checkbox" }, domProps: { "checked": Array.isArray(_vm.inputValue) ? _vm._i(_vm.inputValue, null) > -1 : _vm.inputValue }, on: { "input": _vm.onInput, "focus": _vm.onFocus, "blur": _vm.onBlur, "change": function($event) {
     var $$a = _vm.inputValue, $$el = $event.target, $$c = $$el.checked ? true : false;
@@ -2566,15 +2565,15 @@ var render$u = function() {
       return;
     }
     _vm.inputValue = $event.target.value;
-  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
+  }, _vm.onInput], "focus": _vm.onFocus, "blur": _vm.onBlur } }, "input", _vm.attrs, false), _vm.listeners)) : [_c("input", _vm._b({ ref: "input", attrs: { "id": "w-input--" + _vm._uid, "type": "file", "name": _vm.name || null, "multiple": _vm.multiple || null, "data-progress": _vm.overallFilesProgress }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "change": _vm.onFileChange } }, "input", _vm.attrs, false)), _c("transition-group", { staticClass: "w-input__input w-input__input--file", attrs: { "tag": "label", "name": "fade", "for": "w-input--" + _vm._uid } }, [!_vm.inputFiles.length && _vm.isFocused ? _c("span", { key: "no-file", staticClass: "w-input__no-file" }, [_vm._t("no-file", function() {
     return [_vm.$slots["no-file"] === void 0 ? [_vm._v("No file")] : _vm._e()];
   })], 2) : _vm._e(), _vm._l(_vm.inputFiles, function(file, i) {
-    return _c("span", { key: file.lastModified }, [_vm._v(_vm._s(i ? ", " : "")), _c("span", { key: i + "b", staticClass: "filename" }, [_vm._v(_vm._s(file.base))]), _vm._v(_vm._s(file.extension))]);
-  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj = {}, _obj[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj), attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.isFocused && (_obj$1 = {}, _obj$1[_vm.valid === false ? "error" : _vm.color] = _vm.color || _vm.valid === false, _obj$1), attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
+    return _c("span", { key: file.lastModified }, [_vm._v(_vm._s(i ? ", " : "")), _c("span", { key: i + "b", staticClass: "filename" }, [_vm._v(_vm._s(file.base))]), _vm._v(_vm._s(file.extension ? "." + file.extension : ""))]);
+  })], 2)], _vm.labelPosition === "inside" && _vm.showLabelInside ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--inside w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.innerIconRight ? _c("w-icon", { staticClass: "w-input__icon w-input__icon--inner-right", attrs: { "tag": "label", "for": "w-input--" + _vm._uid }, on: { "click": function($event) {
     return _vm.$emit("click:inner-icon-right", $event);
-  } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e()], 2), _vm.type === "file" && _vm.inputFiles.length ? _c("label", { staticClass: "d-flex", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._l(_vm.inputFiles, function(file, i) {
-    return [file.progress < 100 ? _c("i", { key: i, staticClass: "w-icon wi-spinner w-icon--spin size--sm w-input__file-preview primary" }) : file.preview ? _c("img", { key: i, staticClass: "w-input__file-preview", attrs: { "src": file.preview, "alt": "" } }) : _c("i", { key: i, staticClass: "w-icon wi-file w-input__file-preview primary" })];
-  })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e(), _vm.loading ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color } }) : _vm._e()]], 2);
+  } } }, [_vm._v(_vm._s(_vm.innerIconRight))]) : _vm._e(), _vm.hasLoading || _vm.showProgress && (_vm.uploadInProgress || _vm.uploadComplete) ? _c("w-progress", { staticClass: "fill-width", attrs: { "size": "2", "color": _vm.progressColor || _vm.color, "value": _vm.showProgress ? (_vm.uploadInProgress || _vm.uploadComplete) && _vm.overallFilesProgress : _vm.loadingValue } }) : _vm._e()], 2), _vm.type === "file" && _vm.preview && _vm.inputFiles.length ? _c("label", { staticClass: "d-flex", attrs: { "for": "w-input--" + _vm._uid } }, [_vm._l(_vm.inputFiles, function(file, i) {
+    return [file.progress < 100 ? _c("i", { key: i, staticClass: "w-icon wi-spinner w-icon--spin size--sm w-input__file-preview primary" }) : file.preview ? _c("img", { key: i, staticClass: "w-input__file-preview", attrs: { "src": file.preview, "alt": "" } }) : _c("i", { key: i, staticClass: "w-icon w-input__file-preview primary size--md", class: _vm.preview && typeof _vm.preview === "string" ? _vm.preview : "wi-file" })];
+  })], 2) : _vm._e(), _vm.labelPosition === "right" ? [_vm.$slots.default ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid } }, [_vm._t("default")], 2) : _vm.label ? _c("label", { staticClass: "w-input__label w-input__label--right w-form-el-shakable", class: _vm.validationClasses, attrs: { "for": "w-input--" + _vm._uid }, domProps: { "innerHTML": _vm._s(_vm.label) } }) : _vm._e()] : _vm._e()]], 2);
 };
 var staticRenderFns$u = [];
 var wInput_vue_vue_type_style_index_0_lang = "";
@@ -2604,10 +2603,12 @@ const __vue2_script$u = {
     shadow: { type: Boolean },
     tile: { type: Boolean },
     multiple: { type: Boolean },
-    preview: { type: Boolean },
-    loading: { type: Boolean }
+    preview: { type: [Boolean, String], default: true },
+    loading: { type: [Boolean, Number], default: false },
+    showProgress: { type: [Boolean] },
+    files: { type: Array }
   },
-  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right"],
+  emits: ["input", "update:modelValue", "focus", "blur", "click:inner-icon-left", "click:inner-icon-right", "update:overallProgress"],
   data() {
     return {
       inputValue: this.value,
@@ -2628,14 +2629,48 @@ const __vue2_script$u = {
       return listeners;
     },
     hasValue() {
-      return this.inputValue || this.inputValue === 0 || ["date", "time"].includes(this.type) || this.type === "number" && this.inputNumberError || this.type === "file" && this.inputFiles.length;
+      switch (this.type) {
+        case "file":
+          return !!this.inputFiles.length;
+        case "number":
+          return this.inputNumberError;
+        case "date":
+        case "time":
+          return true;
+        default:
+          return this.inputValue || this.inputValue === 0;
+      }
     },
     hasLabel() {
       return this.label || this.$slots.default;
     },
+    hasLoading() {
+      return ![void 0, false].includes(this.loading);
+    },
+    loadingValue() {
+      let value;
+      if (typeof this.loading === "number")
+        value = this.loading;
+      else if (this.loading) {
+        value = this.type === "file" && this.overallFilesProgress ? this.overallFilesProgress : void 0;
+      }
+      return value;
+    },
     showLabelInside() {
       return !this.staticLabel || !this.hasValue && !this.placeholder;
     },
+    overallFilesProgress() {
+      const progress = this.inputFiles.reduce((total2, file) => total2 + file.progress, 0);
+      const total = progress / this.inputFiles.length;
+      this.$emit("update:overallProgress", this.inputFiles.length ? total : void 0);
+      return total;
+    },
+    uploadInProgress() {
+      return this.overallFilesProgress > 0 && this.overallFilesProgress < 100;
+    },
+    uploadComplete() {
+      return this.overallFilesProgress === 100;
+    },
     classes() {
       return {
         "w-input": true,
@@ -2652,6 +2687,11 @@ const __vue2_script$u = {
         "w-input--inner-icon-right": this.innerIconRight
       };
     },
+    validationClasses() {
+      return this.isFocused && {
+        [this.valid === false ? "error" : this.color]: this.color || this.valid === false
+      };
+    },
     inputWrapClasses() {
       return {
         [this.valid === false ? "error" : this.color]: this.color || this.valid === false,
@@ -2663,7 +2703,8 @@ const __vue2_script$u = {
         "w-input__input-wrap--underline": !this.outline,
         "w-input__input-wrap--shadow": this.shadow,
         "w-input__input-wrap--no-padding": !this.outline && !this.bgColor && !this.shadow && !this.round,
-        "w-input__input-wrap--loading": this.loading
+        "w-input__input-wrap--loading": this.loading || this.showProgress && this.uploadInProgress,
+        "w-input__input-wrap--upload-complete": this.uploadComplete
       };
     }
   },
@@ -2683,31 +2724,34 @@ const __vue2_script$u = {
     },
     onFileChange(e) {
       this.$set(this, "inputFiles", [...e.target.files].map((original) => {
-        const [, base, extension] = original.name.match(/^(.*)(\..*?)$/);
+        const [, base = "", extension = "", full = ""] = original.name.match(/^(.*?)\.([^.]*)$|(.*)/);
         const file = Object.assign({}, {
           name: original.name,
-          base,
+          base: base || full,
           extension,
           type: original.type,
           size: original.size,
           lastModified: original.lastModified,
           preview: null,
-          progress: 0
+          progress: 0,
+          file: original
         });
-        this.filePreview(original, file);
+        this.readFile(original, file);
         return file;
       }));
       this.$emit("update:modelValue", this.inputFiles);
       this.$emit("input", this.inputFiles);
-      this.$emit("change", this.inputFiles);
     },
-    filePreview(original, file) {
+    readFile(original, file) {
       const reader = new FileReader();
-      if (original.type && original.type.startsWith("image/")) {
+      const isPreviewAnIcon = typeof this.preview === "string";
+      const isFileAnImage = original.type && original.type.startsWith("image/");
+      if (this.preview && !isPreviewAnIcon && isFileAnImage) {
         reader.addEventListener("load", (e) => {
           this.$set(file, "preview", e.target.result);
         });
-      }
+      } else
+        delete file.preview;
       reader.addEventListener("progress", (event) => {
         if (event.loaded && event.total) {
           this.$set(file, "progress", event.loaded * 100 / event.total);