index.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import { watch, defineComponent, shallowRef, computed } from 'vue';
  13. import classNames from '../_util/classNames';
  14. import UpOutlined from "@ant-design/icons-vue/es/icons/UpOutlined";
  15. import DownOutlined from "@ant-design/icons-vue/es/icons/DownOutlined";
  16. import VcInputNumber, { inputNumberProps as baseInputNumberProps } from './src/InputNumber';
  17. import { FormItemInputContext, NoFormStatus, useInjectFormItemContext } from '../form/FormItemContext';
  18. import useConfigInject from '../config-provider/hooks/useConfigInject';
  19. import { cloneElement } from '../_util/vnode';
  20. import omit from '../_util/omit';
  21. import PropTypes from '../_util/vue-types';
  22. import isValidValue from '../_util/isValidValue';
  23. import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils';
  24. import { booleanType, stringType } from '../_util/type';
  25. // CSSINJS
  26. import useStyle from './style';
  27. import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
  28. import { useInjectDisabled } from '../config-provider/DisabledContext';
  29. const baseProps = baseInputNumberProps();
  30. export const inputNumberProps = () => _extends(_extends({}, baseProps), {
  31. size: stringType(),
  32. bordered: booleanType(true),
  33. placeholder: String,
  34. name: String,
  35. id: String,
  36. type: String,
  37. addonBefore: PropTypes.any,
  38. addonAfter: PropTypes.any,
  39. prefix: PropTypes.any,
  40. 'onUpdate:value': baseProps.onChange,
  41. valueModifiers: Object,
  42. status: stringType()
  43. });
  44. const InputNumber = defineComponent({
  45. compatConfig: {
  46. MODE: 3
  47. },
  48. name: 'AInputNumber',
  49. inheritAttrs: false,
  50. props: inputNumberProps(),
  51. // emits: ['focus', 'blur', 'change', 'input', 'update:value'],
  52. slots: Object,
  53. setup(props, _ref) {
  54. let {
  55. emit,
  56. expose,
  57. attrs,
  58. slots
  59. } = _ref;
  60. var _a;
  61. const formItemContext = useInjectFormItemContext();
  62. const formItemInputContext = FormItemInputContext.useInject();
  63. const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status));
  64. const {
  65. prefixCls,
  66. size,
  67. direction,
  68. disabled
  69. } = useConfigInject('input-number', props);
  70. const {
  71. compactSize,
  72. compactItemClassnames
  73. } = useCompactItemContext(prefixCls, direction);
  74. const disabledContext = useInjectDisabled();
  75. const mergedDisabled = computed(() => {
  76. var _a;
  77. return (_a = disabled.value) !== null && _a !== void 0 ? _a : disabledContext.value;
  78. });
  79. // Style
  80. const [wrapSSR, hashId] = useStyle(prefixCls);
  81. const mergedSize = computed(() => compactSize.value || size.value);
  82. const mergedValue = shallowRef((_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue);
  83. const focused = shallowRef(false);
  84. watch(() => props.value, () => {
  85. mergedValue.value = props.value;
  86. });
  87. const inputNumberRef = shallowRef(null);
  88. const focus = () => {
  89. var _a;
  90. (_a = inputNumberRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  91. };
  92. const blur = () => {
  93. var _a;
  94. (_a = inputNumberRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  95. };
  96. expose({
  97. focus,
  98. blur
  99. });
  100. const handleChange = val => {
  101. if (props.value === undefined) {
  102. mergedValue.value = val;
  103. }
  104. emit('update:value', val);
  105. emit('change', val);
  106. formItemContext.onFieldChange();
  107. };
  108. const handleBlur = e => {
  109. focused.value = false;
  110. emit('blur', e);
  111. formItemContext.onFieldBlur();
  112. };
  113. const handleFocus = e => {
  114. focused.value = true;
  115. emit('focus', e);
  116. };
  117. return () => {
  118. var _a, _b, _c, _d;
  119. const {
  120. hasFeedback,
  121. isFormItemInput,
  122. feedbackIcon
  123. } = formItemInputContext;
  124. const id = (_a = props.id) !== null && _a !== void 0 ? _a : formItemContext.id.value;
  125. const _e = _extends(_extends(_extends({}, attrs), props), {
  126. id,
  127. disabled: mergedDisabled.value
  128. }),
  129. {
  130. class: className,
  131. bordered,
  132. readonly,
  133. style,
  134. addonBefore = (_b = slots.addonBefore) === null || _b === void 0 ? void 0 : _b.call(slots),
  135. addonAfter = (_c = slots.addonAfter) === null || _c === void 0 ? void 0 : _c.call(slots),
  136. prefix = (_d = slots.prefix) === null || _d === void 0 ? void 0 : _d.call(slots),
  137. valueModifiers = {}
  138. } = _e,
  139. others = __rest(_e, ["class", "bordered", "readonly", "style", "addonBefore", "addonAfter", "prefix", "valueModifiers"]);
  140. const preCls = prefixCls.value;
  141. const inputNumberClass = classNames({
  142. [`${preCls}-lg`]: mergedSize.value === 'large',
  143. [`${preCls}-sm`]: mergedSize.value === 'small',
  144. [`${preCls}-rtl`]: direction.value === 'rtl',
  145. [`${preCls}-readonly`]: readonly,
  146. [`${preCls}-borderless`]: !bordered,
  147. [`${preCls}-in-form-item`]: isFormItemInput
  148. }, getStatusClassNames(preCls, mergedStatus.value), className, compactItemClassnames.value, hashId.value);
  149. let element = _createVNode(VcInputNumber, _objectSpread(_objectSpread({}, omit(others, ['size', 'defaultValue'])), {}, {
  150. "ref": inputNumberRef,
  151. "lazy": !!valueModifiers.lazy,
  152. "value": mergedValue.value,
  153. "class": inputNumberClass,
  154. "prefixCls": preCls,
  155. "readonly": readonly,
  156. "onChange": handleChange,
  157. "onBlur": handleBlur,
  158. "onFocus": handleFocus
  159. }), {
  160. upHandler: slots.upIcon ? () => _createVNode("span", {
  161. "class": `${preCls}-handler-up-inner`
  162. }, [slots.upIcon()]) : () => _createVNode(UpOutlined, {
  163. "class": `${preCls}-handler-up-inner`
  164. }, null),
  165. downHandler: slots.downIcon ? () => _createVNode("span", {
  166. "class": `${preCls}-handler-down-inner`
  167. }, [slots.downIcon()]) : () => _createVNode(DownOutlined, {
  168. "class": `${preCls}-handler-down-inner`
  169. }, null)
  170. });
  171. const hasAddon = isValidValue(addonBefore) || isValidValue(addonAfter);
  172. const hasPrefix = isValidValue(prefix);
  173. if (hasPrefix || hasFeedback) {
  174. const affixWrapperCls = classNames(`${preCls}-affix-wrapper`, getStatusClassNames(`${preCls}-affix-wrapper`, mergedStatus.value, hasFeedback), {
  175. [`${preCls}-affix-wrapper-focused`]: focused.value,
  176. [`${preCls}-affix-wrapper-disabled`]: mergedDisabled.value,
  177. [`${preCls}-affix-wrapper-sm`]: mergedSize.value === 'small',
  178. [`${preCls}-affix-wrapper-lg`]: mergedSize.value === 'large',
  179. [`${preCls}-affix-wrapper-rtl`]: direction.value === 'rtl',
  180. [`${preCls}-affix-wrapper-readonly`]: readonly,
  181. [`${preCls}-affix-wrapper-borderless`]: !bordered,
  182. // className will go to addon wrapper
  183. [`${className}`]: !hasAddon && className
  184. }, hashId.value);
  185. element = _createVNode("div", {
  186. "class": affixWrapperCls,
  187. "style": style,
  188. "onClick": focus
  189. }, [hasPrefix && _createVNode("span", {
  190. "class": `${preCls}-prefix`
  191. }, [prefix]), element, hasFeedback && _createVNode("span", {
  192. "class": `${preCls}-suffix`
  193. }, [feedbackIcon])]);
  194. }
  195. if (hasAddon) {
  196. const wrapperClassName = `${preCls}-group`;
  197. const addonClassName = `${wrapperClassName}-addon`;
  198. const addonBeforeNode = addonBefore ? _createVNode("div", {
  199. "class": addonClassName
  200. }, [addonBefore]) : null;
  201. const addonAfterNode = addonAfter ? _createVNode("div", {
  202. "class": addonClassName
  203. }, [addonAfter]) : null;
  204. const mergedWrapperClassName = classNames(`${preCls}-wrapper`, wrapperClassName, {
  205. [`${wrapperClassName}-rtl`]: direction.value === 'rtl'
  206. }, hashId.value);
  207. const mergedGroupClassName = classNames(`${preCls}-group-wrapper`, {
  208. [`${preCls}-group-wrapper-sm`]: mergedSize.value === 'small',
  209. [`${preCls}-group-wrapper-lg`]: mergedSize.value === 'large',
  210. [`${preCls}-group-wrapper-rtl`]: direction.value === 'rtl'
  211. }, getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus.value, hasFeedback), className, hashId.value);
  212. element = _createVNode("div", {
  213. "class": mergedGroupClassName,
  214. "style": style
  215. }, [_createVNode("div", {
  216. "class": mergedWrapperClassName
  217. }, [addonBeforeNode && _createVNode(NoCompactStyle, null, {
  218. default: () => [_createVNode(NoFormStatus, null, {
  219. default: () => [addonBeforeNode]
  220. })]
  221. }), element, addonAfterNode && _createVNode(NoCompactStyle, null, {
  222. default: () => [_createVNode(NoFormStatus, null, {
  223. default: () => [addonAfterNode]
  224. })]
  225. })])]);
  226. }
  227. return wrapSSR(cloneElement(element, {
  228. style
  229. }));
  230. };
  231. }
  232. });
  233. export default _extends(InputNumber, {
  234. install: app => {
  235. app.component(InputNumber.name, InputNumber);
  236. return app;
  237. }
  238. });