@flux-ui/application 3.0.0-next.39

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

@@ -0,0 +1,421 @@
+@use '$flux/css/mixin';
+
+.applicationMenu {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    height: 100dvh;
+    width: var(--application-menu-width);
+    flex-flow: column;
+    transition: var(--application-duration) var(--swift-out);
+    transition-property: translate, width;
+    background: var(--application-menu-surface);
+    border-right: 1px solid var(--application-menu-surface-stroke);
+    overflow: hidden;
+    z-index: 500;
+}
+
+.applicationMenuFooter,
+.applicationMenuHeader,
+.applicationMenuPanel {
+    padding: 12px;
+    gap: 12px;
+}
+
+.applicationMenuFooter,
+.applicationMenuHeader {
+    position: relative;
+    background: var(--application-menu-surface);
+    z-index: 1;
+
+    &::before {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 18px;
+        width: 100%;
+        content: '';
+        pointer-events: none;
+    }
+}
+
+.applicationMenuFooter {
+    max-height: 50vh;
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+    transition: var(--application-duration) var(--swift-out);
+    transition-property: max-height, opacity, padding-top, padding-bottom;
+
+    &::before {
+        bottom: 100%;
+        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));
+    border-bottom: 1px solid var(--application-menu-surface-stroke);
+
+    &::before {
+        top: calc(100% + 1px);
+        background: linear-gradient(to bottom, var(--application-menu-surface), transparent);
+    }
+}
+
+.applicationMenuStage {
+    position: relative;
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+.applicationMenuTrack {
+    display: flex;
+    flex-flow: row nowrap;
+    height: 100%;
+    transform: translateX(calc(var(--view-index, 0) * -100%));
+    transition: transform var(--application-duration) var(--swift-out);
+    will-change: transform;
+}
+
+.applicationMenuPanel {
+    display: flex;
+    flex: 0 0 100%;
+    flex-flow: column;
+    width: 100%;
+    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);
+}
+
+/**
+ * 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,
+.applicationMenuPanelLeaveTo {
+    transition: opacity var(--application-duration) var(--swift-out);
+}
+
+.applicationMenuPanelLeaveActive {
+    pointer-events: none;
+}
+
+.applicationMenu :local(.divider) {
+    margin: 3px 12px;
+}
+
+.applicationMenu :local(.dividerContent)::before,
+.applicationMenu :local(.dividerContent)::after,
+.applicationMenu :local(.dividerLine) {
+    background: var(--application-menu-surface-stroke);
+}
+
+.applicationMenu :local(.menuSubHeader) {
+    --surface: var(--application-menu-surface);
+}
+
+.applicationMenu :local(.menuItem) {
+    position: relative;
+
+    @include mixin.hover {
+        background: var(--gray-200);
+    }
+
+    &:active {
+        background: var(--gray-300);
+    }
+
+    &::before {
+        position: absolute;
+        display: block;
+        content: '';
+        top: 50%;
+        right: 0;
+        height: 1em;
+        width: 3px;
+        background: var(--foreground-secondary);
+        border-radius: var(--radius);
+        opacity: 0;
+        transition: 300ms var(--swift-out);
+        transition-property: height, opacity;
+        translate: 8px -50%;
+    }
+}
+
+.applicationMenu :local(.menuItemIcon) {
+    color: var(--foreground-secondary);
+}
+
+.applicationMenu :local(.menuItemLabel) {
+    transition: var(--application-duration) var(--swift-out);
+    transition-property: filter, opacity, translate;
+    white-space: nowrap;
+}
+
+.applicationMenu :local(.menuItemActive) {
+    background: var(--gray-200);
+    color: var(--foreground-prominent);
+
+    &::before {
+        height: 1.6em;
+        opacity: 1;
+    }
+}
+
+.applicationMenu :local(.menuItemActive) :local(.menuItemIcon) {
+    color: var(--foreground);
+}
+
+.applicationMenu :local(.menuItemActive) :local(.menuItemLabel) {
+    font-weight: 500;
+}
+
+.applicationMenuAccount {
+    position: relative;
+
+    pointer-events: none;
+}
+
+.applicationMenuAccountSwitcher {
+    composes: applicationMenuAccount;
+
+    pointer-events: auto;
+}
+
+.applicationMenuAccount :local(.menuItemLabel) {
+    font-weight: 600;
+}
+
+.applicationMenuAccount :local(.avatar) {
+    margin: -5px;
+    font-size: 30px;
+}
+
+.applicationMenuContext {
+    display: flex;
+    margin-top: -12px;
+    margin-left: -12px;
+    margin-right: -12px;
+    padding: 15px;
+    flex-flow: row nowrap;
+    gap: 15px;
+    border: 1px solid var(--application-menu-surface-stroke);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
+.applicationMenuContextContent {
+    display: flex;
+    align-self: center;
+    flex-flow: column;
+
+    :global(strong) {
+        color: var(--foreground-prominent);
+    }
+
+    :global(span) {
+        color: var(--foreground-secondary);
+        font-size: 14px;
+    }
+}
+
+.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;
+    flex-flow: row;
+    gap: 12px;
+    background: var(--gray-25);
+    border: 1px solid var(--application-menu-surface-stroke);
+    border-radius: var(--radius);
+}
+
+.applicationMenuPromo > :local(.icon) {
+    margin: 2px;
+    color: var(--gray-600);
+    font-size: 16px;
+}
+
+.applicationMenuPromoContent {
+    display: flex;
+    flex-flow: column;
+    gap: 6px;
+    font-size: 14px;
+}
+
+.applicationMenuPromoContent :global(a) {
+    color: var(--gray-700);
+}
+
+.applicationMenuToggle:local(.menuItem) {
+    height: min-content;
+    align-self: center;
+    color: var(--foreground);
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.applicationMenuToggleIcon {
+    height: 1em;
+    width: 1em;
+    flex-shrink: 0;
+    font-size: 18px;
+    line-height: 1;
+    overflow: visible;
+
+    :global(path) {
+        fill: currentColor;
+    }
+}
+
+@include mixin.breakpoint-up(lg) {
+    .applicationMenu[data-collapsed][data-collapsible] {
+        width: var(--application-menu-width-collapsed);
+
+        :local(.menuItemLabel) {
+            filter: blur(6px);
+            opacity: 0;
+            translate: -12px 0;
+        }
+
+        .applicationMenuPromo,
+        .applicationMenuContext {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .applicationMenuContextPillContent :global(strong),
+        .applicationMenuContextPillContent :global(span) {
+            filter: blur(6px);
+            opacity: 0;
+            translate: -12px 0;
+        }
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .applicationMenu {
+        width: min(300px, calc(100dvw - 42px));
+        z-index: 2000;
+    }
+
+    .applicationMenu[data-collapsed] {
+        translate: -100% 0;
+    }
+}

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

@@ -0,0 +1,43 @@
+@use '$flux/css/mixin';
+
+.applicationSection {
+    display: flex;
+    flex-flow: column;
+    gap: 21px;
+}
+
+.applicationSectionHeader {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    gap: 21px;
+
+    :global(h2) {
+        flex-grow: 1;
+        color: var(--foreground-prominent);
+    }
+}
+
+.applicationSectionInfo {
+    font-size: 14px;
+    color: var(--foreground-secondary);
+}
+
+.applicationSectionContent {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+    gap: 21px;
+}
+
+:local(.gridColumn) > .applicationSection {
+    min-height: 100%;
+}
+
+@include mixin.breakpoint-down(md) {
+    .applicationSectionHeader {
+        align-items: flex-start;
+        flex-flow: column;
+        gap: 0;
+    }
+}

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

@@ -0,0 +1,21 @@
+@use '$flux/css/mixin';
+
+.applicationSide {
+    position: fixed;
+    display: flex;
+    top: 0;
+    right: 0;
+    height: 100dvh;
+    width: var(--application-side-width);
+    flex-flow: column;
+    background: var(--surface);
+    border-left: 1px solid var(--surface-stroke);
+    overflow: hidden;
+    z-index: 500;
+}
+
+@include mixin.breakpoint-down(lg) {
+    .applicationSide {
+        display: none;
+    }
+}

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

@@ -0,0 +1,111 @@
+@use '$flux/css/mixin';
+
+.applicationTop {
+    position: sticky;
+    top: 0;
+    background: rgb(from var(--surface) r g b / .975);
+    background-clip: padding-box;
+    backdrop-filter: blur(3px) saturate(180%);
+    border-bottom: 1px solid transparent;
+    transition: 300ms var(--swift-out);
+    transition-property: border-color, box-shadow;
+    z-index: 400;
+}
+
+.applicationTopScrolled {
+    composes: applicationTop;
+
+    border-bottom-color: var(--surface-stroke-out);
+    box-shadow: var(--shadow-lg);
+}
+
+.applicationTopBar {
+    display: flex;
+    height: var(--application-top-height);
+    padding-left: 21px;
+    padding-right: 21px;
+    align-items: center;
+    flex-flow: row;
+    gap: 15px;
+    color: var(--foreground-prominent);
+}
+
+.applicationTopBarTitle {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.applicationTopBar > :local(.separator) {
+    height: 18px;
+}
+
+@include mixin.breakpoint-up(lg) {
+    .applicationTopMenuToggleHidden {
+        display: none;
+    }
+}
+
+.applicationTopTabs {
+    position: relative;
+    display: flex;
+    margin-top: -6px;
+    margin-left: auto;
+    margin-right: auto;
+    flex-flow: row;
+    gap: 21px;
+
+    :local(.tabBar) {
+        --tab-padding: 18px;
+
+        width: 100%;
+        box-shadow: unset;
+    }
+}
+
+.applicationTopTabsDefault,
+.applicationTopTabsDashboard {
+    composes: applicationTopTabs;
+
+    width: min(1620px, 100% - 42px);
+}
+
+.applicationTopTabsFull {
+    composes: applicationTopTabs;
+
+    width: calc(100% - 42px);
+}
+
+.applicationTopTabsMedium {
+    composes: applicationTopTabs;
+
+    width: min(1280px, 100% - 42px);
+}
+
+.applicationTopTabsNarrow {
+    composes: applicationTopTabs;
+
+    width: min(840px, 100% - 42px);
+}
+
+@include mixin.breakpoint-down(md) {
+    .applicationTop,
+    .applicationTopScrolled {
+        padding-top: env(safe-area-inset-top);
+    }
+
+    .applicationTopBar > :local(.icon) {
+        display: none;
+    }
+
+    .applicationMenuToggle {
+        margin-left: -12px;
+        margin-right: -15px;
+    }
+}
+
+.applicationTop:has(+ .applicationContentFull > :local(.table)) {
+    border-bottom-color: var(--surface-stroke-out);
+}

package/src/data/index.ts

@@ -0,0 +1,38 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue';
+import type { FluxPressableType, FluxTo } from '@flux-ui/types';
+
+export const FluxApplicationInjectionKey: InjectionKey<FluxApplicationInjection> = Symbol();
+
+export type FluxApplicationContextInfo = {
+    readonly id: symbol;
+    readonly title: string;
+    readonly subtitle?: string;
+    readonly to?: FluxTo;
+    readonly entryTo?: FluxTo;
+    readonly href?: string;
+    readonly type?: FluxPressableType;
+};
+
+export type FluxApplicationInjection = {
+    readonly activeContext: ComputedRef<FluxApplicationContextInfo | undefined>;
+    readonly contexts: ComputedRef<readonly FluxApplicationContextInfo[]>;
+    readonly isMenuCollapsed: Ref<boolean>;
+    readonly layout: Ref<FluxApplicationLayout>;
+    readonly showDesktopMenuToggle: Ref<boolean>;
+    readonly totalLevels: ComputedRef<number>;
+    readonly viewIndex: Ref<number>;
+    goToChild(): void;
+    goToCurrent(): void;
+    goToLevel(index: number): void;
+    goToMain(): void;
+    goToParent(): void;
+    pushContext(info: FluxApplicationContextInfo): void;
+    removeContext(id: symbol): void;
+};
+
+export type FluxApplicationLayout =
+    | 'default'
+    | 'dashboard'
+    | 'full'
+    | 'medium'
+    | 'narrow';

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export * from './composable';
+export * from './data';

package/src/routing/useNamedRoutes.ts

@@ -0,0 +1,34 @@
+import { computed, type ComputedRef, type Ref, unref } from 'vue';
+import type { RouteRecordNormalized } from 'vue-router';
+import useRoute from './useRoute';
+
+/**
+ * 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[]> {
+    const route = useRoute();
+
+    return computed(() => {
+        const name = unref(nameRef);
+        const matches: NamedRouteMatch[] = [];
+
+        route.matched.forEach((record, depth) => {
+            if (!record.components || !(name in record.components)) {
+                return;
+            }
+
+            matches.push({depth, record});
+        });
+
+        return matches;
+    });
+}
+
+export type NamedRouteMatch = {
+    readonly depth: number;
+    readonly record: RouteRecordNormalized;
+};

package/src/routing/useRoute.ts

@@ -0,0 +1,11 @@
+import { type RouteLocationNormalizedLoaded, useRoute as useVueRoute } 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 {
+    return useVueRoute();
+}

package/src/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/tsconfig.json

@@ -0,0 +1,7 @@
+{
+    "files": [],
+    "references": [
+        { "path": "./tsconfig.app.json" },
+        { "path": "./tsconfig.node.json" }
+    ]
+}