index.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports.default = void 0;
  5. var _babelHelperVueJsxMergeProps = _interopRequireDefault(require("@vue/babel-helper-vue-jsx-merge-props"));
  6. var _utils = require("../utils");
  7. var _resetScroll = require("../utils/dom/reset-scroll");
  8. var _event = require("../utils/dom/event");
  9. var _number = require("../utils/format/number");
  10. var _number2 = require("../utils/validate/number");
  11. var _field = require("../mixins/field");
  12. var _createNamespace = (0, _utils.createNamespace)('stepper'),
  13. createComponent = _createNamespace[0],
  14. bem = _createNamespace[1];
  15. var LONG_PRESS_START_TIME = 600;
  16. var LONG_PRESS_INTERVAL = 200;
  17. function equal(value1, value2) {
  18. return String(value1) === String(value2);
  19. }
  20. var _default = createComponent({
  21. mixins: [_field.FieldMixin],
  22. props: {
  23. value: null,
  24. theme: String,
  25. integer: Boolean,
  26. disabled: Boolean,
  27. allowEmpty: Boolean,
  28. inputWidth: [Number, String],
  29. buttonSize: [Number, String],
  30. asyncChange: Boolean,
  31. placeholder: String,
  32. disablePlus: Boolean,
  33. disableMinus: Boolean,
  34. disableInput: Boolean,
  35. decimalLength: [Number, String],
  36. name: {
  37. type: [Number, String],
  38. default: ''
  39. },
  40. min: {
  41. type: [Number, String],
  42. default: 1
  43. },
  44. max: {
  45. type: [Number, String],
  46. default: Infinity
  47. },
  48. step: {
  49. type: [Number, String],
  50. default: 1
  51. },
  52. defaultValue: {
  53. type: [Number, String],
  54. default: 1
  55. },
  56. showPlus: {
  57. type: Boolean,
  58. default: true
  59. },
  60. showMinus: {
  61. type: Boolean,
  62. default: true
  63. },
  64. showInput: {
  65. type: Boolean,
  66. default: true
  67. },
  68. longPress: {
  69. type: Boolean,
  70. default: true
  71. }
  72. },
  73. data: function data() {
  74. var _this$value;
  75. var defaultValue = (_this$value = this.value) != null ? _this$value : this.defaultValue;
  76. var value = this.format(defaultValue);
  77. if (!equal(value, this.value)) {
  78. this.$emit('input', value);
  79. }
  80. return {
  81. currentValue: value
  82. };
  83. },
  84. computed: {
  85. minusDisabled: function minusDisabled() {
  86. return this.disabled || this.disableMinus || this.currentValue <= +this.min;
  87. },
  88. plusDisabled: function plusDisabled() {
  89. return this.disabled || this.disablePlus || this.currentValue >= +this.max;
  90. },
  91. inputStyle: function inputStyle() {
  92. var style = {};
  93. if (this.inputWidth) {
  94. style.width = (0, _utils.addUnit)(this.inputWidth);
  95. }
  96. if (this.buttonSize) {
  97. style.height = (0, _utils.addUnit)(this.buttonSize);
  98. }
  99. return style;
  100. },
  101. buttonStyle: function buttonStyle() {
  102. if (this.buttonSize) {
  103. var size = (0, _utils.addUnit)(this.buttonSize);
  104. return {
  105. width: size,
  106. height: size
  107. };
  108. }
  109. }
  110. },
  111. watch: {
  112. max: 'check',
  113. min: 'check',
  114. integer: 'check',
  115. decimalLength: 'check',
  116. value: function value(val) {
  117. if (!equal(val, this.currentValue)) {
  118. this.currentValue = this.format(val);
  119. }
  120. },
  121. currentValue: function currentValue(val) {
  122. this.$emit('input', val);
  123. this.$emit('change', val, {
  124. name: this.name
  125. });
  126. }
  127. },
  128. methods: {
  129. check: function check() {
  130. var val = this.format(this.currentValue);
  131. if (!equal(val, this.currentValue)) {
  132. this.currentValue = val;
  133. }
  134. },
  135. // formatNumber illegal characters
  136. formatNumber: function formatNumber(value) {
  137. return (0, _number.formatNumber)(String(value), !this.integer);
  138. },
  139. format: function format(value) {
  140. if (this.allowEmpty && value === '') {
  141. return value;
  142. }
  143. value = this.formatNumber(value); // format range
  144. value = value === '' ? 0 : +value;
  145. value = (0, _number2.isNaN)(value) ? this.min : value;
  146. value = Math.max(Math.min(this.max, value), this.min); // format decimal
  147. if ((0, _utils.isDef)(this.decimalLength)) {
  148. value = value.toFixed(this.decimalLength);
  149. }
  150. return value;
  151. },
  152. onInput: function onInput(event) {
  153. var value = event.target.value;
  154. var formatted = this.formatNumber(value); // limit max decimal length
  155. if ((0, _utils.isDef)(this.decimalLength) && formatted.indexOf('.') !== -1) {
  156. var pair = formatted.split('.');
  157. formatted = pair[0] + "." + pair[1].slice(0, this.decimalLength);
  158. }
  159. if (!equal(value, formatted)) {
  160. event.target.value = formatted;
  161. } // prefer number type
  162. if (formatted === String(+formatted)) {
  163. formatted = +formatted;
  164. }
  165. this.emitChange(formatted);
  166. },
  167. emitChange: function emitChange(value) {
  168. if (this.asyncChange) {
  169. this.$emit('input', value);
  170. this.$emit('change', value, {
  171. name: this.name
  172. });
  173. } else {
  174. this.currentValue = value;
  175. }
  176. },
  177. onChange: function onChange() {
  178. var type = this.type;
  179. if (this[type + "Disabled"]) {
  180. this.$emit('overlimit', type);
  181. return;
  182. }
  183. var diff = type === 'minus' ? -this.step : +this.step;
  184. var value = this.format((0, _number.addNumber)(+this.currentValue, diff));
  185. this.emitChange(value);
  186. this.$emit(type);
  187. },
  188. onFocus: function onFocus(event) {
  189. // readonly not work in legacy mobile safari
  190. if (this.disableInput && this.$refs.input) {
  191. this.$refs.input.blur();
  192. } else {
  193. this.$emit('focus', event);
  194. }
  195. },
  196. onBlur: function onBlur(event) {
  197. var value = this.format(event.target.value);
  198. event.target.value = value;
  199. this.emitChange(value);
  200. this.$emit('blur', event);
  201. (0, _resetScroll.resetScroll)();
  202. },
  203. longPressStep: function longPressStep() {
  204. var _this = this;
  205. this.longPressTimer = setTimeout(function () {
  206. _this.onChange();
  207. _this.longPressStep(_this.type);
  208. }, LONG_PRESS_INTERVAL);
  209. },
  210. onTouchStart: function onTouchStart() {
  211. var _this2 = this;
  212. if (!this.longPress) {
  213. return;
  214. }
  215. clearTimeout(this.longPressTimer);
  216. this.isLongPress = false;
  217. this.longPressTimer = setTimeout(function () {
  218. _this2.isLongPress = true;
  219. _this2.onChange();
  220. _this2.longPressStep();
  221. }, LONG_PRESS_START_TIME);
  222. },
  223. onTouchEnd: function onTouchEnd(event) {
  224. if (!this.longPress) {
  225. return;
  226. }
  227. clearTimeout(this.longPressTimer);
  228. if (this.isLongPress) {
  229. (0, _event.preventDefault)(event);
  230. }
  231. },
  232. onMousedown: function onMousedown(event) {
  233. // fix mobile safari page scroll down issue
  234. // see: https://github.com/vant-ui/vant/issues/7690
  235. if (this.disableInput) {
  236. event.preventDefault();
  237. }
  238. }
  239. },
  240. render: function render() {
  241. var _this3 = this;
  242. var h = arguments[0];
  243. var createListeners = function createListeners(type) {
  244. return {
  245. on: {
  246. click: function click(e) {
  247. // disable double tap scrolling on mobile safari
  248. e.preventDefault();
  249. _this3.type = type;
  250. _this3.onChange();
  251. },
  252. touchstart: function touchstart() {
  253. _this3.type = type;
  254. _this3.onTouchStart();
  255. },
  256. touchend: _this3.onTouchEnd,
  257. touchcancel: _this3.onTouchEnd
  258. }
  259. };
  260. };
  261. return h("div", {
  262. "class": bem([this.theme])
  263. }, [h("button", (0, _babelHelperVueJsxMergeProps.default)([{
  264. "directives": [{
  265. name: "show",
  266. value: this.showMinus
  267. }],
  268. "attrs": {
  269. "type": "button"
  270. },
  271. "style": this.buttonStyle,
  272. "class": bem('minus', {
  273. disabled: this.minusDisabled
  274. })
  275. }, createListeners('minus')])), h("input", {
  276. "directives": [{
  277. name: "show",
  278. value: this.showInput
  279. }],
  280. "ref": "input",
  281. "attrs": {
  282. "type": this.integer ? 'tel' : 'text',
  283. "role": "spinbutton",
  284. "disabled": this.disabled,
  285. "readonly": this.disableInput,
  286. "inputmode": this.integer ? 'numeric' : 'decimal',
  287. "placeholder": this.placeholder,
  288. "aria-valuemax": this.max,
  289. "aria-valuemin": this.min,
  290. "aria-valuenow": this.currentValue
  291. },
  292. "class": bem('input'),
  293. "domProps": {
  294. "value": this.currentValue
  295. },
  296. "style": this.inputStyle,
  297. "on": {
  298. "input": this.onInput,
  299. "focus": this.onFocus,
  300. "blur": this.onBlur,
  301. "mousedown": this.onMousedown
  302. }
  303. }), h("button", (0, _babelHelperVueJsxMergeProps.default)([{
  304. "directives": [{
  305. name: "show",
  306. value: this.showPlus
  307. }],
  308. "attrs": {
  309. "type": "button"
  310. },
  311. "style": this.buttonStyle,
  312. "class": bem('plus', {
  313. disabled: this.plusDisabled
  314. })
  315. }, createListeners('plus')]))]);
  316. }
  317. });
  318. exports.default = _default;