vant 3.4.5 → 4.0.0-alpha.1

package/es/pagination/index.css

@@ -1 +1 @@
-:root{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background-color: var(--van-background-color);--van-pagination-background-color: var(--van-background-color-light);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background-color);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width-base)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background-color);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}
+body{--van-pagination-height: 40px;--van-pagination-font-size: var(--van-font-size-md);--van-pagination-item-width: 36px;--van-pagination-item-default-color: var(--van-primary-color);--van-pagination-item-disabled-color: var(--van-gray-7);--van-pagination-item-disabled-background: var(--van-background);--van-pagination-background: var(--van-background-2);--van-pagination-desc-color: var(--van-gray-7);--van-pagination-disabled-opacity: var(--van-disabled-opacity)}.van-pagination{font-size:var(--van-pagination-font-size)}.van-pagination__items{display:flex}.van-pagination__item,.van-pagination__page-desc{display:flex;align-items:center;justify-content:center}.van-pagination__item{flex:1;box-sizing:border-box;min-width:var(--van-pagination-item-width);height:var(--van-pagination-height);color:var(--van-pagination-item-default-color);background:var(--van-pagination-background);cursor:pointer;-webkit-user-select:none;user-select:none}.van-pagination__item button{flex:1;height:100%;border:none;padding:0;background:transparent}.van-pagination__item button[disabled]{cursor:not-allowed}.van-pagination__item:active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item:not(:last-child):after{border-right-width:0}.van-pagination__item--active{color:var(--van-white);background-color:var(--van-pagination-item-default-color)}.van-pagination__item--page{flex-grow:0}.van-pagination__item--prev,.van-pagination__item--next{padding:0 var(--van-padding-base);cursor:pointer}.van-pagination__item--border:after{border-width:var(--van-border-width)}.van-pagination__item--disabled{color:var(--van-pagination-item-disabled-color);background-color:var(--van-pagination-item-disabled-background);opacity:var(--van-pagination-disabled-opacity)}.van-pagination__page-desc{flex:1;height:var(--van-pagination-height);color:var(--van-pagination-desc-color)}

package/es/pagination/index.less

@@ -1,15 +1,13 @@
-@import './var.less';
-
-:root {
-  --van-pagination-height: @pagination-height;
-  --van-pagination-font-size: @pagination-font-size;
-  --van-pagination-item-width: @pagination-item-width;
-  --van-pagination-item-default-color: @pagination-item-default-color;
-  --van-pagination-item-disabled-color: @pagination-item-disabled-color;
-  --van-pagination-item-disabled-background-color: @pagination-item-disabled-background-color;
-  --van-pagination-background-color: @pagination-background-color;
-  --van-pagination-desc-color: @pagination-desc-color;
-  --van-pagination-disabled-opacity: @pagination-disabled-opacity;
+body {
+  --van-pagination-height: 40px;
+  --van-pagination-font-size: var(--van-font-size-md);
+  --van-pagination-item-width: 36px;
+  --van-pagination-item-default-color: var(--van-primary-color);
+  --van-pagination-item-disabled-color: var(--van-gray-7);
+  --van-pagination-item-disabled-background: var(--van-background);
+  --van-pagination-background: var(--van-background-2);
+  --van-pagination-desc-color: var(--van-gray-7);
+  --van-pagination-disabled-opacity: var(--van-disabled-opacity);
 }
 
 .van-pagination {
@@ -32,7 +30,7 @@
     min-width: var(--van-pagination-item-width);
     height: var(--van-pagination-height);
     color: var(--van-pagination-item-default-color);
-    background: var(--van-pagination-background-color);
+    background: var(--van-pagination-background);
     cursor: pointer;
     user-select: none;
 
@@ -73,12 +71,12 @@
     }
 
     &--border::after {
-      border-width: var(--van-border-width-base);
+      border-width: var(--van-border-width);
     }
 
     &--disabled {
       color: var(--van-pagination-item-disabled-color);
-      background-color: var(--van-pagination-item-disabled-background-color);
+      background-color: var(--van-pagination-item-disabled-background);
       opacity: var(--van-pagination-disabled-opacity);
     }
   }

package/es/password-input/index.css

@@ -1 +1 @@
-:root{--van-password-input-height: 50px;--van-password-input-margin: 0 var(--van-padding-md);--van-password-input-font-size: 20px;--van-password-input-border-radius: 6px;--van-password-input-background-color: var(--van-background-color-light);--van-password-input-info-color: var(--van-text-color-2);--van-password-input-info-font-size: var(--van-font-size-md);--van-password-input-error-info-color: var(--van-danger-color);--van-password-input-dot-size: 10px;--van-password-input-dot-color: var(--van-text-color);--van-password-input-text-color: var(--van-text-color);--van-password-input-cursor-color: var(--van-text-color);--van-password-input-cursor-width: 1px;--van-password-input-cursor-height: 40%;--van-password-input-cursor-animation-duration: 1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__info,.van-password-input__error-info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security:after{border-radius:var(--van-password-input-border-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background-color)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-animation-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}
+body{--van-password-input-height: 50px;--van-password-input-margin: 0 var(--van-padding-md);--van-password-input-font-size: 20px;--van-password-input-radius: 6px;--van-password-input-background: var(--van-background-2);--van-password-input-info-color: var(--van-text-color-2);--van-password-input-info-font-size: var(--van-font-size-md);--van-password-input-error-info-color: var(--van-danger-color);--van-password-input-dot-size: 10px;--van-password-input-dot-color: var(--van-text-color);--van-password-input-text-color: var(--van-text-color);--van-password-input-cursor-color: var(--van-text-color);--van-password-input-cursor-width: 1px;--van-password-input-cursor-height: 40%;--van-password-input-cursor-duration: 1s}.van-password-input{position:relative;margin:var(--van-password-input-margin);-webkit-user-select:none;user-select:none}.van-password-input__info,.van-password-input__error-info{margin-top:var(--van-padding-md);font-size:var(--van-password-input-info-font-size);text-align:center}.van-password-input__info{color:var(--van-password-input-info-color)}.van-password-input__error-info{color:var(--van-password-input-error-info-color)}.van-password-input__security{display:flex;width:100%;height:var(--van-password-input-height);cursor:pointer}.van-password-input__security:after{border-radius:var(--van-password-input-radius)}.van-password-input__security li{position:relative;display:flex;flex:1;align-items:center;justify-content:center;height:100%;color:var(--van-password-input-text-color);font-size:var(--van-password-input-font-size);line-height:1.2;background:var(--van-password-input-background)}.van-password-input__security i{position:absolute;top:50%;left:50%;width:var(--van-password-input-dot-size);height:var(--van-password-input-dot-size);background:var(--van-password-input-dot-color);border-radius:100%;transform:translate(-50%,-50%);visibility:hidden}.van-password-input__cursor{position:absolute;top:50%;left:50%;width:var(--van-password-input-cursor-width);height:var(--van-password-input-cursor-height);background:var(--van-password-input-cursor-color);transform:translate(-50%,-50%);animation:var(--van-password-input-cursor-duration) van-cursor-flicker infinite}@keyframes van-cursor-flicker{0%{opacity:0}50%{opacity:1}to{opacity:0}}

package/es/password-input/index.less

@@ -1,21 +1,19 @@
-@import './var.less';
-
-:root {
-  --van-password-input-height: @password-input-height;
-  --van-password-input-margin: @password-input-margin;
-  --van-password-input-font-size: @password-input-font-size;
-  --van-password-input-border-radius: @password-input-border-radius;
-  --van-password-input-background-color: @password-input-background-color;
-  --van-password-input-info-color: @password-input-info-color;
-  --van-password-input-info-font-size: @password-input-info-font-size;
-  --van-password-input-error-info-color: @password-input-error-info-color;
-  --van-password-input-dot-size: @password-input-dot-size;
-  --van-password-input-dot-color: @password-input-dot-color;
-  --van-password-input-text-color: @password-input-text-color;
-  --van-password-input-cursor-color: @password-input-cursor-color;
-  --van-password-input-cursor-width: @password-input-cursor-width;
-  --van-password-input-cursor-height: @password-input-cursor-height;
-  --van-password-input-cursor-animation-duration: @password-input-cursor-animation-duration;
+body {
+  --van-password-input-height: 50px;
+  --van-password-input-margin: 0 var(--van-padding-md);
+  --van-password-input-font-size: 20px;
+  --van-password-input-radius: 6px;
+  --van-password-input-background: var(--van-background-2);
+  --van-password-input-info-color: var(--van-text-color-2);
+  --van-password-input-info-font-size: var(--van-font-size-md);
+  --van-password-input-error-info-color: var(--van-danger-color);
+  --van-password-input-dot-size: 10px;
+  --van-password-input-dot-color: var(--van-text-color);
+  --van-password-input-text-color: var(--van-text-color);
+  --van-password-input-cursor-color: var(--van-text-color);
+  --van-password-input-cursor-width: 1px;
+  --van-password-input-cursor-height: 40%;
+  --van-password-input-cursor-duration: 1s;
 }
 
 .van-password-input {
@@ -45,7 +43,7 @@
     cursor: pointer;
 
     &::after {
-      border-radius: var(--van-password-input-border-radius);
+      border-radius: var(--van-password-input-radius);
     }
 
     li {
@@ -58,7 +56,7 @@
       color: var(--van-password-input-text-color);
       font-size: var(--van-password-input-font-size);
       line-height: 1.2;
-      background: var(--van-password-input-background-color);
+      background: var(--van-password-input-background);
     }
 
     i {
@@ -82,8 +80,8 @@
     height: var(--van-password-input-cursor-height);
     background: var(--van-password-input-cursor-color);
     transform: translate(-50%, -50%);
-    animation: var(--van-password-input-cursor-animation-duration)
-      van-cursor-flicker infinite;
+    animation: var(--van-password-input-cursor-duration) van-cursor-flicker
+      infinite;
   }
 }
 

package/es/picker/Picker.d.ts

@@ -5,7 +5,7 @@ export declare const pickerSharedProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -17,7 +17,7 @@ export declare const pickerSharedProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -29,7 +29,7 @@ declare const pickerProps: {
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -41,7 +41,7 @@ declare const pickerProps: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -49,13 +49,12 @@ declare const pickerProps: {
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
@@ -69,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -81,7 +80,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -89,25 +88,24 @@ declare const _default: import("vue").DefineComponent<{
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
         default: PickerToolbarPosition;
     };
     columnsFieldNames: PropType<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<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<ExtractPropTypes<{
     title: StringConstructor;
     loading: BooleanConstructor;
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    itemHeight: {
+    optionHeight: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -119,7 +117,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -127,13 +125,12 @@ declare const _default: import("vue").DefineComponent<{
     confirmButtonText: StringConstructor;
 } & {
     columns: {
-        type: PropType<(PickerOption | PickerColumn)[]>;
+        type: PropType<(PickerColumn | PickerOption)[]>;
         default: () => never[];
     };
-    valueKey: StringConstructor;
-    defaultIndex: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
+    modelValue: {
+        type: PropType<(string | number)[]>;
+        default: () => never[];
     };
     toolbarPosition: {
         type: PropType<PickerToolbarPosition>;
@@ -142,18 +139,19 @@ declare const _default: import("vue").DefineComponent<{
     columnsFieldNames: PropType<PickerFieldNames>;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
 }, {
+    modelValue: (string | number)[];
     readonly: boolean;
     loading: boolean;
-    defaultIndex: string | number;
     allowHtml: boolean;
-    itemHeight: string | number;
+    optionHeight: string | number;
     showToolbar: boolean;
     swipeDuration: string | number;
-    visibleItemCount: string | number;
-    columns: (PickerOption | PickerColumn)[];
+    visibleOptionNum: string | number;
+    columns: (PickerColumn | PickerOption)[];
     toolbarPosition: PickerToolbarPosition;
 }>;
 export default _default;

package/es/picker/Picker.js

@@ -1,6 +1,7 @@
 import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, defineComponent } from "vue";
-import { extend, unitToPx, truthProp, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK, BORDER_UNSET_TOP_BOTTOM } from "../utils";
+import { extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, createNamespace, HAPTICS_FEEDBACK, BORDER_UNSET_TOP_BOTTOM } from "../utils";
+import { isOptionExist, getColumnsType, findOptionByValue, formatCascadeColumns, getFirstEnabledOption, assignDefaultFields } from "./utils";
 import { useChildren } from "@vant/use";
 import { useExpose } from "../composables/use-expose";
 import { Loading } from "../loading";
@@ -11,198 +12,85 @@ const pickerSharedProps = {
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
-  itemHeight: makeNumericProp(44),
+  optionHeight: makeNumericProp(44),
   showToolbar: truthProp,
   swipeDuration: makeNumericProp(1e3),
-  visibleItemCount: makeNumericProp(6),
+  visibleOptionNum: makeNumericProp(6),
   cancelButtonText: String,
   confirmButtonText: String
 };
 const pickerProps = extend({}, pickerSharedProps, {
   columns: makeArrayProp(),
-  valueKey: String,
-  defaultIndex: makeNumericProp(0),
+  modelValue: makeArrayProp(),
   toolbarPosition: makeStringProp("top"),
   columnsFieldNames: Object
 });
 var stdin_default = defineComponent({
   name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change"],
+  emits: ["confirm", "cancel", "change", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
-    if (process.env.NODE_ENV !== "production") {
-      if (slots.default) {
-        console.warn('[Vant] Picker: "default" slot is deprecated, please use "toolbar" slot instead.');
-      }
-      if (props.valueKey) {
-        console.warn('[Vant] Picker: "valueKey" prop is deprecated, please use "columnsFieldNames" prop instead.');
-      }
-    }
-    const hasOptions = ref(false);
-    const formattedColumns = ref([]);
-    const {
-      text: textKey,
-      values: valuesKey,
-      children: childrenKey
-    } = extend({
-      text: props.valueKey || "text",
-      values: "values",
-      children: "children"
-    }, props.columnsFieldNames);
+    const selectedValues = ref(props.modelValue);
     const {
       children,
       linkChildren
     } = useChildren(PICKER_KEY);
     linkChildren();
-    const itemHeight = computed(() => unitToPx(props.itemHeight));
-    const dataType = computed(() => {
-      const firstColumn = props.columns[0];
-      if (typeof firstColumn === "object") {
-        if (childrenKey in firstColumn) {
-          return "cascade";
-        }
-        if (valuesKey in firstColumn) {
-          return "object";
-        }
-      }
-      return "plain";
-    });
-    const formatCascade = () => {
-      var _a;
-      const formatted = [];
-      let cursor = {
-        [childrenKey]: props.columns
-      };
-      while (cursor && cursor[childrenKey]) {
-        const children2 = cursor[childrenKey];
-        let defaultIndex = (_a = cursor.defaultIndex) != null ? _a : +props.defaultIndex;
-        while (children2[defaultIndex] && children2[defaultIndex].disabled) {
-          if (defaultIndex < children2.length - 1) {
-            defaultIndex++;
-          } else {
-            defaultIndex = 0;
-            break;
-          }
-        }
-        formatted.push({
-          [valuesKey]: cursor[childrenKey],
-          className: cursor.className,
-          defaultIndex
-        });
-        cursor = children2[defaultIndex];
-      }
-      formattedColumns.value = formatted;
-    };
-    const format = () => {
+    const fields = computed(() => assignDefaultFields(props.columnsFieldNames));
+    const optionHeight = computed(() => unitToPx(props.optionHeight));
+    const columnsType = computed(() => getColumnsType(props.columns, fields.value));
+    const currentColumns = computed(() => {
       const {
         columns
       } = props;
-      if (dataType.value === "plain") {
-        formattedColumns.value = [{
-          [valuesKey]: columns
-        }];
-      } else if (dataType.value === "cascade") {
-        formatCascade();
-      } else {
-        formattedColumns.value = columns;
-      }
-      hasOptions.value = formattedColumns.value.some((item) => item[valuesKey] && item[valuesKey].length !== 0);
-    };
-    const getIndexes = () => children.map((child) => child.state.index);
-    const setColumnValues = (index, options) => {
-      const column = children[index];
-      if (column) {
-        column.setOptions(options);
-        hasOptions.value = true;
-      }
-    };
-    const onCascadeChange = (columnIndex) => {
-      let cursor = {
-        [childrenKey]: props.columns
-      };
-      const indexes = getIndexes();
-      for (let i = 0; i <= columnIndex; i++) {
-        cursor = cursor[childrenKey][indexes[i]];
-      }
-      while (cursor && cursor[childrenKey]) {
-        columnIndex++;
-        setColumnValues(columnIndex, cursor[childrenKey]);
-        cursor = cursor[childrenKey][cursor.defaultIndex || 0];
-      }
-    };
-    const getChild = (index) => children[index];
-    const getColumnValue = (index) => {
-      const column = getChild(index);
-      if (column) {
-        return column.getValue();
-      }
-    };
-    const setColumnValue = (index, value) => {
-      const column = getChild(index);
-      if (column) {
-        column.setValue(value);
-        if (dataType.value === "cascade") {
-          onCascadeChange(index);
-        }
-      }
-    };
-    const getColumnIndex = (index) => {
-      const column = getChild(index);
-      if (column) {
-        return column.state.index;
-      }
-    };
-    const setColumnIndex = (columnIndex, optionIndex) => {
-      const column = getChild(columnIndex);
-      if (column) {
-        column.setIndex(optionIndex);
-        if (dataType.value === "cascade") {
-          onCascadeChange(columnIndex);
-        }
+      switch (columnsType.value) {
+        case "multiple":
+          return columns;
+        case "cascade":
+          return formatCascadeColumns(columns, fields.value, selectedValues);
+        default:
+          return [columns];
       }
-    };
-    const getColumnValues = (index) => {
-      const column = getChild(index);
-      if (column) {
-        return column.state.options;
+    });
+    const hasOptions = computed(() => currentColumns.value.some((options) => options.length));
+    const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const setValue = (index, value) => {
+      if (selectedValues.value[index] !== value) {
+        const newValues = selectedValues.value.slice(0);
+        newValues[index] = value;
+        selectedValues.value = newValues;
+      }
+    };
+    const onChange = (value, columnIndex) => {
+      setValue(columnIndex, value);
+      if (columnsType.value === "cascade") {
+        selectedValues.value.forEach((value2, index) => {
+          const options = currentColumns.value[index];
+          if (!isOptionExist(options, value2, fields.value)) {
+            setValue(index, options.length ? options[0][fields.value.value] : void 0);
+          }
+        });
       }
-    };
-    const getValues = () => children.map((child) => child.getValue());
-    const setValues = (values) => {
-      values.forEach((value, index) => {
-        setColumnValue(index, value);
+      emit("change", {
+        columnIndex,
+        selectedValues: selectedValues.value,
+        selectedOptions: selectedOptions.value
       });
     };
-    const setIndexes = (indexes) => {
-      indexes.forEach((optionIndex, columnIndex) => {
-        setColumnIndex(columnIndex, optionIndex);
-      });
-    };
-    const emitAction = (event) => {
-      if (dataType.value === "plain") {
-        emit(event, getColumnValue(0), getColumnIndex(0));
-      } else {
-        emit(event, getValues(), getIndexes());
-      }
-    };
-    const onChange = (columnIndex) => {
-      if (dataType.value === "cascade") {
-        onCascadeChange(columnIndex);
-      }
-      if (dataType.value === "plain") {
-        emit("change", getColumnValue(0), getColumnIndex(0));
-      } else {
-        emit("change", getValues(), columnIndex);
-      }
-    };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
-      emitAction("confirm");
+      emit("confirm", {
+        selectedValues: selectedValues.value,
+        selectedOptions: selectedOptions.value
+      });
     };
-    const cancel = () => emitAction("cancel");
+    const cancel = () => emit("cancel", {
+      selectedValues: selectedValues.value,
+      selectedOptions: selectedOptions.value
+    });
     const renderTitle = () => {
       if (slots.title) {
         return slots.title();
@@ -231,36 +119,31 @@ var stdin_default = defineComponent({
     };
     const renderToolbar = () => {
       if (props.showToolbar) {
-        const slot = slots.toolbar || slots.default;
         return _createVNode("div", {
           "class": bem("toolbar")
-        }, [slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]]);
-      }
-    };
-    const renderColumnItems = () => formattedColumns.value.map((item, columnIndex) => {
-      var _a;
-      return _createVNode(Column, {
-        "textKey": textKey,
-        "readonly": props.readonly,
-        "allowHtml": props.allowHtml,
-        "className": item.className,
-        "itemHeight": itemHeight.value,
-        "defaultIndex": (_a = item.defaultIndex) != null ? _a : +props.defaultIndex,
-        "swipeDuration": props.swipeDuration,
-        "initialOptions": item[valuesKey],
-        "visibleItemCount": props.visibleItemCount,
-        "onChange": () => onChange(columnIndex)
-      }, {
-        option: slots.option
-      });
-    });
+        }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
+      }
+    };
+    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => _createVNode(Column, {
+      "value": selectedValues.value[columnIndex],
+      "fields": fields.value,
+      "options": options,
+      "readonly": props.readonly,
+      "allowHtml": props.allowHtml,
+      "optionHeight": optionHeight.value,
+      "swipeDuration": props.swipeDuration,
+      "visibleOptionNum": props.visibleOptionNum,
+      "onChange": (value) => onChange(value, columnIndex)
+    }, {
+      option: slots.option
+    }));
     const renderMask = (wrapHeight) => {
       if (hasOptions.value) {
         const frameStyle = {
-          height: `${itemHeight.value}px`
+          height: `${optionHeight.value}px`
         };
         const maskStyle = {
-          backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`
+          backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`
         };
         return [_createVNode("div", {
           "class": bem("mask"),
@@ -272,7 +155,7 @@ var stdin_default = defineComponent({
       }
     };
     const renderColumns = () => {
-      const wrapHeight = itemHeight.value * +props.visibleItemCount;
+      const wrapHeight = optionHeight.value * +props.visibleOptionNum;
       const columnsStyle = {
         height: `${wrapHeight}px`
       };
@@ -282,21 +165,33 @@ var stdin_default = defineComponent({
         "onTouchmove": preventDefault
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
-    watch(() => props.columns, format, {
+    watch(currentColumns, (columns) => {
+      columns.forEach((options, index) => {
+        if (options.length && !isOptionExist(options, selectedValues.value[index], fields.value)) {
+          setValue(index, getFirstEnabledOption(options)[fields.value.value]);
+        }
+      });
+    }, {
+      immediate: true
+    });
+    watch(() => props.modelValue, (newValues) => {
+      if (!isSameValue(newValues, selectedValues.value)) {
+        selectedValues.value = newValues;
+      }
+    }, {
+      deep: true
+    });
+    watch(selectedValues, (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        emit("update:modelValue", newValues);
+      }
+    }, {
       immediate: true
     });
+    const getSelectedOptions = () => selectedOptions.value;
     useExpose({
       confirm,
-      getValues,
-      setValues,
-      getIndexes,
-      setIndexes,
-      getColumnIndex,
-      setColumnIndex,
-      getColumnValue,
-      setColumnValue,
-      getColumnValues,
-      setColumnValues
+      getSelectedOptions
     });
     return () => {
       var _a, _b;