Form.js 5.1 KB

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