index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.TreeSelectNode = void 0;
  7. exports.treeSelectProps = treeSelectProps;
  8. var _vue = require("vue");
  9. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  11. var _vcTreeSelect = _interopRequireWildcard(require("../vc-tree-select"));
  12. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  13. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  14. var _omit = _interopRequireDefault(require("../_util/omit"));
  15. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  16. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  17. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  18. var _iconUtil = _interopRequireDefault(require("../select/utils/iconUtil"));
  19. var _iconUtil2 = _interopRequireDefault(require("../tree/utils/iconUtil"));
  20. var _warning = require("../vc-util/warning");
  21. var _propsUtil = require("../_util/props-util");
  22. var _FormItemContext = require("../form/FormItemContext");
  23. var _transition = require("../_util/transition");
  24. var _statusUtils = require("../_util/statusUtils");
  25. var _type = require("../_util/type");
  26. var _style = _interopRequireDefault(require("../select/style"));
  27. var _style2 = _interopRequireDefault(require("./style"));
  28. var _Compact = require("../space/Compact");
  29. var _DisabledContext = require("../config-provider/DisabledContext");
  30. function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
  31. function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
  32. // CSSINJS
  33. const getTransitionName = (rootPrefixCls, motion, transitionName) => {
  34. if (transitionName !== undefined) {
  35. return transitionName;
  36. }
  37. return `${rootPrefixCls}-${motion}`;
  38. };
  39. function treeSelectProps() {
  40. return (0, _extends2.default)((0, _extends2.default)({}, (0, _omit.default)((0, _vcTreeSelect.treeSelectProps)(), ['showTreeIcon', 'treeMotion', 'inputIcon', 'getInputElement', 'treeLine', 'customSlots'])), {
  41. suffixIcon: _vueTypes.default.any,
  42. size: (0, _type.stringType)(),
  43. bordered: (0, _type.booleanType)(),
  44. treeLine: (0, _type.someType)([Boolean, Object]),
  45. replaceFields: (0, _type.objectType)(),
  46. placement: (0, _type.stringType)(),
  47. status: (0, _type.stringType)(),
  48. popupClassName: String,
  49. /** @deprecated Please use `popupClassName` instead */
  50. dropdownClassName: String,
  51. 'onUpdate:value': (0, _type.functionType)(),
  52. 'onUpdate:treeExpandedKeys': (0, _type.functionType)(),
  53. 'onUpdate:searchValue': (0, _type.functionType)()
  54. });
  55. }
  56. const TreeSelect = (0, _vue.defineComponent)({
  57. compatConfig: {
  58. MODE: 3
  59. },
  60. name: 'ATreeSelect',
  61. inheritAttrs: false,
  62. props: (0, _initDefaultProps.default)(treeSelectProps(), {
  63. choiceTransitionName: '',
  64. listHeight: 256,
  65. treeIcon: false,
  66. listItemHeight: 26,
  67. bordered: true
  68. }),
  69. slots: Object,
  70. setup(props, _ref) {
  71. let {
  72. attrs,
  73. slots,
  74. expose,
  75. emit
  76. } = _ref;
  77. (0, _warning.warning)(!(props.treeData === undefined && slots.default), '`children` of TreeSelect is deprecated. Please use `treeData` instead.');
  78. (0, _devWarning.default)(props.multiple !== false || !props.treeCheckable, 'TreeSelect', '`multiple` will always be `true` when `treeCheckable` is true');
  79. (0, _devWarning.default)(props.replaceFields === undefined, 'TreeSelect', '`replaceFields` is deprecated, please use fieldNames instead');
  80. (0, _devWarning.default)(!props.dropdownClassName, 'TreeSelect', '`dropdownClassName` is deprecated. Please use `popupClassName` instead.');
  81. const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  82. const formItemInputContext = _FormItemContext.FormItemInputContext.useInject();
  83. const mergedStatus = (0, _vue.computed)(() => (0, _statusUtils.getMergedStatus)(formItemInputContext.status, props.status));
  84. const {
  85. prefixCls,
  86. renderEmpty,
  87. direction,
  88. virtual,
  89. dropdownMatchSelectWidth,
  90. size: contextSize,
  91. getPopupContainer,
  92. getPrefixCls,
  93. disabled
  94. } = (0, _useConfigInject.default)('select', props);
  95. const {
  96. compactSize,
  97. compactItemClassnames
  98. } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
  99. const mergedSize = (0, _vue.computed)(() => compactSize.value || contextSize.value);
  100. const contextDisabled = (0, _DisabledContext.useInjectDisabled)();
  101. const mergedDisabled = (0, _vue.computed)(() => {
  102. var _a;
  103. return (_a = disabled.value) !== null && _a !== void 0 ? _a : contextDisabled.value;
  104. });
  105. const rootPrefixCls = (0, _vue.computed)(() => getPrefixCls());
  106. // ===================== Placement =====================
  107. const placement = (0, _vue.computed)(() => {
  108. if (props.placement !== undefined) {
  109. return props.placement;
  110. }
  111. return direction.value === 'rtl' ? 'bottomRight' : 'bottomLeft';
  112. });
  113. const transitionName = (0, _vue.computed)(() => getTransitionName(rootPrefixCls.value, (0, _transition.getTransitionDirection)(placement.value), props.transitionName));
  114. const choiceTransitionName = (0, _vue.computed)(() => getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName));
  115. const treePrefixCls = (0, _vue.computed)(() => getPrefixCls('select-tree', props.prefixCls));
  116. const treeSelectPrefixCls = (0, _vue.computed)(() => getPrefixCls('tree-select', props.prefixCls));
  117. // style
  118. const [wrapSelectSSR, hashId] = (0, _style.default)(prefixCls);
  119. const [wrapTreeSelectSSR] = (0, _style2.default)(treeSelectPrefixCls, treePrefixCls);
  120. const mergedDropdownClassName = (0, _vue.computed)(() => (0, _classNames.default)(props.popupClassName || props.dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, {
  121. [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === 'rtl'
  122. }, hashId.value));
  123. const isMultiple = (0, _vue.computed)(() => !!(props.treeCheckable || props.multiple));
  124. const mergedShowArrow = (0, _vue.computed)(() => props.showArrow !== undefined ? props.showArrow : props.loading || !isMultiple.value);
  125. const treeSelectRef = (0, _vue.ref)();
  126. expose({
  127. focus() {
  128. var _a, _b;
  129. (_b = (_a = treeSelectRef.value).focus) === null || _b === void 0 ? void 0 : _b.call(_a);
  130. },
  131. blur() {
  132. var _a, _b;
  133. (_b = (_a = treeSelectRef.value).blur) === null || _b === void 0 ? void 0 : _b.call(_a);
  134. }
  135. });
  136. const handleChange = function () {
  137. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  138. args[_key] = arguments[_key];
  139. }
  140. emit('update:value', args[0]);
  141. emit('change', ...args);
  142. formItemContext.onFieldChange();
  143. };
  144. const handleTreeExpand = keys => {
  145. emit('update:treeExpandedKeys', keys);
  146. emit('treeExpand', keys);
  147. };
  148. const handleSearch = value => {
  149. emit('update:searchValue', value);
  150. emit('search', value);
  151. };
  152. const handleBlur = e => {
  153. emit('blur', e);
  154. formItemContext.onFieldBlur();
  155. };
  156. return () => {
  157. var _a, _b, _c;
  158. const {
  159. notFoundContent = (_a = slots.notFoundContent) === null || _a === void 0 ? void 0 : _a.call(slots),
  160. prefixCls: customizePrefixCls,
  161. bordered,
  162. listHeight,
  163. listItemHeight,
  164. multiple,
  165. treeIcon,
  166. treeLine,
  167. showArrow,
  168. switcherIcon = (_b = slots.switcherIcon) === null || _b === void 0 ? void 0 : _b.call(slots),
  169. fieldNames = props.replaceFields,
  170. id = formItemContext.id.value,
  171. placeholder = (_c = slots.placeholder) === null || _c === void 0 ? void 0 : _c.call(slots)
  172. } = props;
  173. const {
  174. isFormItemInput,
  175. hasFeedback,
  176. feedbackIcon
  177. } = formItemInputContext;
  178. // ===================== Icons =====================
  179. const {
  180. suffixIcon,
  181. removeIcon,
  182. clearIcon
  183. } = (0, _iconUtil.default)((0, _extends2.default)((0, _extends2.default)({}, props), {
  184. multiple: isMultiple.value,
  185. showArrow: mergedShowArrow.value,
  186. hasFeedback,
  187. feedbackIcon,
  188. prefixCls: prefixCls.value
  189. }), slots);
  190. // ===================== Empty =====================
  191. let mergedNotFound;
  192. if (notFoundContent !== undefined) {
  193. mergedNotFound = notFoundContent;
  194. } else {
  195. mergedNotFound = renderEmpty('Select');
  196. }
  197. // ==================== Render =====================
  198. const selectProps = (0, _omit.default)(props, ['suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'switcherIcon', 'bordered', 'status', 'onUpdate:value', 'onUpdate:treeExpandedKeys', 'onUpdate:searchValue']);
  199. const mergedClassName = (0, _classNames.default)(!customizePrefixCls && treeSelectPrefixCls.value, {
  200. [`${prefixCls.value}-lg`]: mergedSize.value === 'large',
  201. [`${prefixCls.value}-sm`]: mergedSize.value === 'small',
  202. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  203. [`${prefixCls.value}-borderless`]: !bordered,
  204. [`${prefixCls.value}-in-form-item`]: isFormItemInput
  205. }, (0, _statusUtils.getStatusClassNames)(prefixCls.value, mergedStatus.value, hasFeedback), compactItemClassnames.value, attrs.class, hashId.value);
  206. const otherProps = {};
  207. if (props.treeData === undefined && slots.default) {
  208. otherProps.children = (0, _propsUtil.flattenChildren)(slots.default());
  209. }
  210. return wrapSelectSSR(wrapTreeSelectSSR((0, _vue.createVNode)(_vcTreeSelect.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), selectProps), {}, {
  211. "disabled": mergedDisabled.value,
  212. "virtual": virtual.value,
  213. "dropdownMatchSelectWidth": dropdownMatchSelectWidth.value,
  214. "id": id,
  215. "fieldNames": fieldNames,
  216. "ref": treeSelectRef,
  217. "prefixCls": prefixCls.value,
  218. "class": mergedClassName,
  219. "listHeight": listHeight,
  220. "listItemHeight": listItemHeight,
  221. "treeLine": !!treeLine,
  222. "inputIcon": suffixIcon,
  223. "multiple": multiple,
  224. "removeIcon": removeIcon,
  225. "clearIcon": clearIcon,
  226. "switcherIcon": nodeProps => (0, _iconUtil2.default)(treePrefixCls.value, switcherIcon, nodeProps, slots.leafIcon, treeLine),
  227. "showTreeIcon": treeIcon,
  228. "notFoundContent": mergedNotFound,
  229. "getPopupContainer": getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value,
  230. "treeMotion": null,
  231. "dropdownClassName": mergedDropdownClassName.value,
  232. "choiceTransitionName": choiceTransitionName.value,
  233. "onChange": handleChange,
  234. "onBlur": handleBlur,
  235. "onSearch": handleSearch,
  236. "onTreeExpand": handleTreeExpand
  237. }, otherProps), {}, {
  238. "transitionName": transitionName.value,
  239. "customSlots": (0, _extends2.default)((0, _extends2.default)({}, slots), {
  240. treeCheckable: () => (0, _vue.createVNode)("span", {
  241. "class": `${prefixCls.value}-tree-checkbox-inner`
  242. }, null)
  243. }),
  244. "maxTagPlaceholder": props.maxTagPlaceholder || slots.maxTagPlaceholder,
  245. "placement": placement.value,
  246. "showArrow": hasFeedback || showArrow,
  247. "placeholder": placeholder
  248. }), (0, _extends2.default)((0, _extends2.default)({}, slots), {
  249. treeCheckable: () => (0, _vue.createVNode)("span", {
  250. "class": `${prefixCls.value}-tree-checkbox-inner`
  251. }, null)
  252. }))));
  253. };
  254. }
  255. });
  256. /* istanbul ignore next */
  257. const TreeSelectNode = exports.TreeSelectNode = _vcTreeSelect.TreeNode;
  258. var _default = exports.default = (0, _extends2.default)(TreeSelect, {
  259. TreeNode: _vcTreeSelect.TreeNode,
  260. SHOW_ALL: _vcTreeSelect.SHOW_ALL,
  261. SHOW_PARENT: _vcTreeSelect.SHOW_PARENT,
  262. SHOW_CHILD: _vcTreeSelect.SHOW_CHILD,
  263. install: app => {
  264. app.component(TreeSelect.name, TreeSelect);
  265. app.component(TreeSelectNode.displayName, TreeSelectNode);
  266. return app;
  267. }
  268. });