zartui 3.1.41 → 3.1.43

package/lib/zartui.cjs.js

@@ -13816,7 +13816,7 @@ const mediaPickerProps = {
 var stdin_default$B = vue.defineComponent({
   name: name$u,
   props: mediaPickerProps,
-  emits: ["update:mediaList", "delete"],
+  emits: ["update:mediaList", "delete", "processing"],
   setup(props, {
     emit,
     slots
@@ -13834,6 +13834,7 @@ var stdin_default$B = vue.defineComponent({
     const audioRecorderInputRef = vue.ref();
     const audioFileInputRef = vue.ref();
     const fileInputRef = vue.ref();
+    const mediaListPlaceholder = vue.ref([]);
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         showFailToast("已达到文件最大数量限制");
@@ -14043,11 +14044,6 @@ var stdin_default$B = vue.defineComponent({
           return media;
         });
       });
-      showLoadingToast({
-        message: "处理中...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(mediaList).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -14057,7 +14053,6 @@ var stdin_default$B = vue.defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     const transformImageFiles = (files) => {
@@ -14116,11 +14111,6 @@ var stdin_default$B = vue.defineComponent({
         });
         promisesTodo.push(promise);
       }
-      showLoadingToast({
-        message: "处理中...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(promisesTodo).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -14130,10 +14120,28 @@ var stdin_default$B = vue.defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     const readFiles = (files) => {
+      emit("processing", true);
+      mediaListPlaceholder.value = files.map((file) => {
+        let type;
+        if (isAudioType(file)) {
+          type = "audio";
+        } else if (isVideoType(file)) {
+          type = "video";
+        } else if (isImageType(file)) {
+          type = "photo";
+        } else {
+          type = "file";
+        }
+        return {
+          file,
+          message: "处理中...",
+          status: "processing",
+          type
+        };
+      });
       const notImages = files.filter((f) => !isImageType(f)).map((f) => transformNotImageFile(f));
       let newMedias = [];
       if (notImages.length > 0) {
@@ -14156,6 +14164,8 @@ var stdin_default$B = vue.defineComponent({
             newMedia.label = newMedia.originalName;
           });
         }
+        mediaListPlaceholder.value = [];
+        emit("processing", false);
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -14332,7 +14342,7 @@ var stdin_default$B = vue.defineComponent({
         status,
         message
       } = media;
-      if (status === "uploading" || status === "failed") {
+      if (status === "processing" || status === "uploading" || status === "failed") {
         const MaskIcon = status === "failed" ? vue.createVNode(stdin_default$1V, {
           "name": "close",
           "class": bem$t("mask-icon")
@@ -14467,6 +14477,15 @@ var stdin_default$B = vue.defineComponent({
         showFailToast("暂不支持此类文件的预览");
       }
     });
+    const renderMediaListPlaceholder = () => {
+      return mediaListPlaceholder.value.map((media) => {
+        return vue.createVNode(stdin_default$U, {
+          "key": media.uniqueCode
+        }, {
+          default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]
+        });
+      });
+    };
     const renderMediaList = () => props.mediaList.map((media, index) => {
       const showDelete = media.deletable && media.status !== "uploading";
       const deleteIcon = showDelete && vue.createVNode(stdin_default$M, {
@@ -14518,6 +14537,14 @@ var stdin_default$B = vue.defineComponent({
         "square": true,
         "gutter": "4",
         "class": bem$t("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[vue.vShow, mediaListPlaceholder.value.length]]), vue.withDirectives(vue.createVNode(stdin_default$W, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem$t("grid")
       }, {
         default: () => [renderMediaList()]
       }), [[vue.vShow, props.mediaList.length]])]);
@@ -20631,7 +20658,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.41";
+const version = "3.1.43";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.es.js

@@ -13814,7 +13814,7 @@ const mediaPickerProps = {
 var stdin_default$B = defineComponent({
   name: name$u,
   props: mediaPickerProps,
-  emits: ["update:mediaList", "delete"],
+  emits: ["update:mediaList", "delete", "processing"],
   setup(props, {
     emit,
     slots
@@ -13832,6 +13832,7 @@ var stdin_default$B = defineComponent({
     const audioRecorderInputRef = ref();
     const audioFileInputRef = ref();
     const fileInputRef = ref();
+    const mediaListPlaceholder = ref([]);
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         showFailToast("已达到文件最大数量限制");
@@ -14041,11 +14042,6 @@ var stdin_default$B = defineComponent({
           return media;
         });
       });
-      showLoadingToast({
-        message: "处理中...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(mediaList).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -14055,7 +14051,6 @@ var stdin_default$B = defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     const transformImageFiles = (files) => {
@@ -14114,11 +14109,6 @@ var stdin_default$B = defineComponent({
         });
         promisesTodo.push(promise);
       }
-      showLoadingToast({
-        message: "处理中...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(promisesTodo).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -14128,10 +14118,28 @@ var stdin_default$B = defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     const readFiles = (files) => {
+      emit("processing", true);
+      mediaListPlaceholder.value = files.map((file) => {
+        let type;
+        if (isAudioType(file)) {
+          type = "audio";
+        } else if (isVideoType(file)) {
+          type = "video";
+        } else if (isImageType(file)) {
+          type = "photo";
+        } else {
+          type = "file";
+        }
+        return {
+          file,
+          message: "处理中...",
+          status: "processing",
+          type
+        };
+      });
       const notImages = files.filter((f) => !isImageType(f)).map((f) => transformNotImageFile(f));
       let newMedias = [];
       if (notImages.length > 0) {
@@ -14154,6 +14162,8 @@ var stdin_default$B = defineComponent({
             newMedia.label = newMedia.originalName;
           });
         }
+        mediaListPlaceholder.value = [];
+        emit("processing", false);
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -14330,7 +14340,7 @@ var stdin_default$B = defineComponent({
         status,
         message
       } = media;
-      if (status === "uploading" || status === "failed") {
+      if (status === "processing" || status === "uploading" || status === "failed") {
         const MaskIcon = status === "failed" ? createVNode(stdin_default$1V, {
           "name": "close",
           "class": bem$t("mask-icon")
@@ -14465,6 +14475,15 @@ var stdin_default$B = defineComponent({
         showFailToast("暂不支持此类文件的预览");
       }
     });
+    const renderMediaListPlaceholder = () => {
+      return mediaListPlaceholder.value.map((media) => {
+        return createVNode(stdin_default$U, {
+          "key": media.uniqueCode
+        }, {
+          default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]
+        });
+      });
+    };
     const renderMediaList = () => props.mediaList.map((media, index) => {
       const showDelete = media.deletable && media.status !== "uploading";
       const deleteIcon = showDelete && createVNode(stdin_default$M, {
@@ -14516,6 +14535,14 @@ var stdin_default$B = defineComponent({
         "square": true,
         "gutter": "4",
         "class": bem$t("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[vShow, mediaListPlaceholder.value.length]]), withDirectives(createVNode(stdin_default$W, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem$t("grid")
       }, {
         default: () => [renderMediaList()]
       }), [[vShow, props.mediaList.length]])]);
@@ -20629,7 +20656,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.41";
+const version = "3.1.43";
 function install(app) {
   const components = [
     ActionSheet,

package/lib/zartui.js

@@ -15592,7 +15592,7 @@
   var stdin_default$B = vue.defineComponent({
     name: name$u,
     props: mediaPickerProps,
-    emits: ["update:mediaList", "delete"],
+    emits: ["update:mediaList", "delete", "processing"],
     setup(props, {
       emit,
       slots
@@ -15610,6 +15610,7 @@
       const audioRecorderInputRef = vue.ref();
       const audioFileInputRef = vue.ref();
       const fileInputRef = vue.ref();
+      const mediaListPlaceholder = vue.ref([]);
       const checkFileCountBeforeAdd = (mediaType) => {
         if (props.mediaList.length === props.maxMediaCount) {
           showFailToast("已达到文件最大数量限制");
@@ -15819,11 +15820,6 @@
             return media;
           });
         });
-        showLoadingToast({
-          message: "处理中...",
-          forbidClick: true,
-          duration: 0
-        });
         return Promise.all(mediaList).then((medias) => {
           const _medias = [];
           medias.forEach((media) => {
@@ -15833,7 +15829,6 @@
           });
           return _medias;
         }).finally(() => {
-          closeToast();
         });
       };
       const transformImageFiles = (files) => {
@@ -15892,11 +15887,6 @@
           });
           promisesTodo.push(promise);
         }
-        showLoadingToast({
-          message: "处理中...",
-          forbidClick: true,
-          duration: 0
-        });
         return Promise.all(promisesTodo).then((medias) => {
           const _medias = [];
           medias.forEach((media) => {
@@ -15906,10 +15896,28 @@
           });
           return _medias;
         }).finally(() => {
-          closeToast();
         });
       };
       const readFiles = (files) => {
+        emit("processing", true);
+        mediaListPlaceholder.value = files.map((file) => {
+          let type;
+          if (isAudioType(file)) {
+            type = "audio";
+          } else if (isVideoType(file)) {
+            type = "video";
+          } else if (isImageType(file)) {
+            type = "photo";
+          } else {
+            type = "file";
+          }
+          return {
+            file,
+            message: "处理中...",
+            status: "processing",
+            type
+          };
+        });
         const notImages = files.filter((f) => !isImageType(f)).map((f) => transformNotImageFile(f));
         let newMedias = [];
         if (notImages.length > 0) {
@@ -15932,6 +15940,8 @@
               newMedia.label = newMedia.originalName;
             });
           }
+          mediaListPlaceholder.value = [];
+          emit("processing", false);
           emit("update:mediaList", [...props.mediaList, ...newMedias]);
           if (props.afterRead) {
             props.afterRead(newMedias);
@@ -16108,7 +16118,7 @@
           status,
           message
         } = media;
-        if (status === "uploading" || status === "failed") {
+        if (status === "processing" || status === "uploading" || status === "failed") {
           const MaskIcon = status === "failed" ? vue.createVNode(stdin_default$1V, {
             "name": "close",
             "class": bem$t("mask-icon")
@@ -16243,6 +16253,15 @@
           showFailToast("暂不支持此类文件的预览");
         }
       });
+      const renderMediaListPlaceholder = () => {
+        return mediaListPlaceholder.value.map((media) => {
+          return vue.createVNode(stdin_default$U, {
+            "key": media.uniqueCode
+          }, {
+            default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]
+          });
+        });
+      };
       const renderMediaList = () => props.mediaList.map((media, index2) => {
         const showDelete = media.deletable && media.status !== "uploading";
         const deleteIcon = showDelete && vue.createVNode(stdin_default$M, {
@@ -16294,6 +16313,14 @@
           "square": true,
           "gutter": "4",
           "class": bem$t("grid")
+        }, {
+          default: () => [renderMediaListPlaceholder()]
+        }), [[vue.vShow, mediaListPlaceholder.value.length]]), vue.withDirectives(vue.createVNode(stdin_default$W, {
+          "column-num": "3",
+          "border": false,
+          "square": true,
+          "gutter": "4",
+          "class": bem$t("grid")
         }, {
           default: () => [renderMediaList()]
         }), [[vue.vShow, props.mediaList.length]])]);
@@ -24691,7 +24718,7 @@
       });
     }
   };
-  const version = "3.1.41";
+  const version = "3.1.43";
   function install(app) {
     const components = [
       ActionSheet,