zartui 3.0.3 → 3.0.4

package/lib/index.d.ts

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

package/lib/index.js

@@ -154,7 +154,7 @@ __reExport(stdin_exports, require("./tag"), module.exports);
 __reExport(stdin_exports, require("./time-picker"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
-const version = "3.0.3";
+const version = "3.0.4";
 function install(app) {
   const components = [
     import_action_sheet.ActionSheet,

package/lib/lazyload/vue-lazyload/lazy-image.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(stdin_exports);
 var import_use = require("@zartui/use");
 var import_util = require("./util");
 var import_utils = require("../../utils");
+var import_vue = require("vue");
 var stdin_default = (lazyManager) => ({
   props: {
     src: [String, Object],
@@ -31,15 +32,14 @@ var stdin_default = (lazyManager) => ({
       default: "img"
     }
   },
-  render(h) {
-    return h(
+  render() {
+    var _a, _b;
+    return (0, import_vue.h)(
       this.tag,
       {
-        attrs: {
-          src: this.renderSrc
-        }
+        src: this.renderSrc
       },
-      this.$slots.default
+      (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)
     );
   },
   data() {

package/lib/loading/Loading.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     vertical: BooleanConstructor;
     textSize: (NumberConstructor | StringConstructor)[];
     textColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     size: (NumberConstructor | StringConstructor)[];
     type: {
         type: import("vue").PropType<LoadingType>;

package/lib/loading/index.d.ts

@@ -8,7 +8,7 @@ export declare const Loading: import("../utils").WithInstall<import("vue").Defin
     vertical: BooleanConstructor;
     textSize: (NumberConstructor | StringConstructor)[];
     textColor: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: (NumberConstructor | StringConstructor)[];
     type: {
         type: import("vue").PropType<import("./Loading").LoadingType>;

package/lib/media-picker/MediaPicker.js

@@ -562,7 +562,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (media.showSrc) {
         return (0, import_vue.createVNode)(import_image.default, {
           "src": media.showSrc,
-          "fit": "fill",
+          "fit": "cover",
           "radius": "4"
         }, null);
       } else if (media.type === "video") {

package/lib/media-picker/image/DefaultAudioIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/DefaultFileIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/DefaultVideoIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/DeleteIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/PickFileIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/PickPhotoIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/TakeAudioIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/TakePhotoIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/media-picker/image/TakeVideoIcon.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

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

@@ -27,10 +27,12 @@ export declare function file2Image(file: File): Promise<HTMLImageElement>;
 /**
  * Draw image on canvas
  * @param img
+ * @param type
+ * @param orientation
  * @param width
  * @param height
  */
-export declare function image2Canvas(img: HTMLImageElement, width?: number, height?: number): Promise<HTMLCanvasElement>;
+export declare function image2Canvas(img: HTMLImageElement, type: string, orientation?: number, width?: number, height?: number): Promise<HTMLCanvasElement>;
 /**
  * Export File from canvas
  * @param canvas
@@ -51,9 +53,19 @@ export declare function image2file(img: HTMLImageElement, fileName: string, last
  */
 export declare function canvas2Image(canvas: HTMLCanvasElement, type?: string, quality?: number): Promise<HTMLImageElement>;
 export declare type ResizeResultType = 'image' | 'canvas';
+/**
+ * Get orientation value from given array buffer.
+ * @param {ArrayBuffer} arrayBuffer - The array buffer to read.
+ * @returns {number} The read orientation value.
+ * Source：https://github.com/fengyuanchen/compressorjs/blob/main/src/utilities.js
+ * 99行，resetAndGetOrientation方法
+ */
+export declare function getOrientation(arrayBuffer: ArrayBuffer): number | undefined;
 /**
  * 缩放图片
  * @param img：HTMLImageElement 图片对象
+ * @param inputType 图片类型
+ * @param orientation
  * @param imageWidth 图片宽度
  * @param imageHeight 图片高度
  // * @param equalProportion 是否等比例拉伸，默认是，目前只支持等比例拉伸
@@ -61,8 +73,11 @@ export declare type ResizeResultType = 'image' | 'canvas';
  * @param baseOnShortSide 是否以短边为限制
  * @param resultType: ResizeResultType, "image" | "canvas"
  */
-export declare function resize(img: HTMLImageElement, { imageWidth, imageHeight, sideLengthLimit, baseOnShortSide, // 是否以短边为基准缩放
+export declare function resize(img: HTMLImageElement, { inputType, orientation, // 图片的方向
+imageWidth, imageHeight, sideLengthLimit, baseOnShortSide, // 是否以短边为基准缩放
 resultType, }: {
+    inputType?: string | undefined;
+    orientation?: number | undefined;
     imageWidth?: number | undefined;
     imageHeight?: number | undefined;
     sideLengthLimit?: number | undefined;

package/lib/media-picker/util/media-util.js

@@ -25,6 +25,7 @@ __export(stdin_exports, {
   file2DataURL: () => file2DataURL,
   file2Image: () => file2Image,
   getFileUniqueCode: () => getFileUniqueCode,
+  getOrientation: () => getOrientation,
   getUniqueFileName: () => getUniqueFileName,
   image2Canvas: () => image2Canvas,
   image2file: () => image2file,
@@ -37,6 +38,17 @@ module.exports = __toCommonJS(stdin_exports);
 const MAX_SIDE_LENGTH = 1920;
 const MIN_SIDE_LENGTH = 480;
 const PHOTO_FILE_SIZE_LIMIT = 1e3;
+var Orientation = /* @__PURE__ */ ((Orientation2) => {
+  Orientation2[Orientation2["TOP_AND_LEFT"] = 1] = "TOP_AND_LEFT";
+  Orientation2[Orientation2["TOP_AND_RIGHT"] = 2] = "TOP_AND_RIGHT";
+  Orientation2[Orientation2["BOTTOM_AND_RIGHT"] = 3] = "BOTTOM_AND_RIGHT";
+  Orientation2[Orientation2["BOTTOM_AND_LEFT"] = 4] = "BOTTOM_AND_LEFT";
+  Orientation2[Orientation2["LEFT_AND_TOP"] = 5] = "LEFT_AND_TOP";
+  Orientation2[Orientation2["RIGHT_AND_TOP"] = 6] = "RIGHT_AND_TOP";
+  Orientation2[Orientation2["RIGHT_AND_BOTTOM"] = 7] = "RIGHT_AND_BOTTOM";
+  Orientation2[Orientation2["LEFT_AND_BOTTOM"] = 8] = "LEFT_AND_BOTTOM";
+  return Orientation2;
+})(Orientation || {});
 function isImageType(file) {
   return file.type.indexOf("image/") >= 0;
 }
@@ -60,6 +72,47 @@ function getUniqueFileName(file, suffix = "") {
   )}`;
   return suffix ? name + "." + suffix : name;
 }
+function adjustImgOrientation(ctx, img, orientation, width, height) {
+  switch (orientation) {
+    case 3 /* BOTTOM_AND_RIGHT */:
+      ctx.rotate(180 * Math.PI / 180);
+      ctx.drawImage(img, -width, -height, width, height);
+      break;
+    case 6 /* RIGHT_AND_TOP */:
+      ctx.rotate(90 * Math.PI / 180);
+      ctx.drawImage(img, 0, -width, height, width);
+      break;
+    case 8 /* LEFT_AND_BOTTOM */:
+      ctx.rotate(270 * Math.PI / 180);
+      ctx.drawImage(img, -height, 0, height, width);
+      break;
+    case 2 /* TOP_AND_RIGHT */:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.drawImage(img, 0, 0, width, height);
+      break;
+    case 4 /* BOTTOM_AND_LEFT */:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate(180 * Math.PI / 180);
+      ctx.drawImage(img, -width, -height, width, height);
+      break;
+    case 5 /* LEFT_AND_TOP */:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate(90 * Math.PI / 180);
+      ctx.drawImage(img, 0, -width, height, width);
+      break;
+    case 7 /* RIGHT_AND_BOTTOM */:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate(270 * Math.PI / 180);
+      ctx.drawImage(img, -height, 0, height, width);
+      break;
+    default:
+      ctx.drawImage(img, 0, 0, width, height);
+  }
+}
 function file2DataURL(file) {
   return new Promise((resolve, reject) => {
     const a = new FileReader();
@@ -88,7 +141,7 @@ function file2Image(file) {
     }).catch(reject);
   });
 }
-function image2Canvas(img, width, height) {
+function image2Canvas(img, type, orientation, width, height) {
   const canvas = document.createElement("canvas");
   const _width = width || img.width;
   const _height = height || img.height;
@@ -96,9 +149,12 @@ function image2Canvas(img, width, height) {
   canvas.height = _height;
   const ctx = canvas.getContext("2d");
   if (ctx) {
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = "transparent";
+    if (type === "image/jpeg") {
+      ctx.fillStyle = "#fff";
+    }
     ctx.fillRect(0, 0, _width, _height);
-    ctx.drawImage(img, 0, 0, _width, _height);
+    adjustImgOrientation(ctx, img, orientation, _width, _height);
     return Promise.resolve(canvas);
   }
   return Promise.reject(new Error("canvas getContext return null"));
@@ -120,7 +176,7 @@ function canvas2File(canvas, fileName, lastModified, type = "image/jpeg", qualit
   });
 }
 function image2file(img, fileName, lastModified, type = "image/jpeg", quality = 0.8) {
-  return image2Canvas(img).then(
+  return image2Canvas(img, type).then(
     (canvas) => canvas2File(canvas, fileName, lastModified, type, quality)
   );
 }
@@ -129,7 +185,74 @@ function canvas2Image(canvas, type = "image/jpeg", quality = 0.8) {
   image.src = canvas.toDataURL(type, quality);
   return Promise.resolve(image);
 }
+function getStringFromCharCode(dataView, start, length) {
+  let str = "";
+  let i;
+  length += start;
+  for (i = start; i < length; i += 1) {
+    str += String.fromCharCode(dataView.getUint8(i));
+  }
+  return str;
+}
+function getOrientation(arrayBuffer) {
+  const dataView = new DataView(arrayBuffer);
+  let orientation;
+  try {
+    let littleEndian;
+    let app1Start;
+    let ifdStart;
+    if (dataView.getUint8(0) === 255 && dataView.getUint8(1) === 216) {
+      const length = dataView.byteLength;
+      let offset = 2;
+      while (offset + 1 < length) {
+        if (dataView.getUint8(offset) === 255 && dataView.getUint8(offset + 1) === 225) {
+          app1Start = offset;
+          break;
+        }
+        offset += 1;
+      }
+    }
+    if (app1Start) {
+      const exifIDCode = app1Start + 4;
+      const tiffOffset = app1Start + 10;
+      if (getStringFromCharCode(dataView, exifIDCode, 4) === "Exif") {
+        const endianness = dataView.getUint16(tiffOffset);
+        littleEndian = endianness === 18761;
+        if (littleEndian || endianness === 19789) {
+          if (dataView.getUint16(tiffOffset + 2, littleEndian) === 42) {
+            const firstIFDOffset = dataView.getUint32(
+              tiffOffset + 4,
+              littleEndian
+            );
+            if (firstIFDOffset >= 8) {
+              ifdStart = tiffOffset + firstIFDOffset;
+            }
+          }
+        }
+      }
+    }
+    if (ifdStart) {
+      const _length = dataView.getUint16(ifdStart, littleEndian);
+      let _offset;
+      let i;
+      for (i = 0; i < _length; i += 1) {
+        _offset = ifdStart + i * 12 + 2;
+        if (dataView.getUint16(_offset, littleEndian) === 274) {
+          _offset += 8;
+          orientation = dataView.getUint16(_offset, littleEndian);
+          dataView.setUint16(_offset, 1, littleEndian);
+          break;
+        }
+      }
+    }
+  } catch (e) {
+    orientation = 1;
+  }
+  return orientation;
+}
 function resize(img, {
+  inputType = "image/jpeg",
+  orientation = 1,
   imageWidth = -1,
   imageHeight = -1,
   sideLengthLimit = 640,
@@ -147,12 +270,16 @@ function resize(img, {
   } else {
     return Promise.reject(new Error("image width/height \u65E0\u6548"));
   }
-  const targetWidth = imageWidth * scale;
-  const targetHeight = imageHeight * scale;
+  const targetWidth = scale > 1 ? imageWidth : imageWidth * scale;
+  const targetHeight = scale > 1 ? imageHeight : imageHeight * scale;
   if (resultType === "image") {
-    return image2Canvas(img, targetWidth, targetHeight).then(
-      (canvas) => canvas2Image(canvas)
-    );
+    return image2Canvas(
+      img,
+      inputType,
+      orientation,
+      targetWidth,
+      targetHeight
+    ).then((canvas) => canvas2Image(canvas));
   }
-  return image2Canvas(img, targetWidth, targetHeight);
+  return image2Canvas(img, inputType, orientation, targetWidth, targetHeight);
 }

package/lib/media-picker/watermark/image-processor.js

@@ -21,8 +21,8 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_watermark = require("./watermark");
+var import_utils = require("../../utils");
 var import_media_util = require("../util/media-util");
-const DEFAULT_IMAGE_TYPE = "image/jpeg";
 const DEFAULT_JPEG_QUALITY = 0.8;
 const MIN_JPEG_QUALITY = 0.1;
 const JPEG_QUALITY_STEP = 0.05;
@@ -35,9 +35,29 @@ class ImageProcessor {
   }
   process() {
     const filename = this.file.name;
+    let fileType = this.file.type;
     const { lastModified } = this.file;
+    let orientation = 1;
+    if (this.file.size > this.compressOptions.photoFileSizeLimit * 1024) {
+      fileType = "image/jpeg";
+    }
+    if ((0, import_utils.isIOS)() && fileType === "image/jpeg") {
+      const reader = new FileReader();
+      reader.readAsArrayBuffer(this.file);
+      reader.onload = function(_ref) {
+        const { target } = _ref;
+        if (target == null ? void 0 : target.result) {
+          orientation = (0, import_media_util.getOrientation)(target == null ? void 0 : target.result);
+        }
+      };
+    }
+    if (fileType === "image/gif") {
+      fileType = "image/png";
+    }
     return (0, import_media_util.file2Image)(this.file).then(
       (img) => (0, import_media_util.resize)(img, {
+        inputType: fileType,
+        orientation,
         sideLengthLimit: this.resizeOptions.maxSideLength,
         resultType: "canvas"
       })
@@ -50,7 +70,7 @@ class ImageProcessor {
         canvas,
         exportFilename,
         lastModified,
-        DEFAULT_IMAGE_TYPE,
+        fileType,
         DEFAULT_JPEG_QUALITY
       );
     });

package/lib/media-picker/watermark/watermark.js

@@ -24,7 +24,7 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_utils = require("../../utils");
 var import_parse = require("../../utils/parse");
-var import_date = require("../../utils/date");
+var import_date_utils = require("@zartui/date-utils");
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const subString = (str, startIndex, length) => {
   if (!(0, import_utils.isDef)(length)) {
@@ -276,22 +276,22 @@ function buildContent(contentConfigString, watermarkContext) {
       const regexResult = scanner.next(dateRegex);
       if (regexResult) {
         const matchResults = regexResult;
-        let format = import_date.FORMAT.FORMAT_YMD;
+        let format = import_date_utils.DATE_FORMAT.FORMAT_YMD;
         if (matchResults && matchResults.length >= 2) {
           if ((0, import_utils.isValidString)(matchResults[1])) {
             format = matchResults[1];
           }
         }
         if (watermarkContext) {
-          content += (0, import_date.formatDate)(watermarkContext.watermarkTime, format);
+          content += (0, import_date_utils.formatDate)(watermarkContext.watermarkTime, format);
         }
         scanner.skip(matchResults.input);
       }
     } else if (scanner.hasNext("time" /* Time */)) {
       if (watermarkContext) {
-        const value = (0, import_date.formatDate)(
+        const value = (0, import_date_utils.formatDate)(
           watermarkContext.watermarkTime,
-          import_date.FORMAT.FORMAT_HM
+          import_date_utils.DATE_FORMAT.FORMAT_HM
         );
         content += value;
       }

package/lib/multiple-picker/MultiplePicker.js

@@ -119,8 +119,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "size": "normal",
         "block": true,
         "style": {
-          marginRigth: "4px",
-          backgroundColor: "white"
+          marginRigth: "4px"
         },
         "onClick": onCancel
       }, {

package/lib/multiple-picker/index.css

@@ -1 +1 @@
-:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-default);--zt-multiple-picker-background-color: var(--zt-white);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-action-padding: 0 var(--zt-padding-md);--zt-multiple-picker-title-font-size: var(--zt-font-size-md);--zt-multiple-picker-title-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-title-line-height: var(--zt-line-height-md);--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-action-font-size: var(--zt-font-size-md);--zt-multiple-picker-confirm-action-font-weight: var(--zt-font-bold);--zt-multiple-picker-confirm-action-color: var(--zt-blue);--zt-multiple-picker-cancel-action-font-weight: normal;--zt-multiple-picker-cancel-action-color: var(--zt-black);--zt-multiple-picker-option-font-size: var(--zt-font-size-md);--zt-multiple-picker-option-disabled-opacity: .3;--zt-multiple-picker-option-active-opacity: .7;--zt-multiple-picker-max-height: 84.55vh;--zt-multiple-picker-loading-icon-color: var(--zt-blue);--zt-multiple-picker-loading-index: 3;--zt-multiple-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border-radius: 18px;--zt-multiple-picker-ellipsis-line-height: 20px}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:var(--zt-multiple-picker-action-padding);font-size:var(--zt-multiple-picker-action-font-size);background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:var(--zt-multiple-picker-option-active-opacity)}.zt-multiple-picker__confirm{color:var(--zt-multiple-picker-confirm-action-color);font-weight:var(--zt-multiple-picker-confirm-action-font-weight)}.zt-multiple-picker__cancel{color:var(--zt-multiple-picker-cancel-action-color);font-weight:var(--zt-multiple-picker-cancel-action-font-weight)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-multiple-picker-title-font-size);line-height:var(--zt-multiple-picker-title-line-height);text-align:center;color:var(--zt-gray-default);opacity:var(--zt-multiple-picker-title-opacity);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-multiple-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-multiple-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-multiple-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-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-multiple-picker-option-font-size);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-white);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{line-height:var(--zt-multiple-picker-ellipsis-line-height);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);border:1px solid var(--zt-gray-a2);padding:var(--zt-multiple-picker-toolbar-padding);opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:var(--zt-multiple-picker-option-disabled-opacity)}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);color:var(--zt-blue);opacity:1}
+:root{--zt-multiple-picker-warpper-padding: 12px 16px 4px 16px;--zt-multiple-picker-option-text-color: var(--zt-gray-default);--zt-multiple-picker-background-color: var(--zt-white);--zt-multiple-picker-toolbar-height: 44px;--zt-multiple-picker-action-padding: 0 var(--zt-padding-md);--zt-multiple-picker-title-font-size: var(--zt-font-size-md);--zt-multiple-picker-title-opacity: var(--zt-disabled-opacity);--zt-multiple-picker-title-padding: 12px 0;--zt-multiple-picker-title-line-height: var(--zt-line-height-md);--zt-multiple-picker-item-padding: 0 4px 8px 0;--zt-multiple-picker-action-font-size: var(--zt-font-size-md);--zt-multiple-picker-confirm-action-font-weight: var(--zt-font-bold);--zt-multiple-picker-confirm-action-color: var(--zt-blue);--zt-multiple-picker-cancel-action-font-weight: normal;--zt-multiple-picker-cancel-action-color: var(--zt-black);--zt-multiple-picker-option-font-size: var(--zt-font-size-md);--zt-multiple-picker-option-disabled-opacity: .3;--zt-multiple-picker-option-active-opacity: .7;--zt-multiple-picker-max-height: 84vh;--zt-multiple-picker-loading-icon-color: var(--zt-blue);--zt-multiple-picker-loading-index: 3;--zt-multiple-picker-loading-mask-color: rgba(255, 255, 255, .9);--zt-multiple-picker-toolbar-padding: 8px 16px;--zt-multiple-picker-ellipsis-border-radius: 18px;--zt-multiple-picker-ellipsis-border: 1px solid var(--zt-gray-a2);--zt-multiple-picker-ellipsis-line-height: 20px;--zt-multiple-picker-title-background: var(--zt-white)}.zt-multiple-picker{display:flex;flex-direction:column;justify-content:space-between;position:relative;background-color:var(--zt-multiple-picker-background-color);-webkit-user-select:none;user-select:none;max-height:var(--zt-multiple-picker-max-height)}.zt-multiple-picker__toolbar{display:flex;align-items:center;justify-content:space-between;box-sizing:content-box;flex-shrink:0;background:var(--zt-multiple-picker-title-background);height:var(--zt-multiple-picker-toolbar-height);padding:var(--zt-multiple-picker-toolbar-padding)}.zt-multiple-picker__cancel,.zt-multiple-picker__confirm{height:100%;padding:var(--zt-multiple-picker-action-padding);font-size:var(--zt-multiple-picker-action-font-size);background-color:transparent;border:none;cursor:pointer}.zt-multiple-picker__cancel:active,.zt-multiple-picker__confirm:active{opacity:var(--zt-multiple-picker-option-active-opacity)}.zt-multiple-picker__confirm{color:var(--zt-multiple-picker-confirm-action-color);font-weight:var(--zt-multiple-picker-confirm-action-font-weight)}.zt-multiple-picker__cancel{color:var(--zt-multiple-picker-cancel-action-color);font-weight:var(--zt-multiple-picker-cancel-action-font-weight)}.zt-multiple-picker__title{flex-shrink:0;font-weight:var(--zt-multiple-picker-cancel-action-font-weight);font-size:var(--zt-multiple-picker-title-font-size);line-height:var(--zt-multiple-picker-title-line-height);text-align:center;background:var(--zt-multiple-picker-title-background);color:var(--zt-gray-default);opacity:var(--zt-multiple-picker-title-opacity);padding:var(--zt-multiple-picker-title-padding)}.zt-multiple-picker__options{position:relative;display:flex;cursor:-webkit-grab;cursor:grab;overflow-y:scroll}.zt-multiple-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-multiple-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-multiple-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-multiple-picker-loading-icon-color);background-color:var(--zt-multiple-picker-loading-mask-color)}.zt-multiple-picker-options{flex:1;overflow-y:scroll;font-size:var(--zt-multiple-picker-option-font-size);margin:0;outline:0 none;padding:0}.zt-multiple-picker-options__wrapper{display:flex;flex-wrap:wrap;background-color:var(--zt-multiple-picker-background-color);padding:var(--zt-multiple-picker-warpper-padding)}.zt-multiple-picker-options__item{color:var(--zt-multiple-picker-option-text-color);padding:var(--zt-multiple-picker-item-padding);box-sizing:border-box;text-align:center;font-size:var(--zt-font-size-md)}.zt-multiple-picker-options__item .zt-ellipsis{line-height:var(--zt-multiple-picker-ellipsis-line-height);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);border:var(--zt-multiple-picker-ellipsis-border);padding:var(--zt-multiple-picker-toolbar-padding);opacity:var(--zt-active-opacity)}.zt-multiple-picker-options__item--disabled{cursor:not-allowed;opacity:var(--zt-multiple-picker-option-disabled-opacity)}.zt-multiple-picker-options__item--last{padding-right:0}.zt-multiple-picker-options__item--selected .zt-ellipsis{background:rgba(0,145,250,.1);border:1px solid rgba(0,145,250,.6);border-radius:var(--zt-multiple-picker-ellipsis-border-radius);color:var(--zt-blue);opacity:1}.zt-theme-dark{--zt-multiple-picker-title-background: var(--zt-background-2);--zt-multiple-picker-title-opacity: 1;--zt-multiple-picker-background-color: var(--zt-background-2);--zt-multiple-picker-option-text-color: var(--zt-white);--zt-multiple-picker-cancel-action-color: rgba(255, 255, 255, .04);--zt-multiple-picker-ellipsis-border: .5px solid rgba(255, 255, 255, .2)}

package/lib/multiple-picker/types.d.ts

@@ -6,9 +6,10 @@ export declare type PickerOption = {
     value?: Numeric;
     disabled?: boolean;
     className?: unknown;
+    initialIndex?: number;
     [key: PropertyKey]: any;
 };
 export declare type MultiplePickerOptionsExpose = {
-    setConfirmIndex: (indexes: any) => void;
+    setConfirmIndex: (indexes: PickerOption) => void;
 };
 export declare type MultiplePickerInstance = ComponentPublicInstance<MultiplePickerOptionsProps, MultiplePickerOptionsExpose>;

package/lib/nav-bar/index.css

@@ -1 +1 @@
-:root{--zt-nav-bar-height: 44px;--zt-nav-bar-padding-bottom: 12px;--zt-nav-bar-background: var(--zt-background);--zt-nav-bar-icon-font-size: 24px;--zt-nav-bar-icon-color: var(--zt-text-color);--zt-nav-bar-icon-size: 36px;--zt-nav-bar-button-height: 36px;--zt-nav-bar-border-height: 18px;--zt-nav-bar-text-color: var(--zt-primary-color);--zt-nav-bar-title-font-size: var(--zt-font-size-gt);--zt-nav-bar-title-text-color: var(--zt-text-color);--zt-nav-bar-title-height: 28px;--zt-nav-bar-z-index: 1;--zt-nav-bar-btn-border-radius: 18px;--zt-nav-bar-padding-left: 16px;--zt-nav-bar-padding-right: 16px}.zt-nav-bar{position:relative;padding-bottom:var(--zt-nav-bar-padding-bottom);z-index:var(--zt-nav-bar-z-index);text-align:center;-webkit-user-select:none;user-select:none;color:var(--zt-nav-bar-icon-color)}.zt-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.zt-nav-bar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.zt-nav-bar__content{position:relative;display:flex;align-items:center;height:var(--zt-nav-bar-height)}.zt-nav-bar__icon{width:var(--zt-nav-bar-icon-size);height:var(--zt-nav-bar-icon-size);line-height:var(--zt-nav-bar-icon-size);font-size:var(--zt-nav-bar-icon-font-size)}.zt-nav-bar__text{display:inline-block;font-size:var(--zt-font-size-lg);padding-right:var(--zt-nav-bar-padding-left);padding-left:var(--zt-nav-bar-padding-right)}.zt-nav-bar__text--left-text{padding-left:0}.zt-nav-bar__bar-btn{display:flex;align-items:center;box-sizing:border-box;height:var(--zt-nav-bar-button-height);line-height:var(--zt-nav-bar-button-height);background:linear-gradient(135deg,#e6ebf0 0%,#ffffff 100%,#ffffff 100%);box-shadow:-4px -4px 8px #fff,4px 4px 8px rgba(45,75,115,.1);border-radius:var(--zt-nav-bar-btn-border-radius);border:1px solid rgba(255,255,255,.75)}.zt-nav-bar__bar-btn:active{border:1px solid rgba(255,255,255,.75);box-shadow:inset 4px 4px 8px rgba(45,75,115,.24);background:rgba(45,75,115,.04)}.zt-nav-bar__title{height:var(--zt-nav-bar-title-height);text-align:center;line-height:var(--zt-nav-bar-title-height);max-width:50%;margin:0 auto;font-weight:var(--zt-font-bold);font-size:var(--zt-nav-bar-title-font-size)}.zt-nav-bar__left,.zt-nav-bar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);max-width:30%}.zt-nav-bar__left{left:0}.zt-nav-bar__right{right:0}
+:root{--zt-nav-bar-height: 44px;--zt-nav-bar-padding-bottom: 12px;--zt-nav-bar-background: var(--zt-background);--zt-nav-bar-icon-font-size: 24px;--zt-nav-bar-icon-color: var(--zt-text-color);--zt-nav-bar-icon-size: 36px;--zt-nav-bar-button-height: 36px;--zt-nav-bar-border-height: 18px;--zt-nav-bar-text-color: var(--zt-primary-color);--zt-nav-bar-title-font-size: var(--zt-font-size-gt);--zt-nav-bar-title-text-color: var(--zt-text-color);--zt-nav-bar-title-height: 28px;--zt-nav-bar-z-index: 1;--zt-nav-bar-btn-border-radius: 18px;--zt-nav-bar-padding-left: 16px;--zt-nav-bar-padding-right: 16px;--zt-nav-bar-btn-background: linear-gradient(135deg, #e6ebf0 0%, #ffffff 100%, #ffffff 100%);--zt-nav-bar-btn-box-shadow: -4px -4px 8px 0 #ffffff, 4px 4px 8px 0 rgba(45, 75, 115, .1);--zt-nav-bar-btn-border: 1px solid rgba(255, 255, 255, .75)}.zt-nav-bar{position:relative;padding-bottom:var(--zt-nav-bar-padding-bottom);z-index:var(--zt-nav-bar-z-index);text-align:center;-webkit-user-select:none;user-select:none;color:var(--zt-nav-bar-icon-color)}.zt-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.zt-nav-bar--safe-area-inset-top{padding-top:constant(safe-area-inset-top);padding-top:env(safe-area-inset-top)}.zt-nav-bar__content{position:relative;display:flex;align-items:center;height:var(--zt-nav-bar-height)}.zt-nav-bar__icon{width:var(--zt-nav-bar-icon-size);height:var(--zt-nav-bar-icon-size);line-height:var(--zt-nav-bar-icon-size);font-size:var(--zt-nav-bar-icon-font-size)}.zt-nav-bar__text{display:inline-block;font-size:var(--zt-font-size-lg);padding-right:var(--zt-nav-bar-padding-left);padding-left:var(--zt-nav-bar-padding-right)}.zt-nav-bar__text--left-text{padding-left:0}.zt-nav-bar__bar-btn{display:flex;align-items:center;box-sizing:border-box;height:var(--zt-nav-bar-button-height);line-height:var(--zt-nav-bar-button-height);background:var(--zt-nav-bar-btn-background);box-shadow:var(--zt-nav-bar-btn-box-shadow);border-radius:var(--zt-nav-bar-btn-border-radius);border:var(--zt-nav-bar-btn-border)}.zt-nav-bar__bar-btn:active{border:1px solid rgba(255,255,255,.75);box-shadow:inset 4px 4px 8px rgba(45,75,115,.24);background:rgba(45,75,115,.04)}.zt-nav-bar__title{height:var(--zt-nav-bar-title-height);text-align:center;line-height:var(--zt-nav-bar-title-height);max-width:50%;margin:0 auto;font-weight:var(--zt-font-bold);font-size:var(--zt-nav-bar-title-font-size)}.zt-nav-bar__left,.zt-nav-bar__right{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 var(--zt-padding-md);font-size:var(--zt-font-size-md);max-width:30%}.zt-nav-bar__left{left:0}.zt-nav-bar__right{right:0}.zt-theme-dark{--zt-nav-bar-btn-background: linear-gradient(135deg, #0e1824 0%, #203043 100%, #ffffff 100%, #1d2c3d 100%);--zt-nav-bar-btn-box-shadow: -4px -4px 8px 0 rgba(255, 255, 255, .12), 4px 4px 8px 0 rgba(0, 12, 24, .8);--zt-nav-bar-btn-border: 1px solid #394555}

package/lib/overlay/Overlay.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         default: true;
     };
     customStyle: PropType<CSSProperties>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     duration: (NumberConstructor | StringConstructor)[];

package/lib/overlay/index.d.ts

@@ -12,7 +12,7 @@ export declare const Overlay: import("../utils").WithInstall<import("vue").Defin
         default: true;
     };
     customStyle: import("vue").PropType<import("vue").CSSProperties>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     zIndex: (NumberConstructor | StringConstructor)[];
     duration: (NumberConstructor | StringConstructor)[];

package/lib/picker/PickerColumn.js

@@ -79,8 +79,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       currentOffset.value = offset;
     };
+    const isReadonly = () => props.readonly || !props.options.length;
     const onClickOption = (index) => {
-      if (moving || props.readonly) {
+      if (moving || isReadonly()) {
         return;
       }
       transitionEndTrigger = null;
@@ -105,7 +106,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.start(event);
@@ -120,7 +121,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.move(event);
@@ -136,7 +137,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       const distance = currentOffset.value - momentumOffset;

package/lib/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: 44px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-frame-background-color: var(--zt-gray-a04);--zt-picker-cancel-background-color: var(--zt-white);--zt-picker-title-text-color: var(--zt-gray-a4);--zt-picker-background: var(--zt-background-2);--zt-picker-toolbar-height: 60px;--zt-picker-title-font-size: var(--zt-font-size-md);--zt-picker-title-line-height: var(--zt-line-height-md);--zt-picker-action-padding: 0 var(--zt-padding-md);--zt-picker-action-font-size: var(--zt-font-size-lg);--zt-picker-confirm-action-color: var(--zt-white);--zt-picker-cancel-action-color: var(--zt-text-color);--zt-picker-option-font-size: var(--zt-font-size-lg);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: .3;--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-unit-font-size: var(--zt-font-size-md)}.zt-theme-dark{--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;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:#ffffff;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-picker-title-font-size);background:#ffffff;color:var(--zt-picker-title-text-color)}.zt-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.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:var(--zt-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{position:relative;flex:1;overflow:hidden;font-size:var(--zt-picker-option-font-size)}.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}.zt-picker-column__unit{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--zt-picker-option-text-color);font-size:var(--zt-picker-option-font-size);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-picker-unit-font-size)}
+:root{--zt-picker-cancel-margin: 8px 4px 8px 16px;--zt-picker-confirm-margin: 8px 16px 8px 4px;--zt-picker-title-height: 44px;--zt-picker-title-border-radius: 16px 16px 0 0;--zt-picker-frame-background-color: var(--zt-gray-a04);--zt-picker-cancel-background-color: var(--zt-white);--zt-picker-title-text-color: var(--zt-gray-a4);--zt-picker-background: var(--zt-background-2);--zt-picker-toolbar-height: 60px;--zt-picker-title-font-size: var(--zt-font-size-md);--zt-picker-title-background: var(--zt-white);--zt-picker-title-line-height: var(--zt-line-height-md);--zt-picker-action-padding: 0 var(--zt-padding-md);--zt-picker-action-font-size: var(--zt-font-size-lg);--zt-picker-confirm-action-color: var(--zt-white);--zt-picker-cancel-action-color: var(--zt-text-color);--zt-picker-option-font-size: var(--zt-font-size-lg);--zt-picker-option-padding: 0 var(--zt-padding-base);--zt-picker-option-text-color: var(--zt-text-color);--zt-picker-option-disabled-opacity: .3;--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-unit-font-size: var(--zt-font-size-md)}.zt-theme-dark{--zt-picker-selected-background: rgba(255, 255, 255, .08);--zt-picker-title-background: var(--zt-background-2);--zt-picker-title-text-color: var(--zt-gray-default);--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;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-picker-title-font-size);background:var(--zt-picker-title-background);color:var(--zt-picker-title-text-color)}.zt-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.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:var(--zt-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.zt-picker-column{position:relative;flex:1;overflow:hidden;font-size:var(--zt-picker-option-font-size);background:var(--zt-picker-background)}.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;background:var(--zt-picker-selected-background)}.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-picker-option-font-size);width:100%;height:100%}.zt-picker-column__unit-text{margin:0 4px;font-size:var(--zt-picker-unit-font-size)}