BaseInput.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { createVNode as _createVNode } from "vue";
  2. import { defineComponent, ref } from 'vue';
  3. import classNames from '../_util/classNames';
  4. import { cloneElement } from '../_util/vnode';
  5. import { baseInputProps } from './inputProps';
  6. import { hasAddon, hasPrefixSuffix } from './utils/commonUtils';
  7. export default defineComponent({
  8. name: 'BaseInput',
  9. inheritAttrs: false,
  10. props: baseInputProps(),
  11. setup(props, _ref) {
  12. let {
  13. slots,
  14. attrs
  15. } = _ref;
  16. const containerRef = ref();
  17. const onInputMouseDown = e => {
  18. var _a;
  19. if ((_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
  20. const {
  21. triggerFocus
  22. } = props;
  23. triggerFocus === null || triggerFocus === void 0 ? void 0 : triggerFocus();
  24. }
  25. };
  26. const getClearIcon = () => {
  27. var _a;
  28. const {
  29. allowClear,
  30. value,
  31. disabled,
  32. readonly,
  33. handleReset,
  34. suffix = slots.suffix,
  35. prefixCls
  36. } = props;
  37. if (!allowClear) {
  38. return null;
  39. }
  40. const needClear = !disabled && !readonly && value;
  41. const className = `${prefixCls}-clear-icon`;
  42. const iconNode = ((_a = slots.clearIcon) === null || _a === void 0 ? void 0 : _a.call(slots)) || '*';
  43. return _createVNode("span", {
  44. "onClick": handleReset,
  45. "onMousedown": e => e.preventDefault(),
  46. "class": classNames({
  47. [`${className}-hidden`]: !needClear,
  48. [`${className}-has-suffix`]: !!suffix
  49. }, className),
  50. "role": "button",
  51. "tabindex": -1
  52. }, [iconNode]);
  53. };
  54. return () => {
  55. var _a, _b;
  56. const {
  57. focused,
  58. value,
  59. disabled,
  60. allowClear,
  61. readonly,
  62. hidden,
  63. prefixCls,
  64. prefix = (_a = slots.prefix) === null || _a === void 0 ? void 0 : _a.call(slots),
  65. suffix = (_b = slots.suffix) === null || _b === void 0 ? void 0 : _b.call(slots),
  66. addonAfter = slots.addonAfter,
  67. addonBefore = slots.addonBefore,
  68. inputElement,
  69. affixWrapperClassName,
  70. wrapperClassName,
  71. groupClassName
  72. } = props;
  73. let element = cloneElement(inputElement, {
  74. value,
  75. hidden
  76. });
  77. // ================== Prefix & Suffix ================== //
  78. if (hasPrefixSuffix({
  79. prefix,
  80. suffix,
  81. allowClear
  82. })) {
  83. const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
  84. const affixWrapperCls = classNames(affixWrapperPrefixCls, {
  85. [`${affixWrapperPrefixCls}-disabled`]: disabled,
  86. [`${affixWrapperPrefixCls}-focused`]: focused,
  87. [`${affixWrapperPrefixCls}-readonly`]: readonly,
  88. [`${affixWrapperPrefixCls}-input-with-clear-btn`]: suffix && allowClear && value
  89. }, !hasAddon({
  90. addonAfter,
  91. addonBefore
  92. }) && attrs.class, affixWrapperClassName);
  93. const suffixNode = (suffix || allowClear) && _createVNode("span", {
  94. "class": `${prefixCls}-suffix`
  95. }, [getClearIcon(), suffix]);
  96. element = _createVNode("span", {
  97. "class": affixWrapperCls,
  98. "style": attrs.style,
  99. "hidden": !hasAddon({
  100. addonAfter,
  101. addonBefore
  102. }) && hidden,
  103. "onMousedown": onInputMouseDown,
  104. "ref": containerRef
  105. }, [prefix && _createVNode("span", {
  106. "class": `${prefixCls}-prefix`
  107. }, [prefix]), cloneElement(inputElement, {
  108. style: null,
  109. value,
  110. hidden: null
  111. }), suffixNode]);
  112. }
  113. // ================== Addon ================== //
  114. if (hasAddon({
  115. addonAfter,
  116. addonBefore
  117. })) {
  118. const wrapperCls = `${prefixCls}-group`;
  119. const addonCls = `${wrapperCls}-addon`;
  120. const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperCls, wrapperClassName);
  121. const mergedGroupClassName = classNames(`${prefixCls}-group-wrapper`, attrs.class, groupClassName);
  122. // Need another wrapper for changing display:table to display:inline-block
  123. // and put style prop in wrapper
  124. return _createVNode("span", {
  125. "class": mergedGroupClassName,
  126. "style": attrs.style,
  127. "hidden": hidden
  128. }, [_createVNode("span", {
  129. "class": mergedWrapperClassName
  130. }, [addonBefore && _createVNode("span", {
  131. "class": addonCls
  132. }, [addonBefore]), cloneElement(element, {
  133. style: null,
  134. hidden: null
  135. }), addonAfter && _createVNode("span", {
  136. "class": addonCls
  137. }, [addonAfter])])]);
  138. }
  139. return element;
  140. };
  141. }
  142. });