@flux-ui/dashboard 3.0.0-next.10 → 3.0.0-next.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/package.json +5 -5
- package/src/css/component/Dashboard.module.scss +4 -4
- package/src/css/component/DashboardContent.module.scss +1 -1
- package/src/css/component/DashboardNavigation.module.scss +11 -11
- package/src/css/component/DashboardPane.module.scss +6 -6
- package/src/css/component/DashboardTopBar.module.scss +2 -2
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dashboard-background:
|
|
1
|
+
:root{--dashboard-background:var(--gray-0);--dashboard-duration:.36s;--dashboard-navigation-background:var(--primary-11);--dashboard-navigation-foreground:var(--primary-0)}[dark]{--dashboard-navigation-background:color-mix(in oklch,var(--gray-0),black 50%)}body:has(.root>.dashboard){background:var(--dashboard-background)}.dashboard{min-height:100dvh}.dashboard-mount{flex-flow:column;align-items:stretch;display:flex}.is-resizing,.is-resizing *{transition:none!important;animation:none!important}@media (min-width:1024px){.dashboard{transition:padding-left var(--dashboard-duration)var(--swift-out);grid-template-rows:minmax(0,1fr);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.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{flex-flow:column;padding-top:84px;display:flex}}.notice+.dashboard-content{padding-top:30px}.dashboard-content{flex-flow:column;flex-grow:1;padding:0 30px;display:flex}.dashboard-content>:is(.calendar,.table){flex-grow:1;height:calc(100dvh - 84px);margin-left:-30px;margin-right:-30px}.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{background:oklch(from var(--gray-0)l c h/.9);-webkit-backdrop-filter:blur(10px)saturate(180%);backdrop-filter:blur(10px)saturate(180%);z-index:100;flex-flow:row;align-items:center;gap:15px;height:84px;padding-left:30px;padding-right:30px;display:flex;position:sticky;top:0}.dashboard-top-bar>h1{text-overflow:ellipsis;white-space:nowrap;font-size:18px;overflow:hidden}.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);z-index:200;overflow:auto}.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/.9)}.dashboard-pane .filter{--background:var(--gray-1);width:100%;max-height:calc(100dvh - 84px);margin-top:-9px;padding:9px 18px 18px}.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{grid-row:1/span 2;width:300px;height:100dvh;position:sticky;top:0}}@media (max-width:1023.98px){.dashboard-menu{height:calc(100dvh - 84px)}.dashboard-menu-collapsed{display:none}}.dashboard-navigation{background:var(--dashboard-navigation-background);color:var(--dashboard-navigation-foreground);z-index:750;display:flex;position:fixed;top:0;left:0}.dashboard-navigation .divider{margin:3px 15px}.dashboard-navigation .divider-line{background:var(--primary-10)}.dashboard-navigation .menu{flex-grow:1}.dashboard-navigation .menu-item{min-width:54px;height:54px;color:var(--dashboard-navigation-foreground);gap:21px;padding:15px;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/.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);white-space:nowrap;transition-property:filter,opacity,translate}[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{justify-content:center;align-items:center;width:54px;height:54px;display:flex}.dashboard-navigation-logo :is(svg){width:100%;max-width:48px;max-height:48px}.dashboard-navigation-rounding-fix{height:var(--radius);width:var(--radius);content:"";background:var(--dashboard-navigation-background);transition:left var(--dashboard-duration)var(--swift-out);display:block;position:absolute}.dashboard-navigation-rounding-fix:before{content:"";background:var(--gray-1);display:block;position:absolute;inset:0}.dashboard:not(:has(.dashboard-menu)) .dashboard-navigation-rounding-fix:before{background:var(--gray-0)}@media (min-width:1024px){.dashboard-navigation{width:300px;height:100dvh;transition:width var(--dashboard-duration)var(--swift-out);flex-flow:column;gap:15px;padding:15px}.dashboard-navigation-collapsed{width:84px}.dashboard-navigation-collapsed .menu-item-label{filter:blur(6px);opacity:0;translate:-12px}.dashboard-navigation-header{display:flex}.dashboard-navigation-header .menu-item{display:none}.dashboard-navigation-nav{flex-flow:column;flex-grow:1;display:flex}.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{content:"";background:oklch(from var(--gray-3)l c h/.5);-webkit-backdrop-filter:blur(3px)saturate(180%);backdrop-filter:blur(3px)saturate(180%);width:100dvw;height:100dvh;transition:var(--dashboard-duration)var(--swift-out);z-index:1900;transition-property:background,-webkit-backdrop-filter,backdrop-filter;display:block;position:fixed;inset:0}.dashboard-navigation-header{width:inherit;height:inherit;flex-flow:row;justify-content:space-between;align-items:center;padding:0 15px;display:flex}.dashboard-navigation-header .menu-item{justify-content:center;align-self:center}.dashboard-navigation-nav{background:var(--dashboard-navigation-background);width:min(300px,100dvw - 42px);height:100dvh;transition:translate var(--dashboard-duration)var(--swift-out);z-index:2000;flex-flow:column;padding:15px;display:flex;position:fixed;top:0;left:0}.dashboard-navigation-rounding-fix{z-index:750;position:fixed;top:84px}.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{-webkit-backdrop-filter:none;backdrop-filter:none;pointer-events:none;background:0 0}.dashboard-navigation-collapsed .dashboard-navigation-nav{pointer-events:none;translate:-100%}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flux-ui/dashboard",
|
|
3
3
|
"description": "Contains components to create dashboards with Flux UI.",
|
|
4
|
-
"version": "3.0.0-next.
|
|
4
|
+
"version": "3.0.0-next.12",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"funding": "https://github.com/sponsors/basmilius",
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"typings": "./dist/index.d.ts",
|
|
52
52
|
"sideEffects": false,
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@flux-ui/components": "3.0.0-next.
|
|
55
|
-
"@flux-ui/internals": "3.0.0-next.
|
|
54
|
+
"@flux-ui/components": "3.0.0-next.12",
|
|
55
|
+
"@flux-ui/internals": "3.0.0-next.12",
|
|
56
56
|
"vue": "^3.5.17"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@basmilius/vite-preset": "^2.4.
|
|
60
|
-
"@types/node": "^24.0.
|
|
59
|
+
"@basmilius/vite-preset": "^2.4.1",
|
|
60
|
+
"@types/node": "^24.0.7",
|
|
61
61
|
"@vitejs/plugin-vue": "^6.0.0",
|
|
62
62
|
"sass-embedded": "^1.89.2",
|
|
63
63
|
"typescript": "^5.8.3",
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
@use '../../../../components/src/css/mixin';
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--dashboard-background:
|
|
4
|
+
--dashboard-background: var(--gray-0);
|
|
5
5
|
--dashboard-duration: 360ms;
|
|
6
|
-
--dashboard-navigation-background:
|
|
7
|
-
--dashboard-navigation-foreground:
|
|
6
|
+
--dashboard-navigation-background: var(--primary-11);
|
|
7
|
+
--dashboard-navigation-foreground: var(--primary-0);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
[dark] {
|
|
11
|
-
--dashboard-navigation-background: color-mix(in
|
|
11
|
+
--dashboard-navigation-background: color-mix(in oklch, var(--gray-0), black 50%);
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
body:has(.root > .dashboard) {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.dividerLine {
|
|
17
|
-
background:
|
|
17
|
+
background: var(--primary-10);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.menu {
|
|
@@ -31,17 +31,17 @@
|
|
|
31
31
|
|
|
32
32
|
@media (hover: hover) {
|
|
33
33
|
&:hover {
|
|
34
|
-
background:
|
|
34
|
+
background: var(--primary-10);
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
&:active {
|
|
39
|
-
background:
|
|
39
|
+
background: var(--primary-9);
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.menuItemHighlighted {
|
|
44
|
-
background:
|
|
44
|
+
background: oklch(from var(--primary-10) l c h / .5);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
.menuItemIcon {
|
|
@@ -62,23 +62,23 @@
|
|
|
62
62
|
|
|
63
63
|
[dark] .dashboardNavigation {
|
|
64
64
|
.dividerLine {
|
|
65
|
-
background:
|
|
65
|
+
background: var(--gray-2);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.menuItem {
|
|
69
69
|
@media (hover: hover) {
|
|
70
70
|
&:hover {
|
|
71
|
-
background:
|
|
71
|
+
background: var(--gray-2);
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
&:active {
|
|
76
|
-
background:
|
|
76
|
+
background: var(--gray-3);
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.menuItemHighlighted {
|
|
81
|
-
background:
|
|
81
|
+
background: var(--gray-1);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
|
|
@@ -110,12 +110,12 @@
|
|
|
110
110
|
display: block;
|
|
111
111
|
inset: 0;
|
|
112
112
|
content: '';
|
|
113
|
-
background:
|
|
113
|
+
background: var(--gray-1);
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
.dashboard:not(:has(.dashboardMenu)) .dashboardNavigationRoundingFix::before {
|
|
118
|
-
background:
|
|
118
|
+
background: var(--gray-0);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
@include mixin.breakpoint-up(lg) {
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
width: 100dvw;
|
|
186
186
|
height: 100dvh;
|
|
187
187
|
content: '';
|
|
188
|
-
background:
|
|
188
|
+
background: oklch(from var(--gray-3) l c h / .5);
|
|
189
189
|
backdrop-filter: blur(3px) saturate(180%);
|
|
190
190
|
transition: var(--dashboard-duration) var(--swift-out);
|
|
191
191
|
transition-property: background, backdrop-filter;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
@use '../../../../components/src/css/mixin';
|
|
2
2
|
|
|
3
3
|
.dashboardPane {
|
|
4
|
-
background:
|
|
4
|
+
background: var(--gray-1);
|
|
5
5
|
overflow: auto;
|
|
6
6
|
z-index: 200;
|
|
7
7
|
|
|
8
8
|
.menuSubHeader {
|
|
9
|
-
background: linear-gradient(to bottom,
|
|
9
|
+
background: linear-gradient(to bottom, var(--gray-1) 75%, transparent);
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.dashboardTopBar {
|
|
13
|
-
background:
|
|
13
|
+
background: oklch(from var(--gray-1) l c h / .9);
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.filter {
|
|
17
|
-
--background:
|
|
17
|
+
--background: var(--gray-1);
|
|
18
18
|
|
|
19
19
|
max-height: calc(100dvh - 84px);
|
|
20
20
|
margin-top: -9px;
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
.dashboardMenu {
|
|
51
51
|
composes: dashboardPane;
|
|
52
52
|
|
|
53
|
-
border-right: 1px solid
|
|
53
|
+
border-right: 1px solid var(--gray-2);
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
.dashboardMenuBody {
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
.dashboardSide {
|
|
61
61
|
composes: dashboardPane;
|
|
62
62
|
|
|
63
|
-
border-left: 1px solid
|
|
63
|
+
border-left: 1px solid var(--gray-2);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
@include mixin.breakpoint-up(lg) {
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
align-items: center;
|
|
11
11
|
flex-flow: row;
|
|
12
12
|
gap: 15px;
|
|
13
|
-
background:
|
|
13
|
+
background: oklch(from var(--gray-0) l c h / .9);
|
|
14
14
|
backdrop-filter: blur(10px) saturate(180%);
|
|
15
15
|
z-index: 100;
|
|
16
16
|
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
[dark] .dashboardHeaderScrolled {
|
|
44
|
-
box-shadow: 0 1px 0
|
|
44
|
+
box-shadow: 0 1px 0 var(--gray-1), var(--shadow-md);
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
@include mixin.breakpoint-down(md) {
|