index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  5. import { computed, ref, watchEffect, defineComponent } from 'vue';
  6. import VcTreeSelect, { TreeNode, SHOW_ALL, SHOW_PARENT, SHOW_CHILD, treeSelectProps as vcTreeSelectProps } from '../vc-tree-select';
  7. import classNames from '../_util/classNames';
  8. import initDefaultProps from '../_util/props-util/initDefaultProps';
  9. import omit from '../_util/omit';
  10. import PropTypes from '../_util/vue-types';
  11. import useConfigInject from '../_util/hooks/useConfigInject';
  12. import devWarning from '../vc-util/devWarning';
  13. import getIcons from '../select/utils/iconUtil';
  14. import renderSwitcherIcon from '../tree/utils/iconUtil';
  15. import { warning } from '../vc-util/warning';
  16. import { flattenChildren } from '../_util/props-util';
  17. import { useInjectFormItemContext } from '../form/FormItemContext';
  18. var getTransitionName = function getTransitionName(rootPrefixCls, motion, transitionName) {
  19. if (transitionName !== undefined) {
  20. return transitionName;
  21. }
  22. return "".concat(rootPrefixCls, "-").concat(motion);
  23. };
  24. export function treeSelectProps() {
  25. return _objectSpread(_objectSpread({}, omit(vcTreeSelectProps(), ['showTreeIcon', 'treeMotion', 'inputIcon', 'getInputElement', 'treeLine', 'customSlots'])), {}, {
  26. suffixIcon: PropTypes.any,
  27. size: {
  28. type: String
  29. },
  30. bordered: {
  31. type: Boolean,
  32. default: undefined
  33. },
  34. treeLine: {
  35. type: [Boolean, Object],
  36. default: undefined
  37. },
  38. replaceFields: {
  39. type: Object
  40. },
  41. 'onUpdate:value': {
  42. type: Function
  43. },
  44. 'onUpdate:treeExpandedKeys': {
  45. type: Function
  46. },
  47. 'onUpdate:searchValue': {
  48. type: Function
  49. }
  50. });
  51. }
  52. var TreeSelect = defineComponent({
  53. compatConfig: {
  54. MODE: 3
  55. },
  56. name: 'ATreeSelect',
  57. inheritAttrs: false,
  58. props: initDefaultProps(treeSelectProps(), {
  59. choiceTransitionName: '',
  60. listHeight: 256,
  61. treeIcon: false,
  62. listItemHeight: 26,
  63. bordered: true
  64. }),
  65. slots: ['title', 'titleRender', 'placeholder', 'maxTagPlaceholder', 'treeIcon', 'switcherIcon', 'notFoundContent'],
  66. setup: function setup(props, _ref) {
  67. var attrs = _ref.attrs,
  68. slots = _ref.slots,
  69. expose = _ref.expose,
  70. emit = _ref.emit;
  71. warning(!(props.treeData === undefined && slots.default), '`children` of TreeSelect is deprecated. Please use `treeData` instead.');
  72. watchEffect(function () {
  73. devWarning(props.multiple !== false || !props.treeCheckable, 'TreeSelect', '`multiple` will always be `true` when `treeCheckable` is true');
  74. devWarning(props.replaceFields === undefined, 'TreeSelect', '`replaceFields` is deprecated, please use fieldNames instead');
  75. });
  76. var formItemContext = useInjectFormItemContext();
  77. var _useConfigInject = useConfigInject('select', props),
  78. prefixCls = _useConfigInject.prefixCls,
  79. renderEmpty = _useConfigInject.renderEmpty,
  80. direction = _useConfigInject.direction,
  81. virtual = _useConfigInject.virtual,
  82. dropdownMatchSelectWidth = _useConfigInject.dropdownMatchSelectWidth,
  83. size = _useConfigInject.size,
  84. getPopupContainer = _useConfigInject.getPopupContainer,
  85. getPrefixCls = _useConfigInject.getPrefixCls;
  86. var rootPrefixCls = computed(function () {
  87. return getPrefixCls();
  88. });
  89. var transitionName = computed(function () {
  90. return getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName);
  91. });
  92. var choiceTransitionName = computed(function () {
  93. return getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName);
  94. });
  95. var treePrefixCls = computed(function () {
  96. return getPrefixCls('select-tree', props.prefixCls);
  97. });
  98. var treeSelectPrefixCls = computed(function () {
  99. return getPrefixCls('tree-select', props.prefixCls);
  100. });
  101. var mergedDropdownClassName = computed(function () {
  102. return classNames(props.dropdownClassName, "".concat(treeSelectPrefixCls.value, "-dropdown"), _defineProperty({}, "".concat(treeSelectPrefixCls.value, "-dropdown-rtl"), direction.value === 'rtl'));
  103. });
  104. var isMultiple = computed(function () {
  105. return !!(props.treeCheckable || props.multiple);
  106. });
  107. var treeSelectRef = ref();
  108. expose({
  109. focus: function focus() {
  110. var _treeSelectRef$value$, _treeSelectRef$value;
  111. (_treeSelectRef$value$ = (_treeSelectRef$value = treeSelectRef.value).focus) === null || _treeSelectRef$value$ === void 0 ? void 0 : _treeSelectRef$value$.call(_treeSelectRef$value);
  112. },
  113. blur: function blur() {
  114. var _treeSelectRef$value$2, _treeSelectRef$value2;
  115. (_treeSelectRef$value$2 = (_treeSelectRef$value2 = treeSelectRef.value).blur) === null || _treeSelectRef$value$2 === void 0 ? void 0 : _treeSelectRef$value$2.call(_treeSelectRef$value2);
  116. }
  117. });
  118. var handleChange = function handleChange() {
  119. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  120. args[_key] = arguments[_key];
  121. }
  122. emit('update:value', args[0]);
  123. emit.apply(void 0, ['change'].concat(args));
  124. formItemContext.onFieldChange();
  125. };
  126. var handleTreeExpand = function handleTreeExpand(keys) {
  127. emit('update:treeExpandedKeys', keys);
  128. emit('treeExpand', keys);
  129. };
  130. var handleSearch = function handleSearch(value) {
  131. emit('update:searchValue', value);
  132. emit('search', value);
  133. };
  134. var handleBlur = function handleBlur(e) {
  135. emit('blur', e);
  136. formItemContext.onFieldBlur();
  137. };
  138. return function () {
  139. var _slots$notFoundConten, _slots$switcherIcon, _classNames2;
  140. var _props$notFoundConten = props.notFoundContent,
  141. notFoundContent = _props$notFoundConten === void 0 ? (_slots$notFoundConten = slots.notFoundContent) === null || _slots$notFoundConten === void 0 ? void 0 : _slots$notFoundConten.call(slots) : _props$notFoundConten,
  142. customizePrefixCls = props.prefixCls,
  143. bordered = props.bordered,
  144. listHeight = props.listHeight,
  145. listItemHeight = props.listItemHeight,
  146. multiple = props.multiple,
  147. treeIcon = props.treeIcon,
  148. treeLine = props.treeLine,
  149. _props$switcherIcon = props.switcherIcon,
  150. _switcherIcon = _props$switcherIcon === void 0 ? (_slots$switcherIcon = slots.switcherIcon) === null || _slots$switcherIcon === void 0 ? void 0 : _slots$switcherIcon.call(slots) : _props$switcherIcon,
  151. _props$fieldNames = props.fieldNames,
  152. fieldNames = _props$fieldNames === void 0 ? props.replaceFields : _props$fieldNames,
  153. _props$id = props.id,
  154. id = _props$id === void 0 ? formItemContext.id.value : _props$id;
  155. // ===================== Icons =====================
  156. var _getIcons = getIcons(_objectSpread(_objectSpread({}, props), {}, {
  157. multiple: isMultiple.value,
  158. prefixCls: prefixCls.value
  159. }), slots),
  160. suffixIcon = _getIcons.suffixIcon,
  161. removeIcon = _getIcons.removeIcon,
  162. clearIcon = _getIcons.clearIcon;
  163. // ===================== Empty =====================
  164. var mergedNotFound;
  165. if (notFoundContent !== undefined) {
  166. mergedNotFound = notFoundContent;
  167. } else {
  168. mergedNotFound = renderEmpty.value('Select');
  169. }
  170. // ==================== Render =====================
  171. var selectProps = omit(props, ['suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'bordered', 'onUpdate:value', 'onUpdate:treeExpandedKeys', 'onUpdate:searchValue']);
  172. var mergedClassName = classNames(!customizePrefixCls && treeSelectPrefixCls.value, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls.value, "-lg"), size.value === 'large'), _defineProperty(_classNames2, "".concat(prefixCls.value, "-sm"), size.value === 'small'), _defineProperty(_classNames2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames2, "".concat(prefixCls.value, "-borderless"), !bordered), _classNames2), attrs.class);
  173. var otherProps = {};
  174. if (props.treeData === undefined && slots.default) {
  175. otherProps.children = flattenChildren(slots.default());
  176. }
  177. return _createVNode(VcTreeSelect, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, attrs), selectProps), {}, {
  178. "virtual": virtual.value,
  179. "dropdownMatchSelectWidth": dropdownMatchSelectWidth.value,
  180. "id": id,
  181. "fieldNames": fieldNames,
  182. "ref": treeSelectRef,
  183. "prefixCls": prefixCls.value,
  184. "class": mergedClassName,
  185. "listHeight": listHeight,
  186. "listItemHeight": listItemHeight,
  187. "treeLine": !!treeLine,
  188. "inputIcon": suffixIcon,
  189. "multiple": multiple,
  190. "removeIcon": removeIcon,
  191. "clearIcon": clearIcon,
  192. "switcherIcon": function switcherIcon(nodeProps) {
  193. return renderSwitcherIcon(treePrefixCls.value, _switcherIcon, treeLine, nodeProps);
  194. },
  195. "showTreeIcon": treeIcon,
  196. "notFoundContent": mergedNotFound,
  197. "getPopupContainer": getPopupContainer.value,
  198. "treeMotion": null,
  199. "dropdownClassName": mergedDropdownClassName.value,
  200. "choiceTransitionName": choiceTransitionName.value,
  201. "onChange": handleChange,
  202. "onBlur": handleBlur,
  203. "onSearch": handleSearch,
  204. "onTreeExpand": handleTreeExpand
  205. }, otherProps), {}, {
  206. "transitionName": transitionName.value,
  207. "customSlots": _objectSpread(_objectSpread({}, slots), {}, {
  208. treeCheckable: function treeCheckable() {
  209. return _createVNode("span", {
  210. "class": "".concat(prefixCls.value, "-tree-checkbox-inner")
  211. }, null);
  212. }
  213. }),
  214. "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder
  215. }), _objectSpread(_objectSpread({}, slots), {}, {
  216. treeCheckable: function treeCheckable() {
  217. return _createVNode("span", {
  218. "class": "".concat(prefixCls.value, "-tree-checkbox-inner")
  219. }, null);
  220. }
  221. }));
  222. };
  223. }
  224. });
  225. /* istanbul ignore next */
  226. export var TreeSelectNode = TreeNode;
  227. export default _extends(TreeSelect, {
  228. TreeNode: TreeNode,
  229. SHOW_ALL: SHOW_ALL,
  230. SHOW_PARENT: SHOW_PARENT,
  231. SHOW_CHILD: SHOW_CHILD,
  232. install: function install(app) {
  233. app.component(TreeSelect.name, TreeSelect);
  234. app.component(TreeSelectNode.displayName, TreeSelectNode);
  235. return app;
  236. }
  237. });