@flux-ui/application 3.0.0-next.75 → 3.1.0

package/README.md

@@ -33,4 +33,3 @@ Integrates with `vue-router` for navigation-aware behavior.
 - [`@flux-ui/types`](../types)
 - [`@flux-ui/internals`](../internals)
 - [`@flux-ui/statistics`](../statistics)
-- [`@flux-ui/dashboard`](../dashboard)

package/dist/data/index.d.ts

@@ -26,5 +26,6 @@ export type FluxApplicationInjection = {
     goToParent(): void;
     pushContext(info: FluxApplicationContextInfo): void;
     removeContext(id: symbol): void;
+    updateContext(id: symbol, info: Omit<FluxApplicationContextInfo, 'id'>): void;
 };
 export type FluxApplicationLayout = 'default' | 'dashboard' | 'full' | 'medium' | 'narrow';

package/dist/index.css

@@ -41,7 +41,7 @@
   background: var(--overlay);
   backdrop-filter: blur(3px) saturate(180%);
   transition: var(--application-duration) var(--swift-out);
-  transition-property: background, backdrop-filter, opacity;
+  transition-property: background, backdrop-filter, opacity, visibility;
   z-index: 1900;
 }
 
@@ -61,6 +61,7 @@
     display: block;
   }
   .application:has(> .application-menu[data-collapsed]) .application-menu-backdrop {
+    visibility: hidden;
     pointer-events: none;
     opacity: 0;
   }
@@ -401,66 +402,6 @@ html[data-application-resizing] .application-menu-backdrop {
   font-size: 14px;
 }
 
-.application-menu-context-pill {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 9px;
-  align-items: center;
-  margin: -3px -6px 6px;
-  padding: 9px 12px;
-  cursor: pointer;
-  color: var(--foreground-secondary);
-  background: transparent;
-  border: 1px solid var(--application-menu-surface-stroke);
-  border-radius: var(--radius);
-  transition: background 200ms var(--swift-out);
-}
-@media (hover: hover) {
-  .application-menu-context-pill:hover {
-    background: var(--gray-200);
-  }
-}
-.application-menu-context-pill:active {
-  background: var(--gray-300);
-}
-.application-menu-context-pill {
-  outline: 2px solid rgb(from var(--primary-600) r g b/0);
-  outline-offset: 0;
-}
-.application-menu-context-pill:focus-visible {
-  outline-color: var(--primary-600);
-  outline-offset: 0;
-}
-
-.application-menu-context-pill-content {
-  display: flex;
-  flex: 1 1 auto;
-  flex-flow: column;
-  min-width: 0;
-}
-.application-menu-context-pill-content strong {
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  color: var(--foreground-prominent);
-  text-overflow: ellipsis;
-  transition: var(--application-duration) var(--swift-out);
-  transition-property: filter, opacity, translate;
-}
-.application-menu-context-pill-content span {
-  font-size: 12px;
-  line-height: 1.2;
-  white-space: nowrap;
-  overflow: hidden;
-  color: var(--foreground-secondary);
-  text-overflow: ellipsis;
-  transition: var(--application-duration) var(--swift-out);
-  transition-property: filter, opacity, translate;
-}
-
 .application-menu-promo {
   display: flex;
   padding: 12px;

package/dist/index.js

@@ -15,12 +15,62 @@ function x(e) {
 	} while (e = Object.getPrototypeOf(e));
 	return t;
 }
+function R(e) {
+	return globalThis.document ? e instanceof HTMLElement : !1;
+}
 function G(e, t, n) {
 	e.prototype[t] = n;
 }
 function K(e, t, n) {
 	Object.defineProperty(e, t, { value: n });
 }
+[
+	`a[href]:not([disabled])`,
+	`button:not([disabled])`,
+	`input:not([type=hidden]):not([disabled])`,
+	`select:not([disabled])`,
+	`textarea:not([disabled])`,
+	`[contenteditable]:not([contenteditable=false])`,
+	`[tabindex]:not([disabled]):not([tabindex="-1"])`
+].join(`,`);
+function v(e) {
+	let r = unref(e);
+	return R(r) ? r : r?.$el;
+}
+new class {
+	get active() {
+		return this.current?.isEnabled ?? !1;
+	}
+	get current() {
+		return this.#t[this.#t.length - 1] ?? null;
+	}
+	#e = [];
+	#t = [];
+	add(e, t, n = !0) {
+		let r = {
+			id: e,
+			setEnabled: t,
+			isEnabled: !1
+		};
+		n ? (this.current && this.toggle(this.current, !1), this.#t.push(r), this.toggle(r, !0)) : this.#t.push(r), this.emit();
+	}
+	remove(e) {
+		let t = this.#t.find((t) => t.id === e);
+		t && this.toggle(t, !1);
+		let n = this.current?.id === e;
+		this.#t = this.#t.filter((t) => t.id !== e), n && this.current && this.toggle(this.current, !0), this.emit();
+	}
+	emit() {
+		this.#e.forEach((e) => e(this.active, this.#t));
+	}
+	subscribe(e) {
+		return this.#e.push(e), e(this.active, this.#t), () => this.#e = this.#e.filter((t) => t !== e);
+	}
+	toggle(e, t) {
+		e.setEnabled(t), e.isEnabled = t;
+	}
+}();
+var C = !globalThis.document;
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/rgb/parseNumber.js
 var parseNumber = (color, len) => {
@@ -783,7 +833,7 @@ var hue = (hues, fn) => {
 var fixupHueShorter = (arr) => hue(arr, (d) => Math.abs(d) <= 180 ? d : d - 360 * Math.sign(d));
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/cubehelix/constants.js
-var M = [
+var M$1 = [
 	-.14861,
 	1.78277,
 	-.29227,
@@ -795,20 +845,20 @@ var degToRad = Math.PI / 180;
 var radToDeg = 180 / Math.PI;
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/cubehelix/convertRgbToCubehelix.js
-var DE = M[3] * M[4];
-var BE = M[1] * M[4];
-var BCAD = M[1] * M[2] - M[0] * M[3];
+var DE = M$1[3] * M$1[4];
+var BE = M$1[1] * M$1[4];
+var BCAD = M$1[1] * M$1[2] - M$1[0] * M$1[3];
 var convertRgbToCubehelix = ({ r, g, b, alpha }) => {
 	if (r === void 0) r = 0;
 	if (g === void 0) g = 0;
 	if (b === void 0) b = 0;
 	let l = (BCAD * b + r * DE - g * BE) / (BCAD + DE - BE);
 	let x = b - l;
-	let y = (M[4] * (g - l) - M[2] * x) / M[3];
+	let y = (M$1[4] * (g - l) - M$1[2] * x) / M$1[3];
 	let res = {
 		mode: "cubehelix",
 		l,
-		s: l === 0 || l === 1 ? void 0 : Math.sqrt(x * x + y * y) / (M[4] * l * (1 - l))
+		s: l === 0 || l === 1 ? void 0 : Math.sqrt(x * x + y * y) / (M$1[4] * l * (1 - l))
 	};
 	if (res.s) res.h = Math.atan2(y, x) * radToDeg - 120;
 	if (alpha !== void 0) res.alpha = alpha;
@@ -823,9 +873,9 @@ var convertCubehelixToRgb = ({ h, s, l, alpha }) => {
 	let amp = s === void 0 ? 0 : s * l * (1 - l);
 	let cosh = Math.cos(h);
 	let sinh = Math.sin(h);
-	res.r = l + amp * (M[0] * cosh + M[1] * sinh);
-	res.g = l + amp * (M[2] * cosh + M[3] * sinh);
-	res.b = l + amp * (M[4] * cosh + M[5] * sinh);
+	res.r = l + amp * (M$1[0] * cosh + M$1[1] * sinh);
+	res.g = l + amp * (M$1[2] * cosh + M$1[3] * sinh);
+	res.b = l + amp * (M$1[4] * cosh + M$1[5] * sinh);
 	if (alpha !== void 0) res.alpha = alpha;
 	return res;
 };
@@ -933,7 +983,7 @@ var convertLchToLab = ({ l, c, h, alpha }, mode = "lab") => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz65/constants.js
-var k$4 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$3 = Math.pow(29, 3) / Math.pow(3, 3);
 var e$2 = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/constants.js
@@ -951,7 +1001,7 @@ Math.pow(29, 3) / Math.pow(3, 3);
 Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertLab65ToXyz65.js
-var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$4;
+var fn$1 = (v) => Math.pow(v, 3) > e$2 ? Math.pow(v, 3) : (116 * v - 16) / k$3;
 var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -973,7 +1023,7 @@ var convertLab65ToXyz65 = ({ l, a, b, alpha }) => {
 var convertLab65ToRgb = (lab) => convertXyz65ToRgb(convertLab65ToXyz65(lab));
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab65/convertXyz65ToLab65.js
-var f$1 = (value) => value > e$2 ? Math.cbrt(value) : (k$4 * value + 16) / 116;
+var f$1 = (value) => value > e$2 ? Math.cbrt(value) : (k$3 * value + 16) / 116;
 var convertXyz65ToLab65 = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -1835,11 +1885,11 @@ var definition$16 = {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/xyz50/constants.js
-var k$2 = Math.pow(29, 3) / Math.pow(3, 3);
+var k$1 = Math.pow(29, 3) / Math.pow(3, 3);
 var e = Math.pow(6, 3) / Math.pow(29, 3);
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertLabToXyz50.js
-var fn = (v) => Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$2;
+var fn = (v) => Math.pow(v, 3) > e ? Math.pow(v, 3) : (116 * v - 16) / k$1;
 var convertLabToXyz50 = ({ l, a, b, alpha }) => {
 	if (l === void 0) l = 0;
 	if (a === void 0) a = 0;
@@ -1888,7 +1938,7 @@ var convertRgbToXyz50 = (rgb) => {
 };
 //#endregion
 //#region ../../node_modules/.bun/culori@4.0.2/node_modules/culori/src/lab/convertXyz50ToLab.js
-var f = (value) => value > e ? Math.cbrt(value) : (k$2 * value + 16) / 116;
+var f = (value) => value > e ? Math.cbrt(value) : (k$1 * value + 16) / 116;
 var convertXyz50ToLab = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2094,7 +2144,7 @@ var u_fn$1 = (x, y, z) => 4 * x / (x + 15 * y + 3 * z);
 var v_fn$1 = (x, y, z) => 9 * y / (x + 15 * y + 3 * z);
 var un$1 = u_fn$1(D50.X, D50.Y, D50.Z);
 var vn$1 = v_fn$1(D50.X, D50.Y, D50.Z);
-var l_fn = (value) => value <= e ? k$2 * value : 116 * Math.cbrt(value) - 16;
+var l_fn = (value) => value <= e ? k$1 * value : 116 * Math.cbrt(value) - 16;
 var convertXyz50ToLuv = ({ x, y, z, alpha }) => {
 	if (x === void 0) x = 0;
 	if (y === void 0) y = 0;
@@ -2134,7 +2184,7 @@ var convertLuvToXyz50 = ({ l, u, v, alpha }) => {
 	if (v === void 0) v = 0;
 	let up = u / (13 * l) + un;
 	let vp = v / (13 * l) + vn;
-	let y = D50.Y * (l <= 8 ? l / k$2 : Math.pow((l + 16) / 116, 3));
+	let y = D50.Y * (l <= 8 ? l / k$1 : Math.pow((l + 16) / 116, 3));
 	let res = {
 		mode: "xyz50",
 		x: y * (9 * up) / (4 * vp),
@@ -3610,19 +3660,22 @@ var HttpAdapter = _HttpAdapter = class HttpAdapter {
 HttpAdapter = _HttpAdapter = __decorate([adapter_default], HttpAdapter);
 RegExp(`[a-z]`), RegExp(`[A-Z]`), RegExp(`[0-9]`), RegExp(`[!"#$%&'()*+,-./:;<=>?@[\\\\\\]^_\`{|}~]`);
 //#endregion
-//#region ../internals/dist/composable-CbnFLx66.js
-function D(e, t, n, r = { passive: !0 }) {
-	watch(e, (e, i, a) => {
-		e && (e.addEventListener(t, n, r), a(() => e.removeEventListener(t, n)));
+//#region ../internals/dist/composable-DPolUL3R.js
+function O(t, n, r, i = { passive: !0 }) {
+	watch(t, (a, o, s) => {
+		let c = v(t) ?? (a instanceof EventTarget ? a : null);
+		c && (c.addEventListener(n, r, i), s(() => c.removeEventListener(n, r, i)));
 	}, { immediate: !0 });
 }
-function k(e, t) {
+function A(e, t) {
+	if (C) return ref(t);
 	let n = `flux/${e}`, r = ref(i() ?? t);
 	function i() {
-		if (!(n in localStorage)) return null;
+		let e = localStorage.getItem(n);
+		if (e === null) return null;
 		try {
-			let e = JSON.parse(localStorage.getItem(n));
-			return Array.isArray(e) && e[0] === `DateTime` && (e = DateTime.fromISO(e[1])), e;
+			let t = JSON.parse(e);
+			return Array.isArray(t) && t[0] === `DateTime` && (t = DateTime.fromISO(t[1])), t;
 		} catch {
 			return null;
 		}
@@ -3632,21 +3685,29 @@ function k(e, t) {
 		DateTime.isDateTime(e) && (t = [`DateTime`, e.toISO({
 			includeOffset: !0,
 			extendedZone: !0
-		})]), localStorage.setItem(n, JSON.stringify(t));
+		})]);
+		try {
+			localStorage.setItem(n, JSON.stringify(t));
+		} catch {}
 	}), r;
 }
-function j(e) {
+function M(e) {
 	let t = ref(0), n = ref(0);
-	return e ||= ref(document), D(e, `scroll`, () => {
-		let r = unref(e);
-		r instanceof Document && (r = r.scrollingElement), t.value = r?.scrollLeft ?? 0, n.value = r?.scrollTop ?? 0;
-	}), {
+	if (C) return {
+		x: t,
+		y: n
+	};
+	let r = e ?? ref(document), i = () => {
+		let e = unref(r);
+		e instanceof Document && (e = e.scrollingElement), t.value = e?.scrollLeft ?? 0, n.value = e?.scrollTop ?? 0;
+	};
+	return O(r, `scroll`, i), watch(r, () => i(), { immediate: !0 }), {
 		x: t,
 		y: n
 	};
 }
 //#endregion
-//#region ../internals/dist/directive-CoRl44Fx.js
+//#region ../internals/dist/directive-Bti3pKwZ.js
 var i = class {
 	#e;
 	#t;
@@ -3742,7 +3803,7 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		let resizeTimer;
-		const isMenuCollapsed = k("application-menu-collapsed", true);
+		const isMenuCollapsed = A("application-menu-collapsed", true);
 		const matchedMenuRoutes = useNamedRoutes_default(toRef(() => __props.contextMenuName));
 		const route = useRoute_default();
 		const { lg, xl } = useBreakpoints();
@@ -3803,6 +3864,16 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 		function removeContext(id) {
 			contextStack.value = contextStack.value.filter((entry) => entry.id !== id);
 		}
+		function updateContext(id, info) {
+			const index = contextStack.value.findIndex((entry) => entry.id === id);
+			if (index === -1) return;
+			const stack = [...contextStack.value];
+			stack[index] = {
+				id,
+				...info
+			};
+			contextStack.value = stack;
+		}
 		watch(() => route.fullPath, () => {
 			viewIndex.value = totalLevels.value - 1;
 			if (!lg.value && !xl.value) isMenuCollapsed.value = true;
@@ -3830,7 +3901,8 @@ var FluxApplication_default = /* @__PURE__ */ defineComponent({
 			goToMain,
 			goToParent,
 			pushContext,
-			removeContext
+			removeContext,
+			updateContext
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", { class: normalizeClass(unref(Application_module_default).application) }, [
@@ -3885,11 +3957,7 @@ function useApplicationContextRegistration_default(info) {
 		});
 	});
 	watch(info, (next) => {
-		injection.removeContext(id);
-		injection.pushContext({
-			id,
-			...next
-		});
+		injection.updateContext(id, next);
 	});
 	onBeforeUnmount(() => {
 		injection.removeContext(id);
@@ -4018,13 +4086,12 @@ var ApplicationMenu_module_default = {
 	avatar: `avatar`,
 	applicationMenuContext: `application-menu-context`,
 	applicationMenuContextContent: `application-menu-context-content`,
-	applicationMenuContextPill: `application-menu-context-pill`,
-	applicationMenuContextPillContent: `application-menu-context-pill-content`,
 	applicationMenuPromo: `application-menu-promo`,
 	icon: `icon`,
 	applicationMenuPromoContent: `application-menu-promo-content`,
 	applicationMenuToggle: `application-menu-toggle`,
-	applicationMenuToggleIcon: `application-menu-toggle-icon`
+	applicationMenuToggleIcon: `application-menu-toggle-icon`,
+	applicationMenuContextPillContent: `application-menu-context-pill-content`
 };
 //#endregion
 //#region src/component/FluxApplicationMenu.vue?vue&type=script&setup=true&lang.ts
@@ -4354,7 +4421,7 @@ var FluxApplicationTop_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const slots = useSlots();
 		const { layout, showDesktopMenuToggle } = useApplicationInjection_default();
-		const { y } = j();
+		const { y } = M();
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("header", { class: normalizeClass(unref(y) > 1 ? unref(ApplicationTop_module_default).applicationTopScrolled : unref(ApplicationTop_module_default).applicationTop) }, [createElementVNode("div", { class: normalizeClass(unref(ApplicationTop_module_default).applicationTopBar) }, [
 				createVNode(FluxApplicationMenuToggle_default, { class: normalizeClass(!unref(showDesktopMenuToggle) && unref(ApplicationTop_module_default).applicationTopMenuToggleHidden) }, null, 8, ["class"]),