Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

validatable.js 7.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; // Mixins
  6. // Utilities
  7. var _colorable = require('./colorable');
  8. var _colorable2 = _interopRequireDefault(_colorable);
  9. var _registrable = require('./registrable');
  10. var _helpers = require('../util/helpers');
  11. var _console = require('../util/console');
  12. var _mixins = require('../util/mixins');
  13. var _mixins2 = _interopRequireDefault(_mixins);
  14. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  15. /* @vue/component */
  16. exports.default = (0, _mixins2.default)(_colorable2.default, (0, _registrable.inject)('form')).extend({
  17. name: 'validatable',
  18. props: {
  19. disabled: Boolean,
  20. error: Boolean,
  21. errorCount: {
  22. type: [Number, String],
  23. default: 1
  24. },
  25. errorMessages: {
  26. type: [String, Array],
  27. default: function _default() {
  28. return [];
  29. }
  30. },
  31. messages: {
  32. type: [String, Array],
  33. default: function _default() {
  34. return [];
  35. }
  36. },
  37. readonly: Boolean,
  38. rules: {
  39. type: Array,
  40. default: function _default() {
  41. return [];
  42. }
  43. },
  44. success: Boolean,
  45. successMessages: {
  46. type: [String, Array],
  47. default: function _default() {
  48. return [];
  49. }
  50. },
  51. validateOnBlur: Boolean,
  52. value: { required: false }
  53. },
  54. data: function data() {
  55. return {
  56. errorBucket: [],
  57. hasColor: false,
  58. hasFocused: false,
  59. hasInput: false,
  60. isFocused: false,
  61. isResetting: false,
  62. lazyValue: this.value,
  63. valid: false
  64. };
  65. },
  66. computed: {
  67. hasError: function hasError() {
  68. return this.internalErrorMessages.length > 0 || this.errorBucket.length > 0 || this.error;
  69. },
  70. // TODO: Add logic that allows the user to enable based
  71. // upon a good validation
  72. hasSuccess: function hasSuccess() {
  73. return this.internalSuccessMessages.length > 0 || this.success;
  74. },
  75. externalError: function externalError() {
  76. return this.internalErrorMessages.length > 0 || this.error;
  77. },
  78. hasMessages: function hasMessages() {
  79. return this.validationTarget.length > 0;
  80. },
  81. hasState: function hasState() {
  82. return this.hasSuccess || this.shouldValidate && this.hasError;
  83. },
  84. internalErrorMessages: function internalErrorMessages() {
  85. return this.genInternalMessages(this.errorMessages);
  86. },
  87. internalMessages: function internalMessages() {
  88. return this.genInternalMessages(this.messages);
  89. },
  90. internalSuccessMessages: function internalSuccessMessages() {
  91. return this.genInternalMessages(this.successMessages);
  92. },
  93. internalValue: {
  94. get: function get() {
  95. return this.lazyValue;
  96. },
  97. set: function set(val) {
  98. this.lazyValue = val;
  99. this.$emit('input', val);
  100. }
  101. },
  102. shouldValidate: function shouldValidate() {
  103. if (this.externalError) return true;
  104. if (this.isResetting) return false;
  105. return this.validateOnBlur ? this.hasFocused && !this.isFocused : this.hasInput || this.hasFocused;
  106. },
  107. validations: function validations() {
  108. return this.validationTarget.slice(0, Number(this.errorCount));
  109. },
  110. validationState: function validationState() {
  111. if (this.hasError && this.shouldValidate) return 'error';
  112. if (this.hasSuccess) return 'success';
  113. if (this.hasColor) return this.color;
  114. return undefined;
  115. },
  116. validationTarget: function validationTarget() {
  117. if (this.internalErrorMessages.length > 0) {
  118. return this.internalErrorMessages;
  119. } else if (this.successMessages.length > 0) {
  120. return this.internalSuccessMessages;
  121. } else if (this.messages.length > 0) {
  122. return this.internalMessages;
  123. } else if (this.shouldValidate) {
  124. return this.errorBucket;
  125. } else return [];
  126. }
  127. },
  128. watch: {
  129. rules: {
  130. handler: function handler(newVal, oldVal) {
  131. if ((0, _helpers.deepEqual)(newVal, oldVal)) return;
  132. this.validate();
  133. },
  134. deep: true
  135. },
  136. internalValue: function internalValue() {
  137. // If it's the first time we're setting input,
  138. // mark it with hasInput
  139. this.hasInput = true;
  140. this.validateOnBlur || this.$nextTick(this.validate);
  141. },
  142. isFocused: function isFocused(val) {
  143. // Should not check validation
  144. // if disabled or readonly
  145. if (!val && !this.disabled && !this.readonly) {
  146. this.hasFocused = true;
  147. this.validateOnBlur && this.validate();
  148. }
  149. },
  150. isResetting: function isResetting() {
  151. var _this = this;
  152. setTimeout(function () {
  153. _this.hasInput = false;
  154. _this.hasFocused = false;
  155. _this.isResetting = false;
  156. _this.validate();
  157. }, 0);
  158. },
  159. hasError: function hasError(val) {
  160. if (this.shouldValidate) {
  161. this.$emit('update:error', val);
  162. }
  163. },
  164. value: function value(val) {
  165. this.lazyValue = val;
  166. }
  167. },
  168. beforeMount: function beforeMount() {
  169. this.validate();
  170. },
  171. created: function created() {
  172. this.form && this.form.register(this);
  173. },
  174. beforeDestroy: function beforeDestroy() {
  175. this.form && this.form.unregister(this);
  176. },
  177. methods: {
  178. genInternalMessages: function genInternalMessages(messages) {
  179. if (!messages) return [];else if (Array.isArray(messages)) return messages;else return [messages];
  180. },
  181. /** @public */
  182. reset: function reset() {
  183. this.isResetting = true;
  184. this.internalValue = Array.isArray(this.internalValue) ? [] : undefined;
  185. },
  186. /** @public */
  187. resetValidation: function resetValidation() {
  188. this.isResetting = true;
  189. },
  190. /** @public */
  191. validate: function validate() {
  192. var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
  193. var value = arguments[1];
  194. var errorBucket = [];
  195. value = value || this.internalValue;
  196. if (force) this.hasInput = this.hasFocused = true;
  197. for (var index = 0; index < this.rules.length; index++) {
  198. var rule = this.rules[index];
  199. var valid = typeof rule === 'function' ? rule(value) : rule;
  200. if (typeof valid === 'string') {
  201. errorBucket.push(valid);
  202. } else if (typeof valid !== 'boolean') {
  203. (0, _console.consoleError)('Rules should return a string or boolean, received \'' + (typeof valid === 'undefined' ? 'undefined' : _typeof(valid)) + '\' instead', this);
  204. }
  205. }
  206. this.errorBucket = errorBucket;
  207. this.valid = errorBucket.length === 0;
  208. return this.valid;
  209. }
  210. }
  211. });
  212. //# sourceMappingURL=validatable.js.map