@nutui/nutui 3.1.10 → 3.1.12-beta.1

package/dist/packages/_es/Uploader.js

@@ -14,18 +14,21 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __require = typeof require !== "undefined" ? require : (x) => {
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createCommentVNode, renderList, createElementVNode, createBlock, toDisplayString, createVNode } from "vue";
+import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, Fragment, renderList, createElementVNode, toDisplayString, createVNode, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
-import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import Taro from "@tarojs/taro";
 class UploadOptions {
   constructor() {
     __publicField(this, "url", "");
@@ -61,7 +64,7 @@ class Uploader {
       xhr.onreadystatechange = () => {
         var _a2, _b;
         if (xhr.readyState === 4) {
-          if (xhr.status === options.xhrState) {
+          if (xhr.status == options.xhrState) {
             (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, xhr.responseText, options);
           } else {
             (_b = options.onFailure) == null ? void 0 : _b.call(options, xhr.responseText, options);
@@ -92,7 +95,7 @@ class Uploader {
       name: options.name,
       success(response) {
         var _a2, _b;
-        if (options.xhrState === response.statusCode) {
+        if (options.xhrState == response.statusCode) {
           (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
         } else {
           (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
@@ -114,40 +117,46 @@ const { componentName, create } = createComponent("uploader");
 class FileItem {
   constructor() {
     __publicField(this, "status", "ready");
+    __publicField(this, "message", "\u51C6\u5907\u5B8C\u6210");
     __publicField(this, "uid", new Date().getTime().toString());
-    __publicField(this, "name");
     __publicField(this, "url");
+    __publicField(this, "path");
+    __publicField(this, "name");
     __publicField(this, "type");
-    __publicField(this, "formData", new FormData());
+    __publicField(this, "percentage", 0);
+    __publicField(this, "formData", {});
   }
 }
-const _sfc_main = create({
+var _sfc_main = create({
   props: {
     name: { type: String, default: "file" },
     url: { type: String, default: "" },
+    sizeType: {
+      type: Array,
+      default: () => ["original", "compressed"]
+    },
+    sourceType: {
+      type: Array,
+      default: () => ["album", "camera"]
+    },
     timeout: { type: [Number, String], default: 1e3 * 30 },
     fileList: { type: Array, default: () => [] },
     isPreview: { type: Boolean, default: true },
+    listType: { type: String, default: "picture" },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: "post" },
     capture: { type: Boolean, default: false },
     maximize: { type: [Number, String], default: Number.MAX_VALUE },
-    maximum: { type: [Number, String], default: 1 },
-    clearInput: { type: Boolean, default: false },
+    maximum: { type: [Number, String], default: 9 },
+    clearInput: { type: Boolean, default: true },
     accept: { type: String, default: "*" },
     headers: { type: Object, default: {} },
     data: { type: Object, default: {} },
     uploadIcon: { type: String, default: "photograph" },
     uploadIconSize: { type: [String, Number], default: "" },
     xhrState: { type: [Number, String], default: 200 },
-    withCredentials: { type: Boolean, default: false },
-    multiple: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     autoUpload: { type: Boolean, default: true },
-    beforeUpload: {
-      type: Function,
-      default: null
-    },
     beforeDelete: {
       type: Function,
       default: (file, files) => {
@@ -156,7 +165,17 @@ const _sfc_main = create({
     },
     onChange: { type: Function }
   },
-  emits: ["start", "progress", "oversize", "success", "failure", "change", "delete", "update:fileList"],
+  emits: [
+    "start",
+    "progress",
+    "oversize",
+    "success",
+    "failure",
+    "change",
+    "delete",
+    "update:fileList",
+    "file-item-click"
+  ],
   setup(props, { emit }) {
     const fileList = reactive(props.fileList);
     let uploadQueue = [];
@@ -166,86 +185,101 @@ const _sfc_main = create({
         [prefixCls]: true
       };
     });
-    const clearInput = (el) => {
-      el.value = "";
+    const chooseImage = () => {
+      if (props.disabled) {
+        return;
+      }
+      Taro.chooseImage({
+        count: props.maximum * 1 - props.fileList.length,
+        sizeType: props.sizeType,
+        sourceType: props.sourceType,
+        success: onChange
+      });
+    };
+    const fileItemClick = (fileItem) => {
+      emit("file-item-click", { fileItem });
     };
-    const executeUpload = (fileItem, index2) => {
+    const executeUpload = (fileItem, index) => {
       const uploadOption = new UploadOptions();
+      uploadOption.name = props.name;
       uploadOption.url = props.url;
       for (const [key, value] of Object.entries(props.data)) {
-        fileItem.formData.append(key, value);
+        fileItem.formData[key] = value;
       }
       uploadOption.formData = fileItem.formData;
-      uploadOption.timeout = props.timeout * 1;
       uploadOption.method = props.method;
-      uploadOption.xhrState = props.xhrState;
       uploadOption.headers = props.headers;
-      uploadOption.withCredentials = props.withCredentials;
+      uploadOption.taroFilePath = fileItem.path;
       uploadOption.onStart = (option) => {
         fileItem.status = "ready";
-        clearUploadQueue(index2);
+        fileItem.message = "\u51C6\u5907\u4E0A\u4F20";
+        clearUploadQueue(index);
         emit("start", option);
       };
-      uploadOption.onProgress = (e, option) => {
+      uploadOption.onProgress = (event, option) => {
         fileItem.status = "uploading";
-        emit("progress", { e, option });
+        fileItem.message = "\u4E0A\u4F20\u4E2D";
+        fileItem.percentage = event.progress;
+        emit("progress", { event, option, percentage: fileItem.percentage });
       };
-      uploadOption.onSuccess = (responseText, option) => {
+      uploadOption.onSuccess = (data, option) => {
         fileItem.status = "success";
+        fileItem.message = "\u4E0A\u4F20\u6210\u529F";
         emit("success", {
-          responseText,
-          option
+          data,
+          option,
+          fileItem
         });
         emit("update:fileList", fileList);
       };
-      uploadOption.onFailure = (responseText, option) => {
+      uploadOption.onFailure = (data, option) => {
         fileItem.status = "error";
+        fileItem.message = "\u4E0A\u4F20\u5931\u8D25";
         emit("failure", {
-          responseText,
-          option
+          data,
+          option,
+          fileItem
         });
       };
       let task = new Uploader(uploadOption);
       if (props.autoUpload) {
-        task.upload();
+        task.uploadTaro(Taro.uploadFile);
       } else {
         uploadQueue.push(new Promise((resolve, reject) => {
           resolve(task);
         }));
       }
     };
-    const clearUploadQueue = (index2 = -1) => {
-      if (index2 > -1) {
-        uploadQueue.splice(index2, 1);
+    const clearUploadQueue = (index = -1) => {
+      if (index > -1) {
+        uploadQueue.splice(index, 1);
       } else {
         uploadQueue = [];
       }
     };
     const submit = () => {
       Promise.all(uploadQueue).then((res) => {
-        res.forEach((i) => i.upload());
+        res.forEach((i) => i.uploadTaro(Taro.uploadFile));
       });
     };
     const readFile = (files) => {
-      files.forEach((file, index2) => {
-        const formData = new FormData();
-        formData.append(props.name, file);
+      const imgReg = /\.(png|jpeg|jpg|webp|gif)$/gi;
+      files.forEach((file, index) => {
+        let fileType = file.type;
         const fileItem = reactive(new FileItem());
-        fileItem.name = file.name;
+        if (!fileType && imgReg.test(file.path)) {
+          fileType = "image";
+        }
+        fileItem.path = file.path;
+        fileItem.name = file.path;
         fileItem.status = "ready";
-        fileItem.type = file.type;
-        fileItem.formData = formData;
-        executeUpload(fileItem, index2);
-        if (props.isPreview && file.type.includes("image")) {
-          const reader = new FileReader();
-          reader.onload = (event) => {
-            fileItem.url = event.target.result;
-            fileList.push(fileItem);
-          };
-          reader.readAsDataURL(file);
-        } else {
-          fileList.push(fileItem);
+        fileItem.message = "\u7B49\u5F85\u4E0A\u4F20";
+        fileItem.type = fileType;
+        if (props.isPreview) {
+          fileItem.url = file.path;
         }
+        fileList.push(fileItem);
+        executeUpload(fileItem, index);
       });
     };
     const filterFiles = (files) => {
@@ -268,10 +302,10 @@ const _sfc_main = create({
       }
       return files;
     };
-    const onDelete = (file, index2) => {
-      clearUploadQueue(index2);
+    const onDelete = (file, index) => {
+      clearUploadQueue(index);
       if (props.beforeDelete(file, fileList)) {
-        fileList.splice(index2, 1);
+        fileList.splice(index, 1);
         emit("delete", {
           file,
           fileList
@@ -280,34 +314,20 @@ const _sfc_main = create({
         console.log("\u7528\u6237\u963B\u6B62\u4E86\u5220\u9664\uFF01");
       }
     };
-    const onChange = (event) => {
-      if (props.disabled) {
-        return;
-      }
-      const $el = event.target;
-      let { files } = $el;
-      if (props.beforeUpload) {
-        props.beforeUpload(files).then((f) => {
-          const _files = filterFiles(new Array().slice.call(f));
-          readFile(_files);
-        });
-      } else {
-        const _files = filterFiles(new Array().slice.call(files));
-        readFile(_files);
-      }
+    const onChange = (res) => {
+      const { tempFilePaths, tempFiles } = res;
+      const _files = filterFiles(tempFiles);
+      readFile(_files);
       emit("change", {
-        fileList,
-        event
+        fileList
       });
-      if (props.clearInput) {
-        clearInput($el);
-      }
     };
     return {
-      onChange,
       onDelete,
       fileList,
       classes,
+      chooseImage,
+      fileItemClick,
       clearUploadQueue,
       submit
     };
@@ -317,101 +337,127 @@ const _hoisted_1 = {
   key: 0,
   class: "nut-uploader__slot"
 };
-const _hoisted_2 = ["accept", "multiple", "name", "disabled"];
-const _hoisted_3 = ["accept", "multiple", "name", "disabled"];
-const _hoisted_4 = { class: "nut-uploader__preview-img" };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = {
-  key: 2,
-  class: "tips"
+const _hoisted_2 = {
+  key: 0,
+  class: "nut-uploader__preview-img"
 };
-const _hoisted_7 = {
+const _hoisted_3 = {
   key: 0,
-  class: "nut-uploader__upload"
+  class: "nut-uploader__preview__progress"
+};
+const _hoisted_4 = { class: "nut-uploader__preview__progress__msg" };
+const _hoisted_5 = {
+  key: 1,
+  class: "nut-uploader__preview__progress"
+};
+const _hoisted_6 = { class: "nut-uploader__preview__progress__msg" };
+const _hoisted_7 = ["onClick", "src"];
+const _hoisted_8 = {
+  key: 4,
+  class: "nut-uploader__preview-img__file"
+};
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "tips" };
+const _hoisted_11 = {
+  key: 1,
+  class: "nut-uploader__preview-list"
 };
-const _hoisted_8 = ["accept", "multiple", "name", "disabled"];
-const _hoisted_9 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_12 = ["onClick"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_button = resolveComponent("nut-button");
   const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_progress = resolveComponent("nut-progress");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
     _ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_1, [
       renderSlot(_ctx.$slots, "default"),
-      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.capture ? (openBlock(), createElementBlock("input", {
-          key: 0,
-          class: "nut-uploader__input",
-          type: "file",
-          capture: "camera",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[0] || (_cache[0] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_2)) : (openBlock(), createElementBlock("input", {
-          key: 1,
-          class: "nut-uploader__input",
-          type: "file",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_3))
-      ], 64)) : createCommentVNode("", true)
-    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index2) => {
-        return openBlock(), createElementBlock("view", {
-          class: "nut-uploader__preview",
-          key: item.uid
-        }, [
-          createElementVNode("view", _hoisted_4, [
-            _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
-              key: 0,
-              color: "rgba(0,0,0,0.6)",
-              onClick: ($event) => _ctx.onDelete(item, index2),
-              class: "close",
-              name: "circle-close"
-            }, null, 8, ["onClick"])) : createCommentVNode("", true),
-            item.type.includes("image") && item.url ? (openBlock(), createElementBlock("img", {
-              key: 1,
-              class: "nut-uploader__preview-img__c",
-              src: item.url
-            }, null, 8, _hoisted_5)) : createCommentVNode("", true),
-            item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(item.status), 1)) : createCommentVNode("", true)
-          ])
-        ]);
-      }), 128)),
-      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", _hoisted_7, [
-        createVNode(_component_nut_icon, {
-          size: _ctx.uploadIconSize,
-          color: "#808080",
-          name: _ctx.uploadIcon
-        }, null, 8, ["size", "name"]),
-        _ctx.capture ? (openBlock(), createElementBlock("input", {
-          key: 0,
-          class: "nut-uploader__input",
-          type: "file",
-          capture: "camera",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_8)) : (openBlock(), createElementBlock("input", {
-          key: 1,
-          class: "nut-uploader__input",
-          type: "file",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_9))
-      ])) : createCommentVNode("", true)
-    ], 64))
+      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createBlock(_component_nut_button, {
+        key: 0,
+        class: "nut-uploader__input",
+        onClick: _ctx.chooseImage
+      }, null, 8, ["onClick"])) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index) => {
+      var _a;
+      return openBlock(), createElementBlock("view", {
+        class: normalizeClass(["nut-uploader__preview", [_ctx.listType]]),
+        key: item.uid
+      }, [
+        _ctx.listType == "picture" && !_ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_2, [
+          item.status == "ready" ? (openBlock(), createElementBlock("view", _hoisted_3, [
+            createElementVNode("view", _hoisted_4, toDisplayString(item.message), 1)
+          ])) : item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_5, [
+            createVNode(_component_nut_icon, {
+              color: "#fff",
+              name: item.status == "error" ? "failure" : "loading"
+            }, null, 8, ["name"]),
+            createElementVNode("view", _hoisted_6, toDisplayString(item.message), 1)
+          ])) : createCommentVNode("", true),
+          _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
+            key: 2,
+            color: "rgba(0,0,0,0.6)",
+            onClick: ($event) => _ctx.onDelete(item, index),
+            class: "close",
+            name: "failure"
+          }, null, 8, ["onClick"])) : createCommentVNode("", true),
+          ((_a = item.type) == null ? void 0 : _a.includes("image")) && item.url ? (openBlock(), createElementBlock("img", {
+            key: 3,
+            class: "nut-uploader__preview-img__c",
+            onClick: ($event) => _ctx.fileItemClick(item),
+            src: item.url
+          }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("view", _hoisted_8, [
+            createElementVNode("view", {
+              class: "nut-uploader__preview-img__file__name",
+              onClick: ($event) => _ctx.fileItemClick(item)
+            }, [
+              createVNode(_component_nut_icon, {
+                color: "#808080",
+                name: "link"
+              }),
+              createTextVNode("\xA0" + toDisplayString(item.name), 1)
+            ], 8, _hoisted_9)
+          ])),
+          createElementVNode("view", _hoisted_10, toDisplayString(item.name), 1)
+        ])) : _ctx.listType == "list" ? (openBlock(), createElementBlock("view", _hoisted_11, [
+          createElementVNode("view", {
+            class: normalizeClass(["nut-uploader__preview-img__file__name", [item.status]]),
+            onClick: ($event) => _ctx.fileItemClick(item)
+          }, [
+            createVNode(_component_nut_icon, { name: "link" }),
+            createTextVNode("\xA0" + toDisplayString(item.name), 1)
+          ], 10, _hoisted_12),
+          createVNode(_component_nut_icon, {
+            class: "nut-uploader__preview-img__file__del",
+            onClick: ($event) => _ctx.onDelete(item, index),
+            color: "#808080",
+            name: "del"
+          }, null, 8, ["onClick"]),
+          item.status == "uploading" ? (openBlock(), createBlock(_component_nut_progress, {
+            key: 0,
+            size: "small",
+            percentage: item.percentage,
+            "stroke-color": "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+            "show-text": false
+          }, null, 8, ["percentage"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    }), 128)),
+    _ctx.listType == "picture" && !_ctx.$slots.default && _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: normalizeClass(["nut-uploader__upload", [_ctx.listType]])
+    }, [
+      createVNode(_component_nut_icon, {
+        size: _ctx.uploadIconSize,
+        color: "#808080",
+        name: _ctx.uploadIcon
+      }, null, 8, ["size", "name"]),
+      createVNode(_component_nut_button, {
+        class: "nut-uploader__input",
+        onClick: _ctx.chooseImage
+      }, null, 8, ["onClick"])
+    ], 2)) : createCommentVNode("", true)
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { FileItem, index as default };
+_sfc_main.render = _sfc_render;
+export { FileItem, _sfc_main as default };

package/dist/packages/_es/commonProps.js

@@ -0,0 +1,30 @@
+/*!
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+const commonProps = {
+  listData: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  visibleItemCount: {
+    type: [Number, String],
+    default: 7
+  },
+  defaultIndex: {
+    type: [Number, String],
+    default: 0
+  },
+  itemHeight: {
+    type: [Number, String],
+    default: 35
+  }
+};
+export { commonProps as c };

package/dist/packages/_es/component.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index.taro.vue_vue&type=script&lang.js

@@ -0,0 +1,44 @@
+/*!
+* @nutui/nutui v3.1.11 Wed Nov 24 2021 14:54:38 GMT+0800 (中国标准时间)
+* (c) 2021 @jdf2e.
+* Released under the MIT License.
+*/
+import { h } from "vue";
+import { c as createComponent } from "./component.js";
+import { p as pxCheck } from "./pxCheck.js";
+const { componentName, create } = createComponent("icon");
+var _sfc_main = create({
+  props: {
+    name: { type: String, default: "" },
+    size: { type: [String, Number], default: "" },
+    classPrefix: { type: String, default: "nut-icon" },
+    fontClassName: { type: String, default: "nutui-iconfont" },
+    color: { type: String, default: "" },
+    tag: { type: String, default: "i" }
+  },
+  emits: ["click"],
+  setup(props, { emit, slots }) {
+    const handleClick = (event) => {
+      emit("click", event);
+    };
+    const isImage = () => {
+      return props.name ? props.name.indexOf("/") !== -1 : false;
+    };
+    return () => {
+      var _a;
+      const _isImage = isImage();
+      return h(_isImage ? "img" : props.tag, {
+        class: _isImage ? `${componentName}__img` : `${props.fontClassName} ${componentName} ${props.classPrefix}-${props.name}`,
+        style: {
+          color: props.color,
+          fontSize: pxCheck(props.size),
+          width: pxCheck(props.size),
+          height: pxCheck(props.size)
+        },
+        onClick: handleClick,
+        src: _isImage ? props.name : ""
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+export { _sfc_main as _ };