vant 4.0.0-alpha.3 → 4.0.0-beta.1

package/es/action-bar/ActionBar.mjs

@@ -0,0 +1,44 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, ref } from "vue";
+import { truthProp, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+import { usePlaceholder } from "../composables/use-placeholder.mjs";
+const [name, bem] = createNamespace("action-bar");
+const ACTION_BAR_KEY = Symbol(name);
+const actionBarProps = {
+  placeholder: Boolean,
+  safeAreaInsetBottom: truthProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: actionBarProps,
+  setup(props, {
+    slots
+  }) {
+    const root = ref();
+    const renderPlaceholder = usePlaceholder(root, bem);
+    const {
+      linkChildren
+    } = useChildren(ACTION_BAR_KEY);
+    linkChildren();
+    const renderActionBar = () => {
+      var _a;
+      return _createVNode("div", {
+        "ref": root,
+        "class": [bem(), {
+          "van-safe-area-bottom": props.safeAreaInsetBottom
+        }]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+    return () => {
+      if (props.placeholder) {
+        return renderPlaceholder(renderActionBar);
+      }
+      return renderActionBar();
+    };
+  }
+});
+export {
+  ACTION_BAR_KEY,
+  stdin_default as default
+};

package/es/action-bar/index.d.ts

@@ -1,14 +1,17 @@
 export declare const ActionBar: import("../utils").WithInstall<import("vue").DefineComponent<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholder: BooleanConstructor;
     safeAreaInsetBottom: {
         type: BooleanConstructor;
         default: true;
     };
 }>>, {
+    placeholder: boolean;
     safeAreaInsetBottom: boolean;
 }>>;
 export default ActionBar;

package/es/action-bar/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _ActionBar from "./ActionBar.mjs";
+const ActionBar = withInstall(_ActionBar);
+var stdin_default = ActionBar;
+export {
+  ActionBar,
+  stdin_default as default
+};

package/es/action-bar-button/ActionBarButton.mjs

@@ -0,0 +1,73 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { extend, createNamespace } from "../utils/index.mjs";
+import { ACTION_BAR_KEY } from "../action-bar/ActionBar.mjs";
+import { useParent } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+import { useRoute, routeProps } from "../composables/use-route.mjs";
+import { Button } from "../button/index.mjs";
+const [name, bem] = createNamespace("action-bar-button");
+const actionBarButtonProps = extend({}, routeProps, {
+  type: String,
+  text: String,
+  icon: String,
+  color: String,
+  loading: Boolean,
+  disabled: Boolean
+});
+var stdin_default = defineComponent({
+  name,
+  props: actionBarButtonProps,
+  setup(props, {
+    slots
+  }) {
+    const route = useRoute();
+    const {
+      parent,
+      index
+    } = useParent(ACTION_BAR_KEY);
+    const isFirst = computed(() => {
+      if (parent) {
+        const prev = parent.children[index.value - 1];
+        return !(prev && "isButton" in prev);
+      }
+    });
+    const isLast = computed(() => {
+      if (parent) {
+        const next = parent.children[index.value + 1];
+        return !(next && "isButton" in next);
+      }
+    });
+    useExpose({
+      isButton: true
+    });
+    return () => {
+      const {
+        type,
+        icon,
+        text,
+        color,
+        loading,
+        disabled
+      } = props;
+      return _createVNode(Button, {
+        "class": bem([type, {
+          last: isLast.value,
+          first: isFirst.value
+        }]),
+        "size": "large",
+        "type": type,
+        "icon": icon,
+        "color": color,
+        "loading": loading,
+        "disabled": disabled,
+        "onClick": route
+      }, {
+        default: () => [slots.default ? slots.default() : text]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/action-bar-button/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _ActionBarButton from "./ActionBarButton.mjs";
+const ActionBarButton = withInstall(_ActionBarButton);
+var stdin_default = ActionBarButton;
+export {
+  ActionBarButton,
+  stdin_default as default
+};

package/es/action-bar-icon/ActionBarIcon.mjs

@@ -0,0 +1,68 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { defineComponent } from "vue";
+import { extend, createNamespace, unknownProp, numericProp } from "../utils/index.mjs";
+import { ACTION_BAR_KEY } from "../action-bar/ActionBar.mjs";
+import { useParent } from "@vant/use";
+import { useRoute, routeProps } from "../composables/use-route.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Badge } from "../badge/index.mjs";
+const [name, bem] = createNamespace("action-bar-icon");
+const actionBarIconProps = extend({}, routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  color: String,
+  badge: numericProp,
+  iconClass: unknownProp,
+  badgeProps: Object,
+  iconPrefix: String
+});
+var stdin_default = defineComponent({
+  name,
+  props: actionBarIconProps,
+  setup(props, {
+    slots
+  }) {
+    const route = useRoute();
+    useParent(ACTION_BAR_KEY);
+    const renderIcon = () => {
+      const {
+        dot,
+        badge,
+        icon,
+        color,
+        iconClass,
+        badgeProps,
+        iconPrefix
+      } = props;
+      if (slots.icon) {
+        return _createVNode(Badge, _mergeProps({
+          "dot": dot,
+          "class": bem("icon"),
+          "content": badge
+        }, badgeProps), {
+          default: slots.icon
+        });
+      }
+      return _createVNode(Icon, {
+        "tag": "div",
+        "dot": dot,
+        "name": icon,
+        "badge": badge,
+        "color": color,
+        "class": [bem("icon"), iconClass],
+        "badgeProps": badgeProps,
+        "classPrefix": iconPrefix
+      }, null);
+    };
+    return () => _createVNode("div", {
+      "role": "button",
+      "class": bem(),
+      "tabindex": 0,
+      "onClick": route
+    }, [renderIcon(), slots.default ? slots.default() : props.text]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/action-bar-icon/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _ActionBarIcon from "./ActionBarIcon.mjs";
+const ActionBarIcon = withInstall(_ActionBarIcon);
+var stdin_default = ActionBarIcon;
+export {
+  ActionBarIcon,
+  stdin_default as default
+};

package/es/action-sheet/ActionSheet.mjs

@@ -0,0 +1,131 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { nextTick, defineComponent } from "vue";
+import { pick, extend, truthProp, makeArrayProp, makeStringProp, createNamespace, HAPTICS_FEEDBACK } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Popup } from "../popup/index.mjs";
+import { Loading } from "../loading/index.mjs";
+import { popupSharedProps, popupSharedPropKeys } from "../popup/shared.mjs";
+const [name, bem] = createNamespace("action-sheet");
+const actionSheetProps = extend({}, popupSharedProps, {
+  title: String,
+  round: truthProp,
+  actions: makeArrayProp(),
+  closeIcon: makeStringProp("cross"),
+  closeable: truthProp,
+  cancelText: String,
+  description: String,
+  closeOnPopstate: truthProp,
+  closeOnClickAction: Boolean,
+  safeAreaInsetBottom: truthProp
+});
+const popupInheritKeys = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
+var stdin_default = defineComponent({
+  name,
+  props: actionSheetProps,
+  emits: ["select", "cancel", "update:show"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const updateShow = (show) => emit("update:show", show);
+    const onCancel = () => {
+      updateShow(false);
+      emit("cancel");
+    };
+    const renderHeader = () => {
+      if (props.title) {
+        return _createVNode("div", {
+          "class": bem("header")
+        }, [props.title, props.closeable && _createVNode(Icon, {
+          "name": props.closeIcon,
+          "class": [bem("close"), HAPTICS_FEEDBACK],
+          "onClick": onCancel
+        }, null)]);
+      }
+    };
+    const renderCancel = () => {
+      if (slots.cancel || props.cancelText) {
+        return [_createVNode("div", {
+          "class": bem("gap")
+        }, null), _createVNode("button", {
+          "type": "button",
+          "class": bem("cancel"),
+          "onClick": onCancel
+        }, [slots.cancel ? slots.cancel() : props.cancelText])];
+      }
+    };
+    const renderActionContent = (action, index) => {
+      if (action.loading) {
+        return _createVNode(Loading, {
+          "class": bem("loading-icon")
+        }, null);
+      }
+      if (slots.action) {
+        return slots.action({
+          action,
+          index
+        });
+      }
+      return [_createVNode("span", {
+        "class": bem("name")
+      }, [action.name]), action.subname && _createVNode("div", {
+        "class": bem("subname")
+      }, [action.subname])];
+    };
+    const renderAction = (action, index) => {
+      const {
+        color,
+        loading,
+        callback,
+        disabled,
+        className
+      } = action;
+      const onClick = () => {
+        if (disabled || loading) {
+          return;
+        }
+        if (callback) {
+          callback(action);
+        }
+        if (props.closeOnClickAction) {
+          updateShow(false);
+        }
+        nextTick(() => emit("select", action, index));
+      };
+      return _createVNode("button", {
+        "type": "button",
+        "style": {
+          color
+        },
+        "class": [bem("item", {
+          loading,
+          disabled
+        }), className],
+        "onClick": onClick
+      }, [renderActionContent(action, index)]);
+    };
+    const renderDescription = () => {
+      if (props.description || slots.description) {
+        const content = slots.description ? slots.description() : props.description;
+        return _createVNode("div", {
+          "class": bem("description")
+        }, [content]);
+      }
+    };
+    return () => _createVNode(Popup, _mergeProps({
+      "class": bem(),
+      "position": "bottom",
+      "onUpdate:show": updateShow
+    }, pick(props, popupInheritKeys)), {
+      default: () => {
+        var _a;
+        return [renderHeader(), renderDescription(), _createVNode("div", {
+          "class": bem("content")
+        }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
+      }
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/action-sheet/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _ActionSheet from "./ActionSheet.mjs";
+const ActionSheet = withInstall(_ActionSheet);
+var stdin_default = ActionSheet;
+export {
+  ActionSheet,
+  stdin_default as default
+};

package/es/address-edit/AddressEdit.mjs

@@ -0,0 +1,288 @@
+import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import { ref, watch, computed, nextTick, reactive, defineComponent } from "vue";
+import { extend, isObject, isMobile, truthProp, numericProp, makeArrayProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { useExpose } from "../composables/use-expose.mjs";
+import { Area } from "../area/index.mjs";
+import { Cell } from "../cell/index.mjs";
+import { Form } from "../form/index.mjs";
+import { Field } from "../field/index.mjs";
+import { Popup } from "../popup/index.mjs";
+import { showToast } from "../toast/index.mjs";
+import { Button } from "../button/index.mjs";
+import { Switch } from "../switch/index.mjs";
+import AddressEditDetail from "./AddressEditDetail.mjs";
+import { AREA_EMPTY_CODE } from "../area/utils.mjs";
+const [name, bem, t] = createNamespace("address-edit");
+const DEFAULT_DATA = {
+  name: "",
+  tel: "",
+  city: "",
+  county: "",
+  country: "",
+  province: "",
+  areaCode: "",
+  isDefault: false,
+  addressDetail: ""
+};
+const addressEditProps = {
+  areaList: Object,
+  isSaving: Boolean,
+  isDeleting: Boolean,
+  validator: Function,
+  showArea: truthProp,
+  showDetail: truthProp,
+  showDelete: Boolean,
+  disableArea: Boolean,
+  searchResult: Array,
+  telMaxlength: numericProp,
+  showSetDefault: Boolean,
+  saveButtonText: String,
+  areaPlaceholder: String,
+  deleteButtonText: String,
+  showSearchResult: Boolean,
+  detailRows: makeNumericProp(1),
+  detailMaxlength: makeNumericProp(200),
+  areaColumnsPlaceholder: makeArrayProp(),
+  addressInfo: {
+    type: Object,
+    default: () => extend({}, DEFAULT_DATA)
+  },
+  telValidator: {
+    type: Function,
+    default: isMobile
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: addressEditProps,
+  emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const areaRef = ref();
+    const data = reactive({});
+    const showAreaPopup = ref(false);
+    const detailFocused = ref(false);
+    const areaListLoaded = computed(() => isObject(props.areaList) && Object.keys(props.areaList).length);
+    const areaText = computed(() => {
+      const {
+        province,
+        city,
+        county,
+        areaCode
+      } = data;
+      if (areaCode) {
+        const arr = [province, city, county];
+        if (province && province === city) {
+          arr.splice(1, 1);
+        }
+        return arr.filter(Boolean).join("/");
+      }
+      return "";
+    });
+    const hideBottomFields = computed(() => {
+      var _a;
+      return ((_a = props.searchResult) == null ? void 0 : _a.length) && detailFocused.value;
+    });
+    const onFocus = (key) => {
+      detailFocused.value = key === "addressDetail";
+      emit("focus", key);
+    };
+    const rules = computed(() => {
+      const {
+        validator,
+        telValidator
+      } = props;
+      const makeRule = (name2, emptyMessage) => ({
+        validator: (value) => {
+          if (validator) {
+            const message = validator(name2, value);
+            if (message) {
+              return message;
+            }
+          }
+          if (!value) {
+            return emptyMessage;
+          }
+          return true;
+        }
+      });
+      return {
+        name: [makeRule("name", t("nameEmpty"))],
+        tel: [makeRule("tel", t("telInvalid")), {
+          validator: telValidator,
+          message: t("telInvalid")
+        }],
+        areaCode: [makeRule("areaCode", t("areaEmpty"))],
+        addressDetail: [makeRule("addressDetail", t("addressEmpty"))]
+      };
+    });
+    const onSave = () => emit("save", data);
+    const onChangeDetail = (val) => {
+      data.addressDetail = val;
+      emit("changeDetail", val);
+    };
+    const assignAreaText = (options) => {
+      data.province = options[0].text;
+      data.city = options[1].text;
+      data.county = options[2].text;
+    };
+    const onAreaConfirm = ({
+      selectedValues,
+      selectedOptions
+    }) => {
+      if (selectedValues.some((value) => value === AREA_EMPTY_CODE)) {
+        showToast(t("areaEmpty"));
+      } else {
+        showAreaPopup.value = false;
+        assignAreaText(selectedOptions);
+        emit("changeArea", selectedOptions);
+      }
+    };
+    const onDelete = () => emit("delete", data);
+    const setAreaCode = (code) => {
+      data.areaCode = code || "";
+    };
+    const onDetailBlur = () => {
+      setTimeout(() => {
+        detailFocused.value = false;
+      });
+    };
+    const setAddressDetail = (value) => {
+      data.addressDetail = value;
+    };
+    const renderSetDefaultCell = () => {
+      if (props.showSetDefault) {
+        const slots2 = {
+          "right-icon": () => _createVNode(Switch, {
+            "modelValue": data.isDefault,
+            "onUpdate:modelValue": ($event) => data.isDefault = $event,
+            "onChange": (event) => emit("changeDefault", event)
+          }, null)
+        };
+        return _withDirectives(_createVNode(Cell, {
+          "center": true,
+          "title": t("defaultAddress"),
+          "class": bem("default")
+        }, slots2), [[_vShow, !hideBottomFields.value]]);
+      }
+    };
+    useExpose({
+      setAreaCode,
+      setAddressDetail
+    });
+    watch(() => props.addressInfo, (value) => {
+      extend(data, DEFAULT_DATA, value);
+      nextTick(() => {
+        var _a;
+        const options = (_a = areaRef.value) == null ? void 0 : _a.getSelectedOptions();
+        if (options && options.every((option) => option && option.value !== AREA_EMPTY_CODE)) {
+          assignAreaText(options);
+        }
+      });
+    }, {
+      deep: true,
+      immediate: true
+    });
+    return () => {
+      const {
+        disableArea
+      } = props;
+      return _createVNode(Form, {
+        "class": bem(),
+        "onSubmit": onSave
+      }, {
+        default: () => {
+          var _a;
+          return [_createVNode("div", {
+            "class": bem("fields")
+          }, [_createVNode(Field, {
+            "modelValue": data.name,
+            "onUpdate:modelValue": ($event) => data.name = $event,
+            "clearable": true,
+            "label": t("name"),
+            "rules": rules.value.name,
+            "placeholder": t("name"),
+            "onFocus": () => onFocus("name")
+          }, null), _createVNode(Field, {
+            "modelValue": data.tel,
+            "onUpdate:modelValue": ($event) => data.tel = $event,
+            "clearable": true,
+            "type": "tel",
+            "label": t("tel"),
+            "rules": rules.value.tel,
+            "maxlength": props.telMaxlength,
+            "placeholder": t("tel"),
+            "onFocus": () => onFocus("tel")
+          }, null), _withDirectives(_createVNode(Field, {
+            "readonly": true,
+            "label": t("area"),
+            "is-link": !disableArea,
+            "modelValue": areaText.value,
+            "rules": rules.value.areaCode,
+            "placeholder": props.areaPlaceholder || t("area"),
+            "onFocus": () => onFocus("areaCode"),
+            "onClick": () => {
+              emit("clickArea");
+              showAreaPopup.value = !disableArea;
+            }
+          }, null), [[_vShow, props.showArea]]), _createVNode(AddressEditDetail, {
+            "show": props.showDetail,
+            "rows": props.detailRows,
+            "rules": rules.value.addressDetail,
+            "value": data.addressDetail,
+            "focused": detailFocused.value,
+            "maxlength": props.detailMaxlength,
+            "searchResult": props.searchResult,
+            "showSearchResult": props.showSearchResult,
+            "onBlur": onDetailBlur,
+            "onFocus": () => onFocus("addressDetail"),
+            "onInput": onChangeDetail,
+            "onSelectSearch": (event) => emit("selectSearch", event)
+          }, null), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderSetDefaultCell(), _withDirectives(_createVNode("div", {
+            "class": bem("buttons")
+          }, [_createVNode(Button, {
+            "block": true,
+            "round": true,
+            "type": "primary",
+            "text": props.saveButtonText || t("save"),
+            "class": bem("button"),
+            "loading": props.isSaving,
+            "nativeType": "submit"
+          }, null), props.showDelete && _createVNode(Button, {
+            "block": true,
+            "round": true,
+            "class": bem("button"),
+            "loading": props.isDeleting,
+            "text": props.deleteButtonText || t("delete"),
+            "onClick": onDelete
+          }, null)]), [[_vShow, !hideBottomFields.value]]), _createVNode(Popup, {
+            "show": showAreaPopup.value,
+            "onUpdate:show": ($event) => showAreaPopup.value = $event,
+            "round": true,
+            "teleport": "body",
+            "position": "bottom",
+            "lazyRender": false
+          }, {
+            default: () => [_createVNode(Area, {
+              "modelValue": data.areaCode,
+              "onUpdate:modelValue": ($event) => data.areaCode = $event,
+              "ref": areaRef,
+              "loading": !areaListLoaded.value,
+              "areaList": props.areaList,
+              "columnsPlaceholder": props.areaColumnsPlaceholder,
+              "onConfirm": onAreaConfirm,
+              "onCancel": () => {
+                showAreaPopup.value = false;
+              }
+            }, null)]
+          })];
+        }
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};