@flux-ui/application 3.0.0-next.58 → 3.0.0-next.60

package/dist/routing/index.d.ts

@@ -0,0 +1,2 @@
+export { default as useNamedRoutes } from './useNamedRoutes';
+export { default as useRoute } from './useRoute';

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.58",
+    "version": "3.0.0-next.60",
     "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.58",
-        "@flux-ui/internals": "3.0.0-next.58",
-        "@flux-ui/types": "3.0.0-next.58",
+        "@flux-ui/components": "3.0.0-next.60",
+        "@flux-ui/internals": "3.0.0-next.60",
+        "@flux-ui/types": "3.0.0-next.60",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
@@ -62,7 +62,7 @@
         "vue-router": "^5.0.6"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.21.0",
+        "@basmilius/vite-preset": "^3.24.0",
         "@types/node": "^25.6.0",
         "@vitejs/plugin-vue": "^6.0.6",
         "@vue/tsconfig": "^0.9.1",

package/src/component/FluxApplication.vue

@@ -22,9 +22,8 @@
     import { useRemembered } from '@flux-ui/internals';
     import { computed, onUnmounted, provide, ref, shallowRef, toRef, type VNode, watch } from 'vue';
     import { type FluxApplicationContextInfo, FluxApplicationInjectionKey, type FluxApplicationLayout } from '../data';
-    import useNamedRoutes from '../routing/useNamedRoutes';
-    import useRoute from '../routing/useRoute';
-    import $style from '../css/component/Application.module.scss';
+    import { useNamedRoutes, useRoute } from '../routing';
+    import $style from '~flux/application/css/component/Application.module.scss';
 
     const {
         contextMenuName = 'menu',

package/src/component/FluxApplicationContent.vue

@@ -16,10 +16,10 @@
     lang="ts"
     setup>
     import clsx from 'clsx';
+    import { watch } from 'vue';
     import { useApplicationInjection } from '../composable';
     import type { FluxApplicationLayout } from '../data';
-    import $style from '../css/component/ApplicationContent.module.scss';
-    import { watch } from 'vue';
+    import $style from '~flux/application/css/component/ApplicationContent.module.scss';
 
     const {
         layout = 'default'

package/src/component/FluxApplicationHero.vue

@@ -24,7 +24,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '../css/component/ApplicationHero.module.scss';
+    import $style from '~flux/application/css/component/ApplicationHero.module.scss';
 
     defineProps<{
         readonly title: string;

package/src/component/FluxApplicationMenu.vue

@@ -5,6 +5,7 @@
         :data-collapsible="showDesktopMenuToggle ? '' : undefined">
         <FluxMenu
             v-if="slots.header"
+            v-height-transition
             :class="$style.applicationMenuHeader">
             <slot name="header"/>
         </FluxMenu>
@@ -21,45 +22,24 @@
             </div>
         </div>
 
-        <nav
-            v-if="showPageIndicator && totalLevels > 1"
-            :class="$style.applicationMenuPageIndicator"
-            aria-label="Menu levels">
-            <button
-                v-for="level in totalLevels"
-                :key="level - 1"
-                type="button"
-                :class="[
-                    $style.applicationMenuPageIndicatorDot,
-                    (level - 1) === viewIndex && $style.applicationMenuPageIndicatorDotActive
-                ]"
-                :aria-current="(level - 1) === viewIndex ? 'true' : undefined"
-                :aria-label="(level - 1) === 0 ? 'Hoofdmenu' : `Niveau ${level - 1}`"
-                @click="goToLevel(level - 1)"/>
-        </nav>
-
-        <FluxMenu
-            v-if="slots.footer"
-            :class="$style.applicationMenuFooter"
-            :data-hidden="!isMainMenuVisible ? '' : undefined">
-            <slot name="footer"/>
-        </FluxMenu>
+        <FluxFadeTransition>
+            <FluxMenu
+                v-if="slots.footer && isMainMenuVisible"
+                :class="$style.applicationMenuFooter">
+                <slot name="footer"/>
+            </FluxMenu>
+        </FluxFadeTransition>
     </aside>
 </template>
 
 <script
     lang="ts"
     setup>
-    import { FluxMenu } from '@flux-ui/components';
-    import { type VNode } from 'vue';
+    import { FluxFadeTransition, FluxMenu } from '@flux-ui/components';
+    import { vHeightTransition } from '@flux-ui/internals';
+    import type { VNode } from 'vue';
     import { useApplicationInjection, useApplicationMenu } from '../composable';
-    import $style from '../css/component/ApplicationMenu.module.scss';
-
-    const {
-        showPageIndicator = true
-    } = defineProps<{
-        readonly showPageIndicator?: boolean;
-    }>();
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     const slots = defineSlots<{
         default(): VNode;
@@ -69,5 +49,5 @@
     }>();
 
     const {isMenuCollapsed, showDesktopMenuToggle} = useApplicationInjection();
-    const {goToLevel, isMainMenuVisible, totalLevels, viewIndex} = useApplicationMenu();
+    const {isMainMenuVisible, viewIndex} = useApplicationMenu();
 </script>

package/src/component/FluxApplicationMenuAccount.vue

@@ -31,7 +31,7 @@
     import { FluxFlyout, FluxMenuItem, FluxPane } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
     import type { VNode } from 'vue';
-    import $style from '../css/component/ApplicationMenu.module.scss';
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxApplicationMenuContext.vue

@@ -22,12 +22,12 @@
     lang="ts"
     setup>
     import { FluxSecondaryButton } from '@flux-ui/components';
-    import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { computed, inject } from 'vue';
     import { matchedRouteKey } from 'vue-router';
+    import { useApplicationContextRegistration } from '../composable';
     import { FluxApplicationInjectionKey } from '../data';
-    import useApplicationContextRegistration from '../composable/useApplicationContextRegistration';
-    import $style from '../css/component/ApplicationMenu.module.scss';
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     const props = defineProps<{
         readonly subtitle?: string;
@@ -38,6 +38,7 @@
         readonly target?: string;
         readonly to?: FluxTo;
         readonly entryTo?: FluxTo;
+        readonly icon?: FluxIconName;
         readonly type?: FluxPressableType;
     }>();
 
@@ -73,6 +74,7 @@
         to: props.to,
         entryTo: props.entryTo ?? autoEntryTo.value,
         href: props.href,
+        icon: props.icon,
         type: props.type
     }));
 </script>

package/src/component/FluxApplicationMenuContextStack.vue

@@ -21,8 +21,8 @@
     import { FluxMenu } from '@flux-ui/components';
     import { defineComponent, h, provide, ref, toRef, type VNode } from 'vue';
     import { RouterView, viewDepthKey } from 'vue-router';
-    import useNamedRoutes from '../routing/useNamedRoutes';
-    import $style from '../css/component/ApplicationMenu.module.scss';
+    import { useNamedRoutes } from '../routing';
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     const {
         name = 'menu'

package/src/component/FluxApplicationMenuPromo.vue

@@ -15,7 +15,7 @@
     setup>
     import { FluxIcon } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
-    import $style from '../css/component/ApplicationMenu.module.scss';
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/component/FluxApplicationMenuToggle.vue

@@ -24,7 +24,7 @@
     setup>
     import { FluxMenuItem } from '@flux-ui/components';
     import { useApplicationInjection } from '../composable';
-    import $style from '../css/component/ApplicationMenu.module.scss';
+    import $style from '~flux/application/css/component/ApplicationMenu.module.scss';
 
     const {isMenuCollapsed} = useApplicationInjection();
 </script>

package/src/component/FluxApplicationSection.vue

@@ -26,7 +26,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '../css/component/ApplicationSection.module.scss';
+    import $style from '~flux/application/css/component/ApplicationSection.module.scss';
 
     defineProps<{
         readonly title?: string;

package/src/component/FluxApplicationSide.vue

@@ -8,7 +8,7 @@
     lang="ts"
     setup>
     import type { VNode } from 'vue';
-    import $style from '../css/component/ApplicationSide.module.scss';
+    import $style from '~flux/application/css/component/ApplicationSide.module.scss';
 
     defineSlots<{
         default(): VNode;

package/src/component/FluxApplicationTop.vue

@@ -56,7 +56,7 @@
     import type { VNode } from 'vue';
     import { useApplicationInjection } from '../composable';
     import FluxApplicationMenuToggle from './FluxApplicationMenuToggle.vue';
-    import $style from '../css/component/ApplicationTop.module.scss';
+    import $style from '~flux/application/css/component/ApplicationTop.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;

package/src/composable/index.ts

@@ -1,3 +1,4 @@
 export { default as useApplicationContextMenu } from './useApplicationContextMenu';
+export { default as useApplicationContextRegistration } from './useApplicationContextRegistration';
 export { default as useApplicationInjection } from './useApplicationInjection';
 export { default as useApplicationMenu } from './useApplicationMenu';

package/src/composable/useApplicationContextMenu.ts

@@ -1,5 +1,5 @@
 import { computed, type ComputedRef, toRef } from 'vue';
-import useNamedRoutes from '../routing/useNamedRoutes';
+import { useNamedRoutes } from '../routing';
 
 export default function (name: string = 'menu'): UseApplicationContextMenu {
     const matches = useNamedRoutes(toRef(() => name));

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 :root {
     --application-duration: 360ms;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .applicationContent {
     position: relative;

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

@@ -13,6 +13,7 @@
 }
 
 .applicationHeroSubtitle {
+    margin: 0;
     color: var(--foreground-secondary);
     font-size: 18px;
 }

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .applicationMenu {
     position: fixed;
@@ -51,31 +51,14 @@
         background: linear-gradient(to top, var(--application-menu-surface), transparent);
         transition: opacity var(--application-duration) var(--swift-out);
     }
-
-    /**
-     * Collapses the footer in sync with the slider track when the
-     * user navigates into a context-menu panel. Animating `max-height`
-     * is the standard hack to transition a height-auto element; 50vh
-     * is far above any realistic footer height yet small enough to
-     * animate smoothly without the leading edge appearing to "wait".
-     */
-    &[data-hidden] {
-        max-height: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-        opacity: 0;
-        pointer-events: none;
-        overflow: hidden;
-
-        &::before {
-            opacity: 0;
-        }
-    }
 }
 
 .applicationMenuHeader {
     padding-top: max(12px, env(safe-area-inset-top));
+    flex-shrink: 0;
     border-bottom: 1px solid var(--application-menu-surface-stroke);
+    overflow: hidden;
+    transition: height var(--application-duration) var(--swift-out);
 
     &::before {
         top: calc(100% + 1px);
@@ -142,13 +125,6 @@
     border-color: var(--foreground-prominent);
 }
 
-/**
- * No visual animation on enter/leave — just hold the leaving panel in
- * the DOM for the duration of the slider's translate transition so it
- * stays visible while the track slides away from it. Without this the
- * v-for would unmount the panel the moment matches shrinks, leaving
- * the slider sliding over an empty track.
- */
 .applicationMenuPanelEnterActive,
 .applicationMenuPanelEnterFrom,
 .applicationMenuPanelLeaveActive,
@@ -230,6 +206,15 @@
     font-weight: 500;
 }
 
+.applicationMenu :local(.menuItemHighlighted) {
+    background: var(--gray-200);
+    color: var(--foreground-prominent);
+}
+
+.applicationMenu :local(.menuItemHighlighted) :local(.menuItemIcon) {
+    color: var(--foreground-prominent);
+}
+
 .applicationMenuAccount {
     position: relative;
 

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .applicationSection {
     display: flex;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .applicationSide {
     position: fixed;

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

@@ -1,4 +1,4 @@
-@use '$flux/css/mixin';
+@use '~flux/components/css/mixin';
 
 .applicationTop {
     position: sticky;
@@ -56,7 +56,7 @@
     flex-flow: row;
     gap: 21px;
 
-    :local(.tabBar) {
+    :local(.baseTabBar) {
         --tab-padding: 18px;
 
         width: 100%;

package/src/data/index.ts

@@ -1,5 +1,5 @@
+import type { FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
 import type { ComputedRef, InjectionKey, Ref } from 'vue';
-import type { FluxPressableType, FluxTo } from '@flux-ui/types';
 
 export const FluxApplicationInjectionKey: InjectionKey<FluxApplicationInjection> = Symbol();
 
@@ -10,6 +10,7 @@ export type FluxApplicationContextInfo = {
     readonly to?: FluxTo;
     readonly entryTo?: FluxTo;
     readonly href?: string;
+    readonly icon?: FluxIconName;
     readonly type?: FluxPressableType;
 };
 

package/src/routing/index.ts

@@ -0,0 +1,2 @@
+export { default as useNamedRoutes } from './useNamedRoutes';
+export { default as useRoute } from './useRoute';