index.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _utils = require("../utils");
  5. var _use = (0, _utils.use)('stepper'),
  6. sfc = _use[0],
  7. bem = _use[1];
  8. var _default = sfc({
  9. props: {
  10. value: null,
  11. integer: Boolean,
  12. disabled: Boolean,
  13. inputWidth: String,
  14. asyncChange: Boolean,
  15. disableInput: Boolean,
  16. min: {
  17. type: [String, Number],
  18. "default": 1
  19. },
  20. max: {
  21. type: [String, Number],
  22. "default": Infinity
  23. },
  24. step: {
  25. type: [String, Number],
  26. "default": 1
  27. },
  28. defaultValue: {
  29. type: [String, Number],
  30. "default": 1
  31. }
  32. },
  33. data: function data() {
  34. var value = this.range((0, _utils.isDef)(this.value) ? this.value : this.defaultValue);
  35. if (value !== +this.value) {
  36. this.$emit('input', value);
  37. }
  38. return {
  39. currentValue: value
  40. };
  41. },
  42. computed: {
  43. minusDisabled: function minusDisabled() {
  44. return this.disabled || this.currentValue <= this.min;
  45. },
  46. plusDisabled: function plusDisabled() {
  47. return this.disabled || this.currentValue >= this.max;
  48. }
  49. },
  50. watch: {
  51. value: function value(val) {
  52. if (val !== this.currentValue) {
  53. this.currentValue = this.format(val);
  54. }
  55. },
  56. currentValue: function currentValue(val) {
  57. this.$emit('input', val);
  58. this.$emit('change', val);
  59. }
  60. },
  61. methods: {
  62. // filter illegal characters
  63. format: function format(value) {
  64. value = String(value).replace(/[^0-9.-]/g, '');
  65. return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
  66. },
  67. // limit value range
  68. range: function range(value) {
  69. return Math.max(Math.min(this.max, this.format(value)), this.min);
  70. },
  71. onInput: function onInput(event) {
  72. var value = event.target.value;
  73. var formatted = this.format(value);
  74. if (!this.asyncChange) {
  75. if (+value !== formatted) {
  76. event.target.value = formatted;
  77. }
  78. this.currentValue = formatted;
  79. } else {
  80. event.target.value = this.currentValue;
  81. this.$emit('input', formatted);
  82. this.$emit('change', formatted);
  83. }
  84. },
  85. onChange: function onChange(type) {
  86. if (this[type + "Disabled"]) {
  87. this.$emit('overlimit', type);
  88. return;
  89. }
  90. var diff = type === 'minus' ? -this.step : +this.step;
  91. var value = Math.round((this.currentValue + diff) * 100) / 100;
  92. if (!this.asyncChange) {
  93. this.currentValue = this.range(value);
  94. } else {
  95. this.$emit('input', value);
  96. this.$emit('change', value);
  97. }
  98. this.$emit(type);
  99. },
  100. onFocus: function onFocus(event) {
  101. this.$emit('focus', event);
  102. },
  103. onBlur: function onBlur(event) {
  104. this.currentValue = this.range(this.currentValue);
  105. this.$emit('blur', event); // fix edge case when input is empty and min is 0
  106. if (this.currentValue === 0) {
  107. event.target.value = this.currentValue;
  108. }
  109. }
  110. },
  111. render: function render(h) {
  112. var _this = this;
  113. var onChange = function onChange(type) {
  114. return function () {
  115. _this.onChange(type);
  116. };
  117. };
  118. return h("div", {
  119. "class": bem()
  120. }, [h("button", {
  121. "class": bem('minus', {
  122. disabled: this.minusDisabled
  123. }),
  124. "on": {
  125. "click": onChange('minus')
  126. }
  127. }), h("input", {
  128. "attrs": {
  129. "type": "number",
  130. "disabled": this.disabled || this.disableInput
  131. },
  132. "class": bem('input'),
  133. "domProps": {
  134. "value": this.currentValue
  135. },
  136. "style": {
  137. width: this.inputWidth
  138. },
  139. "on": {
  140. "input": this.onInput,
  141. "focus": this.onFocus,
  142. "blur": this.onBlur
  143. }
  144. }), h("button", {
  145. "class": bem('plus', {
  146. disabled: this.plusDisabled
  147. }),
  148. "on": {
  149. "click": onChange('plus')
  150. }
  151. })]);
  152. }
  153. });
  154. exports["default"] = _default;