@flux-ui/application 3.2.0-beta.1 → 3.2.0-beta.3

package/dist/component/FluxApplicationMenuContextSwitcher.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/component/index.d.ts

@@ -5,6 +5,7 @@ export { default as FluxApplicationMenu } from './FluxApplicationMenu.vue';
 export { default as FluxApplicationMenuAccount } from './FluxApplicationMenuAccount.vue';
 export { default as FluxApplicationMenuContext } from './FluxApplicationMenuContext.vue';
 export { default as FluxApplicationMenuContextStack } from './FluxApplicationMenuContextStack.vue';
+export { default as FluxApplicationMenuContextSwitcher } from './FluxApplicationMenuContextSwitcher.vue';
 export { default as FluxApplicationMenuPromo } from './FluxApplicationMenuPromo.vue';
 export { default as FluxApplicationMenuToggle } from './FluxApplicationMenuToggle.vue';
 export { default as FluxApplicationSection } from './FluxApplicationSection.vue';

package/dist/index.css

@@ -1,4 +1,4 @@
-@charset "UTF-8";:root {
+:root {
   --application-duration: 360ms;
   --application-menu-surface: var(--gray-100);
   --application-menu-surface-stroke: var(--gray-200);
@@ -119,6 +119,7 @@ html[data-application-resizing] .application-menu-backdrop {
 .application-content-full > :is(.calendar, .table) {
   max-height: 100%;
   flex-grow: 1;
+  background: var(--surface);
 }
 .application-content-full > .calendar {
   border-top: 0;
@@ -182,8 +183,7 @@ html[data-application-resizing] .application-menu-backdrop {
   margin: 0;
   color: var(--foreground-secondary);
   font-size: 18px;
-}
-.application-menu {
+}.application-menu {
   position: fixed;
   display: flex;
   top: 0;
@@ -401,24 +401,31 @@ html[data-application-resizing] .application-menu-backdrop {
   margin-top: -12px;
   margin-left: -12px;
   margin-right: -12px;
-  padding: 15px;
+  padding: 15px 16px;
   flex-flow: row nowrap;
   gap: 15px;
-  border: 1px solid var(--application-menu-surface-stroke);
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
+  border-bottom: 1px solid var(--application-menu-surface-stroke);
 }
 
 .application-menu-context-content {
-  display: flex;
+  display: grid;
   align-self: center;
+  grid-template-rows: 1fr;
+  transition: var(--application-duration) var(--swift-out);
+  transition-property: filter, grid-template-rows, opacity, translate;
+}
+
+.application-menu-context-content-inner {
+  display: flex;
   flex-flow: column;
+  min-height: 0;
+  white-space: nowrap;
+  overflow: hidden;
 }
-.application-menu-context-content strong {
+.application-menu-context-content-inner strong {
   color: var(--foreground-prominent);
 }
-.application-menu-context-content span {
+.application-menu-context-content-inner span {
   color: var(--foreground-secondary);
   font-size: 14px;
 }
@@ -479,33 +486,29 @@ html[data-application-resizing] .application-menu-backdrop {
     width: var(--application-menu-width-collapsed);
   }
   .application-menu[data-collapsed][data-collapsible] .menu-item-label {
-    filter: blur(6px);
+    filter: blur(3px);
     opacity: 0;
     translate: -12px 0;
   }
   .application-menu[data-collapsed][data-collapsible] .menu-sub-header {
     display: none;
     height: 0;
-    /* Keep the sub-header's negative margins (sum -12px = one panel gap) while
-       it is a zero-height flex item, so the space it leaves equals the single
-       gap that remains after `display: none` removes it — avoiding a jump of
-       the group below at the end of the collapse. */
     margin-top: -9px;
     margin-bottom: -3px;
     padding-top: 0;
     padding-bottom: 0;
     opacity: 0;
   }
-  .application-menu[data-collapsed][data-collapsible] .application-menu-promo,
-  .application-menu[data-collapsed][data-collapsible] .application-menu-context {
+  .application-menu[data-collapsed][data-collapsible] .application-menu-promo {
     opacity: 0;
     pointer-events: none;
   }
-  .application-menu[data-collapsed][data-collapsible] .application-menu-context-pill-content strong,
-  .application-menu[data-collapsed][data-collapsible] .application-menu-context-pill-content span {
-    filter: blur(6px);
+  .application-menu[data-collapsed][data-collapsible] .application-menu-context-content {
+    grid-template-rows: 0fr;
+    filter: blur(3px);
     opacity: 0;
     translate: -12px 0;
+    pointer-events: none;
   }
 }
 @media (max-width: 1023.98px) {
@@ -529,8 +532,7 @@ html[data-application-resizing] .application-menu-track,
 html[data-application-resizing] .application-menu-promo,
 html[data-application-resizing] .application-menu .menu-sub-header,
 html[data-application-resizing] .application-menu .menu-item-label,
-html[data-application-resizing] .application-menu-context-pill-content strong,
-html[data-application-resizing] .application-menu-context-pill-content span {
+html[data-application-resizing] .application-menu-context-content {
   transition: none;
 }.application-section {
   display: flex;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, customRef, defineComponent, h, inject, markRaw, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, toRef, unref, useSlots, watch, withCtx, withDirectives } from "vue";
-import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar, useBreakpoints } from "@flux-ui/components";
+import { FluxFadeTransition, FluxFlyout, FluxIcon, FluxMenu, FluxMenuGroup, FluxMenuItem, FluxPane, FluxRouteTransition, FluxSecondaryButton, FluxSpacer, FluxTabBar, useBreakpoints } from "@flux-ui/components";
 import { DateTime } from "luxon";
 import { RouterView, matchedRouteKey, useRoute, viewDepthKey } from "vue-router";
 //#region ../../node_modules/.bun/@basmilius+utils@3.45.0+f2ed1ec6a4c7f7fd/node_modules/@basmilius/utils/dist/index.mjs
@@ -833,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$1 = [
+var M = [
 	-.14861,
 	1.78277,
 	-.29227,
@@ -845,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$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 DE = M[3] * M[4];
+var BE = M[1] * M[4];
+var BCAD = M[1] * M[2] - M[0] * M[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$1[4] * (g - l) - M$1[2] * x) / M$1[3];
+	let y = (M[4] * (g - l) - M[2] * x) / M[3];
 	let res = {
 		mode: "cubehelix",
 		l,
-		s: l === 0 || l === 1 ? void 0 : Math.sqrt(x * x + y * y) / (M$1[4] * l * (1 - l))
+		s: l === 0 || l === 1 ? void 0 : Math.sqrt(x * x + y * y) / (M[4] * l * (1 - l))
 	};
 	if (res.s) res.h = Math.atan2(y, x) * radToDeg - 120;
 	if (alpha !== void 0) res.alpha = alpha;
@@ -873,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$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);
+	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);
 	if (alpha !== void 0) res.alpha = alpha;
 	return res;
 };
@@ -3660,7 +3660,7 @@ 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-ByAxh3HA.js
+//#region ../internals/dist/composable-6jMsSnBV.js
 function O(t, n, r, i = { passive: !0 }) {
 	watch(t, (a, o, s) => {
 		let c = v(t) ?? (a instanceof EventTarget ? a : null);
@@ -3691,7 +3691,7 @@ function A(e, t) {
 		} catch {}
 	}), r;
 }
-function M(e) {
+function j(e) {
 	let t = ref(0), n = ref(0);
 	if (C) return {
 		x: t,
@@ -4096,12 +4096,12 @@ var ApplicationMenu_module_default = {
 	avatar: `avatar`,
 	applicationMenuContext: `application-menu-context`,
 	applicationMenuContextContent: `application-menu-context-content`,
+	applicationMenuContextContentInner: `application-menu-context-content-inner`,
 	applicationMenuPromo: `application-menu-promo`,
 	icon: `icon`,
 	applicationMenuPromoContent: `application-menu-promo-content`,
 	applicationMenuToggle: `application-menu-toggle`,
-	applicationMenuToggleIcon: `application-menu-toggle-icon`,
-	applicationMenuContextPillContent: `application-menu-context-pill-content`
+	applicationMenuToggleIcon: `application-menu-toggle-icon`
 };
 //#endregion
 //#region src/component/FluxApplicationMenu.vue?vue&type=script&setup=true&lang.ts
@@ -4255,7 +4255,7 @@ var FluxApplicationMenuContext_default = /* @__PURE__ */ defineComponent({
 				"target",
 				"to",
 				"type"
-			]), createElementVNode("div", { class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuContextContent) }, [createElementVNode("strong", null, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)], 2);
+			]), createElementVNode("div", { class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuContextContent) }, [createElementVNode("div", { class: normalizeClass(unref(ApplicationMenu_module_default).applicationMenuContextContentInner) }, [createElementVNode("strong", null, toDisplayString(__props.title), 1), __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)], 2)], 2)], 2);
 		};
 	}
 });
@@ -4313,6 +4313,41 @@ var FluxApplicationMenuContextStack_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/component/FluxApplicationMenuContextSwitcher.vue
+var FluxApplicationMenuContextSwitcher_default = /* @__PURE__ */ defineComponent({
+	__name: "FluxApplicationMenuContextSwitcher",
+	setup(__props) {
+		const { contexts, totalLevels, viewIndex, goToLevel } = useApplicationMenu_default();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(FluxFadeTransition), null, {
+				default: withCtx(() => [unref(totalLevels) > 1 ? (openBlock(), createBlock(unref(FluxMenuGroup), {
+					key: unref(totalLevels),
+					"is-horizontal": ""
+				}, {
+					default: withCtx(() => [createVNode(unref(FluxMenuItem), {
+						"icon-leading": "grid-2",
+						"is-highlighted": 0 === unref(viewIndex),
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(goToLevel)(0))
+					}, null, 8, ["is-highlighted"]), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(contexts), (context, index) => {
+						return openBlock(), createBlock(unref(FluxMenuItem), {
+							key: context.id,
+							"icon-leading": context.icon,
+							"is-highlighted": index + 1 === unref(viewIndex),
+							onClick: ($event) => unref(goToLevel)(index + 1)
+						}, null, 8, [
+							"icon-leading",
+							"is-highlighted",
+							"onClick"
+						]);
+					}), 128))]),
+					_: 1
+				})) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+});
+//#endregion
 //#region src/component/FluxApplicationMenuPromo.vue
 var FluxApplicationMenuPromo_default = /* @__PURE__ */ defineComponent({
 	__name: "FluxApplicationMenuPromo",
@@ -4432,7 +4467,7 @@ var FluxApplicationTop_default = /* @__PURE__ */ defineComponent({
 	setup(__props) {
 		const slots = useSlots();
 		const { layout, showDesktopMenuToggle } = useApplicationInjection_default();
-		const { y } = M();
+		const { y } = j();
 		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"]),
@@ -4467,6 +4502,6 @@ var FluxApplicationTop_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-export { FluxApplication_default as FluxApplication, FluxApplicationContent_default as FluxApplicationContent, FluxApplicationHero_default as FluxApplicationHero, FluxApplicationInjectionKey, FluxApplicationMenu_default as FluxApplicationMenu, FluxApplicationMenuAccount_default as FluxApplicationMenuAccount, FluxApplicationMenuContext_default as FluxApplicationMenuContext, FluxApplicationMenuContextStack_default as FluxApplicationMenuContextStack, FluxApplicationMenuPromo_default as FluxApplicationMenuPromo, FluxApplicationMenuToggle_default as FluxApplicationMenuToggle, FluxApplicationSection_default as FluxApplicationSection, FluxApplicationSide_default as FluxApplicationSide, FluxApplicationTop_default as FluxApplicationTop, useApplicationContextMenu_default as useApplicationContextMenu, useApplicationContextRegistration_default as useApplicationContextRegistration, useApplicationInjection_default as useApplicationInjection, useApplicationMenu_default as useApplicationMenu };
+export { FluxApplication_default as FluxApplication, FluxApplicationContent_default as FluxApplicationContent, FluxApplicationHero_default as FluxApplicationHero, FluxApplicationInjectionKey, FluxApplicationMenu_default as FluxApplicationMenu, FluxApplicationMenuAccount_default as FluxApplicationMenuAccount, FluxApplicationMenuContext_default as FluxApplicationMenuContext, FluxApplicationMenuContextStack_default as FluxApplicationMenuContextStack, FluxApplicationMenuContextSwitcher_default as FluxApplicationMenuContextSwitcher, FluxApplicationMenuPromo_default as FluxApplicationMenuPromo, FluxApplicationMenuToggle_default as FluxApplicationMenuToggle, FluxApplicationSection_default as FluxApplicationSection, FluxApplicationSide_default as FluxApplicationSide, FluxApplicationTop_default as FluxApplicationTop, useApplicationContextMenu_default as useApplicationContextMenu, useApplicationContextRegistration_default as useApplicationContextRegistration, useApplicationInjection_default as useApplicationInjection, useApplicationMenu_default as useApplicationMenu };
 
 //# sourceMappingURL=index.js.map