zartui 3.1.89 → 3.1.90

package/lib/index.d.ts

@@ -45,6 +45,7 @@ export * from "./number-keyboard";
 export * from "./overlay";
 export * from "./pagination";
 export * from "./password-input";
+export * from "./photo-picker";
 export * from "./picker";
 export * from "./popover";
 export * from "./popup";
@@ -85,4 +86,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "3.1.89";
+export const version: "3.1.90";

package/lib/index.js

@@ -69,6 +69,7 @@ var import_number_keyboard = require("./number-keyboard");
 var import_overlay = require("./overlay");
 var import_pagination = require("./pagination");
 var import_password_input = require("./password-input");
+var import_photo_picker = require("./photo-picker");
 var import_picker = require("./picker");
 var import_popover = require("./popover");
 var import_popup = require("./popup");
@@ -150,6 +151,7 @@ __reExport(stdin_exports, require("./number-keyboard"), module.exports);
 __reExport(stdin_exports, require("./overlay"), module.exports);
 __reExport(stdin_exports, require("./pagination"), module.exports);
 __reExport(stdin_exports, require("./password-input"), module.exports);
+__reExport(stdin_exports, require("./photo-picker"), module.exports);
 __reExport(stdin_exports, require("./picker"), module.exports);
 __reExport(stdin_exports, require("./popover"), module.exports);
 __reExport(stdin_exports, require("./popup"), module.exports);
@@ -184,7 +186,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.89";
+const version = "3.1.90";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,
@@ -233,6 +235,7 @@ function install(app) {
     import_overlay.Overlay,
     import_pagination.Pagination,
     import_password_input.PasswordInput,
+    import_photo_picker.PhotoPicker,
     import_picker.Picker,
     import_popover.Popover,
     import_popup.Popup,

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

@@ -1,12 +1,8 @@
 import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
-import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPickerVariant, MediaPreview, MediaSizeType, MediaType } from './type';
+import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
 import { MediaPlayerProps } from '../media-player';
 import { DownloadActionParams } from '../image-preview/ImagePreview';
 declare const mediaPickerProps: {
-    variant: {
-        type: PropType<MediaPickerVariant>;
-        default: MediaPickerVariant;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -100,10 +96,6 @@ export type MediaPickerInstance = ComponentPublicInstance<{
     mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
 }>;
 declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
-    variant: {
-        type: PropType<MediaPickerVariant>;
-        default: MediaPickerVariant;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -192,10 +184,6 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     };
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 }>, () => 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<{
-    variant: {
-        type: PropType<MediaPickerVariant>;
-        default: MediaPickerVariant;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -292,7 +280,6 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     disabled: boolean;
     showTitle: boolean;
     showDownload: boolean;
-    variant: MediaPickerVariant;
     sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: Media[];

package/lib/media-picker/MediaPicker.js

@@ -92,7 +92,6 @@ const COMPATIBLE_TYPE_MAPPINGS = {
   "m4a": /* @__PURE__ */ new Set(["mp4", "mp4a", "x-m4a"])
 };
 const mediaPickerProps = {
-  variant: (0, import_utils.makeStringProp)("default"),
   sortable: {
     type: Boolean,
     default: false
@@ -181,10 +180,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const gridRef = (0, import_vue2.ref)();
     const mediaListPlaceholder = (0, import_vue2.ref)([]);
     const sort = (0, import_vue2.ref)();
-    const isAttachmentVariant = (0, import_vue2.computed)(() => props.variant === "attachment");
-    const attachmentMediaList = (0, import_vue2.computed)(() => props.mediaList.filter((media) => media.type === "photo"));
-    const attachmentMediaListPlaceholder = (0, import_vue2.computed)(() => mediaListPlaceholder.value.filter((media) => media.type === "photo"));
-    const shouldIsolateSortableTouch = () => !isAttachmentVariant.value && props.sortable && props.mediaList.length > 0;
+    const shouldIsolateSortableTouch = () => props.sortable && props.mediaList.length > 0;
     const stopSortableTouchStartPropagation = (event) => {
       if (!shouldIsolateSortableTouch()) {
         return;
@@ -200,7 +196,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const initSortable = () => __async(this, null, function* () {
       var _a;
-      if (sort.value || isAttachmentVariant.value || !props.sortable || !props.mediaList.length)
+      if (sort.value || !props.sortable || !props.mediaList.length)
         return;
       yield (0, import_vue2.nextTick)();
       const gridEl = (_a = gridRef.value) == null ? void 0 : _a.$el;
@@ -780,40 +776,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return buttons;
     };
-    const renderAttachmentAdd = () => {
-      const canTakePhoto = props.allowTakePhoto;
-      const canPickPhoto = props.allowPickPhoto;
-      if (!canTakePhoto && !canPickPhoto) {
-        return;
-      }
-      if (props.allowTakePhoto && props.allowPickPhoto) {
-        return (0, import_vue.createVNode)("button", {
-          "type": "button",
-          "class": bem("attachment-add"),
-          "disabled": props.disabled,
-          "onClick": () => {
-            if (props.disabled) {
-              return;
-            }
-            actionVisible.value = true;
-            photoOptionsVisible.value = true;
-            videoOptionsVisible.value = false;
-            audioOptionsVisible.value = false;
-          }
-        }, [(0, import_vue.createVNode)("span", {
-          "class": bem("attachment-add-icon")
-        }, [(0, import_vue.createTextVNode)("+")])]);
-      }
-      const addType = canTakePhoto ? "take" : "pick";
-      return (0, import_vue.createVNode)("button", {
-        "type": "button",
-        "class": bem("attachment-add"),
-        "disabled": props.disabled,
-        "onClick": () => mediaPickAction("photo", addType)
-      }, [(0, import_vue.createVNode)("span", {
-        "class": bem("attachment-add-icon")
-      }, [(0, import_vue.createTextVNode)("+")])]);
-    };
     const genThumbnailMask = (media) => {
       const {
         status,
@@ -980,36 +942,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         default: () => [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), deleteIcon]
       });
     });
-    const renderAttachmentDelete = (media, index) => {
-      if (!media.deletable || media.status === "uploading") {
-        return;
-      }
-      return (0, import_vue.createVNode)("button", {
-        "type": "button",
-        "class": bem("attachment-delete"),
-        "onClick": (event) => {
-          event.stopPropagation();
-          onDelete(media, index);
-        }
-      }, [(0, import_vue.createTextVNode)("\xD7")]);
-    };
-    const renderAttachmentMedia = (media) => {
-      const index = props.mediaList.indexOf(media);
-      return (0, import_vue.createVNode)("div", {
-        "key": media.uniqueCode,
-        "class": bem("attachment-item"),
-        "onClick": () => previewMedia(index)
-      }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media), renderAttachmentDelete(media, index)]);
-    };
-    const renderAttachmentPlaceholder = (media) => (0, import_vue.createVNode)("div", {
-      "key": media.uniqueCode || media.fileName,
-      "class": bem("attachment-item")
-    }, [renderMediaThumbnail(media), renderMediaLabel(media), genThumbnailMask(media)]);
-    const renderAttachment = () => (0, import_vue.createVNode)("div", {
-      "class": bem("attachment")
-    }, [(0, import_vue.createVNode)("div", {
-      "class": bem("attachment-track")
-    }, [attachmentMediaList.value.map(renderAttachmentMedia), attachmentMediaListPlaceholder.value.map(renderAttachmentPlaceholder), renderAttachmentAdd()])]);
     const selectAction = (action) => {
       actionVisible.value = false;
       photoOptionsVisible.value = false;
@@ -1017,8 +949,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       audioOptionsVisible.value = false;
       action.func && action.func();
     };
-    (0, import_vue2.watch)(() => [props.sortable, props.mediaList.length, props.variant], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
-      if (isAttachmentVariant.value || !sortable || !mediaCount) {
+    (0, import_vue2.watch)(() => [props.sortable, props.mediaList.length], (_0) => __async(this, [_0], function* ([sortable, mediaCount]) {
+      if (!sortable || !mediaCount) {
         destroySortable();
         return;
       }
@@ -1042,9 +974,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, [props.title]);
       const showButtons = props.allowTakePhoto || props.allowPickPhoto || props.allowTakeVideo || props.allowPickVideo || props.allowTakeAudio || props.allowPickAudio || props.allowPickFile;
       return (0, import_vue.createVNode)("div", {
-        "class": bem({
-          attachment: isAttachmentVariant.value
-        })
+        "class": bem()
       }, [title, hiddenInput(), (0, import_vue.createVNode)(import_media_player.default, (0, import_vue.mergeProps)({
         "show": mediaPlayerVisible.value,
         "onUpdate:show": ($event) => mediaPlayerVisible.value = $event,
@@ -1060,7 +990,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "teleport": "body",
         "close-on-click-action": true,
         "onSelect": selectAction
-      }, null), isAttachmentVariant.value ? renderAttachment() : (0, import_vue.createVNode)(import_vue.Fragment, null, [(0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+      }, null), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
         "class": bem("line")
       }, [renderButtons(), slots["extend"] ? slots.extend() : ""]), [[import_vue.vShow, showButtons]]), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_grid.default, {
         "ref": gridRef,
@@ -1080,7 +1010,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": bem("grid")
       }, {
         default: () => [renderMediaListPlaceholder()]
-      }), [[import_vue.vShow, mediaListPlaceholder.value.length]])])]);
+      }), [[import_vue.vShow, mediaListPlaceholder.value.length]])]);
     };
   }
 });

package/lib/media-picker/index.css

@@ -1 +1 @@
-:root{--zt-media-picker-image-color: var(--zt-text-color);--zt-media-picker-button-background: linear-gradient(135deg, #e6ebf0 0%, #fff 100%, #fff 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 var(--zt-white), 4px 4px 8px 0 var(--zt-gray-a1);--zt-media-picker-button-border: 0;--zt-media-picker-button-active-border: 1px solid rgba(255, 255, 255, .75);--zt-media-picker-button-active-box-shadow: inset 4px 4px 8px 0 var(--zt-gray-a2);--zt-media-picker-line-height: 46px;--zt-media-picker-box-size: 48px;--zt-media-picker-icon-size: 32px;--zt-media-picker-title-height: 44px;--zt-media-picker-thumbnail-label-background: rgba(var(--zt-gray-rgb), .5);--zt-media-picker-thumbnail-label-color: var(--zt-white);--zt-media-picker-attachment-padding: 12px;--zt-media-picker-attachment-gap: 16px;--zt-media-picker-attachment-item-size: 140px;--zt-media-picker-attachment-radius: 10px;--zt-media-picker-attachment-add-border: 1px dashed #d7deee;--zt-media-picker-attachment-add-color: #9aa8c0;--zt-media-picker-attachment-add-background: #f8f9fc;--zt-media-picker-attachment-delete-background: var(--zt-primary-color);--zt-media-picker-attachment-delete-color: var(--zt-white)}:root[zt-theme-size=large]{--zt-media-picker-line-height: 52px;--zt-media-picker-box-size: 54px;--zt-media-picker-icon-size: 38px;--zt-media-picker-title-height: 56px}.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:var(--zt-media-picker-title-height);line-height:var(--zt-media-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-media-picker__title:before{position:absolute;width:4px;height:16px;background:var(--zt-primary-color);left:0;top:14px;content:" "}.zt-media-picker__title:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:calc(var(--zt-media-picker-line-height) * 2);display:flex;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line:after{content:" ";min-width:16px;height:10px}.zt-media-picker__box{width:var(--zt-media-picker-box-size);display:flex;flex-direction:column;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{display:flex;align-items:center;justify-content:center;width:var(--zt-media-picker-box-size);height:var(--zt-media-picker-box-size);background:var(--zt-media-picker-button-background);box-shadow:var(--zt-media-picker-button-box-shadow);border:var(--zt-media-picker-button-border);border-radius:8px;box-sizing:border-box}.zt-media-picker__button:active{background:var(--zt-gray-a04);border:var(--zt-media-picker-button-active-border);box-shadow:var(--zt-media-picker-button-active-box-shadow)}.zt-media-picker__icon{width:var(--zt-media-picker-icon-size);height:var(--zt-media-picker-icon-size);color:var(--zt-media-picker-image-color)}.zt-media-picker__label{margin-top:8px;font-size:var(--zt-font-size-sm);color:var(--zt-gray-a8);letter-spacing:0;text-align:center;line-height:var(--zt-line-height-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-media-picker__grid{padding:0 16px 8px!important}.zt-media-picker--attachment{width:100%;height:100%}.zt-media-picker__attachment{box-sizing:border-box;width:100%;height:100%;padding:var(--zt-media-picker-attachment-padding);overflow:hidden}.zt-media-picker__attachment-track{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--zt-media-picker-attachment-gap);width:100%;height:100%;overflow-x:auto;overflow-y:hidden}.zt-media-picker__attachment-track::-webkit-scrollbar{width:0;height:0}.zt-media-picker__attachment-item,.zt-media-picker__attachment-add{position:relative;flex:0 0 var(--zt-media-picker-attachment-item-size);width:var(--zt-media-picker-attachment-item-size);height:var(--zt-media-picker-attachment-item-size);border-radius:var(--zt-media-picker-attachment-radius);box-sizing:border-box;overflow:hidden}.zt-media-picker__attachment-add{display:flex;align-items:center;justify-content:center;padding:0;color:var(--zt-media-picker-attachment-add-color);background:var(--zt-media-picker-attachment-add-background);border:var(--zt-media-picker-attachment-add-border)}.zt-media-picker__attachment-add:disabled{opacity:var(--zt-disabled-opacity)}.zt-media-picker__attachment-add-icon{font-size:48px;line-height:1;font-weight:300}.zt-media-picker__attachment-delete{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:calc(var(--zt-media-picker-attachment-item-size) * .2);height:calc(var(--zt-media-picker-attachment-item-size) * .2);padding:0;color:var(--zt-media-picker-attachment-delete-color);font-size:calc(var(--zt-media-picker-attachment-item-size) * .15);line-height:1;background:var(--zt-media-picker-attachment-delete-background);border:0;border-radius:50%}.zt-media-picker__delete{box-sizing:content-box;width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__thumbnail-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-media-picker-thumbnail-label-color);background-color:var(--zt-media-picker-thumbnail-label-background)}.zt-media-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-media-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-media-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-media-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}.zt-theme-dark{--zt-media-picker-button-background: linear-gradient(135deg, #111c29 0%, #1d2c3e 100%, #1c2a3c 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .08), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-media-picker-button-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-box-shadow: inset 6px 6px 6px 0 #000d1b}
+:root{--zt-media-picker-image-color: var(--zt-text-color);--zt-media-picker-button-background: linear-gradient(135deg, #e6ebf0 0%, #fff 100%, #fff 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 var(--zt-white), 4px 4px 8px 0 var(--zt-gray-a1);--zt-media-picker-button-border: 0;--zt-media-picker-button-active-border: 1px solid rgba(255, 255, 255, .75);--zt-media-picker-button-active-box-shadow: inset 4px 4px 8px 0 var(--zt-gray-a2);--zt-media-picker-line-height: 46px;--zt-media-picker-box-size: 48px;--zt-media-picker-icon-size: 32px;--zt-media-picker-title-height: 44px;--zt-media-picker-thumbnail-label-background: rgba(var(--zt-gray-rgb), .5);--zt-media-picker-thumbnail-label-color: var(--zt-white)}:root[zt-theme-size=large]{--zt-media-picker-line-height: 52px;--zt-media-picker-box-size: 54px;--zt-media-picker-icon-size: 38px;--zt-media-picker-title-height: 56px}.zt-media-picker__hidden{display:none}.zt-media-picker__title{position:relative;height:var(--zt-media-picker-title-height);line-height:var(--zt-media-picker-title-height);font-weight:700;font-size:var(--zt-font-size-lg);color:var(--zt-text-color);padding:0 16px}.zt-media-picker__title:before{position:absolute;width:4px;height:16px;background:var(--zt-primary-color);left:0;top:14px;content:" "}.zt-media-picker__title:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:0;bottom:0;left:0;border-bottom:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-media-picker__line{width:100%;height:calc(var(--zt-media-picker-line-height) * 2);display:flex;align-items:center;overflow-x:auto}.zt-media-picker__line::-webkit-scrollbar{width:0;height:0}.zt-media-picker__line:after{content:" ";min-width:16px;height:10px}.zt-media-picker__box{width:var(--zt-media-picker-box-size);display:flex;flex-direction:column;align-items:center}.zt-media-picker__box:first-child{margin-left:16px}.zt-media-picker__box:not(:last-child){margin-right:24px}.zt-media-picker__button{display:flex;align-items:center;justify-content:center;width:var(--zt-media-picker-box-size);height:var(--zt-media-picker-box-size);background:var(--zt-media-picker-button-background);box-shadow:var(--zt-media-picker-button-box-shadow);border:var(--zt-media-picker-button-border);border-radius:8px;box-sizing:border-box}.zt-media-picker__button:active{background:var(--zt-gray-a04);border:var(--zt-media-picker-button-active-border);box-shadow:var(--zt-media-picker-button-active-box-shadow)}.zt-media-picker__icon{width:var(--zt-media-picker-icon-size);height:var(--zt-media-picker-icon-size);color:var(--zt-media-picker-image-color)}.zt-media-picker__label{margin-top:8px;font-size:var(--zt-font-size-sm);color:var(--zt-gray-a8);letter-spacing:0;text-align:center;line-height:var(--zt-line-height-sm);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-media-picker__grid{padding:0 16px 8px!important}.zt-media-picker__delete{box-sizing:content-box;width:20px;height:20px;position:absolute;padding:4px;top:0;right:0}.zt-media-picker .zt-image{width:100%;height:100%}.zt-media-picker .zt-grid-item__content{padding:0}.zt-media-picker__thumbnail{width:100%;height:100%}.zt-media-picker__thumbnail-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-media-picker-thumbnail-label-color);background-color:var(--zt-media-picker-thumbnail-label-background)}.zt-media-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-media-picker__mask-icon{font-size:var(--zt-font-size-xxxl)}.zt-media-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-media-picker__loading{width:var(--zt-uploader-loading-icon-size);height:var(--zt-uploader-loading-icon-size);color:var(--zt-uploader-icon-color)}.zt-theme-dark{--zt-media-picker-button-background: linear-gradient(135deg, #111c29 0%, #1d2c3e 100%, #1c2a3c 100%);--zt-media-picker-button-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .08), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-media-picker-button-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-border: 1px solid var(--zt-gray-a1);--zt-media-picker-button-active-box-shadow: inset 6px 6px 6px 0 #000d1b}

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

@@ -1,8 +1,4 @@
 export declare const MediaPicker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    variant: {
-        type: import("vue").PropType<import("./type").MediaPickerVariant>;
-        default: import("./type").MediaPickerVariant;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -81,10 +77,6 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     };
     mediaPlayerProps: import("vue").PropType<Partial<import("..").MediaPlayerProps>>;
 }>, () => 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<{
-    variant: {
-        type: import("vue").PropType<import("./type").MediaPickerVariant>;
-        default: import("./type").MediaPickerVariant;
-    };
     sortable: {
         type: BooleanConstructor;
         default: boolean;
@@ -171,7 +163,6 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     disabled: boolean;
     showTitle: boolean;
     showDownload: boolean;
-    variant: import("./type").MediaPickerVariant;
     sortable: boolean;
     useFileNameAsLabel: boolean;
     mediaList: import("./type").Media[];
@@ -196,7 +187,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 export default MediaPicker;
 export type { MediaPickerProps, MediaPickerInstance } from './MediaPicker';
-export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaPickerVariant, MediaSizeType, } from './type';
+export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaSizeType, } from './type';
 export { defaultMedia } from './type';
 declare module 'vue' {
     interface GlobalComponents {

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

@@ -3,7 +3,6 @@ export type MediaAddType = 'take' | 'pick' | 'take_and_pick';
 export type MediaUploadStatus = 'processing' | 'uploading' | 'done' | 'failed';
 export type WxMediaType = 'camera' | 'album';
 export type MediaSizeType = 'original' | 'compressed';
-export type MediaPickerVariant = 'default' | 'attachment';
 export type Media = {
     file?: File;
     url?: string;
@@ -49,13 +48,4 @@ export type MediaPickerThemeVars = {
     mediaPickerBoxSize?: string;
     mediaPickerIconSize?: string;
     mediaPickerTitleHeight?: string;
-    mediaPickerAttachmentPadding?: string;
-    mediaPickerAttachmentGap?: string;
-    mediaPickerAttachmentItemSize?: string;
-    mediaPickerAttachmentRadius?: string;
-    mediaPickerAttachmentAddBorder?: string;
-    mediaPickerAttachmentAddColor?: string;
-    mediaPickerAttachmentAddBackground?: string;
-    mediaPickerAttachmentDeleteBackground?: string;
-    mediaPickerAttachmentDeleteColor?: string;
 };

package/lib/pagination/Pagination.js

@@ -132,7 +132,9 @@ var stdin_default = (0, import_vue.defineComponent)({
         "class": bem("popup-pages")
       }, [pages.value.map((page) => (0, import_vue.createVNode)("button", {
         "type": "button",
-        "class": bem("popup-page"),
+        "class": bem("popup-page", {
+          active: page === currentPage.value
+        }),
         "onClick": () => onSelect(page)
       }, [page]))]), (0, import_vue.createVNode)("div", {
         "class": bem("popup-footer")

package/lib/pagination/index.css

@@ -1 +1 @@
-:root{--zt-pagination-bottom: 29px;--zt-pagination-item-size: 44px;--zt-pagination-gap: 16px;--zt-pagination-background: #2d4b7380;--zt-pagination-backdrop-filter: blur(5.44px);--zt-pagination-box-shadow: 0 4px 8px 0 #2d4b7333;--zt-pagination-text-color: #fff;--zt-pagination-disabled-icon-color: rgba(255, 255, 255, .45);--zt-pagination-font-size: 14px;--zt-pagination-text-line-height: 17px;--zt-pagination-z-index: 100}.zt-pagination{position:fixed;left:0;right:0;bottom:var(--zt-pagination-bottom);z-index:var(--zt-pagination-z-index);display:flex;align-items:center;justify-content:center;pointer-events:none}.zt-pagination__button,.zt-pagination__page{height:var(--zt-pagination-item-size);background:var(--zt-pagination-background);-webkit-backdrop-filter:var(--zt-pagination-backdrop-filter);backdrop-filter:var(--zt-pagination-backdrop-filter);box-shadow:var(--zt-pagination-box-shadow)}.zt-pagination__button{width:var(--zt-pagination-item-size);padding:0;border:0;border-radius:50%;color:var(--zt-pagination-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:opacity var(--zt-duration-fast),transform var(--zt-duration-fast)}.zt-pagination__button:not(.zt-pagination__button--disabled):hover{opacity:.88;transform:scale(1.04)}.zt-pagination__button:not(.zt-pagination__button--disabled):active{opacity:.75;transform:scale(.96)}.zt-pagination__button--disabled{color:var(--zt-pagination-disabled-icon-color);cursor:default}.zt-pagination__page{margin:0 var(--zt-pagination-gap);padding:0 27px;border:0;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--zt-pagination-text-color);cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}.zt-pagination__text{height:var(--zt-pagination-text-line-height);color:var(--zt-pagination-text-color);font-size:var(--zt-pagination-font-size);line-height:var(--zt-pagination-text-line-height)}.zt-pagination__next-icon{transform:rotate(180deg)}.zt-pagination__popup{height:100%;display:flex;flex-direction:column;background:#fff}.zt-pagination__popup-title{padding-top:var(--zt-popup-close-icon-margin);color:#2d4b73;font-size:18px;font-weight:600;text-align:center}.zt-pagination__popup-pages{flex:1;display:grid;grid-template-columns:repeat(5,40px);grid-auto-rows:40px;justify-content:space-around;row-gap:24px;padding:24px 0;overflow-y:auto}.zt-pagination__popup-page{width:40px;height:40px;padding:0;border:0;border-radius:50%;color:#235;background:#F1F6FA;font-size:16px;line-height:24px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background-color var(--zt-duration-fast),transform var(--zt-duration-fast),opacity var(--zt-duration-fast)}.zt-pagination__popup-page:hover{background:rgba(45,75,115,.1);transform:scale(1.04)}.zt-pagination__popup-page:active{opacity:.75;transform:scale(.96)}.zt-pagination__popup-footer{padding:8px 16px;border-top:1px solid var(--zt-border-color)}
+:root{--zt-pagination-bottom: 29px;--zt-pagination-item-size: 44px;--zt-pagination-gap: 16px;--zt-pagination-background: #2d4b7380;--zt-pagination-backdrop-filter: blur(5.44px);--zt-pagination-box-shadow: 0 4px 8px 0 #2d4b7333;--zt-pagination-text-color: #fff;--zt-pagination-disabled-icon-color: rgba(255, 255, 255, .45);--zt-pagination-font-size: 14px;--zt-pagination-text-line-height: 17px;--zt-pagination-z-index: 100}.zt-pagination{position:fixed;left:0;right:0;bottom:var(--zt-pagination-bottom);z-index:var(--zt-pagination-z-index);display:flex;align-items:center;justify-content:center;pointer-events:none}.zt-pagination__button,.zt-pagination__page{height:var(--zt-pagination-item-size);background:var(--zt-pagination-background);-webkit-backdrop-filter:var(--zt-pagination-backdrop-filter);backdrop-filter:var(--zt-pagination-backdrop-filter);box-shadow:var(--zt-pagination-box-shadow)}.zt-pagination__button{width:var(--zt-pagination-item-size);padding:0;border:0;border-radius:50%;color:var(--zt-pagination-text-color);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:opacity var(--zt-duration-fast),transform var(--zt-duration-fast)}.zt-pagination__button:not(.zt-pagination__button--disabled):hover{opacity:.88;transform:scale(1.04)}.zt-pagination__button:not(.zt-pagination__button--disabled):active{opacity:.75;transform:scale(.96)}.zt-pagination__button--disabled{color:var(--zt-pagination-disabled-icon-color);cursor:default}.zt-pagination__page{margin:0 var(--zt-pagination-gap);padding:0 27px;border:0;border-radius:22px;display:flex;align-items:center;justify-content:center;color:var(--zt-pagination-text-color);cursor:pointer;pointer-events:auto;-webkit-appearance:none;-moz-appearance:none;appearance:none}.zt-pagination__text{height:var(--zt-pagination-text-line-height);color:var(--zt-pagination-text-color);font-size:var(--zt-pagination-font-size);line-height:var(--zt-pagination-text-line-height)}.zt-pagination__next-icon{transform:rotate(180deg)}.zt-pagination__popup{height:100%;display:flex;flex-direction:column;background:#fff}.zt-pagination__popup-title{padding-top:var(--zt-popup-close-icon-margin);color:#2d4b73;font-size:18px;font-weight:600;text-align:center}.zt-pagination__popup-pages{flex:1;display:grid;grid-template-columns:repeat(5,40px);grid-auto-rows:40px;justify-content:space-around;row-gap:24px;padding:24px 0;overflow-y:auto}.zt-pagination__popup-page{width:40px;height:40px;padding:0;border:0;border-radius:50%;color:#235;background:#F1F6FA;font-size:16px;line-height:24px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background-color var(--zt-duration-fast),color var(--zt-duration-fast),transform var(--zt-duration-fast),opacity var(--zt-duration-fast)}.zt-pagination__popup-page:not(.zt-pagination__popup-page--active):hover{background:rgba(45,75,115,.1);transform:scale(1.04)}.zt-pagination__popup-page:active{opacity:.75;transform:scale(.96)}.zt-pagination__popup-page--active{color:#fff;background:#3388FF}.zt-pagination__popup-page--active:hover{color:#fff;background:#3388FF;transform:scale(1.04)}.zt-pagination__popup-footer{padding:8px 16px;border-top:1px solid var(--zt-border-color)}

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

@@ -0,0 +1,202 @@
+import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
+import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from '../media-picker/type';
+import { DownloadActionParams } from '../image-preview/ImagePreview';
+declare const photoPickerProps: {
+    disabled: BooleanConstructor;
+    showTitle: BooleanConstructor;
+    showDownload: BooleanConstructor;
+    downloadAction: PropType<(params: DownloadActionParams) => boolean>;
+    useFileNameAsLabel: BooleanConstructor;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    mediaList: {
+        type: PropType<Media[]>;
+        default: () => Media[];
+    };
+    attachmentHeight: 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: PropType<MediaPreview>;
+    mediaPick: PropType<MediaPick>;
+    beforeRead: PropType<MediaBeforeRead>;
+    afterRead: PropType<MediaAfterRead>;
+    beforeDelete: PropType<MediaBeforeDelete>;
+    useWx: BooleanConstructor;
+    imageSizeType: {
+        type: PropType<MediaSizeType>;
+        default: MediaSizeType;
+    };
+};
+export type PhotoPickerProps = ExtractPropTypes<typeof photoPickerProps>;
+export type PhotoPickerInstance = ComponentPublicInstance<{
+    mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
+}>;
+declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    showTitle: BooleanConstructor;
+    showDownload: BooleanConstructor;
+    downloadAction: PropType<(params: DownloadActionParams) => boolean>;
+    useFileNameAsLabel: BooleanConstructor;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    mediaList: {
+        type: PropType<Media[]>;
+        default: () => Media[];
+    };
+    attachmentHeight: 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: PropType<MediaPreview>;
+    mediaPick: PropType<MediaPick>;
+    beforeRead: PropType<MediaBeforeRead>;
+    afterRead: PropType<MediaAfterRead>;
+    beforeDelete: PropType<MediaBeforeDelete>;
+    useWx: BooleanConstructor;
+    imageSizeType: {
+        type: PropType<MediaSizeType>;
+        default: 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<ExtractPropTypes<{
+    disabled: BooleanConstructor;
+    showTitle: BooleanConstructor;
+    showDownload: BooleanConstructor;
+    downloadAction: PropType<(params: DownloadActionParams) => boolean>;
+    useFileNameAsLabel: BooleanConstructor;
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
+    mediaList: {
+        type: PropType<Media[]>;
+        default: () => Media[];
+    };
+    attachmentHeight: 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: PropType<MediaPreview>;
+    mediaPick: PropType<MediaPick>;
+    beforeRead: PropType<MediaBeforeRead>;
+    afterRead: PropType<MediaAfterRead>;
+    beforeDelete: PropType<MediaBeforeDelete>;
+    useWx: BooleanConstructor;
+    imageSizeType: {
+        type: PropType<MediaSizeType>;
+        default: 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: Media[];
+    maxImageSideLength: number;
+    maxImageFileSize: number;
+    maxFileSize: number;
+    keepFileType: boolean;
+    watermarkOptions: Record<string, any>;
+    allowTakePhoto: boolean;
+    allowPickPhoto: boolean;
+    useWx: boolean;
+    imageSizeType: MediaSizeType;
+    maxAttachmentCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;