zartui 3.1.41 → 3.1.43

package/lib/media-picker/MediaPicker.js

@@ -134,7 +134,7 @@ const mediaPickerProps = {
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: mediaPickerProps,
-  emits: ["update:mediaList", "delete"],
+  emits: ["update:mediaList", "delete", "processing"],
   setup(props, {
     emit,
     slots
@@ -152,6 +152,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const audioRecorderInputRef = (0, import_vue2.ref)();
     const audioFileInputRef = (0, import_vue2.ref)();
     const fileInputRef = (0, import_vue2.ref)();
+    const mediaListPlaceholder = (0, import_vue2.ref)([]);
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         (0, import_toast.showFailToast)("\u5DF2\u8FBE\u5230\u6587\u4EF6\u6700\u5927\u6570\u91CF\u9650\u5236");
@@ -361,11 +362,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
           return media;
         });
       });
-      (0, import_toast.showLoadingToast)({
-        message: "\u5904\u7406\u4E2D...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(mediaList).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -375,7 +371,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         });
         return _medias;
       }).finally(() => {
-        (0, import_toast.closeToast)();
       });
     };
     const transformImageFiles = (files) => {
@@ -434,11 +429,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         });
         promisesTodo.push(promise);
       }
-      (0, import_toast.showLoadingToast)({
-        message: "\u5904\u7406\u4E2D...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(promisesTodo).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -448,10 +438,28 @@ var stdin_default = (0, import_vue2.defineComponent)({
         });
         return _medias;
       }).finally(() => {
-        (0, import_toast.closeToast)();
       });
     };
     const readFiles = (files) => {
+      emit("processing", true);
+      mediaListPlaceholder.value = files.map((file) => {
+        let type;
+        if ((0, import_media_util.isAudioType)(file)) {
+          type = "audio";
+        } else if ((0, import_media_util.isVideoType)(file)) {
+          type = "video";
+        } else if ((0, import_media_util.isImageType)(file)) {
+          type = "photo";
+        } else {
+          type = "file";
+        }
+        return {
+          file,
+          message: "\u5904\u7406\u4E2D...",
+          status: "processing",
+          type
+        };
+      });
       const notImages = files.filter((f) => !(0, import_media_util.isImageType)(f)).map((f) => transformNotImageFile(f));
       let newMedias = [];
       if (notImages.length > 0) {
@@ -474,6 +482,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
             newMedia.label = newMedia.originalName;
           });
         }
+        mediaListPlaceholder.value = [];
+        emit("processing", false);
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -650,7 +660,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         status,
         message
       } = media;
-      if (status === "uploading" || status === "failed") {
+      if (status === "processing" || status === "uploading" || status === "failed") {
         const MaskIcon = status === "failed" ? (0, import_vue.createVNode)(import_icon.default, {
           "name": "close",
           "class": bem("mask-icon")
@@ -785,6 +795,15 @@ var stdin_default = (0, import_vue2.defineComponent)({
         (0, import_toast.showFailToast)("\u6682\u4E0D\u652F\u6301\u6B64\u7C7B\u6587\u4EF6\u7684\u9884\u89C8");
       }
     });
+    const renderMediaListPlaceholder = () => {
+      return mediaListPlaceholder.value.map((media) => {
+        return (0, import_vue.createVNode)(import_grid_item.default, {
+          "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 && (0, import_vue.createVNode)(import_DeleteIcon.default, {
@@ -836,6 +855,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "square": true,
         "gutter": "4",
         "class": bem("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[import_vue.vShow, mediaListPlaceholder.value.length]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem("grid")
       }, {
         default: () => [renderMediaList()]
       }), [[import_vue.vShow, props.mediaList.length]])]);

package/lib/media-picker/index.d.ts

@@ -66,7 +66,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
         default: import("./type").MediaSizeType;
     };
     mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "update:mediaList")[], "delete" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "processing" | "update:mediaList")[], "delete" | "processing" | "update:mediaList", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -136,6 +136,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
 }>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
+    onProcessing?: ((...args: any[]) => any) | undefined;
     "onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
 }>, {
     title: string;

package/lib/media-picker/type.d.ts

@@ -1,6 +1,6 @@
 export type MediaType = 'photo' | 'audio' | 'video' | 'file';
 export type MediaAddType = 'take' | 'pick' | 'take_and_pick';
-export type MediaUploadStatus = 'uploading' | 'done' | 'failed';
+export type MediaUploadStatus = 'processing' | 'uploading' | 'done' | 'failed';
 export type WxMediaType = 'camera' | 'album';
 export type MediaSizeType = 'original' | 'compressed';
 export type Media = {

package/lib/vue-sfc-shim.d.ts

@@ -1,6 +1,6 @@
-declare module '*.vue' {
-  // eslint-disable-next-line
-  import { DefineComponent } from 'vue';
-  const Component: DefineComponent;
-  export default Component;
-}
+declare module '*.vue' {
+  // eslint-disable-next-line
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent;
+  export default Component;
+}

package/lib/vue-tsx-shim.d.ts

@@ -1,23 +1,23 @@
-import 'vue';
-
-type EventHandler = (...args: any[]) => void;
-
-declare module 'vue' {
-  interface ComponentCustomProps {
-    id?: string;
-    role?: string;
-    tabindex?: number;
-    onClick?: EventHandler;
-    onTouchend?: EventHandler;
-    onTouchmove?: EventHandler;
-    onTouchstart?: EventHandler;
-    onTouchcancel?: EventHandler;
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-
-  interface HTMLAttributes {
-    onTouchmovePassive?: EventHandler;
-    onTouchstartPassive?: EventHandler;
-  }
-}
+import 'vue';
+
+type EventHandler = (...args: any[]) => void;
+
+declare module 'vue' {
+  interface ComponentCustomProps {
+    id?: string;
+    role?: string;
+    tabindex?: number;
+    onClick?: EventHandler;
+    onTouchend?: EventHandler;
+    onTouchmove?: EventHandler;
+    onTouchstart?: EventHandler;
+    onTouchcancel?: EventHandler;
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+
+  interface HTMLAttributes {
+    onTouchmovePassive?: EventHandler;
+    onTouchstartPassive?: EventHandler;
+  }
+}