zartui 3.0.3 → 3.0.4

package/lib/zartui.js

@@ -628,6 +628,7 @@
   const HAPTICS_FEEDBACK = "zt-haptics-feedback";
   const ELLIPSIS = "zt-ellipsis";
   const FORM_KEY = Symbol("zt-form");
+  const LONG_PRESS_START_TIME = 500;
   function callInterceptor(interceptor, {
     args = [],
     done,
@@ -1075,6 +1076,8 @@
     safeAreaInsetTop: Boolean,
     safeAreaInsetBottom: Boolean,
     sliderContentHeight: makeNumberProp(60),
+    minDragHeight: makeStringProp("40px"),
+    maxDragHeight: makeStringProp("85vh"),
     slideable: Boolean
   });
   const [name$16, bem$13] = createNamespace("popup");
@@ -1092,15 +1095,13 @@
       let opened;
       let shouldReopen;
       const root = vue.ref();
-      const positionY = vue.ref(0);
       let timerId = setInterval(() => {
       }, 0);
-      const touchHeight = vue.ref(0);
       const contentStyle = vue.ref(`height:${props.sliderContentHeight}px;`);
-      const touchAreaHeight = vue.ref(40);
       const zIndex = vue.ref();
-      const touchPoint = vue.ref(0);
       const popupRef = vue.ref();
+      let touchPoint = 0;
+      const touchAreaHeight = unitToPx(props.minDragHeight);
       const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
       const style = vue.computed(() => {
         const style2 = {
@@ -1147,13 +1148,14 @@
           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) => {
@@ -1161,7 +1163,7 @@
         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);
@@ -1238,6 +1240,7 @@
           "onKeydown": onKeydown
         }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon(), vue.createVNode("div", {
           "class": bem$13("slider-title"),
+          "style": `height:${touchAreaHeight}px;`,
           "ref": root
         }, [vue.createVNode("div", {
           "class": bem$13("slider-bar")
@@ -1733,7 +1736,8 @@
     size: makeStringProp("medium"),
     shape: makeStringProp("square"),
     text: String,
-    textBgColor: String
+    textBgColor: String,
+    border: Boolean
   };
   var stdin_default$1p = vue.defineComponent({
     name: name$12,
@@ -1746,7 +1750,7 @@
           if (len === 1) {
             return props.text;
           } else if (len > 1) {
-            return props.text.substring(len - 2, 2);
+            return props.text.substring(len - 2, len);
           }
         }
         return "";
@@ -1767,7 +1771,9 @@
         }
       });
       const renderText = () => vue.createVNode("div", {
-        "class": bem$$("img", classArr.value),
+        "class": bem$$("img", [classArr.value, {
+          border: props.border
+        }]),
         "style": style.value
       }, [headText.value]);
       return () => {
@@ -1776,7 +1782,9 @@
         }
         return vue.createVNode(stdin_default$1q, {
           "round": props.shape === "round",
-          "class": bem$$("img", classArr.value),
+          "class": bem$$("img", [classArr.value, {
+            border: props.border
+          }]),
           "style": style.value,
           "src": props.src
         }, {
@@ -2995,7 +3003,7 @@
             "onClick": onCancel,
             "style": {
               marginRight: "4px",
-              backgroundColor: "white"
+              backgroundColor: "transparent"
             }
           }, {
             default: () => [text || "\u53D6\u6D88"]
@@ -3016,7 +3024,7 @@
       };
       const renderFooter = () => vue.createVNode("div", {
         "class": [bem$Z("footer"), {
-          "van-safe-area-bottom": props.safeAreaInsetBottom
+          "zt-safe-area-bottom": props.safeAreaInsetBottom
         }]
       }, [renderFooterButton()]);
       const renderCalendar = () => vue.createVNode("div", {
@@ -3366,8 +3374,7 @@
       const touch = useTouch();
       const {
         children,
-        linkChildren,
-        unlinkChildren
+        linkChildren
       } = useChildren(SWIPE_KEY);
       const count = vue.computed(() => children.length);
       const size = vue.computed(() => state[props.vertical ? "height" : "width"]);
@@ -3667,7 +3674,6 @@
       vue.onMounted(initialize);
       vue.onActivated(() => initialize(state.active));
       onPopupReopen(() => {
-        unlinkChildren();
         initialize(state.active);
       });
       vue.onDeactivated(stopAutoplay);
@@ -5490,8 +5496,9 @@
         }
         currentOffset.value = offset2;
       };
+      const isReadonly = () => props.readonly || !props.options.length;
       const onClickOption = (index) => {
-        if (moving || props.readonly) {
+        if (moving || isReadonly()) {
           return;
         }
         transitionEndTrigger = null;
@@ -5516,7 +5523,7 @@
         }
       };
       const onTouchStart = (event) => {
-        if (props.readonly) {
+        if (isReadonly()) {
           return;
         }
         touch.start(event);
@@ -5531,7 +5538,7 @@
         transitionEndTrigger = null;
       };
       const onTouchMove = (event) => {
-        if (props.readonly) {
+        if (isReadonly()) {
           return;
         }
         touch.move(event);
@@ -5547,7 +5554,7 @@
         }
       };
       const onTouchEnd = () => {
-        if (props.readonly) {
+        if (isReadonly()) {
           return;
         }
         const distance = currentOffset.value - momentumOffset;
@@ -9429,9 +9436,10 @@
       rootWidth: makeRequiredProp(Number),
       rootHeight: makeRequiredProp(Number)
     },
-    emits: ["scale", "close"],
+    emits: ["scale", "close", "longPress"],
     setup(props, {
-      emit
+      emit,
+      slots
     }) {
       const state = vue.reactive({
         scale: 1,
@@ -9575,16 +9583,20 @@
         const deltaTime = Date.now() - touchStartTime;
         const TAP_TIME = 250;
         const TAP_OFFSET = 5;
-        if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET && deltaTime < TAP_TIME) {
-          if (doubleTapTimer) {
-            clearTimeout(doubleTapTimer);
-            doubleTapTimer = null;
-            toggleScale();
-          } else {
-            doubleTapTimer = setTimeout(() => {
-              emit("close");
+        if (offsetX.value < TAP_OFFSET && offsetY.value < TAP_OFFSET) {
+          if (deltaTime < TAP_TIME) {
+            if (doubleTapTimer) {
+              clearTimeout(doubleTapTimer);
               doubleTapTimer = null;
-            }, TAP_TIME);
+              toggleScale();
+            } else {
+              doubleTapTimer = setTimeout(() => {
+                emit("close");
+                doubleTapTimer = null;
+              }, TAP_TIME);
+            }
+          } else if (deltaTime > LONG_PRESS_START_TIME) {
+            emit("longPress");
           }
         }
       };
@@ -9650,7 +9662,11 @@
           "onTouchend": onTouchEnd,
           "onTouchcancel": onTouchEnd
         }, {
-          default: () => [vue.createVNode(Image$1, {
+          default: () => [slots.image ? vue.createVNode("div", {
+            "class": bem$s("image-wrap")
+          }, [slots.image({
+            src: props.src
+          })]) : vue.createVNode(Image$1, {
             "src": props.src,
             "fit": "contain",
             "class": bem$s("image", {
@@ -9689,7 +9705,7 @@
   var stdin_default$G = vue.defineComponent({
     name: name$r,
     props: imagePreviewProps,
-    emits: ["scale", "close", "closed", "change", "update:show"],
+    emits: ["scale", "close", "closed", "change", "longPress", "update:show"],
     setup(props, {
       emit,
       slots
@@ -9765,7 +9781,7 @@
         "indicatorColor": "white",
         "onChange": setActive
       }, {
-        default: () => [props.images.map((image) => vue.createVNode(stdin_default$H, {
+        default: () => [props.images.map((image, index) => vue.createVNode(stdin_default$H, {
           "src": image.url,
           "show": props.show,
           "active": state.active,
@@ -9774,8 +9790,13 @@
           "rootWidth": state.rootWidth,
           "rootHeight": state.rootHeight,
           "onScale": emitScale,
-          "onClose": emitClose
-        }, null))]
+          "onClose": emitClose,
+          "onLongPress": () => emit("longPress", {
+            index
+          })
+        }, {
+          image: slots.image
+        }))]
       });
       const renderClose = () => {
         if (props.closeable) {
@@ -10586,6 +10607,47 @@
     )}`;
     return suffix ? name2 + "." + suffix : name2;
   }
+  function adjustImgOrientation(ctx, img, orientation, width2, height2) {
+    switch (orientation) {
+      case 3:
+        ctx.rotate(180 * Math.PI / 180);
+        ctx.drawImage(img, -width2, -height2, width2, height2);
+        break;
+      case 6:
+        ctx.rotate(90 * Math.PI / 180);
+        ctx.drawImage(img, 0, -width2, height2, width2);
+        break;
+      case 8:
+        ctx.rotate(270 * Math.PI / 180);
+        ctx.drawImage(img, -height2, 0, height2, width2);
+        break;
+      case 2:
+        ctx.translate(width2, 0);
+        ctx.scale(-1, 1);
+        ctx.drawImage(img, 0, 0, width2, height2);
+        break;
+      case 4:
+        ctx.translate(width2, 0);
+        ctx.scale(-1, 1);
+        ctx.rotate(180 * Math.PI / 180);
+        ctx.drawImage(img, -width2, -height2, width2, height2);
+        break;
+      case 5:
+        ctx.translate(width2, 0);
+        ctx.scale(-1, 1);
+        ctx.rotate(90 * Math.PI / 180);
+        ctx.drawImage(img, 0, -width2, height2, width2);
+        break;
+      case 7:
+        ctx.translate(width2, 0);
+        ctx.scale(-1, 1);
+        ctx.rotate(270 * Math.PI / 180);
+        ctx.drawImage(img, -height2, 0, height2, width2);
+        break;
+      default:
+        ctx.drawImage(img, 0, 0, width2, height2);
+    }
+  }
   function file2DataURL(file) {
     return new Promise((resolve, reject) => {
       const a = new FileReader();
@@ -10614,7 +10676,7 @@
       }).catch(reject);
     });
   }
-  function image2Canvas(img, width2, height2) {
+  function image2Canvas(img, type, orientation, width2, height2) {
     const canvas = document.createElement("canvas");
     const _width = width2 || img.width;
     const _height = height2 || img.height;
@@ -10622,9 +10684,12 @@
     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"));
@@ -10650,7 +10715,74 @@
     image.src = canvas.toDataURL(type, quality);
     return Promise.resolve(image);
   }
+  function getStringFromCharCode(dataView, start2, length) {
+    let str = "";
+    let i;
+    length += start2;
+    for (i = start2; 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 offset2 = 2;
+        while (offset2 + 1 < length) {
+          if (dataView.getUint8(offset2) === 255 && dataView.getUint8(offset2 + 1) === 225) {
+            app1Start = offset2;
+            break;
+          }
+          offset2 += 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,
@@ -10668,14 +10800,18 @@
     } 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, targetWidth, targetHeight);
+      return image2Canvas(
+        img,
+        inputType,
+        orientation,
+        targetWidth,
+        targetHeight
+      ).then((canvas) => canvas2Image(canvas));
+    }
+    return image2Canvas(img, inputType, orientation, targetWidth, targetHeight);
   }
   class ResizeOptions {
     constructor(maxSideLength) {
@@ -10715,7 +10851,13 @@
     }
     return result;
   };
-  const FORMAT = {
+  var __formatNumber__ = function(number) {
+    if (number < 10) {
+      return "0" + number;
+    }
+    return number + "";
+  };
+  var DATE_FORMAT = {
     FORMAT_HM: "HH:mm",
     FORMAT_MDHM: "MM-dd HH:mm",
     FORMAT_MD_CN: "MM\u6708dd\u65E5",
@@ -10733,16 +10875,7 @@
     FORMAT_YMDHM_CN: "yyyy\u5E74MM\u6708dd\u65E5 HH\u65F6mm\u5206",
     FORMAT_YMDHMS_CN: "yyyy\u5E74MM\u6708dd\u65E5  HH\u65F6mm\u5206ss\u79D2"
   };
-  const __formatNumber__ = function(number) {
-    if (number < 10) {
-      return "0" + number;
-    }
-    return number + "";
-  };
   function createDate(dateObj) {
-    if (!isDef(dateObj)) {
-      return null;
-    }
     if (typeof dateObj === "number") {
       return new Date(dateObj);
     }
@@ -10753,47 +10886,37 @@
       }
       return new Date(dateObj);
     }
-    if (isDate(dateObj)) {
-      return dateObj;
-    }
-    return null;
+    return dateObj;
   }
-  function formatDate(dateObj, formatType = FORMAT.FORMAT_YMDHMS) {
+  function formatDate(dateObj, formatType = DATE_FORMAT.FORMAT_YMDHMS) {
     const date = createDate(dateObj);
-    if (date) {
-      date.getFullYear();
-      let formatResult = formatType.replace(
-        "yyyy",
-        __formatNumber__(date.getFullYear())
-      );
-      formatResult = formatResult.replace(
-        "yy",
-        String(date.getFullYear()).substring(2)
-      );
-      formatResult = formatResult.replace(
-        "MM",
-        __formatNumber__(date.getMonth() + 1)
-      );
-      formatResult = formatResult.replace("dd", __formatNumber__(date.getDate()));
-      formatResult = formatResult.replace(
-        "HH",
-        __formatNumber__(date.getHours())
-      );
-      formatResult = formatResult.replace(
-        "mm",
-        __formatNumber__(date.getMinutes())
-      );
-      formatResult = formatResult.replace(
-        "ss",
-        __formatNumber__(date.getSeconds())
-      );
-      formatResult = formatResult.replace(
-        "msms",
-        __formatNumber__(date.getMilliseconds())
-      );
-      return formatResult;
-    }
-    return null;
+    let formatResult = formatType.replace(
+      "yyyy",
+      __formatNumber__(date.getFullYear())
+    );
+    formatResult = formatResult.replace(
+      "yy",
+      String(date.getFullYear()).substring(2)
+    );
+    formatResult = formatResult.replace(
+      "MM",
+      __formatNumber__(date.getMonth() + 1)
+    );
+    formatResult = formatResult.replace("dd", __formatNumber__(date.getDate()));
+    formatResult = formatResult.replace("HH", __formatNumber__(date.getHours()));
+    formatResult = formatResult.replace(
+      "mm",
+      __formatNumber__(date.getMinutes())
+    );
+    formatResult = formatResult.replace(
+      "ss",
+      __formatNumber__(date.getSeconds())
+    );
+    formatResult = formatResult.replace(
+      "msms",
+      __formatNumber__(date.getMilliseconds())
+    );
+    return formatResult;
   }
   const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
   const subString = (str, startIndex, length) => {
@@ -11019,7 +11142,7 @@
         const regexResult = scanner.next(dateRegex);
         if (regexResult) {
           const matchResults = regexResult;
-          let format2 = FORMAT.FORMAT_YMD;
+          let format2 = DATE_FORMAT.FORMAT_YMD;
           if (matchResults && matchResults.length >= 2) {
             if (isValidString(matchResults[1])) {
               format2 = matchResults[1];
@@ -11034,7 +11157,7 @@
         if (watermarkContext) {
           const value = formatDate(
             watermarkContext.watermarkTime,
-            FORMAT.FORMAT_HM
+            DATE_FORMAT.FORMAT_HM
           );
           content += value;
         }
@@ -11388,7 +11511,6 @@
     }
     return true;
   }
-  const DEFAULT_IMAGE_TYPE = "image/jpeg";
   const DEFAULT_JPEG_QUALITY = 0.8;
   const MIN_JPEG_QUALITY = 0.1;
   const JPEG_QUALITY_STEP = 0.05;
@@ -11401,9 +11523,29 @@
     }
     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$1() && 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"
         })
@@ -11416,7 +11558,7 @@
           canvas,
           exportFilename,
           lastModified,
-          DEFAULT_IMAGE_TYPE,
+          fileType,
           DEFAULT_JPEG_QUALITY
         );
       });
@@ -11948,7 +12090,7 @@
         if (media.showSrc) {
           return vue.createVNode(stdin_default$1q, {
             "src": media.showSrc,
-            "fit": "fill",
+            "fit": "cover",
             "radius": "4"
           }, null);
         } else if (media.type === "video") {
@@ -12243,8 +12385,7 @@
           "size": "normal",
           "block": true,
           "style": {
-            marginRigth: "4px",
-            backgroundColor: "white"
+            marginRigth: "4px"
           },
           "onClick": onCancel
         }, {
@@ -15314,7 +15455,6 @@
   const Step = withInstall(stdin_default$b);
   const [name$5, bem$5] = createNamespace("stepper");
   const LONG_PRESS_INTERVAL = 200;
-  const LONG_PRESS_START_TIME = 600;
   const isEqual = (value1, value2) => String(value1) === String(value2);
   const stepperProps = {
     min: makeNumericProp(1),
@@ -17109,15 +17249,14 @@
         default: "img"
       }
     },
-    render(h) {
-      return h(
+    render() {
+      var _a, _b;
+      return 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() {
@@ -17214,7 +17353,7 @@
       });
     }
   };
-  const version = "3.0.3";
+  const version = "3.0.4";
   function install(app) {
     const components = [
       ActionSheet,