@web-utils/component 4.0.16 → 5.0.0-beta02

package/fy-tree/index.mjs

@@ -1,286 +1,382 @@
-import { o as l, D as r, s as d } from "../chunks/util.DqFv_pWg.mjs";
-import { p as h } from "../chunks/permission.CO31YIkD.mjs";
-import { isBlank as u } from "@web-utils/core";
-import { n as p } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const f = {
-  name: "FyTree",
-  directives: {
-    permission: h
-  },
-  props: {
-    indent: Number,
-    filterNodeMethod: Function,
-    checkOnClickNode: Boolean,
-    beforeClose: Function,
-    beforeOpen: Function,
-    permission: {
-      type: [Function, Object],
-      default: () => ({})
-    },
-    iconClass: {
-      type: String
-    },
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    expandOnClickNode: {
-      type: Boolean,
-      default: !1
-    },
-    option: {
-      type: Object,
-      default: () => ({})
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    value: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      filterValue: "",
-      client: {
-        x: 0,
-        y: 0,
-        show: !1
-      },
-      box: !1,
-      type: "",
-      node: {},
-      form: {}
-    };
-  },
-  computed: {
-    styleName() {
-      return {
-        top: d(this.client.y - 10),
-        left: d(this.client.x - 10)
-      };
-    },
-    treeProps() {
-      return Object.assign(this.props, {
-        isLeaf: this.leafKey
-      });
-    },
-    menu() {
-      return l(this.option.menu, !0);
-    },
-    title() {
-      return this.option.title || "添加";
-    },
-    treeLoad() {
-      return this.option.treeLoad;
-    },
-    checkStrictly() {
-      return this.option.checkStrictly;
-    },
-    accordion() {
-      return this.option.accordion;
-    },
-    multiple() {
-      return this.option.multiple;
-    },
-    lazy() {
-      return this.option.lazy;
-    },
-    addText() {
-      return this.addFlag ? this.menuIcon("addBtn") : this.menuIcon("updateBtn");
-    },
-    addFlag() {
-      return ["add", "parentAdd"].includes(this.type);
-    },
-    size() {
-      return this.option.size || "small";
-    },
-    props() {
-      return this.option.props || {};
-    },
-    leafKey() {
-      return this.props.leaf || r.leaf;
-    },
-    valueKey() {
-      return this.props.value || r.value;
-    },
-    labelKey() {
-      return this.props.label || r.label;
-    },
-    childrenKey() {
-      return this.props.children || r.children;
-    },
-    nodeKey() {
-      return this.option.nodeKey || r.nodeKey;
-    },
-    defaultExpandAll() {
-      return this.option.defaultExpandAll;
-    },
-    defaultExpandedKeys() {
-      return this.option.defaultExpandedKeys;
-    },
-    formOption() {
-      return Object.assign(this.option.formOption || {}, {
-        submitText: this.addText
-      });
-    }
-  },
-  watch: {
-    filterValue(t) {
-      this.$refs.tree.filter(t);
-    },
-    value(t) {
-      this.form = t;
-    },
-    form(t) {
-      this.$emit("input", t), this.$emit("change", t);
-    }
-  },
-  mounted() {
-    document.addEventListener("click", this.hideClient), this.$once("hook:beforeDestroy", () => {
-      document.removeEventListener("click", this.hideClient);
-    }), this.initFun();
-  },
-  methods: {
-    optVal: l,
-    hideClient(t) {
-      this.$el.contains(t.target) || (this.client.show = !1);
-    },
-    menuIcon(t) {
-      return l(this.option[`${t}Text`], t);
-    },
-    getPermission(t) {
-      return typeof this.permission == "function" ? this.permission(t, this.node.data || {}) : u(this.permission[t]) ? !0 : this.permission[t];
-    },
-    initFun() {
-      [
-        "filter",
-        "updateKeyChildren",
-        "getCheckedNodes",
-        "setCheckedNodes",
-        "getCheckedKeys",
-        "setCheckedKeys",
-        "setChecked",
-        "getHalfCheckedNodes",
-        "getHalfCheckedKeys",
-        "getCurrentKey",
-        "getCurrentNode",
-        "setCurrentKey",
-        "setCurrentNode",
-        "getNode",
-        "remove",
-        "append",
-        "insertBefore",
-        "insertAfter"
-      ].forEach((t) => {
-        this[t] = this.$refs.tree[t];
-      });
-    },
-    nodeContextmenu(t, e, i) {
-      this.node = i, this.client.x = t.clientX, this.client.y = t.clientY, this.client.show = !0;
-    },
-    handleCheckChange(t, e, i) {
-      this.$emit("check-change", t, e, i);
-    },
-    handleSubmit(t, e) {
-      this.addFlag ? this.save(t, e) : this.update(t, e);
-    },
-    nodeClick(t, e, i) {
-      this.client.show = !1, this.$emit("node-click", t, e, i);
-    },
-    filterNode(t, e) {
-      return typeof this.filterNodeMethod == "function" ? this.filterNodeMethod(t, e) : t ? e[this.labelKey].indexOf(t) !== -1 : !0;
-    },
-    hide(t) {
-      const e = () => {
-        t == null || t(), this.node = {}, this.form = {}, this.box = !1;
-      };
-      typeof this.beforeClose == "function" ? this.beforeClose(e, this.type) : e();
-    },
-    save(t, e) {
-      const i = (n) => {
-        n = n || this.form, this.type === "add" ? this.$refs.tree.append(n, this.node.data[this.valueKey]) : this.type === "parentAdd" && this.$refs.tree.append(n), this.hide(), e();
-      };
-      this.$emit("save", this.node, t, i, e);
-    },
-    update(t, e) {
-      const i = (n) => {
-        n = n || this.form;
-        const o = n[this.valueKey];
-        this.node.data = this.form;
-        const { parentList: s, index: a } = this.findData(o);
-        if (s) {
-          const c = s.splice(a, 1)[0];
-          n[this.childrenKey] = c[this.childrenKey], s.splice(a, 0, n);
-        }
-        this.hide(), e();
-      };
-      this.$emit("update", this.node, t, i, e);
-    },
-    rowEdit() {
-      this.type = "edit", this.form = this.node.data, this.show();
-    },
-    parentAdd() {
-      this.type = "parentAdd", this.show();
-    },
-    rowAdd() {
-      this.type = "add", this.show();
-    },
-    show() {
-      const t = () => {
-        this.client.show = !1, this.box = !0;
-      };
-      typeof this.beforeOpen == "function" ? this.beforeOpen(t, this.type) : t();
-    },
-    rowRemove() {
-      this.client.show = !1;
-      const t = () => {
-        this.$refs.tree.remove(this.node.data[this.valueKey]);
-      };
-      this.$emit("del", this.node, t);
-    },
-    findData(t) {
-      let e = {};
-      const i = (n, o) => {
-        n.forEach((s, a) => {
-          s[this.valueKey] === t && (e = {
-            item: s,
-            index: a,
-            parentList: n,
-            parent: o
-          }), s[this.childrenKey] && i(s[this.childrenKey], s);
-        });
-      };
-      return i(this.data), e;
-    }
-  }
-};
-var m = function() {
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "avue-tree" }, [e.optVal(e.option.filter, !0) ? i("div", { staticClass: "avue-tree__filter" }, [i("ElInput", { attrs: { placeholder: e.optVal(e.option.filterText, "输入关键字进行过滤"), size: e.size }, model: { value: e.filterValue, callback: function(n) {
-    e.filterValue = n;
-  }, expression: "filterValue" } }), e.optVal(e.option.addBtn, !0) ? i("ElButton", { directives: [{ name: "permission", rawName: "v-permission", value: e.getPermission("addBtn"), expression: "getPermission('addBtn')" }], attrs: { size: e.size, icon: "el-icon-plus" }, on: { click: e.parentAdd } }) : e._t("addBtn")], 2) : e._e(), i("ElScrollbar", { staticClass: "avue-tree__content" }, [i("ElTree", { directives: [{ name: "loading", rawName: "v-loading", value: e.loading, expression: "loading" }], ref: "tree", attrs: { data: e.data, lazy: e.lazy, load: e.treeLoad, props: e.treeProps, "icon-class": e.iconClass, indent: e.indent, "highlight-current": !e.multiple, "show-checkbox": e.multiple, accordion: e.accordion, "node-key": e.valueKey, "check-strictly": e.checkStrictly, "check-on-click-node": e.checkOnClickNode, "filter-node-method": e.filterNode, "expand-on-click-node": e.expandOnClickNode, "default-expand-all": e.defaultExpandAll, "default-expanded-keys": e.defaultExpandedKeys }, on: { "check-change": e.handleCheckChange, "node-click": e.nodeClick, "node-contextmenu": e.nodeContextmenu }, scopedSlots: e._u([{ key: "default", fn: function({ node: n, data: o }) {
-    return [e._t("default", function() {
-      return [i("span", { staticClass: "el-tree-node__label" }, [i("span", [e._v(e._s(n.label))])])];
-    }, { node: n, data: o })];
-  } }], null, !0) })], 1), e.client.show && e.menu ? i("div", { staticClass: "el-cascader-panel is-bordered avue-tree__menu", style: e.styleName, on: { click: function(n) {
-    e.client.show = !1;
-  } } }, [e.optVal(e.option.addBtn, !0) ? i("div", { directives: [{ name: "permission", rawName: "v-permission", value: e.getPermission("addBtn"), expression: "getPermission('addBtn')" }], staticClass: "avue-tree__item", on: { click: e.rowAdd } }, [e._v(" " + e._s(e.menuIcon("addBtn")) + " ")]) : e._e(), e.optVal(e.option.editBtn, !0) ? i("div", { directives: [{ name: "permission", rawName: "v-permission", value: e.getPermission("editBtn"), expression: "getPermission('editBtn')" }], staticClass: "avue-tree__item", on: { click: e.rowEdit } }, [e._v(" " + e._s(e.menuIcon("editBtn")) + " ")]) : e._e(), e.optVal(e.option.delBtn, !0) ? i("div", { directives: [{ name: "permission", rawName: "v-permission", value: e.getPermission("delBtn"), expression: "getPermission('delBtn')" }], staticClass: "avue-tree__item", on: { click: e.rowRemove } }, [e._v(" " + e._s(e.menuIcon("delBtn")) + " ")]) : e._e(), e._t("menu", null, { node: e.node })], 2) : e._e(), e.box ? i("div", [i("ElementDialog", { attrs: { title: e.node[e.labelKey] || e.title, visible: e.box, "before-close": e.hide, width: e.optVal(e.option.dialogWidth, "50%") }, on: { "update:visible": function(n) {
-    e.box = n;
-  } } }, [i("FyForm", { ref: "form", attrs: { option: e.formOption }, on: { submit: e.handleSubmit }, model: { value: e.form, callback: function(n) {
-    e.form = n;
-  }, expression: "form" } })], 1)], 1) : e._e()], 1);
-}, y = [], v = /* @__PURE__ */ p(
-  f,
-  m,
-  y,
-  !1,
-  null,
-  null
-);
-const x = v.exports;
-export {
-  x as default
-};
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { O as t, v as n, x as r } from "../chunks/util.g-WQEec9.mjs";
+import { t as i } from "../chunks/permission.C-IUDxQQ.mjs";
+import { createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, normalizeStyle as d, openBlock as f, renderSlot as p, resolveComponent as m, resolveDirective as h, toDisplayString as g, withCtx as _, withDirectives as v } from "vue";
+import { isBlank as y } from "@web-utils/core";
+//#region src/components/tree/FyTree.vue
+var b = {
+	name: "FyTree",
+	directives: { permission: i },
+	props: {
+		indent: Number,
+		filterNodeMethod: Function,
+		checkOnClickNode: Boolean,
+		beforeClose: Function,
+		beforeOpen: Function,
+		permission: {
+			type: [Function, Object],
+			default: () => ({})
+		},
+		iconClass: { type: String },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		expandOnClickNode: {
+			type: Boolean,
+			default: !1
+		},
+		option: {
+			type: Object,
+			default: () => ({})
+		},
+		data: {
+			type: Array,
+			default: () => []
+		},
+		modelValue: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	emits: [
+		"node-click",
+		"del",
+		"update",
+		"check-change",
+		"change",
+		"update:modelValue"
+	],
+	data() {
+		return {
+			filterValue: "",
+			client: {
+				x: 0,
+				y: 0,
+				show: !1
+			},
+			box: !1,
+			type: "",
+			node: {},
+			form: {}
+		};
+	},
+	computed: {
+		styleName() {
+			return {
+				top: r(this.client.y - 10),
+				left: r(this.client.x - 10)
+			};
+		},
+		treeProps() {
+			return Object.assign(this.props, { isLeaf: this.leafKey });
+		},
+		menu() {
+			return n(this.option.menu, !0);
+		},
+		title() {
+			return this.option.title || "添加";
+		},
+		treeLoad() {
+			return this.option.treeLoad;
+		},
+		checkStrictly() {
+			return this.option.checkStrictly;
+		},
+		accordion() {
+			return this.option.accordion;
+		},
+		multiple() {
+			return this.option.multiple;
+		},
+		lazy() {
+			return this.option.lazy;
+		},
+		addText() {
+			return this.addFlag ? this.menuIcon("addBtn") : this.menuIcon("updateBtn");
+		},
+		addFlag() {
+			return ["add", "parentAdd"].includes(this.type);
+		},
+		size() {
+			return this.option.size || "small";
+		},
+		props() {
+			return this.option.props || {};
+		},
+		leafKey() {
+			return this.props.leaf || t.leaf;
+		},
+		valueKey() {
+			return this.props.value || t.value;
+		},
+		labelKey() {
+			return this.props.label || t.label;
+		},
+		childrenKey() {
+			return this.props.children || t.children;
+		},
+		nodeKey() {
+			return this.option.nodeKey || t.nodeKey;
+		},
+		defaultExpandAll() {
+			return this.option.defaultExpandAll;
+		},
+		defaultExpandedKeys() {
+			return this.option.defaultExpandedKeys;
+		},
+		formOption() {
+			return Object.assign(this.option.formOption || {}, { submitText: this.addText });
+		}
+	},
+	watch: {
+		filterValue(e) {
+			this.$refs.tree.filter(e);
+		},
+		modelValue(e) {
+			this.form = e;
+		},
+		form(e) {
+			this.$emit("update:modelValue", e), this.$emit("change", e);
+		}
+	},
+	mounted() {
+		document.addEventListener("click", this.hideClient), this.initFun();
+	},
+	beforeUnmount() {
+		document.removeEventListener("click", this.hideClient);
+	},
+	methods: {
+		optVal: n,
+		hideClient(e) {
+			this.$el.contains(e.target) || (this.client.show = !1);
+		},
+		menuIcon(e) {
+			return n(this.option[`${e}Text`], e);
+		},
+		getPermission(e) {
+			return typeof this.permission == "function" ? this.permission(e, this.node.data || {}) : y(this.permission[e]) ? !0 : this.permission[e];
+		},
+		initFun() {
+			[
+				"filter",
+				"updateKeyChildren",
+				"getCheckedNodes",
+				"setCheckedNodes",
+				"getCheckedKeys",
+				"setCheckedKeys",
+				"setChecked",
+				"getHalfCheckedNodes",
+				"getHalfCheckedKeys",
+				"getCurrentKey",
+				"getCurrentNode",
+				"setCurrentKey",
+				"setCurrentNode",
+				"getNode",
+				"remove",
+				"append",
+				"insertBefore",
+				"insertAfter"
+			].forEach((e) => {
+				this[e] = this.$refs.tree[e];
+			});
+		},
+		nodeContextmenu(e, t, n) {
+			this.node = n, this.client.x = e.clientX, this.client.y = e.clientY, this.client.show = !0;
+		},
+		handleCheckChange(e, t, n) {
+			this.$emit("check-change", e, t, n);
+		},
+		handleSubmit(e, t) {
+			this.addFlag ? this.save(e, t) : this.update(e, t);
+		},
+		nodeClick(e, t, n) {
+			this.client.show = !1, this.$emit("node-click", e, t, n);
+		},
+		filterNode(e, t) {
+			return typeof this.filterNodeMethod == "function" ? this.filterNodeMethod(e, t) : e ? t[this.labelKey].indexOf(e) !== -1 : !0;
+		},
+		hide(e) {
+			let t = () => {
+				e == null || e(), this.node = {}, this.form = {}, this.box = !1;
+			};
+			typeof this.beforeClose == "function" ? this.beforeClose(t, this.type) : t();
+		},
+		save(e, t) {
+			this.$emit("save", this.node, e, (e) => {
+				e = e || this.form, this.type === "add" ? this.$refs.tree.append(e, this.node.data[this.valueKey]) : this.type === "parentAdd" && this.$refs.tree.append(e), this.hide(), t();
+			}, t);
+		},
+		update(e, t) {
+			this.$emit("update", this.node, e, (e) => {
+				e = e || this.form;
+				let n = e[this.valueKey];
+				this.node.data = this.form;
+				let { parentList: r, index: i } = this.findData(n);
+				if (r) {
+					let t = r.splice(i, 1)[0];
+					e[this.childrenKey] = t[this.childrenKey], r.splice(i, 0, e);
+				}
+				this.hide(), t();
+			}, t);
+		},
+		rowEdit() {
+			this.type = "edit", this.form = this.node.data, this.show();
+		},
+		parentAdd() {
+			this.type = "parentAdd", this.show();
+		},
+		rowAdd() {
+			this.type = "add", this.show();
+		},
+		show() {
+			let e = () => {
+				this.client.show = !1, this.box = !0;
+			};
+			typeof this.beforeOpen == "function" ? this.beforeOpen(e, this.type) : e();
+		},
+		rowRemove() {
+			this.client.show = !1, this.$emit("del", this.node, () => {
+				this.$refs.tree.remove(this.node.data[this.valueKey]);
+			});
+		},
+		findData(e) {
+			let t = {}, n = (r, i) => {
+				r.forEach((a, o) => {
+					a[this.valueKey] === e && (t = {
+						item: a,
+						index: o,
+						parentList: r,
+						parent: i
+					}), a[this.childrenKey] && n(a[this.childrenKey], a);
+				});
+			};
+			return n(this.data), t;
+		}
+	}
+}, x = { class: "avue-tree" }, S = {
+	key: 0,
+	class: "avue-tree__filter"
+}, C = { key: 1 }, w = { class: "el-tree-node__label" }, T = { key: 2 };
+function E(e, t, n, r, i, y) {
+	let b = m("ElInput"), E = m("ElButton"), D = m("ElTree"), O = m("ElScrollbar"), k = m("FyForm"), A = m("ElementDialog"), j = h("permission"), M = h("loading");
+	return f(), s("div", x, [
+		y.optVal(n.option.filter, !0) ? (f(), s("div", S, [u(b, {
+			modelValue: i.filterValue,
+			"onUpdate:modelValue": t[0] || (t[0] = (e) => i.filterValue = e),
+			placeholder: y.optVal(n.option.filterText, "输入关键字进行过滤"),
+			size: y.size
+		}, null, 8, [
+			"modelValue",
+			"placeholder",
+			"size"
+		]), y.optVal(n.option.addBtn, !0) ? v((f(), a(E, {
+			key: 0,
+			size: y.size,
+			icon: "el-icon-plus",
+			onClick: y.parentAdd
+		}, null, 8, ["size", "onClick"])), [[j, y.getPermission("addBtn")]]) : v((f(), s("div", C, [p(e.$slots, "addBtn")])), [[j, y.getPermission("addBtn")]])])) : o("v-if", !0),
+		u(O, { class: "avue-tree__content" }, {
+			default: _(() => [v((f(), a(D, {
+				ref: "tree",
+				data: n.data,
+				lazy: y.lazy,
+				load: y.treeLoad,
+				props: y.treeProps,
+				"icon-class": n.iconClass,
+				indent: n.indent,
+				"highlight-current": !y.multiple,
+				"show-checkbox": y.multiple,
+				accordion: y.accordion,
+				"node-key": y.valueKey,
+				"check-strictly": y.checkStrictly,
+				"check-on-click-node": n.checkOnClickNode,
+				"filter-node-method": y.filterNode,
+				"expand-on-click-node": n.expandOnClickNode,
+				"default-expand-all": y.defaultExpandAll,
+				"default-expanded-keys": y.defaultExpandedKeys,
+				onCheckChange: y.handleCheckChange,
+				onNodeClick: y.nodeClick,
+				onNodeContextmenu: y.nodeContextmenu
+			}, {
+				default: _(({ node: t, data: n }) => [p(e.$slots, "default", {
+					node: t,
+					data: n
+				}, () => [c("span", w, [c("span", null, g(t.label), 1)])])]),
+				_: 3
+			}, 8, [
+				"data",
+				"lazy",
+				"load",
+				"props",
+				"icon-class",
+				"indent",
+				"highlight-current",
+				"show-checkbox",
+				"accordion",
+				"node-key",
+				"check-strictly",
+				"check-on-click-node",
+				"filter-node-method",
+				"expand-on-click-node",
+				"default-expand-all",
+				"default-expanded-keys",
+				"onCheckChange",
+				"onNodeClick",
+				"onNodeContextmenu"
+			])), [[M, n.loading]])]),
+			_: 3
+		}),
+		i.client.show && y.menu ? (f(), s("div", {
+			key: 1,
+			class: "el-cascader-panel is-bordered avue-tree__menu",
+			style: d(y.styleName),
+			onClick: t[4] || (t[4] = (e) => i.client.show = !1)
+		}, [
+			y.optVal(n.option.addBtn, !0) ? v((f(), s("div", {
+				key: 0,
+				class: "avue-tree__item",
+				onClick: t[1] || (t[1] = (...e) => y.rowAdd && y.rowAdd(...e))
+			}, [l(g(y.menuIcon("addBtn")), 1)])), [[j, y.getPermission("addBtn")]]) : o("v-if", !0),
+			y.optVal(n.option.editBtn, !0) ? v((f(), s("div", {
+				key: 1,
+				class: "avue-tree__item",
+				onClick: t[2] || (t[2] = (...e) => y.rowEdit && y.rowEdit(...e))
+			}, [l(g(y.menuIcon("editBtn")), 1)])), [[j, y.getPermission("editBtn")]]) : o("v-if", !0),
+			y.optVal(n.option.delBtn, !0) ? v((f(), s("div", {
+				key: 2,
+				class: "avue-tree__item",
+				onClick: t[3] || (t[3] = (...e) => y.rowRemove && y.rowRemove(...e))
+			}, [l(g(y.menuIcon("delBtn")), 1)])), [[j, y.getPermission("delBtn")]]) : o("v-if", !0),
+			p(e.$slots, "menu", { node: i.node })
+		], 4)) : o("v-if", !0),
+		i.box ? (f(), s("div", T, [u(A, {
+			visible: i.box,
+			"onUpdate:visible": t[6] || (t[6] = (e) => i.box = e),
+			title: i.node[y.labelKey] || y.title,
+			"before-close": y.hide,
+			width: y.optVal(n.option.dialogWidth, "50%")
+		}, {
+			default: _(() => [u(k, {
+				ref: "form",
+				modelValue: i.form,
+				"onUpdate:modelValue": t[5] || (t[5] = (e) => i.form = e),
+				option: y.formOption,
+				onSubmit: y.handleSubmit
+			}, null, 8, [
+				"modelValue",
+				"option",
+				"onSubmit"
+			])]),
+			_: 1
+		}, 8, [
+			"visible",
+			"title",
+			"before-close",
+			"width"
+		])])) : o("v-if", !0)
+	]);
+}
+var D = /* @__PURE__ */ e(b, [["render", E]]);
+//#endregion
+export { D as default };