@flux-ui/application 3.0.0-next.39

package/dist/routing/useNamedRoutes.d.ts

@@ -0,0 +1,14 @@
+import { ComputedRef, Ref } from 'vue';
+import { RouteRecordNormalized } from 'vue-router';
+/**
+ * Returns **all** matched route records that expose a named view with
+ * the given `name`, paired with their depth in `route.matched`. Powers
+ * `<FluxApplicationMenuContextStack>` so every level of a nested route
+ * tree can render its own menu component (instead of vue-router's
+ * default behaviour of only rendering the deepest one).
+ */
+export default function (nameRef: Ref<string> | string): ComputedRef<NamedRouteMatch[]>;
+export type NamedRouteMatch = {
+    readonly depth: number;
+    readonly record: RouteRecordNormalized;
+};

package/dist/routing/useRoute.d.ts

@@ -0,0 +1,8 @@
+import { RouteLocationNormalizedLoaded } from 'vue-router';
+/**
+ * Internal alias for vue-router's `useRoute`. Exists so the rest of the
+ * package can import a single, controlled `useRoute` symbol — making it
+ * trivial to swap in a wrapper later (e.g. modal-aware variants) without
+ * touching every call site.
+ */
+export default function (): RouteLocationNormalizedLoaded;

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+declare module '*.module.css' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.module.scss' {
+    const content: Record<string, string>;
+    export default content;
+}
+
+declare module '*.svg' {
+    export = string;
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+    "name": "@flux-ui/application",
+    "description": "Contains components to create applications with Flux UI.",
+    "version": "3.0.0-next.39",
+    "type": "module",
+    "license": "MIT",
+    "funding": "https://github.com/sponsors/basmilius",
+    "homepage": "https://flux-ui.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/basmilius/flux.git",
+        "directory": "packages/application"
+    },
+    "keywords": [
+        "ui library",
+        "component library",
+        "design system",
+        "vue",
+        "vue 3",
+        "ui",
+        "components",
+        "flux",
+        "application"
+    ],
+    "scripts": {
+        "build": "vue-tsc && vite build",
+        "dev": "vite build --watch --mode development"
+    },
+    "engines": {
+        "node": ">=23"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./style.css": "./dist/index.css"
+    },
+    "publishConfig": {
+        "access": "public",
+        "provenance": true
+    },
+    "files": [
+        "dist",
+        "src",
+        "tsconfig.json"
+    ],
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "typings": "./dist/index.d.ts",
+    "sideEffects": false,
+    "dependencies": {
+        "@flux-ui/components": "3.0.0-next.39",
+        "@flux-ui/internals": "3.0.0-next.39",
+        "clsx": "^2.1.1",
+        "vue": "^3.6.0-beta.10",
+        "vue-router": "^5.0.6"
+    },
+    "devDependencies": {
+        "@basmilius/vite-preset": "^3.19.0",
+        "@flux-ui/types": "3.0.0-next.39",
+        "@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"
+    }
+}

package/src/component/FluxApplication.vue

@@ -0,0 +1,144 @@
+<template>
+    <div :class="$style.application">
+        <slot name="menu"/>
+
+        <div :class="$style.applicationBody">
+            <slot/>
+        </div>
+
+        <slot name="side"/>
+
+        <button
+            type="button"
+            aria-label="Close menu"
+            :class="$style.applicationMenuBackdrop"
+            @click="isMenuCollapsed = true"/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    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';
+
+    const {
+        contextMenuName = 'menu',
+        showDesktopMenuToggle = false
+    } = defineProps<{
+        readonly contextMenuName?: string;
+        readonly showDesktopMenuToggle?: boolean;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+        menu(): VNode[];
+        side(): VNode[];
+    }>();
+
+    const route = useRoute();
+    const matchedMenuRoutes = useNamedRoutes(toRef(() => contextMenuName));
+
+    const isMenuCollapsed = useRemembered('application-menu-collapsed', true);
+    const layout = ref<FluxApplicationLayout>('default');
+
+    const totalLevels = computed(() => 1 + matchedMenuRoutes.value.length);
+    const viewIndex = ref(0);
+
+    function clampViewIndex(target: number): number {
+        if (target < 0) {
+            return 0;
+        }
+        const max = totalLevels.value - 1;
+        if (target > max) {
+            return max;
+        }
+        return target;
+    }
+
+    function goToLevel(index: number): void {
+        viewIndex.value = clampViewIndex(index);
+    }
+
+    function goToMain(): void {
+        viewIndex.value = 0;
+    }
+
+    function goToCurrent(): void {
+        viewIndex.value = totalLevels.value - 1;
+    }
+
+    function goToParent(): void {
+        viewIndex.value = clampViewIndex(viewIndex.value - 1);
+    }
+
+    function goToChild(): void {
+        viewIndex.value = clampViewIndex(viewIndex.value + 1);
+    }
+
+    const contextStack = shallowRef<FluxApplicationContextInfo[]>([]);
+    const contexts = computed(() => contextStack.value);
+    const activeContext = computed(() => contextStack.value.at(-1));
+
+    function pushContext(info: FluxApplicationContextInfo): void {
+        contextStack.value = [...contextStack.value, info];
+    }
+
+    function removeContext(id: symbol): void {
+        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;
+    });
+
+    watch(totalLevels, (next) => {
+        viewIndex.value = clampViewIndex(viewIndex.value);
+
+        // On initial route resolve, totalLevels jumps from 1 to its
+        // real value. Snap to the deepest level so the user lands on
+        // the right context without seeing a slide animation.
+        if (viewIndex.value === 0 && next > 1) {
+            viewIndex.value = next - 1;
+        }
+    }, {immediate: true});
+
+    watch(isMenuCollapsed, collapsed => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+
+        if (collapsed) {
+            delete document.documentElement.dataset.applicationMenuOpen;
+        } else {
+            document.documentElement.dataset.applicationMenuOpen = '';
+        }
+    }, {immediate: true});
+
+    onUnmounted(() => {
+        if (typeof document !== 'undefined') {
+            delete document.documentElement.dataset.applicationMenuOpen;
+        }
+    });
+</script>

package/src/component/FluxApplicationContent.vue

@@ -0,0 +1,37 @@
+<template>
+    <main
+        :class="clsx(
+            layout === 'default' && $style.applicationContentDefault,
+            layout === 'dashboard' && $style.applicationContentDashboard,
+            layout === 'full' && $style.applicationContentFull,
+            layout === 'medium' && $style.applicationContentMedium,
+            layout === 'narrow' && $style.applicationContentNarrow
+        )"
+        aria-label="Application Content">
+        <slot/>
+    </main>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import clsx from 'clsx';
+    import { useApplicationInjection } from '../composable';
+    import type { FluxApplicationLayout } from '../data';
+    import $style from '../css/component/ApplicationContent.module.scss';
+    import { watch } from 'vue';
+
+    const {
+        layout = 'default'
+    } = defineProps<{
+        readonly layout?: FluxApplicationLayout;
+    }>();
+
+    defineSlots<{
+        default(): any;
+    }>();
+
+    const {layout: layoutRef} = useApplicationInjection();
+
+    watch(() => layout, () => layoutRef.value = layout, {immediate: true});
+</script>

package/src/component/FluxApplicationHero.vue

@@ -0,0 +1,34 @@
+<template>
+    <header :class="$style.applicationHero">
+        <slot name="start"/>
+
+        <div :class="$style.applicationHeroBody">
+            <h1>{{ title }}</h1>
+
+            <p
+                v-if="subtitle"
+                :class="$style.applicationHeroSubtitle">
+                {{ subtitle }}
+            </p>
+        </div>
+
+        <slot name="end"/>
+    </header>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '../css/component/ApplicationHero.module.scss';
+
+    defineProps<{
+        readonly title: string;
+        readonly subtitle?: string;
+    }>();
+
+    defineSlots<{
+        start?(): VNode;
+        end?(): VNode;
+    }>();
+</script>

package/src/component/FluxApplicationMenu.vue

@@ -0,0 +1,73 @@
+<template>
+    <aside
+        :class="$style.applicationMenu"
+        :data-collapsed="isMenuCollapsed ? '' : undefined"
+        :data-collapsible="showDesktopMenuToggle ? '' : undefined">
+        <FluxMenu
+            v-if="slots.header"
+            :class="$style.applicationMenuHeader">
+            <slot name="header"/>
+        </FluxMenu>
+
+        <div :class="$style.applicationMenuStage">
+            <div
+                :class="$style.applicationMenuTrack"
+                :style="{'--view-index': viewIndex}">
+                <FluxMenu :class="$style.applicationMenuPanel">
+                    <slot/>
+                </FluxMenu>
+
+                <slot name="context"/>
+            </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>
+    </aside>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxMenu } from '@flux-ui/components';
+    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;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode;
+        context?(): VNode;
+        footer?(): VNode;
+        header?(): VNode;
+    }>();
+
+    const {isMenuCollapsed, showDesktopMenuToggle} = useApplicationInjection();
+    const {goToLevel, isMainMenuVisible, totalLevels, viewIndex} = useApplicationMenu();
+</script>

package/src/component/FluxApplicationMenuAccount.vue

@@ -0,0 +1,47 @@
+<template>
+    <FluxFlyout is-auto-width>
+        <template #opener="{open}">
+            <FluxMenuItem
+                :class="slots.switcher ? $style.applicationMenuAccountSwitcher : $style.applicationMenuAccount"
+                :icon-leading="icon"
+                :icon-trailing="slots.switcher ? 'angle-down' : undefined"
+                :image-alt="imageAlt"
+                :image-src="imageSrc"
+                :label="label"
+                @click="slots.switcher && open()">
+                <template
+                    v-if="slots.avatar"
+                    #before>
+                    <slot name="avatar"/>
+                </template>
+            </FluxMenuItem>
+        </template>
+
+        <template v-if="slots.switcher">
+            <FluxPane>
+                <slot name="switcher"/>
+            </FluxPane>
+        </template>
+    </FluxFlyout>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    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';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly imageAlt?: string;
+        readonly imageSrc?: string;
+        readonly label: string;
+    }>();
+
+    const slots = defineSlots<{
+        avatar?(): VNode;
+        switcher?(): VNode;
+    }>();
+</script>

package/src/component/FluxApplicationMenuContext.vue

@@ -0,0 +1,78 @@
+<template>
+    <div :class="$style.applicationMenuContext">
+        <FluxSecondaryButton
+            icon-leading="angle-left"
+            size="small"
+            :tabindex="tabindex"
+            :href="canSlide ? undefined : href"
+            :rel="rel"
+            :target="target"
+            :to="canSlide ? undefined : to"
+            :type="canSlide ? 'button' : type"
+            @click="onBack"/>
+
+        <div :class="$style.applicationMenuContextContent">
+            <strong>{{ title }}</strong>
+            <span v-if="subtitle">{{ subtitle }}</span>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxSecondaryButton } from '@flux-ui/components';
+    import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+    import { computed, inject } from 'vue';
+    import { matchedRouteKey } from 'vue-router';
+    import { FluxApplicationInjectionKey } from '../data';
+    import useApplicationContextRegistration from '../composable/useApplicationContextRegistration';
+    import $style from '../css/component/ApplicationMenu.module.scss';
+
+    const props = defineProps<{
+        readonly subtitle?: string;
+        readonly title: string;
+        readonly tabindex?: string | number;
+        readonly href?: string;
+        readonly rel?: string;
+        readonly target?: string;
+        readonly to?: FluxTo;
+        readonly entryTo?: FluxTo;
+        readonly type?: FluxPressableType;
+    }>();
+
+    const injection = inject(FluxApplicationInjectionKey, null);
+    const matchedRoute = inject(matchedRouteKey, null);
+
+    const canSlide = computed(() => {
+        if (!injection) {
+            return false;
+        }
+        return injection.viewIndex.value > 0;
+    });
+
+    const autoEntryTo = computed<FluxTo | undefined>(() => {
+        const record = matchedRoute?.value;
+
+        if (!record || typeof record.name !== 'string') {
+            return undefined;
+        }
+
+        return {name: record.name};
+    });
+
+    function onBack(): void {
+        if (canSlide.value && injection) {
+            injection.goToParent();
+        }
+    }
+
+    useApplicationContextRegistration(() => ({
+        title: props.title,
+        subtitle: props.subtitle,
+        to: props.to,
+        entryTo: props.entryTo ?? autoEntryTo.value,
+        href: props.href,
+        type: props.type
+    }));
+</script>

package/src/component/FluxApplicationMenuContextStack.vue

@@ -0,0 +1,53 @@
+<template>
+    <TransitionGroup
+        :enter-active-class="$style.applicationMenuPanelEnterActive"
+        :enter-from-class="$style.applicationMenuPanelEnterFrom"
+        :leave-active-class="$style.applicationMenuPanelLeaveActive"
+        :leave-to-class="$style.applicationMenuPanelLeaveTo">
+        <FluxMenu
+            v-for="match in matches"
+            :key="match.record.path"
+            :class="$style.applicationMenuPanel">
+            <ScopedRouterView
+                :depth="match.depth"
+                :view-name="name"/>
+        </FluxMenu>
+    </TransitionGroup>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    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';
+
+    const {
+        name = 'menu'
+    } = defineProps<{
+        readonly name?: string;
+    }>();
+
+    const matches = useNamedRoutes(toRef(() => name));
+
+    const ScopedRouterView = defineComponent({
+        name: 'FluxApplicationMenuScopedRouterView',
+        props: {
+            depth: {
+                type: Number,
+                required: true
+            },
+            viewName: {
+                type: String,
+                required: true
+            }
+        },
+        setup(props): () => VNode {
+            provide(viewDepthKey, ref(props.depth));
+
+            return () => h(RouterView, {name: props.viewName});
+        }
+    });
+</script>

package/src/component/FluxApplicationMenuPromo.vue

@@ -0,0 +1,23 @@
+<template>
+    <div :class="$style.applicationMenuPromo">
+        <FluxIcon
+            v-if="icon"
+            :name="icon"/>
+
+        <div :class="$style.applicationMenuPromoContent">
+            <slot/>
+        </div>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxIcon } from '@flux-ui/components';
+    import type { FluxIconName } from '@flux-ui/types';
+    import $style from '../css/component/ApplicationMenu.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+    }>();
+</script>

package/src/component/FluxApplicationMenuToggle.vue

@@ -0,0 +1,30 @@
+<template>
+    <FluxMenuItem
+        :class="$style.applicationMenuToggle"
+        @click="isMenuCollapsed = !isMenuCollapsed">
+        <template #before>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 18 18"
+                :class="$style.applicationMenuToggleIcon">
+                <path
+                    fill-rule="evenodd"
+                    d="M0 15V3a3 3 0 0 1 3-3h3a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a3.04 3.04 0 0 1-3-3M2 3a1 1 0 0 1 1-1h2v14H3a1 1 0 0 1-1-1z"
+                    clip-rule="evenodd"/>
+
+                <path d="M16 15V3a1 1 0 0 0-1-1h-5a1 1 0 0 1 0-2h5c1.63.04 3 1.33 3 3v12a3.07 3.07 0 0 1-3 3h-5a1 1 0 1 1 0-2h5a1 1 0 0 0 1-1"/>
+            </svg>
+        </template>
+    </FluxMenuItem>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxMenuItem } from '@flux-ui/components';
+    import { useApplicationInjection } from '../composable';
+    import $style from '../css/component/ApplicationMenu.module.scss';
+
+    const {isMenuCollapsed} = useApplicationInjection();
+</script>

package/src/component/FluxApplicationSection.vue

@@ -0,0 +1,40 @@
+<template>
+    <section :class="$style.applicationSection">
+        <header
+            v-if="title || info || slots.end"
+            :class="$style.applicationSectionHeader">
+            <h2 v-if="title">
+                {{ title }}
+            </h2>
+
+            <slot name="end"/>
+
+            <span
+                v-if="info"
+                :class="$style.applicationSectionInfo">
+                {{ info }}
+            </span>
+        </header>
+
+        <div :class="$style.applicationSectionContent">
+            <slot/>
+        </div>
+    </section>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '../css/component/ApplicationSection.module.scss';
+
+    defineProps<{
+        readonly title?: string;
+        readonly info?: string;
+    }>();
+
+    const slots = defineSlots<{
+        default(): VNode;
+        end?(): VNode;
+    }>();
+</script>