Tree.js 42 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof3 = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _vue = require("vue");
  9. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  10. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  11. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  12. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  13. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  14. var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  15. var _contextTypes = require("./contextTypes");
  16. var _util = require("./util");
  17. var _treeUtil = require("./utils/treeUtil");
  18. var _NodeList = _interopRequireWildcard(require("./NodeList"));
  19. var _conductUtil = require("./utils/conductUtil");
  20. var _DropIndicator = _interopRequireDefault(require("./DropIndicator"));
  21. var _initDefaultProps = _interopRequireDefault(require("../_util/props-util/initDefaultProps"));
  22. var _props = require("./props");
  23. var _warning = require("../vc-util/warning");
  24. var _KeyCode = _interopRequireDefault(require("../_util/KeyCode"));
  25. var _classNames2 = _interopRequireDefault(require("../_util/classNames"));
  26. var _pickAttrs = _interopRequireDefault(require("../_util/pickAttrs"));
  27. var _useMaxLevel2 = _interopRequireDefault(require("./useMaxLevel"));
  28. function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
  29. function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  30. var MAX_RETRY_TIMES = 10;
  31. var _default2 = (0, _vue.defineComponent)({
  32. compatConfig: {
  33. MODE: 3
  34. },
  35. name: 'Tree',
  36. inheritAttrs: false,
  37. slots: ['checkable', 'title', 'icon', 'titleRender'],
  38. props: (0, _initDefaultProps.default)((0, _props.treeProps)(), {
  39. prefixCls: 'vc-tree',
  40. showLine: false,
  41. showIcon: true,
  42. selectable: true,
  43. multiple: false,
  44. checkable: false,
  45. disabled: false,
  46. checkStrictly: false,
  47. draggable: false,
  48. defaultExpandParent: true,
  49. autoExpandParent: false,
  50. defaultExpandAll: false,
  51. defaultExpandedKeys: [],
  52. defaultCheckedKeys: [],
  53. defaultSelectedKeys: [],
  54. dropIndicatorRender: _DropIndicator.default,
  55. allowDrop: function allowDrop() {
  56. return true;
  57. }
  58. }),
  59. setup: function setup(props, _ref) {
  60. var attrs = _ref.attrs,
  61. slots = _ref.slots,
  62. expose = _ref.expose;
  63. var destroyed = (0, _vue.ref)(false);
  64. var delayedDragEnterLogic = {};
  65. var indent = (0, _vue.ref)();
  66. var selectedKeys = (0, _vue.shallowRef)([]);
  67. var checkedKeys = (0, _vue.shallowRef)([]);
  68. var halfCheckedKeys = (0, _vue.shallowRef)([]);
  69. var loadedKeys = (0, _vue.shallowRef)([]);
  70. var loadingKeys = (0, _vue.shallowRef)([]);
  71. var expandedKeys = (0, _vue.shallowRef)([]);
  72. var loadingRetryTimes = {};
  73. var dragState = (0, _vue.reactive)({
  74. draggingNodeKey: null,
  75. dragChildrenKeys: [],
  76. // dropTargetKey is the key of abstract-drop-node
  77. // the abstract-drop-node is the real drop node when drag and drop
  78. // not the DOM drag over node
  79. dropTargetKey: null,
  80. dropPosition: null,
  81. dropContainerKey: null,
  82. dropLevelOffset: null,
  83. dropTargetPos: null,
  84. dropAllowed: true,
  85. // the abstract-drag-over-node
  86. // if mouse is on the bottom of top dom node or no the top of the bottom dom node
  87. // abstract-drag-over-node is the top node
  88. dragOverNodeKey: null
  89. });
  90. var treeData = (0, _vue.shallowRef)([]);
  91. (0, _vue.watch)([function () {
  92. return props.treeData;
  93. }, function () {
  94. return props.children;
  95. }], function () {
  96. treeData.value = props.treeData !== undefined ? (0, _vue.toRaw)(props.treeData).slice() : (0, _treeUtil.convertTreeToData)((0, _vue.toRaw)(props.children));
  97. }, {
  98. immediate: true,
  99. deep: true
  100. });
  101. var keyEntities = (0, _vue.shallowRef)({});
  102. var focused = (0, _vue.ref)(false);
  103. var activeKey = (0, _vue.ref)(null);
  104. var listChanging = (0, _vue.ref)(false);
  105. var fieldNames = (0, _vue.computed)(function () {
  106. return (0, _treeUtil.fillFieldNames)(props.fieldNames);
  107. });
  108. var listRef = (0, _vue.ref)();
  109. var dragStartMousePosition = null;
  110. var dragNode = null;
  111. var currentMouseOverDroppableNodeKey = null;
  112. var treeNodeRequiredProps = (0, _vue.computed)(function () {
  113. return {
  114. expandedKeysSet: expandedKeysSet.value,
  115. selectedKeysSet: selectedKeysSet.value,
  116. loadedKeysSet: loadedKeysSet.value,
  117. loadingKeysSet: loadingKeysSet.value,
  118. checkedKeysSet: checkedKeysSet.value,
  119. halfCheckedKeysSet: halfCheckedKeysSet.value,
  120. dragOverNodeKey: dragState.dragOverNodeKey,
  121. dropPosition: dragState.dropPosition,
  122. keyEntities: keyEntities.value
  123. };
  124. });
  125. var expandedKeysSet = (0, _vue.computed)(function () {
  126. return new Set(expandedKeys.value);
  127. });
  128. var selectedKeysSet = (0, _vue.computed)(function () {
  129. return new Set(selectedKeys.value);
  130. });
  131. var loadedKeysSet = (0, _vue.computed)(function () {
  132. return new Set(loadedKeys.value);
  133. });
  134. var loadingKeysSet = (0, _vue.computed)(function () {
  135. return new Set(loadingKeys.value);
  136. });
  137. var checkedKeysSet = (0, _vue.computed)(function () {
  138. return new Set(checkedKeys.value);
  139. });
  140. var halfCheckedKeysSet = (0, _vue.computed)(function () {
  141. return new Set(halfCheckedKeys.value);
  142. });
  143. (0, _vue.watchEffect)(function () {
  144. if (treeData.value) {
  145. var entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData.value, {
  146. fieldNames: fieldNames.value
  147. });
  148. keyEntities.value = (0, _objectSpread3.default)((0, _defineProperty2.default)({}, _NodeList.MOTION_KEY, _NodeList.MotionEntity), entitiesMap.keyEntities);
  149. }
  150. });
  151. var init = false; // 处理 defaultXxxx api, 仅仅首次有效
  152. (0, _vue.watch)([function () {
  153. return props.expandedKeys;
  154. }, function () {
  155. return props.autoExpandParent;
  156. }, keyEntities],
  157. // eslint-disable-next-line @typescript-eslint/no-unused-vars
  158. function (_ref2, _ref3) {
  159. var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
  160. _newKeys = _ref4[0],
  161. newAutoExpandParent = _ref4[1];
  162. var _ref5 = (0, _slicedToArray2.default)(_ref3, 2),
  163. _oldKeys = _ref5[0],
  164. oldAutoExpandParent = _ref5[1];
  165. var keys = expandedKeys.value;
  166. // ================ expandedKeys =================
  167. if (props.expandedKeys !== undefined || init && newAutoExpandParent !== oldAutoExpandParent) {
  168. keys = props.autoExpandParent || !init && props.defaultExpandParent ? (0, _util.conductExpandParent)(props.expandedKeys, keyEntities.value) : props.expandedKeys;
  169. } else if (!init && props.defaultExpandAll) {
  170. var cloneKeyEntities = (0, _objectSpread3.default)({}, keyEntities.value);
  171. delete cloneKeyEntities[_NodeList.MOTION_KEY];
  172. keys = Object.keys(cloneKeyEntities).map(function (key) {
  173. return cloneKeyEntities[key].key;
  174. });
  175. } else if (!init && props.defaultExpandedKeys) {
  176. keys = props.autoExpandParent || props.defaultExpandParent ? (0, _util.conductExpandParent)(props.defaultExpandedKeys, keyEntities.value) : props.defaultExpandedKeys;
  177. }
  178. if (keys) {
  179. expandedKeys.value = keys;
  180. }
  181. init = true;
  182. }, {
  183. immediate: true
  184. });
  185. // ================ flattenNodes =================
  186. var flattenNodes = (0, _vue.shallowRef)([]);
  187. (0, _vue.watchEffect)(function () {
  188. flattenNodes.value = (0, _treeUtil.flattenTreeData)(treeData.value, expandedKeys.value, fieldNames.value);
  189. });
  190. // ================ selectedKeys =================
  191. (0, _vue.watchEffect)(function () {
  192. if (props.selectable) {
  193. if (props.selectedKeys !== undefined) {
  194. selectedKeys.value = (0, _util.calcSelectedKeys)(props.selectedKeys, props);
  195. } else if (!init && props.defaultSelectedKeys) {
  196. selectedKeys.value = (0, _util.calcSelectedKeys)(props.defaultSelectedKeys, props);
  197. }
  198. }
  199. });
  200. var _useMaxLevel = (0, _useMaxLevel2.default)(keyEntities),
  201. maxLevel = _useMaxLevel.maxLevel,
  202. levelEntities = _useMaxLevel.levelEntities;
  203. // ================= checkedKeys =================
  204. (0, _vue.watchEffect)(function () {
  205. if (props.checkable) {
  206. var checkedKeyEntity;
  207. if (props.checkedKeys !== undefined) {
  208. checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {};
  209. } else if (!init && props.defaultCheckedKeys) {
  210. checkedKeyEntity = (0, _util.parseCheckedKeys)(props.defaultCheckedKeys) || {};
  211. } else if (treeData.value) {
  212. // If `treeData` changed, we also need check it
  213. checkedKeyEntity = (0, _util.parseCheckedKeys)(props.checkedKeys) || {
  214. checkedKeys: checkedKeys.value,
  215. halfCheckedKeys: halfCheckedKeys.value
  216. };
  217. }
  218. if (checkedKeyEntity) {
  219. var _checkedKeyEntity = checkedKeyEntity,
  220. _checkedKeyEntity$che = _checkedKeyEntity.checkedKeys,
  221. newCheckedKeys = _checkedKeyEntity$che === void 0 ? [] : _checkedKeyEntity$che,
  222. _checkedKeyEntity$hal = _checkedKeyEntity.halfCheckedKeys,
  223. newHalfCheckedKeys = _checkedKeyEntity$hal === void 0 ? [] : _checkedKeyEntity$hal;
  224. if (!props.checkStrictly) {
  225. var conductKeys = (0, _conductUtil.conductCheck)(newCheckedKeys, true, keyEntities.value, maxLevel.value, levelEntities.value);
  226. newCheckedKeys = conductKeys.checkedKeys;
  227. newHalfCheckedKeys = conductKeys.halfCheckedKeys;
  228. }
  229. checkedKeys.value = newCheckedKeys;
  230. halfCheckedKeys.value = newHalfCheckedKeys;
  231. }
  232. }
  233. });
  234. // ================= loadedKeys ==================
  235. (0, _vue.watchEffect)(function () {
  236. if (props.loadedKeys) {
  237. loadedKeys.value = props.loadedKeys;
  238. }
  239. });
  240. var resetDragState = function resetDragState() {
  241. (0, _extends2.default)(dragState, {
  242. dragOverNodeKey: null,
  243. dropPosition: null,
  244. dropLevelOffset: null,
  245. dropTargetKey: null,
  246. dropContainerKey: null,
  247. dropTargetPos: null,
  248. dropAllowed: false
  249. });
  250. };
  251. var scrollTo = function scrollTo(scroll) {
  252. listRef.value.scrollTo(scroll);
  253. };
  254. (0, _vue.watch)(function () {
  255. return props.activeKey;
  256. }, function () {
  257. if (props.activeKey !== undefined) {
  258. activeKey.value = props.activeKey;
  259. }
  260. }, {
  261. immediate: true
  262. });
  263. (0, _vue.watch)(activeKey, function (val) {
  264. (0, _vue.nextTick)(function () {
  265. if (val !== null) {
  266. scrollTo({
  267. key: val
  268. });
  269. }
  270. });
  271. }, {
  272. immediate: true,
  273. flush: 'post'
  274. });
  275. // =========================== Expanded ===========================
  276. /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
  277. var setExpandedKeys = function setExpandedKeys(keys) {
  278. if (props.expandedKeys === undefined) {
  279. expandedKeys.value = keys;
  280. }
  281. };
  282. var cleanDragState = function cleanDragState() {
  283. if (dragState.draggingNodeKey !== null) {
  284. (0, _extends2.default)(dragState, {
  285. draggingNodeKey: null,
  286. dropPosition: null,
  287. dropContainerKey: null,
  288. dropTargetKey: null,
  289. dropLevelOffset: null,
  290. dropAllowed: true,
  291. dragOverNodeKey: null
  292. });
  293. }
  294. dragStartMousePosition = null;
  295. currentMouseOverDroppableNodeKey = null;
  296. };
  297. // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
  298. var onNodeDragEnd = function onNodeDragEnd(event, node) {
  299. var onDragend = props.onDragend;
  300. dragState.dragOverNodeKey = null;
  301. cleanDragState();
  302. onDragend === null || onDragend === void 0 ? void 0 : onDragend({
  303. event: event,
  304. node: node.eventData
  305. });
  306. dragNode = null;
  307. };
  308. // since stopPropagation() is called in treeNode
  309. // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
  310. var onWindowDragEnd = function onWindowDragEnd(event) {
  311. onNodeDragEnd(event, null, true);
  312. window.removeEventListener('dragend', onWindowDragEnd);
  313. };
  314. var onNodeDragStart = function onNodeDragStart(event, node) {
  315. var onDragstart = props.onDragstart;
  316. var eventKey = node.eventKey,
  317. eventData = node.eventData;
  318. dragNode = node;
  319. dragStartMousePosition = {
  320. x: event.clientX,
  321. y: event.clientY
  322. };
  323. var newExpandedKeys = (0, _util.arrDel)(expandedKeys.value, eventKey);
  324. dragState.draggingNodeKey = eventKey;
  325. dragState.dragChildrenKeys = (0, _util.getDragChildrenKeys)(eventKey, keyEntities.value);
  326. indent.value = listRef.value.getIndentWidth();
  327. setExpandedKeys(newExpandedKeys);
  328. window.addEventListener('dragend', onWindowDragEnd);
  329. if (onDragstart) {
  330. onDragstart({
  331. event: event,
  332. node: eventData
  333. });
  334. }
  335. };
  336. /**
  337. * [Legacy] Select handler is smaller than node,
  338. * so that this will trigger when drag enter node or select handler.
  339. * This is a little tricky if customize css without padding.
  340. * Better for use mouse move event to refresh drag state.
  341. * But let's just keep it to avoid event trigger logic change.
  342. */
  343. var onNodeDragEnter = function onNodeDragEnter(event, node) {
  344. var onDragenter = props.onDragenter,
  345. onExpand = props.onExpand,
  346. allowDrop = props.allowDrop,
  347. direction = props.direction;
  348. var pos = node.pos,
  349. eventKey = node.eventKey;
  350. // record the key of node which is latest entered, used in dragleave event.
  351. if (currentMouseOverDroppableNodeKey !== eventKey) {
  352. currentMouseOverDroppableNodeKey = eventKey;
  353. }
  354. if (!dragNode) {
  355. resetDragState();
  356. return;
  357. }
  358. var _calcDropPosition = (0, _util.calcDropPosition)(event, dragNode, node, indent.value, dragStartMousePosition, allowDrop, flattenNodes.value, keyEntities.value, expandedKeysSet.value, direction),
  359. dropPosition = _calcDropPosition.dropPosition,
  360. dropLevelOffset = _calcDropPosition.dropLevelOffset,
  361. dropTargetKey = _calcDropPosition.dropTargetKey,
  362. dropContainerKey = _calcDropPosition.dropContainerKey,
  363. dropTargetPos = _calcDropPosition.dropTargetPos,
  364. dropAllowed = _calcDropPosition.dropAllowed,
  365. dragOverNodeKey = _calcDropPosition.dragOverNodeKey;
  366. if (
  367. // don't allow drop inside its children
  368. dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 ||
  369. // don't allow drop when drop is not allowed caculated by calcDropPosition
  370. !dropAllowed) {
  371. resetDragState();
  372. return;
  373. }
  374. // Side effect for delay drag
  375. if (!delayedDragEnterLogic) {
  376. delayedDragEnterLogic = {};
  377. }
  378. Object.keys(delayedDragEnterLogic).forEach(function (key) {
  379. clearTimeout(delayedDragEnterLogic[key]);
  380. });
  381. if (dragNode.eventKey !== node.eventKey) {
  382. // hoist expand logic here
  383. // since if logic is on the bottom
  384. // it will be blocked by abstract dragover node check
  385. // => if you dragenter from top, you mouse will still be consider as in the top node
  386. delayedDragEnterLogic[pos] = window.setTimeout(function () {
  387. if (dragState.draggingNodeKey === null) return;
  388. var newExpandedKeys = expandedKeys.value.slice();
  389. var entity = keyEntities.value[node.eventKey];
  390. if (entity && (entity.children || []).length) {
  391. newExpandedKeys = (0, _util.arrAdd)(expandedKeys.value, node.eventKey);
  392. }
  393. setExpandedKeys(newExpandedKeys);
  394. if (onExpand) {
  395. onExpand(newExpandedKeys, {
  396. node: node.eventData,
  397. expanded: true,
  398. nativeEvent: event
  399. });
  400. }
  401. }, 800);
  402. }
  403. // Skip if drag node is self
  404. if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
  405. resetDragState();
  406. return;
  407. }
  408. // Update drag over node and drag state
  409. (0, _extends2.default)(dragState, {
  410. dragOverNodeKey: dragOverNodeKey,
  411. dropPosition: dropPosition,
  412. dropLevelOffset: dropLevelOffset,
  413. dropTargetKey: dropTargetKey,
  414. dropContainerKey: dropContainerKey,
  415. dropTargetPos: dropTargetPos,
  416. dropAllowed: dropAllowed
  417. });
  418. if (onDragenter) {
  419. onDragenter({
  420. event: event,
  421. node: node.eventData,
  422. expandedKeys: expandedKeys.value
  423. });
  424. }
  425. };
  426. var onNodeDragOver = function onNodeDragOver(event, node) {
  427. var onDragover = props.onDragover,
  428. allowDrop = props.allowDrop,
  429. direction = props.direction;
  430. if (!dragNode) {
  431. return;
  432. }
  433. var _calcDropPosition2 = (0, _util.calcDropPosition)(event, dragNode, node, indent.value, dragStartMousePosition, allowDrop, flattenNodes.value, keyEntities.value, expandedKeysSet.value, direction),
  434. dropPosition = _calcDropPosition2.dropPosition,
  435. dropLevelOffset = _calcDropPosition2.dropLevelOffset,
  436. dropTargetKey = _calcDropPosition2.dropTargetKey,
  437. dropContainerKey = _calcDropPosition2.dropContainerKey,
  438. dropAllowed = _calcDropPosition2.dropAllowed,
  439. dropTargetPos = _calcDropPosition2.dropTargetPos,
  440. dragOverNodeKey = _calcDropPosition2.dragOverNodeKey;
  441. if (dragState.dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
  442. // don't allow drop inside its children
  443. // don't allow drop when drop is not allowed caculated by calcDropPosition
  444. return;
  445. }
  446. // Update drag position
  447. if (dragNode.eventKey === dropTargetKey && dropLevelOffset === 0) {
  448. if (!(dragState.dropPosition === null && dragState.dropLevelOffset === null && dragState.dropTargetKey === null && dragState.dropContainerKey === null && dragState.dropTargetPos === null && dragState.dropAllowed === false && dragState.dragOverNodeKey === null)) {
  449. resetDragState();
  450. }
  451. } else if (!(dropPosition === dragState.dropPosition && dropLevelOffset === dragState.dropLevelOffset && dropTargetKey === dragState.dropTargetKey && dropContainerKey === dragState.dropContainerKey && dropTargetPos === dragState.dropTargetPos && dropAllowed === dragState.dropAllowed && dragOverNodeKey === dragState.dragOverNodeKey)) {
  452. (0, _extends2.default)(dragState, {
  453. dropPosition: dropPosition,
  454. dropLevelOffset: dropLevelOffset,
  455. dropTargetKey: dropTargetKey,
  456. dropContainerKey: dropContainerKey,
  457. dropTargetPos: dropTargetPos,
  458. dropAllowed: dropAllowed,
  459. dragOverNodeKey: dragOverNodeKey
  460. });
  461. }
  462. if (onDragover) {
  463. onDragover({
  464. event: event,
  465. node: node.eventData
  466. });
  467. }
  468. };
  469. var onNodeDragLeave = function onNodeDragLeave(event, node) {
  470. // if it is outside the droppable area
  471. // currentMouseOverDroppableNodeKey will be updated in dragenter event when into another droppable receiver.
  472. if (currentMouseOverDroppableNodeKey === node.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
  473. resetDragState();
  474. currentMouseOverDroppableNodeKey = null;
  475. }
  476. var onDragleave = props.onDragleave;
  477. if (onDragleave) {
  478. onDragleave({
  479. event: event,
  480. node: node.eventData
  481. });
  482. }
  483. };
  484. var onNodeDrop = function onNodeDrop(event, _node) {
  485. var _activeItem$value;
  486. var outsideTree = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  487. var dragChildrenKeys = dragState.dragChildrenKeys,
  488. dropPosition = dragState.dropPosition,
  489. dropTargetKey = dragState.dropTargetKey,
  490. dropTargetPos = dragState.dropTargetPos,
  491. dropAllowed = dragState.dropAllowed;
  492. if (!dropAllowed) return;
  493. var onDrop = props.onDrop;
  494. dragState.dragOverNodeKey = null;
  495. cleanDragState();
  496. if (dropTargetKey === null) return;
  497. var abstractDropNodeProps = (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(dropTargetKey, (0, _vue.toRaw)(treeNodeRequiredProps.value))), {}, {
  498. active: ((_activeItem$value = activeItem.value) === null || _activeItem$value === void 0 ? void 0 : _activeItem$value.key) === dropTargetKey,
  499. data: keyEntities.value[dropTargetKey].node
  500. });
  501. var dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
  502. (0, _warning.warning)(!dropToChild, "Can not drop to dragNode's children node. Maybe this is a bug of ant-design-vue. Please report an issue.");
  503. var posArr = (0, _util.posToArr)(dropTargetPos);
  504. var dropResult = {
  505. event: event,
  506. node: (0, _treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
  507. dragNode: dragNode ? dragNode.eventData : null,
  508. dragNodesKeys: [dragNode.eventKey].concat(dragChildrenKeys),
  509. dropToGap: dropPosition !== 0,
  510. dropPosition: dropPosition + Number(posArr[posArr.length - 1])
  511. };
  512. if (!outsideTree) {
  513. onDrop === null || onDrop === void 0 ? void 0 : onDrop(dropResult);
  514. }
  515. dragNode = null;
  516. };
  517. var onNodeClick = function onNodeClick(e, treeNode) {
  518. var onClick = props.onClick;
  519. if (onClick) {
  520. onClick(e, treeNode);
  521. }
  522. };
  523. var onNodeDoubleClick = function onNodeDoubleClick(e, treeNode) {
  524. var onDblclick = props.onDblclick;
  525. if (onDblclick) {
  526. onDblclick(e, treeNode);
  527. }
  528. };
  529. var onNodeSelect = function onNodeSelect(e, treeNode) {
  530. var newSelectedKeys = selectedKeys.value;
  531. var onSelect = props.onSelect,
  532. multiple = props.multiple;
  533. var selected = treeNode.selected;
  534. var key = treeNode[fieldNames.value.key];
  535. var targetSelected = !selected;
  536. // Update selected keys
  537. if (!targetSelected) {
  538. newSelectedKeys = (0, _util.arrDel)(newSelectedKeys, key);
  539. } else if (!multiple) {
  540. newSelectedKeys = [key];
  541. } else {
  542. newSelectedKeys = (0, _util.arrAdd)(newSelectedKeys, key);
  543. }
  544. // [Legacy] Not found related usage in doc or upper libs
  545. var keyEntitiesValue = keyEntities.value;
  546. var selectedNodes = newSelectedKeys.map(function (selectedKey) {
  547. var entity = keyEntitiesValue[selectedKey];
  548. if (!entity) return null;
  549. return entity.node;
  550. }).filter(function (node) {
  551. return node;
  552. });
  553. if (props.selectedKeys === undefined) {
  554. selectedKeys.value = newSelectedKeys;
  555. }
  556. if (onSelect) {
  557. onSelect(newSelectedKeys, {
  558. event: 'select',
  559. selected: targetSelected,
  560. node: treeNode,
  561. selectedNodes: selectedNodes,
  562. nativeEvent: e
  563. });
  564. }
  565. };
  566. var onNodeCheck = function onNodeCheck(e, treeNode, checked) {
  567. var checkStrictly = props.checkStrictly,
  568. onCheck = props.onCheck;
  569. var key = treeNode[fieldNames.value.key];
  570. // Prepare trigger arguments
  571. var checkedObj;
  572. var eventObj = {
  573. event: 'check',
  574. node: treeNode,
  575. checked: checked,
  576. nativeEvent: e
  577. };
  578. var keyEntitiesValue = keyEntities.value;
  579. if (checkStrictly) {
  580. var newCheckedKeys = checked ? (0, _util.arrAdd)(checkedKeys.value, key) : (0, _util.arrDel)(checkedKeys.value, key);
  581. var newHalfCheckedKeys = (0, _util.arrDel)(halfCheckedKeys.value, key);
  582. checkedObj = {
  583. checked: newCheckedKeys,
  584. halfChecked: newHalfCheckedKeys
  585. };
  586. eventObj.checkedNodes = newCheckedKeys.map(function (checkedKey) {
  587. return keyEntitiesValue[checkedKey];
  588. }).filter(function (entity) {
  589. return entity;
  590. }).map(function (entity) {
  591. return entity.node;
  592. });
  593. if (props.checkedKeys === undefined) {
  594. checkedKeys.value = newCheckedKeys;
  595. }
  596. } else {
  597. // Always fill first
  598. var _conductCheck = (0, _conductUtil.conductCheck)([].concat((0, _toConsumableArray2.default)(checkedKeys.value), [key]), true, keyEntitiesValue, maxLevel.value, levelEntities.value),
  599. _newCheckedKeys = _conductCheck.checkedKeys,
  600. _newHalfCheckedKeys = _conductCheck.halfCheckedKeys;
  601. // If remove, we do it again to correction
  602. if (!checked) {
  603. var keySet = new Set(_newCheckedKeys);
  604. keySet.delete(key);
  605. var _conductCheck2 = (0, _conductUtil.conductCheck)(Array.from(keySet), {
  606. checked: false,
  607. halfCheckedKeys: _newHalfCheckedKeys
  608. }, keyEntitiesValue, maxLevel.value, levelEntities.value);
  609. _newCheckedKeys = _conductCheck2.checkedKeys;
  610. _newHalfCheckedKeys = _conductCheck2.halfCheckedKeys;
  611. }
  612. checkedObj = _newCheckedKeys;
  613. // [Legacy] This is used for vc-tree-select`
  614. eventObj.checkedNodes = [];
  615. eventObj.checkedNodesPositions = [];
  616. eventObj.halfCheckedKeys = _newHalfCheckedKeys;
  617. _newCheckedKeys.forEach(function (checkedKey) {
  618. var entity = keyEntitiesValue[checkedKey];
  619. if (!entity) return;
  620. var node = entity.node,
  621. pos = entity.pos;
  622. eventObj.checkedNodes.push(node);
  623. eventObj.checkedNodesPositions.push({
  624. node: node,
  625. pos: pos
  626. });
  627. });
  628. if (props.checkedKeys === undefined) {
  629. checkedKeys.value = _newCheckedKeys;
  630. halfCheckedKeys.value = _newHalfCheckedKeys;
  631. }
  632. }
  633. if (onCheck) {
  634. onCheck(checkedObj, eventObj);
  635. }
  636. };
  637. var onNodeLoad = function onNodeLoad(treeNode) {
  638. var key = treeNode[fieldNames.value.key];
  639. var loadPromise = new Promise(function (resolve, reject) {
  640. // We need to get the latest state of loading/loaded keys
  641. var loadData = props.loadData,
  642. onLoad = props.onLoad;
  643. if (!loadData || loadedKeysSet.value.has(key) || loadingKeysSet.value.has(key)) {
  644. return null;
  645. }
  646. // Process load data
  647. var promise = loadData(treeNode);
  648. promise.then(function () {
  649. var newLoadedKeys = (0, _util.arrAdd)(loadedKeys.value, key);
  650. var newLoadingKeys = (0, _util.arrDel)(loadingKeys.value, key);
  651. // onLoad should trigger before internal setState to avoid `loadData` trigger twice.
  652. // https://github.com/ant-design/ant-design/issues/12464
  653. if (onLoad) {
  654. onLoad(newLoadedKeys, {
  655. event: 'load',
  656. node: treeNode
  657. });
  658. }
  659. if (props.loadedKeys === undefined) {
  660. loadedKeys.value = newLoadedKeys;
  661. }
  662. loadingKeys.value = newLoadingKeys;
  663. resolve();
  664. }).catch(function (e) {
  665. var newLoadingKeys = (0, _util.arrDel)(loadingKeys.value, key);
  666. loadingKeys.value = newLoadingKeys;
  667. // If exceed max retry times, we give up retry
  668. loadingRetryTimes[key] = (loadingRetryTimes[key] || 0) + 1;
  669. if (loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
  670. (0, _warning.warning)(false, 'Retry for `loadData` many times but still failed. No more retry.');
  671. var newLoadedKeys = (0, _util.arrAdd)(loadedKeys.value, key);
  672. if (props.loadedKeys === undefined) {
  673. loadedKeys.value = newLoadedKeys;
  674. }
  675. resolve();
  676. }
  677. reject(e);
  678. });
  679. loadingKeys.value = (0, _util.arrAdd)(loadingKeys.value, key);
  680. });
  681. // Not care warning if we ignore this
  682. loadPromise.catch(function () {});
  683. return loadPromise;
  684. };
  685. var onNodeMouseEnter = function onNodeMouseEnter(event, node) {
  686. var onMouseenter = props.onMouseenter;
  687. if (onMouseenter) {
  688. onMouseenter({
  689. event: event,
  690. node: node
  691. });
  692. }
  693. };
  694. var onNodeMouseLeave = function onNodeMouseLeave(event, node) {
  695. var onMouseleave = props.onMouseleave;
  696. if (onMouseleave) {
  697. onMouseleave({
  698. event: event,
  699. node: node
  700. });
  701. }
  702. };
  703. var onNodeContextMenu = function onNodeContextMenu(event, node) {
  704. var onRightClick = props.onRightClick;
  705. if (onRightClick) {
  706. event.preventDefault();
  707. onRightClick({
  708. event: event,
  709. node: node
  710. });
  711. }
  712. };
  713. var onFocus = function onFocus(e) {
  714. var onFocus = props.onFocus;
  715. focused.value = true;
  716. if (onFocus) {
  717. onFocus(e);
  718. }
  719. };
  720. var onBlur = function onBlur(e) {
  721. var onBlur = props.onBlur;
  722. focused.value = false;
  723. onActiveChange(null);
  724. if (onBlur) {
  725. onBlur(e);
  726. }
  727. };
  728. var onNodeExpand = function onNodeExpand(e, treeNode) {
  729. var newExpandedKeys = expandedKeys.value;
  730. var onExpand = props.onExpand,
  731. loadData = props.loadData;
  732. var expanded = treeNode.expanded;
  733. var key = treeNode[fieldNames.value.key];
  734. // Do nothing when motion is in progress
  735. if (listChanging.value) {
  736. return;
  737. }
  738. // Update selected keys
  739. var index = newExpandedKeys.indexOf(key);
  740. var targetExpanded = !expanded;
  741. (0, _warning.warning)(expanded && index !== -1 || !expanded && index === -1, 'Expand state not sync with index check');
  742. if (targetExpanded) {
  743. newExpandedKeys = (0, _util.arrAdd)(newExpandedKeys, key);
  744. } else {
  745. newExpandedKeys = (0, _util.arrDel)(newExpandedKeys, key);
  746. }
  747. setExpandedKeys(newExpandedKeys);
  748. if (onExpand) {
  749. onExpand(newExpandedKeys, {
  750. node: treeNode,
  751. expanded: targetExpanded,
  752. nativeEvent: e
  753. });
  754. }
  755. // Async Load data
  756. if (targetExpanded && loadData) {
  757. var loadPromise = onNodeLoad(treeNode);
  758. if (loadPromise) {
  759. loadPromise.then(function () {
  760. // [Legacy] Refresh logic
  761. // const newFlattenTreeData = flattenTreeData(
  762. // treeData.value,
  763. // newExpandedKeys,
  764. // fieldNames.value,
  765. // );
  766. // flattenNodes.value = newFlattenTreeData;
  767. }).catch(function (e) {
  768. var expandedKeysToRestore = (0, _util.arrDel)(expandedKeys.value, key);
  769. setExpandedKeys(expandedKeysToRestore);
  770. Promise.reject(e);
  771. });
  772. }
  773. }
  774. };
  775. var onListChangeStart = function onListChangeStart() {
  776. listChanging.value = true;
  777. };
  778. var onListChangeEnd = function onListChangeEnd() {
  779. setTimeout(function () {
  780. listChanging.value = false;
  781. });
  782. };
  783. // =========================== Keyboard ===========================
  784. var onActiveChange = function onActiveChange(newActiveKey) {
  785. var onActiveChange = props.onActiveChange;
  786. if (activeKey.value === newActiveKey) {
  787. return;
  788. }
  789. if (props.activeKey !== undefined) {
  790. activeKey.value = newActiveKey;
  791. }
  792. if (newActiveKey !== null) {
  793. scrollTo({
  794. key: newActiveKey
  795. });
  796. }
  797. if (onActiveChange) {
  798. onActiveChange(newActiveKey);
  799. }
  800. };
  801. var activeItem = (0, _vue.computed)(function () {
  802. if (activeKey.value === null) {
  803. return null;
  804. }
  805. return flattenNodes.value.find(function (_ref6) {
  806. var key = _ref6.key;
  807. return key === activeKey.value;
  808. }) || null;
  809. });
  810. var offsetActiveKey = function offsetActiveKey(offset) {
  811. var index = flattenNodes.value.findIndex(function (_ref7) {
  812. var key = _ref7.key;
  813. return key === activeKey.value;
  814. });
  815. // Align with index
  816. if (index === -1 && offset < 0) {
  817. index = flattenNodes.value.length;
  818. }
  819. index = (index + offset + flattenNodes.value.length) % flattenNodes.value.length;
  820. var item = flattenNodes.value[index];
  821. if (item) {
  822. var key = item.key;
  823. onActiveChange(key);
  824. } else {
  825. onActiveChange(null);
  826. }
  827. };
  828. var activeItemEventNode = (0, _vue.computed)(function () {
  829. return (0, _treeUtil.convertNodePropsToEventData)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, (0, _treeUtil.getTreeNodeProps)(activeKey.value, treeNodeRequiredProps.value)), {}, {
  830. data: activeItem.value.data,
  831. active: true
  832. }));
  833. });
  834. var onKeydown = function onKeydown(event) {
  835. var onKeydown = props.onKeydown,
  836. checkable = props.checkable,
  837. selectable = props.selectable;
  838. // >>>>>>>>>> Direction
  839. switch (event.which) {
  840. case _KeyCode.default.UP:
  841. {
  842. offsetActiveKey(-1);
  843. event.preventDefault();
  844. break;
  845. }
  846. case _KeyCode.default.DOWN:
  847. {
  848. offsetActiveKey(1);
  849. event.preventDefault();
  850. break;
  851. }
  852. }
  853. // >>>>>>>>>> Expand & Selection
  854. var item = activeItem.value;
  855. if (item && item.data) {
  856. var expandable = item.data.isLeaf === false || !!(item.data.children || []).length;
  857. var eventNode = activeItemEventNode.value;
  858. switch (event.which) {
  859. // >>> Expand
  860. case _KeyCode.default.LEFT:
  861. {
  862. // Collapse if possible
  863. if (expandable && expandedKeysSet.value.has(activeKey.value)) {
  864. onNodeExpand({}, eventNode);
  865. } else if (item.parent) {
  866. onActiveChange(item.parent.key);
  867. }
  868. event.preventDefault();
  869. break;
  870. }
  871. case _KeyCode.default.RIGHT:
  872. {
  873. // Expand if possible
  874. if (expandable && !expandedKeysSet.value.has(activeKey.value)) {
  875. onNodeExpand({}, eventNode);
  876. } else if (item.children && item.children.length) {
  877. onActiveChange(item.children[0].key);
  878. }
  879. event.preventDefault();
  880. break;
  881. }
  882. // Selection
  883. case _KeyCode.default.ENTER:
  884. case _KeyCode.default.SPACE:
  885. {
  886. if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
  887. onNodeCheck({}, eventNode, !checkedKeysSet.value.has(activeKey.value));
  888. } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
  889. onNodeSelect({}, eventNode);
  890. }
  891. break;
  892. }
  893. }
  894. }
  895. if (onKeydown) {
  896. onKeydown(event);
  897. }
  898. };
  899. expose({
  900. onNodeExpand: onNodeExpand,
  901. scrollTo: scrollTo,
  902. onKeydown: onKeydown,
  903. selectedKeys: (0, _vue.computed)(function () {
  904. return selectedKeys.value;
  905. }),
  906. checkedKeys: (0, _vue.computed)(function () {
  907. return checkedKeys.value;
  908. }),
  909. halfCheckedKeys: (0, _vue.computed)(function () {
  910. return halfCheckedKeys.value;
  911. }),
  912. loadedKeys: (0, _vue.computed)(function () {
  913. return loadedKeys.value;
  914. }),
  915. loadingKeys: (0, _vue.computed)(function () {
  916. return loadingKeys.value;
  917. }),
  918. expandedKeys: (0, _vue.computed)(function () {
  919. return expandedKeys.value;
  920. })
  921. });
  922. (0, _vue.onUnmounted)(function () {
  923. window.removeEventListener('dragend', onWindowDragEnd);
  924. destroyed.value = true;
  925. });
  926. (0, _contextTypes.useProvideKeysState)({
  927. expandedKeys: expandedKeys,
  928. selectedKeys: selectedKeys,
  929. loadedKeys: loadedKeys,
  930. loadingKeys: loadingKeys,
  931. checkedKeys: checkedKeys,
  932. halfCheckedKeys: halfCheckedKeys,
  933. expandedKeysSet: expandedKeysSet,
  934. selectedKeysSet: selectedKeysSet,
  935. loadedKeysSet: loadedKeysSet,
  936. loadingKeysSet: loadingKeysSet,
  937. checkedKeysSet: checkedKeysSet,
  938. halfCheckedKeysSet: halfCheckedKeysSet,
  939. flattenNodes: flattenNodes
  940. });
  941. return function () {
  942. var _classNames;
  943. var draggingNodeKey = dragState.draggingNodeKey,
  944. dropLevelOffset = dragState.dropLevelOffset,
  945. dropContainerKey = dragState.dropContainerKey,
  946. dropTargetKey = dragState.dropTargetKey,
  947. dropPosition = dragState.dropPosition,
  948. dragOverNodeKey = dragState.dragOverNodeKey;
  949. var prefixCls = props.prefixCls,
  950. showLine = props.showLine,
  951. focusable = props.focusable,
  952. _props$tabindex = props.tabindex,
  953. tabindex = _props$tabindex === void 0 ? 0 : _props$tabindex,
  954. selectable = props.selectable,
  955. showIcon = props.showIcon,
  956. _props$icon = props.icon,
  957. icon = _props$icon === void 0 ? slots.icon : _props$icon,
  958. switcherIcon = props.switcherIcon,
  959. draggable = props.draggable,
  960. checkable = props.checkable,
  961. checkStrictly = props.checkStrictly,
  962. disabled = props.disabled,
  963. motion = props.motion,
  964. loadData = props.loadData,
  965. filterTreeNode = props.filterTreeNode,
  966. height = props.height,
  967. itemHeight = props.itemHeight,
  968. virtual = props.virtual,
  969. dropIndicatorRender = props.dropIndicatorRender,
  970. onContextmenu = props.onContextmenu,
  971. onScroll = props.onScroll,
  972. direction = props.direction;
  973. var className = attrs.class,
  974. style = attrs.style;
  975. var domProps = (0, _pickAttrs.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, props), attrs), {
  976. aria: true,
  977. data: true
  978. });
  979. // It's better move to hooks but we just simply keep here
  980. var draggableConfig;
  981. if (draggable) {
  982. if ((0, _typeof2.default)(draggable) === 'object') {
  983. draggableConfig = draggable;
  984. } else if (typeof draggable === 'function') {
  985. draggableConfig = {
  986. nodeDraggable: draggable
  987. };
  988. } else {
  989. draggableConfig = {};
  990. }
  991. }
  992. return (0, _vue.createVNode)(_contextTypes.TreeContext, {
  993. "value": {
  994. prefixCls: prefixCls,
  995. selectable: selectable,
  996. showIcon: showIcon,
  997. icon: icon,
  998. switcherIcon: switcherIcon,
  999. draggable: draggableConfig,
  1000. draggingNodeKey: draggingNodeKey,
  1001. checkable: checkable,
  1002. customCheckable: slots.checkable,
  1003. checkStrictly: checkStrictly,
  1004. disabled: disabled,
  1005. keyEntities: keyEntities.value,
  1006. dropLevelOffset: dropLevelOffset,
  1007. dropContainerKey: dropContainerKey,
  1008. dropTargetKey: dropTargetKey,
  1009. dropPosition: dropPosition,
  1010. dragOverNodeKey: dragOverNodeKey,
  1011. dragging: draggingNodeKey !== null,
  1012. indent: indent.value,
  1013. direction: direction,
  1014. dropIndicatorRender: dropIndicatorRender,
  1015. loadData: loadData,
  1016. filterTreeNode: filterTreeNode,
  1017. onNodeClick: onNodeClick,
  1018. onNodeDoubleClick: onNodeDoubleClick,
  1019. onNodeExpand: onNodeExpand,
  1020. onNodeSelect: onNodeSelect,
  1021. onNodeCheck: onNodeCheck,
  1022. onNodeLoad: onNodeLoad,
  1023. onNodeMouseEnter: onNodeMouseEnter,
  1024. onNodeMouseLeave: onNodeMouseLeave,
  1025. onNodeContextMenu: onNodeContextMenu,
  1026. onNodeDragStart: onNodeDragStart,
  1027. onNodeDragEnter: onNodeDragEnter,
  1028. onNodeDragOver: onNodeDragOver,
  1029. onNodeDragLeave: onNodeDragLeave,
  1030. onNodeDragEnd: onNodeDragEnd,
  1031. onNodeDrop: onNodeDrop,
  1032. slots: slots
  1033. }
  1034. }, {
  1035. default: function _default() {
  1036. return [(0, _vue.createVNode)("div", {
  1037. "role": "tree",
  1038. "class": (0, _classNames2.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-show-line"), showLine), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-focused"), focused.value), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-active-focused"), activeKey.value !== null), _classNames))
  1039. }, [(0, _vue.createVNode)(_NodeList.default, (0, _objectSpread3.default)({
  1040. "ref": listRef,
  1041. "prefixCls": prefixCls,
  1042. "style": style,
  1043. "disabled": disabled,
  1044. "selectable": selectable,
  1045. "checkable": !!checkable,
  1046. "motion": motion,
  1047. "height": height,
  1048. "itemHeight": itemHeight,
  1049. "virtual": virtual,
  1050. "focusable": focusable,
  1051. "focused": focused.value,
  1052. "tabindex": tabindex,
  1053. "activeItem": activeItem.value,
  1054. "onFocus": onFocus,
  1055. "onBlur": onBlur,
  1056. "onKeydown": onKeydown,
  1057. "onActiveChange": onActiveChange,
  1058. "onListChangeStart": onListChangeStart,
  1059. "onListChangeEnd": onListChangeEnd,
  1060. "onContextmenu": onContextmenu,
  1061. "onScroll": onScroll
  1062. }, domProps), null)])];
  1063. }
  1064. });
  1065. };
  1066. }
  1067. });
  1068. exports.default = _default2;