Tree.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.treeProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  11. var _vcTree = _interopRequireDefault(require("../vc-tree"));
  12. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  13. var _propsUtil = require("../_util/props-util");
  14. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  15. var _props = require("../vc-tree/props");
  16. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  17. var _iconUtil = _interopRequireDefault(require("./utils/iconUtil"));
  18. var _dropIndicator = _interopRequireDefault(require("./utils/dropIndicator"));
  19. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  20. var _warning = require("../vc-util/warning");
  21. var _omit = _interopRequireDefault(require("../_util/omit"));
  22. var _type = require("../_util/type");
  23. var _style = _interopRequireDefault(require("./style"));
  24. // CSSINJS
  25. const treeProps = () => {
  26. const baseTreeProps = (0, _props.treeProps)();
  27. return (0, _extends2.default)((0, _extends2.default)({}, baseTreeProps), {
  28. showLine: (0, _type.someType)([Boolean, Object]),
  29. /** 是否支持多选 */
  30. multiple: (0, _type.booleanType)(),
  31. /** 是否自动展开父节点 */
  32. autoExpandParent: (0, _type.booleanType)(),
  33. /** checkable状态下节点选择完全受控(父子节点选中状态不再关联)*/
  34. checkStrictly: (0, _type.booleanType)(),
  35. /** 是否支持选中 */
  36. checkable: (0, _type.booleanType)(),
  37. /** 是否禁用树 */
  38. disabled: (0, _type.booleanType)(),
  39. /** 默认展开所有树节点 */
  40. defaultExpandAll: (0, _type.booleanType)(),
  41. /** 默认展开对应树节点 */
  42. defaultExpandParent: (0, _type.booleanType)(),
  43. /** 默认展开指定的树节点 */
  44. defaultExpandedKeys: (0, _type.arrayType)(),
  45. /** (受控)展开指定的树节点 */
  46. expandedKeys: (0, _type.arrayType)(),
  47. /** (受控)选中复选框的树节点 */
  48. checkedKeys: (0, _type.someType)([Array, Object]),
  49. /** 默认选中复选框的树节点 */
  50. defaultCheckedKeys: (0, _type.arrayType)(),
  51. /** (受控)设置选中的树节点 */
  52. selectedKeys: (0, _type.arrayType)(),
  53. /** 默认选中的树节点 */
  54. defaultSelectedKeys: (0, _type.arrayType)(),
  55. selectable: (0, _type.booleanType)(),
  56. loadedKeys: (0, _type.arrayType)(),
  57. draggable: (0, _type.booleanType)(),
  58. showIcon: (0, _type.booleanType)(),
  59. icon: (0, _type.functionType)(),
  60. switcherIcon: _vueTypes.default.any,
  61. prefixCls: String,
  62. /**
  63. * @default{title,key,children}
  64. * deprecated, please use `fieldNames` instead
  65. * 替换treeNode中 title,key,children字段为treeData中对应的字段
  66. */
  67. replaceFields: (0, _type.objectType)(),
  68. blockNode: (0, _type.booleanType)(),
  69. openAnimation: _vueTypes.default.any,
  70. onDoubleclick: baseTreeProps.onDblclick,
  71. 'onUpdate:selectedKeys': (0, _type.functionType)(),
  72. 'onUpdate:checkedKeys': (0, _type.functionType)(),
  73. 'onUpdate:expandedKeys': (0, _type.functionType)()
  74. });
  75. };
  76. exports.treeProps = treeProps;
  77. var _default = exports.default = (0, _vue.defineComponent)({
  78. compatConfig: {
  79. MODE: 3
  80. },
  81. name: 'ATree',
  82. inheritAttrs: false,
  83. props: (0, _initDefaultProps.default)(treeProps(), {
  84. checkable: false,
  85. selectable: true,
  86. showIcon: false,
  87. blockNode: false
  88. }),
  89. slots: Object,
  90. setup(props, _ref) {
  91. let {
  92. attrs,
  93. expose,
  94. emit,
  95. slots
  96. } = _ref;
  97. (0, _warning.warning)(!(props.treeData === undefined && slots.default), '`children` of Tree is deprecated. Please use `treeData` instead.');
  98. const {
  99. prefixCls,
  100. direction,
  101. virtual
  102. } = (0, _useConfigInject.default)('tree', props);
  103. // style
  104. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  105. const treeRef = (0, _vue.ref)();
  106. const scrollTo = scroll => {
  107. var _a;
  108. (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(scroll);
  109. };
  110. expose({
  111. treeRef,
  112. onNodeExpand: function () {
  113. var _a;
  114. (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.onNodeExpand(...arguments);
  115. },
  116. scrollTo,
  117. selectedKeys: (0, _vue.computed)(() => {
  118. var _a;
  119. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.selectedKeys;
  120. }),
  121. checkedKeys: (0, _vue.computed)(() => {
  122. var _a;
  123. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.checkedKeys;
  124. }),
  125. halfCheckedKeys: (0, _vue.computed)(() => {
  126. var _a;
  127. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.halfCheckedKeys;
  128. }),
  129. loadedKeys: (0, _vue.computed)(() => {
  130. var _a;
  131. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.loadedKeys;
  132. }),
  133. loadingKeys: (0, _vue.computed)(() => {
  134. var _a;
  135. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.loadingKeys;
  136. }),
  137. expandedKeys: (0, _vue.computed)(() => {
  138. var _a;
  139. return (_a = treeRef.value) === null || _a === void 0 ? void 0 : _a.expandedKeys;
  140. })
  141. });
  142. (0, _vue.watchEffect)(() => {
  143. (0, _devWarning.default)(props.replaceFields === undefined, 'Tree', '`replaceFields` is deprecated, please use fieldNames instead');
  144. });
  145. const handleCheck = (checkedObjOrKeys, eventObj) => {
  146. emit('update:checkedKeys', checkedObjOrKeys);
  147. emit('check', checkedObjOrKeys, eventObj);
  148. };
  149. const handleExpand = (expandedKeys, eventObj) => {
  150. emit('update:expandedKeys', expandedKeys);
  151. emit('expand', expandedKeys, eventObj);
  152. };
  153. const handleSelect = (selectedKeys, eventObj) => {
  154. emit('update:selectedKeys', selectedKeys);
  155. emit('select', selectedKeys, eventObj);
  156. };
  157. return () => {
  158. const {
  159. showIcon,
  160. showLine,
  161. switcherIcon = slots.switcherIcon,
  162. icon = slots.icon,
  163. blockNode,
  164. checkable,
  165. selectable,
  166. fieldNames = props.replaceFields,
  167. motion = props.openAnimation,
  168. itemHeight = 28,
  169. onDoubleclick,
  170. onDblclick
  171. } = props;
  172. const newProps = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, attrs), (0, _omit.default)(props, ['onUpdate:checkedKeys', 'onUpdate:expandedKeys', 'onUpdate:selectedKeys', 'onDoubleclick'])), {
  173. showLine: Boolean(showLine),
  174. dropIndicatorRender: _dropIndicator.default,
  175. fieldNames,
  176. icon,
  177. itemHeight
  178. });
  179. const children = slots.default ? (0, _propsUtil.filterEmpty)(slots.default()) : undefined;
  180. return wrapSSR((0, _vue.createVNode)(_vcTree.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, newProps), {}, {
  181. "virtual": virtual.value,
  182. "motion": motion,
  183. "ref": treeRef,
  184. "prefixCls": prefixCls.value,
  185. "class": (0, _classNames.default)({
  186. [`${prefixCls.value}-icon-hide`]: !showIcon,
  187. [`${prefixCls.value}-block-node`]: blockNode,
  188. [`${prefixCls.value}-unselectable`]: !selectable,
  189. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  190. }, attrs.class, hashId.value),
  191. "direction": direction.value,
  192. "checkable": checkable,
  193. "selectable": selectable,
  194. "switcherIcon": nodeProps => (0, _iconUtil.default)(prefixCls.value, switcherIcon, nodeProps, slots.leafIcon, showLine),
  195. "onCheck": handleCheck,
  196. "onExpand": handleExpand,
  197. "onSelect": handleSelect,
  198. "onDblclick": onDblclick || onDoubleclick,
  199. "children": children
  200. }), (0, _extends2.default)((0, _extends2.default)({}, slots), {
  201. checkable: () => (0, _vue.createVNode)("span", {
  202. "class": `${prefixCls.value}-checkbox-inner`
  203. }, null)
  204. })));
  205. };
  206. }
  207. });