vlite3 1.1.10 → 1.2.1
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/components/AppShell/AppShell.vue.d.ts +39 -0
- package/components/AppShell/AppShell.vue.js +76 -0
- package/components/AppShell/AppShell.vue2.js +4 -0
- package/components/{Navbar/NavbarLayoutClassic.vue.d.ts → AppShell/AppShellLayoutClassic.vue.d.ts} +8 -5
- package/components/{Navbar/NavbarLayoutClassic.vue.js → AppShell/AppShellLayoutClassic.vue.js} +93 -85
- package/components/AppShell/AppShellLayoutClassic.vue2.js +4 -0
- package/components/{Navbar/NavbarLayoutDashboard.vue.d.ts → AppShell/AppShellLayoutDashboard.vue.d.ts} +9 -6
- package/components/AppShell/AppShellLayoutDashboard.vue.js +166 -0
- package/components/AppShell/AppShellLayoutDashboard.vue2.js +4 -0
- package/components/{Navbar/NavbarLayoutDock.vue.d.ts → AppShell/AppShellLayoutDock.vue.d.ts} +9 -6
- package/components/{Navbar/NavbarLayoutDock.vue.js → AppShell/AppShellLayoutDock.vue.js} +57 -48
- package/components/AppShell/AppShellLayoutDock.vue2.js +4 -0
- package/components/{Navbar/NavbarLayoutSidebarFirst.vue.d.ts → AppShell/AppShellLayoutHeaderShell.vue.d.ts} +9 -5
- package/components/AppShell/AppShellLayoutHeaderShell.vue.js +168 -0
- package/components/AppShell/AppShellLayoutHeaderShell.vue2.js +4 -0
- package/components/AppShell/AppShellLayoutSidebarFirst.vue.d.ts +40 -0
- package/components/AppShell/AppShellLayoutSidebarFirst.vue.js +166 -0
- package/components/AppShell/AppShellLayoutSidebarFirst.vue2.js +4 -0
- package/components/AppShell/index.d.ts +2 -0
- package/components/AppShell/useAppShell.d.ts +37 -0
- package/components/AppShell/useAppShell.js +134 -0
- package/components/Chart/BarChart.vue.js +46 -48
- package/components/Chart/PieChart.vue.js +45 -45
- package/components/Chart/SegmentBarChart.vue.d.ts +24 -0
- package/components/Chart/SegmentBarChart.vue.js +163 -0
- package/components/Chart/SegmentBarChart.vue2.js +4 -0
- package/components/Chart/StatCardChart.vue.d.ts +11 -0
- package/components/Chart/StatCardChart.vue.js +7 -0
- package/components/Chart/StatCardChart.vue2.js +91 -0
- package/components/Chart/TimelineChart.vue.d.ts +24 -0
- package/components/Chart/TimelineChart.vue.js +198 -0
- package/components/Chart/TimelineChart.vue2.js +4 -0
- package/components/Chart/WaffleChart.vue.d.ts +28 -0
- package/components/Chart/WaffleChart.vue.js +134 -0
- package/components/Chart/WaffleChart.vue2.js +4 -0
- package/components/Chart/index.d.ts +5 -1
- package/components/Chart/types.d.ts +100 -0
- package/components/CommandPalette/CommandPaletteContent.vue2.js +1 -1
- package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js} +1 -1
- package/components/Dropdown/Dropdown.vue.js +11 -11
- package/components/Navbar/Navbar.vue.d.ts +43 -17
- package/components/Navbar/Navbar.vue.js +177 -54
- package/components/Navbar/useNavbar.d.ts +4 -23
- package/components/Navbar/useNavbar.js +42 -97
- package/components/NavbarCommandPalette.vue.js +1 -1
- package/components/SidebarMenu/SidebarMenu.vue.js +1 -1
- package/components/SidebarMenu/SidebarMenuItem.vue.js +138 -122
- package/index.d.ts +1 -0
- package/index.js +136 -126
- package/package.json +1 -1
- package/style.css +1 -1
- package/types/appshell.type.d.ts +35 -0
- package/types/navbar.type.d.ts +0 -19
- package/components/Navbar/NavbarLayoutClassic.vue2.js +0 -4
- package/components/Navbar/NavbarLayoutDashboard.vue.js +0 -157
- package/components/Navbar/NavbarLayoutDashboard.vue2.js +0 -4
- package/components/Navbar/NavbarLayoutDock.vue2.js +0 -4
- package/components/Navbar/NavbarLayoutSidebarFirst.vue.js +0 -151
- package/components/Navbar/NavbarLayoutSidebarFirst.vue2.js +0 -4
- package/components/Navbar/NavbarStandalone.vue.d.ts +0 -48
- package/components/Navbar/NavbarStandalone.vue.js +0 -183
- package/components/Navbar/NavbarStandalone.vue2.js +0 -4
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import { defineComponent as V, inject as _, openBlock as a, createElementBlock as o, createVNode as m, Transition as z, withCtx as h, withDirectives as N, createElementVNode as n, normalizeClass as b, unref as e, renderSlot as s, createCommentVNode as t, vShow as R, isRef as g, createTextVNode as B } from "vue";
|
|
2
|
+
import E from "../SidePanel.vue.js";
|
|
3
|
+
import L from "../Navbar/NavbarTabs.vue.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import M from "../Breadcrumb/Breadcrumb.vue.js";
|
|
6
|
+
import "@iconify/vue";
|
|
7
|
+
/* empty css */
|
|
8
|
+
import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
|
|
9
|
+
const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0 sm:p-2 gap-0 sm:gap-2 overflow-hidden" }, D = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "flex items-center px-4 py-3"
|
|
12
|
+
}, O = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden bg-background rounded-xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm" }, U = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "w-full shrink-0 z-20 bg-background border-b border-border/50"
|
|
15
|
+
}, H = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "shrink-0 w-full border-b border-border/50"
|
|
18
|
+
}, I = { class: "flex flex-col h-full" }, Y = {
|
|
19
|
+
class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable",
|
|
20
|
+
style: { "will-change": "transform", contain: "layout style" }
|
|
21
|
+
}, j = {
|
|
22
|
+
key: 0,
|
|
23
|
+
class: "mt-auto pt-2 border-t border-border px-3 py-2"
|
|
24
|
+
}, ee = /* @__PURE__ */ V({
|
|
25
|
+
__name: "AppShellLayoutDashboard",
|
|
26
|
+
setup(K) {
|
|
27
|
+
const y = _(P), {
|
|
28
|
+
props: l,
|
|
29
|
+
sidebarHidden: w,
|
|
30
|
+
isMobileMenuOpen: i,
|
|
31
|
+
isSidebarVisible: k,
|
|
32
|
+
toggleSidebar: x,
|
|
33
|
+
pageTitle: $,
|
|
34
|
+
breadcrumbData: u,
|
|
35
|
+
breakpointClasses: f,
|
|
36
|
+
nestedTabsItems: v,
|
|
37
|
+
activeNestedTab: c,
|
|
38
|
+
handleNestedTabClick: C,
|
|
39
|
+
mainScrollRef: S,
|
|
40
|
+
layoutMainRef: T
|
|
41
|
+
} = y;
|
|
42
|
+
return (r, d) => (a(), o("div", A, [
|
|
43
|
+
m(z, {
|
|
44
|
+
"enter-active-class": "transition-all duration-300 ease-in-out",
|
|
45
|
+
"leave-active-class": "transition-all duration-300 ease-in-out",
|
|
46
|
+
"enter-from-class": "opacity-0 -translate-x-2",
|
|
47
|
+
"enter-to-class": "opacity-100 translate-x-0",
|
|
48
|
+
"leave-from-class": "opacity-100 translate-x-0",
|
|
49
|
+
"leave-to-class": "opacity-0 -translate-x-2"
|
|
50
|
+
}, {
|
|
51
|
+
default: h(() => [
|
|
52
|
+
N(n("nav", {
|
|
53
|
+
class: b([
|
|
54
|
+
"shrink-0 h-full flex flex-col bg-background rounded-xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm overflow-hidden z-30",
|
|
55
|
+
e(f).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
|
|
56
|
+
e(l).class
|
|
57
|
+
]),
|
|
58
|
+
role: "navigation",
|
|
59
|
+
"aria-label": "Sidebar"
|
|
60
|
+
}, [
|
|
61
|
+
r.$slots["sidebar-header"] ? (a(), o("div", D, [
|
|
62
|
+
s(r.$slots, "sidebar-header")
|
|
63
|
+
])) : t("", !0),
|
|
64
|
+
n("div", {
|
|
65
|
+
class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(l).contentClass]),
|
|
66
|
+
style: { "will-change": "transform", contain: "layout style" }
|
|
67
|
+
}, [
|
|
68
|
+
s(r.$slots, "sidebar")
|
|
69
|
+
], 2),
|
|
70
|
+
r.$slots["sidebar-footer"] ? (a(), o("div", {
|
|
71
|
+
key: 1,
|
|
72
|
+
class: b(["shrink-0 bg-transparent pt-2", e(l).rightClass])
|
|
73
|
+
}, [
|
|
74
|
+
s(r.$slots, "sidebar-footer")
|
|
75
|
+
], 2)) : t("", !0)
|
|
76
|
+
], 2), [
|
|
77
|
+
[R, !e(w)]
|
|
78
|
+
])
|
|
79
|
+
]),
|
|
80
|
+
_: 3
|
|
81
|
+
}),
|
|
82
|
+
n("div", O, [
|
|
83
|
+
r.$slots.header ? (a(), o("header", U, [
|
|
84
|
+
s(r.$slots, "header", {
|
|
85
|
+
isOpen: e(i),
|
|
86
|
+
toggle: () => i.value = !e(i),
|
|
87
|
+
sidebarVisible: e(k),
|
|
88
|
+
toggleSidebar: e(x),
|
|
89
|
+
breadcrumbItems: e(u).items.value,
|
|
90
|
+
pageTitle: e($)
|
|
91
|
+
})
|
|
92
|
+
])) : t("", !0),
|
|
93
|
+
r.$slots.main ? (a(), o("main", {
|
|
94
|
+
key: 1,
|
|
95
|
+
ref_key: "layoutMainRef",
|
|
96
|
+
ref: T,
|
|
97
|
+
class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
|
|
98
|
+
}, [
|
|
99
|
+
e(l).renderNestedTabs && e(v).length > 0 ? (a(), o("div", H, [
|
|
100
|
+
m(L, {
|
|
101
|
+
modelValue: e(c),
|
|
102
|
+
"onUpdate:modelValue": d[0] || (d[0] = (p) => g(c) ? c.value = p : null),
|
|
103
|
+
onChange: e(C),
|
|
104
|
+
items: e(v)
|
|
105
|
+
}, null, 8, ["modelValue", "onChange", "items"])
|
|
106
|
+
])) : t("", !0),
|
|
107
|
+
e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(u).items.value.length > 1 ? (a(), o("div", {
|
|
108
|
+
key: 1,
|
|
109
|
+
class: b(["shrink-0 w-full px-6 py-2 border-b border-border/50", e(l).breadcrumbClass])
|
|
110
|
+
}, [
|
|
111
|
+
m(e(M), {
|
|
112
|
+
items: e(u).items.value,
|
|
113
|
+
variant: e(l).breadcrumbVariant,
|
|
114
|
+
separator: e(l).breadcrumbSeparator,
|
|
115
|
+
size: e(l).breadcrumbSize
|
|
116
|
+
}, null, 8, ["items", "variant", "separator", "size"])
|
|
117
|
+
], 2)) : t("", !0),
|
|
118
|
+
n("div", {
|
|
119
|
+
ref_key: "mainScrollRef",
|
|
120
|
+
ref: S,
|
|
121
|
+
style: { "will-change": "transform", contain: "layout style" },
|
|
122
|
+
class: "flex-1 overflow-y-auto pt-2 w-full relative h-full scrollbar-thin scrollbar-stable"
|
|
123
|
+
}, [
|
|
124
|
+
s(r.$slots, "main")
|
|
125
|
+
], 512)
|
|
126
|
+
], 512)) : t("", !0)
|
|
127
|
+
]),
|
|
128
|
+
m(E, {
|
|
129
|
+
show: e(i),
|
|
130
|
+
"onUpdate:show": d[1] || (d[1] = (p) => g(i) ? i.value = p : null),
|
|
131
|
+
position: "left",
|
|
132
|
+
size: "sm",
|
|
133
|
+
triggerClass: e(f).mobileTrigger,
|
|
134
|
+
class: b(["z-60", e(f).mobileTrigger]),
|
|
135
|
+
headerClass: "pl-3! pr-4.5! py-3!",
|
|
136
|
+
bodyClass: "p-0!"
|
|
137
|
+
}, {
|
|
138
|
+
header: h(() => [
|
|
139
|
+
s(r.$slots, "mobile-sidebar-header", {}, () => [
|
|
140
|
+
s(r.$slots, "sidebar-header", {}, () => [
|
|
141
|
+
d[2] || (d[2] = B("Brand", -1))
|
|
142
|
+
])
|
|
143
|
+
])
|
|
144
|
+
]),
|
|
145
|
+
default: h(() => [
|
|
146
|
+
n("div", I, [
|
|
147
|
+
n("div", Y, [
|
|
148
|
+
s(r.$slots, "mobile-sidebar", {}, () => [
|
|
149
|
+
s(r.$slots, "sidebar")
|
|
150
|
+
])
|
|
151
|
+
]),
|
|
152
|
+
r.$slots["mobile-sidebar-footer"] || r.$slots["sidebar-footer"] ? (a(), o("div", j, [
|
|
153
|
+
s(r.$slots, "mobile-sidebar-footer", {}, () => [
|
|
154
|
+
s(r.$slots, "sidebar-footer")
|
|
155
|
+
])
|
|
156
|
+
])) : t("", !0)
|
|
157
|
+
])
|
|
158
|
+
]),
|
|
159
|
+
_: 3
|
|
160
|
+
}, 8, ["show", "triggerClass", "class"])
|
|
161
|
+
]));
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
export {
|
|
165
|
+
ee as default
|
|
166
|
+
};
|
package/components/{Navbar/NavbarLayoutDock.vue.d.ts → AppShell/AppShellLayoutDock.vue.d.ts}
RENAMED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
declare function __VLS_template(): {
|
|
2
2
|
attrs: Partial<{}>;
|
|
3
3
|
slots: {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
'sidebar-header'?(_: {}): any;
|
|
5
|
+
'sidebar-header'?(_: {}): any;
|
|
6
|
+
sidebar?(_: {}): any;
|
|
7
|
+
sidebar?(_: {}): any;
|
|
8
|
+
'sidebar-footer'?(_: {}): any;
|
|
9
|
+
'sidebar-footer'?(_: {}): any;
|
|
10
10
|
header?(_: {
|
|
11
11
|
isOpen: boolean;
|
|
12
12
|
toggle: () => boolean;
|
|
@@ -16,6 +16,9 @@ declare function __VLS_template(): {
|
|
|
16
16
|
pageTitle: string;
|
|
17
17
|
}): any;
|
|
18
18
|
main?(_: {}): any;
|
|
19
|
+
'mobile-sidebar-header'?(_: {}): any;
|
|
20
|
+
'mobile-sidebar'?(_: {}): any;
|
|
21
|
+
'mobile-sidebar-footer'?(_: {}): any;
|
|
19
22
|
};
|
|
20
23
|
refs: {
|
|
21
24
|
layoutMainRef: HTMLElement;
|
|
@@ -1,43 +1,46 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
/* empty css
|
|
5
|
-
import
|
|
1
|
+
import { defineComponent as V, inject as _, openBlock as o, createElementBlock as a, createVNode as m, Transition as z, withCtx as h, withDirectives as N, createElementVNode as n, normalizeClass as b, unref as e, renderSlot as s, createCommentVNode as t, vShow as R, isRef as v, createTextVNode as B } from "vue";
|
|
2
|
+
import E from "../SidePanel.vue.js";
|
|
3
|
+
import L from "../Navbar/NavbarTabs.vue.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import M from "../Breadcrumb/Breadcrumb.vue.js";
|
|
6
6
|
import "@iconify/vue";
|
|
7
7
|
/* empty css */
|
|
8
|
-
import {
|
|
9
|
-
const
|
|
8
|
+
import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
|
|
9
|
+
const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background p-0 sm:p-2 gap-0 sm:gap-2 overflow-hidden items-stretch" }, D = {
|
|
10
10
|
key: 0,
|
|
11
11
|
class: "flex items-center justify-center mb-1.5 pb-2 border-b border-border/40 w-full"
|
|
12
|
-
},
|
|
12
|
+
}, O = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden bg-background rounded-xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm" }, U = {
|
|
13
13
|
key: 0,
|
|
14
14
|
class: "w-full shrink-0 z-20 bg-background border-b border-border/50"
|
|
15
|
-
},
|
|
15
|
+
}, j = {
|
|
16
16
|
key: 0,
|
|
17
17
|
class: "shrink-0 w-full border-b border-border/50"
|
|
18
|
-
},
|
|
18
|
+
}, H = { class: "flex flex-col h-full" }, I = {
|
|
19
|
+
class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable",
|
|
20
|
+
style: { "will-change": "transform", contain: "layout style" }
|
|
21
|
+
}, Y = {
|
|
19
22
|
key: 0,
|
|
20
23
|
class: "mt-auto pt-2 border-t border-border px-3 py-2"
|
|
21
|
-
}, ee = /* @__PURE__ */
|
|
22
|
-
__name: "
|
|
24
|
+
}, ee = /* @__PURE__ */ V({
|
|
25
|
+
__name: "AppShellLayoutDock",
|
|
23
26
|
setup(K) {
|
|
24
|
-
const y =
|
|
27
|
+
const y = _(P), {
|
|
25
28
|
props: l,
|
|
26
29
|
sidebarHidden: w,
|
|
27
30
|
isMobileMenuOpen: i,
|
|
28
|
-
isSidebarVisible:
|
|
29
|
-
toggleSidebar:
|
|
30
|
-
pageTitle:
|
|
31
|
+
isSidebarVisible: k,
|
|
32
|
+
toggleSidebar: x,
|
|
33
|
+
pageTitle: $,
|
|
31
34
|
breadcrumbData: u,
|
|
32
35
|
breakpointClasses: c,
|
|
33
36
|
nestedTabsItems: g,
|
|
34
37
|
activeNestedTab: f,
|
|
35
|
-
handleNestedTabClick:
|
|
36
|
-
mainScrollRef:
|
|
38
|
+
handleNestedTabClick: C,
|
|
39
|
+
mainScrollRef: S,
|
|
37
40
|
layoutMainRef: T
|
|
38
41
|
} = y;
|
|
39
|
-
return (r, d) => (
|
|
40
|
-
m(
|
|
42
|
+
return (r, d) => (o(), a("div", A, [
|
|
43
|
+
m(z, {
|
|
41
44
|
"enter-active-class": "transition-all duration-300 ease-in-out",
|
|
42
45
|
"leave-active-class": "transition-all duration-300 ease-in-out",
|
|
43
46
|
"enter-from-class": "opacity-0 -translate-x-2 scale-95",
|
|
@@ -46,7 +49,7 @@ const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
|
|
|
46
49
|
"leave-to-class": "opacity-0 -translate-x-2 scale-95"
|
|
47
50
|
}, {
|
|
48
51
|
default: h(() => [
|
|
49
|
-
|
|
52
|
+
N(n("nav", {
|
|
50
53
|
class: b([
|
|
51
54
|
"shrink-0 self-center flex flex-col items-center bg-background rounded-2xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm overflow-hidden z-30 py-3 px-2 gap-0.5",
|
|
52
55
|
e(c).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
|
|
@@ -55,19 +58,19 @@ const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
|
|
|
55
58
|
role: "navigation",
|
|
56
59
|
"aria-label": "Sidebar dock"
|
|
57
60
|
}, [
|
|
58
|
-
r.$slots
|
|
59
|
-
|
|
61
|
+
r.$slots["sidebar-header"] ? (o(), a("div", D, [
|
|
62
|
+
s(r.$slots, "sidebar-header")
|
|
60
63
|
])) : t("", !0),
|
|
61
64
|
n("div", {
|
|
62
65
|
class: b(["flex flex-col items-center gap-0.5 w-full", e(l).contentClass])
|
|
63
66
|
}, [
|
|
64
|
-
|
|
67
|
+
s(r.$slots, "sidebar")
|
|
65
68
|
], 2),
|
|
66
|
-
r.$slots
|
|
69
|
+
r.$slots["sidebar-footer"] ? (o(), a("div", {
|
|
67
70
|
key: 1,
|
|
68
71
|
class: b(["flex flex-col items-center mt-1.5 pt-2 border-t border-border/40 w-full", e(l).rightClass])
|
|
69
72
|
}, [
|
|
70
|
-
|
|
73
|
+
s(r.$slots, "sidebar-footer")
|
|
71
74
|
], 2)) : t("", !0)
|
|
72
75
|
], 2), [
|
|
73
76
|
[R, !e(w)]
|
|
@@ -75,36 +78,36 @@ const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
|
|
|
75
78
|
]),
|
|
76
79
|
_: 3
|
|
77
80
|
}),
|
|
78
|
-
n("div",
|
|
79
|
-
r.$slots.header ? (
|
|
80
|
-
|
|
81
|
+
n("div", O, [
|
|
82
|
+
r.$slots.header ? (o(), a("header", U, [
|
|
83
|
+
s(r.$slots, "header", {
|
|
81
84
|
isOpen: e(i),
|
|
82
85
|
toggle: () => i.value = !e(i),
|
|
83
|
-
sidebarVisible: e(
|
|
84
|
-
toggleSidebar: e(
|
|
86
|
+
sidebarVisible: e(k),
|
|
87
|
+
toggleSidebar: e(x),
|
|
85
88
|
breadcrumbItems: e(u).items.value,
|
|
86
|
-
pageTitle: e(
|
|
89
|
+
pageTitle: e($)
|
|
87
90
|
})
|
|
88
91
|
])) : t("", !0),
|
|
89
|
-
r.$slots.main ? (
|
|
92
|
+
r.$slots.main ? (o(), a("main", {
|
|
90
93
|
key: 1,
|
|
91
94
|
ref_key: "layoutMainRef",
|
|
92
95
|
ref: T,
|
|
93
96
|
class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0 scrollbar-thin scrollbar-stable"
|
|
94
97
|
}, [
|
|
95
|
-
e(l).renderNestedTabs && e(g).length > 0 ? (
|
|
96
|
-
m(
|
|
98
|
+
e(l).renderNestedTabs && e(g).length > 0 ? (o(), a("div", j, [
|
|
99
|
+
m(L, {
|
|
97
100
|
modelValue: e(f),
|
|
98
101
|
"onUpdate:modelValue": d[0] || (d[0] = (p) => v(f) ? f.value = p : null),
|
|
99
|
-
onChange: e(
|
|
102
|
+
onChange: e(C),
|
|
100
103
|
items: e(g)
|
|
101
104
|
}, null, 8, ["modelValue", "onChange", "items"])
|
|
102
105
|
])) : t("", !0),
|
|
103
|
-
e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(u).items.value.length > 1 ? (
|
|
106
|
+
e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(u).items.value.length > 1 ? (o(), a("div", {
|
|
104
107
|
key: 1,
|
|
105
108
|
class: b(["shrink-0 w-full px-6 py-2 border-b border-border/50", e(l).breadcrumbClass])
|
|
106
109
|
}, [
|
|
107
|
-
m(e(
|
|
110
|
+
m(e(M), {
|
|
108
111
|
items: e(u).items.value,
|
|
109
112
|
variant: e(l).breadcrumbVariant,
|
|
110
113
|
separator: e(l).breadcrumbSeparator,
|
|
@@ -113,15 +116,15 @@ const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
|
|
|
113
116
|
], 2)) : t("", !0),
|
|
114
117
|
n("div", {
|
|
115
118
|
ref_key: "mainScrollRef",
|
|
116
|
-
ref:
|
|
119
|
+
ref: S,
|
|
117
120
|
style: { "will-change": "transform", contain: "layout style" },
|
|
118
121
|
class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable"
|
|
119
122
|
}, [
|
|
120
|
-
|
|
123
|
+
s(r.$slots, "main")
|
|
121
124
|
], 512)
|
|
122
125
|
], 512)) : t("", !0)
|
|
123
126
|
]),
|
|
124
|
-
m(
|
|
127
|
+
m(E, {
|
|
125
128
|
show: e(i),
|
|
126
129
|
"onUpdate:show": d[1] || (d[1] = (p) => v(i) ? i.value = p : null),
|
|
127
130
|
position: "left",
|
|
@@ -132,17 +135,23 @@ const O = { class: "vlite-app-layout flex flex-row w-full h-full bg-muted/20 p-0
|
|
|
132
135
|
bodyClass: "p-0!"
|
|
133
136
|
}, {
|
|
134
137
|
header: h(() => [
|
|
135
|
-
|
|
136
|
-
|
|
138
|
+
s(r.$slots, "mobile-sidebar-header", {}, () => [
|
|
139
|
+
s(r.$slots, "sidebar-header", {}, () => [
|
|
140
|
+
d[2] || (d[2] = B("Brand", -1))
|
|
141
|
+
])
|
|
137
142
|
])
|
|
138
143
|
]),
|
|
139
144
|
default: h(() => [
|
|
140
|
-
n("div",
|
|
141
|
-
n("div",
|
|
142
|
-
|
|
145
|
+
n("div", H, [
|
|
146
|
+
n("div", I, [
|
|
147
|
+
s(r.$slots, "mobile-sidebar", {}, () => [
|
|
148
|
+
s(r.$slots, "sidebar")
|
|
149
|
+
])
|
|
143
150
|
]),
|
|
144
|
-
r.$slots
|
|
145
|
-
|
|
151
|
+
r.$slots["mobile-sidebar-footer"] || r.$slots["sidebar-footer"] ? (o(), a("div", Y, [
|
|
152
|
+
s(r.$slots, "mobile-sidebar-footer", {}, () => [
|
|
153
|
+
s(r.$slots, "sidebar-footer")
|
|
154
|
+
])
|
|
146
155
|
])) : t("", !0)
|
|
147
156
|
])
|
|
148
157
|
]),
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
declare function __VLS_template(): {
|
|
2
2
|
attrs: Partial<{}>;
|
|
3
3
|
slots: {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
'sidebar-header'?(_: {}): any;
|
|
5
|
+
'sidebar-header'?(_: {}): any;
|
|
6
|
+
sidebar?(_: {}): any;
|
|
7
|
+
sidebar?(_: {}): any;
|
|
8
|
+
'sidebar-footer'?(_: {}): any;
|
|
9
|
+
'sidebar-footer'?(_: {}): any;
|
|
8
10
|
header?(_: {
|
|
9
11
|
isOpen: boolean;
|
|
10
12
|
toggle: () => boolean;
|
|
@@ -14,7 +16,9 @@ declare function __VLS_template(): {
|
|
|
14
16
|
pageTitle: string;
|
|
15
17
|
}): any;
|
|
16
18
|
main?(_: {}): any;
|
|
17
|
-
|
|
19
|
+
'mobile-sidebar-header'?(_: {}): any;
|
|
20
|
+
'mobile-sidebar'?(_: {}): any;
|
|
21
|
+
'mobile-sidebar-footer'?(_: {}): any;
|
|
18
22
|
};
|
|
19
23
|
refs: {
|
|
20
24
|
layoutMainRef: HTMLElement;
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
import { defineComponent as _, inject as V, openBlock as a, createElementBlock as o, createVNode as m, Transition as z, withCtx as h, withDirectives as N, createElementVNode as t, normalizeClass as b, unref as e, renderSlot as r, createCommentVNode as i, vShow as R, isRef as g, createTextVNode as B } from "vue";
|
|
2
|
+
import E from "../SidePanel.vue.js";
|
|
3
|
+
import L from "../Navbar/NavbarTabs.vue.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import M from "../Breadcrumb/Breadcrumb.vue.js";
|
|
6
|
+
import "@iconify/vue";
|
|
7
|
+
/* empty css */
|
|
8
|
+
import { APPSHELL_LAYOUT_KEY as P } from "./useAppShell.js";
|
|
9
|
+
const A = { class: "vlite-app-layout flex flex-row w-full h-full bg-background overflow-hidden" }, H = {
|
|
10
|
+
key: 0,
|
|
11
|
+
class: "flex items-center px-4 py-3"
|
|
12
|
+
}, O = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden gap-2 max-sm:p-0 max-sm:gap-0" }, U = {
|
|
13
|
+
key: 0,
|
|
14
|
+
class: "w-full shrink-0 z-20 px-5 pt-2"
|
|
15
|
+
}, D = { class: "w-full shrink-0 z-20 bg-background rounded-xl max-sm:rounded-none border border-border/70 max-sm:border-0 shadow-sm" }, I = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "shrink-0 w-full px-6"
|
|
18
|
+
}, Y = { class: "flex flex-col h-full" }, j = {
|
|
19
|
+
class: "flex-1 overflow-y-auto px-3.5 pt-4 scrollbar-thin scrollbar-stable",
|
|
20
|
+
style: { "will-change": "transform", contain: "layout style" }
|
|
21
|
+
}, K = {
|
|
22
|
+
key: 0,
|
|
23
|
+
class: "mt-auto pt-2 border-t border-border px-3 py-2"
|
|
24
|
+
}, se = /* @__PURE__ */ _({
|
|
25
|
+
__name: "AppShellLayoutHeaderShell",
|
|
26
|
+
setup(q) {
|
|
27
|
+
const y = V(P), {
|
|
28
|
+
props: l,
|
|
29
|
+
sidebarHidden: w,
|
|
30
|
+
isMobileMenuOpen: d,
|
|
31
|
+
isSidebarVisible: k,
|
|
32
|
+
toggleSidebar: x,
|
|
33
|
+
pageTitle: $,
|
|
34
|
+
breadcrumbData: u,
|
|
35
|
+
breakpointClasses: f,
|
|
36
|
+
nestedTabsItems: v,
|
|
37
|
+
activeNestedTab: c,
|
|
38
|
+
handleNestedTabClick: C,
|
|
39
|
+
mainScrollRef: S,
|
|
40
|
+
layoutMainRef: T
|
|
41
|
+
} = y;
|
|
42
|
+
return (s, n) => (a(), o("div", A, [
|
|
43
|
+
m(z, {
|
|
44
|
+
"enter-active-class": "transition-all duration-300 ease-in-out",
|
|
45
|
+
"leave-active-class": "transition-all duration-300 ease-in-out",
|
|
46
|
+
"enter-from-class": "opacity-0 -translate-x-2",
|
|
47
|
+
"enter-to-class": "opacity-100 translate-x-0",
|
|
48
|
+
"leave-from-class": "opacity-100 translate-x-0",
|
|
49
|
+
"leave-to-class": "opacity-0 -translate-x-2"
|
|
50
|
+
}, {
|
|
51
|
+
default: h(() => [
|
|
52
|
+
N(t("nav", {
|
|
53
|
+
class: b([
|
|
54
|
+
"shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
|
|
55
|
+
e(f).mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
|
|
56
|
+
e(l).class
|
|
57
|
+
]),
|
|
58
|
+
role: "navigation",
|
|
59
|
+
"aria-label": "Sidebar"
|
|
60
|
+
}, [
|
|
61
|
+
s.$slots["sidebar-header"] ? (a(), o("div", H, [
|
|
62
|
+
r(s.$slots, "sidebar-header")
|
|
63
|
+
])) : i("", !0),
|
|
64
|
+
t("div", {
|
|
65
|
+
class: b(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-stable", e(l).contentClass]),
|
|
66
|
+
style: { "will-change": "transform", contain: "layout style" }
|
|
67
|
+
}, [
|
|
68
|
+
r(s.$slots, "sidebar")
|
|
69
|
+
], 2),
|
|
70
|
+
s.$slots["sidebar-footer"] ? (a(), o("div", {
|
|
71
|
+
key: 1,
|
|
72
|
+
class: b(["shrink-0 border-t border-border bg-background", e(l).rightClass])
|
|
73
|
+
}, [
|
|
74
|
+
r(s.$slots, "sidebar-footer")
|
|
75
|
+
], 2)) : i("", !0)
|
|
76
|
+
], 2), [
|
|
77
|
+
[R, !e(w)]
|
|
78
|
+
])
|
|
79
|
+
]),
|
|
80
|
+
_: 3
|
|
81
|
+
}),
|
|
82
|
+
t("div", O, [
|
|
83
|
+
s.$slots.header ? (a(), o("header", U, [
|
|
84
|
+
t("div", D, [
|
|
85
|
+
r(s.$slots, "header", {
|
|
86
|
+
isOpen: e(d),
|
|
87
|
+
toggle: () => d.value = !e(d),
|
|
88
|
+
sidebarVisible: e(k),
|
|
89
|
+
toggleSidebar: e(x),
|
|
90
|
+
breadcrumbItems: e(u).items.value,
|
|
91
|
+
pageTitle: e($)
|
|
92
|
+
})
|
|
93
|
+
])
|
|
94
|
+
])) : i("", !0),
|
|
95
|
+
s.$slots.main ? (a(), o("main", {
|
|
96
|
+
key: 1,
|
|
97
|
+
ref_key: "layoutMainRef",
|
|
98
|
+
ref: T,
|
|
99
|
+
class: "flex-1 overflow-hidden w-full relative flex flex-col min-h-0 bg-background"
|
|
100
|
+
}, [
|
|
101
|
+
e(l).renderNestedTabs && e(v).length > 0 ? (a(), o("div", I, [
|
|
102
|
+
m(L, {
|
|
103
|
+
modelValue: e(c),
|
|
104
|
+
"onUpdate:modelValue": n[0] || (n[0] = (p) => g(c) ? c.value = p : null),
|
|
105
|
+
onChange: e(C),
|
|
106
|
+
items: e(v)
|
|
107
|
+
}, null, 8, ["modelValue", "onChange", "items"])
|
|
108
|
+
])) : i("", !0),
|
|
109
|
+
e(l).breadcrumb && e(l).breadcrumbPosition === "main" && e(u).items.value.length > 1 ? (a(), o("div", {
|
|
110
|
+
key: 1,
|
|
111
|
+
class: b(["shrink-0 w-full border-b border-border/50 px-6 py-2", e(l).breadcrumbClass])
|
|
112
|
+
}, [
|
|
113
|
+
m(e(M), {
|
|
114
|
+
items: e(u).items.value,
|
|
115
|
+
variant: e(l).breadcrumbVariant,
|
|
116
|
+
separator: e(l).breadcrumbSeparator,
|
|
117
|
+
size: e(l).breadcrumbSize
|
|
118
|
+
}, null, 8, ["items", "variant", "separator", "size"])
|
|
119
|
+
], 2)) : i("", !0),
|
|
120
|
+
t("div", {
|
|
121
|
+
ref_key: "mainScrollRef",
|
|
122
|
+
ref: S,
|
|
123
|
+
style: { "will-change": "transform", contain: "layout style" },
|
|
124
|
+
class: "flex-1 overflow-y-auto w-full relative h-full scrollbar-thin scrollbar-stable px-6 pb-4 mt-4"
|
|
125
|
+
}, [
|
|
126
|
+
r(s.$slots, "main")
|
|
127
|
+
], 512)
|
|
128
|
+
], 512)) : i("", !0)
|
|
129
|
+
]),
|
|
130
|
+
m(E, {
|
|
131
|
+
show: e(d),
|
|
132
|
+
"onUpdate:show": n[1] || (n[1] = (p) => g(d) ? d.value = p : null),
|
|
133
|
+
position: "left",
|
|
134
|
+
size: "sm",
|
|
135
|
+
triggerClass: e(f).mobileTrigger,
|
|
136
|
+
class: b(["z-60", e(f).mobileTrigger]),
|
|
137
|
+
headerClass: "pl-3! pr-4.5! py-3!",
|
|
138
|
+
bodyClass: "p-0!"
|
|
139
|
+
}, {
|
|
140
|
+
header: h(() => [
|
|
141
|
+
r(s.$slots, "mobile-sidebar-header", {}, () => [
|
|
142
|
+
r(s.$slots, "sidebar-header", {}, () => [
|
|
143
|
+
n[2] || (n[2] = B("Brand", -1))
|
|
144
|
+
])
|
|
145
|
+
])
|
|
146
|
+
]),
|
|
147
|
+
default: h(() => [
|
|
148
|
+
t("div", Y, [
|
|
149
|
+
t("div", j, [
|
|
150
|
+
r(s.$slots, "mobile-sidebar", {}, () => [
|
|
151
|
+
r(s.$slots, "sidebar")
|
|
152
|
+
])
|
|
153
|
+
]),
|
|
154
|
+
s.$slots["mobile-sidebar-footer"] || s.$slots["sidebar-footer"] ? (a(), o("div", K, [
|
|
155
|
+
r(s.$slots, "mobile-sidebar-footer", {}, () => [
|
|
156
|
+
r(s.$slots, "sidebar-footer")
|
|
157
|
+
])
|
|
158
|
+
])) : i("", !0)
|
|
159
|
+
])
|
|
160
|
+
]),
|
|
161
|
+
_: 3
|
|
162
|
+
}, 8, ["show", "triggerClass", "class"])
|
|
163
|
+
]));
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
export {
|
|
167
|
+
se as default
|
|
168
|
+
};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
declare function __VLS_template(): {
|
|
2
|
+
attrs: Partial<{}>;
|
|
3
|
+
slots: {
|
|
4
|
+
'sidebar-header'?(_: {}): any;
|
|
5
|
+
'sidebar-header'?(_: {}): any;
|
|
6
|
+
sidebar?(_: {}): any;
|
|
7
|
+
sidebar?(_: {}): any;
|
|
8
|
+
'sidebar-footer'?(_: {}): any;
|
|
9
|
+
'sidebar-footer'?(_: {}): any;
|
|
10
|
+
header?(_: {
|
|
11
|
+
isOpen: boolean;
|
|
12
|
+
toggle: () => boolean;
|
|
13
|
+
sidebarVisible: boolean;
|
|
14
|
+
toggleSidebar: () => void;
|
|
15
|
+
breadcrumbItems: any[];
|
|
16
|
+
pageTitle: string;
|
|
17
|
+
}): any;
|
|
18
|
+
main?(_: {}): any;
|
|
19
|
+
'mobile-sidebar-header'?(_: {}): any;
|
|
20
|
+
'mobile-sidebar'?(_: {}): any;
|
|
21
|
+
'mobile-sidebar-footer'?(_: {}): any;
|
|
22
|
+
};
|
|
23
|
+
refs: {
|
|
24
|
+
layoutMainRef: HTMLElement;
|
|
25
|
+
mainScrollRef: HTMLDivElement;
|
|
26
|
+
};
|
|
27
|
+
rootEl: HTMLDivElement;
|
|
28
|
+
};
|
|
29
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
30
|
+
declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
31
|
+
layoutMainRef: HTMLElement;
|
|
32
|
+
mainScrollRef: HTMLDivElement;
|
|
33
|
+
}, HTMLDivElement>;
|
|
34
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
35
|
+
export default _default;
|
|
36
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
37
|
+
new (): {
|
|
38
|
+
$slots: S;
|
|
39
|
+
};
|
|
40
|
+
};
|