vant 4.0.0-beta.0 → 4.0.0-rc.1

package/es/number-keyboard/NumberKeyboard.mjs

@@ -204,9 +204,8 @@ var stdin_default = defineComponent({
             unfit: !props.safeAreaInsetBottom,
             "with-title": !!Title
           }),
-          "onTouchstart": stopPropagation,
           "onAnimationend": onAnimationEnd,
-          "onWebkitAnimationEnd": onAnimationEnd
+          "onTouchstartPassive": stopPropagation
         }, [Title, _createVNode("div", {
           "class": bem("body")
         }, [_createVNode("div", {
@@ -225,5 +224,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  numberKeyboardProps
 };

package/es/number-keyboard/NumberKeyboardKey.mjs

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

package/es/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: {
@@ -111,6 +111,7 @@ export declare const NumberKeyboard: import("../utils").WithInstall<import("vue"
     extraKey: string | string[];
 }>>;
 export default NumberKeyboard;
+export { numberKeyboardProps } from './NumberKeyboard';
 export type { NumberKeyboardProps, NumberKeyboardTheme, } from './NumberKeyboard';
 declare module 'vue' {
     interface GlobalComponents {

package/es/number-keyboard/index.mjs

@@ -2,7 +2,9 @@ import { withInstall } from "../utils/index.mjs";
 import _NumberKeyboard from "./NumberKeyboard.mjs";
 const NumberKeyboard = withInstall(_NumberKeyboard);
 var stdin_default = NumberKeyboard;
+import { numberKeyboardProps } from "./NumberKeyboard.mjs";
 export {
   NumberKeyboard,
-  stdin_default as default
+  stdin_default as default,
+  numberKeyboardProps
 };

package/es/overlay/Overlay.d.ts

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

package/es/overlay/Overlay.mjs

@@ -1,6 +1,7 @@
 import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
-import { Transition, defineComponent } from "vue";
-import { noop, isDef, extend, truthProp, numericProp, unknownProp, preventDefault, createNamespace, getZIndexStyle } from "../utils/index.mjs";
+import { ref, Transition, defineComponent } from "vue";
+import { isDef, extend, truthProp, numericProp, unknownProp, preventDefault, createNamespace, getZIndexStyle } from "../utils/index.mjs";
+import { useEventListener } from "@vant/use";
 import { useLazyRender } from "../composables/use-lazy-render.mjs";
 const [name, bem] = createNamespace("overlay");
 const overlayProps = {
@@ -18,9 +19,12 @@ var stdin_default = defineComponent({
   setup(props, {
     slots
   }) {
+    const root = ref();
     const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
-    const preventTouchMove = (event) => {
-      preventDefault(event, true);
+    const onTouchMove = (event) => {
+      if (props.lockScroll) {
+        preventDefault(event, true);
+      }
     };
     const renderOverlay = lazyRender(() => {
       var _a;
@@ -29,11 +33,14 @@ var stdin_default = defineComponent({
         style.animationDuration = `${props.duration}s`;
       }
       return _withDirectives(_createVNode("div", {
+        "ref": root,
         "style": style,
-        "class": [bem(), props.className],
-        "onTouchmove": props.lockScroll ? preventTouchMove : noop
+        "class": [bem(), props.className]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[_vShow, props.show]]);
     });
+    useEventListener("touchmove", onTouchMove, {
+      target: root
+    });
     return () => _createVNode(Transition, {
       "name": "van-fade",
       "appear": true
@@ -43,5 +50,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  overlayProps
 };

package/es/overlay/index.d.ts

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

package/es/overlay/index.mjs

@@ -2,7 +2,9 @@ import { withInstall } from "../utils/index.mjs";
 import _Overlay from "./Overlay.mjs";
 const Overlay = withInstall(_Overlay);
 var stdin_default = Overlay;
+import { overlayProps } from "./Overlay.mjs";
 export {
   Overlay,
-  stdin_default as default
+  stdin_default as default,
+  overlayProps
 };

package/es/pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { type ExtractPropTypes } from 'vue';
 export declare type PaginationMode = 'simple' | 'multi';
-declare const paginationProps: {
+export declare const paginationProps: {
     mode: {
         type: import("vue").PropType<PaginationMode>;
         default: PaginationMode;

package/es/pagination/Pagination.mjs

@@ -140,5 +140,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  paginationProps
 };

package/es/pagination/index.d.ts

@@ -67,6 +67,7 @@ export declare const Pagination: import("../utils").WithInstall<import("vue").De
     forceEllipses: boolean;
 }>>;
 export default Pagination;
+export { paginationProps } from './Pagination';
 export type { PaginationMode, PaginationProps } from './Pagination';
 declare module 'vue' {
     interface GlobalComponents {

package/es/pagination/index.mjs

@@ -2,7 +2,9 @@ import { withInstall } from "../utils/index.mjs";
 import _Pagination from "./Pagination.mjs";
 const Pagination = withInstall(_Pagination);
 var stdin_default = Pagination;
+import { paginationProps } from "./Pagination.mjs";
 export {
   Pagination,
-  stdin_default as default
+  stdin_default as default,
+  paginationProps
 };

package/es/password-input/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import { type ExtractPropTypes } from 'vue';
-declare const passwordInputProps: {
+export declare const passwordInputProps: {
     info: StringConstructor;
     mask: {
         type: BooleanConstructor;

package/es/password-input/PasswordInput.mjs

@@ -66,7 +66,7 @@ var stdin_default = defineComponent({
         "class": [bem("security"), {
           [BORDER_SURROUND]: !props.gutter
         }],
-        "onTouchstart": onTouchStart
+        "onTouchstartPassive": onTouchStart
       }, [renderPoints()]), info && _createVNode("div", {
         "class": bem(props.errorInfo ? "error-info" : "info")
       }, [info])]);
@@ -74,5 +74,6 @@ var stdin_default = defineComponent({
   }
 });
 export {
-  stdin_default as default
+  stdin_default as default,
+  passwordInputProps
 };

package/es/password-input/index.d.ts

@@ -41,6 +41,7 @@ export declare const PasswordInput: import("../utils").WithInstall<import("vue")
     focused: boolean;
 }>>;
 export default PasswordInput;
+export { passwordInputProps } from './PasswordInput';
 export type { PasswordInputProps } from './PasswordInput';
 declare module 'vue' {
     interface GlobalComponents {

package/es/password-input/index.mjs

@@ -2,7 +2,9 @@ import { withInstall } from "../utils/index.mjs";
 import _PasswordInput from "./PasswordInput.mjs";
 const PasswordInput = withInstall(_PasswordInput);
 var stdin_default = PasswordInput;
+import { passwordInputProps } from "./PasswordInput.mjs";
 export {
   PasswordInput,
-  stdin_default as default
+  stdin_default as default,
+  passwordInputProps
 };

package/es/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;
+export declare const pickerProps: {
     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/es/picker/Picker.mjs

@@ -1,24 +1,22 @@
-import { createVNode as _createVNode } from "vue";
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
-import { extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK, BORDER_UNSET_TOP_BOTTOM } from "../utils/index.mjs";
-import { isOptionExist, getColumnsType, findOptionByValue, formatCascadeColumns, getFirstEnabledOption, assignDefaultFields } from "./utils.mjs";
-import { useChildren } from "@vant/use";
+import { pick, extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, BORDER_UNSET_TOP_BOTTOM } from "../utils/index.mjs";
+import { bem, name, isOptionExist, getColumnsType, findOptionByValue, assignDefaultFields, formatCascadeColumns, getFirstEnabledOption } from "./utils.mjs";
+import { useChildren, useEventListener, useParent } from "@vant/use";
 import { useExpose } from "../composables/use-expose.mjs";
 import { Loading } from "../loading/index.mjs";
 import Column, { PICKER_KEY } from "./PickerColumn.mjs";
-const [name, bem, t] = createNamespace("picker");
-const pickerSharedProps = {
-  title: String,
+import Toolbar, { pickerToolbarPropKeys, pickerToolbarProps, pickerToolbarSlots } from "./PickerToolbar.mjs";
+import { PICKER_GROUP_KEY } from "../picker-group/PickerGroup.mjs";
+const pickerSharedProps = extend({
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
   optionHeight: makeNumericProp(44),
   showToolbar: truthProp,
   swipeDuration: makeNumericProp(1e3),
-  visibleOptionNum: makeNumericProp(6),
-  cancelButtonText: String,
-  confirmButtonText: String
-};
+  visibleOptionNum: makeNumericProp(6)
+}, pickerToolbarProps);
 const pickerProps = extend({}, pickerSharedProps, {
   columns: makeArrayProp(),
   modelValue: makeArrayProp(),
@@ -28,12 +26,16 @@ const pickerProps = extend({}, pickerSharedProps, {
 var stdin_default = defineComponent({
   name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change", "update:modelValue"],
+  emits: ["confirm", "cancel", "change", "clickOption", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
-    const selectedValues = ref(props.modelValue);
+    const columnsRef = ref();
+    const selectedValues = ref(props.modelValue.slice(0));
+    const {
+      parent
+    } = useParent(PICKER_GROUP_KEY);
     const {
       children,
       linkChildren
@@ -64,6 +66,10 @@ var stdin_default = 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") {
@@ -74,56 +80,21 @@ var stdin_default = defineComponent({
           }
         });
       }
-      emit("change", {
-        columnIndex,
-        selectedValues: selectedValues.value,
-        selectedOptions: selectedOptions.value
-      });
+      emit("change", extend({
+        columnIndex
+      }, getEventParams()));
     };
+    const onClickOption = (currentOption, columnIndex) => emit("clickOption", 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 _createVNode("div", {
-          "class": [bem("title"), "van-ellipsis"]
-        }, [props.title]);
-      }
-    };
-    const renderCancel = () => {
-      const text = props.cancelButtonText || t("cancel");
-      return _createVNode("button", {
-        "type": "button",
-        "class": [bem("cancel"), HAPTICS_FEEDBACK],
-        "onClick": cancel
-      }, [slots.cancel ? slots.cancel() : text]);
-    };
-    const renderConfirm = () => {
-      const text = props.confirmButtonText || t("confirm");
-      return _createVNode("button", {
-        "type": "button",
-        "class": [bem("confirm"), HAPTICS_FEEDBACK],
-        "onClick": confirm
-      }, [slots.confirm ? slots.confirm() : text]);
-    };
-    const renderToolbar = () => {
-      if (props.showToolbar) {
-        return _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) => _createVNode(Column, {
       "value": selectedValues.value[columnIndex],
       "fields": fields.value,
@@ -133,7 +104,8 @@ var stdin_default = 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
     }));
@@ -160,11 +132,19 @@ var stdin_default = defineComponent({
         height: `${wrapHeight}px`
       };
       return _createVNode("div", {
+        "ref": columnsRef,
         "class": bem("columns"),
-        "style": columnsStyle,
-        "onTouchmove": preventDefault
+        "style": columnsStyle
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
+    const renderToolbar = () => {
+      if (props.showToolbar && !parent) {
+        return _createVNode(Toolbar, _mergeProps(pick(props, pickerToolbarPropKeys), {
+          "onConfirm": confirm,
+          "onCancel": cancel
+        }), pick(slots, pickerToolbarSlots));
+      }
+    };
     watch(currentColumns, (columns) => {
       columns.forEach((options, index) => {
         if (options.length && !isOptionExist(options, selectedValues.value[index], fields.value)) {
@@ -174,20 +154,25 @@ var stdin_default = defineComponent({
     }, {
       immediate: true
     });
+    let lastEmittedModelValue;
     watch(() => props.modelValue, (newValues) => {
-      if (!isSameValue(newValues, selectedValues.value)) {
-        selectedValues.value = newValues;
+      if (!isSameValue(newValues, selectedValues.value) && !isSameValue(newValues, lastEmittedModelValue)) {
+        selectedValues.value = newValues.slice(0);
       }
     }, {
       deep: true
     });
     watch(selectedValues, (newValues) => {
       if (!isSameValue(newValues, props.modelValue)) {
-        emit("update:modelValue", newValues);
+        lastEmittedModelValue = newValues.slice(0);
+        emit("update:modelValue", lastEmittedModelValue);
       }
     }, {
       immediate: true
     });
+    useEventListener("touchmove", preventDefault, {
+      target: columnsRef
+    });
     const getSelectedOptions = () => selectedOptions.value;
     useExpose({
       confirm,
@@ -205,5 +190,6 @@ var stdin_default = defineComponent({
 });
 export {
   stdin_default as default,
+  pickerProps,
   pickerSharedProps
 };

package/es/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;

package/es/picker/PickerColumn.mjs

@@ -2,7 +2,7 @@ import { createVNode as _createVNode } from "vue";
 import { ref, watchEffect, defineComponent } from "vue";
 import { clamp, numericProp, makeArrayProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
 import { getElementTranslateY, findIndexOfEnabledOption } from "./utils.mjs";
-import { useParent } from "@vant/use";
+import { useEventListener, useParent } from "@vant/use";
 import { useTouch } from "../composables/use-touch.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 const DEFAULT_DURATION = 200;
@@ -22,7 +22,7 @@ var stdin_default = defineComponent({
     swipeDuration: makeRequiredProp(numericProp),
     visibleOptionNum: makeRequiredProp(numericProp)
   },
-  emits: ["change"],
+  emits: ["change", "clickOption"],
   setup(props, {
     emit,
     slots
@@ -32,6 +32,7 @@ var stdin_default = defineComponent({
     let touchStartTime;
     let momentumOffset;
     let transitionEndTrigger;
+    const root = ref();
     const wrapper = ref();
     const currentOffset = ref(0);
     const currentDuration = ref(0);
@@ -54,13 +55,14 @@ var stdin_default = defineComponent({
       }
       currentOffset.value = offset;
     };
-    const onClickItem = (index) => {
+    const onClickOption = (index) => {
       if (moving || props.readonly) {
         return;
       }
       transitionEndTrigger = null;
       currentDuration.value = DEFAULT_DURATION;
       updateValueByIndex(index);
+      emit("clickOption", props.options[index]);
     };
     const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.optionHeight), 0, count() - 1);
     const momentum = (distance, duration) => {
@@ -145,7 +147,7 @@ var stdin_default = defineComponent({
             disabled,
             selected: value === props.value
           }), option.className],
-          onClick: () => onClickItem(index)
+          onClick: () => onClickOption(index)
         };
         const childData = {
           class: "van-ellipsis",
@@ -164,10 +166,13 @@ var stdin_default = defineComponent({
       const offset = -enabledIndex * props.optionHeight;
       currentOffset.value = offset;
     });
+    useEventListener("touchmove", onTouchMove, {
+      target: root
+    });
     return () => _createVNode("div", {
+      "ref": root,
       "class": bem(),
-      "onTouchstart": onTouchStart,
-      "onTouchmove": onTouchMove,
+      "onTouchstartPassive": onTouchStart,
       "onTouchend": onTouchEnd,
       "onTouchcancel": onTouchEnd
     }, [_createVNode("ul", {

package/es/picker/PickerToolbar.d.ts

@@ -0,0 +1,21 @@
+export declare const pickerToolbarProps: {
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+};
+export declare const pickerToolbarSlots: string[];
+export declare type PickerToolbarPropKeys = Array<keyof typeof pickerToolbarProps>;
+export declare const pickerToolbarPropKeys: PickerToolbarPropKeys;
+declare const _default: import("vue").DefineComponent<{
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _default;