@well-insight/ui 0.1.7 → 0.1.8

package/dist/mega-menu/style.js

@@ -0,0 +1,3 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/MegaMenu/styles.css'

package/dist/menu/index.js

@@ -0,0 +1,210 @@
+import { a as e, t } from "../Icon-B6gOD07E.js";
+import { n, t as r } from "../overlay-oR-5MDuE.js";
+import { c as i } from "../config-DWwce9jA.js";
+import "./style.js";
+import { Fragment as a, Teleport as o, Transition as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, openBlock as y, ref as b, renderList as x, toDisplayString as S, watch as C, withCtx as w } from "vue";
+//#region src/components/Menu/MenuNodes.vue?vue&type=script&setup=true&lang.ts
+var T = {
+	key: 0,
+	class: "wi-menu__separator",
+	role: "separator"
+}, E = {
+	key: 1,
+	class: "wi-menu__group"
+}, D = [
+	"disabled",
+	"aria-expanded",
+	"onClick"
+], O = {
+	key: 0,
+	class: "wi-menu__icon",
+	"aria-hidden": "true"
+}, k = {
+	key: 1,
+	class: "wi-menu__label"
+}, A = {
+	key: 2,
+	class: "wi-menu__caret",
+	"aria-hidden": "true"
+}, j = {
+	key: 0,
+	class: "wi-menu__submenu",
+	role: "group"
+}, M = [
+	"disabled",
+	"title",
+	"onClick"
+], N = {
+	key: 0,
+	class: "wi-menu__icon",
+	"aria-hidden": "true"
+}, P = {
+	key: 1,
+	class: "wi-menu__label"
+}, F = /* @__PURE__ */ h({
+	__name: "MenuNodes",
+	props: {
+		items: {},
+		depth: {},
+		indent: {},
+		collapsed: { type: Boolean },
+		selectedKey: {}
+	},
+	emits: ["activate"],
+	setup(n, { emit: r }) {
+		let i = n, o = b({});
+		function s(e, t) {
+			return e.key ?? e.label ?? `item-${i.depth}-${t}`;
+		}
+		function h(e) {
+			let t = e.key ?? e.label;
+			return !!(t && t === i.selectedKey);
+		}
+		function v(e, t) {
+			if (e.disabled) return;
+			let n = s(e, t);
+			o.value = {
+				...o.value,
+				[n]: !o.value[n]
+			};
+		}
+		function C(t) {
+			return t.icon && e(t.icon) ? t.icon : void 0;
+		}
+		let w = c(() => i.collapsed ? 0 : i.depth * i.indent);
+		return (e, r) => (y(!0), d(a, null, x(n.items, (i, c) => (y(), d(a, { key: s(i, c) }, [i.separator ? (y(), d("div", T)) : i.items?.length ? (y(), d("div", E, [f("button", {
+			type: "button",
+			class: g(["wi-menu__item wi-menu__item--parent", { "wi-menu__item--selected": h(i) }]),
+			disabled: i.disabled,
+			style: _({ paddingLeft: `${12 + w.value}px` }),
+			"aria-expanded": !!o.value[s(i, c)],
+			onClick: (e) => v(i, c)
+		}, [
+			C(i) || i.icon ? (y(), d("span", O, [C(i) ? (y(), l(t, {
+				key: 0,
+				name: C(i),
+				size: "sm"
+			}, null, 8, ["name"])) : (y(), d(a, { key: 1 }, [p(S(i.icon), 1)], 64))])) : u("", !0),
+			n.collapsed ? u("", !0) : (y(), d("span", k, S(i.label), 1)),
+			n.collapsed ? u("", !0) : (y(), d("span", A, S(o.value[s(i, c)] ? "▾" : "▸"), 1))
+		], 14, D), o.value[s(i, c)] ? (y(), d("div", j, [m(F, {
+			items: i.items,
+			depth: n.depth + 1,
+			indent: n.indent,
+			collapsed: n.collapsed,
+			"selected-key": n.selectedKey,
+			onActivate: r[0] ||= (t) => e.$emit("activate", t)
+		}, null, 8, [
+			"items",
+			"depth",
+			"indent",
+			"collapsed",
+			"selected-key"
+		])])) : u("", !0)])) : (y(), d("button", {
+			key: 2,
+			type: "button",
+			class: g(["wi-menu__item", { "wi-menu__item--selected": h(i) }]),
+			role: "menuitem",
+			disabled: i.disabled,
+			style: _({ paddingLeft: `${12 + w.value}px` }),
+			title: n.collapsed ? i.label : void 0,
+			onClick: (t) => e.$emit("activate", i)
+		}, [C(i) || i.icon ? (y(), d("span", N, [C(i) ? (y(), l(t, {
+			key: 0,
+			name: C(i),
+			size: "sm"
+		}, null, 8, ["name"])) : (y(), d(a, { key: 1 }, [p(S(i.icon), 1)], 64))])) : u("", !0), n.collapsed ? u("", !0) : (y(), d("span", P, S(i.label), 1))], 14, M))], 64))), 128));
+	}
+}), I = /* @__PURE__ */ h({
+	__name: "Menu",
+	props: {
+		model: {},
+		popup: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		selectedKey: { default: null },
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		indent: { default: 16 },
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: [
+		"update:modelValue",
+		"update:selectedKey",
+		"select"
+	],
+	setup(e, { emit: t }) {
+		let a = e, f = t, p = i(), h = b(null), _ = c(() => n(a.popup ? a : { teleport: !1 }, p.value.appendTo)), x = c(() => a.popup && r(a, p.value.appendTo));
+		function S(e) {
+			if (e.disabled || e.separator) return;
+			e.command?.();
+			let t = e.key ?? e.label ?? null;
+			f("update:selectedKey", t), f("select", e), a.popup && f("update:modelValue", !1);
+		}
+		function T(e) {
+			!a.popup || !a.modelValue || h.value && !h.value.contains(e.target) && f("update:modelValue", !1);
+		}
+		return C(() => !!(a.modelValue && a.popup), (e) => {
+			e ? document.addEventListener("click", T) : document.removeEventListener("click", T);
+		}, { immediate: !0 }), v(() => document.removeEventListener("click", T)), (t, n) => e.popup ? (y(), l(o, {
+			key: 1,
+			to: _.value.to,
+			disabled: _.value.disabled
+		}, [m(s, { name: "wi-scale-fade" }, {
+			default: w(() => [e.modelValue ? (y(), d("div", {
+				key: 0,
+				ref_key: "root",
+				ref: h,
+				class: g(["wi-menu wi-menu--popup", {
+					"wi-menu--teleported": x.value,
+					"wi-menu--collapsed": e.collapsed
+				}]),
+				role: "menu"
+			}, [m(F, {
+				items: e.model,
+				depth: 0,
+				indent: e.indent,
+				collapsed: e.collapsed,
+				"selected-key": e.selectedKey,
+				onActivate: S
+			}, null, 8, [
+				"items",
+				"indent",
+				"collapsed",
+				"selected-key"
+			])], 2)) : u("", !0)]),
+			_: 1
+		})], 8, ["to", "disabled"])) : (y(), d("div", {
+			key: 0,
+			ref_key: "root",
+			ref: h,
+			class: g(["wi-menu", { "wi-menu--collapsed": e.collapsed }]),
+			role: "menu"
+		}, [m(F, {
+			items: e.model,
+			depth: 0,
+			indent: e.indent,
+			collapsed: e.collapsed,
+			"selected-key": e.selectedKey,
+			onActivate: S
+		}, null, 8, [
+			"items",
+			"indent",
+			"collapsed",
+			"selected-key"
+		])], 2));
+	}
+});
+//#endregion
+export { I as WiMenu };