Input.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  11. var _FormItemContext = require("../form/FormItemContext");
  12. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  13. var _statusUtils = require("../_util/statusUtils");
  14. var _commonUtils = require("../vc-input/utils/commonUtils");
  15. var _Input = _interopRequireDefault(require("../vc-input/Input"));
  16. var _inputProps = _interopRequireDefault(require("./inputProps"));
  17. var _omit = _interopRequireDefault(require("../_util/omit"));
  18. var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/CloseCircleFilled"));
  19. var _Compact = require("../space/Compact");
  20. var _style = _interopRequireDefault(require("./style"));
  21. var _DisabledContext = require("../config-provider/DisabledContext");
  22. var __rest = void 0 && (void 0).__rest || function (s, e) {
  23. var t = {};
  24. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  25. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  26. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  27. }
  28. return t;
  29. };
  30. // CSSINJS
  31. var _default = exports.default = (0, _vue.defineComponent)({
  32. compatConfig: {
  33. MODE: 3
  34. },
  35. name: 'AInput',
  36. inheritAttrs: false,
  37. props: (0, _inputProps.default)(),
  38. setup(props, _ref) {
  39. let {
  40. slots,
  41. attrs,
  42. expose,
  43. emit
  44. } = _ref;
  45. const inputRef = (0, _vue.ref)();
  46. const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  47. const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
  48. const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status, props.status));
  49. const {
  50. direction,
  51. prefixCls,
  52. size,
  53. autocomplete
  54. } = (0, _useConfigInject.default)('input', props);
  55. // ===================== Compact Item =====================
  56. const {
  57. compactSize,
  58. compactItemClassnames
  59. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  60. const mergedSize = (0, _vue.computed)(() => {
  61. return compactSize.value || size.value;
  62. });
  63. // Style
  64. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  65. const disabled = (0, _DisabledContext.useInjectDisabled)();
  66. const focus = option => {
  67. var _a;
  68. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus(option);
  69. };
  70. const blur = () => {
  71. var _a;
  72. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  73. };
  74. const setSelectionRange = (start, end, direction) => {
  75. var _a;
  76. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end, direction);
  77. };
  78. const select = () => {
  79. var _a;
  80. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.select();
  81. };
  82. expose({
  83. focus,
  84. blur,
  85. input: inputRef,
  86. setSelectionRange,
  87. select
  88. });
  89. // ===================== Remove Password value =====================
  90. const removePasswordTimeoutRef = (0, _vue.ref)([]);
  91. const removePasswordTimeout = () => {
  92. removePasswordTimeoutRef.value.push(setTimeout(() => {
  93. var _a, _b, _c, _d;
  94. if (((_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input) && ((_b = inputRef.value) === null || _b === void 0 ? void 0 : _b.input.getAttribute('type')) === 'password' && ((_c = inputRef.value) === null || _c === void 0 ? void 0 : _c.input.hasAttribute('value'))) {
  95. (_d = inputRef.value) === null || _d === void 0 ? void 0 : _d.input.removeAttribute('value');
  96. }
  97. }));
  98. };
  99. (0, _vue.onMounted)(() => {
  100. removePasswordTimeout();
  101. });
  102. (0, _vue.onBeforeUpdate)(() => {
  103. removePasswordTimeoutRef.value.forEach(item => clearTimeout(item));
  104. });
  105. (0, _vue.onBeforeUnmount)(() => {
  106. removePasswordTimeoutRef.value.forEach(item => clearTimeout(item));
  107. });
  108. const handleBlur = e => {
  109. removePasswordTimeout();
  110. emit('blur', e);
  111. formItemContext.onFieldBlur();
  112. };
  113. const handleFocus = e => {
  114. removePasswordTimeout();
  115. emit('focus', e);
  116. };
  117. const triggerChange = e => {
  118. emit('update:value', e.target.value);
  119. emit('change', e);
  120. emit('input', e);
  121. formItemContext.onFieldChange();
  122. };
  123. return () => {
  124. var _a, _b, _c, _d, _e, _f;
  125. const {
  126. hasFeedback,
  127. feedbackIcon
  128. } = formItemInputContext;
  129. const {
  130. allowClear,
  131. bordered = true,
  132. prefix = (_a = slots.prefix) === null || _a === void 0 ? void 0 : _a.call(slots),
  133. suffix = (_b = slots.suffix) === null || _b === void 0 ? void 0 : _b.call(slots),
  134. addonAfter = (_c = slots.addonAfter) === null || _c === void 0 ? void 0 : _c.call(slots),
  135. addonBefore = (_d = slots.addonBefore) === null || _d === void 0 ? void 0 : _d.call(slots),
  136. id = (_e = formItemContext.id) === null || _e === void 0 ? void 0 : _e.value
  137. } = props,
  138. rest = __rest(props, ["allowClear", "bordered", "prefix", "suffix", "addonAfter", "addonBefore", "id"]);
  139. const suffixNode = (hasFeedback || suffix) && (0, _vue.createVNode)(_vue.Fragment, null, [suffix, hasFeedback && feedbackIcon]);
  140. const prefixClsValue = prefixCls.value;
  141. const inputHasPrefixSuffix = (0, _commonUtils.hasPrefixSuffix)({
  142. prefix,
  143. suffix
  144. }) || !!hasFeedback;
  145. const clearIcon = slots.clearIcon || (() => (0, _vue.createVNode)(_CloseCircleFilled.default, null, null));
  146. return wrapSSR((0, _vue.createVNode)(_Input.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), (0, _omit.default)(rest, ['onUpdate:value', 'onChange', 'onInput'])), {}, {
  147. "onChange": triggerChange,
  148. "id": id,
  149. "disabled": (_f = props.disabled) !== null && _f !== void 0 ? _f : disabled.value,
  150. "ref": inputRef,
  151. "prefixCls": prefixClsValue,
  152. "autocomplete": autocomplete.value,
  153. "onBlur": handleBlur,
  154. "onFocus": handleFocus,
  155. "prefix": prefix,
  156. "suffix": suffixNode,
  157. "allowClear": allowClear,
  158. "addonAfter": addonAfter && (0, _vue.createVNode)(_Compact.NoCompactStyle, null, {
  159. default: () => [(0, _vue.createVNode)(_FormItemContext.NoFormStatus, null, {
  160. default: () => [addonAfter]
  161. })]
  162. }),
  163. "addonBefore": addonBefore && (0, _vue.createVNode)(_Compact.NoCompactStyle, null, {
  164. default: () => [(0, _vue.createVNode)(_FormItemContext.NoFormStatus, null, {
  165. default: () => [addonBefore]
  166. })]
  167. }),
  168. "class": [attrs.class, compactItemClassnames.value],
  169. "inputClassName": (0, _classNames.default)({
  170. [`${prefixClsValue}-sm`]: mergedSize.value === 'small',
  171. [`${prefixClsValue}-lg`]: mergedSize.value === 'large',
  172. [`${prefixClsValue}-rtl`]: direction.value === 'rtl',
  173. [`${prefixClsValue}-borderless`]: !bordered
  174. }, !inputHasPrefixSuffix && (0, _statusUtils.getStatusClassNames)(prefixClsValue, mergedStatus.value), hashId.value),
  175. "affixWrapperClassName": (0, _classNames.default)({
  176. [`${prefixClsValue}-affix-wrapper-sm`]: mergedSize.value === 'small',
  177. [`${prefixClsValue}-affix-wrapper-lg`]: mergedSize.value === 'large',
  178. [`${prefixClsValue}-affix-wrapper-rtl`]: direction.value === 'rtl',
  179. [`${prefixClsValue}-affix-wrapper-borderless`]: !bordered
  180. }, (0, _statusUtils.getStatusClassNames)(`${prefixClsValue}-affix-wrapper`, mergedStatus.value, hasFeedback), hashId.value),
  181. "wrapperClassName": (0, _classNames.default)({
  182. [`${prefixClsValue}-group-rtl`]: direction.value === 'rtl'
  183. }, hashId.value),
  184. "groupClassName": (0, _classNames.default)({
  185. [`${prefixClsValue}-group-wrapper-sm`]: mergedSize.value === 'small',
  186. [`${prefixClsValue}-group-wrapper-lg`]: mergedSize.value === 'large',
  187. [`${prefixClsValue}-group-wrapper-rtl`]: direction.value === 'rtl'
  188. }, (0, _statusUtils.getStatusClassNames)(`${prefixClsValue}-group-wrapper`, mergedStatus.value, hasFeedback), hashId.value)
  189. }), (0, _extends2.default)((0, _extends2.default)({}, slots), {
  190. clearIcon
  191. })));
  192. };
  193. }
  194. });