| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.formProps = exports.default = void 0;
- var _vue = require("vue");
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
- var _classNames = _interopRequireDefault(require("../_util/classNames"));
- var _warning = _interopRequireDefault(require("../_util/warning"));
- var _FormItem = _interopRequireDefault(require("./FormItem"));
- var _valueUtil = require("./utils/valueUtil");
- var _messages = require("./utils/messages");
- var _asyncUtil = require("./utils/asyncUtil");
- var _typeUtil = require("./utils/typeUtil");
- var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
- var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));
- var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
- var _type = require("../_util/type");
- var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
- var _context = require("./context");
- var _useForm = _interopRequireDefault(require("./useForm"));
- var _context2 = require("../config-provider/context");
- var _style = _interopRequireDefault(require("./style"));
- var _SizeContext = require("../config-provider/SizeContext");
- var _DisabledContext = require("../config-provider/DisabledContext");
- const formProps = () => ({
- layout: _vueTypes.default.oneOf((0, _type.tuple)('horizontal', 'inline', 'vertical')),
- labelCol: (0, _type.objectType)(),
- wrapperCol: (0, _type.objectType)(),
- colon: (0, _type.booleanType)(),
- labelAlign: (0, _type.stringType)(),
- labelWrap: (0, _type.booleanType)(),
- prefixCls: String,
- requiredMark: (0, _type.someType)([String, Boolean]),
- /** @deprecated Will warning in future branch. Pls use `requiredMark` instead. */
- hideRequiredMark: (0, _type.booleanType)(),
- model: _vueTypes.default.object,
- rules: (0, _type.objectType)(),
- validateMessages: (0, _type.objectType)(),
- validateOnRuleChange: (0, _type.booleanType)(),
- // 提交失败自动滚动到第一个错误字段
- scrollToFirstError: (0, _type.anyType)(),
- onSubmit: (0, _type.functionType)(),
- name: String,
- validateTrigger: (0, _type.someType)([String, Array]),
- size: (0, _type.stringType)(),
- disabled: (0, _type.booleanType)(),
- onValuesChange: (0, _type.functionType)(),
- onFieldsChange: (0, _type.functionType)(),
- onFinish: (0, _type.functionType)(),
- onFinishFailed: (0, _type.functionType)(),
- onValidate: (0, _type.functionType)()
- });
- exports.formProps = formProps;
- function isEqualName(name1, name2) {
- return (0, _isEqual.default)((0, _typeUtil.toArray)(name1), (0, _typeUtil.toArray)(name2));
- }
- const Form = (0, _vue.defineComponent)({
- compatConfig: {
- MODE: 3
- },
- name: 'AForm',
- inheritAttrs: false,
- props: (0, _initDefaultProps.default)(formProps(), {
- layout: 'horizontal',
- hideRequiredMark: false,
- colon: true
- }),
- Item: _FormItem.default,
- useForm: _useForm.default,
- // emits: ['finishFailed', 'submit', 'finish', 'validate'],
- setup(props, _ref) {
- let {
- emit,
- slots,
- expose,
- attrs
- } = _ref;
- const {
- prefixCls,
- direction,
- form: contextForm,
- size,
- disabled
- } = (0, _useConfigInject.default)('form', props);
- const requiredMark = (0, _vue.computed)(() => props.requiredMark === '' || props.requiredMark);
- const mergedRequiredMark = (0, _vue.computed)(() => {
- var _a;
- if (requiredMark.value !== undefined) {
- return requiredMark.value;
- }
- if (contextForm && ((_a = contextForm.value) === null || _a === void 0 ? void 0 : _a.requiredMark) !== undefined) {
- return contextForm.value.requiredMark;
- }
- if (props.hideRequiredMark) {
- return false;
- }
- return true;
- });
- (0, _SizeContext.useProviderSize)(size);
- (0, _DisabledContext.useProviderDisabled)(disabled);
- const mergedColon = (0, _vue.computed)(() => {
- var _a, _b;
- return (_a = props.colon) !== null && _a !== void 0 ? _a : (_b = contextForm.value) === null || _b === void 0 ? void 0 : _b.colon;
- });
- const {
- validateMessages: globalValidateMessages
- } = (0, _context2.useInjectGlobalForm)();
- const validateMessages = (0, _vue.computed)(() => {
- return (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, _messages.defaultValidateMessages), globalValidateMessages.value), props.validateMessages);
- });
- // Style
- const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
- const formClassName = (0, _vue.computed)(() => (0, _classNames.default)(prefixCls.value, {
- [`${prefixCls.value}-${props.layout}`]: true,
- [`${prefixCls.value}-hide-required-mark`]: mergedRequiredMark.value === false,
- [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
- [`${prefixCls.value}-${size.value}`]: size.value
- }, hashId.value));
- const lastValidatePromise = (0, _vue.ref)();
- const fields = {};
- const addField = (eventKey, field) => {
- fields[eventKey] = field;
- };
- const removeField = eventKey => {
- delete fields[eventKey];
- };
- const getFieldsByNameList = nameList => {
- const provideNameList = !!nameList;
- const namePathList = provideNameList ? (0, _typeUtil.toArray)(nameList).map(_valueUtil.getNamePath) : [];
- if (!provideNameList) {
- return Object.values(fields);
- } else {
- return Object.values(fields).filter(field => namePathList.findIndex(namePath => isEqualName(namePath, field.fieldName.value)) > -1);
- }
- };
- const resetFields = name => {
- if (!props.model) {
- (0, _warning.default)(false, 'Form', 'model is required for resetFields to work.');
- return;
- }
- getFieldsByNameList(name).forEach(field => {
- field.resetField();
- });
- };
- const clearValidate = name => {
- getFieldsByNameList(name).forEach(field => {
- field.clearValidate();
- });
- };
- const handleFinishFailed = errorInfo => {
- const {
- scrollToFirstError
- } = props;
- emit('finishFailed', errorInfo);
- if (scrollToFirstError && errorInfo.errorFields.length) {
- let scrollToFieldOptions = {};
- if (typeof scrollToFirstError === 'object') {
- scrollToFieldOptions = scrollToFirstError;
- }
- scrollToField(errorInfo.errorFields[0].name, scrollToFieldOptions);
- }
- };
- const validate = function () {
- return validateField(...arguments);
- };
- const scrollToField = function (name) {
- let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
- const fields = getFieldsByNameList(name ? [name] : undefined);
- if (fields.length) {
- const fieldId = fields[0].fieldId.value;
- const node = fieldId ? document.getElementById(fieldId) : null;
- if (node) {
- (0, _scrollIntoViewIfNeeded.default)(node, (0, _extends2.default)({
- scrollMode: 'if-needed',
- block: 'nearest'
- }, options));
- }
- }
- };
- // eslint-disable-next-line no-unused-vars
- const getFieldsValue = function () {
- let nameList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
- if (nameList === true) {
- const allNameList = [];
- Object.values(fields).forEach(_ref2 => {
- let {
- namePath
- } = _ref2;
- allNameList.push(namePath.value);
- });
- return (0, _valueUtil.cloneByNamePathList)(props.model, allNameList);
- } else {
- return (0, _valueUtil.cloneByNamePathList)(props.model, nameList);
- }
- };
- const validateFields = (nameList, options) => {
- (0, _warning.default)(!(nameList instanceof Function), 'Form', 'validateFields/validateField/validate not support callback, please use promise instead');
- if (!props.model) {
- (0, _warning.default)(false, 'Form', 'model is required for validateFields to work.');
- return Promise.reject('Form `model` is required for validateFields to work.');
- }
- const provideNameList = !!nameList;
- const namePathList = provideNameList ? (0, _typeUtil.toArray)(nameList).map(_valueUtil.getNamePath) : [];
- // Collect result in promise list
- const promiseList = [];
- Object.values(fields).forEach(field => {
- var _a;
- // Add field if not provide `nameList`
- if (!provideNameList) {
- namePathList.push(field.namePath.value);
- }
- // Skip if without rule
- if (!((_a = field.rules) === null || _a === void 0 ? void 0 : _a.value.length)) {
- return;
- }
- const fieldNamePath = field.namePath.value;
- // Add field validate rule in to promise list
- if (!provideNameList || (0, _valueUtil.containsNamePath)(namePathList, fieldNamePath)) {
- const promise = field.validateRules((0, _extends2.default)({
- validateMessages: validateMessages.value
- }, options));
- // Wrap promise with field
- promiseList.push(promise.then(() => ({
- name: fieldNamePath,
- errors: [],
- warnings: []
- })).catch(ruleErrors => {
- const mergedErrors = [];
- const mergedWarnings = [];
- ruleErrors.forEach(_ref3 => {
- let {
- rule: {
- warningOnly
- },
- errors
- } = _ref3;
- if (warningOnly) {
- mergedWarnings.push(...errors);
- } else {
- mergedErrors.push(...errors);
- }
- });
- if (mergedErrors.length) {
- return Promise.reject({
- name: fieldNamePath,
- errors: mergedErrors,
- warnings: mergedWarnings
- });
- }
- return {
- name: fieldNamePath,
- errors: mergedErrors,
- warnings: mergedWarnings
- };
- }));
- }
- });
- const summaryPromise = (0, _asyncUtil.allPromiseFinish)(promiseList);
- lastValidatePromise.value = summaryPromise;
- const returnPromise = summaryPromise.then(() => {
- if (lastValidatePromise.value === summaryPromise) {
- return Promise.resolve(getFieldsValue(namePathList));
- }
- return Promise.reject([]);
- }).catch(results => {
- const errorList = results.filter(result => result && result.errors.length);
- return Promise.reject({
- values: getFieldsValue(namePathList),
- errorFields: errorList,
- outOfDate: lastValidatePromise.value !== summaryPromise
- });
- });
- // Do not throw in console
- returnPromise.catch(e => e);
- return returnPromise;
- };
- const validateField = function () {
- return validateFields(...arguments);
- };
- const handleSubmit = e => {
- e.preventDefault();
- e.stopPropagation();
- emit('submit', e);
- if (props.model) {
- const res = validateFields();
- res.then(values => {
- emit('finish', values);
- }).catch(errors => {
- handleFinishFailed(errors);
- });
- }
- };
- expose({
- resetFields,
- clearValidate,
- validateFields,
- getFieldsValue,
- validate,
- scrollToField
- });
- (0, _context.useProvideForm)({
- model: (0, _vue.computed)(() => props.model),
- name: (0, _vue.computed)(() => props.name),
- labelAlign: (0, _vue.computed)(() => props.labelAlign),
- labelCol: (0, _vue.computed)(() => props.labelCol),
- labelWrap: (0, _vue.computed)(() => props.labelWrap),
- wrapperCol: (0, _vue.computed)(() => props.wrapperCol),
- vertical: (0, _vue.computed)(() => props.layout === 'vertical'),
- colon: mergedColon,
- requiredMark: mergedRequiredMark,
- validateTrigger: (0, _vue.computed)(() => props.validateTrigger),
- rules: (0, _vue.computed)(() => props.rules),
- addField,
- removeField,
- onValidate: (name, status, errors) => {
- emit('validate', name, status, errors);
- },
- validateMessages
- });
- (0, _vue.watch)(() => props.rules, () => {
- if (props.validateOnRuleChange) {
- validateFields();
- }
- });
- return () => {
- var _a;
- return wrapSSR((0, _vue.createVNode)("form", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
- "onSubmit": handleSubmit,
- "class": [formClassName.value, attrs.class]
- }), [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)]));
- };
- }
- });
- var _default = exports.default = Form;
|