vant 3.6.14 → 3.6.16

package/lib/picker/Picker.js

@@ -17,10 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,215 +24,320 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stdin_exports = {};
 __export(stdin_exports, {
   default: () => stdin_default,
-  pickerProps: () => pickerProps,
   pickerSharedProps: () => pickerSharedProps
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
+var import_vue2 = require("vue");
 var import_utils = require("../utils");
-var import_utils2 = require("./utils");
 var import_use = require("@vant/use");
 var import_use_expose = require("../composables/use-expose");
 var import_loading = require("../loading");
 var import_PickerColumn = __toESM(require("./PickerColumn"));
-var import_PickerToolbar = __toESM(require("./PickerToolbar"));
-var import_PickerGroup = require("../picker-group/PickerGroup");
-const pickerSharedProps = (0, import_utils.extend)({
+const [name, bem, t] = (0, import_utils.createNamespace)("picker");
+const pickerSharedProps = {
+  title: String,
   loading: Boolean,
   readonly: Boolean,
   allowHtml: Boolean,
-  optionHeight: (0, import_utils.makeNumericProp)(44),
+  itemHeight: (0, import_utils.makeNumericProp)(44),
   showToolbar: import_utils.truthProp,
   swipeDuration: (0, import_utils.makeNumericProp)(1e3),
-  visibleOptionNum: (0, import_utils.makeNumericProp)(6)
-}, import_PickerToolbar.pickerToolbarProps);
+  visibleItemCount: (0, import_utils.makeNumericProp)(6),
+  cancelButtonText: String,
+  confirmButtonText: String
+};
 const pickerProps = (0, import_utils.extend)({}, pickerSharedProps, {
   columns: (0, import_utils.makeArrayProp)(),
-  modelValue: (0, import_utils.makeArrayProp)(),
+  valueKey: String,
+  defaultIndex: (0, import_utils.makeNumericProp)(0),
   toolbarPosition: (0, import_utils.makeStringProp)("top"),
   columnsFieldNames: Object
 });
-var stdin_default = (0, import_vue.defineComponent)({
-  name: import_utils2.name,
+var stdin_default = (0, import_vue2.defineComponent)({
+  name,
   props: pickerProps,
-  emits: ["confirm", "cancel", "change", "scrollInto", "clickOption", "update:modelValue"],
+  emits: ["confirm", "cancel", "change"],
   setup(props, {
     emit,
     slots
   }) {
-    const columnsRef = (0, import_vue.ref)();
-    const selectedValues = (0, import_vue.ref)(props.modelValue.slice(0));
-    const {
-      parent
-    } = (0, import_use.useParent)(import_PickerGroup.PICKER_GROUP_KEY);
+    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 = (0, import_vue2.ref)(false);
+    const columnsRef = (0, import_vue2.ref)();
+    const formattedColumns = (0, import_vue2.ref)([]);
+    const columnsFieldNames = (0, import_vue2.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 {
       children,
       linkChildren
     } = (0, import_use.useChildren)(import_PickerColumn.PICKER_KEY);
     linkChildren();
-    const fields = (0, import_vue.computed)(() => (0, import_utils2.assignDefaultFields)(props.columnsFieldNames));
-    const optionHeight = (0, import_vue.computed)(() => (0, import_utils.unitToPx)(props.optionHeight));
-    const columnsType = (0, import_vue.computed)(() => (0, import_utils2.getColumnsType)(props.columns, fields.value));
-    const currentColumns = (0, import_vue.computed)(() => {
-      const {
-        columns
-      } = props;
-      switch (columnsType.value) {
-        case "multiple":
-          return columns;
-        case "cascade":
-          return (0, import_utils2.formatCascadeColumns)(columns, fields.value, selectedValues);
-        default:
-          return [columns];
+    const itemHeight = (0, import_vue2.computed)(() => (0, import_utils.unitToPx)(props.itemHeight));
+    const dataType = (0, import_vue2.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 hasOptions = (0, import_vue.computed)(() => currentColumns.value.some((options) => options.length));
-    const selectedOptions = (0, import_vue.computed)(() => currentColumns.value.map((options, index) => (0, import_utils2.findOptionByValue)(options, selectedValues.value[index], fields.value)));
-    const selectedIndexes = (0, import_vue.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 (!(0, import_utils2.isOptionExist)(options, value2, fields.value)) {
-            setValue(index, options.length ? options[0][fields.value.value] : void 0);
+    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];
       }
-      (0, import_vue.nextTick)(() => {
-        emit("change", (0, import_utils.extend)({
-          columnIndex
-        }, getEventParams()));
-      });
+      formattedColumns.value = formatted;
     };
-    const onClickOption = (currentOption, columnIndex) => {
-      const params = {
-        columnIndex,
-        currentOption
+    const format = () => {
+      const {
+        columns
+      } = props;
+      if (dataType.value === "plain") {
+        formattedColumns.value = [{
+          [columnsFieldNames.value.values]: columns
+        }];
+      } else if (dataType.value === "cascade") {
+        formatCascade();
+      } else {
+        formattedColumns.value = 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
       };
-      emit("clickOption", (0, import_utils.extend)(getEventParams(), params));
-      emit("scrollInto", params);
+      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 getValues = () => children.map((child) => child.getValue());
+    const setValues = (values) => {
+      values.forEach((value, index) => {
+        setColumnValue(index, 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());
-      const params = getEventParams();
-      (0, import_vue.nextTick)(() => {
-        emit("confirm", params);
-      });
-      return params;
-    };
-    const cancel = () => emit("cancel", getEventParams());
-    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => (0, import_vue.createVNode)(import_PickerColumn.default, {
-      "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
-        });
+      emitAction("confirm");
+    };
+    const cancel = () => emitAction("cancel");
+    const renderTitle = () => {
+      if (slots.title) {
+        return slots.title();
+      }
+      if (props.title) {
+        return (0, import_vue.createVNode)("div", {
+          "class": [bem("title"), "van-ellipsis"]
+        }, [props.title]);
+      }
+    };
+    const renderCancel = () => {
+      const text = props.cancelButtonText || t("cancel");
+      return (0, import_vue.createVNode)("button", {
+        "type": "button",
+        "class": [bem("cancel"), import_utils.HAPTICS_FEEDBACK],
+        "onClick": cancel
+      }, [slots.cancel ? slots.cancel() : text]);
+    };
+    const renderConfirm = () => {
+      const text = props.confirmButtonText || t("confirm");
+      return (0, import_vue.createVNode)("button", {
+        "type": "button",
+        "class": [bem("confirm"), import_utils.HAPTICS_FEEDBACK],
+        "onClick": confirm
+      }, [slots.confirm ? slots.confirm() : text]);
+    };
+    const renderToolbar = () => {
+      if (props.showToolbar) {
+        const slot = slots.toolbar || slots.default;
+        return (0, import_vue.createVNode)("div", {
+          "class": bem("toolbar")
+        }, [slot ? slot() : [renderCancel(), renderTitle(), renderConfirm()]]);
       }
-    }, {
-      option: slots.option
-    }));
+    };
+    const renderColumnItems = () => formattedColumns.value.map((item, columnIndex) => {
+      var _a;
+      return (0, import_vue.createVNode)(import_PickerColumn.default, {
+        "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 renderMask = (wrapHeight) => {
       if (hasOptions.value) {
         const frameStyle = {
-          height: `${optionHeight.value}px`
+          height: `${itemHeight.value}px`
         };
         const maskStyle = {
-          backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`
+          backgroundSize: `100% ${(wrapHeight - itemHeight.value) / 2}px`
         };
         return [(0, import_vue.createVNode)("div", {
-          "class": (0, import_utils2.bem)("mask"),
+          "class": bem("mask"),
           "style": maskStyle
         }, null), (0, import_vue.createVNode)("div", {
-          "class": [import_utils.BORDER_UNSET_TOP_BOTTOM, (0, import_utils2.bem)("frame")],
+          "class": [import_utils.BORDER_UNSET_TOP_BOTTOM, bem("frame")],
           "style": frameStyle
         }, null)];
       }
     };
     const renderColumns = () => {
-      const wrapHeight = optionHeight.value * +props.visibleOptionNum;
+      const wrapHeight = itemHeight.value * +props.visibleItemCount;
       const columnsStyle = {
         height: `${wrapHeight}px`
       };
-      if (!props.loading && !hasOptions.value && slots.empty) {
-        return slots.empty();
-      }
       return (0, import_vue.createVNode)("div", {
         "ref": columnsRef,
-        "class": (0, import_utils2.bem)("columns"),
+        "class": bem("columns"),
         "style": columnsStyle
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
-    const renderToolbar = () => {
-      if (props.showToolbar && !parent) {
-        return (0, import_vue.createVNode)(import_PickerToolbar.default, (0, import_vue.mergeProps)((0, import_utils.pick)(props, import_PickerToolbar.pickerToolbarPropKeys), {
-          "onConfirm": confirm,
-          "onCancel": cancel
-        }), (0, import_utils.pick)(slots, import_PickerToolbar.pickerToolbarSlots));
-      }
-    };
-    (0, import_vue.watch)(currentColumns, (columns) => {
-      columns.forEach((options, index) => {
-        if (options.length && !(0, import_utils2.isOptionExist)(options, selectedValues.value[index], fields.value)) {
-          setValue(index, (0, import_utils2.getFirstEnabledOption)(options)[fields.value.value]);
-        }
-      });
-    }, {
-      immediate: true
-    });
-    let lastEmittedModelValue;
-    (0, import_vue.watch)(() => props.modelValue, (newValues) => {
-      if (!(0, import_utils.isSameValue)(newValues, selectedValues.value) && !(0, import_utils.isSameValue)(newValues, lastEmittedModelValue)) {
-        selectedValues.value = newValues.slice(0);
-        lastEmittedModelValue = newValues.slice(0);
-      }
-    }, {
-      deep: true
-    });
-    (0, import_vue.watch)(selectedValues, (newValues) => {
-      if (!(0, import_utils.isSameValue)(newValues, props.modelValue)) {
-        lastEmittedModelValue = newValues.slice(0);
-        emit("update:modelValue", lastEmittedModelValue);
-      }
-    }, {
+    (0, import_vue2.watch)(() => props.columns, format, {
       immediate: true
     });
     (0, import_use.useEventListener)("touchmove", import_utils.preventDefault, {
       target: columnsRef
     });
-    const getSelectedOptions = () => selectedOptions.value;
     (0, import_use_expose.useExpose)({
       confirm,
-      getSelectedOptions
+      getValues,
+      setValues,
+      getIndexes,
+      setIndexes,
+      getColumnIndex,
+      setColumnIndex,
+      getColumnValue,
+      setColumnValue,
+      getColumnValues,
+      setColumnValues
     });
     return () => {
       var _a, _b;
       return (0, import_vue.createVNode)("div", {
-        "class": (0, import_utils2.bem)()
+        "class": bem()
       }, [props.toolbarPosition === "top" ? renderToolbar() : null, props.loading ? (0, import_vue.createVNode)(import_loading.Loading, {
-        "class": (0, import_utils2.bem)("loading")
+        "class": bem("loading")
       }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), props.toolbarPosition === "bottom" ? renderToolbar() : null]);
     };
   }

package/lib/picker/PickerColumn.d.ts

@@ -1,61 +1,68 @@
-import { type PropType, type InjectionKey } from 'vue';
-import type { PickerOption, PickerFieldNames, PickerColumnProvide } from './types';
+import { type InjectionKey } from 'vue';
+import type { PickerOption, PickerColumnProvide } from './types';
 export declare const PICKER_KEY: InjectionKey<PickerColumnProvide>;
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    value: (NumberConstructor | StringConstructor)[];
-    fields: {
-        type: PropType<Required<PickerFieldNames>>;
+declare const _default: import("vue").DefineComponent<{
+    textKey: {
+        type: StringConstructor;
         required: true;
     };
-    options: {
-        type: PropType<T[]>;
-        default: () => never[];
-    };
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    optionHeight: {
+    className: import("vue").PropType<unknown>;
+    itemHeight: {
         type: NumberConstructor;
         required: true;
     };
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
     swipeDuration: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-    visibleOptionNum: {
+    initialOptions: {
+        type: import("vue").PropType<PickerOption[]>;
+        default: () => never[];
+    };
+    visibleItemCount: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-}>, () => 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>>;
+}, () => 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;
         required: true;
     };
-    options: {
-        type: PropType<T[]>;
-        default: () => never[];
-    };
     readonly: BooleanConstructor;
     allowHtml: BooleanConstructor;
-    optionHeight: {
+    className: import("vue").PropType<unknown>;
+    itemHeight: {
         type: NumberConstructor;
         required: true;
     };
+    defaultIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
     swipeDuration: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
-    visibleOptionNum: {
+    initialOptions: {
+        type: import("vue").PropType<PickerOption[]>;
+        default: () => never[];
+    };
+    visibleItemCount: {
         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;
-    options: PickerOption[];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    initialOptions: PickerOption[];
+}>;
 export default _default;