58a30a8e87c9547457e7d6bee215b28e1eb0849fdf5f543003975d1f7776b15e84ae8d7cacbd9378f5ad6a38e0e410f56f2bd8fdb43cfb4df8eb7eb16ca2b2 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import { toRefs, computed, nextTick, watch } from 'vue';
  2. import { pick, isEqual, isNil } from 'lodash-unified';
  3. import { ElTree } from '../../tree/index.mjs';
  4. import component from './tree-select-option.mjs';
  5. import { treeEach, toValidArray, treeFind, isValidValue, isValidArray } from './utils.mjs';
  6. import { escapeStringRegexp } from '../../../utils/strings.mjs';
  7. import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
  8. import { isFunction } from '@vue/shared';
  9. import { isEmpty } from '../../../utils/types.mjs';
  10. const useTree = (props, { attrs, slots, emit }, {
  11. select,
  12. tree,
  13. key
  14. }) => {
  15. watch([() => props.modelValue, tree], () => {
  16. if (props.showCheckbox) {
  17. nextTick(() => {
  18. const treeInstance = tree.value;
  19. if (treeInstance && !isEqual(treeInstance.getCheckedKeys(), toValidArray(props.modelValue))) {
  20. treeInstance.setCheckedKeys(toValidArray(props.modelValue));
  21. }
  22. });
  23. }
  24. }, {
  25. immediate: true,
  26. deep: true
  27. });
  28. const propsMap = computed(() => ({
  29. value: key.value,
  30. label: "label",
  31. children: "children",
  32. disabled: "disabled",
  33. isLeaf: "isLeaf",
  34. ...props.props
  35. }));
  36. const getNodeValByProp = (prop, data) => {
  37. var _a;
  38. const propVal = propsMap.value[prop];
  39. if (isFunction(propVal)) {
  40. return propVal(data, (_a = tree.value) == null ? void 0 : _a.getNode(getNodeValByProp("value", data)));
  41. } else {
  42. return data[propVal];
  43. }
  44. };
  45. const defaultExpandedParentKeys = toValidArray(props.modelValue).map((value) => {
  46. return treeFind(props.data || [], (data) => getNodeValByProp("value", data) === value, (data) => getNodeValByProp("children", data), (data, index, array, parent) => parent && getNodeValByProp("value", parent));
  47. }).filter((item) => isValidValue(item));
  48. const cacheOptions = computed(() => {
  49. if (!props.renderAfterExpand && !props.lazy)
  50. return [];
  51. const options = [];
  52. treeEach(props.data.concat(props.cacheData), (node) => {
  53. const value = getNodeValByProp("value", node);
  54. options.push({
  55. value,
  56. currentLabel: getNodeValByProp("label", node),
  57. isDisabled: getNodeValByProp("disabled", node)
  58. });
  59. }, (data) => getNodeValByProp("children", data));
  60. return options;
  61. });
  62. const getChildCheckedKeys = () => {
  63. var _a;
  64. return (_a = tree.value) == null ? void 0 : _a.getCheckedKeys().filter((checkedKey) => {
  65. var _a2;
  66. const node = (_a2 = tree.value) == null ? void 0 : _a2.getNode(checkedKey);
  67. return !isNil(node) && isEmpty(node.childNodes);
  68. });
  69. };
  70. return {
  71. ...pick(toRefs(props), Object.keys(ElTree.props)),
  72. ...attrs,
  73. nodeKey: key,
  74. expandOnClickNode: computed(() => {
  75. return !props.checkStrictly && props.expandOnClickNode;
  76. }),
  77. defaultExpandedKeys: computed(() => {
  78. return props.defaultExpandedKeys ? props.defaultExpandedKeys.concat(defaultExpandedParentKeys) : defaultExpandedParentKeys;
  79. }),
  80. renderContent: (h, { node, data, store }) => {
  81. return h(component, {
  82. value: getNodeValByProp("value", data),
  83. label: getNodeValByProp("label", data),
  84. disabled: getNodeValByProp("disabled", data),
  85. visible: node.visible
  86. }, props.renderContent ? () => props.renderContent(h, { node, data, store }) : slots.default ? () => slots.default({ node, data, store }) : void 0);
  87. },
  88. filterNodeMethod: (value, data, node) => {
  89. if (props.filterNodeMethod)
  90. return props.filterNodeMethod(value, data, node);
  91. if (!value)
  92. return true;
  93. const regexp = new RegExp(escapeStringRegexp(value), "i");
  94. return regexp.test(getNodeValByProp("label", data) || "");
  95. },
  96. onNodeClick: (data, node, e) => {
  97. var _a, _b, _c, _d;
  98. (_a = attrs.onNodeClick) == null ? void 0 : _a.call(attrs, data, node, e);
  99. if (props.showCheckbox && props.checkOnClickNode)
  100. return;
  101. if (!props.showCheckbox && (props.checkStrictly || node.isLeaf)) {
  102. if (!getNodeValByProp("disabled", data)) {
  103. const option = (_b = select.value) == null ? void 0 : _b.states.options.get(getNodeValByProp("value", data));
  104. (_c = select.value) == null ? void 0 : _c.handleOptionSelect(option);
  105. }
  106. } else if (props.expandOnClickNode) {
  107. e.proxy.handleExpandIconClick();
  108. }
  109. (_d = select.value) == null ? void 0 : _d.focus();
  110. },
  111. onCheck: (data, params) => {
  112. var _a;
  113. if (!props.showCheckbox)
  114. return;
  115. const dataValue = getNodeValByProp("value", data);
  116. const dataMap = {};
  117. treeEach([tree.value.store.root], (node) => dataMap[node.key] = node, (node) => node.childNodes);
  118. const uncachedCheckedKeys = params.checkedKeys;
  119. const cachedKeys = props.multiple ? toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item)) : [];
  120. const checkedKeys = cachedKeys.concat(uncachedCheckedKeys);
  121. if (props.checkStrictly) {
  122. emit(UPDATE_MODEL_EVENT, props.multiple ? checkedKeys : checkedKeys.includes(dataValue) ? dataValue : void 0);
  123. } else {
  124. if (props.multiple) {
  125. const childKeys = getChildCheckedKeys();
  126. emit(UPDATE_MODEL_EVENT, cachedKeys.concat(childKeys));
  127. } else {
  128. const firstLeaf = treeFind([data], (data2) => !isValidArray(getNodeValByProp("children", data2)) && !getNodeValByProp("disabled", data2), (data2) => getNodeValByProp("children", data2));
  129. const firstLeafKey = firstLeaf ? getNodeValByProp("value", firstLeaf) : void 0;
  130. const hasCheckedChild = isValidValue(props.modelValue) && !!treeFind([data], (data2) => getNodeValByProp("value", data2) === props.modelValue, (data2) => getNodeValByProp("children", data2));
  131. emit(UPDATE_MODEL_EVENT, firstLeafKey === props.modelValue || hasCheckedChild ? void 0 : firstLeafKey);
  132. }
  133. }
  134. nextTick(() => {
  135. var _a2;
  136. const checkedKeys2 = toValidArray(props.modelValue);
  137. tree.value.setCheckedKeys(checkedKeys2);
  138. (_a2 = attrs.onCheck) == null ? void 0 : _a2.call(attrs, data, {
  139. checkedKeys: tree.value.getCheckedKeys(),
  140. checkedNodes: tree.value.getCheckedNodes(),
  141. halfCheckedKeys: tree.value.getHalfCheckedKeys(),
  142. halfCheckedNodes: tree.value.getHalfCheckedNodes()
  143. });
  144. });
  145. (_a = select.value) == null ? void 0 : _a.focus();
  146. },
  147. onNodeExpand: (data, node, e) => {
  148. var _a;
  149. (_a = attrs.onNodeExpand) == null ? void 0 : _a.call(attrs, data, node, e);
  150. nextTick(() => {
  151. if (!props.checkStrictly && props.lazy && props.multiple && node.checked) {
  152. const dataMap = {};
  153. const uncachedCheckedKeys = tree.value.getCheckedKeys();
  154. treeEach([tree.value.store.root], (node2) => dataMap[node2.key] = node2, (node2) => node2.childNodes);
  155. const cachedKeys = toValidArray(props.modelValue).filter((item) => !(item in dataMap) && !uncachedCheckedKeys.includes(item));
  156. const childKeys = getChildCheckedKeys();
  157. emit(UPDATE_MODEL_EVENT, cachedKeys.concat(childKeys));
  158. }
  159. });
  160. },
  161. cacheOptions
  162. };
  163. };
  164. export { useTree };
  165. //# sourceMappingURL=tree.mjs.map