element-plus
Version:
A Component Library for Vue 3
223 lines (220 loc) • 6.81 kB
JavaScript
import { formEmits, formProps } from './form.mjs';
import { defineComponent, ref, reactive, computed, watch, provide, toRefs, createElementBlock, openBlock, normalizeClass, renderSlot } from 'vue';
import { has } from 'lodash-unified';
import { formContextKey } from './constants.mjs';
import { useFormLabelWidth, filterFields } from './utils.mjs';
import { useFormSize } from './hooks/use-form-common-props.mjs';
import { getProp } from '../../../utils/objects.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { debugWarn } from '../../../utils/error.mjs';
import { isFunction } from '@vue/shared';
const COMPONENT_NAME = "ElForm";
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: COMPONENT_NAME
},
__name: "form",
props: formProps,
emits: formEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const formRef = ref();
const fields = reactive([]);
const formSize = useFormSize();
const ns = useNamespace("form");
const formClasses = computed(() => {
const { labelPosition, inline } = props;
return [
ns.b(),
ns.m(formSize.value || "default"),
{
[ns.m(`label-${labelPosition}`)]: labelPosition,
[ns.m("inline")]: inline
}
];
});
const getField = (prop) => {
return filterFields(fields, [prop])[0];
};
const addField = (field) => {
fields.push(field);
};
const removeField = (field) => {
if (field.prop) {
fields.splice(fields.indexOf(field), 1);
}
};
const setInitialValues = (initModel) => {
if (!props.model) {
debugWarn(COMPONENT_NAME, "model is required for setInitialValues to work.");
return;
}
if (!initModel) {
debugWarn(
COMPONENT_NAME,
"initModel is required for setInitialValues to work."
);
return;
}
fields.forEach((field) => {
if (field.prop) {
if (has(initModel, field.prop)) {
const initValue = getProp(initModel, field.prop).value;
field.setInitialValue(initValue);
}
}
});
};
const resetFields = (properties = []) => {
if (!props.model) {
debugWarn(COMPONENT_NAME, "model is required for resetFields to work.");
return;
}
filterFields(fields, properties).forEach((field) => field.resetField());
};
const clearValidate = (props2 = []) => {
filterFields(fields, props2).forEach((field) => field.clearValidate());
};
const isValidatable = computed(() => {
const hasModel = !!props.model;
if (!hasModel) {
debugWarn(COMPONENT_NAME, "model is required for validate to work.");
}
return hasModel;
});
const obtainValidateFields = (props2) => {
if (fields.length === 0) return [];
const filteredFields = filterFields(fields, props2);
if (!filteredFields.length) {
debugWarn(COMPONENT_NAME, "please pass correct props!");
return [];
}
return filteredFields;
};
const validate = async (callback) => validateField(void 0, callback);
const doValidateField = async (props2 = []) => {
if (!isValidatable.value) return false;
const fields2 = obtainValidateFields(props2);
if (fields2.length === 0) return true;
let validationErrors = {};
for (const field of fields2) {
try {
await field.validate("");
if (field.validateState === "error" && !field.error) field.resetField();
} catch (fields3) {
validationErrors = {
...validationErrors,
...fields3
};
}
}
if (Object.keys(validationErrors).length === 0) return true;
return Promise.reject(validationErrors);
};
const validateField = async (modelProps = [], callback) => {
let result = false;
const shouldThrow = !isFunction(callback);
try {
result = await doValidateField(modelProps);
if (result === true) {
await (callback == null ? void 0 : callback(result));
}
return result;
} catch (e) {
if (e instanceof Error) throw e;
const invalidFields = e;
if (props.scrollToError) {
if (formRef.value) {
const formItem = formRef.value.querySelector(`.${ns.b()}-item.is-error`);
formItem == null ? void 0 : formItem.scrollIntoView(props.scrollIntoViewOptions);
}
}
!result && await (callback == null ? void 0 : callback(false, invalidFields));
return shouldThrow && Promise.reject(invalidFields);
}
};
const scrollToField = (prop) => {
var _a;
const field = getField(prop);
if (field) {
(_a = field.$el) == null ? void 0 : _a.scrollIntoView(props.scrollIntoViewOptions);
}
};
watch(
() => props.rules,
() => {
if (props.validateOnRuleChange) {
validate().catch((err) => debugWarn(err));
}
},
{ deep: true, flush: "post" }
);
provide(
formContextKey,
reactive({
...toRefs(props),
emit,
resetFields,
clearValidate,
validateField,
getField,
addField,
removeField,
setInitialValues,
...useFormLabelWidth()
})
);
__expose({
/**
* @description Validate the whole form. Receives a callback or returns `Promise`.
*/
validate,
/**
* @description Validate specified fields.
*/
validateField,
/**
* @description Reset specified fields and remove validation result.
*/
resetFields,
/**
* @description Clear validation message for specified fields.
*/
clearValidate,
/**
* @description Scroll to the specified fields.
*/
scrollToField,
/**
* @description Get a field context.
*/
getField,
/**
* @description All fields context.
*/
fields,
/**
* @description Set initial values for form fields. When `resetFields` is called, fields will reset to these values. Only fields present in `initModel` will be updated.
*/
setInitialValues
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
"form",
{
ref_key: "formRef",
ref: formRef,
class: normalizeClass(formClasses.value)
},
[
renderSlot(_ctx.$slots, "default")
],
2
/* CLASS */
);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=form.vue2.mjs.map