vant 3.6.12 → 3.6.13

package/es/picker/Picker.mjs

@@ -1,268 +1,136 @@
-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/index.mjs";
-import { useChildren, useEventListener } from "@vant/use";
+import { ref, watch, computed, nextTick, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { pick, extend, unitToPx, truthProp, isSameValue, makeArrayProp, preventDefault, makeStringProp, makeNumericProp, BORDER_UNSET_TOP_BOTTOM } from "../utils/index.mjs";
+import { bem, name, isOptionExist, getColumnsType, findOptionByValue, assignDefaultFields, formatCascadeColumns, getFirstEnabledOption } from "./utils.mjs";
+import { useChildren, useEventListener, useParent } from "@vant/use";
 import { useExpose } from "../composables/use-expose.mjs";
 import { Loading } from "../loading/index.mjs";
 import Column, { PICKER_KEY } from "./PickerColumn.mjs";
-const [name, bem, t] = createNamespace("picker");
-const pickerSharedProps = {
-  title: String,
+import Toolbar, { pickerToolbarPropKeys, pickerToolbarProps, pickerToolbarSlots } from "./PickerToolbar.mjs";
+import { PICKER_GROUP_KEY } from "../picker-group/PickerGroup.mjs";
+const pickerSharedProps = extend({
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
-  itemHeight: makeNumericProp(44),
+  optionHeight: makeNumericProp(44),
   showToolbar: truthProp,
   swipeDuration: makeNumericProp(1e3),
-  visibleItemCount: makeNumericProp(6),
-  cancelButtonText: String,
-  confirmButtonText: String
-};
+  visibleOptionNum: makeNumericProp(6)
+}, pickerToolbarProps);
 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", "scrollInto", "clickOption", "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 columnsRef = ref();
-    const formattedColumns = ref([]);
-    const columnsFieldNames = computed(() => {
-      const {
-        columnsFieldNames: columnsFieldNames2
-      } = props;
-      return {
-        text: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.text) || props.valueKey || "text",
-        values: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.values) || "values",
-        children: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.children) || "children"
-      };
-    });
+    const selectedValues = ref(props.modelValue.slice(0));
+    const {
+      parent
+    } = useParent(PICKER_GROUP_KEY);
     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 (columnsFieldNames.value.children in firstColumn) {
-          return "cascade";
-        }
-        if (columnsFieldNames.value.values in firstColumn) {
-          return "object";
-        }
-      }
-      return "plain";
-    });
-    const formatCascade = () => {
-      var _a;
-      const formatted = [];
-      let cursor = {
-        [columnsFieldNames.value.children]: props.columns
-      };
-      while (cursor && cursor[columnsFieldNames.value.children]) {
-        const children2 = cursor[columnsFieldNames.value.children];
-        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({
-          [columnsFieldNames.value.values]: cursor[columnsFieldNames.value.children],
-          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 = [{
-          [columnsFieldNames.value.values]: columns
-        }];
-      } else if (dataType.value === "cascade") {
-        formatCascade();
-      } else {
-        formattedColumns.value = columns;
+      switch (columnsType.value) {
+        case "multiple":
+          return columns;
+        case "cascade":
+          return formatCascadeColumns(columns, fields.value, selectedValues);
+        default:
+          return [columns];
       }
-      hasOptions.value = formattedColumns.value.some((item) => item[columnsFieldNames.value.values] && item[columnsFieldNames.value.values].length !== 0) || children.some((item) => item.hasOptions);
-    };
-    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 = {
-        [columnsFieldNames.value.children]: props.columns
-      };
-      const indexes = getIndexes();
-      for (let i = 0; i <= columnIndex; i++) {
-        cursor = cursor[columnsFieldNames.value.children][indexes[i]];
-      }
-      while (cursor && cursor[columnsFieldNames.value.children]) {
-        columnIndex++;
-        setColumnValues(columnIndex, cursor[columnsFieldNames.value.children]);
-        cursor = cursor[columnsFieldNames.value.children][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);
-        }
-      }
-    };
-    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 selectedIndexes = computed(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
+    const setValue = (index, value) => {
+      if (selectedValues.value[index] !== value) {
+        const newValues = selectedValues.value.slice(0);
+        newValues[index] = value;
+        selectedValues.value = newValues;
+      }
+    };
+    const getEventParams = () => ({
+      selectedValues: selectedValues.value.slice(0),
+      selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value
+    });
+    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);
+      nextTick(() => {
+        emit("change", extend({
+          columnIndex
+        }, getEventParams()));
       });
     };
-    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 onClickOption = (currentOption, columnIndex) => {
+      const params = {
+        columnIndex,
+        currentOption
+      };
+      emit("clickOption", extend(getEventParams(), params));
+      emit("scrollInto", params);
     };
     const confirm = () => {
       children.forEach((child) => child.stopMomentum());
-      emitAction("confirm");
-    };
-    const cancel = () => emitAction("cancel");
-    const renderTitle = () => {
-      if (slots.title) {
-        return slots.title();
-      }
-      if (props.title) {
-        return _createVNode("div", {
-          "class": [bem("title"), "van-ellipsis"]
-        }, [props.title]);
-      }
-    };
-    const renderCancel = () => {
-      const text = props.cancelButtonText || t("cancel");
-      return _createVNode("button", {
-        "type": "button",
-        "class": [bem("cancel"), HAPTICS_FEEDBACK],
-        "onClick": cancel
-      }, [slots.cancel ? slots.cancel() : text]);
-    };
-    const renderConfirm = () => {
-      const text = props.confirmButtonText || t("confirm");
-      return _createVNode("button", {
-        "type": "button",
-        "class": [bem("confirm"), HAPTICS_FEEDBACK],
-        "onClick": confirm
-      }, [slots.confirm ? slots.confirm() : text]);
-    };
-    const renderToolbar = () => {
-      if (props.showToolbar) {
-        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": columnsFieldNames.value.text,
-        "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[columnsFieldNames.value.values],
-        "visibleItemCount": props.visibleItemCount,
-        "onChange": () => onChange(columnIndex)
-      }, {
-        option: slots.option
+      const params = getEventParams();
+      nextTick(() => {
+        emit("confirm", params);
       });
-    });
+      return params;
+    };
+    const cancel = () => emit("cancel", getEventParams());
+    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => _createVNode(Column, {
+      "value": selectedValues.value[columnIndex],
+      "fields": fields.value,
+      "options": options,
+      "readonly": props.readonly,
+      "allowHtml": props.allowHtml,
+      "optionHeight": optionHeight.value,
+      "swipeDuration": props.swipeDuration,
+      "visibleOptionNum": props.visibleOptionNum,
+      "onChange": (value) => onChange(value, columnIndex),
+      "onClickOption": (option) => onClickOption(option, columnIndex),
+      "onScrollInto": (option) => {
+        emit("scrollInto", {
+          currentOption: option,
+          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"),
@@ -274,34 +142,60 @@ var stdin_default = defineComponent({
       }
     };
     const renderColumns = () => {
-      const wrapHeight = itemHeight.value * +props.visibleItemCount;
+      const wrapHeight = optionHeight.value * +props.visibleOptionNum;
       const columnsStyle = {
         height: `${wrapHeight}px`
       };
+      if (!props.loading && !hasOptions.value && slots.empty) {
+        return slots.empty();
+      }
       return _createVNode("div", {
         "ref": columnsRef,
         "class": bem("columns"),
         "style": columnsStyle
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
-    watch(() => props.columns, format, {
+    const renderToolbar = () => {
+      if (props.showToolbar && !parent) {
+        return _createVNode(Toolbar, _mergeProps(pick(props, pickerToolbarPropKeys), {
+          "onConfirm": confirm,
+          "onCancel": cancel
+        }), pick(slots, pickerToolbarSlots));
+      }
+    };
+    watch(currentColumns, (columns) => {
+      columns.forEach((options, index) => {
+        if (options.length && !isOptionExist(options, selectedValues.value[index], fields.value)) {
+          setValue(index, getFirstEnabledOption(options)[fields.value.value]);
+        }
+      });
+    }, {
+      immediate: true
+    });
+    let lastEmittedModelValue;
+    watch(() => props.modelValue, (newValues) => {
+      if (!isSameValue(newValues, selectedValues.value) && !isSameValue(newValues, lastEmittedModelValue)) {
+        selectedValues.value = newValues.slice(0);
+        lastEmittedModelValue = newValues.slice(0);
+      }
+    }, {
+      deep: true
+    });
+    watch(selectedValues, (newValues) => {
+      if (!isSameValue(newValues, props.modelValue)) {
+        lastEmittedModelValue = newValues.slice(0);
+        emit("update:modelValue", lastEmittedModelValue);
+      }
+    }, {
       immediate: true
     });
     useEventListener("touchmove", preventDefault, {
       target: columnsRef
     });
+    const getSelectedOptions = () => selectedOptions.value;
     useExpose({
       confirm,
-      getValues,
-      setValues,
-      getIndexes,
-      setIndexes,
-      getColumnIndex,
-      setColumnIndex,
-      getColumnValue,
-      setColumnValue,
-      getColumnValues,
-      setColumnValues
+      getSelectedOptions
     });
     return () => {
       var _a, _b;
@@ -315,5 +209,6 @@ var stdin_default = defineComponent({
 });
 export {
   stdin_default as default,
+  pickerProps,
   pickerSharedProps
 };

package/es/picker/PickerColumn.d.ts

@@ -1,68 +1,61 @@
-import { type InjectionKey } from 'vue';
-import type { PickerOption, PickerColumnProvide } from './types';
+import { type PropType, type InjectionKey } from 'vue';
+import type { PickerOption, PickerFieldNames, PickerColumnProvide } from './types';
 export declare const PICKER_KEY: InjectionKey<PickerColumnProvide>;
-declare const _default: import("vue").DefineComponent<{
-    textKey: {
-        type: StringConstructor;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: (NumberConstructor | StringConstructor)[];
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
         required: true;
     };
+    options: {
+        type: PropType<T[]>;
+        default: () => never[];
+    };
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    className: import("vue").PropType<unknown>;
-    itemHeight: {
+    optionHeight: {
         type: NumberConstructor;
         required: true;
     };
-    defaultIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
     swipeDuration: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-    initialOptions: {
-        type: import("vue").PropType<PickerOption[]>;
-        default: () => never[];
-    };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    textKey: {
-        type: StringConstructor;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "clickOption" | "scrollInto")[], "change" | "clickOption" | "scrollInto", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: (NumberConstructor | StringConstructor)[];
+    fields: {
+        type: PropType<Required<PickerFieldNames>>;
         required: true;
     };
+    options: {
+        type: PropType<T[]>;
+        default: () => never[];
+    };
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    className: import("vue").PropType<unknown>;
-    itemHeight: {
+    optionHeight: {
         type: NumberConstructor;
         required: true;
     };
-    defaultIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
     swipeDuration: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-    initialOptions: {
-        type: import("vue").PropType<PickerOption[]>;
-        default: () => never[];
-    };
-    visibleItemCount: {
+    visibleOptionNum: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-}>> & {
+}>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
-}, {
+    onClickOption?: ((...args: any[]) => any) | undefined;
+    onScrollInto?: ((...args: any[]) => any) | undefined;
+}>, {
     readonly: boolean;
-    defaultIndex: number;
     allowHtml: boolean;
-    initialOptions: PickerOption[];
-}>;
+    options: PickerOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;