@well-insight/ui 0.1.7 → 0.1.9

package/dist/menu/style.js

@@ -0,0 +1,4 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Icon/styles.css'
+import '../components/Menu/styles.css'

package/dist/menubar/index.js

@@ -0,0 +1,141 @@
+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 { n as a } from "../locale-CYkJyRd1.js";
+import "./style.js";
+import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, normalizeStyle as ee, onBeforeUnmount as y, onMounted as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, watch as E, withCtx as D, withModifiers as O } from "vue";
+//#region src/components/Menubar/Menubar.vue?vue&type=script&setup=true&lang.ts
+var k = ["aria-label"], A = [
+	"disabled",
+	"aria-expanded",
+	"aria-haspopup",
+	"onClick"
+], j = {
+	key: 0,
+	class: "wi-menubar__icon",
+	"aria-hidden": "true"
+}, te = {
+	key: 1,
+	class: "wi-menubar__caret",
+	"aria-hidden": "true"
+}, M = ["disabled", "onClick"], N = {
+	key: 0,
+	class: "wi-menubar__icon",
+	"aria-hidden": "true"
+}, P = /* @__PURE__ */ g({
+	__name: "Menubar",
+	props: {
+		model: {},
+		selectedKey: { default: null },
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: ["update:selectedKey", "select"],
+	setup(g, { emit: P }) {
+		let F = g, I = P, L = i(), R = a(), z = S(null), B = S(null), V = S([]), H = S({}), U = l(() => n(F, L.value.appendTo)), W = l(() => r(F, L.value.appendTo));
+		function G(e, t) {
+			V.value[t] = e instanceof HTMLElement ? e : null;
+		}
+		function K() {
+			if (!W.value || z.value == null) return;
+			let e = V.value[z.value];
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			H.value = {
+				left: `${t.left}px`,
+				top: `${t.bottom + 4}px`
+			};
+		}
+		function q(e) {
+			return e.key ?? e.label;
+		}
+		function J(e) {
+			return !!(F.selectedKey && q(e) === F.selectedKey);
+		}
+		function Y(t) {
+			return t.icon && e(t.icon) ? t.icon : void 0;
+		}
+		function X(e) {
+			e.disabled || (e.command?.(), I("update:selectedKey", q(e)), I("select", e));
+		}
+		function Z(e, t) {
+			if (!t.disabled) {
+				if (!t.items?.length) {
+					X(t), z.value = null;
+					return;
+				}
+				z.value = z.value === e ? null : e, z.value != null && _(() => K());
+			}
+		}
+		function ne(e) {
+			X(e), z.value = null;
+		}
+		function Q(e) {
+			let t = e.target;
+			B.value?.contains(t) || document.querySelector(".wi-menubar__submenu--teleported")?.contains(t) || (z.value = null);
+		}
+		function $() {
+			z.value != null && K();
+		}
+		return E(z, (e) => {
+			e != null && W.value ? (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0)) : (window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), b(() => document.addEventListener("click", Q)), y(() => {
+			document.removeEventListener("click", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		}), (e, n) => (x(), f("nav", {
+			ref_key: "root",
+			ref: B,
+			class: "wi-menubar",
+			"aria-label": T(R).menubar
+		}, [(x(!0), f(o, null, C(g.model, (e, n) => (x(), f("div", {
+			key: `${e.label}-${n}`,
+			class: v(["wi-menubar__item", {
+				"wi-menubar__item--open": z.value === n,
+				"wi-menubar__item--selected": J(e)
+			}])
+		}, [p("button", {
+			ref_for: !0,
+			ref: (e) => G(e, n),
+			type: "button",
+			class: v(["wi-menubar__trigger", { "wi-menubar__trigger--selected": J(e) }]),
+			disabled: e.disabled,
+			"aria-expanded": e.items?.length ? z.value === n : void 0,
+			"aria-haspopup": e.items?.length ? "menu" : void 0,
+			onClick: O((t) => Z(n, e), ["stop"])
+		}, [
+			Y(e) || e.icon ? (x(), f("span", j, [Y(e) ? (x(), u(t, {
+				key: 0,
+				name: Y(e),
+				size: "sm"
+			}, null, 8, ["name"])) : (x(), f(o, { key: 1 }, [m(w(e.icon), 1)], 64))])) : d("", !0),
+			m(" " + w(e.label) + " ", 1),
+			e.items?.length ? (x(), f("span", te, "▾")) : d("", !0)
+		], 10, A), (x(), u(s, {
+			to: U.value.to,
+			disabled: U.value.disabled
+		}, [h(c, { name: "wi-scale-fade" }, {
+			default: D(() => [e.items?.length && z.value === n ? (x(), f("div", {
+				key: 0,
+				class: v(["wi-menubar__submenu", { "wi-menubar__submenu--teleported": W.value }]),
+				style: ee(W.value ? H.value : void 0),
+				role: "menu"
+			}, [(x(!0), f(o, null, C(e.items, (e, n) => (x(), f("button", {
+				key: `${e.label}-${n}`,
+				type: "button",
+				class: v(["wi-menubar__subitem", { "wi-menubar__subitem--selected": J(e) }]),
+				role: "menuitem",
+				disabled: e.disabled,
+				onClick: O((t) => ne(e), ["stop"])
+			}, [Y(e) || e.icon ? (x(), f("span", N, [Y(e) ? (x(), u(t, {
+				key: 0,
+				name: Y(e),
+				size: "sm"
+			}, null, 8, ["name"])) : (x(), f(o, { key: 1 }, [m(w(e.icon), 1)], 64))])) : d("", !0), m(" " + w(e.label), 1)], 10, M))), 128))], 6)) : d("", !0)]),
+			_: 2
+		}, 1024)], 8, ["to", "disabled"]))], 2))), 128))], 8, k));
+	}
+});
+//#endregion
+export { P as WiMenubar };