7252f4b43e41692a9a85964586c1c3e43ae2789d8bc902560d5ee065a33bebcdfd0d94dbf58bfca308514fd5e25a50f9c34beacb96b8aee0d4dda398944473 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. import { defineComponent, ref, reactive, computed, watch, provide, toRefs, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
  2. import { formContextKey } from './constants.mjs';
  3. import { formProps, formEmits } from './form.mjs';
  4. import { useFormLabelWidth, filterFields } from './utils.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { useFormSize } from './hooks/use-form-common-props.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { debugWarn } from '../../../utils/error.mjs';
  9. import { isFunction } from '@vue/shared';
  10. const COMPONENT_NAME = "ElForm";
  11. const __default__ = defineComponent({
  12. name: COMPONENT_NAME
  13. });
  14. const _sfc_main = /* @__PURE__ */ defineComponent({
  15. ...__default__,
  16. props: formProps,
  17. emits: formEmits,
  18. setup(__props, { expose, emit }) {
  19. const props = __props;
  20. const formRef = ref();
  21. const fields = reactive([]);
  22. const formSize = useFormSize();
  23. const ns = useNamespace("form");
  24. const formClasses = computed(() => {
  25. const { labelPosition, inline } = props;
  26. return [
  27. ns.b(),
  28. ns.m(formSize.value || "default"),
  29. {
  30. [ns.m(`label-${labelPosition}`)]: labelPosition,
  31. [ns.m("inline")]: inline
  32. }
  33. ];
  34. });
  35. const getField = (prop) => {
  36. return filterFields(fields, [prop])[0];
  37. };
  38. const addField = (field) => {
  39. fields.push(field);
  40. };
  41. const removeField = (field) => {
  42. if (field.prop) {
  43. fields.splice(fields.indexOf(field), 1);
  44. }
  45. };
  46. const resetFields = (properties = []) => {
  47. if (!props.model) {
  48. return;
  49. }
  50. filterFields(fields, properties).forEach((field) => field.resetField());
  51. };
  52. const clearValidate = (props2 = []) => {
  53. filterFields(fields, props2).forEach((field) => field.clearValidate());
  54. };
  55. const isValidatable = computed(() => {
  56. const hasModel = !!props.model;
  57. return hasModel;
  58. });
  59. const obtainValidateFields = (props2) => {
  60. if (fields.length === 0)
  61. return [];
  62. const filteredFields = filterFields(fields, props2);
  63. if (!filteredFields.length) {
  64. return [];
  65. }
  66. return filteredFields;
  67. };
  68. const validate = async (callback) => validateField(void 0, callback);
  69. const doValidateField = async (props2 = []) => {
  70. if (!isValidatable.value)
  71. return false;
  72. const fields2 = obtainValidateFields(props2);
  73. if (fields2.length === 0)
  74. return true;
  75. let validationErrors = {};
  76. for (const field of fields2) {
  77. try {
  78. await field.validate("");
  79. if (field.validateState === "error" && !field.error)
  80. field.resetField();
  81. } catch (fields3) {
  82. validationErrors = {
  83. ...validationErrors,
  84. ...fields3
  85. };
  86. }
  87. }
  88. if (Object.keys(validationErrors).length === 0)
  89. return true;
  90. return Promise.reject(validationErrors);
  91. };
  92. const validateField = async (modelProps = [], callback) => {
  93. let result = false;
  94. const shouldThrow = !isFunction(callback);
  95. try {
  96. result = await doValidateField(modelProps);
  97. if (result === true) {
  98. await (callback == null ? void 0 : callback(result));
  99. }
  100. return result;
  101. } catch (e) {
  102. if (e instanceof Error)
  103. throw e;
  104. const invalidFields = e;
  105. if (props.scrollToError) {
  106. if (formRef.value) {
  107. const formItem = formRef.value.querySelector(`.${ns.b()}-item.is-error`);
  108. formItem == null ? void 0 : formItem.scrollIntoView(props.scrollIntoViewOptions);
  109. }
  110. }
  111. !result && await (callback == null ? void 0 : callback(false, invalidFields));
  112. return shouldThrow && Promise.reject(invalidFields);
  113. }
  114. };
  115. const scrollToField = (prop) => {
  116. var _a;
  117. const field = getField(prop);
  118. if (field) {
  119. (_a = field.$el) == null ? void 0 : _a.scrollIntoView(props.scrollIntoViewOptions);
  120. }
  121. };
  122. watch(() => props.rules, () => {
  123. if (props.validateOnRuleChange) {
  124. validate().catch((err) => debugWarn());
  125. }
  126. }, { deep: true, flush: "post" });
  127. provide(formContextKey, reactive({
  128. ...toRefs(props),
  129. emit,
  130. resetFields,
  131. clearValidate,
  132. validateField,
  133. getField,
  134. addField,
  135. removeField,
  136. ...useFormLabelWidth()
  137. }));
  138. expose({
  139. validate,
  140. validateField,
  141. resetFields,
  142. clearValidate,
  143. scrollToField,
  144. getField,
  145. fields
  146. });
  147. return (_ctx, _cache) => {
  148. return openBlock(), createElementBlock("form", {
  149. ref_key: "formRef",
  150. ref: formRef,
  151. class: normalizeClass(unref(formClasses))
  152. }, [
  153. renderSlot(_ctx.$slots, "default")
  154. ], 2);
  155. };
  156. }
  157. });
  158. var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form.vue"]]);
  159. export { Form as default };
  160. //# sourceMappingURL=form2.mjs.map