vant 4.2.0 → 4.3.0

package/lib/signature/Signature.js

@@ -0,0 +1,148 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  default: () => stdin_default,
+  signatureProps: () => signatureProps
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var import_utils = require("../utils");
+var import_use = require("@vant/use");
+var import_button = require("../button");
+const [name, bem, t] = (0, import_utils.createNamespace)("signature");
+const signatureProps = {
+  tips: String,
+  type: (0, import_utils.makeStringProp)("png"),
+  penColor: (0, import_utils.makeStringProp)("#000"),
+  lineWidth: (0, import_utils.makeNumberProp)(3),
+  clearButtonText: String,
+  confirmButtonText: String
+};
+const hasCanvasSupport = () => {
+  var _a;
+  const canvas = document.createElement("canvas");
+  return !!((_a = canvas.getContext) == null ? void 0 : _a.call(canvas, "2d"));
+};
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
+  props: signatureProps,
+  emits: ["submit", "clear", "start", "end", "signing"],
+  setup(props, {
+    emit
+  }) {
+    const canvasRef = (0, import_vue2.ref)();
+    const wrapRef = (0, import_vue2.ref)();
+    const state = (0, import_vue2.reactive)({
+      width: 0,
+      height: 0,
+      ctx: null
+    });
+    let canvasRect;
+    const isRenderCanvas = import_utils.inBrowser ? hasCanvasSupport() : true;
+    const touchStart = () => {
+      if (!state.ctx) {
+        return false;
+      }
+      state.ctx.beginPath();
+      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.strokeStyle = props.penColor;
+      canvasRect = (0, import_use.useRect)(canvasRef);
+      emit("start");
+    };
+    const touchMove = (event) => {
+      var _a, _b;
+      if (!state.ctx) {
+        return false;
+      }
+      (0, import_utils.preventDefault)(event);
+      const touch = event.touches[0];
+      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
+      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0);
+      state.ctx.lineCap = "round";
+      state.ctx.lineJoin = "round";
+      (_a = state.ctx) == null ? void 0 : _a.lineTo(mouseX, mouseY);
+      (_b = state.ctx) == null ? void 0 : _b.stroke();
+      emit("signing", event);
+    };
+    const touchEnd = (event) => {
+      (0, import_utils.preventDefault)(event);
+      emit("end");
+    };
+    const isCanvasEmpty = (canvas) => {
+      const empty = document.createElement("canvas");
+      empty.width = canvas.width;
+      empty.height = canvas.height;
+      return canvas.toDataURL() === empty.toDataURL();
+    };
+    const submit = () => {
+      const canvas = canvasRef.value;
+      if (!canvas) {
+        return;
+      }
+      const isEmpty = isCanvasEmpty(canvas);
+      const image = isEmpty ? "" : canvas.toDataURL(`image/${props.type}`, props.type === "jpg" ? 0.9 : null);
+      emit("submit", {
+        image,
+        canvas
+      });
+    };
+    const clear = () => {
+      if (state.ctx) {
+        state.ctx.clearRect(0, 0, state.width, state.height);
+        state.ctx.closePath();
+      }
+      emit("clear");
+    };
+    (0, import_vue2.onMounted)(() => {
+      var _a, _b, _c;
+      if (isRenderCanvas) {
+        state.ctx = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
+        state.width = ((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0;
+        state.height = ((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0;
+      }
+    });
+    return () => (0, import_vue.createVNode)("div", {
+      "class": bem()
+    }, [(0, import_vue.createVNode)("div", {
+      "class": bem("content"),
+      "ref": wrapRef
+    }, [isRenderCanvas ? (0, import_vue.createVNode)("canvas", {
+      "ref": canvasRef,
+      "width": state.width,
+      "height": state.height,
+      "onTouchstartPassive": touchStart,
+      "onTouchmove": touchMove,
+      "onTouchend": touchEnd
+    }, null) : (0, import_vue.createVNode)("p", null, [props.tips])]), (0, import_vue.createVNode)("div", {
+      "class": bem("footer")
+    }, [(0, import_vue.createVNode)(import_button.Button, {
+      "size": "small",
+      "onClick": clear
+    }, {
+      default: () => [props.clearButtonText || t("clear")]
+    }), (0, import_vue.createVNode)(import_button.Button, {
+      "type": "primary",
+      "size": "small",
+      "onClick": submit
+    }, {
+      default: () => [props.confirmButtonText || t("confirm")]
+    })])]);
+  }
+});

package/lib/signature/index.css

@@ -0,0 +1 @@
+:root{--van-signature-padding: var(--van-padding-xs);--van-signature-content-height: 200px;--van-signature-content-background: var(--van-background-2);--van-signature-content-border: 1px dotted #dadada}.van-signature{padding:var(--van-signature-padding)}.van-signature__content{display:flex;justify-content:center;align-items:center;height:var(--van-signature-content-height);background-color:var(--van-signature-content-background);border:var(--van-signature-content-border);border-radius:var(--van-radius-lg);overflow:hidden}.van-signature__footer{display:flex;justify-content:flex-end}.van-signature__footer .van-button{padding:0 var(--van-padding-md);margin-top:var(--van-padding-xs);margin-left:var(--van-padding-xs)}

package/lib/signature/index.d.ts

@@ -0,0 +1,50 @@
+export declare const Signature: import("../utils").WithInstall<import("vue").DefineComponent<{
+    tips: StringConstructor;
+    type: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    penColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lineWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    clearButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "start" | "clear" | "end" | "signing")[], "submit" | "start" | "clear" | "end" | "signing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tips: StringConstructor;
+    type: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    penColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lineWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+    clearButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>> & {
+    onSubmit?: ((...args: any[]) => any) | undefined;
+    onClear?: ((...args: any[]) => any) | undefined;
+    onStart?: ((...args: any[]) => any) | undefined;
+    onEnd?: ((...args: any[]) => any) | undefined;
+    onSigning?: ((...args: any[]) => any) | undefined;
+}, {
+    type: string;
+    lineWidth: number;
+    penColor: string;
+}>>;
+export default Signature;
+export type { SignatureProps } from './Signature';
+declare module 'vue' {
+    interface GlobalComponents {
+        Signature: typeof Signature;
+    }
+}

package/lib/signature/index.js

@@ -0,0 +1,37 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  Signature: () => Signature,
+  default: () => stdin_default
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_Signature = __toESM(require("./Signature"));
+const Signature = (0, import_utils.withInstall)(import_Signature.default);
+var stdin_default = Signature;

package/lib/signature/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/signature/style/index.js

@@ -0,0 +1,6 @@
+require("../../style/base.css");
+require("../../badge/index.css");
+require("../../icon/index.css");
+require("../../loading/index.css");
+require("../../button/index.css");
+require("../index.css");

package/lib/sticky/Sticky.js

@@ -52,8 +52,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
       // root height
       transform: 0
     });
+    const isReset = (0, import_vue2.ref)(false);
     const offset = (0, import_vue2.computed)(() => (0, import_utils.unitToPx)(props.position === "top" ? props.offsetTop : props.offsetBottom));
     const rootStyle = (0, import_vue2.computed)(() => {
+      if (isReset.value) {
+        return;
+      }
       const {
         fixed,
         height,
@@ -67,7 +71,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     });
     const stickyStyle = (0, import_vue2.computed)(() => {
-      if (!state.fixed) {
+      if (!state.fixed || isReset.value) {
         return;
       }
       const style = (0, import_utils.extend)((0, import_utils.getZIndexStyle)(props.zIndex), {
@@ -126,6 +130,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
       passive: true
     });
     (0, import_use_visibility_change.useVisibilityChange)(root, onScroll);
+    (0, import_vue2.watch)([import_utils.windowWidth, import_utils.windowHeight], () => {
+      if (!root.value || (0, import_utils.isHidden)(root) || !state.fixed) {
+        return;
+      }
+      isReset.value = true;
+      (0, import_vue2.nextTick)(() => {
+        const rootRect = (0, import_use.useRect)(root);
+        state.width = rootRect.width;
+        state.height = rootRect.height;
+        isReset.value = false;
+      });
+    });
     return () => {
       var _a;
       return (0, import_vue.createVNode)("div", {
@@ -133,7 +149,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "style": rootStyle.value
       }, [(0, import_vue.createVNode)("div", {
         "class": bem({
-          fixed: state.fixed
+          fixed: state.fixed && !isReset.value
         }),
         "style": stickyStyle.value
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);

package/lib/tab/Tab.js

@@ -30,6 +30,7 @@ var import_use_id = require("../composables/use-id");
 var import_use_expose = require("../composables/use-expose");
 var import_use_route = require("../composables/use-route");
 var import_use_tab_status = require("../composables/use-tab-status");
+var import_TabTitle = require("./TabTitle");
 var import_swipe_item = require("../swipe-item");
 const [name, bem] = (0, import_utils.createNamespace)("tab");
 const tabProps = (0, import_utils.extend)({}, import_use_route.routeProps, {
@@ -50,6 +51,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
   }) {
     const id = (0, import_use_id.useId)();
     const inited = (0, import_vue2.ref)(false);
+    const instance = (0, import_vue2.getCurrentInstance)();
     const {
       parent,
       index
@@ -79,6 +81,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return isActive;
     });
+    const renderTitle = (onClickTab) => (0, import_vue.createVNode)(import_TabTitle.TabTitle, (0, import_vue.mergeProps)({
+      "key": id,
+      "id": `${parent.id}-${index.value}`,
+      "ref": parent.setTitleRefs(index.value),
+      "style": props.titleStyle,
+      "class": props.titleClass,
+      "isActive": active.value,
+      "controls": id,
+      "scrollable": parent.scrollable.value,
+      "activeColor": parent.props.titleActiveColor,
+      "inactiveColor": parent.props.titleInactiveColor,
+      "onClick": (event) => onClickTab(instance.proxy, index.value, event)
+    }, (0, import_utils.pick)(parent.props, ["type", "color", "shrink"]), (0, import_utils.pick)(props, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
+      title: slots.title
+    });
     const hasInactiveClass = (0, import_vue2.ref)(!active.value);
     (0, import_vue2.watch)(active, (val) => {
       if (val) {
@@ -94,6 +111,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       parent.scrollIntoView();
     });
     (0, import_vue2.provide)(import_use_tab_status.TAB_STATUS_KEY, active);
+    (0, import_use_expose.useExpose)({
+      id,
+      renderTitle
+    });
     return () => {
       var _a;
       const label = `${parent.id}-${index.value}`;
@@ -128,9 +149,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       const shouldRender = inited.value || scrollspy || !lazyRender;
       const Content = shouldRender ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null;
-      (0, import_use_expose.useExpose)({
-        id
-      });
       return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
         "id": id,
         "role": "tabpanel",

package/lib/{tabs/TabsTitle.d.ts → tab/TabTitle.d.ts}

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+export declare const TabTitle: import("vue").DefineComponent<{
     id: StringConstructor;
     dot: BooleanConstructor;
     type: StringConstructor;
@@ -42,4 +42,3 @@ declare const _default: import("vue").DefineComponent<{
     scrollable: boolean;
     showZeroBadge: boolean;
 }>;
-export default _default;

package/lib/{tabs/TabsTitle.js → tab/TabTitle.js}

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var stdin_exports = {};
 __export(stdin_exports, {
-  default: () => stdin_default
+  TabTitle: () => TabTitle
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
@@ -25,7 +25,7 @@ var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_badge = require("../badge");
 const [name, bem] = (0, import_utils.createNamespace)("tab");
-var stdin_default = (0, import_vue2.defineComponent)({
+const TabTitle = (0, import_vue2.defineComponent)({
   name,
   props: {
     id: String,

package/lib/tabs/Tabs.d.ts

@@ -145,9 +145,9 @@ declare const _default: import("vue").DefineComponent<{
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
-    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
+    shrink: boolean;
     scrollspy: boolean;
     swipeThreshold: string | number;
 }>;

package/lib/tabs/Tabs.js

@@ -44,7 +44,6 @@ var import_use_expose = require("../composables/use-expose");
 var import_on_popup_reopen = require("../composables/on-popup-reopen");
 var import_use_visibility_change = require("../composables/use-visibility-change");
 var import_sticky = require("../sticky");
-var import_TabsTitle = __toESM(require("./TabsTitle"));
 var import_TabsContent = __toESM(require("./TabsContent"));
 const [name, bem] = (0, import_utils.createNamespace)("tabs");
 const tabsProps = {
@@ -260,24 +259,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
         setCurrentIndex(index);
       }
     };
-    const renderNav = () => children.map((item, index) => (0, import_vue.createVNode)(import_TabsTitle.default, (0, import_vue.mergeProps)({
-      "key": item.id,
-      "id": `${id}-${index}`,
-      "ref": setTitleRefs(index),
-      "type": props.type,
-      "color": props.color,
-      "style": item.titleStyle,
-      "class": item.titleClass,
-      "shrink": props.shrink,
-      "isActive": index === state.currentIndex,
-      "controls": item.id,
-      "scrollable": scrollable.value,
-      "activeColor": props.titleActiveColor,
-      "inactiveColor": props.titleInactiveColor,
-      "onClick": (event) => onClickTab(item, index, event)
-    }, (0, import_utils.pick)(item, ["dot", "badge", "title", "disabled", "showZeroBadge"])), {
-      title: item.$slots.title
-    }));
     const renderLine = () => {
       if (props.type === "line" && children.length) {
         return (0, import_vue.createVNode)("div", {
@@ -307,7 +288,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]), (_c = slots["nav-bottom"]) == null ? void 0 : _c.call(slots)];
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), children.map((item) => item.renderTitle(onClickTab)), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]), (_c = slots["nav-bottom"]) == null ? void 0 : _c.call(slots)];
       if (sticky) {
         return (0, import_vue.createVNode)("div", {
           "ref": wrapRef
@@ -315,7 +296,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return Header;
     };
-    (0, import_vue2.watch)([() => props.color, import_utils.windowWidth], setLine);
+    const resize = () => {
+      setLine();
+      (0, import_vue2.nextTick)(() => {
+        var _a, _b;
+        scrollIntoView(true);
+        (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
+      });
+    };
+    (0, import_vue2.watch)(() => [props.color, props.duration, props.lineWidth, props.lineHeight], setLine);
+    (0, import_vue2.watch)(import_utils.windowWidth, resize);
     (0, import_vue2.watch)(() => props.active, (value) => {
       if (value !== currentName.value) {
         setCurrentIndexByName(value);
@@ -341,13 +331,6 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
     };
     const onRendered = (name2, title) => emit("rendered", name2, title);
-    const resize = () => {
-      setLine();
-      (0, import_vue2.nextTick)(() => {
-        var _a, _b;
-        return (_b = (_a = contentRef.value) == null ? void 0 : _a.swipeRef.value) == null ? void 0 : _b.resize();
-      });
-    };
     (0, import_use_expose.useExpose)({
       resize,
       scrollTo
@@ -364,8 +347,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       id,
       props,
       setLine,
+      scrollable,
       onRendered,
       currentName,
+      setTitleRefs,
       scrollIntoView
     });
     return () => (0, import_vue.createVNode)("div", {

package/lib/tabs/index.d.ts

@@ -98,9 +98,9 @@ export declare const Tabs: import("../utils").WithInstall<import("vue").DefineCo
     duration: string | number;
     lazyRender: boolean;
     offsetTop: string | number;
-    shrink: boolean;
     animated: boolean;
     swipeable: boolean;
+    shrink: boolean;
     scrollspy: boolean;
     swipeThreshold: string | number;
 }>>;

package/lib/tabs/style/index.js

@@ -1,5 +1,4 @@
 require("../../style/base.css");
-require("../../badge/index.css");
 require("../../sticky/index.css");
 require("../../swipe/index.css");
 require("../index.css");

package/lib/tabs/types.d.ts

@@ -12,9 +12,11 @@ export type TabsProvide = {
     id: string;
     props: TabsProps;
     setLine: () => void;
+    scrollable: ComputedRef<boolean>;
     onRendered: (name: Numeric, title?: string) => void;
-    scrollIntoView: (immediate?: boolean) => void;
     currentName: ComputedRef<Numeric | undefined>;
+    setTitleRefs: (index: number) => (el: unknown) => void;
+    scrollIntoView: (immediate?: boolean) => void;
 };
 export type TabsExpose = {
     resize: () => void;