Form.mjs 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import { defineComponent, createVNode as _createVNode } from "vue";
  2. import { FORM_KEY, truthProp, numericProp, preventDefault, createNamespace } from "../utils/index.mjs";
  3. import { useChildren } from "@vant/use";
  4. import { useExpose } from "../composables/use-expose.mjs";
  5. const [name, bem] = createNamespace("form");
  6. const formProps = {
  7. colon: Boolean,
  8. disabled: Boolean,
  9. readonly: Boolean,
  10. required: [Boolean, String],
  11. showError: Boolean,
  12. labelWidth: numericProp,
  13. labelAlign: String,
  14. inputAlign: String,
  15. scrollToError: Boolean,
  16. scrollToErrorPosition: String,
  17. validateFirst: Boolean,
  18. submitOnEnter: truthProp,
  19. showErrorMessage: truthProp,
  20. errorMessageAlign: String,
  21. validateTrigger: {
  22. type: [String, Array],
  23. default: "onBlur"
  24. }
  25. };
  26. var stdin_default = defineComponent({
  27. name,
  28. props: formProps,
  29. emits: ["submit", "failed"],
  30. setup(props, {
  31. emit,
  32. slots
  33. }) {
  34. const {
  35. children,
  36. linkChildren
  37. } = useChildren(FORM_KEY);
  38. const getFieldsByNames = (names) => {
  39. if (names) {
  40. return children.filter((field) => names.includes(field.name));
  41. }
  42. return children;
  43. };
  44. const validateSeq = (names) => new Promise((resolve, reject) => {
  45. const errors = [];
  46. const fields = getFieldsByNames(names);
  47. fields.reduce((promise, field) => promise.then(() => {
  48. if (!errors.length) {
  49. return field.validate().then((error) => {
  50. if (error) {
  51. errors.push(error);
  52. }
  53. });
  54. }
  55. }), Promise.resolve()).then(() => {
  56. if (errors.length) {
  57. reject(errors);
  58. } else {
  59. resolve();
  60. }
  61. });
  62. });
  63. const validateAll = (names) => new Promise((resolve, reject) => {
  64. const fields = getFieldsByNames(names);
  65. Promise.all(fields.map((item) => item.validate())).then((errors) => {
  66. errors = errors.filter(Boolean);
  67. if (errors.length) {
  68. reject(errors);
  69. } else {
  70. resolve();
  71. }
  72. });
  73. });
  74. const validateField = (name2) => {
  75. const matched = children.find((item) => item.name === name2);
  76. if (matched) {
  77. return new Promise((resolve, reject) => {
  78. matched.validate().then((error) => {
  79. if (error) {
  80. reject(error);
  81. } else {
  82. resolve();
  83. }
  84. });
  85. });
  86. }
  87. return Promise.reject();
  88. };
  89. const validate = (name2) => {
  90. if (typeof name2 === "string") {
  91. return validateField(name2);
  92. }
  93. return props.validateFirst ? validateSeq(name2) : validateAll(name2);
  94. };
  95. const resetValidation = (name2) => {
  96. if (typeof name2 === "string") {
  97. name2 = [name2];
  98. }
  99. const fields = getFieldsByNames(name2);
  100. fields.forEach((item) => {
  101. item.resetValidation();
  102. });
  103. };
  104. const getValidationStatus = () => children.reduce((form, field) => {
  105. form[field.name] = field.getValidationStatus();
  106. return form;
  107. }, {});
  108. const scrollToField = (name2, options) => {
  109. children.some((item) => {
  110. if (item.name === name2) {
  111. item.$el.scrollIntoView(options);
  112. return true;
  113. }
  114. return false;
  115. });
  116. };
  117. const getValues = () => children.reduce((form, field) => {
  118. if (field.name !== void 0) {
  119. form[field.name] = field.formValue.value;
  120. }
  121. return form;
  122. }, {});
  123. const submit = () => {
  124. const values = getValues();
  125. validate().then(() => emit("submit", values)).catch((errors) => {
  126. emit("failed", {
  127. values,
  128. errors
  129. });
  130. const {
  131. scrollToError,
  132. scrollToErrorPosition
  133. } = props;
  134. if (scrollToError && errors[0].name) {
  135. scrollToField(errors[0].name, scrollToErrorPosition ? {
  136. block: scrollToErrorPosition
  137. } : void 0);
  138. }
  139. });
  140. };
  141. const onSubmit = (event) => {
  142. preventDefault(event);
  143. submit();
  144. };
  145. linkChildren({
  146. props
  147. });
  148. useExpose({
  149. submit,
  150. validate,
  151. getValues,
  152. scrollToField,
  153. resetValidation,
  154. getValidationStatus
  155. });
  156. return () => {
  157. var _a;
  158. return _createVNode("form", {
  159. "class": bem(),
  160. "onSubmit": onSubmit
  161. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
  162. };
  163. }
  164. });
  165. export {
  166. stdin_default as default,
  167. formProps
  168. };