zartui 3.0.3 → 3.0.4

package/lib/zartui.es.js

@@ -367,6 +367,7 @@ const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
 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,
@@ -814,6 +815,8 @@ const popupProps$2 = extend({}, popupSharedProps, {
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean,
   sliderContentHeight: makeNumberProp(60),
+  minDragHeight: makeStringProp("40px"),
+  maxDragHeight: makeStringProp("85vh"),
   slideable: Boolean
 });
 const [name$16, bem$13] = createNamespace("popup");
@@ -831,15 +834,13 @@ var stdin_default$1x = 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 = {
@@ -886,13 +887,14 @@ var stdin_default$1x = defineComponent({
         event.preventDefault();
       }
       const h2 = 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 < h2 * 0.15) {
+        if (positionY === 0 || positionY < h2 - unitToPx(props.maxDragHeight)) {
           return;
         }
-        touchHeight.value = positionY.value - touchAreaHeight.value > h2 - touchAreaHeight.value ? h2 - touchAreaHeight.value + touchPoint.value : positionY.value;
-        contentStyle.value = `height:${h2 - touchHeight.value - touchAreaHeight.value + touchPoint.value}px;`;
+        touchHeight = positionY - touchAreaHeight > h2 - touchAreaHeight ? h2 - touchAreaHeight + touchPoint : positionY;
+        contentStyle.value = `height:${h2 - touchHeight - touchAreaHeight + touchPoint}px;`;
       }, 10);
     };
     const startMove = (event) => {
@@ -900,7 +902,7 @@ var stdin_default$1x = 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);
@@ -977,6 +979,7 @@ var stdin_default$1x = defineComponent({
         "onKeydown": onKeydown
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), renderCloseIcon(), createVNode("div", {
         "class": bem$13("slider-title"),
+        "style": `height:${touchAreaHeight}px;`,
         "ref": root
       }, [createVNode("div", {
         "class": bem$13("slider-bar")
@@ -1472,7 +1475,8 @@ const avatarProps = {
   size: makeStringProp("medium"),
   shape: makeStringProp("square"),
   text: String,
-  textBgColor: String
+  textBgColor: String,
+  border: Boolean
 };
 var stdin_default$1p = defineComponent({
   name: name$12,
@@ -1485,7 +1489,7 @@ var stdin_default$1p = defineComponent({
         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 "";
@@ -1506,7 +1510,9 @@ var stdin_default$1p = defineComponent({
       }
     });
     const renderText = () => createVNode("div", {
-      "class": bem$$("img", classArr.value),
+      "class": bem$$("img", [classArr.value, {
+        border: props.border
+      }]),
       "style": style.value
     }, [headText.value]);
     return () => {
@@ -1515,7 +1521,9 @@ var stdin_default$1p = defineComponent({
       }
       return 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
       }, {
@@ -2734,7 +2742,7 @@ var stdin_default$1i = defineComponent({
           "onClick": onCancel,
           "style": {
             marginRight: "4px",
-            backgroundColor: "white"
+            backgroundColor: "transparent"
           }
         }, {
           default: () => [text || "\u53D6\u6D88"]
@@ -2755,7 +2763,7 @@ var stdin_default$1i = defineComponent({
     };
     const renderFooter = () => createVNode("div", {
       "class": [bem$Z("footer"), {
-        "van-safe-area-bottom": props.safeAreaInsetBottom
+        "zt-safe-area-bottom": props.safeAreaInsetBottom
       }]
     }, [renderFooterButton()]);
     const renderCalendar = () => createVNode("div", {
@@ -3108,8 +3116,7 @@ var stdin_default$1f = defineComponent({
     const touch = useTouch();
     const {
       children,
-      linkChildren,
-      unlinkChildren
+      linkChildren
     } = useChildren(SWIPE_KEY);
     const count = computed(() => children.length);
     const size = computed(() => state[props.vertical ? "height" : "width"]);
@@ -3409,7 +3416,6 @@ var stdin_default$1f = defineComponent({
     onMounted(initialize);
     onActivated(() => initialize(state.active));
     onPopupReopen(() => {
-      unlinkChildren();
       initialize(state.active);
     });
     onDeactivated(stopAutoplay);
@@ -5255,8 +5261,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;
@@ -5281,7 +5288,7 @@ var stdin_default$$ = defineComponent({
       }
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.start(event);
@@ -5296,7 +5303,7 @@ var stdin_default$$ = defineComponent({
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.move(event);
@@ -5312,7 +5319,7 @@ var stdin_default$$ = defineComponent({
       }
     };
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       const distance = currentOffset.value - momentumOffset;
@@ -9200,9 +9207,10 @@ var stdin_default$H = defineComponent({
     rootWidth: makeRequiredProp(Number),
     rootHeight: makeRequiredProp(Number)
   },
-  emits: ["scale", "close"],
+  emits: ["scale", "close", "longPress"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const state = reactive({
       scale: 1,
@@ -9346,16 +9354,20 @@ var stdin_default$H = defineComponent({
       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");
         }
       }
     };
@@ -9421,7 +9433,11 @@ var stdin_default$H = defineComponent({
         "onTouchend": onTouchEnd,
         "onTouchcancel": onTouchEnd
       }, {
-        default: () => [createVNode(Image$1, {
+        default: () => [slots.image ? createVNode("div", {
+          "class": bem$s("image-wrap")
+        }, [slots.image({
+          src: props.src
+        })]) : createVNode(Image$1, {
           "src": props.src,
           "fit": "contain",
           "class": bem$s("image", {
@@ -9460,7 +9476,7 @@ const imagePreviewProps = {
 var stdin_default$G = 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
@@ -9536,7 +9552,7 @@ var stdin_default$G = defineComponent({
       "indicatorColor": "white",
       "onChange": setActive
     }, {
-      default: () => [props.images.map((image) => createVNode(stdin_default$H, {
+      default: () => [props.images.map((image, index) => createVNode(stdin_default$H, {
         "src": image.url,
         "show": props.show,
         "active": state.active,
@@ -9545,8 +9561,13 @@ var stdin_default$G = defineComponent({
         "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) {
@@ -10357,6 +10378,47 @@ function getUniqueFileName(file, suffix = "") {
   )}`;
   return suffix ? name2 + "." + suffix : name2;
 }
+function adjustImgOrientation(ctx, img, orientation, width, height) {
+  switch (orientation) {
+    case 3:
+      ctx.rotate(180 * Math.PI / 180);
+      ctx.drawImage(img, -width, -height, width, height);
+      break;
+    case 6:
+      ctx.rotate(90 * Math.PI / 180);
+      ctx.drawImage(img, 0, -width, height, width);
+      break;
+    case 8:
+      ctx.rotate(270 * Math.PI / 180);
+      ctx.drawImage(img, -height, 0, height, width);
+      break;
+    case 2:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.drawImage(img, 0, 0, width, height);
+      break;
+    case 4:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate(180 * Math.PI / 180);
+      ctx.drawImage(img, -width, -height, width, height);
+      break;
+    case 5:
+      ctx.translate(width, 0);
+      ctx.scale(-1, 1);
+      ctx.rotate(90 * Math.PI / 180);
+      ctx.drawImage(img, 0, -width, height, width);
+      break;
+    case 7:
+      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();
@@ -10385,7 +10447,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;
@@ -10393,9 +10455,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"));
@@ -10421,7 +10486,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,
@@ -10439,14 +10571,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, targetWidth, targetHeight);
+    return image2Canvas(
+      img,
+      inputType,
+      orientation,
+      targetWidth,
+      targetHeight
+    ).then((canvas) => canvas2Image(canvas));
+  }
+  return image2Canvas(img, inputType, orientation, targetWidth, targetHeight);
 }
 class ResizeOptions {
   constructor(maxSideLength) {
@@ -10486,7 +10622,13 @@ const parseDecimal = (obj, defaultValue) => {
   }
   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",
@@ -10504,16 +10646,7 @@ const FORMAT = {
   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);
   }
@@ -10524,47 +10657,37 @@ function createDate(dateObj) {
     }
     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) => {
@@ -10790,7 +10913,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];
@@ -10805,7 +10928,7 @@ function buildContent(contentConfigString, watermarkContext) {
       if (watermarkContext) {
         const value = formatDate(
           watermarkContext.watermarkTime,
-          FORMAT.FORMAT_HM
+          DATE_FORMAT.FORMAT_HM
         );
         content += value;
       }
@@ -11159,7 +11282,6 @@ function checkWatermarkConfigSupported(watermarkConfigString) {
   }
   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;
@@ -11172,9 +11294,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$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"
       })
@@ -11187,7 +11329,7 @@ class ImageProcessor {
         canvas,
         exportFilename,
         lastModified,
-        DEFAULT_IMAGE_TYPE,
+        fileType,
         DEFAULT_JPEG_QUALITY
       );
     });
@@ -11719,7 +11861,7 @@ var stdin_default$t = defineComponent({
       if (media.showSrc) {
         return createVNode(stdin_default$1q, {
           "src": media.showSrc,
-          "fit": "fill",
+          "fit": "cover",
           "radius": "4"
         }, null);
       } else if (media.type === "video") {
@@ -12014,8 +12156,7 @@ var stdin_default$r = defineComponent({
         "size": "normal",
         "block": true,
         "style": {
-          marginRigth: "4px",
-          backgroundColor: "white"
+          marginRigth: "4px"
         },
         "onClick": onCancel
       }, {
@@ -14179,7 +14320,6 @@ var stdin_default$b = defineComponent({
 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),
@@ -15989,15 +16129,14 @@ var stdin_default$1 = (lazyManager) => ({
       default: "img"
     }
   },
-  render(h2) {
-    return h2(
+  render() {
+    var _a, _b;
+    return 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() {
@@ -16099,7 +16238,7 @@ const Lazyload = {
     });
   }
 };
-const version = "3.0.3";
+const version = "3.0.4";
 function install(app) {
   const components = [
     ActionSheet,