169 lines
4.4 KiB
JavaScript
169 lines
4.4 KiB
JavaScript
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
|
|
};
|