SingleSelector.js 6.6 KB

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