zartui 3.1.42 → 3.1.43

package/es/index.d.ts

@@ -83,4 +83,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.42";
+export const version: "3.1.43";

package/es/index.mjs

@@ -76,7 +76,7 @@ import { Timeline } from "./timeline/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Video } from "./video/index.mjs";
-const version = "3.1.42";
+const version = "3.1.43";
 function install(app) {
   const components = [
     ActionSheet,

package/es/media-picker/MediaPicker.d.ts

@@ -162,7 +162,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: MediaSizeType;
     };
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "update:mediaList")[], "delete" | "update:mediaList", import("vue").PublicProps, Readonly<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<ExtractPropTypes<{
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -242,6 +242,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 }>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
+    onProcessing?: ((...args: any[]) => any) | undefined;
     "onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
 }>, {
     title: string;

package/es/media-picker/MediaPicker.mjs

@@ -102,7 +102,7 @@ const mediaPickerProps = {
 var stdin_default = defineComponent({
   name,
   props: mediaPickerProps,
-  emits: ["update:mediaList", "delete"],
+  emits: ["update:mediaList", "delete", "processing"],
   setup(props, {
     emit,
     slots
@@ -120,6 +120,7 @@ var stdin_default = defineComponent({
     const audioRecorderInputRef = ref();
     const audioFileInputRef = ref();
     const fileInputRef = ref();
+    const mediaListPlaceholder = ref([]);
     const checkFileCountBeforeAdd = (mediaType) => {
       if (props.mediaList.length === props.maxMediaCount) {
         showFailToast("\u5DF2\u8FBE\u5230\u6587\u4EF6\u6700\u5927\u6570\u91CF\u9650\u5236");
@@ -408,6 +409,25 @@ var stdin_default = 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: "\u5904\u7406\u4E2D...",
+          status: "processing",
+          type
+        };
+      });
       const notImages = files.filter((f) => !isImageType(f)).map((f) => transformNotImageFile(f));
       let newMedias = [];
       if (notImages.length > 0) {
@@ -430,6 +450,8 @@ var stdin_default = defineComponent({
             newMedia.label = newMedia.originalName;
           });
         }
+        mediaListPlaceholder.value = [];
+        emit("processing", false);
         emit("update:mediaList", [...props.mediaList, ...newMedias]);
         if (props.afterRead) {
           props.afterRead(newMedias);
@@ -606,7 +628,7 @@ var stdin_default = defineComponent({
         status,
         message
       } = media;
-      if (status === "uploading" || status === "failed") {
+      if (status === "processing" || status === "uploading" || status === "failed") {
         const MaskIcon = status === "failed" ? _createVNode(ZtIcon, {
           "name": "close",
           "class": bem("mask-icon")
@@ -741,6 +763,15 @@ var stdin_default = defineComponent({
         showFailToast("\u6682\u4E0D\u652F\u6301\u6B64\u7C7B\u6587\u4EF6\u7684\u9884\u89C8");
       }
     });
+    const renderMediaListPlaceholder = () => {
+      return mediaListPlaceholder.value.map((media) => {
+        return _createVNode(ZtGridItem, {
+          "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(DeleteIcon, {
@@ -792,6 +823,14 @@ var stdin_default = defineComponent({
         "square": true,
         "gutter": "4",
         "class": bem("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[_vShow, mediaListPlaceholder.value.length]]), _withDirectives(_createVNode(ZtGrid, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem("grid")
       }, {
         default: () => [renderMediaList()]
       }), [[_vShow, props.mediaList.length]])]);

package/es/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/es/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/index.d.ts

@@ -83,4 +83,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.42";
+export const version: "3.1.43";

package/lib/index.js

@@ -180,7 +180,7 @@ __reExport(stdin_exports, require("./timeline"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
 __reExport(stdin_exports, require("./video"), module.exports);
-const version = "3.1.42";
+const version = "3.1.43";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,

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

@@ -162,7 +162,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: MediaSizeType;
     };
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
-}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "update:mediaList")[], "delete" | "update:mediaList", import("vue").PublicProps, Readonly<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<ExtractPropTypes<{
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
     useFileNameAsLabel: BooleanConstructor;
@@ -242,6 +242,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 }>> & Readonly<{
     onDelete?: ((...args: any[]) => any) | undefined;
+    onProcessing?: ((...args: any[]) => any) | undefined;
     "onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
 }>, {
     title: string;

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");
@@ -440,6 +441,25 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
     };
     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) {
@@ -462,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);
@@ -638,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")
@@ -773,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, {
@@ -824,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 = {