Form.js 5.3 KB

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