e7c4494812572e1beaedbbbcff75e20cccd99cd64321b164c6c472837f90c0536d14c8e9b73bea5bca0513d9dcb43e8fd6f1f41c56cda280b739ed15644433 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var index$4 = require('../../input/index.js');
  6. var index$2 = require('../../icon/index.js');
  7. var iconsVue = require('@element-plus/icons-vue');
  8. var inputNumber = require('./input-number.js');
  9. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  10. var index$3 = require('../../../directives/repeat-click/index.js');
  11. var index = require('../../../hooks/use-locale/index.js');
  12. var index$1 = require('../../../hooks/use-namespace/index.js');
  13. var useFormItem = require('../../form/src/hooks/use-form-item.js');
  14. var types = require('../../../utils/types.js');
  15. var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
  16. var event = require('../../../constants/event.js');
  17. var aria = require('../../../constants/aria.js');
  18. var error = require('../../../utils/error.js');
  19. var shared = require('@vue/shared');
  20. const __default__ = vue.defineComponent({
  21. name: "ElInputNumber"
  22. });
  23. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  24. ...__default__,
  25. props: inputNumber.inputNumberProps,
  26. emits: inputNumber.inputNumberEmits,
  27. setup(__props, { expose, emit }) {
  28. const props = __props;
  29. const { t } = index.useLocale();
  30. const ns = index$1.useNamespace("input-number");
  31. const input = vue.ref();
  32. const data = vue.reactive({
  33. currentValue: props.modelValue,
  34. userInput: null
  35. });
  36. const { formItem } = useFormItem.useFormItem();
  37. const minDisabled = vue.computed(() => types.isNumber(props.modelValue) && props.modelValue <= props.min);
  38. const maxDisabled = vue.computed(() => types.isNumber(props.modelValue) && props.modelValue >= props.max);
  39. const numPrecision = vue.computed(() => {
  40. const stepPrecision = getPrecision(props.step);
  41. if (!types.isUndefined(props.precision)) {
  42. if (stepPrecision > props.precision) ;
  43. return props.precision;
  44. } else {
  45. return Math.max(getPrecision(props.modelValue), stepPrecision);
  46. }
  47. });
  48. const controlsAtRight = vue.computed(() => {
  49. return props.controls && props.controlsPosition === "right";
  50. });
  51. const inputNumberSize = useFormCommonProps.useFormSize();
  52. const inputNumberDisabled = useFormCommonProps.useFormDisabled();
  53. const displayValue = vue.computed(() => {
  54. if (data.userInput !== null) {
  55. return data.userInput;
  56. }
  57. let currentValue = data.currentValue;
  58. if (lodashUnified.isNil(currentValue))
  59. return "";
  60. if (types.isNumber(currentValue)) {
  61. if (Number.isNaN(currentValue))
  62. return "";
  63. if (!types.isUndefined(props.precision)) {
  64. currentValue = currentValue.toFixed(props.precision);
  65. }
  66. }
  67. return currentValue;
  68. });
  69. const toPrecision = (num, pre) => {
  70. if (types.isUndefined(pre))
  71. pre = numPrecision.value;
  72. if (pre === 0)
  73. return Math.round(num);
  74. let snum = String(num);
  75. const pointPos = snum.indexOf(".");
  76. if (pointPos === -1)
  77. return num;
  78. const nums = snum.replace(".", "").split("");
  79. const datum = nums[pointPos + pre];
  80. if (!datum)
  81. return num;
  82. const length = snum.length;
  83. if (snum.charAt(length - 1) === "5") {
  84. snum = `${snum.slice(0, Math.max(0, length - 1))}6`;
  85. }
  86. return Number.parseFloat(Number(snum).toFixed(pre));
  87. };
  88. const getPrecision = (value) => {
  89. if (lodashUnified.isNil(value))
  90. return 0;
  91. const valueString = value.toString();
  92. const dotPosition = valueString.indexOf(".");
  93. let precision = 0;
  94. if (dotPosition !== -1) {
  95. precision = valueString.length - dotPosition - 1;
  96. }
  97. return precision;
  98. };
  99. const ensurePrecision = (val, coefficient = 1) => {
  100. if (!types.isNumber(val))
  101. return data.currentValue;
  102. if (val >= Number.MAX_SAFE_INTEGER && coefficient === 1) {
  103. return val;
  104. } else if (val <= Number.MIN_SAFE_INTEGER && coefficient === -1) {
  105. return val;
  106. }
  107. return toPrecision(val + props.step * coefficient);
  108. };
  109. const handleKeydown = (event) => {
  110. var _a;
  111. const e = event;
  112. if (props.disabledScientific && ["e", "E"].includes(e.key)) {
  113. e.preventDefault();
  114. return;
  115. }
  116. const keyHandlers = {
  117. [aria.EVENT_CODE.up]: () => {
  118. e.preventDefault();
  119. increase();
  120. },
  121. [aria.EVENT_CODE.down]: () => {
  122. e.preventDefault();
  123. decrease();
  124. }
  125. };
  126. (_a = keyHandlers[e.key]) == null ? void 0 : _a.call(keyHandlers);
  127. };
  128. const increase = () => {
  129. if (props.readonly || inputNumberDisabled.value || maxDisabled.value)
  130. return;
  131. const value = Number(displayValue.value) || 0;
  132. const newVal = ensurePrecision(value);
  133. setCurrentValue(newVal);
  134. emit(event.INPUT_EVENT, data.currentValue);
  135. setCurrentValueToModelValue();
  136. };
  137. const decrease = () => {
  138. if (props.readonly || inputNumberDisabled.value || minDisabled.value)
  139. return;
  140. const value = Number(displayValue.value) || 0;
  141. const newVal = ensurePrecision(value, -1);
  142. setCurrentValue(newVal);
  143. emit(event.INPUT_EVENT, data.currentValue);
  144. setCurrentValueToModelValue();
  145. };
  146. const verifyValue = (value, update) => {
  147. const { max, min, step, precision, stepStrictly, valueOnClear } = props;
  148. if (max < min) {
  149. error.throwError("InputNumber", "min should not be greater than max.");
  150. }
  151. let newVal = Number(value);
  152. if (lodashUnified.isNil(value) || Number.isNaN(newVal)) {
  153. return null;
  154. }
  155. if (value === "") {
  156. if (valueOnClear === null) {
  157. return null;
  158. }
  159. newVal = shared.isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear;
  160. }
  161. if (stepStrictly) {
  162. newVal = toPrecision(Math.round(newVal / step) * step, precision);
  163. if (newVal !== value) {
  164. update && emit(event.UPDATE_MODEL_EVENT, newVal);
  165. }
  166. }
  167. if (!types.isUndefined(precision)) {
  168. newVal = toPrecision(newVal, precision);
  169. }
  170. if (newVal > max || newVal < min) {
  171. newVal = newVal > max ? max : min;
  172. update && emit(event.UPDATE_MODEL_EVENT, newVal);
  173. }
  174. return newVal;
  175. };
  176. const setCurrentValue = (value, emitChange = true) => {
  177. var _a;
  178. const oldVal = data.currentValue;
  179. const newVal = verifyValue(value);
  180. if (!emitChange) {
  181. emit(event.UPDATE_MODEL_EVENT, newVal);
  182. return;
  183. }
  184. if (oldVal === newVal && value)
  185. return;
  186. data.userInput = null;
  187. emit(event.UPDATE_MODEL_EVENT, newVal);
  188. if (oldVal !== newVal) {
  189. emit(event.CHANGE_EVENT, newVal, oldVal);
  190. }
  191. if (props.validateEvent) {
  192. (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change").catch((err) => error.debugWarn());
  193. }
  194. data.currentValue = newVal;
  195. };
  196. const handleInput = (value) => {
  197. data.userInput = value;
  198. const newVal = value === "" ? null : Number(value);
  199. emit(event.INPUT_EVENT, newVal);
  200. setCurrentValue(newVal, false);
  201. };
  202. const handleInputChange = (value) => {
  203. const newVal = value !== "" ? Number(value) : "";
  204. if (types.isNumber(newVal) && !Number.isNaN(newVal) || value === "") {
  205. setCurrentValue(newVal);
  206. }
  207. setCurrentValueToModelValue();
  208. data.userInput = null;
  209. };
  210. const focus = () => {
  211. var _a, _b;
  212. (_b = (_a = input.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
  213. };
  214. const blur = () => {
  215. var _a, _b;
  216. (_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
  217. };
  218. const handleFocus = (event) => {
  219. emit("focus", event);
  220. };
  221. const handleBlur = (event) => {
  222. var _a, _b;
  223. data.userInput = null;
  224. if (data.currentValue === null && ((_a = input.value) == null ? void 0 : _a.input)) {
  225. input.value.input.value = "";
  226. }
  227. emit("blur", event);
  228. if (props.validateEvent) {
  229. (_b = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _b.call(formItem, "blur").catch((err) => error.debugWarn());
  230. }
  231. };
  232. const setCurrentValueToModelValue = () => {
  233. if (data.currentValue !== props.modelValue) {
  234. data.currentValue = props.modelValue;
  235. }
  236. };
  237. const handleWheel = (e) => {
  238. if (document.activeElement === e.target)
  239. e.preventDefault();
  240. };
  241. vue.watch(() => props.modelValue, (value, oldValue) => {
  242. const newValue = verifyValue(value, true);
  243. if (data.userInput === null && newValue !== oldValue) {
  244. data.currentValue = newValue;
  245. }
  246. }, { immediate: true });
  247. vue.watch(() => props.precision, () => {
  248. data.currentValue = verifyValue(props.modelValue);
  249. });
  250. vue.onMounted(() => {
  251. var _a;
  252. const { min, max, modelValue } = props;
  253. const innerInput = (_a = input.value) == null ? void 0 : _a.input;
  254. innerInput.setAttribute("role", "spinbutton");
  255. if (Number.isFinite(max)) {
  256. innerInput.setAttribute("aria-valuemax", String(max));
  257. } else {
  258. innerInput.removeAttribute("aria-valuemax");
  259. }
  260. if (Number.isFinite(min)) {
  261. innerInput.setAttribute("aria-valuemin", String(min));
  262. } else {
  263. innerInput.removeAttribute("aria-valuemin");
  264. }
  265. innerInput.setAttribute("aria-valuenow", data.currentValue || data.currentValue === 0 ? String(data.currentValue) : "");
  266. innerInput.setAttribute("aria-disabled", String(inputNumberDisabled.value));
  267. if (!types.isNumber(modelValue) && modelValue != null) {
  268. let val = Number(modelValue);
  269. if (Number.isNaN(val)) {
  270. val = null;
  271. }
  272. emit(event.UPDATE_MODEL_EVENT, val);
  273. }
  274. innerInput.addEventListener("wheel", handleWheel, { passive: false });
  275. });
  276. vue.onUpdated(() => {
  277. var _a, _b;
  278. const innerInput = (_a = input.value) == null ? void 0 : _a.input;
  279. innerInput == null ? void 0 : innerInput.setAttribute("aria-valuenow", `${(_b = data.currentValue) != null ? _b : ""}`);
  280. });
  281. expose({
  282. focus,
  283. blur
  284. });
  285. return (_ctx, _cache) => {
  286. return vue.openBlock(), vue.createElementBlock("div", {
  287. class: vue.normalizeClass([
  288. vue.unref(ns).b(),
  289. vue.unref(ns).m(vue.unref(inputNumberSize)),
  290. vue.unref(ns).is("disabled", vue.unref(inputNumberDisabled)),
  291. vue.unref(ns).is("without-controls", !_ctx.controls),
  292. vue.unref(ns).is("controls-right", vue.unref(controlsAtRight)),
  293. vue.unref(ns).is(_ctx.align, !!_ctx.align)
  294. ]),
  295. onDragstart: vue.withModifiers(() => {
  296. }, ["prevent"])
  297. }, [
  298. _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
  299. key: 0,
  300. role: "button",
  301. "aria-label": vue.unref(t)("el.inputNumber.decrease"),
  302. class: vue.normalizeClass([vue.unref(ns).e("decrease"), vue.unref(ns).is("disabled", vue.unref(minDisabled))]),
  303. onKeydown: vue.withKeys(decrease, ["enter"])
  304. }, [
  305. vue.renderSlot(_ctx.$slots, "decrease-icon", {}, () => [
  306. vue.createVNode(vue.unref(index$2.ElIcon), null, {
  307. default: vue.withCtx(() => [
  308. vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.ArrowDown), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.Minus), { key: 1 }))
  309. ]),
  310. _: 1
  311. })
  312. ])
  313. ], 42, ["aria-label", "onKeydown"])), [
  314. [vue.unref(index$3.vRepeatClick), decrease]
  315. ]) : vue.createCommentVNode("v-if", true),
  316. _ctx.controls ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
  317. key: 1,
  318. role: "button",
  319. "aria-label": vue.unref(t)("el.inputNumber.increase"),
  320. class: vue.normalizeClass([vue.unref(ns).e("increase"), vue.unref(ns).is("disabled", vue.unref(maxDisabled))]),
  321. onKeydown: vue.withKeys(increase, ["enter"])
  322. }, [
  323. vue.renderSlot(_ctx.$slots, "increase-icon", {}, () => [
  324. vue.createVNode(vue.unref(index$2.ElIcon), null, {
  325. default: vue.withCtx(() => [
  326. vue.unref(controlsAtRight) ? (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.ArrowUp), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(iconsVue.Plus), { key: 1 }))
  327. ]),
  328. _: 1
  329. })
  330. ])
  331. ], 42, ["aria-label", "onKeydown"])), [
  332. [vue.unref(index$3.vRepeatClick), increase]
  333. ]) : vue.createCommentVNode("v-if", true),
  334. vue.createVNode(vue.unref(index$4.ElInput), {
  335. id: _ctx.id,
  336. ref_key: "input",
  337. ref: input,
  338. type: "number",
  339. step: _ctx.step,
  340. "model-value": vue.unref(displayValue),
  341. placeholder: _ctx.placeholder,
  342. readonly: _ctx.readonly,
  343. disabled: vue.unref(inputNumberDisabled),
  344. size: vue.unref(inputNumberSize),
  345. max: _ctx.max,
  346. min: _ctx.min,
  347. name: _ctx.name,
  348. "aria-label": _ctx.ariaLabel,
  349. "validate-event": false,
  350. inputmode: _ctx.inputmode,
  351. onKeydown: handleKeydown,
  352. onBlur: handleBlur,
  353. onFocus: handleFocus,
  354. onInput: handleInput,
  355. onChange: handleInputChange
  356. }, vue.createSlots({
  357. _: 2
  358. }, [
  359. _ctx.$slots.prefix ? {
  360. name: "prefix",
  361. fn: vue.withCtx(() => [
  362. vue.renderSlot(_ctx.$slots, "prefix")
  363. ])
  364. } : void 0,
  365. _ctx.$slots.suffix ? {
  366. name: "suffix",
  367. fn: vue.withCtx(() => [
  368. vue.renderSlot(_ctx.$slots, "suffix")
  369. ])
  370. } : void 0
  371. ]), 1032, ["id", "step", "model-value", "placeholder", "readonly", "disabled", "size", "max", "min", "name", "aria-label", "inputmode"])
  372. ], 42, ["onDragstart"]);
  373. };
  374. }
  375. });
  376. var InputNumber = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "input-number.vue"]]);
  377. exports["default"] = InputNumber;
  378. //# sourceMappingURL=input-number2.js.map