@flux-ui/application 3.2.0-beta.2 → 3.2.0-beta.4

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
@@ -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",
@@ -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