123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- import { defineComponent, createVNode as _createVNode } 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,
- required: [Boolean, String],
- showError: Boolean,
- labelWidth: numericProp,
- labelAlign: String,
- inputAlign: String,
- scrollToError: Boolean,
- scrollToErrorPosition: String,
- 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) => {
- if (field.name !== void 0) {
- form[field.name] = field.formValue.value;
- }
- return form;
- }, {});
- const submit = () => {
- const values = getValues();
- validate().then(() => emit("submit", values)).catch((errors) => {
- emit("failed", {
- values,
- errors
- });
- const {
- scrollToError,
- scrollToErrorPosition
- } = props;
- if (scrollToError && errors[0].name) {
- scrollToField(errors[0].name, scrollToErrorPosition ? {
- block: scrollToErrorPosition
- } : void 0);
- }
- });
- };
- 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,
- formProps
- };
|