zartui 3.1.89 → 3.1.90

package/lib/photo-picker/PhotoPicker.js

@@ -0,0 +1,539 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_utils = require("../utils");
+var import_action_sheet = __toESM(require("../action-sheet"));
+var import_loading = __toESM(require("../loading"));
+var import_icon = __toESM(require("../icon"));
+var import_image = __toESM(require("../image"));
+var import_toast = require("../toast");
+var import_image_preview = require("../image-preview");
+var import_utils2 = require("../field/utils");
+var import_use_expose = require("../composables/use-expose");
+var import_file_type = require("file-type");
+var import_app_media_utils = require("@egova-mobile/app-media-utils");
+var import_media_util = require("../media-picker/util/media-util");
+var import_wx_util = require("../media-picker/util/wx-util");
+const [name, bem] = (0, import_utils.createNamespace)("photo-picker");
+const FILE_SIZE_LIMIT = 100;
+const COMPATIBLE_TYPE_MAPPINGS = {
+  gif: /* @__PURE__ */ new Set(["png"]),
+  jpeg: /* @__PURE__ */ new Set(["jpg"]),
+  jpg: /* @__PURE__ */ new Set(["jpeg"])
+};
+const photoPickerProps = {
+  disabled: Boolean,
+  showTitle: Boolean,
+  showDownload: Boolean,
+  downloadAction: Function,
+  useFileNameAsLabel: Boolean,
+  title: (0, import_utils.makeStringProp)("\u6DFB\u52A0\u9644\u4EF6"),
+  mediaList: (0, import_utils.makeArrayProp)(),
+  attachmentHeight: [Number, String],
+  maxAttachmentCount: (0, import_utils.makeNumberProp)(Number.MAX_VALUE),
+  maxImageSideLength: (0, import_utils.makeNumberProp)(1920),
+  maxImageFileSize: (0, import_utils.makeNumberProp)(1024),
+  maxFileSize: (0, import_utils.makeNumberProp)(FILE_SIZE_LIMIT * 1024),
+  keepFileType: {
+    type: Boolean,
+    default: false
+  },
+  watermarkOptions: {
+    type: Object,
+    default: () => null
+  },
+  allowTakePhoto: import_utils.truthProp,
+  allowPickPhoto: import_utils.truthProp,
+  preview: Function,
+  mediaPick: Function,
+  beforeRead: Function,
+  afterRead: Function,
+  beforeDelete: Function,
+  useWx: Boolean,
+  imageSizeType: (0, import_utils.makeStringProp)("compressed")
+};
+var stdin_default = (0, import_vue.defineComponent)({
+  name,
+  props: photoPickerProps,
+  emits: ["update:mediaList", "delete", "processing"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const actionVisible = (0, import_vue.ref)(false);
+    const mediaListPlaceholder = (0, import_vue.ref)([]);
+    const cameraInputRef = (0, import_vue.ref)();
+    const imageInputRef = (0, import_vue.ref)();
+    const itemSizeStyle = (0, import_vue.computed)(() => {
+      if (!(0, import_utils.isDef)(props.attachmentHeight)) {
+        return void 0;
+      }
+      const size = typeof props.attachmentHeight === "number" ? `${props.attachmentHeight}px` : props.attachmentHeight;
+      return {
+        "--zt-photo-picker-item-size": size
+      };
+    });
+    const photoList = (0, import_vue.computed)(() => props.mediaList.filter((media) => media.type === "photo"));
+    const placeholderList = (0, import_vue.computed)(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
+    const photoCount = (0, import_vue.computed)(() => photoList.value.length + placeholderList.value.length);
+    const canAddPhoto = (0, import_vue.computed)(() => photoCount.value < props.maxAttachmentCount);
+    const checkFileCountBeforeAdd = () => {
+      if (!canAddPhoto.value) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxAttachmentCount}\u4E2A\u9644\u4EF6`);
+        return false;
+      }
+      return true;
+    };
+    const triggerHiddenInput = (refEl) => {
+      refEl && refEl.click();
+    };
+    const mediaPickAction = (mediaType, mediaAddType) => {
+      if (props.disabled || mediaType !== "photo") {
+        return;
+      }
+      if (!checkFileCountBeforeAdd()) {
+        return;
+      }
+      if (props.mediaPick && props.mediaPick(mediaType, mediaAddType)) {
+        return;
+      }
+      if (props.useWx && (0, import_utils.isWeixin)() && window.wx) {
+        const type = mediaAddType === "take" ? "camera" : "album";
+        (0, import_wx_util.wxUploadImage)(type).then((newMedias) => {
+          emit("update:mediaList", [...props.mediaList, ...newMedias]);
+        });
+        return;
+      }
+      if (mediaAddType === "take") {
+        triggerHiddenInput(cameraInputRef.value);
+      } else if (mediaAddType === "pick") {
+        triggerHiddenInput(imageInputRef.value);
+      }
+    };
+    const resetInput = (mediaType, mediaAddType) => {
+      if (mediaType !== "photo") {
+        return;
+      }
+      if (mediaAddType === "take" && cameraInputRef.value instanceof HTMLInputElement) {
+        cameraInputRef.value.value = "";
+      } else if (mediaAddType === "pick" && imageInputRef.value instanceof HTMLInputElement) {
+        imageInputRef.value.value = "";
+      }
+    };
+    const checkFileExist = (file) => props.mediaList.some((media) => media.uniqueCode === (0, import_media_util.getFileUniqueCode)(file));
+    const filterValidFiles = (files) => {
+      const validFiles = [];
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        if (file.size > props.maxFileSize * 1024) {
+          (0, import_toast.showFailToast)(`\u8BF7\u52FF\u6DFB\u52A0\u5927\u4E8E${props.maxFileSize}K\u7684\u6587\u4EF6`);
+          return validFiles;
+        }
+        if (!(0, import_media_util.isImageType)(file)) {
+          (0, import_toast.showFailToast)("\u53EA\u80FD\u4E0A\u4F20\u56FE\u7247\u9644\u4EF6");
+          return validFiles;
+        }
+        if (checkFileExist(file)) {
+          (0, import_toast.showFailToast)("\u8BF7\u52FF\u91CD\u590D\u6DFB\u52A0\u6587\u4EF6");
+          return validFiles;
+        }
+        validFiles.push(file);
+      }
+      return validFiles;
+    };
+    const checkFileCountAfterAdd = (files) => {
+      if (photoCount.value + files.length > props.maxAttachmentCount) {
+        (0, import_toast.showFailToast)(`\u6700\u591A\u53EA\u80FD\u4E0A\u4F20${props.maxAttachmentCount}\u4E2A\u9644\u4EF6`);
+        return false;
+      }
+      return true;
+    };
+    const transformImageFilesWithoutCompress = (files) => {
+      const mediaList = files.map((file) => (0, import_media_util.file2DataURL)(file).then((base64) => ({
+        showSrc: base64,
+        type: "photo",
+        file,
+        uniqueCode: (0, import_media_util.getFileUniqueCode)(file),
+        lastModified: file.lastModified,
+        fileSize: file.size,
+        fileName: file.name,
+        deletable: true,
+        message: "",
+        originalName: file.name,
+        originalSize: file.size,
+        originalFile: file
+      })));
+      return Promise.all(mediaList);
+    };
+    const getExtensionFromMimeType = (mimeType) => {
+      const mimeToExt = {
+        "image/jpeg": "jpg",
+        "image/jpg": "jpg",
+        "image/png": "png",
+        "image/gif": "gif",
+        "image/webp": "webp",
+        "image/bmp": "bmp",
+        "image/svg+xml": "svg"
+      };
+      return mimeToExt[mimeType] || "jpg";
+    };
+    const transformImageFiles = (files) => {
+      const resizeOptions = new import_app_media_utils.ResizeOptions(props.maxImageSideLength);
+      const compressOptions = new import_app_media_utils.CompressOptions(props.maxImageFileSize, props.keepFileType);
+      const promisesTodo = files.map((file) => {
+        const watermarkEnabled = props.watermarkOptions && props.watermarkOptions.watermarkConfigString && (0, import_app_media_utils.checkWatermarkConfigSupported)(props.watermarkOptions.watermarkConfigString);
+        let watermarkOpt;
+        if (watermarkEnabled) {
+          watermarkOpt = {
+            enabled: true,
+            watermarkConfigString: props.watermarkOptions.watermarkConfigString,
+            context: {
+              address: props.watermarkOptions.address || "",
+              humanName: props.watermarkOptions.humanName || "",
+              projectName: props.watermarkOptions.projectName || "",
+              watermarkTime: /* @__PURE__ */ new Date()
+            }
+          };
+        } else {
+          watermarkOpt = {
+            enabled: false
+          };
+        }
+        return new import_app_media_utils.ImageProcessor(file, resizeOptions, watermarkOpt, compressOptions).process().then((f) => {
+          if (!f) {
+            return null;
+          }
+          return (0, import_media_util.file2DataURL)(f).then((base64) => {
+            const ext = props.keepFileType ? getExtensionFromMimeType(f.type) : "jpg";
+            const uniqueFileName = (0, import_media_util.getUniqueFileName)(f, ext);
+            return {
+              showSrc: base64,
+              type: "photo",
+              file: new File([f], uniqueFileName, {
+                lastModified: f.lastModified,
+                type: f.type
+              }),
+              uniqueCode: (0, import_media_util.getFileUniqueCode)(file),
+              lastModified: f.lastModified,
+              fileSize: f.size,
+              fileName: f.name,
+              deletable: true,
+              message: "",
+              originalName: file.name,
+              originalSize: file.size
+            };
+          });
+        });
+      });
+      return Promise.all(promisesTodo).then((medias) => medias.filter(import_utils.isDef));
+    };
+    const readFiles = (files) => {
+      emit("processing", true);
+      mediaListPlaceholder.value = files.map((file) => ({
+        file,
+        message: "\u5904\u7406\u4E2D...",
+        status: "processing",
+        type: "photo",
+        uniqueCode: (0, import_media_util.getFileUniqueCode)(file),
+        lastModified: file.lastModified,
+        fileSize: file.size,
+        fileName: file.name,
+        originalName: file.name,
+        originalSize: file.size,
+        deletable: true
+      }));
+      const promise = props.imageSizeType === "original" ? transformImageFilesWithoutCompress(files) : transformImageFiles(files);
+      promise.then((newMedias) => {
+        if (props.useFileNameAsLabel) {
+          newMedias.forEach((newMedia) => {
+            newMedia.label = newMedia.originalName;
+          });
+        }
+        emit("update:mediaList", [...props.mediaList, ...newMedias]);
+        if (props.afterRead) {
+          props.afterRead(newMedias);
+        }
+      }).finally(() => {
+        mediaListPlaceholder.value = [];
+        emit("processing", false);
+      });
+    };
+    const handleInputFiles = (event) => __async(this, null, function* () {
+      const inputFiles = event.target.files;
+      if (!inputFiles || inputFiles.length === 0) {
+        return;
+      }
+      const files = filterValidFiles(inputFiles);
+      if (files.length === 0) {
+        return;
+      }
+      if (!checkFileCountAfterAdd(files)) {
+        return;
+      }
+      if (props.keepFileType) {
+        try {
+          for (const file of files) {
+            const buffer = yield file.slice(0, 4100).arrayBuffer();
+            const fileType = yield (0, import_file_type.fileTypeFromBuffer)(new Uint8Array(buffer));
+            const fileName = file.name.toLowerCase();
+            const extensionMatch = fileName.match(/\.([^.]+)$/);
+            const extension = extensionMatch ? extensionMatch[1] : "";
+            if (fileType && extension && fileType.ext !== extension) {
+              const compatibleTypes = COMPATIBLE_TYPE_MAPPINGS[extension];
+              const isCompatible = compatibleTypes && compatibleTypes.has(fileType.ext);
+              if (!isCompatible) {
+                (0, import_toast.showFailToast)({
+                  message: `\u6587\u4EF6\u540E\u7F00\u4E0E\u5B9E\u9645\u6587\u4EF6\u7C7B\u578B\u4E0D\u5339\u914D\uFF1A${file.name}`,
+                  duration: 5e3
+                });
+                return;
+              }
+            }
+          }
+        } catch (error) {
+          console.error("\u6587\u4EF6\u7C7B\u578B\u6821\u9A8C\u5931\u8D25:", error);
+        }
+      }
+      if (props.beforeRead) {
+        try {
+          const response = yield props.beforeRead(files);
+          if (!response) {
+            return;
+          }
+          if (Array.isArray(response)) {
+            readFiles(response.filter((file) => !!file));
+          } else {
+            readFiles(files);
+          }
+        } catch (error) {
+          (0, import_toast.showFailToast)(error == null ? void 0 : error.message);
+        }
+      } else {
+        readFiles(files);
+      }
+    });
+    const genThumbnailMask = (media) => {
+      const {
+        status,
+        message
+      } = media;
+      if (status === "processing" || status === "uploading" || status === "failed") {
+        const MaskIcon = status === "failed" ? (0, import_vue.createVNode)(import_icon.default, {
+          "name": "close",
+          "class": bem("mask-icon")
+        }, null) : (0, import_vue.createVNode)(import_loading.default, {
+          "class": bem("loading")
+        }, null);
+        const showMessage = (0, import_utils.isDef)(message) && message !== "";
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("mask")
+        }, [MaskIcon, showMessage && (0, import_vue.createVNode)("div", {
+          "class": bem("mask-message")
+        }, [message])]);
+      }
+    };
+    const renderThumb = (media) => {
+      if (slots.thumbnail) {
+        return slots.thumbnail({
+          file: media
+        });
+      }
+      return (0, import_vue.createVNode)(import_image.default, {
+        "src": media.showSrc || media.url,
+        "fit": "cover",
+        "radius": "4"
+      }, null);
+    };
+    const renderLabel = (media) => {
+      if (slots["preview-cover"]) {
+        return slots["preview-cover"]({
+          file: media
+        });
+      }
+      if (!(0, import_utils2.isEmptyValue)(media.label)) {
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("label")
+        }, [media.label]);
+      }
+    };
+    const deleteMedia = (media, index) => {
+      const list = props.mediaList.slice(0);
+      list.splice(index, 1);
+      emit("update:mediaList", list);
+      emit("delete", media, index);
+    };
+    const onDelete = (media, index) => __async(this, null, function* () {
+      if (props.beforeDelete) {
+        const response = yield props.beforeDelete(media);
+        if (!response) {
+          return;
+        }
+      }
+      deleteMedia(media, index);
+    });
+    const previewMedia = (index) => __async(this, null, function* () {
+      if (props.preview && (yield props.preview(props.mediaList, index))) {
+        return;
+      }
+      (0, import_image_preview.showImagePreview)({
+        images: photoList.value.map((image) => ({
+          url: image.url || image.showSrc || ""
+        })),
+        showDownload: props.showDownload,
+        downloadAction: props.downloadAction,
+        startPosition: photoList.value.indexOf(props.mediaList[index]),
+        closeable: true
+      });
+    });
+    const renderDelete = (media, index) => {
+      if (props.disabled || !media.deletable || media.status === "uploading") {
+        return;
+      }
+      return (0, import_vue.createVNode)("button", {
+        "type": "button",
+        "class": bem("delete"),
+        "onClick": (event) => {
+          event.stopPropagation();
+          onDelete(media, index);
+        }
+      }, [(0, import_vue.createTextVNode)("\xD7")]);
+    };
+    const renderPhoto = (media) => {
+      const index = props.mediaList.indexOf(media);
+      return (0, import_vue.createVNode)("div", {
+        "key": media.uniqueCode,
+        "class": bem("item"),
+        "onClick": () => previewMedia(index)
+      }, [renderThumb(media), renderLabel(media), genThumbnailMask(media), renderDelete(media, index)]);
+    };
+    const renderPlaceholder = (media) => (0, import_vue.createVNode)("div", {
+      "key": media.uniqueCode || media.fileName,
+      "class": bem("item")
+    }, [renderThumb(media), renderLabel(media), genThumbnailMask(media)]);
+    const renderAdd = () => {
+      if (!canAddPhoto.value || props.disabled || !props.allowTakePhoto && !props.allowPickPhoto) {
+        return;
+      }
+      return (0, import_vue.createVNode)("button", {
+        "type": "button",
+        "class": bem("add"),
+        "disabled": props.disabled,
+        "onClick": () => {
+          if (props.allowTakePhoto && props.allowPickPhoto) {
+            actionVisible.value = true;
+            return;
+          }
+          mediaPickAction("photo", props.allowTakePhoto ? "take" : "pick");
+        }
+      }, [(0, import_vue.createVNode)("span", {
+        "class": bem("add-icon")
+      }, [(0, import_vue.createTextVNode)("+")])]);
+    };
+    const hiddenInput = () => [(0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "image/*",
+      "ref": cameraInputRef,
+      "multiple": true,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("photo", "take"),
+      "capture": "environment"
+    }, null), (0, import_vue.createVNode)("input", {
+      "type": "file",
+      "accept": "image/*,image/exact",
+      "ref": imageInputRef,
+      "multiple": true,
+      "onChange": handleInputFiles,
+      "class": bem("hidden"),
+      "onClick": () => resetInput("photo", "pick")
+    }, null)];
+    const selectAction = (action) => {
+      actionVisible.value = false;
+      action.func && action.func();
+    };
+    (0, import_use_expose.useExpose)({
+      mediaPickAction,
+      handleInputFiles,
+      transformImageFiles,
+      resetInput,
+      previewMedia
+    });
+    return () => {
+      const title = props.showTitle && (0, import_vue.createVNode)("div", {
+        "class": bem("title")
+      }, [props.title]);
+      const actions = [{
+        name: "\u62CD\u7167",
+        callback: () => mediaPickAction("photo", "take")
+      }, {
+        name: "\u7167\u7247",
+        callback: () => mediaPickAction("photo", "pick")
+      }];
+      return (0, import_vue.createVNode)("div", {
+        "class": bem(),
+        "style": itemSizeStyle.value
+      }, [title, hiddenInput(), (0, import_vue.createVNode)(import_action_sheet.default, {
+        "show": actionVisible.value,
+        "onUpdate:show": ($event) => actionVisible.value = $event,
+        "actions": actions,
+        "description": "\u8BF7\u9009\u62E9",
+        "cancel-text": "\u53D6\u6D88",
+        "teleport": "body",
+        "close-on-click-action": true,
+        "onSelect": selectAction
+      }, null), (0, import_vue.createVNode)("div", {
+        "class": bem("track")
+      }, [photoList.value.map(renderPhoto), placeholderList.value.map(renderPlaceholder), renderAdd()])]);
+    };
+  }
+});

package/lib/photo-picker/index.css

@@ -0,0 +1 @@
+:root{--zt-photo-picker-padding: 12px;--zt-photo-picker-gap: 16px;--zt-photo-picker-item-size: 140px;--zt-photo-picker-radius: 10px;--zt-photo-picker-add-border: 1px dashed #d7deee;--zt-photo-picker-add-color: #9aa8c0;--zt-photo-picker-add-background: #f8f9fc;--zt-photo-picker-delete-background: var(--zt-primary-color);--zt-photo-picker-delete-color: var(--zt-white);--zt-photo-picker-label-background: rgba(var(--zt-gray-rgb), .5);--zt-photo-picker-label-color: var(--zt-white);--zt-photo-picker-title-height: 44px}.zt-photo-picker{box-sizing:border-box;width:100%;height:100%;padding:var(--zt-photo-picker-padding);overflow:hidden}.zt-photo-picker__hidden{display:none}.zt-photo-picker__title{position:relative;height:var(--zt-photo-picker-title-height);line-height:var(--zt-photo-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-photo-picker__track{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--zt-photo-picker-gap);width:100%;height:100%;overflow-x:auto;overflow-y:hidden}.zt-photo-picker__track::-webkit-scrollbar{width:0;height:0}.zt-photo-picker__item,.zt-photo-picker__add{position:relative;flex:0 0 var(--zt-photo-picker-item-size);width:var(--zt-photo-picker-item-size);height:var(--zt-photo-picker-item-size);border-radius:var(--zt-photo-picker-radius);box-sizing:border-box;overflow:hidden}.zt-photo-picker__add{display:flex;align-items:center;justify-content:center;padding:0;color:var(--zt-photo-picker-add-color);background:var(--zt-photo-picker-add-background);border:var(--zt-photo-picker-add-border)}.zt-photo-picker__add:disabled{opacity:var(--zt-disabled-opacity)}.zt-photo-picker__add-icon{font-size:48px;line-height:1;font-weight:300}.zt-photo-picker__delete{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:calc(var(--zt-photo-picker-item-size) * .2);height:calc(var(--zt-photo-picker-item-size) * .2);padding:0;color:var(--zt-photo-picker-delete-color);font-size:calc(var(--zt-photo-picker-item-size) * .15);line-height:1;background:var(--zt-photo-picker-delete-background);border:0;border-radius:50%}.zt-photo-picker .zt-image,.zt-photo-picker__thumbnail{width:100%;height:100%}.zt-photo-picker__label{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:var(--zt-line-height-lg);line-height:var(--zt-line-height-lg);padding:0 var(--zt-padding-xs);overflow:hidden;text-align:center;border-radius:0 0 4px 4px;font-size:var(--zt-font-size-sm);text-overflow:ellipsis;word-break:break-all;white-space:nowrap;color:var(--zt-photo-picker-label-color);background-color:var(--zt-photo-picker-label-background)}.zt-photo-picker__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--zt-white);background-color:var(--zt-uploader-mask-background);border-radius:4px}.zt-photo-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-photo-picker__mask-message{margin-top:6px;padding:0 var(--zt-padding-base);font-size:var(--zt-font-size-sm);line-height:var(--zt-uploader-mask-message-line-height)}.zt-photo-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}

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

@@ -0,0 +1,145 @@
+export declare const PhotoPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    showTitle: BooleanConstructor;
+    showDownload: BooleanConstructor;
+    downloadAction: import("vue").PropType<(params: import("../image-preview/ImagePreview").DownloadActionParams) => boolean>;
+    useFileNameAsLabel: BooleanConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    mediaList: {
+        type: import("vue").PropType<import("../media-picker/type").Media[]>;
+        default: () => import("../media-picker/type").Media[];
+    };
+    attachmentHeight: import("vue").PropType<string | number>;
+    maxAttachmentCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxImageSideLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxImageFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepFileType: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    watermarkOptions: {
+        type: ObjectConstructor;
+        default: () => null;
+    };
+    allowTakePhoto: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    allowPickPhoto: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    preview: import("vue").PropType<import("../media-picker/type").MediaPreview>;
+    mediaPick: import("vue").PropType<import("../media-picker/type").MediaPick>;
+    beforeRead: import("vue").PropType<import("../media-picker/type").MediaBeforeRead>;
+    afterRead: import("vue").PropType<import("../media-picker/type").MediaAfterRead>;
+    beforeDelete: import("vue").PropType<import("../media-picker/type").MediaBeforeDelete>;
+    useWx: BooleanConstructor;
+    imageSizeType: {
+        type: import("vue").PropType<import("../media-picker/type").MediaSizeType>;
+        default: import("../media-picker/type").MediaSizeType;
+    };
+}>, () => 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;
+    showDownload: BooleanConstructor;
+    downloadAction: import("vue").PropType<(params: import("../image-preview/ImagePreview").DownloadActionParams) => boolean>;
+    useFileNameAsLabel: BooleanConstructor;
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    mediaList: {
+        type: import("vue").PropType<import("../media-picker/type").Media[]>;
+        default: () => import("../media-picker/type").Media[];
+    };
+    attachmentHeight: import("vue").PropType<string | number>;
+    maxAttachmentCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxImageSideLength: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxImageFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxFileSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+    keepFileType: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    watermarkOptions: {
+        type: ObjectConstructor;
+        default: () => null;
+    };
+    allowTakePhoto: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    allowPickPhoto: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    preview: import("vue").PropType<import("../media-picker/type").MediaPreview>;
+    mediaPick: import("vue").PropType<import("../media-picker/type").MediaPick>;
+    beforeRead: import("vue").PropType<import("../media-picker/type").MediaBeforeRead>;
+    afterRead: import("vue").PropType<import("../media-picker/type").MediaAfterRead>;
+    beforeDelete: import("vue").PropType<import("../media-picker/type").MediaBeforeDelete>;
+    useWx: BooleanConstructor;
+    imageSizeType: {
+        type: import("vue").PropType<import("../media-picker/type").MediaSizeType>;
+        default: import("../media-picker/type").MediaSizeType;
+    };
+}>> & Readonly<{
+    onDelete?: ((...args: any[]) => any) | undefined;
+    onProcessing?: ((...args: any[]) => any) | undefined;
+    "onUpdate:mediaList"?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    disabled: boolean;
+    showTitle: boolean;
+    showDownload: boolean;
+    useFileNameAsLabel: boolean;
+    mediaList: import("../media-picker/type").Media[];
+    maxImageSideLength: number;
+    maxImageFileSize: number;
+    maxFileSize: number;
+    keepFileType: boolean;
+    watermarkOptions: Record<string, any>;
+    allowTakePhoto: boolean;
+    allowPickPhoto: boolean;
+    useWx: boolean;
+    imageSizeType: import("../media-picker/type").MediaSizeType;
+    maxAttachmentCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export default PhotoPicker;
+export type { PhotoPickerProps, PhotoPickerInstance } from './PhotoPicker';
+export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaSizeType, } from '../media-picker/type';
+export { defaultMedia } from '../media-picker/type';
+declare module 'vue' {
+    interface GlobalComponents {
+        ZtPhotoPicker: typeof PhotoPicker;
+    }
+}