SingleSelector.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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 _pickAttrs = _interopRequireDefault(require("../../_util/pickAttrs"));
  9. var _Input = _interopRequireDefault(require("./Input"));
  10. var _vueTypes = _interopRequireDefault(require("../../_util/vue-types"));
  11. var _LegacyContext = _interopRequireDefault(require("../../vc-tree-select/LegacyContext"));
  12. const props = {
  13. inputElement: _vueTypes.default.any,
  14. id: String,
  15. prefixCls: String,
  16. values: _vueTypes.default.array,
  17. open: {
  18. type: Boolean,
  19. default: undefined
  20. },
  21. searchValue: String,
  22. inputRef: _vueTypes.default.any,
  23. placeholder: _vueTypes.default.any,
  24. compositionStatus: {
  25. type: Boolean,
  26. default: undefined
  27. },
  28. disabled: {
  29. type: Boolean,
  30. default: undefined
  31. },
  32. mode: String,
  33. showSearch: {
  34. type: Boolean,
  35. default: undefined
  36. },
  37. autofocus: {
  38. type: Boolean,
  39. default: undefined
  40. },
  41. autocomplete: String,
  42. activeDescendantId: String,
  43. tabindex: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
  44. activeValue: String,
  45. backfill: {
  46. type: Boolean,
  47. default: undefined
  48. },
  49. optionLabelRender: Function,
  50. onInputChange: Function,
  51. onInputPaste: Function,
  52. onInputKeyDown: Function,
  53. onInputMouseDown: Function,
  54. onInputCompositionStart: Function,
  55. onInputCompositionEnd: Function
  56. };
  57. const SingleSelector = (0, _vue.defineComponent)({
  58. name: 'SingleSelector',
  59. setup(props) {
  60. const inputChanged = (0, _vue.shallowRef)(false);
  61. const combobox = (0, _vue.computed)(() => props.mode === 'combobox');
  62. const inputEditable = (0, _vue.computed)(() => combobox.value || props.showSearch);
  63. const inputValue = (0, _vue.computed)(() => {
  64. let inputValue = props.searchValue || '';
  65. if (combobox.value && props.activeValue && !inputChanged.value) {
  66. inputValue = props.activeValue;
  67. }
  68. return inputValue;
  69. });
  70. const legacyTreeSelectContext = (0, _LegacyContext.default)();
  71. (0, _vue.watch)([combobox, () => props.activeValue], () => {
  72. if (combobox.value) {
  73. inputChanged.value = false;
  74. }
  75. }, {
  76. immediate: true
  77. });
  78. // Not show text when closed expect combobox mode
  79. const hasTextInput = (0, _vue.computed)(() => props.mode !== 'combobox' && !props.open && !props.showSearch ? false : !!inputValue.value || props.compositionStatus);
  80. const title = (0, _vue.computed)(() => {
  81. const item = props.values[0];
  82. return item && (typeof item.label === 'string' || typeof item.label === 'number') ? item.label.toString() : undefined;
  83. });
  84. const renderPlaceholder = () => {
  85. if (props.values[0]) {
  86. return null;
  87. }
  88. const hiddenStyle = hasTextInput.value ? {
  89. visibility: 'hidden'
  90. } : undefined;
  91. return (0, _vue.createVNode)("span", {
  92. "class": `${props.prefixCls}-selection-placeholder`,
  93. "style": hiddenStyle
  94. }, [props.placeholder]);
  95. };
  96. const handleInput = e => {
  97. const composing = e.target.composing;
  98. if (!composing) {
  99. inputChanged.value = true;
  100. props.onInputChange(e);
  101. }
  102. };
  103. return () => {
  104. var _a, _b, _c, _d;
  105. const {
  106. inputElement,
  107. prefixCls,
  108. id,
  109. values,
  110. inputRef,
  111. disabled,
  112. autofocus,
  113. autocomplete,
  114. activeDescendantId,
  115. open,
  116. tabindex,
  117. optionLabelRender,
  118. onInputKeyDown,
  119. onInputMouseDown,
  120. onInputPaste,
  121. onInputCompositionStart,
  122. onInputCompositionEnd
  123. } = props;
  124. const item = values[0];
  125. let titleNode = null;
  126. // custom tree-select title by slot
  127. // For TreeSelect
  128. if (item && legacyTreeSelectContext.customSlots) {
  129. const key = (_a = item.key) !== null && _a !== void 0 ? _a : item.value;
  130. const originData = ((_b = legacyTreeSelectContext.keyEntities[key]) === null || _b === void 0 ? void 0 : _b.node) || {};
  131. titleNode = legacyTreeSelectContext.customSlots[(_c = originData.slots) === null || _c === void 0 ? void 0 : _c.title] || legacyTreeSelectContext.customSlots.title || item.label;
  132. if (typeof titleNode === 'function') {
  133. titleNode = titleNode(originData);
  134. }
  135. // else if (treeSelectContext.value.slots.titleRender) {
  136. // // 因历史 title 是覆盖逻辑,新增 titleRender,所有的 title 都走一遍 titleRender
  137. // titleNode = treeSelectContext.value.slots.titleRender(item.option?.data || {});
  138. // }
  139. } else {
  140. titleNode = optionLabelRender && item ? optionLabelRender(item.option) : item === null || item === void 0 ? void 0 : item.label;
  141. }
  142. return (0, _vue.createVNode)(_vue.Fragment, null, [(0, _vue.createVNode)("span", {
  143. "class": `${prefixCls}-selection-search`
  144. }, [(0, _vue.createVNode)(_Input.default, {
  145. "inputRef": inputRef,
  146. "prefixCls": prefixCls,
  147. "id": id,
  148. "open": open,
  149. "inputElement": inputElement,
  150. "disabled": disabled,
  151. "autofocus": autofocus,
  152. "autocomplete": autocomplete,
  153. "editable": inputEditable.value,
  154. "activeDescendantId": activeDescendantId,
  155. "value": inputValue.value,
  156. "onKeydown": onInputKeyDown,
  157. "onMousedown": onInputMouseDown,
  158. "onChange": handleInput,
  159. "onPaste": onInputPaste,
  160. "onCompositionstart": onInputCompositionStart,
  161. "onCompositionend": onInputCompositionEnd,
  162. "tabindex": tabindex,
  163. "attrs": (0, _pickAttrs.default)(props, true)
  164. }, null)]), !combobox.value && item && !hasTextInput.value && (0, _vue.createVNode)("span", {
  165. "class": `${prefixCls}-selection-item`,
  166. "title": title.value
  167. }, [(0, _vue.createVNode)(_vue.Fragment, {
  168. "key": (_d = item.key) !== null && _d !== void 0 ? _d : item.value
  169. }, [titleNode])]), renderPlaceholder()]);
  170. };
  171. }
  172. });
  173. SingleSelector.props = props;
  174. SingleSelector.inheritAttrs = false;
  175. var _default = exports.default = SingleSelector;