index.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../utils");
  5. var _vnodes = require("../utils/vnodes");
  6. var _createNamespace = (0, _utils.createNamespace)('form'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. var _default = createComponent({
  10. props: {
  11. colon: Boolean,
  12. disabled: Boolean,
  13. readonly: Boolean,
  14. labelWidth: [Number, String],
  15. labelAlign: String,
  16. inputAlign: String,
  17. scrollToError: Boolean,
  18. validateFirst: Boolean,
  19. errorMessageAlign: String,
  20. submitOnEnter: {
  21. type: Boolean,
  22. default: true
  23. },
  24. validateTrigger: {
  25. type: String,
  26. default: 'onBlur'
  27. },
  28. showError: {
  29. type: Boolean,
  30. default: true
  31. },
  32. showErrorMessage: {
  33. type: Boolean,
  34. default: true
  35. }
  36. },
  37. provide: function provide() {
  38. return {
  39. vanForm: this
  40. };
  41. },
  42. data: function data() {
  43. return {
  44. fields: []
  45. };
  46. },
  47. methods: {
  48. getFieldsByNames: function getFieldsByNames(names) {
  49. if (names) {
  50. return this.fields.filter(function (field) {
  51. return names.indexOf(field.name) !== -1;
  52. });
  53. }
  54. return this.fields;
  55. },
  56. validateSeq: function validateSeq(names) {
  57. var _this = this;
  58. return new Promise(function (resolve, reject) {
  59. var errors = [];
  60. var fields = _this.getFieldsByNames(names);
  61. fields.reduce(function (promise, field) {
  62. return promise.then(function () {
  63. if (!errors.length) {
  64. return field.validate().then(function (error) {
  65. if (error) {
  66. errors.push(error);
  67. }
  68. });
  69. }
  70. });
  71. }, Promise.resolve()).then(function () {
  72. if (errors.length) {
  73. reject(errors);
  74. } else {
  75. resolve();
  76. }
  77. });
  78. });
  79. },
  80. validateFields: function validateFields(names) {
  81. var _this2 = this;
  82. return new Promise(function (resolve, reject) {
  83. var fields = _this2.getFieldsByNames(names);
  84. Promise.all(fields.map(function (item) {
  85. return item.validate();
  86. })).then(function (errors) {
  87. errors = errors.filter(function (item) {
  88. return item;
  89. });
  90. if (errors.length) {
  91. reject(errors);
  92. } else {
  93. resolve();
  94. }
  95. });
  96. });
  97. },
  98. // @exposed-api
  99. validate: function validate(name) {
  100. if (name && !Array.isArray(name)) {
  101. return this.validateField(name);
  102. }
  103. return this.validateFirst ? this.validateSeq(name) : this.validateFields(name);
  104. },
  105. validateField: function validateField(name) {
  106. var matched = this.fields.filter(function (item) {
  107. return item.name === name;
  108. });
  109. if (matched.length) {
  110. return new Promise(function (resolve, reject) {
  111. matched[0].validate().then(function (error) {
  112. if (error) {
  113. reject(error);
  114. } else {
  115. resolve();
  116. }
  117. });
  118. });
  119. }
  120. return Promise.reject();
  121. },
  122. // @exposed-api
  123. resetValidation: function resetValidation(name) {
  124. if (name && !Array.isArray(name)) {
  125. name = [name];
  126. }
  127. var fields = this.getFieldsByNames(name);
  128. fields.forEach(function (item) {
  129. item.resetValidation();
  130. });
  131. },
  132. // @exposed-api
  133. scrollToField: function scrollToField(name, options) {
  134. this.fields.some(function (item) {
  135. if (item.name === name) {
  136. item.$el.scrollIntoView(options);
  137. return true;
  138. }
  139. return false;
  140. });
  141. },
  142. addField: function addField(field) {
  143. this.fields.push(field);
  144. (0, _vnodes.sortChildren)(this.fields, this);
  145. },
  146. removeField: function removeField(field) {
  147. this.fields = this.fields.filter(function (item) {
  148. return item !== field;
  149. });
  150. },
  151. getValues: function getValues() {
  152. return this.fields.reduce(function (form, field) {
  153. form[field.name] = field.formValue;
  154. return form;
  155. }, {});
  156. },
  157. onSubmit: function onSubmit(event) {
  158. event.preventDefault();
  159. this.submit();
  160. },
  161. // @exposed-api
  162. submit: function submit() {
  163. var _this3 = this;
  164. var values = this.getValues();
  165. this.validate().then(function () {
  166. _this3.$emit('submit', values);
  167. }).catch(function (errors) {
  168. _this3.$emit('failed', {
  169. values: values,
  170. errors: errors
  171. });
  172. if (_this3.scrollToError) {
  173. _this3.scrollToField(errors[0].name);
  174. }
  175. });
  176. }
  177. },
  178. render: function render() {
  179. var h = arguments[0];
  180. return h("form", {
  181. "class": bem(),
  182. "on": {
  183. "submit": this.onSubmit
  184. }
  185. }, [this.slots()]);
  186. }
  187. });
  188. exports.default = _default;