zartui 3.0.3 → 3.0.5

package/es/media-picker/util/media-util.mjs

@@ -1,6 +1,17 @@
 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;
 }
@@ -24,6 +35,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();
@@ -52,7 +104,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;
@@ -60,9 +112,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"));
@@ -84,7 +139,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)
   );
 }
@@ -93,7 +148,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,
@@ -111,14 +233,18 @@ 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);
 }
 export {
   MAX_SIDE_LENGTH,
@@ -129,6 +255,7 @@ export {
   file2DataURL,
   file2Image,
   getFileUniqueCode,
+  getOrientation,
   getUniqueFileName,
   image2Canvas,
   image2file,

package/es/media-picker/watermark/image-processor.mjs

@@ -1,6 +1,11 @@
 import { renderWatermark } from "./watermark.mjs";
-import { canvas2File, file2Image, resize } from "../util/media-util.mjs";
-const DEFAULT_IMAGE_TYPE = "image/jpeg";
+import { isIOS } from "../../utils/index.mjs";
+import {
+  canvas2File,
+  file2Image,
+  getOrientation,
+  resize
+} from "../util/media-util.mjs";
 const DEFAULT_JPEG_QUALITY = 0.8;
 const MIN_JPEG_QUALITY = 0.1;
 const JPEG_QUALITY_STEP = 0.05;
@@ -13,9 +18,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 (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 = getOrientation(target == null ? void 0 : target.result);
+        }
+      };
+    }
+    if (fileType === "image/gif") {
+      fileType = "image/png";
+    }
     return file2Image(this.file).then(
       (img) => resize(img, {
+        inputType: fileType,
+        orientation,
         sideLengthLimit: this.resizeOptions.maxSideLength,
         resultType: "canvas"
       })
@@ -28,7 +53,7 @@ class ImageProcessor {
         canvas,
         exportFilename,
         lastModified,
-        DEFAULT_IMAGE_TYPE,
+        fileType,
         DEFAULT_JPEG_QUALITY
       );
     });

package/es/media-picker/watermark/watermark.mjs

@@ -7,7 +7,7 @@ import {
   isValidString
 } from "../../utils/index.mjs";
 import { parseDecimal, parseNumber } from "../../utils/parse.mjs";
-import { FORMAT, formatDate } from "../../utils/date.mjs";
+import { DATE_FORMAT, formatDate } from "@zartui/date-utils";
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const subString = (str, startIndex, length) => {
   if (!isDef(length)) {
@@ -259,7 +259,7 @@ function buildContent(contentConfigString, watermarkContext) {
       const regexResult = scanner.next(dateRegex);
       if (regexResult) {
         const matchResults = regexResult;
-        let format = FORMAT.FORMAT_YMD;
+        let format = DATE_FORMAT.FORMAT_YMD;
         if (matchResults && matchResults.length >= 2) {
           if (isValidString(matchResults[1])) {
             format = matchResults[1];
@@ -274,7 +274,7 @@ function buildContent(contentConfigString, watermarkContext) {
       if (watermarkContext) {
         const value = formatDate(
           watermarkContext.watermarkTime,
-          FORMAT.FORMAT_HM
+          DATE_FORMAT.FORMAT_HM
         );
         content += value;
       }

package/es/multiple-picker/MultiplePicker.mjs

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

package/es/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/es/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/es/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/es/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/es/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/es/picker/PickerColumn.mjs

@@ -56,8 +56,9 @@ var stdin_default = defineComponent({
       }
       currentOffset.value = offset;
     };
+    const isReadonly = () => props.readonly || !props.options.length;
     const onClickOption = (index) => {
-      if (moving || props.readonly) {
+      if (moving || isReadonly()) {
         return;
       }
       transitionEndTrigger = null;
@@ -82,7 +83,7 @@ var stdin_default = defineComponent({
       }
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.start(event);
@@ -97,7 +98,7 @@ var stdin_default = defineComponent({
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.move(event);
@@ -113,7 +114,7 @@ var stdin_default = defineComponent({
       }
     };
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       const distance = currentOffset.value - momentumOffset;

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: 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)}

package/es/popup/Popup.d.ts

@@ -49,6 +49,14 @@ declare const popupProps: {
         type: NumberConstructor;
         default: number;
     };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     slideable: BooleanConstructor;
 };
 export declare type PopupProps = ExtractPropTypes<typeof popupProps>;
@@ -101,6 +109,14 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     slideable: BooleanConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
@@ -151,6 +167,14 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     slideable: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -177,6 +201,8 @@ declare const _default: import("vue").DefineComponent<{
     safeAreaInsetTop: boolean;
     safeAreaInsetBottom: boolean;
     sliderContentHeight: number;
+    minDragHeight: string;
+    maxDragHeight: string;
     slideable: boolean;
 }>;
 export default _default;

package/es/popup/Popup.mjs

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, withDirectives as _withDirectives, mergeProps as _mergeProps, vShow as _vShow, createVNode as _createVNode } from "vue";
 import { ref, watch, provide, Teleport, nextTick, computed, onMounted, Transition, onActivated, onDeactivated, defineComponent } from "vue";
 import { popupSharedProps } from "./shared.mjs";
-import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK, makeNumberProp } from "../utils/index.mjs";
+import { isDef, extend, makeStringProp, callInterceptor, createNamespace, HAPTICS_FEEDBACK, makeNumberProp, unitToPx } from "../utils/index.mjs";
 import { useEventListener } from "@zartui/use";
 import { useExpose } from "../composables/use-expose.mjs";
 import { useLockScroll } from "../composables/use-lock-scroll.mjs";
@@ -21,6 +21,8 @@ const popupProps = extend({}, popupSharedProps, {
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean,
   sliderContentHeight: makeNumberProp(60),
+  minDragHeight: makeStringProp("40px"),
+  maxDragHeight: makeStringProp("85vh"),
   slideable: Boolean
 });
 const [name, bem] = createNamespace("popup");
@@ -38,15 +40,13 @@ var stdin_default = defineComponent({
     let opened;
     let shouldReopen;
     const root = ref();
-    const positionY = ref(0);
     let timerId = setInterval(() => {
     }, 0);
-    const touchHeight = ref(0);
     const contentStyle = ref(`height:${props.sliderContentHeight}px;`);
-    const touchAreaHeight = ref(40);
     const zIndex = ref();
-    const touchPoint = ref(0);
     const popupRef = ref();
+    let touchPoint = 0;
+    const touchAreaHeight = unitToPx(props.minDragHeight);
     const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
     const style = computed(() => {
       const style2 = {
@@ -93,13 +93,14 @@ var stdin_default = defineComponent({
         event.preventDefault();
       }
       const h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-      positionY.value = event.touches[0].clientY;
+      const positionY = event.touches[0].clientY || 0;
+      let touchHeight = 0;
       timerId = setTimeout(() => {
-        if (positionY.value === 0 || positionY.value < h * 0.15) {
+        if (positionY === 0 || positionY < h - unitToPx(props.maxDragHeight)) {
           return;
         }
-        touchHeight.value = positionY.value - touchAreaHeight.value > h - touchAreaHeight.value ? h - touchAreaHeight.value + touchPoint.value : positionY.value;
-        contentStyle.value = `height:${h - touchHeight.value - touchAreaHeight.value + touchPoint.value}px;`;
+        touchHeight = positionY - touchAreaHeight > h - touchAreaHeight ? h - touchAreaHeight + touchPoint : positionY;
+        contentStyle.value = `height:${h - touchHeight - touchAreaHeight + touchPoint}px;`;
       }, 10);
     };
     const startMove = (event) => {
@@ -107,7 +108,7 @@ var stdin_default = defineComponent({
       if (timerId) {
         clearInterval(timerId);
       }
-      touchPoint.value = event.touches[0].clientY - (((_b = (_a = popupRef.value) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.top) || 0);
+      touchPoint = event.touches[0].clientY - (((_b = (_a = popupRef.value) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.top) || 0);
     };
     const endMove = () => {
       clearInterval(timerId);
@@ -184,6 +185,7 @@ var stdin_default = defineComponent({
         "onKeydown": onKeydown
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon(), _createVNode("div", {
         "class": bem("slider-title"),
+        "style": `height:${touchAreaHeight}px;`,
         "ref": root
       }, [_createVNode("div", {
         "class": bem("slider-bar")

package/es/popup/index.css

@@ -1 +1 @@
-:root{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:#fff}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size);cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}
+:root{--zt-popup-background: var(--zt-background-2);--zt-popup-transition: transform var(--zt-duration-base);--zt-popup-round-radius: 16px;--zt-popup-close-icon-size: 22px;--zt-popup-close-icon-color: var(--zt-gray-5);--zt-popup-close-icon-margin: 16px;--zt-popup-close-icon-z-index: 1}.zt-overflow-hidden{overflow:hidden!important}.zt-popup{position:fixed;max-height:100%;overflow-y:auto;background:var(--zt-popup-background);transition:var(--zt-popup-transition);-webkit-overflow-scrolling:touch}.zt-popup__slider{position:fixed;width:100%;bottom:0;border-radius:16px 16px 0 0;background-color:var(--zt-popup-background)}.zt-popup__slider-title{height:40px;text-align:center}.zt-popup__slider-bar{display:inline-block;width:32px;height:4px;transform:scaleY(-1);background:rgba(45,75,115,.2);border-radius:3px}.zt-popup__slider-content{overflow-y:auto}.zt-popup--center{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.zt-popup--center.zt-popup--round{border-radius:var(--zt-popup-round-radius)}.zt-popup--top{top:0;left:0;width:100%}.zt-popup--top.zt-popup--round{border-radius:0 0 var(--zt-popup-round-radius) var(--zt-popup-round-radius)}.zt-popup--right{top:50%;right:0;transform:translate3d(0,-50%,0)}.zt-popup--right.zt-popup--round{border-radius:var(--zt-popup-round-radius) 0 0 var(--zt-popup-round-radius)}.zt-popup--bottom{bottom:0;left:0;width:100%}.zt-popup--bottom.zt-popup--round{border-radius:var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0 0}.zt-popup--left{top:50%;left:0;transform:translate3d(0,-50%,0)}.zt-popup--left.zt-popup--round{border-radius:0 var(--zt-popup-round-radius) var(--zt-popup-round-radius) 0}.zt-popup-slide-top-enter-active,.zt-popup-slide-left-enter-active,.zt-popup-slide-right-enter-active,.zt-popup-slide-bottom-enter-active{transition-timing-function:var(--zt-ease-out)}.zt-popup-slide-top-leave-active,.zt-popup-slide-left-leave-active,.zt-popup-slide-right-leave-active,.zt-popup-slide-bottom-leave-active{transition-timing-function:var(--zt-ease-in)}.zt-popup-slide-top-enter-from,.zt-popup-slide-top-leave-active{transform:translate3d(0,-100%,0)}.zt-popup-slide-right-enter-from,.zt-popup-slide-right-leave-active{transform:translate3d(100%,-50%,0)}.zt-popup-slide-bottom-enter-from,.zt-popup-slide-bottom-leave-active{transform:translate3d(0,100%,0)}.zt-popup-slide-left-enter-from,.zt-popup-slide-left-leave-active{transform:translate3d(-100%,-50%,0)}.zt-popup__slider-icon{z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size);cursor:pointer}.zt-popup__close-icon{position:absolute;z-index:var(--zt-popup-close-icon-z-index);color:var(--zt-popup-close-icon-color);font-size:var(--zt-popup-close-icon-size)}.zt-popup__close-icon--top-left{top:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--top-right{top:var(--zt-popup-close-icon-margin);right:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-left{bottom:var(--zt-popup-close-icon-margin);left:var(--zt-popup-close-icon-margin)}.zt-popup__close-icon--bottom-right{right:var(--zt-popup-close-icon-margin);bottom:var(--zt-popup-close-icon-margin)}

package/es/popup/index.d.ts

@@ -47,6 +47,14 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
         type: NumberConstructor;
         default: number;
     };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     slideable: BooleanConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "keydown" | "open" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon")[], "open" | "close" | "keydown" | "opened" | "closed" | "update:show" | "clickOverlay" | "clickCloseIcon", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
@@ -97,6 +105,14 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
         type: NumberConstructor;
         default: number;
     };
+    minDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    maxDragHeight: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     slideable: BooleanConstructor;
 }>> & {
     onKeydown?: ((...args: any[]) => any) | undefined;
@@ -123,6 +139,8 @@ export declare const Popup: import("../utils").WithInstall<import("vue").DefineC
     safeAreaInsetTop: boolean;
     safeAreaInsetBottom: boolean;
     sliderContentHeight: number;
+    minDragHeight: string;
+    maxDragHeight: string;
     slideable: boolean;
 }>>;
 export default Popup;

package/es/radio/index.css

@@ -1 +1 @@
-:root{--zt-radio-size: 16px;--zt-radio-padding: 12px 0;--zt-radio-border-color: var(--zt-gray-5);--zt-radio-duration: var(--zt-duration-fast);--zt-radio-round-box-shadow: -1px -1px 2px 0 #ffffff, 0 0 3px 0 rgba(45, 75, 115, .2);--zt-radio-round-background: linear-gradient(135deg, #e6ebf0 0%, #ffffff 100%);--zt-radio-round-border: 1px solid rgba(45, 75, 115, .13);--zt-radio-label-margin: 14px;--zt-radio-label-color: var(--zt-text-color);--zt-radio-label-font-size: var(--zt-font-size-md);--zt-radio-checked-icon-color: var(--zt-primary-color);--zt-radio-checked-icon-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .2);--zt-radio-checked-icon-border: 1px solid rgba(255, 255, 255, .5);--zt-radio-disabled-icon-color: var(--zt-gray-5);--zt-radio-disabled-icon-shadow: -1px -1px 2px 0 #fff, 0 0 3px 0 rgba(45, 75, 115, .2);--zt-radio-disabled-icon-border: 1px solid var(--zt-white-a5);--zt-radio-disabled-label-color: var(--zt-text-color-3);--zt-radio-disabled-background: var(--zt-border-color);--zt-radio-disabled-checked-icon-opacity: .4}.zt-radio{position:relative;display:flex;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--zt-radio-padding)}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-right:var(--zt-padding-md)}.zt-radio__icon{font-size:var(--zt-radio-size);cursor:pointer;box-sizing:border-box}.zt-radio__icon .zt-icon{display:flex;justify-content:center;align-items:center;width:1em;height:1em;color:transparent;text-align:center;border:1px solid var(--zt-radio-border-color);transition-duration:var(--zt-radio-duration);transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{border-radius:100%;border:var(--zt-radio-round-border);box-shadow:var(--zt-radio-round-box-shadow);background:var(--zt-radio-round-background)}.zt-radio__icon--checked .zt-icon{color:var(--zt-white);background:var(--zt-radio-checked-icon-color);box-shadow:var(--zt-radio-checked-icon-shadow);border:var(--zt-radio-checked-icon-border)}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{border:var(--zt-radio-disabled-icon-border);box-shadow:var(--zt-radio-disabled-icon-shadow);background:var(--zt-gradient-white)}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{opacity:var(--zt-radio-disabled-checked-icon-opacity);background:var(--zt-blue);color:var(--zt-white)}.zt-radio__dot{width:calc(var(--zt-radio-size) * .5);height:calc(var(--zt-radio-size) * .5);background:var(--zt-white);border-radius:50%}.zt-radio__label{margin-left:var(--zt-radio-label-margin);color:var(--zt-radio-label-color);font-size:var(--zt-radio-label-font-size)}.zt-radio__label--left{margin:0 var(--zt-radio-label-margin) 0 0}.zt-radio__label--disabled{color:var(--zt-radio-disabled-label-color)}
+:root{--zt-radio-size: 16px;--zt-radio-padding: 12px 0;--zt-radio-border-color: var(--zt-gray-5);--zt-radio-duration: var(--zt-duration-fast);--zt-radio-round-box-shadow: -1px -1px 2px 0 #ffffff, 0 0 3px 0 rgba(45, 75, 115, .2);--zt-radio-round-background: linear-gradient(135deg, #e6ebf0 0%, #ffffff 100%);--zt-radio-dot-white: var(--zt-white);--zt-radio-round-border: 1px solid rgba(45, 75, 115, .13);--zt-radio-label-margin: 14px;--zt-radio-label-color: var(--zt-text-color);--zt-radio-label-font-size: var(--zt-font-size-md);--zt-radio-checked-icon-color: var(--zt-primary-color);--zt-radio-checked-icon-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, .2);--zt-radio-checked-icon-border: 1px solid rgba(255, 255, 255, .5);--zt-radio-disabled-icon-color: var(--zt-gray-5);--zt-radio-disabled-icon-shadow: -1px -1px 2px 0 #fff, 0 0 3px 0 rgba(45, 75, 115, .2);--zt-radio-disabled-icon-border: 1px solid rgba(255, 255, 255, .5);--zt-radio-disabled-label-color: var(--zt-text-color-3);--zt-radio-disabled-background: linear-gradient(134deg, #e1e6eb 0%, #e5edf5 100%);--zt-radio-disabled-checked-icon-opacity: .4}.zt-radio{position:relative;display:flex;align-items:center;overflow:hidden;cursor:pointer;-webkit-user-select:none;user-select:none;padding:var(--zt-radio-padding)}.zt-radio--disabled{cursor:not-allowed}.zt-radio--label-disabled{cursor:default}.zt-radio--horizontal{margin-right:var(--zt-padding-md)}.zt-radio__icon{font-size:var(--zt-radio-size);cursor:pointer;box-sizing:border-box}.zt-radio__icon .zt-icon{display:flex;justify-content:center;align-items:center;width:1em;height:1em;color:transparent;text-align:center;border:1px solid var(--zt-radio-border-color);transition-duration:var(--zt-radio-duration);transition-property:color,border-color,background-color}.zt-radio__icon--round .zt-icon{border-radius:100%;border:var(--zt-radio-round-border);box-shadow:var(--zt-radio-round-box-shadow);background:var(--zt-radio-round-background)}.zt-radio__icon--checked .zt-icon{color:var(--zt-white);background:var(--zt-radio-checked-icon-color);box-shadow:var(--zt-radio-checked-icon-shadow);border:var(--zt-radio-checked-icon-border)}.zt-radio__icon--disabled{cursor:not-allowed}.zt-radio__icon--disabled .zt-icon{border:var(--zt-radio-disabled-icon-border);box-shadow:var(--zt-radio-disabled-icon-shadow);background:var(--zt-radio-disabled-background)}.zt-radio__icon--disabled.zt-radio__icon--checked .zt-icon{opacity:var(--zt-radio-disabled-checked-icon-opacity);background:var(--zt-blue);color:var(--zt-white)}.zt-radio__dot{width:calc(var(--zt-radio-size) * .5);height:calc(var(--zt-radio-size) * .5);background:var(--zt-radio-dot-white);border-radius:50%}.zt-radio__label{margin-left:var(--zt-radio-label-margin);color:var(--zt-radio-label-color);font-size:var(--zt-radio-label-font-size)}.zt-radio__label--left{margin:0 var(--zt-radio-label-margin) 0 0}.zt-radio__label--disabled{color:var(--zt-radio-disabled-label-color)}.zt-theme-dark{--zt-radio-dot-white: #ffffff;--zt-radio-round-box-shadow: none;--zt-radio-disabled-icon-shadow: none;--zt-radio-round-background: linear-gradient(179deg, #19232d 0%, rgba(255, 255, 255, .2) 100%);--zt-radio-round-border: 1px solid rgba(255, 255, 255, .2);--zt-radio-disabled-label-color: #000c18 80%;--zt-radio-disabled-background: linear-gradient(135deg, #0e1824 0%, #203043 100%);--zt-radio-disabled-icon-border: 1px solid rgba(255, 255, 255, .2)}

package/es/row/Row.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     justify: PropType<RowJustify>;
-}, () => 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<{
     tag: {
         type: PropType<keyof HTMLElementTagNameMap>;
         default: keyof HTMLElementTagNameMap;

package/es/row/index.d.ts

@@ -13,7 +13,7 @@ export declare const Row: import("../utils").WithInstall<import("vue").DefineCom
         default: number;
     };
     justify: import("vue").PropType<import("./Row").RowJustify>;
-}, () => 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<{
     tag: {
         type: import("vue").PropType<keyof HTMLElementTagNameMap>;
         default: keyof HTMLElementTagNameMap;