@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
353 lines (352 loc) • 12.2 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, normalizeClass, createElementVNode, createVNode, unref, createBlock, createCommentVNode, toDisplayString, withCtx, ref, computed, watch } from "vue";
import "../icon/index.js";
import _sfc_main$2 from "../checkbox/index.js";
import { _ as _sfc_main$3 } from "../index2.js";
import { _ as _sfc_main$2E } from "../icons-vue.es.js";
import "../plugin-vue_export-helper.js";
const _hoisted_1 = { class: "layui-tree-entry" };
const _hoisted_2 = { class: "layui-tree-main" };
const _hoisted_3 = ["onClick"];
const _hoisted_4 = {
key: 0,
class: "layui-tree-pack layui-tree-showLine",
style: { "display": "block" }
};
const __default__$1 = {
name: "TreeNode"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
props: {
tree: null,
nodeList: null,
showCheckbox: { type: Boolean },
showLine: { type: Boolean },
collapseTransition: { type: Boolean },
onlyIconControl: { type: Boolean }
},
emits: ["node-click"],
setup(__props, { emit }) {
const props = __props;
function renderLineShort(node) {
return !node.hasNextSibling && node.parentNode && (!node.parentNode.hasNextSibling || node.parentNode.hasNextSibling && !node.parentNode.children);
}
const nodeIconType = (node) => {
if (!props.showLine) {
if (node.children.length > 0) {
return "layui-tree-iconArrow ";
}
return "";
}
if (node.children.length !== 0) {
return !node.isLeaf.value ? "layui-icon-addition" : "layui-icon-subtraction";
}
return "layui-icon-file";
};
function recursiveNodeClick(node) {
emit("node-click", node);
}
function handleChange(checked, node) {
props.tree.setCheckedKeys(checked, node);
}
function handleIconClick(node) {
node.isLeaf.value = !node.isLeaf.value;
}
function handleTitleClick(node) {
if (!props.onlyIconControl) {
handleIconClick(node);
}
emit("node-click", node);
}
return (_ctx, _cache) => {
const _component_TreeNode = resolveComponent("TreeNode", true);
return openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodeList, (node, nodeIndex) => {
return openBlock(), createElementBlock("div", {
key: nodeIndex,
class: normalizeClass({
"layui-tree-set": true,
"layui-tree-setLineShort": renderLineShort(node),
"layui-tree-setHide": node.isRoot
})
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("span", {
class: normalizeClass([
__props.showLine && node.children.length > 0 ? "layui-tree-icon" : "",
{ "layui-tree-iconClick": true }
])
}, [
createVNode(unref(_sfc_main$2E), {
type: nodeIconType(node),
onClick: ($event) => handleIconClick(node)
}, null, 8, ["type", "onClick"])
], 2),
__props.showCheckbox ? (openBlock(), createBlock(unref(_sfc_main$2), {
key: 0,
modelValue: node.isChecked.value,
disabled: node.isDisabled.value,
skin: "primary",
label: "",
onChange: (checked) => {
handleChange(checked, node);
}
}, null, 8, ["modelValue", "disabled", "onChange"])) : createCommentVNode("", true),
createElementVNode("span", {
class: normalizeClass({
"layui-tree-txt": true,
"layui-disabled": node.isDisabled.value
}),
onClick: ($event) => handleTitleClick(node)
}, toDisplayString(node.title), 11, _hoisted_3)
])
]),
createVNode(_sfc_main$3, { enable: __props.collapseTransition }, {
default: withCtx(() => [
node.isLeaf.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
createVNode(_component_TreeNode, {
"node-list": node.children,
"show-checkbox": __props.showCheckbox,
"show-line": __props.showLine,
"collapse-transition": __props.collapseTransition,
tree: __props.tree,
"only-icon-control": __props.onlyIconControl,
onNodeClick: recursiveNodeClick
}, null, 8, ["node-list", "show-checkbox", "show-line", "collapse-transition", "tree", "only-icon-control"])
])) : createCommentVNode("", true)
]),
_: 2
}, 1032, ["enable"])
], 2);
}), 128);
};
}
}));
class Tree {
constructor(config, origin) {
this.config = config;
this.treeData = [];
this.init(origin);
}
init(origin) {
const tree = this.createTree(origin);
this.treeData = tree;
}
createTree(origin, parentKey = "") {
let data;
if (!Array.isArray(origin)) {
data = Array.of(Object.assign({}, origin));
} else {
data = origin;
}
const nodeList = [];
const { children } = this.config.replaceFields;
const len = data.length;
for (let i = 0; i < len; i++) {
const node = this.getNode(data[i], parentKey, i < len - 1);
const nodeChildren = Reflect.get(node, children);
const nodeHasChildren = !!Reflect.get(node, children);
if (nodeHasChildren) {
Reflect.set(node, children, this.createTree(nodeChildren, node.id));
}
nodeList.push(node);
}
return nodeList;
}
getNode(origin, parentKey, hasNextSibling) {
const {
nodeMap,
originMap,
checkedKeys,
expandKeys,
replaceFields: { children, id, title }
} = this.config;
const nodeKey = Reflect.get(origin, id);
const nodeTitle = Reflect.get(origin, title);
const nodeChildren = Reflect.get(origin, children);
const nodeDisabled = !!Reflect.get(origin, "disabled");
const nodeIsLeaf = !!Reflect.get(origin, "spread");
const parentNode = nodeMap.get(parentKey);
const node = Object.assign({}, origin, {
id: nodeKey,
title: nodeTitle,
children: nodeChildren ? nodeChildren : [],
parentKey,
isRoot: parentKey === "",
isDisabled: ref(false),
isChecked: ref(false),
isLeaf: ref(false),
hasNextSibling,
parentNode: parentNode || null
});
node.isDisabled.value = nodeDisabled;
node.isChecked.value = parentNode ? parentNode.isChecked.value : checkedKeys.includes(nodeKey);
node.isLeaf.value = parentNode ? parentNode.isLeaf.value : expandKeys.includes(nodeKey);
node.isLeaf.value = nodeIsLeaf;
if (!nodeMap.has(nodeKey)) {
nodeMap.set(nodeKey, node);
}
if (!originMap.has(nodeKey)) {
originMap.set(nodeKey, origin);
}
return node;
}
setChildrenChecked(checked, nodes) {
const len = nodes.length;
for (let i = 0; i < len; i++) {
nodes[i].isChecked.value = checked;
nodes[i].children && nodes[i].children.length > 0 && this.setChildrenChecked(checked, nodes[i].children);
}
}
setParentChecked(checked, parent) {
if (!parent) {
return;
}
parent.isChecked.value = checked;
const pChild = parent.children;
const pChildChecked = pChild.some((c) => c.isChecked.value);
if (pChildChecked) {
parent.isChecked.value = true;
}
if (parent.parentNode) {
this.setParentChecked(checked, parent.parentNode);
}
}
setCheckedKeys(checked, node) {
node.isChecked.value = checked;
if (node.parentNode) {
this.setParentChecked(checked, node.parentNode);
}
if (node.children) {
this.setChildrenChecked(checked, node.children);
}
}
getData() {
return this.treeData;
}
getKeys() {
const checkedKeys = [];
const expandKeys = [];
const iterator = this.config.nodeMap[Symbol.iterator]();
let next = iterator.next();
while (!next.done) {
const [, node] = next.value;
const id = Reflect.get(node, this.config.replaceFields.id);
if (node.isChecked.value) {
checkedKeys.push(id);
}
if (node.isLeaf.value) {
expandKeys.push(id);
}
next = iterator.next();
}
return { checkedKeys, expandKeys };
}
getOriginData(key) {
return this.config.originMap.get(key);
}
}
const useTree = (props, emit) => {
var _a, _b, _c;
const tree = new Tree({
nodeMap: new Map(),
originMap: new Map(),
replaceFields: {
id: "id",
title: "title",
children: "children"
},
showCheckbox: (_a = props.showCheckbox) != null ? _a : false,
checkedKeys: (_b = props.checkedKeys) != null ? _b : [],
expandKeys: (_c = props.expandKeys) != null ? _c : []
}, props.data);
const nodeList = computed(() => {
const nodes = tree.getData();
console.log(nodes);
return nodes;
});
watch(() => nodeList, (list) => {
const { checkedKeys, expandKeys } = tree.getKeys();
emit("update:checkedKeys", checkedKeys);
}, { deep: true });
return {
tree,
nodeList
};
};
var index = "";
const __default__ = {
name: "LayTree"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
checkedKeys: null,
data: null,
showCheckbox: { type: Boolean, default: false },
edit: { type: [Boolean, String], default: false },
collapseTransition: { type: Boolean, default: false },
onlyIconControl: { type: Boolean, default: false },
showLine: { type: Boolean, default: true },
disabled: { type: Boolean, default: false },
replaceFields: { default: () => {
return {
id: "id",
children: "children",
title: "title"
};
} }
},
emits: ["update:checkedKeys", "update:expandKeys", "node-click"],
setup(__props, { emit }) {
const props = __props;
const className = computed(() => {
return {
"layui-tree": true,
"layui-form": props.showCheckbox,
"layui-tree-line": props.showLine
};
});
const { tree, nodeList } = useTree(props, emit);
function handleClick(node) {
const originNode = tree.getOriginData(node.id);
emit("node-click", originNode);
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(unref(className))
}, [
createVNode(_sfc_main$1, {
tree: unref(tree),
"node-list": unref(nodeList),
"show-checkbox": __props.showCheckbox,
"show-line": __props.showLine,
"collapse-transition": __props.collapseTransition,
"only-icon-control": __props.onlyIconControl,
onNodeClick: handleClick
}, null, 8, ["tree", "node-list", "show-checkbox", "show-line", "collapse-transition", "only-icon-control"])
], 2);
};
}
}));
_sfc_main.install = (app) => {
app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };