Form.js 5.1 KB

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