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

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.11",
     "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.11",
+        "@flux-ui/internals": "3.2.0-beta.11",
+        "@flux-ui/types": "3.2.0-beta.11",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
@@ -62,13 +62,13 @@
         "vue-router": "^5.1.0"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.45.0",
-        "@types/node": "^26.0.1",
+        "@basmilius/vite-preset": "^3.50.0",
+        "@types/node": "^26.1.0",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.1.0",
-        "vue-tsc": "^3.3.5"
+        "vite": "^8.1.3",
+        "vue-tsc": "^3.3.6"
     }
 }

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/FluxApplicationMenuContextStack.vue

@@ -19,7 +19,7 @@
     lang="ts"
     setup>
     import { FluxMenu } from '@flux-ui/components';
-    import { defineComponent, h, provide, ref, toRef, type VNode } from 'vue';
+    import { computed, defineComponent, h, provide, toRef, type VNode } from 'vue';
     import { RouterView, viewDepthKey } from 'vue-router';
     import { useNamedRoutes } from '../routing';
     import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
@@ -45,7 +45,7 @@
             }
         },
         setup(props): () => VNode {
-            provide(viewDepthKey, ref(props.depth));
+            provide(viewDepthKey, computed(() => props.depth));
 
             return () => h(RouterView, {name: props.viewName});
         }

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/FluxApplicationMenuToggle.vue

@@ -1,6 +1,8 @@
 <template>
     <FluxMenuItem
         :class="$style.applicationMenuToggle"
+        aria-label="Toggle menu"
+        :aria-expanded="!isMenuCollapsed"
         @click="isMenuCollapsed = !isMenuCollapsed">
         <template #before>
             <svg

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) {
@@ -70,11 +71,16 @@
     }
 
     > :local(.table) {
-        :local(.tableCell):first-child :local(.tableCellContent) {
+        :local(.tableCell):not(:local(.tableBar)):not(:local(.tableGroup)):not(:local(.isRaw)):first-child {
             padding-left: 21px;
         }
 
-        :local(.tableCell):last-child :local(.tableCellContent) {
+        :local(.tableCell):not(:local(.tableBar)):not(:local(.tableGroup)):not(:local(.isRaw)):last-child {
+            padding-right: 21px;
+        }
+
+        :is(:local(.tableBarContent), :local(.tableGroupContent)) {
+            padding-left: 21px;
             padding-right: 21px;
         }
     }
@@ -108,11 +114,16 @@
         }
 
         > .table {
-            .tableCell:first-child .tableCellContent {
+            .tableCell:not(.tableBar):not(.tableGroup):not(.isRaw):first-child {
                 padding-left: 12px;
             }
 
-            .tableCell:last-child .tableCellContent {
+            .tableCell:not(.tableBar):not(.tableGroup):not(.isRaw):last-child {
+                padding-right: 12px;
+            }
+
+            :is(.tableBarContent, .tableGroupContent) {
+                padding-left: 12px;
                 padding-right: 12px;
             }
         }

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;
     }
 }