vant 3.6.12 → 3.6.13

package/es/picker/PickerColumn.mjs

@@ -1,37 +1,27 @@
-import { createVNode as _createVNode } from "vue";
-import { ref, watch, reactive, defineComponent } from "vue";
-import { deepClone } from "../utils/deep-clone.mjs";
-import { clamp, isObject, unknownProp, numericProp, makeArrayProp, makeNumberProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { ref, computed, watchEffect, defineComponent, createVNode as _createVNode } from "vue";
+import { clamp, numericProp, makeArrayProp, preventDefault, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { getElementTranslateY, findIndexOfEnabledOption } from "./utils.mjs";
 import { useEventListener, useParent } from "@vant/use";
 import { useTouch } from "../composables/use-touch.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 const DEFAULT_DURATION = 200;
-const MOMENTUM_LIMIT_TIME = 300;
-const MOMENTUM_LIMIT_DISTANCE = 15;
+const MOMENTUM_TIME = 300;
+const MOMENTUM_DISTANCE = 15;
 const [name, bem] = createNamespace("picker-column");
-function getElementTranslateY(element) {
-  const {
-    transform
-  } = window.getComputedStyle(element);
-  const translateY = transform.slice(7, transform.length - 1).split(", ")[5];
-  return Number(translateY);
-}
 const PICKER_KEY = Symbol(name);
-const isOptionDisabled = (option) => isObject(option) && option.disabled;
 var stdin_default = defineComponent({
   name,
   props: {
-    textKey: makeRequiredProp(String),
+    value: numericProp,
+    fields: makeRequiredProp(Object),
+    options: makeArrayProp(),
     readonly: Boolean,
     allowHtml: Boolean,
-    className: unknownProp,
-    itemHeight: makeRequiredProp(Number),
-    defaultIndex: makeNumberProp(0),
+    optionHeight: makeRequiredProp(Number),
     swipeDuration: makeRequiredProp(numericProp),
-    initialOptions: makeArrayProp(),
-    visibleItemCount: makeRequiredProp(numericProp)
+    visibleOptionNum: makeRequiredProp(numericProp)
   },
-  emits: ["change"],
+  emits: ["change", "clickOption", "scrollInto"],
   setup(props, {
     emit,
     slots
@@ -43,99 +33,74 @@ var stdin_default = defineComponent({
     let transitionEndTrigger;
     const root = ref();
     const wrapper = ref();
-    const state = reactive({
-      index: props.defaultIndex,
-      offset: 0,
-      duration: 0,
-      options: deepClone(props.initialOptions)
-    });
+    const currentOffset = ref(0);
+    const currentDuration = ref(0);
     const touch = useTouch();
-    const count = () => state.options.length;
-    const baseOffset = () => props.itemHeight * (+props.visibleItemCount - 1) / 2;
-    const adjustIndex = (index) => {
-      index = clamp(index, 0, count());
-      for (let i = index; i < count(); i++) {
-        if (!isOptionDisabled(state.options[i]))
-          return i;
-      }
-      for (let i = index - 1; i >= 0; i--) {
-        if (!isOptionDisabled(state.options[i]))
-          return i;
-      }
-    };
-    const setIndex = (index, emitChange) => {
-      index = adjustIndex(index) || 0;
-      const offset = -index * props.itemHeight;
+    const count = () => props.options.length;
+    const baseOffset = () => props.optionHeight * (+props.visibleOptionNum - 1) / 2;
+    const updateValueByIndex = (index) => {
+      let enabledIndex = findIndexOfEnabledOption(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
       const trigger = () => {
-        if (index !== state.index) {
-          state.index = index;
-          if (emitChange) {
-            emit("change", index);
-          }
+        if (enabledIndex > count() - 1) {
+          enabledIndex = findIndexOfEnabledOption(props.options, index);
+        }
+        const value = props.options[enabledIndex][props.fields.value];
+        if (value !== props.value) {
+          emit("change", value);
         }
       };
-      if (moving && offset !== state.offset) {
+      if (moving && offset !== currentOffset.value) {
         transitionEndTrigger = trigger;
       } else {
         trigger();
       }
-      state.offset = offset;
-    };
-    const setOptions = (options) => {
-      if (JSON.stringify(options) !== JSON.stringify(state.options)) {
-        state.options = deepClone(options);
-        setIndex(props.defaultIndex);
-      }
+      currentOffset.value = offset;
     };
-    const onClickItem = (index) => {
-      if (moving || props.readonly) {
+    const isReadonly = () => props.readonly || !props.options.length;
+    const onClickOption = (index) => {
+      if (moving || isReadonly()) {
         return;
       }
       transitionEndTrigger = null;
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
+      emit("clickOption", props.options[index]);
     };
-    const getOptionText = (option) => {
-      if (isObject(option) && props.textKey in option) {
-        return option[props.textKey];
-      }
-      return option;
-    };
-    const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.itemHeight), 0, count() - 1);
+    const getIndexByOffset = (offset) => clamp(Math.round(-offset / props.optionHeight), 0, count() - 1);
+    const currentIndex = computed(() => getIndexByOffset(currentOffset.value));
     const momentum = (distance, duration) => {
       const speed = Math.abs(distance / duration);
-      distance = state.offset + speed / 3e-3 * (distance < 0 ? -1 : 1);
+      distance = currentOffset.value + speed / 3e-3 * (distance < 0 ? -1 : 1);
       const index = getIndexByOffset(distance);
-      state.duration = +props.swipeDuration;
-      setIndex(index, true);
+      currentDuration.value = +props.swipeDuration;
+      updateValueByIndex(index);
     };
     const stopMomentum = () => {
       moving = false;
-      state.duration = 0;
+      currentDuration.value = 0;
       if (transitionEndTrigger) {
         transitionEndTrigger();
         transitionEndTrigger = null;
       }
     };
     const onTouchStart = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.start(event);
       if (moving) {
         const translateY = getElementTranslateY(wrapper.value);
-        state.offset = Math.min(0, translateY - baseOffset());
-        startOffset = state.offset;
-      } else {
-        startOffset = state.offset;
+        currentOffset.value = Math.min(0, translateY - baseOffset());
       }
-      state.duration = 0;
+      currentDuration.value = 0;
+      startOffset = currentOffset.value;
       touchStartTime = Date.now();
       momentumOffset = startOffset;
       transitionEndTrigger = null;
     };
     const onTouchMove = (event) => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
       touch.move(event);
@@ -143,95 +108,89 @@ var stdin_default = defineComponent({
         moving = true;
         preventDefault(event, true);
       }
-      state.offset = clamp(startOffset + touch.deltaY.value, -(count() * props.itemHeight), props.itemHeight);
+      const newOffset = clamp(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
+      const newIndex = getIndexByOffset(newOffset);
+      if (newIndex !== currentIndex.value) {
+        emit("scrollInto", props.options[newIndex]);
+      }
+      currentOffset.value = newOffset;
       const now = Date.now();
-      if (now - touchStartTime > MOMENTUM_LIMIT_TIME) {
+      if (now - touchStartTime > MOMENTUM_TIME) {
         touchStartTime = now;
-        momentumOffset = state.offset;
+        momentumOffset = newOffset;
       }
     };
     const onTouchEnd = () => {
-      if (props.readonly) {
+      if (isReadonly()) {
         return;
       }
-      const distance = state.offset - momentumOffset;
+      const distance = currentOffset.value - momentumOffset;
       const duration = Date.now() - touchStartTime;
-      const allowMomentum = duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
-      if (allowMomentum) {
+      const startMomentum = duration < MOMENTUM_TIME && Math.abs(distance) > MOMENTUM_DISTANCE;
+      if (startMomentum) {
         momentum(distance, duration);
         return;
       }
-      const index = getIndexByOffset(state.offset);
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
+      const index = getIndexByOffset(currentOffset.value);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
       setTimeout(() => {
         moving = false;
       }, 0);
     };
     const renderOptions = () => {
       const optionStyle = {
-        height: `${props.itemHeight}px`
+        height: `${props.optionHeight}px`
       };
-      return state.options.map((option, index) => {
-        const text = getOptionText(option);
-        const disabled = isOptionDisabled(option);
+      return props.options.map((option, index) => {
+        const text = option[props.fields.text];
+        const {
+          disabled
+        } = option;
+        const value = option[props.fields.value];
         const data = {
           role: "button",
           style: optionStyle,
           tabindex: disabled ? -1 : 0,
-          class: bem("item", {
+          class: [bem("item", {
             disabled,
-            selected: index === state.index
-          }),
-          onClick: () => onClickItem(index)
+            selected: value === props.value
+          }), option.className],
+          onClick: () => onClickOption(index)
         };
         const childData = {
           class: "van-ellipsis",
           [props.allowHtml ? "innerHTML" : "textContent"]: text
         };
-        return _createVNode("li", data, [slots.option ? slots.option(option) : _createVNode("div", childData, null)]);
+        return _createVNode("li", data, [slots.option ? slots.option(option, index) : _createVNode("div", childData, null)]);
       });
     };
-    const setValue = (value) => {
-      const {
-        options
-      } = state;
-      for (let i = 0; i < options.length; i++) {
-        if (getOptionText(options[i]) === value) {
-          return setIndex(i);
-        }
-      }
-    };
-    const getValue = () => state.options[state.index];
-    const hasOptions = () => state.options.length;
-    setIndex(state.index);
     useParent(PICKER_KEY);
     useExpose({
-      state,
-      setIndex,
-      getValue,
-      setValue,
-      setOptions,
-      hasOptions,
       stopMomentum
     });
-    watch(() => props.initialOptions, setOptions);
-    watch(() => props.defaultIndex, (value) => setIndex(value));
+    watchEffect(() => {
+      const index = moving ? Math.floor(-currentOffset.value / props.optionHeight) : props.options.findIndex((option) => option[props.fields.value] === props.value);
+      const enabledIndex = findIndexOfEnabledOption(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
+      if (moving && enabledIndex < index) stopMomentum();
+      currentOffset.value = offset;
+    });
     useEventListener("touchmove", onTouchMove, {
       target: root
     });
     return () => _createVNode("div", {
       "ref": root,
-      "class": [bem(), props.className],
+      "class": bem(),
       "onTouchstartPassive": onTouchStart,
       "onTouchend": onTouchEnd,
       "onTouchcancel": onTouchEnd
     }, [_createVNode("ul", {
       "ref": wrapper,
       "style": {
-        transform: `translate3d(0, ${state.offset + baseOffset()}px, 0)`,
-        transitionDuration: `${state.duration}ms`,
-        transitionProperty: state.duration ? "all" : "none"
+        transform: `translate3d(0, ${currentOffset.value + baseOffset()}px, 0)`,
+        transitionDuration: `${currentDuration.value}ms`,
+        transitionProperty: currentDuration.value ? "all" : "none"
       },
       "class": bem("wrapper"),
       "onTransitionend": stopMomentum

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 type PickerToolbarPropKeys = Array<keyof typeof pickerToolbarProps>;
+export declare const pickerToolbarPropKeys: PickerToolbarPropKeys;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: StringConstructor;
+    cancelButtonText: StringConstructor;
+    confirmButtonText: StringConstructor;
+}>> & Readonly<{
+    onCancel?: ((...args: any[]) => any) | undefined;
+    onConfirm?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/picker/PickerToolbar.mjs

@@ -0,0 +1,66 @@
+import { defineComponent, createVNode as _createVNode } from "vue";
+import { bem, t } from "./utils.mjs";
+import { createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+const [name] = createNamespace("picker-toolbar");
+const pickerToolbarProps = {
+  title: String,
+  cancelButtonText: String,
+  confirmButtonText: String
+};
+const pickerToolbarSlots = ["cancel", "confirm", "title", "toolbar"];
+const pickerToolbarPropKeys = Object.keys(pickerToolbarProps);
+var stdin_default = defineComponent({
+  name,
+  props: pickerToolbarProps,
+  emits: ["confirm", "cancel"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return _createVNode("div", {
+          "class": [bem("title"), "van-ellipsis"]
+        }, [props.title]);
+      }
+    };
+    const onCancel = () => emit("cancel");
+    const onConfirm = () => emit("confirm");
+    const renderCancel = () => {
+      var _a;
+      const text = (_a = props.cancelButtonText) != null ? _a : t("cancel");
+      if (!slots.cancel && !text) {
+        return;
+      }
+      return _createVNode("button", {
+        "type": "button",
+        "class": [bem("cancel"), HAPTICS_FEEDBACK],
+        "onClick": onCancel
+      }, [slots.cancel ? slots.cancel() : text]);
+    };
+    const renderConfirm = () => {
+      var _a;
+      const text = (_a = props.confirmButtonText) != null ? _a : t("confirm");
+      if (!slots.confirm && !text) {
+        return;
+      }
+      return _createVNode("button", {
+        "type": "button",
+        "class": [bem("confirm"), HAPTICS_FEEDBACK],
+        "onClick": onConfirm
+      }, [slots.confirm ? slots.confirm() : text]);
+    };
+    return () => _createVNode("div", {
+      "class": bem("toolbar")
+    }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
+  }
+});
+export {
+  stdin_default as default,
+  pickerToolbarPropKeys,
+  pickerToolbarProps,
+  pickerToolbarSlots
+};

package/es/picker/index.css

@@ -1 +1 @@
-:root{--van-picker-background-color: var(--van-background-color-light);--van-picker-toolbar-height: 44px;--van-picker-title-font-size: var(--van-font-size-lg);--van-picker-title-line-height: var(--van-line-height-md);--van-picker-action-padding: 0 var(--van-padding-md);--van-picker-action-font-size: var(--van-font-size-md);--van-picker-confirm-action-color: var(--van-text-link-color);--van-picker-cancel-action-color: var(--van-text-color-2);--van-picker-option-font-size: var(--van-font-size-lg);--van-picker-option-padding: 0 var(--van-padding-base);--van-picker-option-text-color: var(--van-text-color);--van-picker-option-disabled-opacity: .3;--van-picker-loading-icon-color: var(--van-primary-color);--van-picker-loading-mask-color: rgba(255, 255, 255, .9);--van-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4))}.van-picker{position:relative;background:var(--van-picker-background-color);-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{max-width:50%;font-weight:var(--van-font-weight-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--van-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}
+:root,:host{--van-picker-background: var(--van-background-2);--van-picker-toolbar-height: 44px;--van-picker-title-font-size: var(--van-font-size-lg);--van-picker-title-line-height: var(--van-line-height-md);--van-picker-action-padding: 0 var(--van-padding-md);--van-picker-action-font-size: var(--van-font-size-md);--van-picker-confirm-action-color: var(--van-primary-color);--van-picker-cancel-action-color: var(--van-text-color-2);--van-picker-option-font-size: var(--van-font-size-lg);--van-picker-option-padding: 0 var(--van-padding-base);--van-picker-option-text-color: var(--van-text-color);--van-picker-option-disabled-opacity: .3;--van-picker-loading-icon-color: var(--van-primary-color);--van-picker-loading-mask-color: rgba(255, 255, 255, .9);--van-picker-mask-color: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4))}.van-theme-dark{--van-picker-loading-mask-color: rgba(0, 0, 0, .6);--van-picker-mask-color: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1)), linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .1))}.van-picker{position:relative;background:var(--van-picker-background);-webkit-user-select:none;user-select:none}.van-picker__toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;height:var(--van-picker-toolbar-height)}.van-picker__cancel,.van-picker__confirm{height:100%;padding:var(--van-picker-action-padding);font-size:var(--van-picker-action-font-size);background-color:transparent;border:none}.van-picker__confirm{color:var(--van-picker-confirm-action-color)}.van-picker__cancel{color:var(--van-picker-cancel-action-color)}.van-picker__title{position:absolute;left:50%;color:var(--van-text-color);max-width:50%;font-weight:var(--van-font-bold);font-size:var(--van-picker-title-font-size);line-height:var(--van-picker-title-line-height);text-align:center;transform:translate(-50%)}.van-picker__columns{position:relative;display:flex;cursor:-webkit-grab;cursor:grab}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--van-picker-loading-icon-color);background:var(--van-picker-loading-mask-color)}.van-picker__frame{position:absolute;top:50%;right:var(--van-padding-md);left:var(--van-padding-md);z-index:2;transform:translateY(-50%);pointer-events:none}.van-picker__mask{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-image:var(--van-picker-mask-color);background-repeat:no-repeat;background-position:top,bottom;transform:translateZ(0);pointer-events:none}.van-picker-column{flex:1;overflow:hidden;font-size:var(--van-picker-option-font-size)}.van-picker-column__wrapper{transition-timing-function:cubic-bezier(.23,1,.68,1)}.van-picker-column__item{display:flex;align-items:center;justify-content:center;padding:var(--van-picker-option-padding);color:var(--van-picker-option-text-color)}.van-picker-column__item--disabled{cursor:not-allowed;opacity:var(--van-picker-option-disabled-opacity)}

package/es/picker/index.d.ts

@@ -1,10 +1,9 @@
 import { PickerProps } from './Picker';
-export declare const Picker: import("../utils").WithInstall<import("vue").DefineComponent<{
-    title: StringConstructor;
+export declare const Picker: import("../utils").WithInstall<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -16,33 +15,33 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<T[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<T[]>;
+        default: () => never[];
     };
     toolbarPosition: {
-        type: import("vue").PropType<import("./types").PickerToolbarPosition>;
+        type: import("vue").PropType<T_1>;
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "cancel" | "confirm")[], "change" | "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: StringConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "scrollInto")[], "update:modelValue" | "cancel" | "change" | "confirm" | "clickOption" | "scrollInto", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -54,46 +53,51 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
+} & {
+    title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<T[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<T[]>;
+        default: () => never[];
     };
     toolbarPosition: {
-        type: import("vue").PropType<import("./types").PickerToolbarPosition>;
+        type: import("vue").PropType<T_1>;
         default: import("./types").PickerToolbarPosition;
     };
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
-}>> & {
+}>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
+    onClickOption?: ((...args: any[]) => any) | undefined;
+    onScrollInto?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
-}, {
+}>, {
+    modelValue: import("../utils").Numeric[];
     readonly: boolean;
     loading: boolean;
-    defaultIndex: string | number;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
-    columns: (import("./types").PickerOption | import("./types").PickerColumn)[];
+    visibleOptionNum: string | number;
+    columns: (import("./types").PickerColumn | import("./types").PickerOption)[];
     toolbarPosition: import("./types").PickerToolbarPosition;
-}>>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
 export default Picker;
+export { pickerProps } from './Picker';
 export type { PickerProps };
-export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerObjectColumn, PickerObjectOption, PickerToolbarPosition, } from './types';
+export type { PickerColumn, PickerOption, PickerInstance, PickerThemeVars, PickerFieldNames, PickerToolbarPosition, PickerCancelEventParams, PickerChangeEventParams, PickerConfirmEventParams, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanPicker: typeof Picker;

package/es/picker/index.mjs

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

package/es/picker/style/index.mjs

@@ -1,3 +1,10 @@
 import "../../style/base.css";
+import "../../badge/index.css";
 import "../../loading/index.css";
+import "../../sticky/index.css";
+import "../../swipe/index.css";
+import "../../swipe-item/index.css";
+import "../../tabs/index.css";
+import "../../tab/index.css";
+import "../../picker-group/index.css";
 import "../index.css";

package/es/picker/types.d.ts

@@ -1,40 +1,26 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { Numeric } from '../utils';
 import type { PickerProps } from './Picker';
-export declare type PickerToolbarPosition = 'top' | 'bottom';
-export declare type PickerFieldNames = {
+export type PickerToolbarPosition = 'top' | 'bottom';
+export type PickerFieldNames = {
     text?: string;
-    values?: string;
+    value?: string;
     children?: string;
 };
-export declare type PickerObjectOption = {
+export type PickerOption = {
     text?: Numeric;
+    value?: Numeric;
     disabled?: boolean;
-    [key: PropertyKey]: any;
-};
-export declare type PickerOption = Numeric | PickerObjectOption;
-export declare type PickerObjectColumn = {
-    values?: PickerOption[];
     children?: PickerColumn;
     className?: unknown;
-    defaultIndex?: number;
     [key: PropertyKey]: any;
 };
-export declare type PickerColumn = PickerOption[] | PickerObjectColumn;
-export declare type PickerExpose = {
+export type PickerColumn = PickerOption[];
+export type PickerExpose = {
     confirm: () => void;
-    getValues: <T = PickerOption>() => T[];
-    setValues: (values: string[]) => void;
-    getIndexes: () => number[];
-    setIndexes: (indexes: number[]) => void;
-    getColumnIndex: (index: number) => number;
-    setColumnIndex: (columnIndex: number, optionIndex: number) => void;
-    getColumnValue: <T = PickerOption>(index: number) => T;
-    setColumnValue: (index: number, value: string) => void;
-    getColumnValues: <T = PickerOption>(index: number) => T[];
-    setColumnValues: (index: number, options: PickerOption[]) => void;
+    getSelectedOptions: () => Array<PickerOption | undefined>;
 };
-export declare type PickerColumnProvide = {
+export type PickerColumnProvide = {
     state: {
         index: number;
         offset: number;
@@ -47,4 +33,30 @@ export declare type PickerColumnProvide = {
     setOptions: (options: PickerOption[]) => void;
     stopMomentum: () => void;
 };
-export declare type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
+export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
+export type PickerConfirmEventParams = {
+    selectedValues: Numeric[];
+    selectedOptions: Array<PickerOption | undefined>;
+    selectedIndexes: number[];
+};
+export type PickerCancelEventParams = PickerConfirmEventParams;
+export type PickerChangeEventParams = PickerConfirmEventParams & {
+    columnIndex: number;
+};
+export type PickerThemeVars = {
+    pickerBackground?: string;
+    pickerToolbarHeight?: string;
+    pickerTitleFontSize?: string;
+    pickerTitleLineHeight?: number | string;
+    pickerActionPadding?: string;
+    pickerActionFontSize?: string;
+    pickerConfirmActionColor?: string;
+    pickerCancelActionColor?: string;
+    pickerOptionFontSize?: string;
+    pickerOptionPadding?: string;
+    pickerOptionTextColor?: string;
+    pickerOptionDisabledOpacity?: number | string;
+    pickerLoadingIconColor?: string;
+    pickerLoadingMaskColor?: string;
+    pickerMaskColor?: string;
+};