form2.mjs 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. import { defineComponent, 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 fields = reactive([]);
  21. const formSize = useFormSize();
  22. const ns = useNamespace("form");
  23. const formClasses = computed(() => {
  24. const { labelPosition, inline } = props;
  25. return [
  26. ns.b(),
  27. ns.m(formSize.value || "default"),
  28. {
  29. [ns.m(`label-${labelPosition}`)]: labelPosition,
  30. [ns.m("inline")]: inline
  31. }
  32. ];
  33. });
  34. const getField = (prop) => {
  35. return fields.find((field) => field.prop === prop);
  36. };
  37. const addField = (field) => {
  38. fields.push(field);
  39. };
  40. const removeField = (field) => {
  41. if (field.prop) {
  42. fields.splice(fields.indexOf(field), 1);
  43. }
  44. };
  45. const resetFields = (properties = []) => {
  46. if (!props.model) {
  47. debugWarn(COMPONENT_NAME, "model is required for resetFields to work.");
  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. if (!hasModel) {
  58. debugWarn(COMPONENT_NAME, "model is required for validate to work.");
  59. }
  60. return hasModel;
  61. });
  62. const obtainValidateFields = (props2) => {
  63. if (fields.length === 0)
  64. return [];
  65. const filteredFields = filterFields(fields, props2);
  66. if (!filteredFields.length) {
  67. debugWarn(COMPONENT_NAME, "please pass correct props!");
  68. return [];
  69. }
  70. return filteredFields;
  71. };
  72. const validate = async (callback) => validateField(void 0, callback);
  73. const doValidateField = async (props2 = []) => {
  74. if (!isValidatable.value)
  75. return false;
  76. const fields2 = obtainValidateFields(props2);
  77. if (fields2.length === 0)
  78. return true;
  79. let validationErrors = {};
  80. for (const field of fields2) {
  81. try {
  82. await field.validate("");
  83. if (field.validateState === "error")
  84. field.resetField();
  85. } catch (fields3) {
  86. validationErrors = {
  87. ...validationErrors,
  88. ...fields3
  89. };
  90. }
  91. }
  92. if (Object.keys(validationErrors).length === 0)
  93. return true;
  94. return Promise.reject(validationErrors);
  95. };
  96. const validateField = async (modelProps = [], callback) => {
  97. const shouldThrow = !isFunction(callback);
  98. try {
  99. const result = await doValidateField(modelProps);
  100. if (result === true) {
  101. await (callback == null ? void 0 : callback(result));
  102. }
  103. return result;
  104. } catch (e) {
  105. if (e instanceof Error)
  106. throw e;
  107. const invalidFields = e;
  108. if (props.scrollToError) {
  109. scrollToField(Object.keys(invalidFields)[0]);
  110. }
  111. 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 = filterFields(fields, prop)[0];
  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(err));
  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. fields
  145. });
  146. return (_ctx, _cache) => {
  147. return openBlock(), createElementBlock("form", {
  148. class: normalizeClass(unref(formClasses))
  149. }, [
  150. renderSlot(_ctx.$slots, "default")
  151. ], 2);
  152. };
  153. }
  154. });
  155. var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "form.vue"]]);
  156. export { Form as default };
  157. //# sourceMappingURL=form2.mjs.map