BaseInput.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  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 _vueTypes = _interopRequireDefault(require("./vue-types"));
  10. var _BaseInputInner = _interopRequireDefault(require("./BaseInputInner"));
  11. var _css = require("../vc-util/Dom/css");
  12. var __rest = void 0 && (void 0).__rest || function (s, e) {
  13. var t = {};
  14. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  15. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  16. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  17. }
  18. return t;
  19. };
  20. const BaseInput = (0, _vue.defineComponent)({
  21. compatConfig: {
  22. MODE: 3
  23. },
  24. inheritAttrs: false,
  25. props: {
  26. disabled: _vueTypes.default.looseBool,
  27. type: _vueTypes.default.string,
  28. value: _vueTypes.default.any,
  29. lazy: _vueTypes.default.bool.def(true),
  30. tag: {
  31. type: String,
  32. default: 'input'
  33. },
  34. size: _vueTypes.default.string,
  35. style: _vueTypes.default.oneOfType([String, Object]),
  36. class: _vueTypes.default.string
  37. },
  38. emits: ['change', 'input', 'blur', 'keydown', 'focus', 'compositionstart', 'compositionend', 'keyup', 'paste', 'mousedown'],
  39. setup(props, _ref) {
  40. let {
  41. emit,
  42. attrs,
  43. expose
  44. } = _ref;
  45. const inputRef = (0, _vue.shallowRef)(null);
  46. const renderValue = (0, _vue.ref)();
  47. const isComposing = (0, _vue.ref)(false);
  48. (0, _vue.watch)([() => props.value, isComposing], () => {
  49. if (isComposing.value) return;
  50. renderValue.value = props.value;
  51. }, {
  52. immediate: true
  53. });
  54. const handleChange = e => {
  55. emit('change', e);
  56. };
  57. const onCompositionstart = e => {
  58. isComposing.value = true;
  59. e.target.composing = true;
  60. emit('compositionstart', e);
  61. };
  62. const onCompositionend = e => {
  63. isComposing.value = false;
  64. e.target.composing = false;
  65. emit('compositionend', e);
  66. const event = document.createEvent('HTMLEvents');
  67. event.initEvent('input', true, true);
  68. e.target.dispatchEvent(event);
  69. handleChange(e);
  70. };
  71. const handleInput = e => {
  72. if (isComposing.value && props.lazy) {
  73. renderValue.value = e.target.value;
  74. return;
  75. }
  76. emit('input', e);
  77. };
  78. const handleBlur = e => {
  79. emit('blur', e);
  80. };
  81. const handleFocus = e => {
  82. emit('focus', e);
  83. };
  84. const focus = () => {
  85. if (inputRef.value) {
  86. inputRef.value.focus();
  87. }
  88. };
  89. const blur = () => {
  90. if (inputRef.value) {
  91. inputRef.value.blur();
  92. }
  93. };
  94. const handleKeyDown = e => {
  95. emit('keydown', e);
  96. };
  97. const handleKeyUp = e => {
  98. emit('keyup', e);
  99. };
  100. const setSelectionRange = (start, end, direction) => {
  101. var _a;
  102. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.setSelectionRange(start, end, direction);
  103. };
  104. const select = () => {
  105. var _a;
  106. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.select();
  107. };
  108. expose({
  109. focus,
  110. blur,
  111. input: (0, _vue.computed)(() => {
  112. var _a;
  113. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.input;
  114. }),
  115. setSelectionRange,
  116. select,
  117. getSelectionStart: () => {
  118. var _a;
  119. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionStart();
  120. },
  121. getSelectionEnd: () => {
  122. var _a;
  123. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getSelectionEnd();
  124. },
  125. getScrollTop: () => {
  126. var _a;
  127. return (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.getScrollTop();
  128. }
  129. });
  130. const handleMousedown = e => {
  131. emit('mousedown', e);
  132. };
  133. const handlePaste = e => {
  134. emit('paste', e);
  135. };
  136. const styleString = (0, _vue.computed)(() => {
  137. return props.style && typeof props.style !== 'string' ? (0, _css.styleObjectToString)(props.style) : props.style;
  138. });
  139. return () => {
  140. const {
  141. style,
  142. lazy
  143. } = props,
  144. restProps = __rest(props, ["style", "lazy"]);
  145. return (0, _vue.createVNode)(_BaseInputInner.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), attrs), {}, {
  146. "style": styleString.value,
  147. "onInput": handleInput,
  148. "onChange": handleChange,
  149. "onBlur": handleBlur,
  150. "onFocus": handleFocus,
  151. "ref": inputRef,
  152. "value": renderValue.value,
  153. "onCompositionstart": onCompositionstart,
  154. "onCompositionend": onCompositionend,
  155. "onKeyup": handleKeyUp,
  156. "onKeydown": handleKeyDown,
  157. "onPaste": handlePaste,
  158. "onMousedown": handleMousedown
  159. }), null);
  160. };
  161. }
  162. });
  163. var _default = exports.default = BaseInput;