aibox-custom-component-packages 0.0.11 → 0.0.13

package/es/chunks/CustomSidebar.BF2dzN8s.js

@@ -0,0 +1,585 @@
+import { t as e } from "./withinstall.dLh4K-0g.js";
+import { t } from "./_plugin-vue_export-helper.Ct3qlEzt.js";
+import { Fragment as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, markRaw as u, nextTick as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, resolveDynamicComponent as _, toDisplayString as v, toRaw as y, unref as b, vShow as x, watch as S, withCtx as C, withDirectives as w, withModifiers as T } from "vue";
+import { ElAutoResizer as E, ElIcon as D, ElTreeV2 as O } from "element-plus";
+import { AiboxIcon as k } from "color-message-aibox-vue";
+import { IconRenderer as A, iconLibraryMap as j } from "color-star-custom-components";
+import '../assets/CustomSidebar.css';//#region components/CustomSidebar/components/NavTitle.vue
+var M = { class: "nav-title overflow-hidden" }, ee = /* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "NavTitle" }, {
+	__name: "NavTitle",
+	props: {
+		title: {
+			type: String,
+			default: ""
+		},
+		logoSize: {
+			type: Number,
+			default: 30
+		},
+		titleStyle: {
+			type: Object,
+			default: () => ({ fontSize: "16px" })
+		},
+		showToggle: {
+			type: Boolean,
+			default: !0
+		},
+		toggleIcon: {
+			type: [Object, String],
+			default: null
+		}
+	},
+	emits: ["toggle"],
+	setup(e, { emit: t }) {
+		let n = t, r = () => {
+			n("toggle");
+		};
+		return (t, n) => (m(), s("div", M, [
+			l(b(D), { size: e.logoSize }, {
+				default: C(() => [l(b(k))]),
+				_: 1
+			}, 8, ["size"]),
+			c("span", {
+				class: "weight-500 text-1f2329 title-text",
+				style: p(e.titleStyle)
+			}, v(e.title), 5),
+			e.showToggle ? (m(), a(b(D), {
+				key: 0,
+				size: 18,
+				class: "collapse-unfold-icon",
+				onClick: r
+			}, {
+				default: C(() => [(m(), a(_(e.toggleIcon)))]),
+				_: 1
+			})) : o("", !0)
+		]));
+	}
+}), [["__scopeId", "data-v-52011bbe"]]), N = {
+	DIR: "DIR",
+	MENU: "MENU",
+	BUTTON: "BUTTON"
+}, P = new Map([
+	["active", "#3271FE"],
+	["parent_active", "#3271FE"],
+	["normal", "#1F2329"]
+]), F = (e, t) => !Array.isArray(e) || !t ? !1 : e.some((e) => e.path === t ? !0 : e.children?.length > 0 ? F(e.children, t) : !1), I = (e, t = 1) => e.filter((e) => [N.DIR, N.MENU].includes(e.type)).map((e) => ({
+	...e,
+	id: e.bnid,
+	name: e.name,
+	path: e?.path || "",
+	children: e.children?.length > 0 ? I(e.children || [], t + 1) : [],
+	level: t
+})), L = (e, t) => e?.children?.length ? e.children.some((e) => e?.path === t || e.children?.length && L(e, t)) : !1, R = (e, t) => e?.children?.length ? e.children.some((e) => e?.id === t || e.children?.length && R(e, t)) : !1, z = (e, t) => {
+	let n = e?.id === t, r = R(e, t), i = "normal";
+	return n ? i = "active" : r && (i = "parent_active"), P.get(i);
+}, B = (e, t) => e.includes(t) ? e : [...e, t], te = (e, t) => e.filter((e) => e !== t), V = (e, t, n = []) => e.some((e) => {
+	if (e?.path === t) return !0;
+	if (e.children?.length > 0) {
+		n.push(e.id);
+		let r = V(e.children, t, n);
+		return !r && n.pop(), r;
+	}
+	return !1;
+}), H = (e, t, n = []) => e.some((e) => {
+	if (e?.id === t) return !0;
+	if (e.children?.length > 0) {
+		n.push(e.id);
+		let r = H(e.children, t, n);
+		return !r && n.pop(), r;
+	}
+	return !1;
+}), U = (e, t) => {
+	let n = [];
+	return H(e, t, n), n;
+}, W = (e, t) => {
+	if (!Array.isArray(e) || !t) return null;
+	for (let n of e) {
+		if (n.path === t) return n;
+		if (n.children?.length > 0) {
+			let e = W(n.children, t);
+			if (e) return e;
+		}
+	}
+	return null;
+}, G = (e) => Array.isArray(e) ? e.map((e) => {
+	let t = { ...e };
+	return t.children && Array.isArray(t.children) && t.children.length > 0 ? t.children = G(t.children) : t.isLeaf = !0, t;
+}) : [], K = (e) => {
+	if (!Array.isArray(e) || e.length === 0) return null;
+	for (let t of e) {
+		if (t.isLeaf && t.path) return t;
+		if (t.children?.length > 0) {
+			let e = K(t.children);
+			if (e) return e;
+		}
+	}
+	return null;
+}, q = [
+	"/404",
+	"/login",
+	"/unauthorized"
+], J = {
+	label: "name",
+	children: "children",
+	isLeaf: "isLeaf"
+}, Y = {
+	PARENT: "parent",
+	LEAF: "leaf"
+}, X = {
+	LOADING: "loading",
+	LOADED: "loaded",
+	ERROR: "error"
+}, Z = {
+	POPUP: "popup",
+	FOOTER: "footer"
+}, ne = { class: "node-label" }, re = ["onClick"], ie = /* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "MenuList" }, {
+	__name: "MenuList",
+	props: {
+		menuData: {
+			type: Array,
+			default: () => []
+		},
+		currentMenuId: {
+			type: String,
+			default: null
+		},
+		expandedKeys: {
+			type: Array,
+			default: () => []
+		},
+		treeProps: {
+			type: Object,
+			default: () => J
+		},
+		itemHeight: {
+			type: Number,
+			default: 36
+		},
+		indent: {
+			type: Number,
+			default: 24
+		},
+		iconSize: {
+			type: Number,
+			default: 16
+		},
+		selectMenuBg: {
+			type: String,
+			default: "#eaf0fe"
+		},
+		expandedIcon: {
+			type: [Object, String],
+			default: null
+		},
+		collapsedIcon: {
+			type: [Object, String],
+			default: null
+		}
+	},
+	emits: [
+		"node-click",
+		"node-expand",
+		"node-collapse"
+	],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = h(null), u = (e) => e?.icon && e.level === 1 || !e.isLeaf, g = (e) => z(e, n.currentMenuId), y = (e) => {
+			r("node-click", e, e.isLeaf ? Y.LEAF : Y.PARENT);
+		}, x = (e) => {
+			r("node-expand", e.id, e);
+		}, w = (e) => {
+			r("node-collapse", e.id, e);
+		}, k = (e) => {
+			i.value && (n.expandedKeys.includes(e.data.id) ? i.value.collapseNode(e) : i.value.expandNode(e));
+		};
+		return S(() => n.expandedKeys, (e) => {
+			d(() => {
+				i.value && i.value.setExpandedKeys([...e]);
+			});
+		}, { deep: !0 }), (t, n) => (m(), a(b(E), { class: "flex-1 overflow-hidden" }, {
+			default: C(({ height: t }) => [l(b(O), {
+				ref_key: "treeRef",
+				ref: i,
+				"node-key": "id",
+				data: e.menuData,
+				props: e.treeProps,
+				height: t,
+				"current-node-key": e.currentMenuId,
+				"highlight-current": !0,
+				"expanded-keys": e.expandedKeys,
+				"show-checkbox": !1,
+				"item-size": e.itemHeight + 8,
+				"expand-on-click-node": !1,
+				indent: e.indent,
+				style: p({ "--select-menu-bg": e.selectMenuBg }),
+				onNodeClick: y,
+				onNodeExpand: x,
+				onNodeCollapse: w,
+				class: "custom-tree"
+			}, {
+				default: C(({ node: t, data: n }) => [c("div", { class: f(["tree-node-content-custom", {
+					"has-children": !n.isLeaf,
+					"is-current": n.id === e.currentMenuId && n.isLeaf,
+					"is-parent-active": b(R)(n, e.currentMenuId) && !n.isLeaf
+				}]) }, [
+					u(n) ? (m(), a(b(D), {
+						key: 0,
+						size: e.iconSize,
+						class: "node-icon",
+						color: g(n)
+					}, {
+						default: C(() => [l(b(A), {
+							"icon-name": n?.icon,
+							"icon-library": b(j).aibox
+						}, null, 8, ["icon-name", "icon-library"])]),
+						_: 2
+					}, 1032, ["size", "color"])) : o("", !0),
+					c("span", ne, v(t.label), 1),
+					n.isLeaf ? o("", !0) : (m(), s("div", {
+						key: 1,
+						class: "expand-arrow",
+						onClick: T((e) => k(t), ["stop"])
+					}, [l(b(D), {
+						size: e.iconSize,
+						color: g(n)
+					}, {
+						default: C(() => [(m(), a(_(e.expandedKeys.includes(n.id) ? e.expandedIcon : e.collapsedIcon)))]),
+						_: 2
+					}, 1032, ["size", "color"])], 8, re))
+				], 2)]),
+				_: 1
+			}, 8, [
+				"data",
+				"props",
+				"height",
+				"current-node-key",
+				"expanded-keys",
+				"item-size",
+				"indent",
+				"style"
+			])]),
+			_: 1
+		}));
+	}
+}), [["__scopeId", "data-v-cf335707"]]), ae = { class: "user-info-card__avatar" }, oe = { class: "user-info-card__avatar-text" }, se = { class: "user-info-card__details" }, ce = { class: "user-info-card__name" }, le = {
+	key: 0,
+	class: "user-info-card__bnid"
+}, Q = /* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "UserInfoCard" }, {
+	__name: "UserInfoCard",
+	props: {
+		userInfo: {
+			type: Object,
+			default: () => ({})
+		},
+		type: {
+			type: String,
+			default: Z.POPUP,
+			validator: (e) => Object.values(Z).includes(e)
+		}
+	},
+	setup(e) {
+		let t = e, n = i(() => t.userInfo?.name?.charAt(0)?.toUpperCase() || "");
+		return (t, r) => (m(), s("div", { class: f(["user-info-card", `user-info-card--${e.type}`]) }, [c("div", ae, [c("span", oe, v(n.value), 1)]), c("div", se, [c("div", ce, v(e.userInfo?.name || ""), 1), e.type === b(Z).POPUP ? (m(), s("div", le, v(e.userInfo?.bnid || e.userInfo?.id || ""), 1)) : o("", !0)])], 2));
+	}
+}), [["__scopeId", "data-v-00216c75"]]), ue = { class: "user-popup-content" }, $ = ["onClick"], de = /* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "UserPopup" }, {
+	__name: "UserPopup",
+	props: {
+		actions: {
+			type: Array,
+			default: () => [],
+			validator: (e) => e.every((e) => e.key && (e.icon || e.iconName))
+		},
+		userInfo: {
+			type: Object,
+			default: () => ({})
+		},
+		showUserInfo: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["action-click"],
+	setup(e, { emit: t }) {
+		let r = e, d = t, p = i(() => (r.actions || []).map((e) => ({
+			...e,
+			icon: u(y(e?.icon))
+		}))), h = (e) => {
+			d("action-click", e.key, e);
+		};
+		return (t, r) => (m(), s("div", ue, [e.showUserInfo ? (m(), a(Q, {
+			key: 0,
+			userInfo: e.userInfo,
+			type: b(Z).POPUP,
+			class: "user-info-card"
+		}, null, 8, ["userInfo", "type"])) : o("", !0), c("div", { class: f({ "popup-list": e.showUserInfo }) }, [(m(!0), s(n, null, g(p.value, (e, t) => (m(), s(n, { key: t }, [e.hidden ? o("", !0) : (m(), s("div", {
+			key: 0,
+			class: "list__item",
+			onClick: (t) => h(e)
+		}, [l(b(D), {
+			class: "list__item-icon",
+			size: e.iconSize || 20,
+			color: "#262626"
+		}, {
+			default: C(() => [(m(), a(_(e.icon), { size: e.iconSize || 20 }, null, 8, ["size"]))]),
+			_: 2
+		}, 1032, ["size"]), c("span", null, v(e.label), 1)], 8, $))], 64))), 128))], 2)]));
+	}
+}), [["__scopeId", "data-v-4c9300a2"]]), fe = { class: "navbar-box__footer__left" }, pe = /* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "NavFooter" }, {
+	__name: "NavFooter",
+	props: {
+		userInfo: {
+			type: Object,
+			default: null,
+			validator: (e) => e ? e.name !== void 0 : !0
+		},
+		actions: {
+			type: Array,
+			default: () => []
+		},
+		popupDelay: {
+			type: Number,
+			default: 200
+		},
+		popupLeft: {
+			type: Number,
+			default: 240
+		},
+		navFooterWidth: {
+			type: Number,
+			default: 240
+		},
+		userInfoCardType: {
+			type: String,
+			default: Z.FOOTER,
+			validator: (e) => Object.values(Z).includes(e)
+		},
+		showPopupUserInfo: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["action-click"],
+	setup(e, { emit: t }) {
+		let i = e, a = t, u = h(null), d = h(!1), f = (e) => {
+			e || (u.value = setTimeout(() => {
+				d.value = !1;
+			}, i.popupDelay)), e && (d.value = e, clearTimeout(u.value));
+		}, g = (e, t) => {
+			d.value = !1, a("action-click", e, t);
+		};
+		return (t, i) => (m(), s(n, null, [e.userInfo ? (m(), s("div", {
+			key: 0,
+			class: "navbar-box__footer flex items-center",
+			style: p({ width: e.navFooterWidth + "px" }),
+			onMouseenter: i[0] ||= (e) => f(!0),
+			onMouseleave: i[1] ||= (e) => f(!1)
+		}, [c("div", fe, [l(Q, {
+			userInfo: e.userInfo,
+			type: e.userInfoCardType
+		}, null, 8, ["userInfo", "type"])])], 36)) : o("", !0), l(r, { name: "fade" }, {
+			default: C(() => [w(c("div", {
+				class: "footer-popup content-bg",
+				style: p({ left: e.popupLeft + "px" }),
+				onMouseenter: i[2] ||= (e) => f(!0),
+				onMouseleave: i[3] ||= (e) => f(!1)
+			}, [l(de, {
+				actions: e.actions,
+				userInfo: e.userInfo,
+				showUserInfo: e.showPopupUserInfo,
+				onActionClick: g
+			}, null, 8, [
+				"actions",
+				"userInfo",
+				"showUserInfo"
+			])], 36), [[x, d.value]])]),
+			_: 1
+		})], 64));
+	}
+}), [["__scopeId", "data-v-b1713bc6"]]), me = { class: "sidebar flex h-full flex-col" }, he = { class: "flex-1 overflow-hidden flex flex-col pd-l-12 pd-r-12" }, ge = e(/* @__PURE__ */ t(/* @__PURE__ */ Object.assign({ name: "CustomSidebar" }, {
+	__name: "layout",
+	props: {
+		menuData: {
+			type: Array,
+			default: () => []
+		},
+		currentMenuId: {
+			type: String,
+			default: null
+		},
+		expandedKeys: {
+			type: Array,
+			default: () => []
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		showToggle: {
+			type: Boolean,
+			default: !0
+		},
+		toggleIcon: {
+			type: [Object, String],
+			default: null
+		},
+		treeProps: {
+			type: Object,
+			default: () => J
+		},
+		itemHeight: {
+			type: Number,
+			default: 36
+		},
+		indent: {
+			type: Number,
+			default: 24
+		},
+		iconSize: {
+			type: Number,
+			default: 16
+		},
+		selectMenuBg: {
+			type: String,
+			default: "#eaf0fe"
+		},
+		titleStyle: {
+			type: Object,
+			default: () => ({ fontSize: "16px" })
+		},
+		expandedIcon: {
+			type: [Object, String],
+			default: null
+		},
+		collapsedIcon: {
+			type: [Object, String],
+			default: null
+		},
+		iconRenderer: {
+			type: [Object, String],
+			default: null
+		},
+		iconLibrary: {
+			type: [String, Object],
+			default: null
+		},
+		showFooter: {
+			type: Boolean,
+			default: !0
+		},
+		userInfo: {
+			type: Object,
+			default: null
+		},
+		userActions: {
+			type: Array,
+			default: () => []
+		},
+		popupDelay: {
+			type: Number,
+			default: 200
+		},
+		popupLeft: {
+			type: Number,
+			default: 240
+		},
+		navFooterWidth: {
+			type: Number,
+			default: 240
+		},
+		userInfoCardType: {
+			type: String,
+			default: Z.FOOTER,
+			validator: (e) => Object.values(Z).includes(e)
+		},
+		showPopupUserInfo: {
+			type: Boolean,
+			default: !0
+		},
+		logoSize: {
+			type: Number,
+			default: 30
+		}
+	},
+	emits: [
+		"toggle",
+		"node-click",
+		"node-expand",
+		"node-collapse",
+		"user-action-click"
+	],
+	setup(e, { emit: t }) {
+		let n = t, r = () => {
+			n("toggle");
+		}, i = (e, t) => {
+			n("node-click", e, t);
+		}, u = (e, t) => {
+			n("node-expand", e, t);
+		}, d = (e, t) => {
+			n("node-collapse", e, t);
+		}, f = (e, t) => {
+			n("user-action-click", e, t);
+		};
+		return (t, n) => (m(), s("div", me, [c("div", he, [l(ee, {
+			"title-style": e.titleStyle,
+			title: e.title,
+			"logo-size": e.logoSize,
+			"show-toggle": e.showToggle,
+			"toggle-icon": e.toggleIcon,
+			onToggle: r
+		}, null, 8, [
+			"title-style",
+			"title",
+			"logo-size",
+			"show-toggle",
+			"toggle-icon"
+		]), l(ie, {
+			"menu-data": e.menuData,
+			"current-menu-id": e.currentMenuId,
+			"expanded-keys": e.expandedKeys,
+			"tree-props": e.treeProps,
+			"item-height": e.itemHeight,
+			indent: e.indent,
+			"icon-size": e.iconSize,
+			"select-menu-bg": e.selectMenuBg,
+			"expanded-icon": e.expandedIcon,
+			"collapsed-icon": e.collapsedIcon,
+			"icon-renderer": e.iconRenderer,
+			"icon-library": e.iconLibrary,
+			onNodeClick: i,
+			onNodeExpand: u,
+			onNodeCollapse: d
+		}, null, 8, [
+			"menu-data",
+			"current-menu-id",
+			"expanded-keys",
+			"tree-props",
+			"item-height",
+			"indent",
+			"icon-size",
+			"select-menu-bg",
+			"expanded-icon",
+			"collapsed-icon",
+			"icon-renderer",
+			"icon-library"
+		])]), e.showFooter ? (m(), a(pe, {
+			key: 0,
+			"popup-left": e.popupLeft,
+			"user-info": e.userInfo,
+			actions: e.userActions,
+			"popup-delay": e.popupDelay,
+			"nav-footer-width": e.navFooterWidth,
+			"user-info-card-type": e.userInfoCardType,
+			"show-popup-user-info": e.showPopupUserInfo,
+			onActionClick: f
+		}, null, 8, [
+			"popup-left",
+			"user-info",
+			"actions",
+			"popup-delay",
+			"nav-footer-width",
+			"user-info-card-type",
+			"show-popup-user-info"
+		])) : o("", !0)]));
+	}
+}), [["__scopeId", "data-v-b8991280"]]));
+//#endregion
+export { R as _, J as a, G as b, N as c, V as d, H as f, U as g, z as h, q as i, te as l, K as m, X as n, Z as o, W as p, Y as r, P as s, ge as t, B as u, L as v, I as x, F as y };