@flux-ui/application 3.0.0-next.39

package/src/component/FluxApplicationSide.vue

@@ -0,0 +1,16 @@
+<template>
+    <aside :class="$style.applicationSide">
+        <slot/>
+    </aside>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { VNode } from 'vue';
+    import $style from '../css/component/ApplicationSide.module.scss';
+
+    defineSlots<{
+        default(): VNode;
+    }>();
+</script>

package/src/component/FluxApplicationTop.vue

@@ -0,0 +1,74 @@
+<template>
+    <header :class="y > 1 ? $style.applicationTopScrolled : $style.applicationTop">
+        <div :class="$style.applicationTopBar">
+            <FluxApplicationMenuToggle :class="!showDesktopMenuToggle && $style.applicationTopMenuToggleHidden"/>
+
+            <slot name="start"/>
+
+            <FluxFadeTransition>
+                <FluxIcon
+                    v-if="icon"
+                    :key="icon"
+                    :name="icon"/>
+            </FluxFadeTransition>
+
+            <FluxFadeTransition>
+                <span
+                    v-if="title"
+                    :key="title"
+                    :class="$style.applicationTopBarTitle">
+                    {{ title }}
+                </span>
+            </FluxFadeTransition>
+
+            <FluxSpacer/>
+
+            <slot name="end"/>
+        </div>
+
+        <FluxRouteTransition>
+            <div
+                v-if="slots.tabs"
+                :class="clsx(
+                    layout === 'default' && $style.applicationTopTabsDefault,
+                    layout === 'dashboard' && $style.applicationTopTabsDashboard,
+                    layout === 'full' && $style.applicationTopTabsFull,
+                    layout === 'medium' && $style.applicationTopTabsMedium,
+                    layout === 'narrow' && $style.applicationTopTabsNarrow
+                )">
+                <FluxTabBar>
+                    <slot name="tabs"/>
+                </FluxTabBar>
+            </div>
+
+            <div v-else/>
+        </FluxRouteTransition>
+    </header>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { FluxFadeTransition, FluxIcon, FluxRouteTransition, FluxSpacer, FluxTabBar } from '@flux-ui/components';
+    import { useScrollPosition } from '@flux-ui/internals';
+    import type { FluxIconName } from '@flux-ui/types';
+    import clsx from 'clsx';
+    import type { VNode } from 'vue';
+    import { useApplicationInjection } from '../composable';
+    import FluxApplicationMenuToggle from './FluxApplicationMenuToggle.vue';
+    import $style from '../css/component/ApplicationTop.module.scss';
+
+    defineProps<{
+        readonly icon?: FluxIconName;
+        readonly title?: string;
+    }>();
+
+    const slots = defineSlots<{
+        end?(): VNode;
+        start?(): VNode;
+        tabs?(): VNode;
+    }>();
+
+    const {layout, showDesktopMenuToggle} = useApplicationInjection();
+    const {y} = useScrollPosition();
+</script>

package/src/component/index.ts

@@ -0,0 +1,12 @@
+export { default as FluxApplication } from './FluxApplication.vue';
+export { default as FluxApplicationContent } from './FluxApplicationContent.vue';
+export { default as FluxApplicationHero } from './FluxApplicationHero.vue';
+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 FluxApplicationMenuPromo } from './FluxApplicationMenuPromo.vue';
+export { default as FluxApplicationMenuToggle } from './FluxApplicationMenuToggle.vue';
+export { default as FluxApplicationSection } from './FluxApplicationSection.vue';
+export { default as FluxApplicationSide } from './FluxApplicationSide.vue';
+export { default as FluxApplicationTop } from './FluxApplicationTop.vue';

package/src/composable/index.ts

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

package/src/composable/useApplicationContextMenu.ts

@@ -0,0 +1,19 @@
+import { computed, type ComputedRef, toRef } from 'vue';
+import useNamedRoutes from '../routing/useNamedRoutes';
+
+export default function (name: string = 'menu'): UseApplicationContextMenu {
+    const matches = useNamedRoutes(toRef(() => name));
+
+    const hasContextMenu = computed(() => matches.value.length > 0);
+    const contextMenuKey = computed(() => matches.value.map(m => m.record.path).join('|') || undefined);
+
+    return {
+        contextMenuKey,
+        hasContextMenu
+    };
+}
+
+type UseApplicationContextMenu = {
+    readonly contextMenuKey: ComputedRef<string | undefined>;
+    readonly hasContextMenu: ComputedRef<boolean>;
+};

package/src/composable/useApplicationContextRegistration.ts

@@ -0,0 +1,25 @@
+import { inject, onBeforeUnmount, onMounted, watch } from 'vue';
+import { type FluxApplicationContextInfo, FluxApplicationInjectionKey } from '../data';
+
+export default function (info: () => Omit<FluxApplicationContextInfo, 'id'>): void {
+    const injection = inject(FluxApplicationInjectionKey, null);
+
+    if (!injection) {
+        return;
+    }
+
+    const id = Symbol('application-context');
+
+    onMounted(() => {
+        injection.pushContext({id, ...info()});
+    });
+
+    watch(info, next => {
+        injection.removeContext(id);
+        injection.pushContext({id, ...next});
+    });
+
+    onBeforeUnmount(() => {
+        injection.removeContext(id);
+    });
+}

package/src/composable/useApplicationInjection.ts

@@ -0,0 +1,12 @@
+import { inject } from 'vue';
+import { type FluxApplicationInjection, FluxApplicationInjectionKey } from '../data';
+
+export default function (): FluxApplicationInjection {
+    const injection = inject(FluxApplicationInjectionKey);
+
+    if (!injection) {
+        throw new Error('[Flux] useApplicationInjection() was used outside a FluxApplication component.');
+    }
+
+    return injection;
+}

package/src/composable/useApplicationMenu.ts

@@ -0,0 +1,79 @@
+import { computed, type ComputedRef, type Ref } from 'vue';
+import type { FluxApplicationContextInfo, FluxApplicationLayout } from '../data';
+import useApplicationInjection from './useApplicationInjection';
+
+export default function (): UseApplicationMenu {
+    const {
+        activeContext,
+        contexts,
+        isMenuCollapsed,
+        layout,
+        totalLevels,
+        viewIndex,
+        goToChild,
+        goToCurrent,
+        goToLevel,
+        goToMain,
+        goToParent
+    } = useApplicationInjection();
+
+    const isMainMenuVisible = computed(() => viewIndex.value === 0);
+    const canGoBack = computed(() => viewIndex.value > 0);
+    const canGoForward = computed(() => viewIndex.value < totalLevels.value - 1);
+
+    return {
+        activeContext,
+        canGoBack,
+        canGoForward,
+        contexts,
+        isMainMenuVisible,
+        isMenuCollapsed,
+        layout,
+        totalLevels,
+        viewIndex,
+
+        goToChild,
+        goToCurrent,
+        goToLevel,
+        goToMain,
+        goToParent,
+
+        close: () => isMenuCollapsed.value = true,
+        open: () => isMenuCollapsed.value = false,
+        toggle: () => isMenuCollapsed.value = !isMenuCollapsed.value,
+
+        // Convenience aliases mapping onto the viewIndex model.
+        showMainMenu: goToMain,
+        showContextMenu: goToCurrent,
+        toggleMainMenu: () => {
+            if (viewIndex.value === 0) {
+                goToCurrent();
+            } else {
+                goToMain();
+            }
+        }
+    };
+}
+
+type UseApplicationMenu = {
+    readonly activeContext: ComputedRef<FluxApplicationContextInfo | undefined>;
+    readonly canGoBack: ComputedRef<boolean>;
+    readonly canGoForward: ComputedRef<boolean>;
+    readonly contexts: ComputedRef<readonly FluxApplicationContextInfo[]>;
+    readonly isMainMenuVisible: ComputedRef<boolean>;
+    readonly isMenuCollapsed: Ref<boolean>;
+    readonly layout: Ref<FluxApplicationLayout>;
+    readonly totalLevels: ComputedRef<number>;
+    readonly viewIndex: Ref<number>;
+    close(): void;
+    goToChild(): void;
+    goToCurrent(): void;
+    goToLevel(index: number): void;
+    goToMain(): void;
+    goToParent(): void;
+    open(): void;
+    showContextMenu(): void;
+    showMainMenu(): void;
+    toggle(): void;
+    toggleMainMenu(): void;
+};

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

@@ -0,0 +1,88 @@
+@use '$flux/css/mixin';
+
+:root {
+    --application-duration: 360ms;
+    --application-menu-surface: var(--gray-100);
+    --application-menu-surface-stroke: var(--gray-200);
+    --application-menu-width: 300px;
+    --application-menu-width-collapsed: 69px;
+    --application-side-width: 300px;
+    --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;
+    transition: padding var(--application-duration) var(--swift-out);
+    transition-property: padding-left, padding-right;
+
+    &:has(> .applicationSide) {
+        padding-right: var(--application-side-width);
+    }
+}
+
+.applicationBody {
+    position: relative;
+    display: flex;
+    min-width: 0;
+    min-height: 100dvh;
+    flex-flow: column;
+    flex-grow: 1;
+
+    &:has(> .applicationContentFull > :is(.calendar, .table)) {
+        max-height: 100dvh;
+    }
+}
+
+.applicationMenuBackdrop {
+    position: fixed;
+    display: none;
+    inset: 0;
+    width: 100dvw;
+    height: 100dvh;
+    padding: 0;
+    border: 0;
+    background: rgb(from var(--gray-200) r g b / .5);
+    backdrop-filter: blur(3px) saturate(180%);
+    transition: var(--application-duration) var(--swift-out);
+    transition-property: background, backdrop-filter, opacity;
+    z-index: 1900;
+}
+
+@include mixin.breakpoint-up(lg) {
+    .application:has(> .applicationMenu) {
+        padding-left: var(--application-menu-width);
+    }
+
+    .application:has(> .applicationMenu[data-collapsed][data-collapsible]) {
+        padding-left: var(--application-menu-width-collapsed);
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .application {
+        &:has(> .applicationSide) {
+            padding-right: 0;
+        }
+    }
+
+    .applicationMenuBackdrop {
+        display: block;
+    }
+
+    .application:has(> .applicationMenu[data-collapsed]) .applicationMenuBackdrop {
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    html[data-application-menu-open],
+    html[data-application-menu-open] body {
+        overflow: hidden;
+        overscroll-behavior: contain;
+    }
+}

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

@@ -0,0 +1,119 @@
+@use '$flux/css/mixin';
+
+.applicationContent {
+    position: relative;
+    display: flex;
+    container: applicationContent / inline-size;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 21px;
+    padding-bottom: 21px;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 21px;
+}
+
+.applicationContentDefault,
+.applicationContentDashboard {
+    composes: applicationContent;
+
+    width: min(1620px, 100% - 42px);
+}
+
+.applicationContentDashboard {
+    gap: 45px;
+}
+
+.applicationContentFull {
+    composes: applicationContent;
+
+    padding-top: 0;
+    padding-bottom: 0;
+    width: calc(100% - 42px);
+}
+
+.applicationContentMedium {
+    composes: applicationContent;
+
+    width: min(1280px, 100% - 42px);
+}
+
+.applicationContentNarrow {
+    composes: applicationContent;
+
+    width: min(840px, 100% - 42px);
+}
+
+.applicationContentFull {
+    &:has(> :is(:local(.calendar), :local(.table))) {
+        min-height: 0;
+        width: 100%;
+        contain: paint;
+        overflow: hidden;
+    }
+
+    > :is(:local(.calendar), :local(.table)) {
+        max-height: 100%;
+        flex-grow: 1;
+    }
+
+    > :local(.calendar) {
+        border-left: 0;
+        border-right: 0;
+        border-radius: 0;
+
+        :local(.calendarActions) {
+            padding-left: 21px;
+            padding-right: 21px;
+        }
+    }
+
+    > :local(.table) {
+        :local(.tableCell):first-child :local(.tableCellContent) {
+            padding-left: 21px;
+        }
+
+        :local(.tableCell):last-child :local(.tableCellContent) {
+            padding-right: 21px;
+        }
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .applicationContentDefault,
+    .applicationContentMedium,
+    .applicationContentNarrow {
+        gap: 15px;
+    }
+
+    .applicationContentDashboard {
+        gap: 30px;
+    }
+
+    .applicationContentFull {
+        width: 100%;
+    }
+
+    .applicationContentFull {
+        > :is(.calendar, .table) {
+            margin-left: 0;
+            margin-right: 0;
+            height: auto;
+        }
+
+        > .calendar .calendarActions {
+            padding-left: 12px;
+            padding-right: 12px;
+        }
+
+        > .table {
+            .tableCell:first-child .tableCellContent {
+                padding-left: 12px;
+            }
+
+            .tableCell:last-child .tableCellContent {
+                padding-right: 12px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,17 @@
+.applicationHero {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    gap: 21px;
+}
+
+.applicationHeroBody {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 6px;
+}
+
+.applicationHeroSubtitle {
+    color: var(--foreground-secondary);
+}