@flux-ui/application 3.0.0-next.61 → 3.0.0-next.63

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/application",
     "description": "Contains components to create applications with Flux UI.",
-    "version": "3.0.0-next.61",
+    "version": "3.0.0-next.63",
     "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.0.0-next.61",
-        "@flux-ui/internals": "3.0.0-next.61",
-        "@flux-ui/types": "3.0.0-next.61",
+        "@flux-ui/components": "3.0.0-next.63",
+        "@flux-ui/internals": "3.0.0-next.63",
+        "@flux-ui/types": "3.0.0-next.63",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
@@ -62,13 +62,13 @@
         "vue-router": "^5.0.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.24.0",
+        "@basmilius/vite-preset": "^3.25.0",
         "@types/node": "^25.6.0",
         "@vitejs/plugin-vue": "^6.0.6",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.99.0",
         "typescript": "^6.0.3",
         "vite": "^8.0.10",
-        "vue-tsc": "^3.2.7"
+        "vue-tsc": "^3.2.8"
     }
 }

package/src/component/FluxApplication.vue

@@ -19,8 +19,9 @@
 <script
     lang="ts"
     setup>
+    import { useBreakpoints } from '@flux-ui/components';
     import { useRemembered } from '@flux-ui/internals';
-    import { computed, onUnmounted, provide, ref, shallowRef, toRef, type VNode, watch } from 'vue';
+    import { computed, onMounted, onUnmounted, provide, ref, shallowRef, toRef, type VNode, watch } from 'vue';
     import { type FluxApplicationContextInfo, FluxApplicationInjectionKey, type FluxApplicationLayout } from '../data';
     import { useNamedRoutes, useRoute } from '../routing';
     import $style from '~flux/application/css/component/Application.module.scss';
@@ -39,14 +40,44 @@
         side(): VNode[];
     }>();
 
-    const route = useRoute();
-    const matchedMenuRoutes = useNamedRoutes(toRef(() => contextMenuName));
+    let resizeTimer: ReturnType<typeof setTimeout> | undefined;
 
     const isMenuCollapsed = useRemembered('application-menu-collapsed', true);
+    const matchedMenuRoutes = useNamedRoutes(toRef(() => contextMenuName));
+    const route = useRoute();
+    const {lg, xl} = useBreakpoints();
+
+    const contextStack = shallowRef<FluxApplicationContextInfo[]>([]);
     const layout = ref<FluxApplicationLayout>('default');
+    const viewIndex = ref(0);
 
+    const activeContext = computed(() => contextStack.value.at(-1));
+    const contexts = computed(() => contextStack.value);
     const totalLevels = computed(() => 1 + matchedMenuRoutes.value.length);
-    const viewIndex = ref(0);
+
+    onMounted(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+
+        window.addEventListener('resize', onResize, {passive: true});
+    });
+
+    onUnmounted(() => {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', onResize);
+        }
+
+        if (resizeTimer !== undefined) {
+            clearTimeout(resizeTimer);
+            resizeTimer = undefined;
+        }
+
+        if (typeof document !== 'undefined') {
+            delete document.documentElement.dataset.applicationMenuOpen;
+            delete document.documentElement.dataset.applicationResizing;
+        }
+    });
 
     function clampViewIndex(target: number): number {
         if (target < 0) {
@@ -79,9 +110,22 @@
         viewIndex.value = clampViewIndex(viewIndex.value + 1);
     }
 
-    const contextStack = shallowRef<FluxApplicationContextInfo[]>([]);
-    const contexts = computed(() => contextStack.value);
-    const activeContext = computed(() => contextStack.value.at(-1));
+    function onResize(): void {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        document.documentElement.dataset.applicationResizing = '';
+
+        if (resizeTimer !== undefined) {
+            clearTimeout(resizeTimer);
+        }
+
+        resizeTimer = setTimeout(() => {
+            delete document.documentElement.dataset.applicationResizing;
+            resizeTimer = undefined;
+        }, 150);
+    }
 
     function pushContext(info: FluxApplicationContextInfo): void {
         contextStack.value = [...contextStack.value, info];
@@ -91,25 +135,12 @@
         contextStack.value = contextStack.value.filter(entry => entry.id !== id);
     }
 
-    provide(FluxApplicationInjectionKey, {
-        activeContext,
-        contexts,
-        isMenuCollapsed,
-        layout,
-        showDesktopMenuToggle: toRef(() => showDesktopMenuToggle),
-        totalLevels,
-        viewIndex,
-        goToChild,
-        goToCurrent,
-        goToLevel,
-        goToMain,
-        goToParent,
-        pushContext,
-        removeContext
-    });
-
     watch(() => route.fullPath, () => {
         viewIndex.value = totalLevels.value - 1;
+
+        if (!lg.value && !xl.value) {
+            isMenuCollapsed.value = true;
+        }
     });
 
     watch(totalLevels, (next) => {
@@ -135,9 +166,20 @@
         }
     }, {immediate: true});
 
-    onUnmounted(() => {
-        if (typeof document !== 'undefined') {
-            delete document.documentElement.dataset.applicationMenuOpen;
-        }
+    provide(FluxApplicationInjectionKey, {
+        activeContext,
+        contexts,
+        isMenuCollapsed,
+        layout,
+        showDesktopMenuToggle: toRef(() => showDesktopMenuToggle),
+        totalLevels,
+        viewIndex,
+        goToChild,
+        goToCurrent,
+        goToLevel,
+        goToMain,
+        goToParent,
+        pushContext,
+        removeContext
     });
 </script>

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

@@ -10,11 +10,6 @@
     --application-top-height: 66px;
 }
 
-[dark] {
-    --application-menu-surface: color-mix(in srgb, var(--gray-25), black 25%);
-    --application-menu-surface-stroke: var(--gray-100);
-}
-
 .application {
     position: relative;
     display: flex;
@@ -47,7 +42,7 @@
     height: 100dvh;
     padding: 0;
     border: 0;
-    background: rgb(from var(--gray-200) r g b / .5);
+    background: var(--overlay);
     backdrop-filter: blur(3px) saturate(180%);
     transition: var(--application-duration) var(--swift-out);
     transition-property: background, backdrop-filter, opacity;
@@ -86,3 +81,8 @@
         overscroll-behavior: contain;
     }
 }
+
+html[data-application-resizing] .application,
+html[data-application-resizing] .applicationMenuBackdrop {
+    transition: none;
+}

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

@@ -90,41 +90,6 @@
     overflow-y: auto;
 }
 
-.applicationMenuPageIndicator {
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 6px;
-    justify-content: center;
-    align-items: center;
-    padding: 9px 12px;
-    background: var(--application-menu-surface);
-    z-index: 1;
-}
-
-.applicationMenuPageIndicatorDot {
-    height: 6px;
-    width: 6px;
-    padding: 0;
-    cursor: pointer;
-    background: transparent;
-    border: 1.5px solid var(--application-menu-surface-stroke);
-    border-radius: 50%;
-    transition: 200ms var(--swift-out);
-    transition-property: background, border-color, transform;
-
-    @include mixin.hover {
-        border-color: var(--foreground-secondary);
-        transform: scale(1.2);
-    }
-
-    @include mixin.focus-ring;
-}
-
-.applicationMenuPageIndicatorDotActive {
-    background: var(--foreground-prominent);
-    border-color: var(--foreground-prominent);
-}
-
 .applicationMenuPanelEnterActive,
 .applicationMenuPanelEnterFrom,
 .applicationMenuPanelLeaveActive,
@@ -404,3 +369,16 @@
         translate: -100% 0;
     }
 }
+
+html[data-application-resizing] {
+    .applicationMenu,
+    .applicationMenuFooter,
+    .applicationMenuFooter::before,
+    .applicationMenuHeader,
+    .applicationMenuTrack,
+    .applicationMenu :local(.menuItemLabel),
+    .applicationMenuContextPillContent :global(strong),
+    .applicationMenuContextPillContent :global(span) {
+        transition: none;
+    }
+}