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

package/es/config-provider/ConfigProvider.mjs

@@ -0,0 +1,69 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, provide, computed, watchEffect, onActivated, onDeactivated, onBeforeUnmount, defineComponent } from "vue";
+import { extend, inBrowser, kebabCase, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { setGlobalZIndex } from "../composables/use-global-z-index.mjs";
+const [name, bem] = createNamespace("config-provider");
+const CONFIG_PROVIDER_KEY = Symbol(name);
+const configProviderProps = {
+  tag: makeStringProp("div"),
+  theme: makeStringProp("light"),
+  zIndex: Number,
+  themeVars: Object,
+  themeVarsDark: Object,
+  themeVarsLight: Object,
+  iconPrefix: String
+};
+function mapThemeVarsToCSSVars(themeVars) {
+  const cssVars = {};
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--van-${kebabCase(key)}`] = themeVars[key];
+  });
+  return cssVars;
+}
+var stdin_default = defineComponent({
+  name,
+  props: configProviderProps,
+  setup(props, {
+    slots
+  }) {
+    const style = computed(() => mapThemeVarsToCSSVars(extend({}, props.themeVars, props.theme === "dark" ? props.themeVarsDark : props.themeVarsLight)));
+    if (inBrowser) {
+      const addTheme = () => {
+        document.body.classList.add(`van-theme-${props.theme}`);
+      };
+      const removeTheme = (theme = props.theme) => {
+        document.body.classList.remove(`van-theme-${theme}`);
+      };
+      watch(() => props.theme, (newVal, oldVal) => {
+        if (oldVal) {
+          removeTheme(oldVal);
+        }
+        addTheme();
+      }, {
+        immediate: true
+      });
+      onActivated(addTheme);
+      onDeactivated(removeTheme);
+      onBeforeUnmount(removeTheme);
+    }
+    provide(CONFIG_PROVIDER_KEY, props);
+    watchEffect(() => {
+      if (props.zIndex !== void 0) {
+        setGlobalZIndex(props.zIndex);
+      }
+    });
+    return () => _createVNode(props.tag, {
+      "class": bem(),
+      "style": style.value
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    });
+  }
+});
+export {
+  CONFIG_PROVIDER_KEY,
+  stdin_default as default
+};

package/es/config-provider/index.d.ts

@@ -7,7 +7,10 @@ export declare const ConfigProvider: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
         default: import("./ConfigProvider").ConfigProviderTheme;
     };
-    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: import("./ConfigProvider").ThemeVars;
+    themeVarsDark: import("./ConfigProvider").ThemeVars;
+    themeVarsLight: import("./ConfigProvider").ThemeVars;
     iconPrefix: StringConstructor;
 }, () => 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<{
     tag: {
@@ -18,7 +21,10 @@ export declare const ConfigProvider: import("../utils").WithInstall<import("vue"
         type: import("vue").PropType<import("./ConfigProvider").ConfigProviderTheme>;
         default: import("./ConfigProvider").ConfigProviderTheme;
     };
-    themeVars: import("vue").PropType<Record<string, import("../utils").Numeric>>;
+    zIndex: NumberConstructor;
+    themeVars: import("./ConfigProvider").ThemeVars;
+    themeVarsDark: import("./ConfigProvider").ThemeVars;
+    themeVarsLight: import("./ConfigProvider").ThemeVars;
     iconPrefix: StringConstructor;
 }>>, {
     tag: keyof HTMLElementTagNameMap;

package/es/config-provider/index.mjs

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

package/es/contact-card/ContactCard.mjs

@@ -0,0 +1,46 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { truthProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Cell } from "../cell/index.mjs";
+const [name, bem, t] = createNamespace("contact-card");
+const contactCardProps = {
+  tel: String,
+  name: String,
+  type: makeStringProp("add"),
+  addText: String,
+  editable: truthProp
+};
+var stdin_default = defineComponent({
+  name,
+  props: contactCardProps,
+  emits: ["click"],
+  setup(props, {
+    emit
+  }) {
+    const onClick = (event) => {
+      if (props.editable) {
+        emit("click", event);
+      }
+    };
+    const renderContent = () => {
+      if (props.type === "add") {
+        return props.addText || t("addContact");
+      }
+      return [_createVNode("div", null, [`${t("name")}\uFF1A${props.name}`]), _createVNode("div", null, [`${t("tel")}\uFF1A${props.tel}`])];
+    };
+    return () => _createVNode(Cell, {
+      "center": true,
+      "icon": props.type === "edit" ? "contact" : "add-square",
+      "class": bem([props.type]),
+      "border": false,
+      "isLink": props.editable,
+      "titleClass": bem("title"),
+      "onClick": onClick
+    }, {
+      title: renderContent
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/contact-card/index.mjs

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

package/es/contact-edit/ContactEdit.mjs

@@ -0,0 +1,112 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, reactive, defineComponent } from "vue";
+import { isMobile, createNamespace, extend } from "../utils/index.mjs";
+import { Cell } from "../cell/index.mjs";
+import { Form } from "../form/index.mjs";
+import { Field } from "../field/index.mjs";
+import { Button } from "../button/index.mjs";
+import { Switch } from "../switch/index.mjs";
+const [name, bem, t] = createNamespace("contact-edit");
+const DEFAULT_CONTACT = {
+  tel: "",
+  name: ""
+};
+const contactEditProps = {
+  isEdit: Boolean,
+  isSaving: Boolean,
+  isDeleting: Boolean,
+  showSetDefault: Boolean,
+  setDefaultLabel: String,
+  contactInfo: {
+    type: Object,
+    default: () => extend({}, DEFAULT_CONTACT)
+  },
+  telValidator: {
+    type: Function,
+    default: isMobile
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: contactEditProps,
+  emits: ["save", "delete", "changeDefault"],
+  setup(props, {
+    emit
+  }) {
+    const contact = reactive(extend({}, DEFAULT_CONTACT, props.contactInfo));
+    const onSave = () => {
+      if (!props.isSaving) {
+        emit("save", contact);
+      }
+    };
+    const onDelete = () => emit("delete", contact);
+    const renderButtons = () => _createVNode("div", {
+      "class": bem("buttons")
+    }, [_createVNode(Button, {
+      "block": true,
+      "round": true,
+      "type": "primary",
+      "text": t("save"),
+      "class": bem("button"),
+      "loading": props.isSaving,
+      "nativeType": "submit"
+    }, null), props.isEdit && _createVNode(Button, {
+      "block": true,
+      "round": true,
+      "text": t("delete"),
+      "class": bem("button"),
+      "loading": props.isDeleting,
+      "onClick": onDelete
+    }, null)]);
+    const renderSwitch = () => _createVNode(Switch, {
+      "modelValue": contact.isDefault,
+      "onUpdate:modelValue": ($event) => contact.isDefault = $event,
+      "onChange": (checked) => emit("changeDefault", checked)
+    }, null);
+    const renderSetDefault = () => {
+      if (props.showSetDefault) {
+        return _createVNode(Cell, {
+          "title": props.setDefaultLabel,
+          "class": bem("switch-cell"),
+          "border": false
+        }, {
+          "right-icon": renderSwitch
+        });
+      }
+    };
+    watch(() => props.contactInfo, (value) => extend(contact, DEFAULT_CONTACT, value));
+    return () => _createVNode(Form, {
+      "class": bem(),
+      "onSubmit": onSave
+    }, {
+      default: () => [_createVNode("div", {
+        "class": bem("fields")
+      }, [_createVNode(Field, {
+        "modelValue": contact.name,
+        "onUpdate:modelValue": ($event) => contact.name = $event,
+        "clearable": true,
+        "label": t("name"),
+        "rules": [{
+          required: true,
+          message: t("nameEmpty")
+        }],
+        "maxlength": "30",
+        "placeholder": t("name")
+      }, null), _createVNode(Field, {
+        "modelValue": contact.tel,
+        "onUpdate:modelValue": ($event) => contact.tel = $event,
+        "clearable": true,
+        "type": "tel",
+        "label": t("tel"),
+        "rules": [{
+          validator: props.telValidator,
+          message: t("telInvalid")
+        }],
+        "placeholder": t("tel")
+      }, null)]), renderSetDefault(), renderButtons()]
+    });
+  }
+});
+export {
+  stdin_default as default
+};

package/es/contact-edit/index.mjs

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

package/es/contact-list/ContactList.mjs

@@ -0,0 +1,89 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace, unknownProp } from "../utils/index.mjs";
+import { Tag } from "../tag/index.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Cell } from "../cell/index.mjs";
+import { Radio } from "../radio/index.mjs";
+import { Button } from "../button/index.mjs";
+import { RadioGroup } from "../radio-group/index.mjs";
+const [name, bem, t] = createNamespace("contact-list");
+const contactListProps = {
+  list: Array,
+  addText: String,
+  modelValue: unknownProp,
+  defaultTagText: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: contactListProps,
+  emits: ["add", "edit", "select", "update:modelValue"],
+  setup(props, {
+    emit
+  }) {
+    const renderItem = (item, index) => {
+      const onClick = () => {
+        emit("update:modelValue", item.id);
+        emit("select", item, index);
+      };
+      const renderRightIcon = () => _createVNode(Radio, {
+        "class": bem("radio"),
+        "name": item.id,
+        "iconSize": 16
+      }, null);
+      const renderEditIcon = () => _createVNode(Icon, {
+        "name": "edit",
+        "class": bem("edit"),
+        "onClick": (event) => {
+          event.stopPropagation();
+          emit("edit", item, index);
+        }
+      }, null);
+      const renderContent = () => {
+        const nodes = [`${item.name}\uFF0C${item.tel}`];
+        if (item.isDefault && props.defaultTagText) {
+          nodes.push(_createVNode(Tag, {
+            "type": "primary",
+            "round": true,
+            "class": bem("item-tag")
+          }, {
+            default: () => [props.defaultTagText]
+          }));
+        }
+        return nodes;
+      };
+      return _createVNode(Cell, {
+        "key": item.id,
+        "isLink": true,
+        "center": true,
+        "class": bem("item"),
+        "titleClass": bem("item-title"),
+        "onClick": onClick
+      }, {
+        icon: renderEditIcon,
+        title: renderContent,
+        "right-icon": renderRightIcon
+      });
+    };
+    return () => _createVNode("div", {
+      "class": bem()
+    }, [_createVNode(RadioGroup, {
+      "modelValue": props.modelValue,
+      "class": bem("group")
+    }, {
+      default: () => [props.list && props.list.map(renderItem)]
+    }), _createVNode("div", {
+      "class": [bem("bottom"), "van-safe-area-bottom"]
+    }, [_createVNode(Button, {
+      "round": true,
+      "block": true,
+      "type": "primary",
+      "class": bem("add"),
+      "text": props.addText || t("addContact"),
+      "onClick": () => emit("add")
+    }, null)])]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/contact-list/index.mjs

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

package/es/count-down/CountDown.mjs

@@ -0,0 +1,56 @@
+import { createVNode as _createVNode } from "vue";
+import { watch, computed, defineComponent } from "vue";
+import { truthProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { parseFormat } from "./utils.mjs";
+import { useCountDown } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+const [name, bem] = createNamespace("count-down");
+const countDownProps = {
+  time: makeNumericProp(0),
+  format: makeStringProp("HH:mm:ss"),
+  autoStart: truthProp,
+  millisecond: Boolean
+};
+var stdin_default = defineComponent({
+  name,
+  props: countDownProps,
+  emits: ["change", "finish"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      start,
+      pause,
+      reset,
+      current
+    } = useCountDown({
+      time: +props.time,
+      millisecond: props.millisecond,
+      onChange: (current2) => emit("change", current2),
+      onFinish: () => emit("finish")
+    });
+    const timeText = computed(() => parseFormat(props.format, current.value));
+    const resetTime = () => {
+      reset(+props.time);
+      if (props.autoStart) {
+        start();
+      }
+    };
+    watch(() => props.time, resetTime, {
+      immediate: true
+    });
+    useExpose({
+      start,
+      pause,
+      reset: resetTime
+    });
+    return () => _createVNode("div", {
+      "role": "timer",
+      "class": bem()
+    }, [slots.default ? slots.default(current.value) : timeText.value]);
+  }
+});
+export {
+  stdin_default as default
+};

package/es/count-down/index.mjs

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

package/es/count-down/utils.mjs

@@ -0,0 +1,39 @@
+import { padZero } from "../utils/index.mjs";
+function parseFormat(format, currentTime) {
+  const { days } = currentTime;
+  let { hours, minutes, seconds, milliseconds } = currentTime;
+  if (format.includes("DD")) {
+    format = format.replace("DD", padZero(days));
+  } else {
+    hours += days * 24;
+  }
+  if (format.includes("HH")) {
+    format = format.replace("HH", padZero(hours));
+  } else {
+    minutes += hours * 60;
+  }
+  if (format.includes("mm")) {
+    format = format.replace("mm", padZero(minutes));
+  } else {
+    seconds += minutes * 60;
+  }
+  if (format.includes("ss")) {
+    format = format.replace("ss", padZero(seconds));
+  } else {
+    milliseconds += seconds * 1e3;
+  }
+  if (format.includes("S")) {
+    const ms = padZero(milliseconds, 3);
+    if (format.includes("SSS")) {
+      format = format.replace("SSS", ms);
+    } else if (format.includes("SS")) {
+      format = format.replace("SS", ms.slice(0, 2));
+    } else {
+      format = format.replace("S", ms.charAt(0));
+    }
+  }
+  return format;
+}
+export {
+  parseFormat
+};

package/es/coupon/Coupon.mjs

@@ -0,0 +1,80 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { makeStringProp, createNamespace, makeRequiredProp } from "../utils/index.mjs";
+import { getDate, formatAmount, formatDiscount } from "./utils.mjs";
+import { Checkbox } from "../checkbox/index.mjs";
+const [name, bem, t] = createNamespace("coupon");
+var stdin_default = defineComponent({
+  name,
+  props: {
+    chosen: Boolean,
+    coupon: makeRequiredProp(Object),
+    disabled: Boolean,
+    currency: makeStringProp("\xA5")
+  },
+  setup(props) {
+    const validPeriod = computed(() => {
+      const {
+        startAt,
+        endAt
+      } = props.coupon;
+      return `${getDate(startAt)} - ${getDate(endAt)}`;
+    });
+    const faceAmount = computed(() => {
+      const {
+        coupon,
+        currency
+      } = props;
+      if (coupon.valueDesc) {
+        return [coupon.valueDesc, _createVNode("span", null, [coupon.unitDesc || ""])];
+      }
+      if (coupon.denominations) {
+        const denominations = formatAmount(coupon.denominations);
+        return [_createVNode("span", null, [currency]), ` ${denominations}`];
+      }
+      if (coupon.discount) {
+        return t("discount", formatDiscount(coupon.discount));
+      }
+      return "";
+    });
+    const conditionMessage = computed(() => {
+      const condition = formatAmount(props.coupon.originCondition || 0);
+      return condition === "0" ? t("unlimited") : t("condition", condition);
+    });
+    return () => {
+      const {
+        chosen,
+        coupon,
+        disabled
+      } = props;
+      const description = disabled && coupon.reason || coupon.description;
+      return _createVNode("div", {
+        "class": bem({
+          disabled
+        })
+      }, [_createVNode("div", {
+        "class": bem("content")
+      }, [_createVNode("div", {
+        "class": bem("head")
+      }, [_createVNode("h2", {
+        "class": bem("amount")
+      }, [faceAmount.value]), _createVNode("p", {
+        "class": bem("condition")
+      }, [coupon.condition || conditionMessage.value])]), _createVNode("div", {
+        "class": bem("body")
+      }, [_createVNode("p", {
+        "class": bem("name")
+      }, [coupon.name]), _createVNode("p", {
+        "class": bem("valid")
+      }, [validPeriod.value]), !disabled && _createVNode(Checkbox, {
+        "class": bem("corner"),
+        "modelValue": chosen
+      }, null)])]), description && _createVNode("p", {
+        "class": bem("description")
+      }, [description])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/coupon/index.mjs

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

package/es/coupon/utils.mjs

@@ -0,0 +1,12 @@
+import { padZero } from "../utils/index.mjs";
+function getDate(timeStamp) {
+  const date = new Date(timeStamp * 1e3);
+  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(date.getDate())}`;
+}
+const formatDiscount = (discount) => (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
+const formatAmount = (amount) => (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
+export {
+  formatAmount,
+  formatDiscount,
+  getDate
+};

package/es/coupon-cell/CouponCell.mjs

@@ -0,0 +1,54 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { isDef, truthProp, makeArrayProp, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
+import { Cell } from "../cell/index.mjs";
+const [name, bem, t] = createNamespace("coupon-cell");
+const couponCellProps = {
+  title: String,
+  border: truthProp,
+  editable: truthProp,
+  coupons: makeArrayProp(),
+  currency: makeStringProp("\xA5"),
+  chosenCoupon: makeNumericProp(-1)
+};
+function formatValue({
+  coupons,
+  chosenCoupon,
+  currency
+}) {
+  const coupon = coupons[+chosenCoupon];
+  if (coupon) {
+    let value = 0;
+    if (isDef(coupon.value)) {
+      ({
+        value
+      } = coupon);
+    } else if (isDef(coupon.denominations)) {
+      value = coupon.denominations;
+    }
+    return `-${currency} ${(value / 100).toFixed(2)}`;
+  }
+  return coupons.length === 0 ? t("noCoupon") : t("count", coupons.length);
+}
+var stdin_default = defineComponent({
+  name,
+  props: couponCellProps,
+  setup(props) {
+    return () => {
+      const selected = props.coupons[+props.chosenCoupon];
+      return _createVNode(Cell, {
+        "class": bem(),
+        "value": formatValue(props),
+        "title": props.title || t("title"),
+        "border": props.border,
+        "isLink": props.editable,
+        "valueClass": bem("value", {
+          selected
+        })
+      }, null);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/coupon-cell/index.mjs

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