vant 3.4.8 → 4.0.0-alpha.2

package/lib/picker/PickerColumn.js

@@ -23,36 +23,27 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
 var import_vue2 = require("vue");
-var import_deep_clone = require("../utils/deep-clone");
 var import_utils = require("../utils");
+var import_utils2 = require("./utils");
 var import_use = require("@vant/use");
 var import_use_touch = require("../composables/use-touch");
 var import_use_expose = require("../composables/use-expose");
 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] = (0, import_utils.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) => (0, import_utils.isObject)(option) && option.disabled;
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: {
-    textKey: (0, import_utils.makeRequiredProp)(String),
+    value: import_utils.numericProp,
+    fields: (0, import_utils.makeRequiredProp)(Object),
+    options: (0, import_utils.makeArrayProp)(),
     readonly: Boolean,
     allowHtml: Boolean,
-    className: import_utils.unknownProp,
-    itemHeight: (0, import_utils.makeRequiredProp)(Number),
-    defaultIndex: (0, import_utils.makeNumberProp)(0),
+    optionHeight: (0, import_utils.makeRequiredProp)(Number),
     swipeDuration: (0, import_utils.makeRequiredProp)(import_utils.numericProp),
-    initialOptions: (0, import_utils.makeArrayProp)(),
-    visibleItemCount: (0, import_utils.makeRequiredProp)(import_utils.numericProp)
+    visibleOptionNum: (0, import_utils.makeRequiredProp)(import_utils.numericProp)
   },
   emits: ["change"],
   setup(props, {
@@ -65,75 +56,46 @@ var stdin_default = (0, import_vue2.defineComponent)({
     let momentumOffset;
     let transitionEndTrigger;
     const wrapper = (0, import_vue2.ref)();
-    const state = (0, import_vue2.reactive)({
-      index: props.defaultIndex,
-      offset: 0,
-      duration: 0,
-      options: (0, import_deep_clone.deepClone)(props.initialOptions)
-    });
+    const currentOffset = (0, import_vue2.ref)(0);
+    const currentDuration = (0, import_vue2.ref)(0);
     const touch = (0, import_use_touch.useTouch)();
-    const count = () => state.options.length;
-    const baseOffset = () => props.itemHeight * (+props.visibleItemCount - 1) / 2;
-    const adjustIndex = (index) => {
-      index = (0, import_utils.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) => {
+      const enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
       const trigger = () => {
-        if (index !== state.index) {
-          state.index = index;
-          if (emitChange) {
-            emit("change", 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 = (0, import_deep_clone.deepClone)(options);
-        setIndex(props.defaultIndex);
-      }
+      currentOffset.value = offset;
     };
     const onClickItem = (index) => {
       if (moving || props.readonly) {
         return;
       }
       transitionEndTrigger = null;
-      state.duration = DEFAULT_DURATION;
-      setIndex(index, true);
+      currentDuration.value = DEFAULT_DURATION;
+      updateValueByIndex(index);
     };
-    const getOptionText = (option) => {
-      if ((0, import_utils.isObject)(option) && props.textKey in option) {
-        return option[props.textKey];
-      }
-      return option;
-    };
-    const getIndexByOffset = (offset) => (0, import_utils.clamp)(Math.round(-offset / props.itemHeight), 0, count() - 1);
+    const getIndexByOffset = (offset) => (0, import_utils.clamp)(Math.round(-offset / props.optionHeight), 0, count() - 1);
     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;
@@ -145,13 +107,11 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       touch.start(event);
       if (moving) {
-        const translateY = getElementTranslateY(wrapper.value);
-        state.offset = Math.min(0, translateY - baseOffset());
-        startOffset = state.offset;
-      } else {
-        startOffset = state.offset;
+        const translateY = (0, import_utils2.getElementTranslateY)(wrapper.value);
+        currentOffset.value = Math.min(0, translateY - baseOffset());
       }
-      state.duration = 0;
+      currentDuration.value = 0;
+      startOffset = currentOffset.value;
       touchStartTime = Date.now();
       momentumOffset = startOffset;
       transitionEndTrigger = null;
@@ -165,46 +125,49 @@ var stdin_default = (0, import_vue2.defineComponent)({
         moving = true;
         (0, import_utils.preventDefault)(event, true);
       }
-      state.offset = (0, import_utils.clamp)(startOffset + touch.deltaY.value, -(count() * props.itemHeight), props.itemHeight);
+      currentOffset.value = (0, import_utils.clamp)(startOffset + touch.deltaY.value, -(count() * props.optionHeight), props.optionHeight);
       const now = Date.now();
-      if (now - touchStartTime > MOMENTUM_LIMIT_TIME) {
+      if (now - touchStartTime > MOMENTUM_TIME) {
         touchStartTime = now;
-        momentumOffset = state.offset;
+        momentumOffset = currentOffset.value;
       }
     };
     const onTouchEnd = () => {
       if (props.readonly) {
         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
-          }),
+            selected: value === props.value
+          }), option.className],
           onClick: () => onClickItem(index)
         };
         const childData = {
@@ -214,31 +177,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return (0, import_vue.createVNode)("li", data, [slots.option ? slots.option(option) : (0, import_vue.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];
-    setIndex(state.index);
     (0, import_use.useParent)(PICKER_KEY);
     (0, import_use_expose.useExpose)({
-      state,
-      setIndex,
-      getValue,
-      setValue,
-      setOptions,
       stopMomentum
     });
-    (0, import_vue2.watch)(() => props.initialOptions, setOptions);
-    (0, import_vue2.watch)(() => props.defaultIndex, (value) => setIndex(value));
+    (0, import_vue2.watchEffect)(() => {
+      const index = props.options.findIndex((option) => option[props.fields.value] === props.value);
+      const enabledIndex = (0, import_utils2.findIndexOfEnabledOption)(props.options, index);
+      const offset = -enabledIndex * props.optionHeight;
+      currentOffset.value = offset;
+    });
     return () => (0, import_vue.createVNode)("div", {
-      "class": [bem(), props.className],
+      "class": bem(),
       "onTouchstart": onTouchStart,
       "onTouchmove": onTouchMove,
       "onTouchend": onTouchEnd,
@@ -246,9 +196,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
     }, [(0, import_vue.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/lib/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)}
+body{--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-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-theme-dark{--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{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{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}.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/lib/picker/index.d.ts

@@ -4,7 +4,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -16,7 +16,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -24,25 +24,24 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<(import("./types").PickerColumn | import("./types").PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: import("vue").PropType<import("./types").PickerToolbarPosition>;
         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<{
+}, () => 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<import("vue").ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -54,7 +53,7 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -62,13 +61,12 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: import("vue").PropType<(import("./types").PickerOption | import("./types").PickerColumn)[]>;
+        type: import("vue").PropType<(import("./types").PickerColumn | import("./types").PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: import("vue").PropType<import("../utils").Numeric[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: import("vue").PropType<import("./types").PickerToolbarPosition>;
@@ -77,23 +75,24 @@ export declare const Picker: import("../utils").WithInstall<import("vue").Define
     columnsFieldNames: import("vue").PropType<import("./types").PickerFieldNames>;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...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;
 }>>;
 export default Picker;
 export type { PickerProps };
-export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerObjectColumn, PickerObjectOption, PickerToolbarPosition, } from './types';
+export type { PickerColumn, PickerOption, PickerInstance, PickerFieldNames, PickerToolbarPosition, PickerCancelEventParams, PickerChangeEventParams, PickerConfirmEventParams, } from './types';
 declare module 'vue' {
     interface GlobalComponents {
         VanPicker: typeof Picker;

package/lib/picker/index.less

@@ -1,26 +1,38 @@
-@import './var.less';
+body {
+  --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-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: 0.3;
+  --van-picker-loading-icon-color: var(--van-primary-color);
+  --van-picker-loading-mask-color: rgba(255, 255, 255, 0.9);
+  --van-picker-mask-color: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.9),
+      rgba(255, 255, 255, 0.4)
+    ),
+    linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
+}
 
-:root {
-  --van-picker-background-color: @picker-background-color;
-  --van-picker-toolbar-height: @picker-toolbar-height;
-  --van-picker-title-font-size: @picker-title-font-size;
-  --van-picker-title-line-height: @picker-title-line-height;
-  --van-picker-action-padding: @picker-action-padding;
-  --van-picker-action-font-size: @picker-action-font-size;
-  --van-picker-confirm-action-color: @picker-confirm-action-color;
-  --van-picker-cancel-action-color: @picker-cancel-action-color;
-  --van-picker-option-font-size: @picker-option-font-size;
-  --van-picker-option-padding: @picker-option-padding;
-  --van-picker-option-text-color: @picker-option-text-color;
-  --van-picker-option-disabled-opacity: @picker-option-disabled-opacity;
-  --van-picker-loading-icon-color: @picker-loading-icon-color;
-  --van-picker-loading-mask-color: @picker-loading-mask-color;
-  --van-picker-mask-color: @picker-mask-color;
+.van-theme-dark {
+  --van-picker-mask-color: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.6),
+      rgba(0, 0, 0, 0.1)
+    ),
+    linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
 }
 
 .van-picker {
   position: relative;
-  background: var(--van-picker-background-color);
+  background: var(--van-picker-background);
   user-select: none;
 
   &__toolbar {
@@ -48,8 +60,9 @@
   }
 
   &__title {
+    color: var(--van-text-color);
     max-width: 50%;
-    font-weight: var(--van-font-weight-bold);
+    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;

package/lib/picker/types.d.ts

@@ -4,35 +4,21 @@ import type { PickerProps } from './Picker';
 export declare type PickerToolbarPosition = 'top' | 'bottom';
 export declare type PickerFieldNames = {
     text?: string;
-    values?: string;
+    value?: string;
     children?: string;
 };
-export declare type PickerObjectOption = {
+export declare 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 PickerColumn = PickerOption[];
 export declare 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 = {
     state: {
@@ -48,3 +34,11 @@ export declare type PickerColumnProvide = {
     stopMomentum: () => void;
 };
 export declare type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
+export declare type PickerConfirmEventParams = {
+    selectedValues: Numeric[];
+    selectedOptions: Array<PickerOption | undefined>;
+};
+export declare type PickerCancelEventParams = PickerConfirmEventParams;
+export declare type PickerChangeEventParams = PickerConfirmEventParams & {
+    columnIndex: number;
+};

package/lib/picker/utils.d.ts

@@ -0,0 +1,11 @@
+import { type Numeric } from '../utils';
+import type { Ref } from 'vue';
+import type { PickerOption, PickerColumn, PickerFieldNames } from './types';
+export declare const getFirstEnabledOption: (options: PickerOption[]) => PickerOption | undefined;
+export declare function getColumnsType(columns: PickerColumn | PickerColumn[], fields: Required<PickerFieldNames>): "default" | "multiple" | "cascade";
+export declare function findIndexOfEnabledOption(options: PickerOption[], index: number): number;
+export declare const isOptionExist: (options: PickerOption[], value: Numeric | undefined, fields: Required<PickerFieldNames>) => boolean;
+export declare function findOptionByValue(options: PickerOption[], value: Numeric, fields: Required<PickerFieldNames>): PickerOption | undefined;
+export declare function formatCascadeColumns(columns: PickerColumn | PickerColumn[], fields: Required<PickerFieldNames>, selectedValues: Ref<Numeric[]>): PickerColumn[];
+export declare function getElementTranslateY(element: Element): number;
+export declare function assignDefaultFields(fields: PickerFieldNames | undefined): Required<PickerFieldNames>;

package/lib/picker/utils.js

@@ -0,0 +1,92 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stdin_exports = {};
+__export(stdin_exports, {
+  assignDefaultFields: () => assignDefaultFields,
+  findIndexOfEnabledOption: () => findIndexOfEnabledOption,
+  findOptionByValue: () => findOptionByValue,
+  formatCascadeColumns: () => formatCascadeColumns,
+  getColumnsType: () => getColumnsType,
+  getElementTranslateY: () => getElementTranslateY,
+  getFirstEnabledOption: () => getFirstEnabledOption,
+  isOptionExist: () => isOptionExist
+});
+module.exports = __toCommonJS(stdin_exports);
+var import_utils = require("../utils");
+const getFirstEnabledOption = (options) => options.find((option) => !option.disabled) || options[0];
+function getColumnsType(columns, fields) {
+  const firstColumn = columns[0];
+  if (firstColumn) {
+    if (Array.isArray(firstColumn)) {
+      return "multiple";
+    }
+    if (fields.children in firstColumn) {
+      return "cascade";
+    }
+  }
+  return "default";
+}
+function findIndexOfEnabledOption(options, index) {
+  index = (0, import_utils.clamp)(index, 0, options.length);
+  for (let i = index; i < options.length; i++) {
+    if (!options[i].disabled)
+      return i;
+  }
+  for (let i = index - 1; i >= 0; i--) {
+    if (!options[i].disabled)
+      return i;
+  }
+  return 0;
+}
+const isOptionExist = (options, value, fields) => value !== void 0 && !!options.find((option) => option[fields.value] === value);
+function findOptionByValue(options, value, fields) {
+  const index = options.findIndex((option) => option[fields.value] === value);
+  const enabledIndex = findIndexOfEnabledOption(options, index);
+  return options[enabledIndex];
+}
+function formatCascadeColumns(columns, fields, selectedValues) {
+  const formatted = [];
+  let cursor = {
+    [fields.children]: columns
+  };
+  let columnIndex = 0;
+  while (cursor && cursor[fields.children]) {
+    const options = cursor[fields.children];
+    const value = selectedValues.value[columnIndex];
+    cursor = (0, import_utils.isDef)(value) ? findOptionByValue(options, value, fields) : void 0;
+    if (!cursor && options.length) {
+      const firstValue = getFirstEnabledOption(options)[fields.value];
+      cursor = findOptionByValue(options, firstValue, fields);
+    }
+    columnIndex++;
+    formatted.push(options);
+  }
+  return formatted;
+}
+function getElementTranslateY(element) {
+  const { transform } = window.getComputedStyle(element);
+  const translateY = transform.slice(7, transform.length - 1).split(", ")[5];
+  return Number(translateY);
+}
+function assignDefaultFields(fields) {
+  return (0, import_utils.extend)({
+    text: "text",
+    value: "value",
+    children: "children"
+  }, fields);
+}

package/lib/popover/Popover.d.ts

@@ -149,13 +149,13 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:show"?: ((...args: any[]) => any) | undefined;
 }, {
     offset: [number, number];
+    theme: PopoverTheme;
     overlay: boolean;
     show: boolean;
     teleport: string | import("vue").RendererElement | null | undefined;
     closeOnClickOverlay: boolean;
     actions: PopoverAction[];
     closeOnClickAction: boolean;
-    theme: PopoverTheme;
     closeOnClickOutside: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;