zartui 3.1.42 → 3.1.44

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("已达到文件最大数量限制");
@@ -14122,6 +14123,25 @@ var stdin_default$B = vue.defineComponent({
       });
     };
     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) {
@@ -14144,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);
@@ -14320,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")
@@ -14455,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, {
@@ -14508,7 +14539,15 @@ var stdin_default$B = vue.defineComponent({
         "class": bem$t("grid")
       }, {
         default: () => [renderMediaList()]
-      }), [[vue.vShow, props.mediaList.length]])]);
+      }), [[vue.vShow, props.mediaList.length]]), vue.withDirectives(vue.createVNode(stdin_default$W, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem$t("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[vue.vShow, mediaListPlaceholder.value.length]])]);
     };
   }
 });
@@ -20619,7 +20658,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.42";
+const version = "3.1.44";
 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("已达到文件最大数量限制");
@@ -14120,6 +14121,25 @@ var stdin_default$B = defineComponent({
       });
     };
     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) {
@@ -14142,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);
@@ -14318,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")
@@ -14453,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, {
@@ -14506,7 +14537,15 @@ var stdin_default$B = defineComponent({
         "class": bem$t("grid")
       }, {
         default: () => [renderMediaList()]
-      }), [[vShow, props.mediaList.length]])]);
+      }), [[vShow, props.mediaList.length]]), withDirectives(createVNode(stdin_default$W, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem$t("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[vShow, mediaListPlaceholder.value.length]])]);
     };
   }
 });
@@ -20617,7 +20656,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.1.42";
+const version = "3.1.44";
 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("已达到文件最大数量限制");
@@ -15898,6 +15899,25 @@
         });
       };
       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) {
@@ -15920,6 +15940,8 @@
               newMedia.label = newMedia.originalName;
             });
           }
+          mediaListPlaceholder.value = [];
+          emit("processing", false);
           emit("update:mediaList", [...props.mediaList, ...newMedias]);
           if (props.afterRead) {
             props.afterRead(newMedias);
@@ -16096,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")
@@ -16231,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, {
@@ -16284,7 +16315,15 @@
           "class": bem$t("grid")
         }, {
           default: () => [renderMediaList()]
-        }), [[vue.vShow, props.mediaList.length]])]);
+        }), [[vue.vShow, props.mediaList.length]]), vue.withDirectives(vue.createVNode(stdin_default$W, {
+          "column-num": "3",
+          "border": false,
+          "square": true,
+          "gutter": "4",
+          "class": bem$t("grid")
+        }, {
+          default: () => [renderMediaListPlaceholder()]
+        }), [[vue.vShow, mediaListPlaceholder.value.length]])]);
       };
     }
   });
@@ -24679,7 +24718,7 @@
       });
     }
   };
-  const version = "3.1.42";
+  const version = "3.1.44";
   function install(app) {
     const components = [
       ActionSheet,