@flux-ui/dashboard 3.0.0-next.2 → 3.0.0-next.20

package/README.md

@@ -1,45 +1,16 @@
-# Flux
+# `@flux-ui/dashboard`
 
-This repository contains the source code for the basic components that are used throughout our front-end projects. It
-targets Vue 3+. Please read the following instructions and checks in order to proceed.
+Contains Flux UI components for creating dashboards.
 
-## 📦 Registry
+## ⭐️ Prerequisites
 
-- The UI library package is available under `@flux-ui/components`.
-- The Dashboard library package is available under `@flux-ui/dashboard`.
-- The internal package is available under `@flux-ui/internals`.
+- Bun >= 1.2.13
+- Node >= 23
 
-## ⚠️ Requirements
+## 🚀 Getting started
 
-- Install Node.js ^22
-- Install pnpm using `npm i -g pnpm`.
-- Configure a new environment variable `FONTAWESOME_NPM_AUTH_TOKEN`. This should be a valid Font Awesome private npm auth token.
-- Use `pnpm install` to install the required packages.
-- Use `pnpm dev` to start a build watcher for both targets.
-- Use `pnpm build` to build a production bundle.
-- Use `pnpm link` to link the dist folder of flux to your global node_modules.
-
-## 🪵 Git
-
-All commit messages and branches will be in English.
-
-### Branches
-
-- **Main** — Contains the latest stable release and is the exact source that is running in production.
-- **Develop** — Contains the latest staging release that is marked for deployment and is the exact source that is running on staging.
-- **Feature branches** — Any feature should have its own feature branch. Once complete, the branch should be merged into the _develop_ branch and the feature branch should be deleted.
-- **Bugfix branches** — When a bug is found, it should be fixed within a bugfix branch. Once complete the branch should be merged into the _develop_ branch and the feature branch should be deleted.
-
-### Commit messages
-
-Commit messages are bound to the following templates:
-
-- `<type>: <message> `
-- `<type>(<feature>): <message>`
-- `<type>(<feature>): <message> [<issue-number>]`
-
-#### Examples
-
-- `feat(expandable): adds header slot to expandable.`
-- `feat(expandable): adds header slot to expandable. [FLUX-123]`
-- `chore: adds vue 3 build target.`
+1. Make sure that the monorepo of Flux is used.
+2. Run `bun install` in the root of the project.
+3. Run `bun --cwd packages/dashboard build` to build the project.
+4. To link Flux Dashboard globally, using Bun, run `bun link --cwd packages/dashboard`.
+    - In another project, use `link:@flux-ui/dashboard` as the dependency version in `package.json`.

package/dist/component/FluxDashboard.vue.d.ts

@@ -3,16 +3,16 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Readonly<{
         default(): VNode;
-        header(): VNode;
-        navigation(): VNode;
-        menu(): VNode;
-        side(): VNode;
+        header?(): VNode;
+        navigation?(): VNode;
+        menu?(): VNode;
+        side?(): VNode;
     }> & {
         default(): VNode;
-        header(): VNode;
-        navigation(): VNode;
-        menu(): VNode;
-        side(): VNode;
+        header?(): VNode;
+        navigation?(): VNode;
+        menu?(): VNode;
+        side?(): VNode;
     };
     refs: {};
     rootEl: HTMLDivElement;

package/dist/component/FluxDashboard.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluxDashboard.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxDashboard.vue"],"names":[],"mappings":"AAoDI,OAAO,EAAgB,KAAK,EAAS,MAAM,KAAK,CAAC;AAqCrD,iBAAS,cAAc;WA4BT,OAAO,IAA6B;;mBA5D/B,KAAK;kBACN,KAAK;sBACD,KAAK;gBACX,KAAK;gBACL,KAAK;;mBAJF,KAAK;kBACN,KAAK;sBACD,KAAK;gBACX,KAAK;gBACL,KAAK;;;;EA6DpB;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FluxDashboard.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxDashboard.vue"],"names":[],"mappings":"AAwDI,OAAO,EAAgB,KAAK,EAAS,MAAM,KAAK,CAAC;AAqCrD,iBAAS,cAAc;WA+BT,OAAO,IAA6B;;mBA/D/B,KAAK;mBACL,KAAK;uBACD,KAAK;iBACX,KAAK;iBACL,KAAK;;mBAJH,KAAK;mBACL,KAAK;uBACD,KAAK;iBACX,KAAK;iBACL,KAAK;;;;EAgErB;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0RAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAEpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/component/FluxDashboardMenu.vue.d.ts

@@ -1,7 +1,7 @@
 import { FluxIconName } from '@flux-ui/types';
 type __VLS_Props = {
     readonly icon?: FluxIconName;
-    readonly title: string;
+    readonly title?: string;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/component/FluxDashboardMenu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FluxDashboardMenu.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxDashboardMenu.vue"],"names":[],"mappings":"AAyCI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAC1B,CAAC;AAON,iBAAS,cAAc;WA8DT,OAAO,IAA6B;;iCAZb,GAAG;+BACJ,GAAG;yBACT,GAAG;;;;EAehC;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"FluxDashboardMenu.vue.d.ts","sourceRoot":"","sources":["../../src/component/FluxDashboardMenu.vue"],"names":[],"mappings":"AA2CI,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAKnD,KAAK,WAAW,GAAG;IACf,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAON,iBAAS,cAAc;WAgET,OAAO,IAA6B;;iCAZb,GAAG;+BACJ,GAAG;yBACT,GAAG;;;;EAehC;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,0SAOnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.css

@@ -0,0 +1,425 @@
+:root {
+  --dashboard-background: var(--gray-0);
+  --dashboard-duration: 360ms;
+  --dashboard-navigation-background: var(--primary-11);
+  --dashboard-navigation-foreground: var(--primary-0);
+}
+
+[dark] {
+  --dashboard-navigation-background: color-mix(in oklch, var(--gray-0), black 25%);
+  --dashboard-navigation-foreground: var(--gray-9);
+}
+
+body:has(.root > .dashboard) {
+  background: var(--dashboard-background);
+}
+
+.dashboard {
+  min-height: 100dvh;
+}
+
+.dashboard-mount {
+  display: flex;
+  align-items: stretch;
+  flex-flow: column;
+}
+
+.is-resizing, .is-resizing * {
+  animation: none !important;
+  transition: none !important;
+}
+
+@media (min-width: 1024px) {
+  .dashboard {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: minmax(0, 1fr);
+    transition: padding-left var(--dashboard-duration) var(--swift-out);
+  }
+  .dashboard:has(> .dashboard-navigation) {
+    padding-left: 300px;
+  }
+  .dashboard:has(> .dashboard-navigation-collapsed) {
+    padding-left: 84px;
+  }
+  .dashboard .dashboard-mount {
+    grid-column: 2;
+  }
+  .dashboard .dashboard-menu {
+    grid-column: 1;
+  }
+  .dashboard .dashboard-side {
+    grid-column: 3;
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard {
+    display: flex;
+    padding-top: 84px;
+    flex-flow: column;
+  }
+}.notice + .dashboard-content {
+  padding-top: 30px;
+}
+
+.dashboard-content {
+  display: flex;
+  padding: 0 30px;
+  flex-flow: column;
+  flex-grow: 1;
+}
+.dashboard-content > :is(.calendar, .table) {
+  margin-left: -30px;
+  margin-right: -30px;
+  height: calc(100dvh - 84px);
+  flex-grow: 1;
+}
+.dashboard-content > .calendar {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+}
+.dashboard-content > .calendar .calendar-actions {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.dashboard-content > .table {
+  border-top: 1px solid var(--gray-2);
+}
+.dashboard-content > .table .table-cell:first-child .table-cell-content {
+  padding-left: 30px;
+}
+.dashboard-content > .table .table-cell:last-child .table-cell-content {
+  padding-right: 30px;
+}
+
+@media (max-width: 1023.98px) {
+  .dashboard-content-collapsed {
+    display: none;
+  }
+}.dashboard-top-bar {
+  position: sticky;
+  display: flex;
+  top: 0;
+  height: 84px;
+  padding-left: 30px;
+  padding-right: 30px;
+  align-items: center;
+  flex-flow: row;
+  gap: 15px;
+  background: oklch(from var(--gray-0) l c h/0.9);
+  backdrop-filter: blur(10px) saturate(180%);
+  z-index: 100;
+}
+.dashboard-top-bar > h1 {
+  font-size: 18px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dashboard-top-bar > .icon {
+  color: var(--foreground-prominent);
+}
+.dashboard-top-bar > .separator {
+  height: 24px;
+}
+
+.dashboard-header:not(.route-transition-enter-active):not(.route-transition-leave-active) {
+  transition: box-shadow var(--dashboard-duration) var(--swift-out);
+}
+
+.dashboard-header-scrolled {
+  box-shadow: var(--shadow-md);
+}
+
+[dark] .dashboard-header-scrolled {
+  box-shadow: 0 1px 0 var(--gray-1), var(--shadow-md);
+}
+
+@media (max-width: 1023.98px) {
+  .dashboard > .dashboard-top-bar {
+    top: 84px;
+  }
+  .dashboard > .dashboard-top-bar-collapsed {
+    display: none;
+  }
+}.dashboard-pane {
+  background: var(--gray-1);
+  overflow: auto;
+  z-index: 200;
+}
+.dashboard-pane .menu-sub-header {
+  background: linear-gradient(to bottom, var(--gray-1) 75%, transparent);
+}
+.dashboard-pane .dashboard-top-bar {
+  background: oklch(from var(--gray-1) l c h/0.9);
+}
+.dashboard-pane .filter {
+  --background: var(--gray-1);
+  max-height: calc(100dvh - 84px);
+  margin-top: -9px;
+  padding: 9px 18px 18px;
+  width: 100%;
+}
+.dashboard-pane .filter .filter-header {
+  margin-left: -18px;
+  margin-right: -18px;
+  padding-left: 18px;
+  padding-right: 18px;
+}
+.dashboard-pane .filter .menu {
+  font-size: 14px;
+}
+.dashboard-pane .filter .menu-item-command {
+  font-size: 12px;
+}
+.dashboard-pane .filter .menu-item-icon {
+  font-size: 16px;
+}
+.dashboard-pane .filter .menu > :where(.divider, .separator) {
+  margin-left: -18px;
+  margin-right: -18px;
+}
+
+.dashboard-menu {
+  border-right: 1px solid var(--gray-2);
+}
+
+.dashboard-menu-body {
+  padding: 0 18px 30px;
+}
+
+.dashboard-side {
+  border-left: 1px solid var(--gray-2);
+}
+
+@media (min-width: 1024px) {
+  .dashboard-pane {
+    position: sticky;
+    top: 0;
+    height: 100dvh;
+    width: 300px;
+    grid-row: 1/span 2;
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard-menu {
+    height: calc(100dvh - 84px);
+  }
+  .dashboard-menu-collapsed {
+    display: none;
+  }
+}.dashboard-navigation {
+  position: fixed;
+  display: flex;
+  top: 0;
+  left: 0;
+  background: var(--dashboard-navigation-background);
+  color: var(--dashboard-navigation-foreground);
+  z-index: 750;
+}
+.dashboard-navigation .divider {
+  margin: 3px 15px;
+}
+.dashboard-navigation .divider-line {
+  background: var(--primary-10);
+}
+.dashboard-navigation .menu {
+  flex-grow: 1;
+}
+.dashboard-navigation .menu-item {
+  height: 54px;
+  min-width: 54px;
+  padding: 15px;
+  gap: 21px;
+  color: var(--dashboard-navigation-foreground);
+  overflow: hidden;
+}
+@media (hover: hover) {
+  .dashboard-navigation .menu-item:hover {
+    background: var(--primary-10);
+  }
+}
+.dashboard-navigation .menu-item:active {
+  background: var(--primary-9);
+}
+.dashboard-navigation .menu-item-highlighted {
+  background: oklch(from var(--primary-10) l c h/0.5);
+}
+.dashboard-navigation .menu-item-icon {
+  color: var(--dashboard-navigation-foreground);
+  font-size: 24px;
+}
+.dashboard-navigation .menu-item-label {
+  transition: var(--dashboard-duration) var(--swift-out);
+  transition-property: filter, opacity, translate;
+  white-space: nowrap;
+}
+
+.dashboard-navigation-collapsed {
+}
+
+[dark] .dashboard-navigation .divider-line {
+  background: var(--gray-2);
+}
+@media (hover: hover) {
+  [dark] .dashboard-navigation .menu-item:hover {
+    background: var(--gray-2);
+  }
+}
+[dark] .dashboard-navigation .menu-item:active {
+  background: var(--gray-3);
+}
+[dark] .dashboard-navigation .menu-item-highlighted {
+  background: var(--gray-1);
+}
+
+.dashboard-navigation-logo {
+  display: flex;
+  height: 54px;
+  width: 54px;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-navigation-logo :is(svg) {
+  max-height: 48px;
+  max-width: 48px;
+  width: 100%;
+}
+
+.dashboard-navigation-rounding-fix {
+  position: absolute;
+  display: block;
+  height: var(--radius);
+  width: var(--radius);
+  content: "";
+  background: var(--dashboard-navigation-background);
+  transition: left var(--dashboard-duration) var(--swift-out);
+}
+.dashboard-navigation-rounding-fix::before {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--gray-1);
+}
+
+.dashboard:not(:has(.dashboard-menu)) .dashboard-navigation-rounding-fix::before {
+  background: var(--gray-0);
+}
+
+@media (min-width: 1024px) {
+  .dashboard-navigation {
+    height: 100dvh;
+    width: 300px;
+    padding: 15px;
+    flex-flow: column;
+    gap: 15px;
+    transition: width var(--dashboard-duration) var(--swift-out);
+  }
+  .dashboard-navigation-collapsed {
+    width: 84px;
+  }
+  .dashboard-navigation-collapsed .menu-item-label {
+    filter: blur(6px);
+    opacity: 0;
+    translate: -12px 0;
+  }
+  .dashboard-navigation-header {
+    display: flex;
+  }
+  .dashboard-navigation-header .menu-item {
+    display: none;
+  }
+  .dashboard-navigation-nav {
+    display: flex;
+    flex-flow: column;
+    flex-grow: 1;
+  }
+  .dashboard-navigation-rounding-fix {
+    left: 100%;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type {
+    top: 0;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type::before {
+    border-top-left-radius: var(--radius);
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type) {
+    bottom: 0;
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type)::before {
+    border-bottom-left-radius: var(--radius);
+  }
+}
+@media (max-width: 1023.98px) {
+  .dashboard-navigation {
+    width: 100dvw;
+    height: 84px;
+  }
+  .dashboard-navigation::after {
+    position: fixed;
+    display: block;
+    inset: 0;
+    width: 100dvw;
+    height: 100dvh;
+    content: "";
+    background: oklch(from var(--gray-3) l c h/0.5);
+    backdrop-filter: blur(3px) saturate(180%);
+    transition: var(--dashboard-duration) var(--swift-out);
+    transition-property: background, backdrop-filter;
+    z-index: 1900;
+  }
+  .dashboard-navigation-header {
+    display: flex;
+    width: inherit;
+    height: inherit;
+    padding: 0 15px;
+    align-items: center;
+    flex-flow: row;
+    justify-content: space-between;
+  }
+  .dashboard-navigation-header .menu-item {
+    align-self: center;
+    justify-content: center;
+  }
+  .dashboard-navigation-nav {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    width: min(300px, 100dvw - 42px);
+    height: 100dvh;
+    padding: 15px;
+    flex-flow: column;
+    background: var(--dashboard-navigation-background);
+    transition: translate var(--dashboard-duration) var(--swift-out);
+    z-index: 2000;
+  }
+  .dashboard-navigation-rounding-fix {
+    position: fixed;
+    top: 84px;
+    z-index: 750;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type {
+    left: 0;
+  }
+  .dashboard-navigation-rounding-fix:first-of-type::before {
+    border-top-left-radius: var(--radius);
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type) {
+    right: 0;
+  }
+  .dashboard-navigation-rounding-fix:not(:first-of-type)::before {
+    border-top-right-radius: var(--radius);
+  }
+  .dashboard-navigation-collapsed::after {
+    background: transparent;
+    backdrop-filter: none;
+    pointer-events: none;
+  }
+  .dashboard-navigation-collapsed .dashboard-navigation-nav {
+    pointer-events: none;
+    translate: -100% 0;
+  }
+}