@flux-ui/dashboard 3.0.0-next.2 → 3.0.0-next.4
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/flux-dashboard.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--dashboard-background:
|
|
1
|
+
:root{--dashboard-background:rgb(var(--gray-0));--dashboard-duration:.36s;--dashboard-navigation-background:rgb(var(--primary-11));--dashboard-navigation-foreground:rgb(var(--primary-0))}[dark]{--dashboard-navigation-background:color-mix(in srgb,rgb(var(--gray-0)),black 50%)}body:has(.root>.dashboard){background:var(--dashboard-background)}.dashboard{min-height:100dvh}.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:"menu header side""menu content side"minmax(0,1fr)/auto minmax(0,1fr) auto;display:grid}.dashboard:has(>.dashboard-navigation){padding-left:300px}.dashboard:has(>.dashboard-navigation-collapsed){padding-left:84px}.dashboard .dashboard-content{grid-area:content}.dashboard .dashboard-header{grid-area:header}.dashboard .dashboard-menu{grid-area:menu}.dashboard .dashboard-side{grid-area:side}}@media (max-width:1023.98px){.dashboard{flex-flow:column;padding-top:84px;display:flex}}.dashboard-content{flex-flow:column;flex-grow:1;padding:0 30px;display:flex}.dashboard-content>:-webkit-any(.calendar,.table){flex-grow:1;height:calc(100dvh - 84px);margin-left:-30px;margin-right:-30px}.dashboard-content>:-moz-any(.calendar,.table){flex-grow:1;height:calc(100dvh - 84px);margin-left:-30px;margin-right:-30px}.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 rgb(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:rgb(var(--gray-0)/.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 rgb(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:rgb(var(--gray-1));z-index:200;overflow:auto}.dashboard-pane .menu-sub-header{background:linear-gradient(to bottom,rgb(var(--gray-1))75%,transparent)}.dashboard-pane .dashboard-top-bar{background:rgb(var(--gray-1)/.9)}.dashboard-pane .filter{--background:rgb(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 rgb(var(--gray-2))}.dashboard-menu-body{padding:0 18px 30px}.dashboard-side{border-left:1px solid rgb(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:rgb(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:rgb(var(--primary-10))}}.dashboard-navigation .menu-item:active{background:rgb(var(--primary-9))}.dashboard-navigation .menu-item-highlighted{background:rgb(var(--primary-10)/.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:rgb(var(--gray-2))}@media (hover:hover){[dark] .dashboard-navigation .menu-item:hover{background:rgb(var(--gray-2))}}[dark] .dashboard-navigation .menu-item:active{background:rgb(var(--gray-3))}[dark] .dashboard-navigation .menu-item-highlighted{background:rgb(var(--gray-1))}.dashboard-navigation-logo{justify-content:center;align-items:center;width:54px;height:54px;display:flex}.dashboard-navigation-logo :-webkit-any(svg){width:100%;max-width:48px;max-height:48px}.dashboard-navigation-logo :-moz-any(svg){width:100%;max-width:48px;max-height:48px}.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:rgb(var(--gray-1));display:block;position:absolute;top:0;bottom:0;left:0;right:0}.dashboard:not(:has(.dashboard-menu)) .dashboard-navigation-rounding-fix:before{background:rgb(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:rgb(var(--gray-3)/.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;top:0;bottom:0;left:0;right: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/dist/flux-dashboard.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { ref as g, watch as F, unref as
|
|
1
|
+
import { ref as g, watch as F, unref as o, defineComponent as b, provide as E, createElementBlock as u, openBlock as i, normalizeClass as l, renderSlot as r, inject as x, createBlock as $, withCtx as N, createCommentVNode as C, createVNode as h, toDisplayString as y, createElementVNode as v, useSlots as R, resolveComponent as A, mergeProps as j, normalizeProps as O, guardReactiveProps as P, Fragment as V, renderList as J } from "vue";
|
|
2
2
|
import { DateTime as T } from "luxon";
|
|
3
3
|
import { FluxIcon as w, FluxSpacer as S, FluxMenuItem as k } from "@flux-ui/components";
|
|
4
|
-
function K(n, s, a,
|
|
4
|
+
function K(n, s, a, e = { passive: !0 }) {
|
|
5
5
|
F(n, (t, d, c) => {
|
|
6
|
-
t && (t.addEventListener(s, a,
|
|
6
|
+
t && (t.addEventListener(s, a, e), c(() => t.removeEventListener(s, a)));
|
|
7
7
|
}, { immediate: !0 });
|
|
8
8
|
}
|
|
9
9
|
function H(n, s) {
|
|
10
|
-
let a = `flux/${n}`,
|
|
10
|
+
let a = `flux/${n}`, e = g(t() ?? s);
|
|
11
11
|
function t() {
|
|
12
12
|
if (a in localStorage) {
|
|
13
13
|
let d = JSON.parse(localStorage.getItem(a));
|
|
@@ -15,33 +15,33 @@ function H(n, s) {
|
|
|
15
15
|
}
|
|
16
16
|
return null;
|
|
17
17
|
}
|
|
18
|
-
return F(
|
|
18
|
+
return F(e, (d) => {
|
|
19
19
|
let c = d;
|
|
20
20
|
T.isDateTime(d) && (c = ["DateTime", d.toISO({ includeOffset: !0, extendedZone: !0 })]), localStorage.setItem(a, JSON.stringify(c));
|
|
21
|
-
}),
|
|
21
|
+
}), e;
|
|
22
22
|
}
|
|
23
23
|
function Z(n) {
|
|
24
24
|
let s = g(0), a = g(0);
|
|
25
25
|
return n || (n = g(document)), K(n, "scroll", () => {
|
|
26
|
-
let
|
|
27
|
-
|
|
26
|
+
let e = o(n);
|
|
27
|
+
e instanceof Document && (e = e.scrollingElement), s.value = (e == null ? void 0 : e.scrollLeft) ?? 0, a.value = (e == null ? void 0 : e.scrollTop) ?? 0;
|
|
28
28
|
}), { x: s, y: a };
|
|
29
29
|
}
|
|
30
|
-
const z = Symbol(), q = "root", G = "dashboard", Q = "is-resizing", U = "dashboard-navigation", W = "dashboard-navigation-collapsed", X = "dashboard-
|
|
30
|
+
const z = Symbol(), q = "root", G = "dashboard", Q = "is-resizing", U = "dashboard-navigation", W = "dashboard-navigation-collapsed", X = "dashboard-content", Y = "dashboard-header", aa = "dashboard-menu", oa = "dashboard-side", L = { root: q, dashboard: G, isResizing: Q, dashboardNavigation: U, dashboardNavigationCollapsed: W, dashboardContent: X, dashboardHeader: Y, dashboardMenu: aa, dashboardSide: oa }, Wa = /* @__PURE__ */ b({
|
|
31
31
|
__name: "FluxDashboard",
|
|
32
32
|
setup(n) {
|
|
33
|
-
const s = H("dashboard-menu-collapsed", !0), a = H("dashboard-navigation-collapsed", !0),
|
|
33
|
+
const s = H("dashboard-menu-collapsed", !0), a = H("dashboard-navigation-collapsed", !0), e = g(!1);
|
|
34
34
|
return E(z, {
|
|
35
35
|
isMenuCollapsed: s,
|
|
36
36
|
isNavigationCollapsed: a
|
|
37
37
|
}), F(a, (t, d, c) => {
|
|
38
38
|
let m;
|
|
39
39
|
function M() {
|
|
40
|
-
clearTimeout(m),
|
|
40
|
+
clearTimeout(m), e.value = !0, m = setTimeout(() => e.value = !1, 10);
|
|
41
41
|
}
|
|
42
42
|
window.addEventListener("resize", M, { passive: !0 }), c(() => window.removeEventListener("resize", M));
|
|
43
43
|
}, { immediate: !0 }), (t, d) => (i(), u("div", {
|
|
44
|
-
class: l([
|
|
44
|
+
class: l([o(L).dashboard, e.value && o(L).isResizing])
|
|
45
45
|
}, [
|
|
46
46
|
r(t.$slots, "navigation"),
|
|
47
47
|
r(t.$slots, "menu"),
|
|
@@ -51,33 +51,33 @@ const z = Symbol(), q = "root", G = "dashboard", Q = "is-resizing", U = "dashboa
|
|
|
51
51
|
], 2));
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
|
-
function
|
|
54
|
+
function D() {
|
|
55
55
|
const n = x(z);
|
|
56
56
|
if (!n)
|
|
57
57
|
throw new Error("[Flux] useDashboardInjection() was used outside a FluxDashboard component.");
|
|
58
58
|
return n;
|
|
59
59
|
}
|
|
60
|
-
const ea = "dashboard-content",
|
|
60
|
+
const ea = "dashboard-content", sa = "calendar", na = "table", ta = "calendar-actions", da = "table-cell", ra = "table-cell-content", ia = "dashboard-content-collapsed", B = { dashboardContent: ea, calendar: sa, table: na, calendarActions: ta, tableCell: da, tableCellContent: ra, dashboardContentCollapsed: ia }, Xa = /* @__PURE__ */ b({
|
|
61
61
|
__name: "FluxDashboardContent",
|
|
62
62
|
setup(n) {
|
|
63
|
-
const { isMenuCollapsed: s } =
|
|
64
|
-
return (a,
|
|
65
|
-
class: l([
|
|
63
|
+
const { isMenuCollapsed: s } = D();
|
|
64
|
+
return (a, e) => (i(), u("main", {
|
|
65
|
+
class: l([o(B).dashboardContent, !o(s) && o(B).dashboardContentCollapsed])
|
|
66
66
|
}, [
|
|
67
67
|
r(a.$slots, "default")
|
|
68
68
|
], 2));
|
|
69
69
|
}
|
|
70
|
-
}),
|
|
70
|
+
}), la = "dashboard-top-bar", ca = "icon", ua = "separator", ha = "dashboard-header", ba = "route-transition-enter-active", ma = "route-transition-leave-active", pa = "dashboard", va = "dashboard-top-bar-collapsed", ga = "dashboard-header-scrolled dashboard-header", _ = { dashboardTopBar: la, icon: ca, separator: ua, dashboardHeader: ha, routeTransitionEnterActive: ba, routeTransitionLeaveActive: ma, dashboard: pa, dashboardTopBarCollapsed: va, dashboardHeaderScrolled: ga }, I = /* @__PURE__ */ b({
|
|
71
71
|
__name: "FluxDashboardTopBar",
|
|
72
72
|
setup(n) {
|
|
73
|
-
const { isMenuCollapsed: s } =
|
|
74
|
-
return (a,
|
|
75
|
-
class: l([
|
|
73
|
+
const { isMenuCollapsed: s } = D();
|
|
74
|
+
return (a, e) => (i(), u("header", {
|
|
75
|
+
class: l([o(_).dashboardTopBar, !o(s) && o(_).dashboardTopBarCollapsed])
|
|
76
76
|
}, [
|
|
77
77
|
r(a.$slots, "default")
|
|
78
78
|
], 2));
|
|
79
79
|
}
|
|
80
|
-
}),
|
|
80
|
+
}), fa = { key: 1 }, Ya = /* @__PURE__ */ b({
|
|
81
81
|
__name: "FluxDashboardHeader",
|
|
82
82
|
props: {
|
|
83
83
|
icon: {},
|
|
@@ -85,54 +85,54 @@ const ea = "dashboard-content", oa = "calendar", sa = "table", na = "calendar-ac
|
|
|
85
85
|
},
|
|
86
86
|
setup(n) {
|
|
87
87
|
const { y: s } = Z();
|
|
88
|
-
return (a,
|
|
89
|
-
class: l(
|
|
88
|
+
return (a, e) => (i(), $(I, {
|
|
89
|
+
class: l(o(s) > 0 ? o(_).dashboardHeaderScrolled : o(_).dashboardHeader)
|
|
90
90
|
}, {
|
|
91
|
-
default:
|
|
91
|
+
default: N(() => [
|
|
92
92
|
r(a.$slots, "start"),
|
|
93
|
-
a.icon ? (i(), $(
|
|
93
|
+
a.icon ? (i(), $(o(w), {
|
|
94
94
|
key: 0,
|
|
95
95
|
name: a.icon
|
|
96
|
-
}, null, 8, ["name"])) :
|
|
97
|
-
a.title ? (i(), u("h1",
|
|
98
|
-
h(
|
|
96
|
+
}, null, 8, ["name"])) : C("", !0),
|
|
97
|
+
a.title ? (i(), u("h1", fa, y(a.title), 1)) : C("", !0),
|
|
98
|
+
h(o(S)),
|
|
99
99
|
r(a.$slots, "end")
|
|
100
100
|
]),
|
|
101
101
|
_: 3
|
|
102
102
|
}, 8, ["class"]));
|
|
103
103
|
}
|
|
104
|
-
}),
|
|
104
|
+
}), $a = "dashboard-pane", Ca = "menu-sub-header", _a = "dashboard-top-bar", Na = "filter", Da = "filter-header", Fa = "menu", ya = "menu-item-command", Sa = "menu-item-icon", Ia = "divider", Ma = "separator", Ta = "dashboard-menu-body", ka = "dashboard-menu-collapsed", Ha = "dashboard-menu dashboard-pane", La = "dashboard-side dashboard-pane", f = { dashboardPane: $a, menuSubHeader: Ca, dashboardTopBar: _a, filter: Na, filterHeader: Da, menu: Fa, menuItemCommand: ya, menuItemIcon: Sa, divider: Ia, separator: Ma, dashboardMenuBody: Ta, dashboardMenuCollapsed: ka, dashboardMenu: Ha, dashboardSide: La }, ao = /* @__PURE__ */ b({
|
|
105
105
|
__name: "FluxDashboardMenu",
|
|
106
106
|
props: {
|
|
107
107
|
icon: {},
|
|
108
108
|
title: {}
|
|
109
109
|
},
|
|
110
110
|
setup(n) {
|
|
111
|
-
const { isMenuCollapsed: s } =
|
|
112
|
-
return (a,
|
|
113
|
-
class: l([
|
|
111
|
+
const { isMenuCollapsed: s } = D();
|
|
112
|
+
return (a, e) => (i(), u("aside", {
|
|
113
|
+
class: l([o(f).dashboardMenu, o(s) && o(f).dashboardMenuCollapsed])
|
|
114
114
|
}, [
|
|
115
115
|
h(I, null, {
|
|
116
|
-
default:
|
|
116
|
+
default: N(() => [
|
|
117
117
|
r(a.$slots, "top-bar-start"),
|
|
118
|
-
a.icon ? (i(), $(
|
|
118
|
+
a.icon ? (i(), $(o(w), {
|
|
119
119
|
key: 0,
|
|
120
120
|
name: a.icon
|
|
121
|
-
}, null, 8, ["name"])) :
|
|
121
|
+
}, null, 8, ["name"])) : C("", !0),
|
|
122
122
|
v("h1", null, y(a.title), 1),
|
|
123
|
-
h(
|
|
123
|
+
h(o(S)),
|
|
124
124
|
r(a.$slots, "top-bar-end")
|
|
125
125
|
]),
|
|
126
126
|
_: 3
|
|
127
127
|
}),
|
|
128
128
|
v("div", {
|
|
129
|
-
class: l(
|
|
129
|
+
class: l(o(f).dashboardMenuBody)
|
|
130
130
|
}, [
|
|
131
131
|
r(a.$slots, "default")
|
|
132
132
|
], 2)
|
|
133
133
|
], 2));
|
|
134
134
|
}
|
|
135
|
-
}),
|
|
135
|
+
}), Ba = "dashboard-navigation", wa = "divider", za = "divider-line", Ea = "menu", xa = "menu-item", Ra = "menu-item-highlighted", Aa = "menu-item-icon", ja = "menu-item-label", Oa = "dashboard-navigation-logo", Pa = "dashboard-navigation-rounding-fix", Va = "dashboard", Ja = "dashboard-menu", Ka = "dashboard-navigation-header", Za = "dashboard-navigation-nav", qa = "dashboard-navigation-collapsed dashboard-navigation", p = { dashboardNavigation: Ba, divider: wa, dividerLine: za, menu: Ea, menuItem: xa, menuItemHighlighted: Ra, menuItemIcon: Aa, menuItemLabel: ja, dashboardNavigationLogo: Oa, dashboardNavigationRoundingFix: Pa, dashboard: Va, dashboardMenu: Ja, dashboardNavigationHeader: Ka, dashboardNavigationNav: Za, dashboardNavigationCollapsed: qa }, oo = /* @__PURE__ */ b({
|
|
136
136
|
inheritAttrs: !1,
|
|
137
137
|
__name: "FluxDashboardNavigation",
|
|
138
138
|
props: {
|
|
@@ -141,61 +141,61 @@ const ea = "dashboard-content", oa = "calendar", sa = "table", na = "calendar-ac
|
|
|
141
141
|
setup(n) {
|
|
142
142
|
const s = R(), {
|
|
143
143
|
isMenuCollapsed: a,
|
|
144
|
-
isNavigationCollapsed:
|
|
145
|
-
} =
|
|
144
|
+
isNavigationCollapsed: e
|
|
145
|
+
} = D();
|
|
146
146
|
return (t, d) => {
|
|
147
147
|
const c = A("router-link");
|
|
148
148
|
return i(), u("nav", j(t.$attrs, {
|
|
149
|
-
class: e
|
|
149
|
+
class: o(e) ? o(p).dashboardNavigationCollapsed : o(p).dashboardNavigation
|
|
150
150
|
}), [
|
|
151
151
|
v("header", {
|
|
152
|
-
class: l(
|
|
152
|
+
class: l(o(p).dashboardNavigationHeader)
|
|
153
153
|
}, [
|
|
154
|
-
h(
|
|
154
|
+
h(o(k), {
|
|
155
155
|
"icon-leading": "bars",
|
|
156
|
-
onClick: d[0] || (d[0] = (m) =>
|
|
156
|
+
onClick: d[0] || (d[0] = (m) => e.value = !o(e))
|
|
157
157
|
}),
|
|
158
158
|
s.logo ? (i(), $(c, {
|
|
159
159
|
key: 0,
|
|
160
|
-
class: l(
|
|
160
|
+
class: l(o(p).dashboardNavigationLogo),
|
|
161
161
|
to: t.logoLocation || "/"
|
|
162
162
|
}, {
|
|
163
|
-
default:
|
|
164
|
-
r(t.$slots, "logo", O(P({ isNavigationCollapsed: e
|
|
163
|
+
default: N(() => [
|
|
164
|
+
r(t.$slots, "logo", O(P({ isNavigationCollapsed: o(e) })))
|
|
165
165
|
]),
|
|
166
166
|
_: 3
|
|
167
|
-
}, 8, ["class", "to"])) :
|
|
168
|
-
h(
|
|
167
|
+
}, 8, ["class", "to"])) : C("", !0),
|
|
168
|
+
h(o(k), {
|
|
169
169
|
"icon-leading": "ellipsis-h",
|
|
170
|
-
onClick: d[1] || (d[1] = (m) => a.value = !
|
|
170
|
+
onClick: d[1] || (d[1] = (m) => a.value = !o(a))
|
|
171
171
|
})
|
|
172
172
|
], 2),
|
|
173
173
|
(i(), u(V, null, J(2, (m) => v("div", {
|
|
174
174
|
key: m,
|
|
175
|
-
class: l(
|
|
175
|
+
class: l(o(p).dashboardNavigationRoundingFix)
|
|
176
176
|
}, null, 2)), 64)),
|
|
177
177
|
v("main", {
|
|
178
|
-
class: l(
|
|
178
|
+
class: l(o(p).dashboardNavigationNav)
|
|
179
179
|
}, [
|
|
180
180
|
r(t.$slots, "default")
|
|
181
181
|
], 2)
|
|
182
182
|
], 16);
|
|
183
183
|
};
|
|
184
184
|
}
|
|
185
|
-
}),
|
|
185
|
+
}), eo = /* @__PURE__ */ b({
|
|
186
186
|
__name: "FluxDashboardSide",
|
|
187
187
|
props: {
|
|
188
188
|
title: {}
|
|
189
189
|
},
|
|
190
190
|
setup(n) {
|
|
191
191
|
return (s, a) => (i(), u("aside", {
|
|
192
|
-
class: l(
|
|
192
|
+
class: l(o(f).dashboardSide)
|
|
193
193
|
}, [
|
|
194
194
|
h(I, null, {
|
|
195
|
-
default:
|
|
195
|
+
default: N(() => [
|
|
196
196
|
r(s.$slots, "top-bar-start"),
|
|
197
197
|
v("h1", null, y(s.title), 1),
|
|
198
|
-
h(
|
|
198
|
+
h(o(S)),
|
|
199
199
|
r(s.$slots, "top-bar-end")
|
|
200
200
|
]),
|
|
201
201
|
_: 3
|
|
@@ -205,13 +205,13 @@ const ea = "dashboard-content", oa = "calendar", sa = "table", na = "calendar-ac
|
|
|
205
205
|
}
|
|
206
206
|
});
|
|
207
207
|
export {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
208
|
+
Wa as FluxDashboard,
|
|
209
|
+
Xa as FluxDashboardContent,
|
|
210
|
+
Ya as FluxDashboardHeader,
|
|
211
211
|
z as FluxDashboardInjectionKey,
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
212
|
+
ao as FluxDashboardMenu,
|
|
213
|
+
oo as FluxDashboardNavigation,
|
|
214
|
+
eo as FluxDashboardSide,
|
|
215
|
+
D as useDashboardInjection
|
|
216
216
|
};
|
|
217
217
|
//# sourceMappingURL=flux-dashboard.js.map
|
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.4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"funding": "https://github.com/sponsors/basmilius",
|
|
@@ -52,17 +52,17 @@
|
|
|
52
52
|
"typings": "./dist/index.d.ts",
|
|
53
53
|
"sideEffects": false,
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@flux-ui/components": "3.0.0-next.
|
|
56
|
-
"@flux-ui/internals": "3.0.0-next.
|
|
55
|
+
"@flux-ui/components": "3.0.0-next.4",
|
|
56
|
+
"@flux-ui/internals": "3.0.0-next.4",
|
|
57
57
|
"vue": "^3.5.13"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@basmilius/vite-vue-preset": "^
|
|
60
|
+
"@basmilius/vite-vue-preset": "^3.0.0",
|
|
61
61
|
"@types/node": "^22.14.1",
|
|
62
62
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
63
|
-
"sass-embedded": "^1.
|
|
63
|
+
"sass-embedded": "^1.87.0",
|
|
64
64
|
"typescript": "^5.8.3",
|
|
65
|
-
"vite": "^6.2
|
|
66
|
-
"vue-tsc": "^2.2.
|
|
65
|
+
"vite": "^6.3.2",
|
|
66
|
+
"vue-tsc": "^2.2.10"
|
|
67
67
|
}
|
|
68
68
|
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
setup>
|
|
20
20
|
import { FluxSpacer } from '@flux-ui/components';
|
|
21
21
|
import FluxDashboardTopBar from './FluxDashboardTopBar.vue';
|
|
22
|
-
import $style from '$fluxDashboard/css/component/
|
|
22
|
+
import $style from '$fluxDashboard/css/component/DashboardPane.module.scss';
|
|
23
23
|
|
|
24
24
|
defineProps<{
|
|
25
25
|
readonly title: string;
|
|
@@ -27,7 +27,9 @@ body:has(.root > .dashboard) {
|
|
|
27
27
|
@include mixin.breakpoint-up(lg) {
|
|
28
28
|
.dashboard {
|
|
29
29
|
display: grid;
|
|
30
|
-
grid-template-
|
|
30
|
+
grid-template-areas: 'menu header side' 'menu content side';
|
|
31
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
32
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
31
33
|
transition: padding-left var(--dashboard-duration) var(--swift-out);
|
|
32
34
|
|
|
33
35
|
&:has(> .dashboardNavigation) {
|
|
@@ -38,20 +40,20 @@ body:has(.root > .dashboard) {
|
|
|
38
40
|
padding-left: 84px;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
|
-
|
|
42
|
-
grid-
|
|
43
|
+
.dashboardContent {
|
|
44
|
+
grid-area: content;
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
46
|
-
grid-
|
|
47
|
+
.dashboardHeader {
|
|
48
|
+
grid-area: header;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
|
-
|
|
50
|
-
grid-
|
|
51
|
+
.dashboardMenu {
|
|
52
|
+
grid-area: menu;
|
|
51
53
|
}
|
|
52
54
|
|
|
53
|
-
|
|
54
|
-
grid-
|
|
55
|
+
.dashboardSide {
|
|
56
|
+
grid-area: side;
|
|
55
57
|
}
|
|
56
58
|
}
|
|
57
59
|
}
|