| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- import { defineComponent, inject, ref, computed, watch, provide, getCurrentInstance, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createBlock, renderSlot, createElementVNode, toDisplayString, createCommentVNode, withDirectives, vShow } from 'vue';
- import { selectKey } from '../../select/src/token.mjs';
- import TreeStore from './model/tree-store.mjs';
- import { getNodeKey, handleCurrentChange } from './model/util.mjs';
- import ElTreeNode from './tree-node.mjs';
- import { useNodeExpandEventBroadcast } from './model/useNodeExpandEventBroadcast.mjs';
- import { useDragNodeHandler } from './model/useDragNode.mjs';
- import { useKeydown } from './model/useKeydown.mjs';
- import { ROOT_TREE_INJECTION_KEY } from './tokens.mjs';
- import { isEqual } from 'lodash-unified';
- import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
- import { definePropType } from '../../../utils/vue/props/runtime.mjs';
- import { iconPropType } from '../../../utils/vue/icon.mjs';
- import { useLocale } from '../../../hooks/use-locale/index.mjs';
- import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
- import { formItemContextKey } from '../../form/src/constants.mjs';
- const _sfc_main = defineComponent({
- name: "ElTree",
- components: { ElTreeNode },
- props: {
- data: {
- type: definePropType(Array),
- default: () => []
- },
- emptyText: {
- type: String
- },
- renderAfterExpand: {
- type: Boolean,
- default: true
- },
- nodeKey: String,
- checkStrictly: Boolean,
- defaultExpandAll: Boolean,
- expandOnClickNode: {
- type: Boolean,
- default: true
- },
- checkOnClickNode: Boolean,
- checkOnClickLeaf: {
- type: Boolean,
- default: true
- },
- checkDescendants: Boolean,
- autoExpandParent: {
- type: Boolean,
- default: true
- },
- defaultCheckedKeys: Array,
- defaultExpandedKeys: Array,
- currentNodeKey: [String, Number],
- renderContent: {
- type: definePropType(Function)
- },
- showCheckbox: Boolean,
- draggable: Boolean,
- allowDrag: {
- type: definePropType(Function)
- },
- allowDrop: {
- type: definePropType(Function)
- },
- props: {
- type: Object,
- default: () => ({
- children: "children",
- label: "label",
- disabled: "disabled"
- })
- },
- lazy: Boolean,
- highlightCurrent: Boolean,
- load: Function,
- filterNodeMethod: Function,
- accordion: Boolean,
- indent: {
- type: Number,
- default: 18
- },
- icon: {
- type: iconPropType
- }
- },
- emits: [
- "check-change",
- "current-change",
- "node-click",
- "node-contextmenu",
- "node-collapse",
- "node-expand",
- "check",
- "node-drag-start",
- "node-drag-end",
- "node-drop",
- "node-drag-leave",
- "node-drag-enter",
- "node-drag-over"
- ],
- setup(props, ctx) {
- const { t } = useLocale();
- const ns = useNamespace("tree");
- const selectInfo = inject(selectKey, null);
- const store = ref(new TreeStore({
- key: props.nodeKey,
- data: props.data,
- lazy: props.lazy,
- props: props.props,
- load: props.load,
- currentNodeKey: props.currentNodeKey,
- checkStrictly: props.checkStrictly,
- checkDescendants: props.checkDescendants,
- defaultCheckedKeys: props.defaultCheckedKeys,
- defaultExpandedKeys: props.defaultExpandedKeys,
- autoExpandParent: props.autoExpandParent,
- defaultExpandAll: props.defaultExpandAll,
- filterNodeMethod: props.filterNodeMethod
- }));
- store.value.initialize();
- const root = ref(store.value.root);
- const currentNode = ref(null);
- const el$ = ref(null);
- const dropIndicator$ = ref(null);
- const { broadcastExpanded } = useNodeExpandEventBroadcast(props);
- const { dragState } = useDragNodeHandler({
- props,
- ctx,
- el$,
- dropIndicator$,
- store
- });
- useKeydown({ el$ }, store);
- const isEmpty = computed(() => {
- const { childNodes } = root.value;
- const hasFilteredOptions = selectInfo ? selectInfo.hasFilteredOptions !== 0 : false;
- return (!childNodes || childNodes.length === 0 || childNodes.every(({ visible }) => !visible)) && !hasFilteredOptions;
- });
- watch(() => props.currentNodeKey, (newVal) => {
- store.value.setCurrentNodeKey(newVal != null ? newVal : null);
- });
- watch(() => props.defaultCheckedKeys, (newVal, oldVal) => {
- if (isEqual(newVal, oldVal))
- return;
- store.value.setDefaultCheckedKey(newVal != null ? newVal : []);
- });
- watch(() => props.defaultExpandedKeys, (newVal) => {
- store.value.setDefaultExpandedKeys(newVal != null ? newVal : []);
- });
- watch(() => props.data, (newVal) => {
- store.value.setData(newVal);
- }, { deep: true });
- watch(() => props.checkStrictly, (newVal) => {
- store.value.checkStrictly = newVal;
- });
- const filter = (value) => {
- if (!props.filterNodeMethod)
- throw new Error("[Tree] filterNodeMethod is required when filter");
- store.value.filter(value);
- };
- const getNodeKey$1 = (node) => {
- return getNodeKey(props.nodeKey, node.data);
- };
- const getNodePath = (data) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in getNodePath");
- const node = store.value.getNode(data);
- if (!node)
- return [];
- const path = [node.data];
- let parent = node.parent;
- while (parent && parent !== root.value) {
- path.push(parent.data);
- parent = parent.parent;
- }
- return path.reverse();
- };
- const getCheckedNodes = (leafOnly, includeHalfChecked) => {
- return store.value.getCheckedNodes(leafOnly, includeHalfChecked);
- };
- const getCheckedKeys = (leafOnly) => {
- return store.value.getCheckedKeys(leafOnly);
- };
- const getCurrentNode = () => {
- const currentNode2 = store.value.getCurrentNode();
- return currentNode2 ? currentNode2.data : null;
- };
- const getCurrentKey = () => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in getCurrentKey");
- const currentNode2 = getCurrentNode();
- return currentNode2 ? currentNode2[props.nodeKey] : null;
- };
- const setCheckedNodes = (nodes, leafOnly) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in setCheckedNodes");
- store.value.setCheckedNodes(nodes, leafOnly);
- };
- const setCheckedKeys = (keys, leafOnly) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in setCheckedKeys");
- store.value.setCheckedKeys(keys, leafOnly);
- };
- const setChecked = (data, checked, deep) => {
- store.value.setChecked(data, checked, deep);
- };
- const getHalfCheckedNodes = () => {
- return store.value.getHalfCheckedNodes();
- };
- const getHalfCheckedKeys = () => {
- return store.value.getHalfCheckedKeys();
- };
- const setCurrentNode = (node, shouldAutoExpandParent = true) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in setCurrentNode");
- handleCurrentChange(store, ctx.emit, () => {
- broadcastExpanded(node);
- store.value.setUserCurrentNode(node, shouldAutoExpandParent);
- });
- };
- const setCurrentKey = (key, shouldAutoExpandParent = true) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in setCurrentKey");
- handleCurrentChange(store, ctx.emit, () => {
- broadcastExpanded();
- store.value.setCurrentNodeKey(key != null ? key : null, shouldAutoExpandParent);
- });
- };
- const getNode = (data) => {
- return store.value.getNode(data);
- };
- const remove = (data) => {
- store.value.remove(data);
- };
- const append = (data, parentNode) => {
- store.value.append(data, parentNode);
- };
- const insertBefore = (data, refNode) => {
- store.value.insertBefore(data, refNode);
- };
- const insertAfter = (data, refNode) => {
- store.value.insertAfter(data, refNode);
- };
- const handleNodeExpand = (nodeData, node, instance) => {
- broadcastExpanded(node);
- ctx.emit("node-expand", nodeData, node, instance);
- };
- const updateKeyChildren = (key, data) => {
- if (!props.nodeKey)
- throw new Error("[Tree] nodeKey is required in updateKeyChild");
- store.value.updateChildren(key, data);
- };
- provide(ROOT_TREE_INJECTION_KEY, {
- ctx,
- props,
- store,
- root,
- currentNode,
- instance: getCurrentInstance()
- });
- provide(formItemContextKey, void 0);
- return {
- ns,
- store,
- root,
- currentNode,
- dragState,
- el$,
- dropIndicator$,
- isEmpty,
- filter,
- getNodeKey: getNodeKey$1,
- getNodePath,
- getCheckedNodes,
- getCheckedKeys,
- getCurrentNode,
- getCurrentKey,
- setCheckedNodes,
- setCheckedKeys,
- setChecked,
- getHalfCheckedNodes,
- getHalfCheckedKeys,
- setCurrentNode,
- setCurrentKey,
- t,
- getNode,
- remove,
- append,
- insertBefore,
- insertAfter,
- handleNodeExpand,
- updateKeyChildren
- };
- }
- });
- function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
- const _component_el_tree_node = resolveComponent("el-tree-node");
- return openBlock(), createElementBlock("div", {
- ref: "el$",
- class: normalizeClass([
- _ctx.ns.b(),
- _ctx.ns.is("dragging", !!_ctx.dragState.draggingNode),
- _ctx.ns.is("drop-not-allow", !_ctx.dragState.allowDrop),
- _ctx.ns.is("drop-inner", _ctx.dragState.dropType === "inner"),
- { [_ctx.ns.m("highlight-current")]: _ctx.highlightCurrent }
- ]),
- role: "tree"
- }, [
- (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.root.childNodes, (child) => {
- return openBlock(), createBlock(_component_el_tree_node, {
- key: _ctx.getNodeKey(child),
- node: child,
- props: _ctx.props,
- accordion: _ctx.accordion,
- "render-after-expand": _ctx.renderAfterExpand,
- "show-checkbox": _ctx.showCheckbox,
- "render-content": _ctx.renderContent,
- onNodeExpand: _ctx.handleNodeExpand
- }, null, 8, ["node", "props", "accordion", "render-after-expand", "show-checkbox", "render-content", "onNodeExpand"]);
- }), 128)),
- _ctx.isEmpty ? (openBlock(), createElementBlock("div", {
- key: 0,
- class: normalizeClass(_ctx.ns.e("empty-block"))
- }, [
- renderSlot(_ctx.$slots, "empty", {}, () => {
- var _a;
- return [
- createElementVNode("span", {
- class: normalizeClass(_ctx.ns.e("empty-text"))
- }, toDisplayString((_a = _ctx.emptyText) != null ? _a : _ctx.t("el.tree.emptyText")), 3)
- ];
- })
- ], 2)) : createCommentVNode("v-if", true),
- withDirectives(createElementVNode("div", {
- ref: "dropIndicator$",
- class: normalizeClass(_ctx.ns.e("drop-indicator"))
- }, null, 2), [
- [vShow, _ctx.dragState.showDropIndicator]
- ])
- ], 2);
- }
- var Tree = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "tree.vue"]]);
- export { Tree as default };
- //# sourceMappingURL=tree.mjs.map
|