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.5KB

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