Input.js 8.0 KB

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