Input.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createVNode as _createVNode } from "vue";
  3. import { cloneElement } from '../../_util/vnode';
  4. import { defineComponent, inject } from 'vue';
  5. import PropTypes from '../../_util/vue-types';
  6. import classNames from '../../_util/classNames';
  7. import BaseInput from '../../_util/BaseInput';
  8. export const inputProps = {
  9. inputRef: PropTypes.any,
  10. prefixCls: String,
  11. id: String,
  12. inputElement: PropTypes.VueNode,
  13. disabled: {
  14. type: Boolean,
  15. default: undefined
  16. },
  17. autofocus: {
  18. type: Boolean,
  19. default: undefined
  20. },
  21. autocomplete: String,
  22. editable: {
  23. type: Boolean,
  24. default: undefined
  25. },
  26. activeDescendantId: String,
  27. value: String,
  28. open: {
  29. type: Boolean,
  30. default: undefined
  31. },
  32. tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  33. /** Pass accessibility props to input */
  34. attrs: PropTypes.object,
  35. onKeydown: {
  36. type: Function
  37. },
  38. onMousedown: {
  39. type: Function
  40. },
  41. onChange: {
  42. type: Function
  43. },
  44. onPaste: {
  45. type: Function
  46. },
  47. onCompositionstart: {
  48. type: Function
  49. },
  50. onCompositionend: {
  51. type: Function
  52. },
  53. onFocus: {
  54. type: Function
  55. },
  56. onBlur: {
  57. type: Function
  58. }
  59. };
  60. const Input = defineComponent({
  61. compatConfig: {
  62. MODE: 3
  63. },
  64. name: 'SelectInput',
  65. inheritAttrs: false,
  66. props: inputProps,
  67. setup(props) {
  68. let blurTimeout = null;
  69. const VCSelectContainerEvent = inject('VCSelectContainerEvent');
  70. return () => {
  71. var _a;
  72. const {
  73. prefixCls,
  74. id,
  75. inputElement,
  76. disabled,
  77. tabindex,
  78. autofocus,
  79. autocomplete,
  80. editable,
  81. activeDescendantId,
  82. value,
  83. onKeydown,
  84. onMousedown,
  85. onChange,
  86. onPaste,
  87. onCompositionstart,
  88. onCompositionend,
  89. onFocus,
  90. onBlur,
  91. open,
  92. inputRef,
  93. attrs
  94. } = props;
  95. let inputNode = inputElement || _createVNode(BaseInput, null, null);
  96. const inputProps = inputNode.props || {};
  97. const {
  98. onKeydown: onOriginKeyDown,
  99. onInput: onOriginInput,
  100. onFocus: onOriginFocus,
  101. onBlur: onOriginBlur,
  102. onMousedown: onOriginMouseDown,
  103. onCompositionstart: onOriginCompositionStart,
  104. onCompositionend: onOriginCompositionEnd,
  105. style
  106. } = inputProps;
  107. inputNode = cloneElement(inputNode, _extends(_extends(_extends(_extends(_extends({
  108. type: 'search'
  109. }, inputProps), {
  110. id,
  111. ref: inputRef,
  112. disabled,
  113. tabindex,
  114. lazy: false,
  115. autocomplete: autocomplete || 'off',
  116. autofocus,
  117. class: classNames(`${prefixCls}-selection-search-input`, (_a = inputNode === null || inputNode === void 0 ? void 0 : inputNode.props) === null || _a === void 0 ? void 0 : _a.class),
  118. role: 'combobox',
  119. 'aria-expanded': open,
  120. 'aria-haspopup': 'listbox',
  121. 'aria-owns': `${id}_list`,
  122. 'aria-autocomplete': 'list',
  123. 'aria-controls': `${id}_list`,
  124. 'aria-activedescendant': activeDescendantId
  125. }), attrs), {
  126. value: editable ? value : '',
  127. readonly: !editable,
  128. unselectable: !editable ? 'on' : null,
  129. style: _extends(_extends({}, style), {
  130. opacity: editable ? null : 0
  131. }),
  132. onKeydown: event => {
  133. onKeydown(event);
  134. if (onOriginKeyDown) {
  135. onOriginKeyDown(event);
  136. }
  137. },
  138. onMousedown: event => {
  139. onMousedown(event);
  140. if (onOriginMouseDown) {
  141. onOriginMouseDown(event);
  142. }
  143. },
  144. onInput: event => {
  145. onChange(event);
  146. if (onOriginInput) {
  147. onOriginInput(event);
  148. }
  149. },
  150. onCompositionstart(event) {
  151. onCompositionstart(event);
  152. if (onOriginCompositionStart) {
  153. onOriginCompositionStart(event);
  154. }
  155. },
  156. onCompositionend(event) {
  157. onCompositionend(event);
  158. if (onOriginCompositionEnd) {
  159. onOriginCompositionEnd(event);
  160. }
  161. },
  162. onPaste,
  163. onFocus: function () {
  164. clearTimeout(blurTimeout);
  165. onOriginFocus && onOriginFocus(arguments.length <= 0 ? undefined : arguments[0]);
  166. onFocus && onFocus(arguments.length <= 0 ? undefined : arguments[0]);
  167. VCSelectContainerEvent === null || VCSelectContainerEvent === void 0 ? void 0 : VCSelectContainerEvent.focus(arguments.length <= 0 ? undefined : arguments[0]);
  168. },
  169. onBlur: function () {
  170. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  171. args[_key] = arguments[_key];
  172. }
  173. blurTimeout = setTimeout(() => {
  174. onOriginBlur && onOriginBlur(args[0]);
  175. onBlur && onBlur(args[0]);
  176. VCSelectContainerEvent === null || VCSelectContainerEvent === void 0 ? void 0 : VCSelectContainerEvent.blur(args[0]);
  177. }, 100);
  178. }
  179. }), inputNode.type === 'textarea' ? {} : {
  180. type: 'search'
  181. }), true, true);
  182. return inputNode;
  183. };
  184. }
  185. });
  186. export default Input;