vant 4.0.0-alpha.2 → 4.0.0-beta.0

package/es/form/Form.mjs

@@ -0,0 +1,158 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { FORM_KEY, truthProp, numericProp, preventDefault, createNamespace } from "../utils/index.mjs";
+import { useChildren } from "@vant/use";
+import { useExpose } from "../composables/use-expose.mjs";
+const [name, bem] = createNamespace("form");
+const formProps = {
+  colon: Boolean,
+  disabled: Boolean,
+  readonly: Boolean,
+  showError: Boolean,
+  labelWidth: numericProp,
+  labelAlign: String,
+  inputAlign: String,
+  scrollToError: Boolean,
+  validateFirst: Boolean,
+  submitOnEnter: truthProp,
+  showErrorMessage: truthProp,
+  errorMessageAlign: String,
+  validateTrigger: {
+    type: [String, Array],
+    default: "onBlur"
+  }
+};
+var stdin_default = defineComponent({
+  name,
+  props: formProps,
+  emits: ["submit", "failed"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const {
+      children,
+      linkChildren
+    } = useChildren(FORM_KEY);
+    const getFieldsByNames = (names) => {
+      if (names) {
+        return children.filter((field) => names.includes(field.name));
+      }
+      return children;
+    };
+    const validateSeq = (names) => new Promise((resolve, reject) => {
+      const errors = [];
+      const fields = getFieldsByNames(names);
+      fields.reduce((promise, field) => promise.then(() => {
+        if (!errors.length) {
+          return field.validate().then((error) => {
+            if (error) {
+              errors.push(error);
+            }
+          });
+        }
+      }), Promise.resolve()).then(() => {
+        if (errors.length) {
+          reject(errors);
+        } else {
+          resolve();
+        }
+      });
+    });
+    const validateAll = (names) => new Promise((resolve, reject) => {
+      const fields = getFieldsByNames(names);
+      Promise.all(fields.map((item) => item.validate())).then((errors) => {
+        errors = errors.filter(Boolean);
+        if (errors.length) {
+          reject(errors);
+        } else {
+          resolve();
+        }
+      });
+    });
+    const validateField = (name2) => {
+      const matched = children.find((item) => item.name === name2);
+      if (matched) {
+        return new Promise((resolve, reject) => {
+          matched.validate().then((error) => {
+            if (error) {
+              reject(error);
+            } else {
+              resolve();
+            }
+          });
+        });
+      }
+      return Promise.reject();
+    };
+    const validate = (name2) => {
+      if (typeof name2 === "string") {
+        return validateField(name2);
+      }
+      return props.validateFirst ? validateSeq(name2) : validateAll(name2);
+    };
+    const resetValidation = (name2) => {
+      if (typeof name2 === "string") {
+        name2 = [name2];
+      }
+      const fields = getFieldsByNames(name2);
+      fields.forEach((item) => {
+        item.resetValidation();
+      });
+    };
+    const getValidationStatus = () => children.reduce((form, field) => {
+      form[field.name] = field.getValidationStatus();
+      return form;
+    }, {});
+    const scrollToField = (name2, options) => {
+      children.some((item) => {
+        if (item.name === name2) {
+          item.$el.scrollIntoView(options);
+          return true;
+        }
+        return false;
+      });
+    };
+    const getValues = () => children.reduce((form, field) => {
+      form[field.name] = field.formValue.value;
+      return form;
+    }, {});
+    const submit = () => {
+      const values = getValues();
+      validate().then(() => emit("submit", values)).catch((errors) => {
+        emit("failed", {
+          values,
+          errors
+        });
+        if (props.scrollToError && errors[0].name) {
+          scrollToField(errors[0].name);
+        }
+      });
+    };
+    const onSubmit = (event) => {
+      preventDefault(event);
+      submit();
+    };
+    linkChildren({
+      props
+    });
+    useExpose({
+      submit,
+      validate,
+      getValues,
+      scrollToField,
+      resetValidation,
+      getValidationStatus
+    });
+    return () => {
+      var _a;
+      return _createVNode("form", {
+        "class": bem(),
+        "onSubmit": onSubmit
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/form/index.d.ts

@@ -13,15 +13,15 @@ export declare const Form: import("../utils").WithInstall<import("vue").DefineCo
         type: BooleanConstructor;
         default: true;
     };
-    validateTrigger: {
-        type: import("vue").PropType<import("..").FieldValidateTrigger>;
-        default: import("..").FieldValidateTrigger;
-    };
     showErrorMessage: {
         type: BooleanConstructor;
         default: true;
     };
     errorMessageAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    validateTrigger: {
+        type: import("vue").PropType<import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[]>;
+        default: string;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "failed")[], "submit" | "failed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     colon: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -36,15 +36,15 @@ export declare const Form: import("../utils").WithInstall<import("vue").DefineCo
         type: BooleanConstructor;
         default: true;
     };
-    validateTrigger: {
-        type: import("vue").PropType<import("..").FieldValidateTrigger>;
-        default: import("..").FieldValidateTrigger;
-    };
     showErrorMessage: {
         type: BooleanConstructor;
         default: true;
     };
     errorMessageAlign: import("vue").PropType<import("..").FieldTextAlign>;
+    validateTrigger: {
+        type: import("vue").PropType<import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[]>;
+        default: string;
+    };
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
     onFailed?: ((...args: any[]) => any) | undefined;
@@ -56,8 +56,8 @@ export declare const Form: import("../utils").WithInstall<import("vue").DefineCo
     scrollToError: boolean;
     validateFirst: boolean;
     submitOnEnter: boolean;
-    validateTrigger: import("..").FieldValidateTrigger;
     showErrorMessage: boolean;
+    validateTrigger: import("..").FieldValidateTrigger | import("..").FieldValidateTrigger[];
 }>>;
 export default Form;
 export type { FormProps };

package/es/form/index.mjs

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

package/es/form/types.d.ts

@@ -1,11 +1,13 @@
 import type { ComponentPublicInstance } from 'vue';
 import type { FormProps } from './Form';
+import type { FieldValidationStatus } from '../field';
 export declare type FormExpose = {
     submit: () => void;
     validate: (name?: string | string[] | undefined) => Promise<void>;
     getValues: () => Record<string, unknown>;
     scrollToField: (name: string, options?: boolean | ScrollIntoViewOptions | undefined) => void;
     resetValidation: (name?: string | string[] | undefined) => void;
+    getValidationStatus: () => Record<string, FieldValidationStatus>;
 };
 export declare type FormProvide = {
     props: FormProps;

package/es/grid/Grid.mjs

@@ -0,0 +1,47 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { createNamespace, addUnit, truthProp, numericProp, makeNumericProp } from "../utils/index.mjs";
+import { BORDER_TOP } from "../utils/constant.mjs";
+import { useChildren } from "@vant/use";
+const [name, bem] = createNamespace("grid");
+const gridProps = {
+  square: Boolean,
+  center: truthProp,
+  border: truthProp,
+  gutter: numericProp,
+  reverse: Boolean,
+  iconSize: numericProp,
+  direction: String,
+  clickable: Boolean,
+  columnNum: makeNumericProp(4)
+};
+const GRID_KEY = Symbol(name);
+var stdin_default = defineComponent({
+  name,
+  props: gridProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      linkChildren
+    } = useChildren(GRID_KEY);
+    linkChildren({
+      props
+    });
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "style": {
+          paddingLeft: addUnit(props.gutter)
+        },
+        "class": [bem(), {
+          [BORDER_TOP]: props.border && !props.gutter
+        }]
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  GRID_KEY,
+  stdin_default as default
+};

package/es/grid/index.mjs

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

package/es/grid-item/GridItem.mjs

@@ -0,0 +1,145 @@
+import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
+import { computed, defineComponent } from "vue";
+import { BORDER, extend, addUnit, numericProp, createNamespace } from "../utils/index.mjs";
+import { GRID_KEY } from "../grid/Grid.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("grid-item");
+const gridItemProps = extend({}, routeProps, {
+  dot: Boolean,
+  text: String,
+  icon: String,
+  badge: numericProp,
+  iconColor: String,
+  iconPrefix: String,
+  badgeProps: Object
+});
+var stdin_default = defineComponent({
+  name,
+  props: gridItemProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      parent,
+      index
+    } = useParent(GRID_KEY);
+    const route = useRoute();
+    if (!parent) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error("[Vant] <GridItem> must be a child component of <Grid>.");
+      }
+      return;
+    }
+    const rootStyle = computed(() => {
+      const {
+        square,
+        gutter,
+        columnNum
+      } = parent.props;
+      const percent = `${100 / +columnNum}%`;
+      const style = {
+        flexBasis: percent
+      };
+      if (square) {
+        style.paddingTop = percent;
+      } else if (gutter) {
+        const gutterValue = addUnit(gutter);
+        style.paddingRight = gutterValue;
+        if (index.value >= columnNum) {
+          style.marginTop = gutterValue;
+        }
+      }
+      return style;
+    });
+    const contentStyle = computed(() => {
+      const {
+        square,
+        gutter
+      } = parent.props;
+      if (square && gutter) {
+        const gutterValue = addUnit(gutter);
+        return {
+          right: gutterValue,
+          bottom: gutterValue,
+          height: "auto"
+        };
+      }
+    });
+    const renderIcon = () => {
+      if (slots.icon) {
+        return _createVNode(Badge, _mergeProps({
+          "dot": props.dot,
+          "content": props.badge
+        }, props.badgeProps), {
+          default: slots.icon
+        });
+      }
+      if (props.icon) {
+        return _createVNode(Icon, {
+          "dot": props.dot,
+          "name": props.icon,
+          "size": parent.props.iconSize,
+          "badge": props.badge,
+          "class": bem("icon"),
+          "color": props.iconColor,
+          "badgeProps": props.badgeProps,
+          "classPrefix": props.iconPrefix
+        }, null);
+      }
+    };
+    const renderText = () => {
+      if (slots.text) {
+        return slots.text();
+      }
+      if (props.text) {
+        return _createVNode("span", {
+          "class": bem("text")
+        }, [props.text]);
+      }
+    };
+    const renderContent = () => {
+      if (slots.default) {
+        return slots.default();
+      }
+      return [renderIcon(), renderText()];
+    };
+    return () => {
+      const {
+        center,
+        border,
+        square,
+        gutter,
+        reverse,
+        direction,
+        clickable
+      } = parent.props;
+      const classes = [bem("content", [direction, {
+        center,
+        square,
+        reverse,
+        clickable,
+        surround: border && gutter
+      }]), {
+        [BORDER]: border
+      }];
+      return _createVNode("div", {
+        "class": [bem({
+          square
+        })],
+        "style": rootStyle.value
+      }, [_createVNode("div", {
+        "role": clickable ? "button" : void 0,
+        "class": classes,
+        "style": contentStyle.value,
+        "tabindex": clickable ? 0 : void 0,
+        "onClick": route
+      }, [renderContent()])]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/grid-item/index.mjs

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

package/es/icon/Icon.mjs

@@ -0,0 +1,59 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { inject, computed, defineComponent } from "vue";
+import { addUnit, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Badge } from "../badge/index.mjs";
+import { CONFIG_PROVIDER_KEY } from "../config-provider/ConfigProvider.mjs";
+const [name, bem] = createNamespace("icon");
+const isImage = (name2) => name2 == null ? void 0 : name2.includes("/");
+const iconProps = {
+  dot: Boolean,
+  tag: makeStringProp("i"),
+  name: String,
+  size: numericProp,
+  badge: numericProp,
+  color: String,
+  badgeProps: Object,
+  classPrefix: String
+};
+var stdin_default = defineComponent({
+  name,
+  props: iconProps,
+  setup(props, {
+    slots
+  }) {
+    const config = inject(CONFIG_PROVIDER_KEY, null);
+    const classPrefix = computed(() => props.classPrefix || (config == null ? void 0 : config.iconPrefix) || bem());
+    return () => {
+      const {
+        tag,
+        dot,
+        name: name2,
+        size,
+        badge,
+        color
+      } = props;
+      const isImageIcon = isImage(name2);
+      return _createVNode(Badge, _mergeProps({
+        "dot": dot,
+        "tag": tag,
+        "class": [classPrefix.value, isImageIcon ? "" : `${classPrefix.value}-${name2}`],
+        "style": {
+          color,
+          fontSize: addUnit(size)
+        },
+        "content": badge
+      }, props.badgeProps), {
+        default: () => {
+          var _a;
+          return [(_a = slots.default) == null ? void 0 : _a.call(slots), isImageIcon && _createVNode("img", {
+            "class": bem("image"),
+            "src": name2
+          }, null)];
+        }
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/icon/index.mjs

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

package/es/image/Image.mjs

@@ -0,0 +1,149 @@
+import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import { ref, watch, computed, nextTick, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
+import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+import { Icon } from "../icon/index.mjs";
+const [name, bem] = createNamespace("image");
+const imageProps = {
+  src: String,
+  alt: String,
+  fit: String,
+  position: String,
+  round: Boolean,
+  width: numericProp,
+  height: numericProp,
+  radius: numericProp,
+  lazyLoad: Boolean,
+  iconSize: numericProp,
+  showError: truthProp,
+  errorIcon: makeStringProp("photo-fail"),
+  iconPrefix: String,
+  showLoading: truthProp,
+  loadingIcon: makeStringProp("photo")
+};
+var stdin_default = defineComponent({
+  name,
+  props: imageProps,
+  emits: ["load", "error"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const error = ref(false);
+    const loading = ref(true);
+    const imageRef = ref();
+    const {
+      $Lazyload
+    } = getCurrentInstance().proxy;
+    const style = computed(() => {
+      const style2 = {
+        width: addUnit(props.width),
+        height: addUnit(props.height)
+      };
+      if (isDef(props.radius)) {
+        style2.overflow = "hidden";
+        style2.borderRadius = addUnit(props.radius);
+      }
+      return style2;
+    });
+    watch(() => props.src, () => {
+      error.value = false;
+      loading.value = true;
+    });
+    const onLoad = (event) => {
+      loading.value = false;
+      emit("load", event);
+    };
+    const onError = (event) => {
+      error.value = true;
+      loading.value = false;
+      emit("error", event);
+    };
+    const renderIcon = (name2, className, slot) => {
+      if (slot) {
+        return slot();
+      }
+      return _createVNode(Icon, {
+        "name": name2,
+        "size": props.iconSize,
+        "class": className,
+        "classPrefix": props.iconPrefix
+      }, null);
+    };
+    const renderPlaceholder = () => {
+      if (loading.value && props.showLoading) {
+        return _createVNode("div", {
+          "class": bem("loading")
+        }, [renderIcon(props.loadingIcon, bem("loading-icon"), slots.loading)]);
+      }
+      if (error.value && props.showError) {
+        return _createVNode("div", {
+          "class": bem("error")
+        }, [renderIcon(props.errorIcon, bem("error-icon"), slots.error)]);
+      }
+    };
+    const renderImage = () => {
+      if (error.value || !props.src) {
+        return;
+      }
+      const attrs = {
+        alt: props.alt,
+        class: bem("img"),
+        style: {
+          objectFit: props.fit,
+          objectPosition: props.position
+        }
+      };
+      if (props.lazyLoad) {
+        return _withDirectives(_createVNode("img", _mergeProps({
+          "ref": imageRef
+        }, attrs), null), [[_resolveDirective("lazy"), props.src]]);
+      }
+      return _createVNode("img", _mergeProps({
+        "src": props.src,
+        "onLoad": onLoad,
+        "onError": onError
+      }, attrs), null);
+    };
+    const onLazyLoaded = ({
+      el
+    }) => {
+      const check = () => {
+        if (el === imageRef.value && loading.value) {
+          onLoad();
+        }
+      };
+      if (imageRef.value) {
+        check();
+      } else {
+        nextTick(check);
+      }
+    };
+    const onLazyLoadError = ({
+      el
+    }) => {
+      if (el === imageRef.value && !error.value) {
+        onError();
+      }
+    };
+    if ($Lazyload && inBrowser) {
+      $Lazyload.$on("loaded", onLazyLoaded);
+      $Lazyload.$on("error", onLazyLoadError);
+      onBeforeUnmount(() => {
+        $Lazyload.$off("loaded", onLazyLoaded);
+        $Lazyload.$off("error", onLazyLoadError);
+      });
+    }
+    return () => {
+      var _a;
+      return _createVNode("div", {
+        "class": bem({
+          round: props.round
+        }),
+        "style": style.value
+      }, [renderImage(), renderPlaceholder(), (_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/image/index.mjs

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