zartui 3.2.1 → 3.2.3

package/es/lazyload/vue-lazyload/index.d.ts

@@ -1,55 +1,55 @@
-import type { App } from 'vue';
-
-declare type ListenEvent =
-  | 'scroll'
-  | 'wheel'
-  | 'mousewheel'
-  | 'resize'
-  | 'animationend'
-  | 'transitionend'
-  | 'touchmove';
-
-// eslint-disable-next-line
-declare type Callback = (listener: any, options: LazyloadOptions) => void;
-
-declare type Filter = {
-  webp?: Callback;
-  progressive?: Callback;
-};
-
-declare type Adapter = {
-  error?: Callback;
-  loaded?: Callback;
-  loading?: Callback;
-};
-
-export declare type LazyloadOptions = {
-  error?: string;
-  filter?: Filter;
-  silent?: boolean;
-  adapter?: Adapter;
-  loading?: string;
-  attempt?: number;
-  preLoad?: number;
-  observer?: boolean;
-  lazyImage?: boolean;
-  throttleWait?: number;
-  listenEvents?: ListenEvent[];
-  dispatchEvent?: boolean;
-  lazyComponent?: boolean;
-  observerOptions?: IntersectionObserverInit;
-};
-
-export declare const Lazyload: {
-  install(app: App, options?: LazyloadOptions): void;
-};
-
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    $Lazyload: {
-      $on: (event: string, handler: Callback) => void;
-      $off: (event: string, handler?: Callback) => void;
-      $once: (event: string, handler: Callback) => void;
-    };
-  }
-}
+import type { App } from 'vue';
+
+declare type ListenEvent =
+  | 'scroll'
+  | 'wheel'
+  | 'mousewheel'
+  | 'resize'
+  | 'animationend'
+  | 'transitionend'
+  | 'touchmove';
+
+// eslint-disable-next-line
+declare type Callback = (listener: any, options: LazyloadOptions) => void;
+
+declare type Filter = {
+  webp?: Callback;
+  progressive?: Callback;
+};
+
+declare type Adapter = {
+  error?: Callback;
+  loaded?: Callback;
+  loading?: Callback;
+};
+
+export declare type LazyloadOptions = {
+  error?: string;
+  filter?: Filter;
+  silent?: boolean;
+  adapter?: Adapter;
+  loading?: string;
+  attempt?: number;
+  preLoad?: number;
+  observer?: boolean;
+  lazyImage?: boolean;
+  throttleWait?: number;
+  listenEvents?: ListenEvent[];
+  dispatchEvent?: boolean;
+  lazyComponent?: boolean;
+  observerOptions?: IntersectionObserverInit;
+};
+
+export declare const Lazyload: {
+  install(app: App, options?: LazyloadOptions): void;
+};
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $Lazyload: {
+      $on: (event: string, handler: Callback) => void;
+      $off: (event: string, handler?: Callback) => void;
+      $once: (event: string, handler: Callback) => void;
+    };
+  }
+}

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

@@ -1,5 +1,5 @@
-import { ExtractPropTypes, PropType } from 'vue';
-import type { Media, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType } from './type';
+import { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue';
+import type { Media, MediaAddType, MediaAfterRead, MediaBeforeDelete, MediaBeforeRead, MediaPick, MediaPreview, MediaSizeType, MediaType } from './type';
 import { MediaPlayerProps } from '../media-player';
 declare const mediaPickerProps: {
     disabled: BooleanConstructor;
@@ -81,6 +81,9 @@ declare const mediaPickerProps: {
     mediaPlayerProps: PropType<Partial<MediaPlayerProps>>;
 };
 export type MediaPickerProps = ExtractPropTypes<typeof mediaPickerProps>;
+export type MediaPickerInstance = ComponentPublicInstance<{
+    mediaPickAction: (mediaType: MediaType, mediaAddType: MediaAddType) => void;
+}>;
 declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     disabled: BooleanConstructor;
     showTitle: BooleanConstructor;
@@ -159,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;
@@ -239,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

@@ -18,7 +18,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { createVNode as _createVNode, createTextVNode as _createTextVNode, mergeProps as _mergeProps, vShow as _vShow, withDirectives as _withDirectives } from "vue";
+import { createVNode as _createVNode, mergeProps as _mergeProps, vShow as _vShow, withDirectives as _withDirectives } from "vue";
 import { createNamespace, isDef, isPromise, isWeixin, makeArrayProp, makeNumberProp, makeStringProp, truthProp } from "../utils/index.mjs";
 import { computed, defineComponent, ref } from "vue";
 import { showFailToast, showLoadingToast, closeToast } from "../toast/index.mjs";
@@ -101,7 +101,7 @@ const mediaPickerProps = {
 var stdin_default = defineComponent({
   name,
   props: mediaPickerProps,
-  emits: ["update:mediaList", "delete"],
+  emits: ["update:mediaList", "delete", "processing"],
   setup(props, {
     emit,
     slots
@@ -119,6 +119,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");
@@ -141,7 +142,7 @@ var stdin_default = defineComponent({
     const triggerHiddenInput = (ref2) => {
       ref2 && ref2.click();
     };
-    const mediaPick = (mediaType, mediaAddType) => {
+    const mediaPickAction = (mediaType, mediaAddType) => {
       if (props.disabled) {
         return;
       }
@@ -217,24 +218,24 @@ var stdin_default = defineComponent({
         return [{
           name: "\u62CD\u6444",
           callback: () => {
-            mediaPick("video", "take");
+            mediaPickAction("video", "take");
           }
         }, {
           name: "\u89C6\u9891\u6587\u4EF6",
           callback: () => {
-            mediaPick("video", "pick");
+            mediaPickAction("video", "pick");
           }
         }];
       } else if (audioOptionsVisible.value) {
         return [{
           name: "\u5F55\u97F3",
           callback: () => {
-            mediaPick("audio", "take");
+            mediaPickAction("audio", "take");
           }
         }, {
           name: "\u97F3\u9891\u6587\u4EF6",
           callback: () => {
-            mediaPick("audio", "pick");
+            mediaPickAction("audio", "pick");
           }
         }];
       }
@@ -300,6 +301,7 @@ var stdin_default = defineComponent({
         fileName: f.name,
         originalName: f.name,
         originalSize: f.size,
+        originalFile: f,
         deletable: true,
         message: ""
       };
@@ -322,17 +324,13 @@ var stdin_default = defineComponent({
             message: "",
             originalName: file.name,
             // 原始名称
-            originalSize: file.size
+            originalSize: file.size,
             // 原始大小
+            originalFile: file
           };
           return media;
         });
       });
-      showLoadingToast({
-        message: "\u5904\u7406\u4E2D...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(mediaList).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -342,7 +340,6 @@ var stdin_default = defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     const transformImageFiles = (files) => {
@@ -401,11 +398,6 @@ var stdin_default = defineComponent({
         });
         promisesTodo.push(promise);
       }
-      showLoadingToast({
-        message: "\u5904\u7406\u4E2D...",
-        forbidClick: true,
-        duration: 0
-      });
       return Promise.all(promisesTodo).then((medias) => {
         const _medias = [];
         medias.forEach((media) => {
@@ -415,10 +407,47 @@ var stdin_default = defineComponent({
         });
         return _medias;
       }).finally(() => {
-        closeToast();
       });
     };
     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
+        };
+      });
+      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) {
@@ -441,6 +470,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);
@@ -576,7 +607,7 @@ var stdin_default = defineComponent({
         "class": bem("box")
       }, [_createVNode("div", {
         "class": bem("button"),
-        "onClick": () => mediaPick(mediaType, mediaAddType)
+        "onClick": () => mediaPickAction(mediaType, mediaAddType)
       }, [renderIcon(mediaType, mediaAddType)]), _createVNode("div", {
         "class": bem("label")
       }, [label])]);
@@ -617,7 +648,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")
@@ -672,7 +703,7 @@ var stdin_default = defineComponent({
       }
       return _createVNode("div", {
         "class": bem("thumbnail-label")
-      }, [media.label, _createTextVNode("12312")]);
+      }, [media.label]);
     };
     const onDelete = (media, index) => {
       if (props.beforeDelete) {
@@ -750,6 +781,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, {
@@ -771,7 +811,7 @@ var stdin_default = defineComponent({
       action.func && action.func();
     };
     useExpose({
-      mediaPick
+      mediaPickAction
     });
     return () => {
       const title = props.showTitle && _createVNode("div", {
@@ -803,7 +843,15 @@ var stdin_default = defineComponent({
         "class": bem("grid")
       }, {
         default: () => [renderMediaList()]
-      }), [[_vShow, props.mediaList.length]])]);
+      }), [[_vShow, props.mediaList.length]]), _withDirectives(_createVNode(ZtGrid, {
+        "column-num": "3",
+        "border": false,
+        "square": true,
+        "gutter": "4",
+        "class": bem("grid")
+      }, {
+        default: () => [renderMediaListPlaceholder()]
+      }), [[_vShow, mediaListPlaceholder.value.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;
@@ -162,7 +163,7 @@ export declare const MediaPicker: import("../utils").WithInstall<import("vue").D
     imageSizeType: import("./type").MediaSizeType;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 export default MediaPicker;
-export type { MediaPickerProps } from './MediaPicker';
+export type { MediaPickerProps, MediaPickerInstance } from './MediaPicker';
 export type { Media, MediaType, MediaAddType, MediaUploadStatus, MediaPreview, MediaPick, MediaBeforeRead, MediaAfterRead, MediaBeforeDelete, MediaPickerThemeVars, MediaSizeType, } from './type';
 export { defaultMedia } from './type';
 declare module 'vue' {

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 = {
@@ -13,6 +13,7 @@ export type Media = {
     fileName: string;
     originalName: string;
     originalSize: number;
+    originalFile?: File;
     lastModified: number;
     deletable: boolean;
     status?: MediaUploadStatus;

package/es/picker/Picker.d.ts

@@ -30,6 +30,10 @@ export declare const pickerSharedProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 };
@@ -62,6 +66,10 @@ export declare const pickerProps: {
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -126,6 +134,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -188,6 +200,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         default: string;
     };
 } & {
+    title: {
+        type: PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {

package/es/picker/Picker.mjs

@@ -1,5 +1,5 @@
 import { ref, watch, computed, defineComponent, nextTick, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
-import { pick, extend, unitToPx, truthProp, HAPTICS_FEEDBACK, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, makeNumberProp } from "../utils/index.mjs";
+import { pick, extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, makeNumberProp } from "../utils/index.mjs";
 import { bem, name, isOptionExist, getColumnsType, findOptionByValue, assignDefaultFields, formatCascadeColumns, getFirstEnabledOption } from "./utils.mjs";
 import { useChildren, useEventListener } from "@zartui/use";
 import { useExpose } from "../composables/use-expose.mjs";
@@ -175,16 +175,6 @@ var stdin_default = defineComponent({
         }), pick(slots, pickerToolbarSlots));
       }
     };
-    const renderTitleBar = () => {
-      if (props.showTitle) {
-        if (slots["title-bar"]) {
-          return slots["title-bar"]();
-        }
-        return _createVNode("div", {
-          "class": [bem("title"), HAPTICS_FEEDBACK]
-        }, [props.title]);
-      }
-    };
     const buttomDivider = () => props.showToolbar ? _createVNode(Divider, {
       "style": "margin: 0"
     }, null) : null;
@@ -227,9 +217,9 @@ var stdin_default = defineComponent({
       var _a, _b;
       return _createVNode("div", {
         "class": bem()
-      }, [renderTitleBar(), props.loading ? _createVNode(Loading, {
+      }, [renderToolbar(), props.loading ? _createVNode(Loading, {
         "class": bem("loading")
-      }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), buttomDivider(), renderToolbar()]);
+      }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots)]);
     };
     const renderOptionItems = () => {
       return currentColumns.value.map((options, columnIndex) => {
@@ -256,9 +246,9 @@ var stdin_default = defineComponent({
       var _a, _b;
       return _createVNode("div", {
         "class": bem()
-      }, [renderTitleBar(), props.loading ? _createVNode(Loading, {
+      }, [renderToolbar(), props.loading ? _createVNode(Loading, {
         "class": bem("loading")
-      }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderOptions(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), buttomDivider(), renderToolbar()]);
+      }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderOptions(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots)]);
     };
     return () => {
       if (isButtonPicker.value) {

package/es/picker/PickerToolbar.d.ts

@@ -1,4 +1,8 @@
 export declare const pickerToolbarProps: {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 };
@@ -6,13 +10,23 @@ export declare const pickerToolbarSlots: string[];
 export type PickerToolbarPropKeys = Array<keyof typeof pickerToolbarProps>;
 export declare const pickerToolbarPropKeys: PickerToolbarPropKeys;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 }>> & Readonly<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/picker/PickerToolbar.mjs

@@ -1,10 +1,9 @@
 import { defineComponent, createVNode as _createVNode } from "vue";
 import { bem, t } from "./utils.mjs";
-import { createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
-import { Button } from "../button/index.mjs";
+import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from "../utils/index.mjs";
 const [name] = createNamespace("picker-toolbar");
 const pickerToolbarProps = {
-  // title: String,
+  title: makeStringProp("\u8BF7\u9009\u62E9"),
   cancelButtonText: String,
   confirmButtonText: String
 };
@@ -18,32 +17,35 @@ var stdin_default = defineComponent({
     emit,
     slots
   }) {
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return _createVNode("div", {
+          "class": [bem("title"), "zt-ellipsis"]
+        }, [props.title]);
+      }
+    };
     const onCancel = () => emit("cancel");
     const onConfirm = () => emit("confirm");
     const renderCancel = () => {
       const text = props.cancelButtonText || t("cancel");
-      return _createVNode(Button, {
-        "type": "default",
-        "hairline": true,
+      return _createVNode("div", {
         "class": bem("cancel"),
         "onClick": onCancel
-      }, {
-        default: () => [slots.cancel ? slots.cancel() : text]
-      });
+      }, [slots.cancel ? slots.cancel() : text]);
     };
     const renderConfirm = () => {
       const text = props.confirmButtonText || t("confirm");
-      return _createVNode(Button, {
-        "type": "primary",
+      return _createVNode("div", {
         "class": [bem("confirm"), HAPTICS_FEEDBACK],
         "onClick": onConfirm
-      }, {
-        default: () => [slots.confirm ? slots.confirm() : text]
-      });
+      }, [slots.confirm ? slots.confirm() : text]);
     };
     return () => _createVNode("div", {
       "class": bem("toolbar")
-    }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderConfirm()]]);
+    }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
   }
 });
 export {

package/es/picker/index.css

@@ -1 +1 @@
-:root{--zt-picker-cancel-margin: 8px 4px 8px 16px;--zt-picker-confirm-margin: 8px 16px 8px 4px;--zt-picker-title-height: 56px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-title-text-color: var(--zt-gray-60);--zt-picker-background: var(--zt-background-popup);--zt-picker-toolbar-height: 60px;--zt-picker-title-background: var(--zt-background-popup);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-option-disabled-background: var(--zt-gray-10);--zt-picker-loading-icon-color: var(--zt-primary-color);--zt-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--zt-picker-warpper-padding: 12px 16px 4px 16px;--zt-picker-option-item-text-color: var(--zt-gray-40);--zt-picker-option-item-padding: 0 4px 8px 0;--zt-picker-options-ellipsis-height: 36px;--zt-picker-options-ellipsis-border: 1px solid var(--zt-gray-20);--zt-picker-option-item-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-frame-background-color: rgba(0, 0, 0, .02)}:root[zt-theme-size=large]{--zt-picker-options-ellipsis-height: 50px}.zt-theme-dark{--zt-picker-loading-mask-color: rgba(0, 0, 0, .6);--zt-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-picker{position:relative;background:var(--zt-picker-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-picker-toolbar-height)}.zt-picker__cancel,.zt-picker__confirm{width:50%}.zt-picker__cancel{background:var(--zt-button-default-background);margin:var(--zt-picker-cancel-margin)}.zt-picker__confirm{margin:var(--zt-picker-confirm-margin)}.zt-picker__title{display:flex;justify-content:center;align-items:center;width:100%;height:var(--zt-picker-title-height);border-radius:var(--zt-picker-title-border-radius);font-size:var(--zt-font-size-xl);background:var(--zt-picker-title-background);color:var(--zt-picker-title-text-color);font-weight:500}.zt-picker__columns{position:relative;display:flex;cursor:grab}.zt-picker__options{position:relative;display:flex;cursor:grab;overflow-y:scroll}.zt-picker__options: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-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-picker-loading-icon-color);background:var(--zt-picker-loading-mask-color)}.zt-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-picker-frame-background-color)}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{flex:1;overflow:hidden;font-size:var(--zt-font-size-lg)}.zt-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--zt-picker-option-padding);color:var(--zt-picker-option-text-color)}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:var(--zt-picker-option-disabled-opacity)}.zt-picker-column__item--selected{font-weight:700;font-size:var(--zt-font-size-xl)}.zt-picker-column__unit{background:var(--zt-picker-title-background);position:absolute;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--zt-picker-option-text-color);font-size:var(--zt-font-size-lg);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-font-size-md)}.zt-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-picker-background);padding:var(--zt-picker-warpper-padding)}.zt-picker-options__item{color:var(--zt-picker-option-item-text-color);padding:var(--zt-picker-option-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-picker-options__item .zt-ellipsis{height:var(--zt-picker-options-ellipsis-height);line-height:var(--zt-picker-options-ellipsis-height);border-radius:calc(var(--zt-picker-options-ellipsis-height) / 2);background:var(--zt-gray-10);padding:0 var(--zt-padding-md)}.zt-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-20)}.zt-picker-options__item--disabled .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}.zt-picker-options__item--last{padding-right:0}.zt-picker-options__item--selected{color:var(--zt-white)}.zt-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color)}.zt-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}
+:root{--zt-picker-cancel-padding: 15px 20px;--zt-picker-confirm-padding: 15px 20px;--zt-picker-title-margin: 0 20px;--zt-picker-title-height: 56px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-title-text-color: var(--zt-gray-60);--zt-picker-background: var(--zt-background-popup);--zt-picker-toolbar-height: 52px;--zt-picker-toolbar-background: var(--zt-background-popup);--zt-picker-title-background: var(--zt-background-popup);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-option-disabled-background: var(--zt-gray-10);--zt-picker-loading-icon-color: var(--zt-primary-color);--zt-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--zt-picker-warpper-padding: 12px 16px 4px 16px;--zt-picker-option-item-text-color: var(--zt-gray-40);--zt-picker-option-item-padding: 0 4px 8px 0;--zt-picker-options-ellipsis-height: 36px;--zt-picker-options-ellipsis-border: 1px solid var(--zt-gray-20);--zt-picker-option-item-disabled-opacity: var(--zt-disabled-opacity);--zt-picker-frame-background-color: rgba(0, 0, 0, .02)}:root[zt-theme-size=large]{--zt-picker-options-ellipsis-height: 50px}.zt-theme-dark{--zt-picker-loading-mask-color: rgba(0, 0, 0, .6);--zt-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.zt-picker{position:relative;background:var(--zt-picker-background);-webkit-user-select:none;-moz-user-select:none;user-select:none}.zt-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--zt-picker-toolbar-height);background:var(--zt-picker-toolbar-background)}.zt-picker__cancel,.zt-picker__confirm{flex:0 0 auto}.zt-picker__cancel{padding:var(--zt-picker-cancel-padding);font-size:var(--zt-font-size-md);color:var(--zt-primary-color)}.zt-picker__confirm{margin:var(--zt-picker-confirm-padding);font-size:var(--zt-font-size-md);color:var(--zt-primary-color)}.zt-picker__title{min-width:0;font-size:var(--zt-font-size-xl);color:var(--zt-picker-title-text-color);font-weight:700;margin:var(--zt-picker-title-margin)}.zt-picker__columns{position:relative;display:flex;cursor:grab}.zt-picker__options{position:relative;display:flex;cursor:grab;overflow-y:scroll}.zt-picker__options: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-picker__options:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-border-color);transform:scaleY(.5)}.zt-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--zt-picker-loading-icon-color);background:var(--zt-picker-loading-mask-color)}.zt-picker__frame{position:absolute;top:50%;z-index:2;transform:translateY(-50%);pointer-events:none;width:100%;background:var(--zt-picker-frame-background-color)}.zt-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{flex:1;overflow:hidden;font-size:var(--zt-font-size-lg)}.zt-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.zt-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--zt-picker-option-padding);color:var(--zt-picker-option-text-color)}.zt-picker-column__item--disabled{cursor:not-allowed;opacity:var(--zt-picker-option-disabled-opacity)}.zt-picker-column__item--selected{font-weight:700;font-size:var(--zt-font-size-xl)}.zt-picker-column__unit{background:var(--zt-picker-title-background);position:absolute;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--zt-picker-option-text-color);font-size:var(--zt-font-size-lg);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-font-size-md)}.zt-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-font-size-md);margin:0;outline:0 none;padding:0}.zt-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-picker-background);padding:var(--zt-picker-warpper-padding)}.zt-picker-options__item{color:var(--zt-picker-option-item-text-color);padding:var(--zt-picker-option-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-picker-options__item .zt-ellipsis{height:var(--zt-picker-options-ellipsis-height);line-height:var(--zt-picker-options-ellipsis-height);border-radius:calc(var(--zt-picker-options-ellipsis-height) / 2);background:var(--zt-gray-10);padding:0 var(--zt-padding-md)}.zt-picker-options__item:active{opacity:var(--zt-active-opacity)}.zt-picker-options__item--disabled{cursor:not-allowed;color:var(--zt-gray-20)}.zt-picker-options__item--disabled .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}.zt-picker-options__item--last{padding-right:0}.zt-picker-options__item--selected{color:var(--zt-white)}.zt-picker-options__item--selected .zt-ellipsis{background:var(--zt-primary-color)}.zt-picker-options__item--disabled-selected{cursor:not-allowed;color:var(--zt-gray)!important}.zt-picker-options__item--disabled-selected .zt-ellipsis{background:var(--zt-picker-option-disabled-background)!important}

package/es/picker/index.d.ts

@@ -28,6 +28,10 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -90,6 +94,10 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         default: string;
     };
 } & {
+    title: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {