vant 4.0.0-alpha.4 → 4.0.0-rc.0

package/lib/notify/index.d.ts

@@ -1,6 +1,95 @@
-import { Notify } from './function-call';
+export declare const Notify: import("../utils").WithInstall<import("vue").DefineComponent<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    type: {
+        type: import("vue").PropType<import("./types").NotifyType>;
+        default: import("./types").NotifyType;
+    };
+    color: StringConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    position: {
+        type: import("vue").PropType<import("./types").NotifyPosition>;
+        default: import("./types").NotifyPosition;
+    };
+    className: import("vue").PropType<unknown>;
+    background: StringConstructor;
+    lockScroll: BooleanConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:show"[], "update:show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    show: BooleanConstructor;
+    zIndex: (NumberConstructor | StringConstructor)[];
+    overlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    duration: (NumberConstructor | StringConstructor)[];
+    teleport: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
+    lockScroll: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    lazyRender: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    beforeClose: import("vue").PropType<import("../utils").Interceptor>;
+    overlayStyle: import("vue").PropType<import("vue").CSSProperties>;
+    overlayClass: import("vue").PropType<unknown>;
+    transitionAppear: BooleanConstructor;
+    closeOnClickOverlay: {
+        type: BooleanConstructor;
+        default: true;
+    };
+} & {
+    type: {
+        type: import("vue").PropType<import("./types").NotifyType>;
+        default: import("./types").NotifyType;
+    };
+    color: StringConstructor;
+    message: (NumberConstructor | StringConstructor)[];
+    position: {
+        type: import("vue").PropType<import("./types").NotifyPosition>;
+        default: import("./types").NotifyPosition;
+    };
+    className: import("vue").PropType<unknown>;
+    background: StringConstructor;
+    lockScroll: BooleanConstructor;
+}>> & {
+    "onUpdate:show"?: ((...args: any[]) => any) | undefined;
+}, {
+    type: import("./types").NotifyType;
+    position: import("./types").NotifyPosition;
+    overlay: boolean;
+    show: boolean;
+    lockScroll: boolean;
+    lazyRender: boolean;
+    transitionAppear: boolean;
+    closeOnClickOverlay: boolean;
+}>>;
 export default Notify;
-export { Notify };
+export { showNotify, closeNotify, setNotifyDefaultOptions, resetNotifyDefaultOptions, } from './function-call';
 export type { NotifyProps } from './Notify';
 export type { NotifyType, NotifyOptions } from './types';
 declare module 'vue' {

package/lib/notify/index.js

@@ -1,6 +1,8 @@
+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)
@@ -14,12 +16,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {
-  Notify: () => import_function_call.Notify,
-  default: () => stdin_default
+  Notify: () => Notify,
+  closeNotify: () => import_function_call.closeNotify,
+  default: () => stdin_default,
+  resetNotifyDefaultOptions: () => import_function_call.resetNotifyDefaultOptions,
+  setNotifyDefaultOptions: () => import_function_call.setNotifyDefaultOptions,
+  showNotify: () => import_function_call.showNotify
 });
 module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+var import_Notify = __toESM(require("./Notify"));
 var import_function_call = require("./function-call");
-var stdin_default = import_function_call.Notify;
+const Notify = (0, import_utils.withInstall)(import_Notify.default);
+var stdin_default = Notify;

package/lib/notify/types.d.ts

@@ -1,4 +1,3 @@
-import { Notify } from './function-call';
 import type { Numeric } from '../utils';
 export declare type NotifyMessage = Numeric;
 export declare type NotifyType = 'primary' | 'success' | 'danger' | 'warning';
@@ -16,8 +15,3 @@ export declare type NotifyOptions = {
     onClose?: () => void;
     onOpened?: () => void;
 };
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $notify: typeof Notify;
-    }
-}

package/lib/number-keyboard/NumberKeyboard.d.ts

@@ -92,7 +92,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | string[]>;
         default: string;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "blur" | "update:modelValue" | "hide" | "show" | "close" | "delete")[], "input" | "blur" | "update:modelValue" | "hide" | "show" | "close" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "blur" | "update:modelValue" | "close" | "hide" | "show" | "delete")[], "input" | "blur" | "update:modelValue" | "close" | "hide" | "show" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     show: BooleanConstructor;
     title: StringConstructor;
     theme: {

package/lib/number-keyboard/NumberKeyboard.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {
@@ -229,9 +232,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
             unfit: !props.safeAreaInsetBottom,
             "with-title": !!Title
           }),
-          "onTouchstart": import_utils.stopPropagation,
           "onAnimationend": onAnimationEnd,
-          "onWebkitAnimationEnd": onAnimationEnd
+          "onTouchstartPassive": import_utils.stopPropagation
         }, [Title, (0, import_vue.createVNode)("div", {
           "class": bem("body")
         }, [(0, import_vue.createVNode)("div", {

package/lib/number-keyboard/NumberKeyboardKey.js

@@ -96,8 +96,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       "class": bem("wrapper", {
         wider: props.wider
       }),
-      "onTouchstart": onTouchStart,
-      "onTouchmove": onTouchMove,
+      "onTouchstartPassive": onTouchStart,
+      "onTouchmovePassive": onTouchMove,
       "onTouchend": onTouchEnd,
       "onTouchcancel": onTouchEnd
     }, [(0, import_vue.createVNode)("div", {

package/lib/number-keyboard/index.d.ts

@@ -43,7 +43,7 @@ export declare const NumberKeyboard: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<string | string[]>;
         default: string;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "blur" | "update:modelValue" | "hide" | "show" | "close" | "delete")[], "input" | "blur" | "update:modelValue" | "hide" | "show" | "close" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "blur" | "update:modelValue" | "close" | "hide" | "show" | "delete")[], "input" | "blur" | "update:modelValue" | "close" | "hide" | "show" | "delete", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     title: StringConstructor;
     theme: {

package/lib/number-keyboard/index.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {

package/lib/overlay/Overlay.d.ts

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

package/lib/overlay/Overlay.js

@@ -23,6 +23,7 @@ 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_use_lazy_render = require("../composables/use-lazy-render");
 const [name, bem] = (0, import_utils.createNamespace)("overlay");
 const overlayProps = {
@@ -40,9 +41,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
   setup(props, {
     slots
   }) {
+    const root = (0, import_vue2.ref)();
     const lazyRender = (0, import_use_lazy_render.useLazyRender)(() => props.show || !props.lazyRender);
-    const preventTouchMove = (event) => {
-      (0, import_utils.preventDefault)(event, true);
+    const onTouchMove = (event) => {
+      if (props.lockScroll) {
+        (0, import_utils.preventDefault)(event, true);
+      }
     };
     const renderOverlay = lazyRender(() => {
       var _a;
@@ -51,11 +55,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         style.animationDuration = `${props.duration}s`;
       }
       return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
+        "ref": root,
         "style": style,
-        "class": [bem(), props.className],
-        "onTouchmove": props.lockScroll ? preventTouchMove : import_utils.noop
+        "class": [bem(), props.className]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[import_vue.vShow, props.show]]);
     });
+    (0, import_use.useEventListener)("touchmove", onTouchMove, {
+      target: root
+    });
     return () => (0, import_vue.createVNode)(import_vue2.Transition, {
       "name": "van-fade",
       "appear": true

package/lib/overlay/index.d.ts

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

package/lib/overlay/index.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {

package/lib/pagination/index.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {

package/lib/password-input/PasswordInput.js

@@ -88,7 +88,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": [bem("security"), {
           [import_utils.BORDER_SURROUND]: !props.gutter
         }],
-        "onTouchstart": onTouchStart
+        "onTouchstartPassive": onTouchStart
       }, [renderPoints()]), info && (0, import_vue.createVNode)("div", {
         "class": bem(props.errorInfo ? "error-info" : "info")
       }, [info])]);

package/lib/password-input/index.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {

package/lib/picker/Picker.d.ts

@@ -2,7 +2,6 @@ import { type PropType, type ExtractPropTypes } from 'vue';
 import { type Numeric } from '../utils';
 import type { PickerColumn, PickerOption, PickerFieldNames, PickerToolbarPosition } from './types';
 export declare const pickerSharedProps: {
-    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -22,11 +21,12 @@ export declare const pickerSharedProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 };
 declare const pickerProps: {
-    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -46,6 +46,8 @@ declare const pickerProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -65,7 +67,6 @@ declare const pickerProps: {
 };
 export declare type PickerProps = ExtractPropTypes<typeof pickerProps>;
 declare const _default: import("vue").DefineComponent<{
-    title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -85,6 +86,8 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -101,8 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         default: PickerToolbarPosition;
     };
     columnsFieldNames: PropType<PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "confirm")[], "update:modelValue" | "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    title: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "cancel" | "clickOption" | "confirm")[], "update:modelValue" | "change" | "cancel" | "clickOption" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
@@ -122,6 +124,8 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
@@ -142,6 +146,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Numeric[];

package/lib/picker/Picker.js

@@ -16,7 +16,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {
@@ -32,19 +35,17 @@ var import_use = require("@vant/use");
 var import_use_expose = require("../composables/use-expose");
 var import_loading = require("../loading");
 var import_PickerColumn = __toESM(require("./PickerColumn"));
-const [name, bem, t] = (0, import_utils.createNamespace)("picker");
-const pickerSharedProps = {
-  title: String,
+var import_PickerToolbar = __toESM(require("./PickerToolbar"));
+var import_PickerGroup = require("../picker-group/PickerGroup");
+const pickerSharedProps = (0, import_utils.extend)({
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
   optionHeight: (0, import_utils.makeNumericProp)(44),
   showToolbar: import_utils.truthProp,
   swipeDuration: (0, import_utils.makeNumericProp)(1e3),
-  visibleOptionNum: (0, import_utils.makeNumericProp)(6),
-  cancelButtonText: String,
-  confirmButtonText: String
-};
+  visibleOptionNum: (0, import_utils.makeNumericProp)(6)
+}, import_PickerToolbar.pickerToolbarProps);
 const pickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
   columns: (0, import_utils.makeArrayProp)(),
   modelValue: (0, import_utils.makeArrayProp)(),
@@ -52,14 +53,18 @@ const pickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
   columnsFieldNames: Object
 });
 var stdin_default = (0, import_vue2.defineComponent)({
-  name,
+  name: import_utils2.name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  emits: ["confirm", "cancel", "change", "clickOption", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
-    const selectedValues = (0, import_vue2.ref)(props.modelValue);
+    const columnsRef = (0, import_vue2.ref)();
+    const selectedValues = (0, import_vue2.ref)(props.modelValue.slice(0));
+    const {
+      parent
+    } = (0, import_use.useParent)(import_PickerGroup.PICKER_GROUP_KEY);
     const {
       children,
       linkChildren
@@ -90,6 +95,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
         selectedValues.value = newValues;
       }
     };
+    const getEventParams = () => ({
+      selectedValues: selectedValues.value.slice(0),
+      selectedOptions: selectedOptions.value
+    });
     const onChange = (value, columnIndex) => {
       setValue(columnIndex, value);
       if (columnsType.value === "cascade") {
@@ -100,56 +109,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
           }
         });
       }
-      emit("change", {
-        columnIndex,
-        selectedValues: selectedValues.value,
-        selectedOptions: selectedOptions.value
-      });
+      emit("change", (0, import_utils.extend)({
+        columnIndex
+      }, getEventParams()));
     };
+    const onClickOption = (currentOption, columnIndex) => emit("clickOption", (0, import_utils.extend)({
+      columnIndex,
+      currentOption
+    }, getEventParams()));
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
-      emit("confirm", {
-        selectedValues: selectedValues.value,
-        selectedOptions: selectedOptions.value
-      });
-    };
-    const cancel = () => emit("cancel", {
-      selectedValues: selectedValues.value,
-      selectedOptions: selectedOptions.value
-    });
-    const renderTitle = () => {
-      if (slots.title) {
-        return slots.title();
-      }
-      if (props.title) {
-        return (0, import_vue.createVNode)("div", {
-          "class": [bem("title"), "van-ellipsis"]
-        }, [props.title]);
-      }
-    };
-    const renderCancel = () => {
-      const text = props.cancelButtonText || t("cancel");
-      return (0, import_vue.createVNode)("button", {
-        "type": "button",
-        "class": [bem("cancel"), import_utils.HAPTICS_FEEDBACK],
-        "onClick": cancel
-      }, [slots.cancel ? slots.cancel() : text]);
-    };
-    const renderConfirm = () => {
-      const text = props.confirmButtonText || t("confirm");
-      return (0, import_vue.createVNode)("button", {
-        "type": "button",
-        "class": [bem("confirm"), import_utils.HAPTICS_FEEDBACK],
-        "onClick": confirm
-      }, [slots.confirm ? slots.confirm() : text]);
-    };
-    const renderToolbar = () => {
-      if (props.showToolbar) {
-        return (0, import_vue.createVNode)("div", {
-          "class": bem("toolbar")
-        }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
-      }
+      const params = getEventParams();
+      emit("confirm", params);
+      return params;
     };
+    const cancel = () => emit("cancel", getEventParams());
     const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => (0, import_vue.createVNode)(import_PickerColumn.default, {
       "value": selectedValues.value[columnIndex],
       "fields": fields.value,
@@ -159,7 +133,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       "optionHeight": optionHeight.value,
       "swipeDuration": props.swipeDuration,
       "visibleOptionNum": props.visibleOptionNum,
-      "onChange": (value) => onChange(value, columnIndex)
+      "onChange": (value) => onChange(value, columnIndex),
+      "onClickOption": (option) => onClickOption(option, columnIndex)
     }, {
       option: slots.option
     }));
@@ -172,10 +147,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
           backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`
         };
         return [(0, import_vue.createVNode)("div", {
-          "class": bem("mask"),
+          "class": (0, import_utils2.bem)("mask"),
           "style": maskStyle
         }, null), (0, import_vue.createVNode)("div", {
-          "class": [import_utils.BORDER_UNSET_TOP_BOTTOM, bem("frame")],
+          "class": [import_utils.BORDER_UNSET_TOP_BOTTOM, (0, import_utils2.bem)("frame")],
           "style": frameStyle
         }, null)];
       }
@@ -186,11 +161,19 @@ var stdin_default = (0, import_vue2.defineComponent)({
         height: `${wrapHeight}px`
       };
       return (0, import_vue.createVNode)("div", {
-        "class": bem("columns"),
-        "style": columnsStyle,
-        "onTouchmove": import_utils.preventDefault
+        "ref": columnsRef,
+        "class": (0, import_utils2.bem)("columns"),
+        "style": columnsStyle
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
+    const renderToolbar = () => {
+      if (props.showToolbar && !parent) {
+        return (0, import_vue.createVNode)(import_PickerToolbar.default, (0, import_vue.mergeProps)((0, import_utils.pick)(props, import_PickerToolbar.pickerToolbarPropKeys), {
+          "onConfirm": confirm,
+          "onCancel": cancel
+        }), (0, import_utils.pick)(slots, import_PickerToolbar.pickerToolbarSlots));
+      }
+    };
     (0, import_vue2.watch)(currentColumns, (columns) => {
       columns.forEach((options, index) => {
         if (options.length && !(0, import_utils2.isOptionExist)(options, selectedValues.value[index], fields.value)) {
@@ -202,18 +185,21 @@ var stdin_default = (0, import_vue2.defineComponent)({
     });
     (0, import_vue2.watch)(() => props.modelValue, (newValues) => {
       if (!(0, import_utils.isSameValue)(newValues, selectedValues.value)) {
-        selectedValues.value = newValues;
+        selectedValues.value = newValues.slice(0);
       }
     }, {
       deep: true
     });
     (0, import_vue2.watch)(selectedValues, (newValues) => {
       if (!(0, import_utils.isSameValue)(newValues, props.modelValue)) {
-        emit("update:modelValue", newValues);
+        emit("update:modelValue", newValues.slice(0));
       }
     }, {
       immediate: true
     });
+    (0, import_use.useEventListener)("touchmove", import_utils.preventDefault, {
+      target: columnsRef
+    });
     const getSelectedOptions = () => selectedOptions.value;
     (0, import_use_expose.useExpose)({
       confirm,
@@ -222,9 +208,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     return () => {
       var _a, _b;
       return (0, import_vue.createVNode)("div", {
-        "class": bem()
+        "class": (0, import_utils2.bem)()
       }, [props.toolbarPosition === "top" ? renderToolbar() : null, props.loading ? (0, import_vue.createVNode)(import_loading.Loading, {
-        "class": bem("loading")
+        "class": (0, import_utils2.bem)("loading")
       }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), props.toolbarPosition === "bottom" ? renderToolbar() : null]);
     };
   }

package/lib/picker/PickerColumn.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption")[], "change" | "clickOption", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: (NumberConstructor | StringConstructor)[];
     fields: {
         type: PropType<Required<PickerFieldNames>>;
@@ -51,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
 }, {
     readonly: boolean;
     allowHtml: boolean;