Input.js 5.6 KB

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