form2.mjs 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import { defineComponent, computed, watch, provide, reactive, toRefs, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from 'vue';
  2. import '../../../utils/index.mjs';
  3. import '../../../tokens/index.mjs';
  4. import '../../../hooks/index.mjs';
  5. import { formProps, formEmits } from './form.mjs';
  6. import { filterFields, useFormLabelWidth } from './utils.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { useSize } from '../../../hooks/use-common-props/index.mjs';
  9. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  10. import { debugWarn } from '../../../utils/error.mjs';
  11. import { isFunction } from '@vue/shared';
  12. import { formContextKey } from '../../../tokens/form.mjs';
  13. const COMPONENT_NAME = "ElForm";
  14. const __default__ = defineComponent({
  15. name: COMPONENT_NAME
  16. });
  17. const _sfc_main = /* @__PURE__ */ defineComponent({
  18. ...__default__,
  19. props: formProps,
  20. emits: formEmits,
  21. setup(__props, { expose, emit }) {
  22. const props = __props;
  23. const fields = [];
  24. const formSize = useSize();
  25. const ns = useNamespace("form");
  26. const formClasses = computed(() => {
  27. const { labelPosition, inline } = props;
  28. return [
  29. ns.b(),
  30. ns.m(formSize.value || "default"),
  31. {
  32. [ns.m(`label-${labelPosition}`)]: labelPosition,
  33. [ns.m("inline")]: inline
  34. }
  35. ];
  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. } catch (fields3) {
  84. validationErrors = {
  85. ...validationErrors,
  86. ...fields3
  87. };
  88. }
  89. }
  90. if (Object.keys(validationErrors).length === 0)
  91. return true;
  92. return Promise.reject(validationErrors);
  93. };
  94. const validateField = async (modelProps = [], callback) => {
  95. const shouldThrow = !isFunction(callback);
  96. try {
  97. const result = await doValidateField(modelProps);
  98. if (result === true) {
  99. callback == null ? void 0 : callback(result);
  100. }
  101. return result;
  102. } catch (e) {
  103. if (e instanceof Error)
  104. throw e;
  105. const invalidFields = e;
  106. if (props.scrollToError) {
  107. scrollToField(Object.keys(invalidFields)[0]);
  108. }
  109. callback == null ? void 0 : callback(false, invalidFields);
  110. return shouldThrow && Promise.reject(invalidFields);
  111. }
  112. };
  113. const scrollToField = (prop) => {
  114. var _a;
  115. const field = filterFields(fields, prop)[0];
  116. if (field) {
  117. (_a = field.$el) == null ? void 0 : _a.scrollIntoView();
  118. }
  119. };
  120. watch(() => props.rules, () => {
  121. if (props.validateOnRuleChange) {
  122. validate().catch((err) => debugWarn(err));
  123. }
  124. }, { deep: true });
  125. provide(formContextKey, reactive({
  126. ...toRefs(props),
  127. emit,
  128. resetFields,
  129. clearValidate,
  130. validateField,
  131. addField,
  132. removeField,
  133. ...useFormLabelWidth()
  134. }));
  135. expose({
  136. validate,
  137. validateField,
  138. resetFields,
  139. clearValidate,
  140. scrollToField
  141. });
  142. return (_ctx, _cache) => {
  143. return openBlock(), createElementBlock("form", {
  144. class: normalizeClass(unref(formClasses))
  145. }, [
  146. renderSlot(_ctx.$slots, "default")
  147. ], 2);
  148. };
  149. }
  150. });
  151. var Form = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/form/src/form.vue"]]);
  152. export { Form as default };
  153. //# sourceMappingURL=form2.mjs.map