tav-ui
Version:
438 lines (433 loc) • 14.3 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var antDesignVue = require('ant-design-vue');
var lodashEs = require('lodash-es');
var useContextMenu = require('../../../hooks/web/useContextMenu2.js');
var treeHelper = require('../../../utils/helper/treeHelper2.js');
var tsxHelper = require('../../../utils/helper/tsxHelper2.js');
var is = require('../../../utils/is2.js');
var index = require('../../container-scroll/index2.js');
var props = require('./props2.js');
var TreeHeader = require('./TreeHeader2.js');
var TreeIcon = require('./TreeIcon2.js');
var useTree = require('./useTree2.js');
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
var Tree = vue.defineComponent({
name: "TaTree",
inheritAttrs: false,
props: props.treeProps,
emits: ["update:expandedKeys", "update:selectedKeys", "update:checkedKeys", "change", "check", "update:searchValue"],
setup(props, {
attrs,
slots,
emit,
expose
}) {
const state = vue.reactive({
checkStrictly: props.checkStrictly,
expandedKeys: props.expandedKeys || [],
selectedKeys: props.selectedKeys || [],
checkedKeys: props.checkedKeys || []
});
const searchState = vue.reactive({
startSearch: false,
searchText: "",
searchData: [],
prevCheckedKeys: []
});
const treeDataRef = vue.ref([]);
const [createContextMenu] = useContextMenu.useContextMenu();
const prefixCls = "ta-basic-tree";
const getFieldNames = vue.computed(() => {
const {
fieldNames
} = props;
return {
children: "children",
title: "title",
key: fieldNames?.id ? fieldNames?.id : fieldNames?.key ? fieldNames?.key : "key",
id: fieldNames?.id ?? "id",
pid: fieldNames?.pid ?? "pid",
...lodashEs.omit(fieldNames, ["key", "id", "pid"])
};
});
const getBindValues = vue.computed(() => {
const propsData = {
blockNode: true,
...attrs,
...props,
expandedKeys: state.expandedKeys,
selectedKeys: state.selectedKeys,
checkedKeys: state.checkedKeys,
checkStrictly: state.checkStrictly,
fieldNames: vue.unref(getFieldNames),
"onUpdate:expandedKeys": (v) => {
state.expandedKeys = v;
emit("update:expandedKeys", v);
},
"onUpdate:selectedKeys": (v) => {
state.selectedKeys = v;
emit("update:selectedKeys", v);
},
onCheck: (v, e) => {
let currentValue = vue.toRaw(state.checkedKeys);
if (is.isArray(currentValue) && searchState.startSearch) {
currentValue = [...currentValue, ...searchState.prevCheckedKeys];
const {
key: keyField
} = vue.unref(getFieldNames);
const target = e.node.$attrs ? e.node.$attrs : e.node;
currentValue = lodashEs.difference(currentValue, getChildrenKeys(target[keyField]));
if (e.checked && Array.isArray(currentValue)) {
currentValue.push(target[keyField]);
}
state.checkedKeys = [.../* @__PURE__ */ new Set([...currentValue])];
} else {
state.checkedKeys = v;
}
const rawVal = vue.toRaw(state.checkedKeys);
emit("update:checkedKeys", rawVal);
emit("check", rawVal, e);
},
onRightClick: handleRightClick
};
return lodashEs.omit(propsData, "treeData", "class");
});
const getTreeData = vue.computed(() => searchState.startSearch ? searchState.searchData : vue.unref(treeDataRef));
const getNotFound = vue.computed(() => {
return !getTreeData.value || getTreeData.value.length === 0;
});
const {
deleteNodeByKey,
insertNodeByKey,
insertNodesByKey,
filterByLevel,
updateNodeByKey,
getAllKeys,
getChildrenKeys,
getEnabledKeys
} = useTree.useTree(treeDataRef, getFieldNames);
function getIcon(params, icon) {
if (!icon) {
if (props.renderIcon && is.isFunction(props.renderIcon)) {
return props.renderIcon(params);
}
}
return icon;
}
async function handleRightClick({
event,
node
}) {
const {
rightMenuList,
beforeRightClick
} = props;
const contextMenuOptions = {
event,
items: []
};
if (beforeRightClick && is.isFunction(beforeRightClick)) {
const result = await beforeRightClick(node, event);
if (Array.isArray(result)) {
contextMenuOptions.items = result;
} else {
Object.assign(contextMenuOptions, result);
}
} else {
contextMenuOptions["items"] = rightMenuList;
}
if (!contextMenuOptions.items?.length)
return;
createContextMenu(contextMenuOptions);
}
function setExpandedKeys(keys) {
state.expandedKeys = keys;
}
function getExpandedKeys() {
return state.expandedKeys;
}
function setSelectedKeys(keys) {
state.selectedKeys = keys;
}
function getSelectedKeys() {
return state.selectedKeys;
}
function setCheckedKeys(keys) {
state.checkedKeys = keys;
}
function getCheckedKeys() {
return state.checkedKeys;
}
function checkAll(checkAll2) {
state.checkedKeys = checkAll2 ? getEnabledKeys() : [];
}
function expandAll(expandAll2) {
state.expandedKeys = expandAll2 ? getAllKeys() : [];
}
function onStrictlyChange(strictly) {
state.checkStrictly = strictly;
}
vue.watch(() => props.searchValue, (val) => {
if (val !== searchState.searchText) {
searchState.searchText = val;
}
}, {
immediate: true
});
vue.watch(() => props.treeData, (val) => {
if (val) {
handleSearch(searchState.searchText);
}
});
const searchedKeys = vue.shallowRef([]);
async function handleSearch(searchValue) {
if (searchValue !== searchState.searchText)
searchState.searchText = searchValue;
emit("update:searchValue", searchValue);
if (searchValue) {
searchState.prevCheckedKeys = [...state.checkedKeys];
const {
filterFn
} = vue.unref(props);
searchState.startSearch = true;
await vue.nextTick();
const {
title: titleField,
key: keyField,
pid: pidField
} = vue.unref(getFieldNames);
const matchedKeys = [];
searchState.searchData = treeHelper.filter(vue.unref(treeDataRef), (node) => {
let result = false;
if (filterFn) {
result = filterFn(searchValue, node, vue.unref(getFieldNames));
} else {
result = node[titleField]?.includes(searchValue);
}
if (result) {
matchedKeys.push(node[keyField]);
}
return result;
}, {
id: keyField,
pid: pidField
});
searchedKeys.value = treeHelper.treeToList(searchState.searchData).map((val) => {
return val[keyField];
});
if (searchedKeys.value.length) {
setExpandedKeys([.../* @__PURE__ */ new Set([...state.expandedKeys, ...searchedKeys.value])]);
}
} else {
searchState.startSearch = false;
await vue.nextTick();
if (searchedKeys.value.length) {
setExpandedKeys([.../* @__PURE__ */ new Set([...state.expandedKeys, ...searchedKeys.value])]);
}
searchedKeys.value = [];
searchState.prevCheckedKeys = [];
return;
}
}
function handleClickNode(key, children) {
if (!props.clickRowToExpand || !children || children.length === 0)
return;
if (!state.expandedKeys.includes(key)) {
setExpandedKeys([...state.expandedKeys, key]);
} else {
const keys = [...state.expandedKeys];
const index = keys.findIndex((item) => item === key);
if (index !== -1) {
keys.splice(index, 1);
}
setExpandedKeys(keys);
}
}
vue.watchEffect(() => {
treeDataRef.value = props.treeData;
});
vue.onMounted(() => {
const level = parseInt(props.defaultExpandLevel.toString());
if (level > 0) {
state.expandedKeys = filterByLevel(level);
} else if (props.defaultExpandAll) {
expandAll(true);
}
});
vue.watchEffect(() => {
state.expandedKeys = props.expandedKeys;
});
vue.watchEffect(() => {
state.selectedKeys = props.selectedKeys;
});
vue.watchEffect(() => {
state.checkedKeys = props.checkedKeys;
});
vue.watchEffect(() => {
state.checkStrictly = props.checkStrictly;
});
const instance = {
setExpandedKeys,
getExpandedKeys,
setSelectedKeys,
getSelectedKeys,
setCheckedKeys,
getCheckedKeys,
insertNodeByKey,
insertNodesByKey,
deleteNodeByKey,
updateNodeByKey,
checkAll,
expandAll,
filterByLevel: (level) => {
state.expandedKeys = filterByLevel(level);
},
setSearchValue: (value) => {
handleSearch(value);
},
getSearchValue: () => {
return searchState.searchText;
}
};
expose(instance);
function renderAction(node) {
const {
actionList
} = props;
if (!actionList || actionList.length === 0)
return;
return actionList.map((item, index) => {
let nodeShow = true;
if (is.isFunction(item.show)) {
nodeShow = item.show?.(node);
} else if (is.isBoolean(item.show)) {
nodeShow = item.show;
}
if (!nodeShow)
return null;
return vue.createVNode("span", {
"key": index,
"class": `${prefixCls}__action`
}, [item.render(node)]);
});
}
function renderTreeNode({
data,
level
}) {
return data && data.length > 0 ? data.map((item) => {
const {
key: keyField,
children: childrenField
} = vue.unref(getFieldNames);
const propsData = lodashEs.omit(item, "title");
const children = lodashEs.get(item, childrenField) || [];
return vue.createVNode(antDesignVue.Tree.TreeNode, vue.mergeProps(propsData, {
"node": vue.toRaw(item),
"key": lodashEs.get(item, keyField),
"class": `${!item[childrenField] || item[childrenField].length === 0 ? "level---1" : `level--${level}`}`
}), {
default: () => renderTreeNode({
data: children,
level: level + 1
})
});
}) : [];
}
function renderTreeNodeTitle({
data
}) {
if (!data) {
return null;
}
const searchText = searchState.searchText;
const {
highlight
} = vue.unref(props);
const {
title: titleField,
key: keyField,
children: childrenField
} = vue.unref(getFieldNames);
const icon = getIcon({
...data
}, data.icon);
const title = lodashEs.get(data, titleField);
const searchIdx = searchText ? title.indexOf(searchText) : -1;
const isHighlight = searchState.startSearch && !is.isEmpty(searchText) && highlight && searchIdx !== -1;
const titleDom = vue.createVNode("span", {
"class": `${prefixCls}-title__content ${prefixCls}-title__content--highlight`
}, [isHighlight ? vue.createVNode(vue.Fragment, null, [vue.createVNode("span", null, [title.substr(0, searchIdx)]), vue.createVNode("span", {
"class": "highlight-keyword"
}, [searchText]), vue.createVNode("span", null, [title.substr(searchIdx + searchText.length)])]) : title]);
return vue.createVNode("span", {
"class": `${prefixCls}-title pl-2`,
"onClick": handleClickNode.bind(null, data[keyField], data[childrenField])
}, [icon && TreeIcon.TreeIcon({
icon
}), titleDom, vue.createVNode("span", {
"class": `${prefixCls}-title__actions`
}, [renderAction({
...data
})])]);
}
return () => {
let _slot;
const {
title,
helpMessage,
toolbar,
search,
checkable
} = props;
const showTitle = title || toolbar || search || slots.headerTitle;
const scrollStyle = {
height: "calc(100% - 38px)"
};
return vue.createVNode("div", {
"class": [prefixCls, "h-full", attrs.class, vue.unref(getBindValues)?.inlineLayoutLevel !== void 0 ? `inline-layout-level` : ""]
}, [showTitle && vue.createVNode(TreeHeader["default"], {
"checkable": checkable,
"checkAll": checkAll,
"expandAll": expandAll,
"title": title,
"search": search,
"toolbar": toolbar,
"helpMessage": helpMessage,
"onStrictlyChange": onStrictlyChange,
"onSearch": handleSearch,
"searchText": searchState.searchText
}, _isSlot(_slot = tsxHelper.extendSlots(slots)) ? _slot : {
default: () => [_slot]
}), vue.withDirectives(vue.createVNode(index.TaContainerScroll, {
"style": scrollStyle
}, {
default: () => [vue.createVNode(antDesignVue.Tree, vue.mergeProps(vue.unref(getBindValues), {
"showIcon": false
}), {
default: () => renderTreeNode({
data: vue.unref(getTreeData),
level: 1
}),
title: ({
data
}) => {
return slots?.title && typeof slots?.title === "string" ? tsxHelper.getSlot(slots, slots?.title, data) : renderTreeNodeTitle({
data
});
},
...tsxHelper.extendSlots(slots, ["title"])
})]
}), [[vue.vShow, !vue.unref(getNotFound)]]), vue.withDirectives(vue.createVNode(antDesignVue.Empty, {
"image": antDesignVue.Empty.PRESENTED_IMAGE_SIMPLE,
"class": "!mt-4"
}, null), [[vue.vShow, vue.unref(getNotFound)]])]);
};
}
});
exports["default"] = Tree;
//# sourceMappingURL=tree2.js.map