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.

maskable.js 4.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. var _mask = require('../util/mask');
  6. /* @vue/component */
  7. exports.default = {
  8. name: 'maskable',
  9. props: {
  10. dontFillMaskBlanks: Boolean,
  11. mask: {
  12. type: [Object, String],
  13. default: null
  14. },
  15. returnMaskedValue: Boolean,
  16. value: { required: false }
  17. },
  18. data: function data(vm) {
  19. return {
  20. selection: 0,
  21. lazySelection: 0,
  22. lazyValue: vm.value,
  23. preDefined: {
  24. 'credit-card': '#### - #### - #### - ####',
  25. 'date': '##/##/####',
  26. 'date-with-time': '##/##/#### ##:##',
  27. 'phone': '(###) ### - ####',
  28. 'social': '###-##-####',
  29. 'time': '##:##',
  30. 'time-with-seconds': '##:##:##'
  31. }
  32. };
  33. },
  34. computed: {
  35. masked: function masked() {
  36. var preDefined = this.preDefined[this.mask];
  37. var mask = preDefined || this.mask || '';
  38. return mask.split('');
  39. }
  40. },
  41. watch: {
  42. /**
  43. * Make sure the cursor is in the correct
  44. * location when the mask changes
  45. */
  46. mask: function mask() {
  47. var _this = this;
  48. if (!this.$refs.input) return;
  49. var oldValue = this.$refs.input.value;
  50. var newValue = this.maskText((0, _mask.unmaskText)(this.lazyValue));
  51. var position = 0;
  52. var selection = this.selection;
  53. for (var index = 0; index < selection; index++) {
  54. (0, _mask.isMaskDelimiter)(oldValue[index]) || position++;
  55. }
  56. selection = 0;
  57. if (newValue) {
  58. for (var _index = 0; _index < newValue.length; _index++) {
  59. (0, _mask.isMaskDelimiter)(newValue[_index]) || position--;
  60. selection++;
  61. if (position <= 0) break;
  62. }
  63. }
  64. this.$nextTick(function () {
  65. _this.$refs.input.value = newValue;
  66. _this.setCaretPosition(selection);
  67. });
  68. }
  69. },
  70. beforeMount: function beforeMount() {
  71. if (!this.mask || this.value == null || !this.returnMaskedValue) return;
  72. var value = this.maskText(this.value);
  73. // See if masked value does not
  74. // match the user given value
  75. if (value === this.value) return;
  76. this.$emit('input', value);
  77. },
  78. methods: {
  79. setCaretPosition: function setCaretPosition(selection) {
  80. var _this2 = this;
  81. this.selection = selection;
  82. window.setTimeout(function () {
  83. _this2.$refs.input && _this2.$refs.input.setSelectionRange(_this2.selection, _this2.selection);
  84. }, 0);
  85. },
  86. updateRange: function updateRange() {
  87. /* istanbul ignore next */
  88. if (!this.$refs.input) return;
  89. var newValue = this.maskText(this.lazyValue);
  90. var selection = 0;
  91. this.$refs.input.value = newValue;
  92. if (newValue) {
  93. for (var index = 0; index < newValue.length; index++) {
  94. if (this.lazySelection <= 0) break;
  95. (0, _mask.isMaskDelimiter)(newValue[index]) || this.lazySelection--;
  96. selection++;
  97. }
  98. }
  99. this.setCaretPosition(selection);
  100. // this.$emit() must occur only when all internal values are correct
  101. this.$emit('input', this.returnMaskedValue ? this.$refs.input.value : this.lazyValue);
  102. },
  103. maskText: function maskText(text) {
  104. return this.mask ? (0, _mask.maskText)(text, this.masked, this.dontFillMaskBlanks) : text;
  105. },
  106. unmaskText: function unmaskText(text) {
  107. return this.mask && !this.returnMaskedValue ? (0, _mask.unmaskText)(text) : text;
  108. },
  109. // When the input changes and is
  110. // re-created, ensure that the
  111. // caret location is correct
  112. setSelectionRange: function setSelectionRange() {
  113. this.$nextTick(this.updateRange);
  114. },
  115. resetSelections: function resetSelections(input) {
  116. if (!input.selectionEnd) return;
  117. this.selection = input.selectionEnd;
  118. this.lazySelection = 0;
  119. for (var index = 0; index < this.selection; index++) {
  120. (0, _mask.isMaskDelimiter)(input.value[index]) || this.lazySelection++;
  121. }
  122. }
  123. }
  124. }; /**
  125. * Maskable
  126. *
  127. * @mixin
  128. *
  129. * Creates an input mask that is
  130. * generated from a masked str
  131. *
  132. * Example: mask="#### #### #### ####"
  133. */
  134. //# sourceMappingURL=maskable.js.map