@web-utils/form-ui 1.0.0-beta9 → 1.0.0-beta91

package/fy-input-tree/index.mjs

@@ -0,0 +1,266 @@
+import { t as e } from "../chunks/B1MSrc6f.mjs";
+import { n as t, t as n } from "../chunks/CX7Oiw5N.mjs";
+import { ElInput as r, ElOption as i, ElSelect as a, ElTree as o } from "element-plus/es";
+import "element-plus/es/components/base/style/css";
+import "element-plus/es/components/input/style/css";
+import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, withCtx as g, withModifiers as _ } from "vue";
+import { isBlank as v } from "@web-utils/core";
+import "element-plus/es/components/select/style/css";
+import "element-plus/es/components/option/style/css";
+import "element-plus/es/components/tree/style/css";
+//#region src/components/avue/fy-from/input-tree/FyInputTree.vue
+var y = {
+	name: "FyInputTree",
+	mixins: [t, n],
+	props: {
+		nodeClick: Function,
+		treeLoad: Function,
+		checked: Function,
+		lazy: {
+			type: Boolean,
+			default: !1
+		},
+		leafOnly: {
+			type: Boolean,
+			default: !1
+		},
+		tags: {
+			type: Boolean,
+			default: !1
+		},
+		limit: {
+			type: Number,
+			default: 0
+		},
+		expandOnClickNode: {
+			type: Boolean,
+			default: !0
+		},
+		filter: {
+			type: Boolean,
+			default: !0
+		},
+		filterText: {
+			type: String,
+			default: ""
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		accordion: {
+			type: Boolean,
+			default: !1
+		},
+		parent: {
+			type: Boolean,
+			default: !0
+		},
+		iconClass: String,
+		defaultExpandedKeys: Array,
+		defaultExpandAll: {
+			type: Boolean,
+			default: !1
+		},
+		popperAppendToBody: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	data() {
+		return {
+			node: [],
+			filterValue: "",
+			dicList: []
+		};
+	},
+	computed: {
+		treeProps() {
+			let e = { ...this.props };
+			return e.isLeaf || (e.isLeaf = this.leafKey), e;
+		},
+		currentNodeKey() {
+			return this.multiple ? "" : this.text;
+		},
+		keysList() {
+			return this.multiple ? this.text : [this.text || ""];
+		},
+		labelShow() {
+			return [...this.node].map((e) => this.getLabelText(e));
+		}
+	},
+	watch: {
+		text() {
+			this.init();
+		},
+		dic: {
+			handler(e) {
+				this.dicList = e;
+			},
+			immediate: !0
+		},
+		dicList: {
+			handler() {
+				this.init();
+			},
+			immediate: !0
+		},
+		filterValue(e) {
+			this.$refs.tree.filter(e);
+		}
+	},
+	methods: {
+		handleClear() {
+			this.text = this.multiple ? [] : "", this.node = [], this.filterValue = "", this.$refs.tree.setCurrentKey(null), this.$refs.tree.setCheckedKeys([]);
+		},
+		handleTreeLoad(e, t) {
+			var n;
+			(n = this.treeLoad) == null || n.call(this, e, (n) => {
+				let r = (e, t, n) => {
+					e.forEach((e) => {
+						e[this.valueKey] === t ? e[this.childrenKey] = n : e[this.childrenKey] && r(e[this.childrenKey]);
+					});
+				};
+				r(this.dicList, e.key, n), t(n);
+			});
+		},
+		filterNode(e, t) {
+			return e ? t[this.labelKey].toLowerCase().indexOf(e.toLowerCase()) !== -1 : !0;
+		},
+		checkChange(e, t, n, r) {
+			this.text.splice(0, this.text.length), this.$refs.tree.getCheckedNodes(this.leafOnly, !1).forEach((e) => this.text.push(e[this.valueKey])), typeof this.checked == "function" && this.checked(e, t, n, r);
+		},
+		getHalfList() {
+			let e = this.$refs.tree.getCheckedNodes(!1, !0);
+			return e = e.map((e) => e[this.valueKey]), e;
+		},
+		init() {
+			this.$nextTick(() => {
+				if (this.node = [], this.multiple) this.$refs.tree.getCheckedNodes(this.leafOnly, !1).forEach((e) => {
+					this.node.push(e);
+				});
+				else {
+					let e = this.$refs.tree.getNode(this.text);
+					if (e) {
+						let t = e.data;
+						this.$refs.tree.setCurrentKey(t[this.valueKey]), this.node.push(t);
+					}
+				}
+			}), this.disabledParentNode(this.dic, this.parent);
+		},
+		disabledParentNode(e, t) {
+			e.forEach((e) => {
+				let n = e[this.childrenKey];
+				v(n) || (t || (e.disabled = !0), this.disabledParentNode(n, t));
+			});
+		},
+		handleNodeClick(e, t, n) {
+			e.disabled || (typeof this.nodeClick == "function" && this.nodeClick(e, t, n), !this.multiple && (v(e[this.childrenKey]) && !this.multiple || this.parent) && (this.text = e[this.valueKey], this.$refs.main.blur()));
+		}
+	}
+}, b = {
+	key: 0,
+	class: "avue-input-tree__filter"
+}, x = { class: "avue-input-tree__item" }, S = {
+	key: 0,
+	class: "avue-input-tree__desc"
+};
+function C(e, t, n, v, y, C) {
+	let w = r, T = o, E = i, D = a;
+	return p(), s(D, {
+		ref: "main",
+		class: "avue-input-tree",
+		size: e.size,
+		multiple: e.multiple,
+		"multiple-limit": n.limit,
+		"collapse-tags": n.tags,
+		"model-value": C.labelShow,
+		clearable: e.clearableVal,
+		placeholder: e.placeholder,
+		"popper-class": e.popperClass,
+		"popper-append-to-body": n.popperAppendToBody,
+		disabled: e.disabled,
+		onClick: e.handleClick,
+		onFocus: e.handleFocus,
+		onBlur: e.handleBlur,
+		onClear: C.handleClear
+	}, {
+		default: g(() => [n.filter ? (p(), l("div", b, [d(w, {
+			modelValue: y.filterValue,
+			"onUpdate:modelValue": t[0] || (t[0] = (e) => y.filterValue = e),
+			placeholder: n.filterText
+		}, null, 8, ["modelValue", "placeholder"])])) : c("v-if", !0), d(E, {
+			value: e.text,
+			class: "avue-input-tree__dropdown"
+		}, {
+			default: g(() => [d(T, {
+				ref: "tree",
+				data: y.dicList,
+				class: "avue-input-tree__select",
+				lazy: n.lazy,
+				load: C.handleTreeLoad,
+				"node-key": e.valueKey,
+				accordion: n.accordion,
+				"icon-class": n.iconClass,
+				"show-checkbox": e.multiple,
+				"expand-on-click-node": n.expandOnClickNode,
+				props: C.treeProps,
+				"check-strictly": n.checkStrictly,
+				"highlight-current": e.multiple !== !0,
+				"current-node-key": C.currentNodeKey,
+				"filter-node-method": C.filterNode,
+				"default-checked-keys": C.keysList,
+				"default-expanded-keys": n.defaultExpandedKeys ? n.defaultExpandedKeys : C.keysList,
+				"default-expand-all": n.defaultExpandAll,
+				onCheck: C.checkChange,
+				onNodeClick: _(C.handleNodeClick, ["self"])
+			}, {
+				default: g(({ data: t }) => [u("div", x, [m(e.$slots, "default", {
+					label: e.labelKey,
+					value: e.valueKey,
+					item: t
+				}, () => [u("span", { class: f({ "avue--disabled": t[e.disabledKey] }) }, h(t[e.labelKey]), 3), t[e.descKey] ? (p(), l("span", S, h(t[e.descKey]), 1)) : c("v-if", !0)])])]),
+				_: 3
+			}, 8, [
+				"data",
+				"lazy",
+				"load",
+				"node-key",
+				"accordion",
+				"icon-class",
+				"show-checkbox",
+				"expand-on-click-node",
+				"props",
+				"check-strictly",
+				"highlight-current",
+				"current-node-key",
+				"filter-node-method",
+				"default-checked-keys",
+				"default-expanded-keys",
+				"default-expand-all",
+				"onCheck",
+				"onNodeClick"
+			])]),
+			_: 3
+		}, 8, ["value"])]),
+		_: 3
+	}, 8, [
+		"size",
+		"multiple",
+		"multiple-limit",
+		"collapse-tags",
+		"model-value",
+		"clearable",
+		"placeholder",
+		"popper-class",
+		"popper-append-to-body",
+		"disabled",
+		"onClick",
+		"onFocus",
+		"onBlur",
+		"onClear"
+	]);
+}
+var w = /* @__PURE__ */ e(y, [["render", C]]);
+//#endregion
+export { w as default };

package/fy-input-tree/style.css

@@ -0,0 +1 @@
+.avue-input-tree .el-tag__close{display:none!important}.avue-input-tree__dropdown{background-color:#fff;min-height:300px;max-height:600px;padding:0 10px;overflow:visible}.avue-input-tree__dropdown:hover,.avue-input-tree__dropdown.hover{background-color:#fff}.avue-input-tree__item{width:100%;display:inline-block}.avue-input-tree__filter{margin:5px 0 0;padding:0 10px}.avue-input-tree__select{padding:10px 0}.avue-input-tree__desc{float:right;color:#8492a6;margin-right:12px;font-size:13px}