@flux-ui/dashboard 3.0.0-next.0 → 3.0.0-next.3

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/dashboard",
     "description": "Contains components to create dashboards with Flux UI.",
-    "version": "3.0.0-next.0",
+    "version": "3.0.0-next.3",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -52,17 +52,17 @@
     "typings": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@flux-ui/components": "3.0.0-next.0",
-        "@flux-ui/internals": "3.0.0-next.0",
+        "@flux-ui/components": "0.0.0",
+        "@flux-ui/internals": "0.0.0",
         "vue": "^3.5.13"
     },
     "devDependencies": {
-        "@basmilius/vite-vue-preset": "^2.5.0",
-        "@types/node": "^22.14.0",
+        "@basmilius/vite-vue-preset": "^3.0.0",
+        "@types/node": "^22.14.1",
         "@vitejs/plugin-vue": "^5.2.3",
-        "sass-embedded": "^1.86.3",
+        "sass-embedded": "^1.87.0",
         "typescript": "^5.8.3",
-        "vite": "^6.2.5",
-        "vue-tsc": "^2.2.8"
+        "vite": "^6.3.2",
+        "vue-tsc": "^2.2.10"
     }
 }

package/src/component/FluxDashboard.vue

@@ -1,14 +1,9 @@
 <template>
-    <div :class="$style.dashboard">
+    <div :class="[$style.dashboard, isResizing && $style.isResizing]">
         <slot name="navigation"/>
-
         <slot name="menu"/>
-
-        <div :class="$style.dashboardBody">
-            <slot name="header"/>
-            <slot/>
-        </div>
-
+        <slot name="header"/>
+        <slot/>
         <slot name="side"/>
     </div>
 </template>
@@ -17,13 +12,38 @@
     lang="ts"
     setup>
     import { useRemembered } from '@flux-ui/internals';
-    import { provide } from 'vue';
+    import { provide, ref, VNode, watch } from 'vue';
     import { FluxDashboardInjectionKey } from '$fluxDashboard/data';
     import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
 
+    defineSlots<{
+        default(): VNode;
+        header(): VNode;
+        navigation(): VNode;
+        menu(): VNode;
+        side(): VNode;
+    }>();
+
+    const isMenuCollapsed = useRemembered('dashboard-menu-collapsed', true);
     const isNavigationCollapsed = useRemembered('dashboard-navigation-collapsed', true);
+    const isResizing = ref(false);
 
     provide(FluxDashboardInjectionKey, {
+        isMenuCollapsed,
         isNavigationCollapsed
     });
+
+    watch(isNavigationCollapsed, (_, __, onCleanup) => {
+        let timeout: NodeJS.Timeout;
+
+        function onResize(): void {
+            clearTimeout(timeout);
+            isResizing.value = true;
+            timeout = setTimeout(() => isResizing.value = false, 10);
+        }
+
+        window.addEventListener('resize', onResize, {passive: true});
+
+        onCleanup(() => window.removeEventListener('resize', onResize));
+    }, {immediate: true});
 </script>

package/src/component/FluxDashboardContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <main :class="$style.dashboardContent">
+    <main :class="[$style.dashboardContent, !isMenuCollapsed && $style.dashboardContentCollapsed]">
         <slot/>
     </main>
 </template>
@@ -7,5 +7,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import { useDashboardInjection } from '$fluxDashboard/composable';
+    import $style from '$fluxDashboard/css/component/DashboardContent.module.scss';
+
+    const {isMenuCollapsed} = useDashboardInjection();
 </script>

package/src/component/FluxDashboardHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <FluxDashboardTopBar>
+    <FluxDashboardTopBar :class="y > 0 ? $style.dashboardHeaderScrolled : $style.dashboardHeader">
         <slot name="start"/>
 
         <FluxIcon
@@ -20,11 +20,15 @@
     lang="ts"
     setup>
     import { FluxIcon, FluxSpacer } from '@flux-ui/components';
+    import { useScrollPosition } from '@flux-ui/internals';
     import type { FluxIconName } from '@flux-ui/types';
     import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
+    import $style from '$fluxDashboard/css/component/DashboardTopBar.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
         readonly title?: string;
     }>();
+
+    const {y} = useScrollPosition();
 </script>

package/src/component/FluxDashboardMenu.vue

@@ -1,5 +1,5 @@
 <template>
-    <aside :class="$style.dashboardMenu">
+    <aside :class="[$style.dashboardMenu, isMenuCollapsed && $style.dashboardMenuCollapsed]">
         <FluxDashboardTopBar>
             <slot name="top-bar-start"/>
 
@@ -25,11 +25,14 @@
     setup>
     import { FluxIcon, FluxSpacer } from '@flux-ui/components';
     import type { FluxIconName } from '@flux-ui/types';
+    import { useDashboardInjection } from '$fluxDashboard/composable';
     import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardPane.module.scss';
 
     defineProps<{
         readonly icon?: FluxIconName;
         readonly title: string;
     }>();
+
+    const {isMenuCollapsed} = useDashboardInjection();
 </script>

package/src/component/FluxDashboardNavigation.vue

@@ -1,31 +1,44 @@
 <template>
-    <div
-        v-for="index of 2"
-        :key="index"
-        :class="isNavigationCollapsed ? $style.dashboardNavigationRoundingFixCollapsed : $style.dashboardNavigationRoundingFix"/>
-
     <nav
         v-bind="$attrs"
         :class="isNavigationCollapsed ? $style.dashboardNavigationCollapsed : $style.dashboardNavigation">
-        <router-link
-            v-if="slots.logo"
-            :class="$style.dashboardNavigationLogo"
-            :to="logoLocation || '/'">
-            <slot
-                name="logo"
-                v-bind="{isNavigationCollapsed}"/>
-        </router-link>
-
-        <slot/>
+        <header :class="$style.dashboardNavigationHeader">
+            <FluxMenuItem
+                icon-leading="bars"
+                @click="isNavigationCollapsed = !isNavigationCollapsed"/>
+
+            <router-link
+                v-if="slots.logo"
+                :class="$style.dashboardNavigationLogo"
+                :to="logoLocation || '/'">
+                <slot
+                    name="logo"
+                    v-bind="{isNavigationCollapsed}"/>
+            </router-link>
+
+            <FluxMenuItem
+                icon-leading="ellipsis-h"
+                @click="isMenuCollapsed = !isMenuCollapsed"/>
+        </header>
+
+        <div
+            v-for="index of 2"
+            :key="index"
+            :class="$style.dashboardNavigationRoundingFix"/>
+
+        <main :class="$style.dashboardNavigationNav">
+            <slot/>
+        </main>
     </nav>
 </template>
 
 <script
     lang="ts"
     setup>
+    import { FluxMenuItem } from '@flux-ui/components';
     import type { FluxTo } from '@flux-ui/types';
     import { useDashboardInjection } from '$fluxDashboard/composable';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardNavigation.module.scss';
 
     defineOptions({
         inheritAttrs: false
@@ -40,5 +53,8 @@
         logo?(): any;
     }>();
 
-    const {isNavigationCollapsed} = useDashboardInjection();
+    const {
+        isMenuCollapsed,
+        isNavigationCollapsed
+    } = useDashboardInjection();
 </script>

package/src/component/FluxDashboardSide.vue

@@ -19,7 +19,7 @@
     setup>
     import { FluxSpacer } from '@flux-ui/components';
     import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import $style from '$fluxDashboard/css/component/DashboardPane.module.scss';
 
     defineProps<{
         readonly title: string;

package/src/component/FluxDashboardTopBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <header :class="$style.dashboardTopBar">
+    <header :class="[$style.dashboardTopBar, !isMenuCollapsed && $style.dashboardTopBarCollapsed]">
         <slot/>
     </header>
 </template>
@@ -7,5 +7,8 @@
 <script
     lang="ts"
     setup>
-    import $style from '$fluxDashboard/css/component/Dashboard.module.scss';
+    import { useDashboardInjection } from '$fluxDashboard/composable';
+    import $style from '$fluxDashboard/css/component/DashboardTopBar.module.scss';
+
+    const {isMenuCollapsed} = useDashboardInjection();
 </script>

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

@@ -1,323 +1,67 @@
-.dashboard {
-    --dashboard-navigation-background: rgb(var(--primary-11));
-
-    display: grid;
-    min-height: 100vh;
-    grid-template-columns: auto minmax(0, 1fr);
-    background: rgb(var(--gray-0));
-
-    &:has(> .dashboardMenu) {
-        grid-template-columns: auto 300px minmax(0, 1fr);
-    }
-
-    &:has(> .dashboardSide) {
-        grid-template-columns: auto minmax(0, 1fr) 330px;
-    }
+@use '../../../../components/src/css/mixin';
 
-    &:has(> .dashboardMenu):has(> .dashboardSide) {
-        grid-template-columns: auto 300px minmax(0, 1fr) 330px;
-    }
-
-    .notice.isFluid + .dashboardContent:not(:has(> .table:first-child)) {
-        padding-top: 30px;
-    }
-
-    .notice.isFluid + .dashboardContent > .table:first-child {
-        border-top: 0;
-    }
+:root {
+    --dashboard-background: rgb(var(--gray-0));
+    --dashboard-duration: 360ms;
+    --dashboard-navigation-background: rgb(var(--primary-11));
+    --dashboard-navigation-foreground: rgb(var(--primary-0));
 }
 
-[dark] .dashboard {
+[dark] {
     --dashboard-navigation-background: color-mix(in srgb, rgb(var(--gray-0)), black 50%);
 }
 
-.dashboardBody {
-    position: relative;
-    display: flex;
-    flex-flow: column;
-    flex-grow: 1;
-}
-
-.dashboardContent {
-    display: flex;
-    padding: 0 30px;
-    flex-flow: column;
-    flex-grow: 1;
-
-    > :is(.calendar, .table) {
-        margin-left: -30px;
-        margin-right: -30px;
-        height: calc(100dvh - 84px);
-        flex-grow: 1;
-    }
-
-    > .calendar {
-        border-left: 0;
-        border-right: 0;
-        border-radius: 0;
-
-        .calendarActions {
-            padding-left: 30px;
-            padding-right: 30px;
-        }
-    }
-
-    > .table {
-        border-top: 1px solid rgb(var(--gray-3));
-
-        .tableCell:first-child .tableCellContent {
-            padding-left: 30px;
-        }
-
-        .tableCell:last-child .tableCellContent {
-            padding-right: 30px;
-        }
-    }
-}
-
-.dashboardPane {
-    position: sticky;
-    top: 0;
-    height: 100dvh;
-    flex-shrink: 0;
-    background: rgb(var(--gray-1));
-    overflow: auto;
-
-    .menuSubHeader {
-        background: linear-gradient(to bottom, rgb(var(--gray-1)) 75%, transparent);
-    }
-
-    .dashboardTopBar {
-        background: rgb(var(--gray-1) / .9);
-    }
-
-    .filter {
-        --background: rgb(var(--gray-1));
-
-        max-height: calc(100dvh - 84px);
-        margin-top: -9px;
-        padding: 9px 18px 18px;
-        width: 100%;
-
-        .filterHeader {
-            margin-left: -18px;
-            margin-right: -18px;
-            padding-left: 18px;
-            padding-right: 18px;
-        }
-
-        .menu {
-            font-size: 14px;
-        }
-
-        .menuItemCommand {
-            font-size: 12px;
-        }
-
-        .menuItemIcon {
-            font-size: 16px;
-        }
-
-        .menu > :where(.divider, .separator) {
-            margin-left: -18px;
-            margin-right: -18px;
-        }
-    }
+body:has(.root > .dashboard) {
+    background: var(--dashboard-background);
 }
 
-.dashboardMenu {
-    composes: dashboardPane;
-
-    border-right: 1px solid rgb(var(--gray-2));
+.dashboard {
+    min-height: 100dvh;
 }
 
-.dashboardMenuBody {
-    padding: 0 18px 30px;
+.isResizing, .isResizing * {
+    animation: none !important;
+    transition: none !important;
 }
 
-.dashboardSide {
-    composes: dashboardPane;
-
-    border-left: 1px solid rgb(var(--gray-2));
-}
+@include mixin.breakpoint-up(lg) {
+    .dashboard {
+        display: grid;
+        grid-template-areas: 'menu header side' 'menu content side';
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        grid-template-rows: auto minmax(0, 1fr);
+        transition: padding-left var(--dashboard-duration) var(--swift-out);
 
-.dashboardNavigation {
-    position: sticky;
-    display: flex;
-    top: 0;
-    height: 100dvh;
-    width: 300px;
-    padding: 15px;
-    flex-flow: column;
-    gap: 15px;
-    background: var(--dashboard-navigation-background);
-    transition: width 210ms var(--swift-out);
-
-    .divider {
-        margin: 3px 15px;
-    }
-
-    .dividerLine {
-        background: rgb(var(--primary-10));
-    }
-
-    .menu {
-        flex-grow: 1;
-    }
-
-    .menuItem {
-        padding: 15px;
-        color: rgb(var(--primary-0));
-        overflow: hidden;
-
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--primary-10));
-            }
+        &:has(> .dashboardNavigation) {
+            padding-left: 300px;
         }
 
-        &:active {
-            background: rgb(var(--primary-9));
+        &:has(> .dashboardNavigationCollapsed) {
+            padding-left: 84px;
         }
-    }
-
-    .menuItemHighlighted {
-        background: rgb(var(--primary-10) / .5);
-    }
-
-    .menuItemIcon {
-        color: rgb(var(--primary-0));
-        font-size: 24px;
-    }
 
-    .menuItemLabel {
-        transition: opacity 210ms var(--swift-out);
-        white-space: nowrap;
-    }
-}
-
-[dark] .dashboardNavigation {
-    .dividerLine {
-        background: rgb(var(--gray-2));
-    }
-
-    .menuItem {
-        @media (hover: hover) {
-            &:hover {
-                background: rgb(var(--gray-2));
-            }
+        .dashboardContent {
+            grid-area: content;
         }
 
-        &:active {
-            background: rgb(var(--gray-3));
+        .dashboardHeader {
+            grid-area: header;
         }
-    }
 
-    .menuItemHighlighted {
-        background: rgb(var(--gray-1));
-    }
-}
-
-.dashboardNavigationCollapsed {
-    composes: dashboardNavigation;
-
-    width: 84px;
-
-    .menuItem {
-        width: 54px;
-    }
-
-    .menuItemLabel {
-        opacity: 0;
-    }
-}
-
-.dashboardNavigationLogo {
-    display: flex;
-    height: 54px;
-    width: 54px;
-    align-items: center;
-    justify-content: center;
-
-    :is(svg) {
-        max-height: 48px;
-        max-width: 48px;
-        width: 100%;
-    }
-}
-
-.dashboardNavigationRoundingFix {
-    position: fixed;
-    display: block;
-    left: 300px;
-    height: var(--radius);
-    width: var(--radius);
-    content: '';
-    background: var(--dashboard-navigation-background);
-    transition: left 210ms var(--swift-out);
-    z-index: 750;
-
-    &::before {
-        position: absolute;
-        display: block;
-        inset: 0;
-        content: '';
-        background: rgb(var(--gray-1));
-    }
-
-    &:first-of-type {
-        top: 0;
-
-        &::before {
-            border-top-left-radius: var(--radius);
+        .dashboardMenu {
+            grid-area: menu;
         }
-    }
-
-    &:not(:first-of-type) {
-        bottom: 0;
 
-        &::before {
-            border-bottom-left-radius: var(--radius);
+        .dashboardSide {
+            grid-area: side;
         }
     }
 }
 
-.dashboardNavigationRoundingFixCollapsed {
-    composes: dashboardNavigationRoundingFix;
-
-    left: 84px;
-}
-
-.dashboard:not(:has(.dashboardMenu)) .dashboardNavigationRoundingFix::before {
-    background: rgb(var(--gray-0));
-}
-
-.dashboardTopBar {
-    position: sticky;
-    display: flex;
-    top: 0;
-    height: 84px;
-    padding-left: 30px;
-    padding-right: 30px;
-    align-items: center;
-    flex-flow: row;
-    gap: 15px;
-    background: rgb(var(--gray-0) / .9);
-    backdrop-filter: blur(10px) saturate(180%);
-    z-index: 100;
-
-    > h1 {
-        font-size: 18px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    > .icon {
-        color: var(--foreground-prominent);
-    }
-
-    > .separator {
-        height: 24px;
+@include mixin.breakpoint-down(md) {
+    .dashboard {
+        display: flex;
+        padding-top: 84px;
+        flex-flow: column;
     }
 }

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

@@ -0,0 +1,44 @@
+@use '../../../../components/src/css/mixin';
+
+.dashboardContent {
+    display: flex;
+    padding: 0 30px;
+    flex-flow: column;
+    flex-grow: 1;
+
+    > :is(.calendar, .table) {
+        margin-left: -30px;
+        margin-right: -30px;
+        height: calc(100dvh - 84px);
+        flex-grow: 1;
+    }
+
+    > .calendar {
+        border-left: 0;
+        border-right: 0;
+        border-radius: 0;
+
+        .calendarActions {
+            padding-left: 30px;
+            padding-right: 30px;
+        }
+    }
+
+    > .table {
+        border-top: 1px solid rgb(var(--gray-2));
+
+        .tableCell:first-child .tableCellContent {
+            padding-left: 30px;
+        }
+
+        .tableCell:last-child .tableCellContent {
+            padding-right: 30px;
+        }
+    }
+}
+
+@include mixin.breakpoint-down(md) {
+    .dashboardContentCollapsed {
+        display: none;
+    }
+}