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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/application",
     "description": "Contains components to create applications with Flux UI.",
-    "version": "3.2.0-beta.1",
+    "version": "3.2.0-beta.3",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -51,9 +51,9 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@flux-ui/components": "3.2.0-beta.1",
-        "@flux-ui/internals": "3.2.0-beta.1",
-        "@flux-ui/types": "3.2.0-beta.1",
+        "@flux-ui/components": "3.2.0-beta.3",
+        "@flux-ui/internals": "3.2.0-beta.3",
+        "@flux-ui/types": "3.2.0-beta.3",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {

package/src/component/FluxApplicationMenuContext.vue

@@ -12,8 +12,10 @@
             @click="onBack()"/>
 
         <div :class="$style.applicationMenuContextContent">
-            <strong>{{ title }}</strong>
-            <span v-if="subtitle">{{ subtitle }}</span>
+            <div :class="$style.applicationMenuContextContentInner">
+                <strong>{{ title }}</strong>
+                <span v-if="subtitle">{{ subtitle }}</span>
+            </div>
         </div>
     </div>
 </template>

package/src/component/FluxApplicationMenuContextSwitcher.vue

@@ -0,0 +1,29 @@
+<template>
+    <FluxFadeTransition>
+        <FluxMenuGroup
+            v-if="totalLevels > 1"
+            :key="totalLevels"
+            is-horizontal>
+            <FluxMenuItem
+                icon-leading="grid-2"
+                :is-highlighted="0 === viewIndex"
+                @click="goToLevel(0)"/>
+
+            <FluxMenuItem
+                v-for="(context, index) of contexts"
+                :key="context.id"
+                :icon-leading="context.icon"
+                :is-highlighted="index + 1 === viewIndex"
+                @click="goToLevel(index + 1)"/>
+        </FluxMenuGroup>
+    </FluxFadeTransition>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxFadeTransition, FluxMenuGroup, FluxMenuItem } from '@flux-ui/components';
+    import { useApplicationMenu } from '../composable';
+
+    const {contexts, totalLevels, viewIndex, goToLevel} = useApplicationMenu();
+</script>

package/src/component/index.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/src/css/component/ApplicationContent.module.scss

@@ -55,6 +55,7 @@
     > :is(:local(.calendar), :local(.table)) {
         max-height: 100%;
         flex-grow: 1;
+        background: var(--surface);
     }
 
     > :local(.calendar) {

package/src/css/component/ApplicationMenu.module.scss

@@ -225,19 +225,26 @@
     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);
 }
 
 .applicationMenuContextContent {
-    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;
+}
+
+.applicationMenuContextContentInner {
+    display: flex;
     flex-flow: column;
+    min-height: 0;
+    white-space: nowrap;
+    overflow: hidden;
 
     :global(strong) {
         color: var(--foreground-prominent);
@@ -307,7 +314,7 @@
         width: var(--application-menu-width-collapsed);
 
         :local(.menuItemLabel) {
-            filter: blur(6px);
+            filter: blur(3px);
             opacity: 0;
             translate: -12px 0;
         }
@@ -315,10 +322,6 @@
         :local(.menuSubHeader) {
             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;
@@ -326,17 +329,17 @@
             opacity: 0;
         }
 
-        .applicationMenuPromo,
-        .applicationMenuContext {
+        .applicationMenuPromo {
             opacity: 0;
             pointer-events: none;
         }
 
-        .applicationMenuContextPillContent :global(strong),
-        .applicationMenuContextPillContent :global(span) {
-            filter: blur(6px);
+        .applicationMenuContextContent {
+            grid-template-rows: 0fr;
+            filter: blur(3px);
             opacity: 0;
             translate: -12px 0;
+            pointer-events: none;
         }
     }
 }
@@ -365,8 +368,7 @@ html[data-application-resizing] {
     .applicationMenuPromo,
     .applicationMenu :local(.menuSubHeader),
     .applicationMenu :local(.menuItemLabel),
-    .applicationMenuContextPillContent :global(strong),
-    .applicationMenuContextPillContent :global(span) {
+    .applicationMenuContextContent {
         transition: none;
     }
 }