@flux-ui/application 3.0.0-next.75 → 3.1.0

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.75",
+    "version": "3.1.0",
     "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.75",
-        "@flux-ui/internals": "3.0.0-next.75",
-        "@flux-ui/types": "3.0.0-next.75",
+        "@flux-ui/components": "3.1.0",
+        "@flux-ui/internals": "3.1.0",
+        "@flux-ui/types": "3.1.0",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {

package/src/component/FluxApplication.vue

@@ -135,6 +135,18 @@
         contextStack.value = contextStack.value.filter(entry => entry.id !== id);
     }
 
+    function updateContext(id: symbol, info: Omit<FluxApplicationContextInfo, 'id'>): void {
+        const index = contextStack.value.findIndex(entry => entry.id === id);
+
+        if (index === -1) {
+            return;
+        }
+
+        const stack = [...contextStack.value];
+        stack[index] = {id, ...info};
+        contextStack.value = stack;
+    }
+
     watch(() => route.fullPath, () => {
         viewIndex.value = totalLevels.value - 1;
 
@@ -180,6 +192,7 @@
         goToMain,
         goToParent,
         pushContext,
-        removeContext
+        removeContext,
+        updateContext
     });
 </script>

package/src/composable/useApplicationContextRegistration.ts

@@ -15,8 +15,7 @@ export default function (info: () => Omit<FluxApplicationContextInfo, 'id'>): vo
     });
 
     watch(info, next => {
-        injection.removeContext(id);
-        injection.pushContext({id, ...next});
+        injection.updateContext(id, next);
     });
 
     onBeforeUnmount(() => {

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

@@ -45,7 +45,7 @@
     background: var(--overlay);
     backdrop-filter: blur(3px) saturate(180%);
     transition: var(--application-duration) var(--swift-out);
-    transition-property: background, backdrop-filter, opacity;
+    transition-property: background, backdrop-filter, opacity, visibility;
     z-index: 1900;
 }
 
@@ -71,6 +71,7 @@
     }
 
     .application:has(> .applicationMenu[data-collapsed]) .applicationMenuBackdrop {
+        visibility: hidden;
         pointer-events: none;
         opacity: 0;
     }

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

@@ -230,62 +230,6 @@
     }
 }
 
-.applicationMenuContextPill {
-    position: relative;
-    display: flex;
-    flex-flow: row nowrap;
-    gap: 9px;
-    align-items: center;
-    margin: -3px -6px 6px;
-    padding: 9px 12px;
-    cursor: pointer;
-    color: var(--foreground-secondary);
-    background: transparent;
-    border: 1px solid var(--application-menu-surface-stroke);
-    border-radius: var(--radius);
-    transition: background 200ms var(--swift-out);
-
-    @include mixin.hover {
-        background: var(--gray-200);
-    }
-
-    &:active {
-        background: var(--gray-300);
-    }
-
-    @include mixin.focus-ring;
-}
-
-.applicationMenuContextPillContent {
-    display: flex;
-    flex: 1 1 auto;
-    flex-flow: column;
-    min-width: 0;
-
-    :global(strong) {
-        font-weight: 500;
-        font-size: 14px;
-        line-height: 1.2;
-        white-space: nowrap;
-        overflow: hidden;
-        color: var(--foreground-prominent);
-        text-overflow: ellipsis;
-        transition: var(--application-duration) var(--swift-out);
-        transition-property: filter, opacity, translate;
-    }
-
-    :global(span) {
-        font-size: 12px;
-        line-height: 1.2;
-        white-space: nowrap;
-        overflow: hidden;
-        color: var(--foreground-secondary);
-        text-overflow: ellipsis;
-        transition: var(--application-duration) var(--swift-out);
-        transition-property: filter, opacity, translate;
-    }
-}
-
 .applicationMenuPromo {
     display: flex;
     padding: 12px;

package/src/data/index.ts

@@ -29,6 +29,7 @@ export type FluxApplicationInjection = {
     goToParent(): void;
     pushContext(info: FluxApplicationContextInfo): void;
     removeContext(id: symbol): void;
+    updateContext(id: symbol, info: Omit<FluxApplicationContextInfo, 'id'>): void;
 };
 
 export type FluxApplicationLayout =