@uozi-admin/layout-antdv
Version:
Easy to implement admin layout
616 lines (615 loc) • 21.7 kB
JavaScript
import { defineComponent as T, openBlock as t, createElementBlock as _, renderSlot as f, createTextVNode as B, toDisplayString as I, createElementVNode as $, createVNode as b, unref as a, createCommentVNode as S, ref as z, watch as q, resolveComponent as Y, createBlock as p, withCtx as c, withDirectives as Z, vShow as ee, Fragment as V, renderList as O, h as D, useModel as te, useSlots as ae, onMounted as G, onUnmounted as ne, createSlots as E, normalizeProps as P, guardReactiveProps as R, mergeModels as H, inject as oe, computed as U, createStaticVNode as se, provide as le } from "vue";
import { MenuUnfoldOutlined as J, MenuFoldOutlined as re, ArrowLeftOutlined as ce } from "@antdv-next/icons";
import { Avatar as ue, Image as ie, Menu as de, SubMenu as me, MenuItem as N, Drawer as he, LayoutSider as ge, Breadcrumb as pe, BreadcrumbItem as fe, Select as ve, Button as be, Layout as j, LayoutHeader as ye, LayoutContent as _e, LayoutFooter as $e } from "antdv-next";
import { isFunction as ke, throttle as we, isObject as Se, isArray as Ce } from "lodash-es";
import { useRoute as Q, useRouter as Le, RouterLink as Ie } from "vue-router";
const Me = { class: "app-footer" }, Te = /* @__PURE__ */ T({
__name: "AppFooter",
props: {
copyright: {}
},
setup(e) {
return (l, r) => (t(), _("div", Me, [
f(l.$slots, "default", {}, void 0, !0),
f(l.$slots, "footer-content", {}, () => [
B(I(e.copyright), 1)
], !0)
]));
}
}), w = (e, l) => {
const r = e.__vccOpts || e;
for (const [g, o] of l)
r[g] = o;
return r;
}, xe = /* @__PURE__ */ w(Te, [["__scopeId", "data-v-df504333"]]), ze = { class: "app-header" }, Be = { class: "tool" }, Ae = { class: "flex w-full items-center justify-end" }, Fe = { class: "flex items-center gap-4" }, Ve = /* @__PURE__ */ T({
__name: "AppHeader",
emits: ["clickUnFold"],
setup(e, { emit: l }) {
const r = l;
return (g, o) => (t(), _("div", ze, [
$("div", Be, [
b(a(J), {
onClick: o[0] || (o[0] = (h) => r("clickUnFold"))
})
]),
$("div", Ae, [
$("div", Fe, [
f(g.$slots, "default", {}, void 0, !0)
]),
g.$slots.actions ? f(g.$slots, "actions", { key: 0 }, void 0, !0) : S("", !0)
])
]));
}
}), Oe = /* @__PURE__ */ w(Ve, [["__scopeId", "data-v-2ff51405"]]);
function M(e) {
return e ? ke(e) ? e() : e : "";
}
const Ke = { class: "logo" }, Pe = {
key: 1,
class: "p-4"
}, Re = /* @__PURE__ */ T({
__name: "SidebarContent",
props: {
logo: {},
headerTitle: { type: [String, Function], default: "Admin Dashboard" },
items: { default: () => [] },
collapsed: { type: Boolean, default: !1 }
},
emits: ["selectMenuItem"],
setup(e, { emit: l }) {
const r = e, g = l, o = Q(), h = z(k()), d = z(F());
function y(n, i) {
return n.length === i.length && n.every((v, m) => v === i[m]);
}
function u(n, i) {
return Array.from(/* @__PURE__ */ new Set([...n, ...i]));
}
function s(n) {
return n === "/" ? n : n.replace(/\/+$/, "");
}
function C(n, i) {
return i.startsWith("/") ? s(i) : s(`${s(n)}/${i.replace(/^\/+/, "")}`);
}
function k() {
return o.name ? [String(o.name)] : [];
}
function K() {
const n = s(o.path), i = r.items.find((v) => v.children?.some((m) => m.name === o.name || C(v.path, m.path) === n));
return i ? [i.path] : [];
}
function F() {
const n = K();
if (n.length)
return n;
const i = o.matched.slice(1, -1).map((x) => x.path).filter((x) => x && x !== "/");
if (i.length)
return i;
const v = o.path.lastIndexOf("/"), m = v > 0 ? o.path.substring(0, v) : "";
return m ? [m] : [];
}
q(
() => [o.name, o.path, o.matched.map((n) => n.path).join("|")],
() => {
const n = k(), i = F();
y(h.value, n) || (h.value = n);
const v = u(d.value, i);
y(d.value, v) || (d.value = v);
}
);
function L({ key: n }) {
g("selectMenuItem", n);
}
function A(n) {
r.collapsed || (d.value = n);
}
return (n, i) => {
const v = Y("RouterLink");
return t(), _("div", null, [
$("div", Ke, [
f(n.$slots, "logo", { collapsed: e.collapsed }, () => [
e.collapsed && !e.logo ? (t(), p(a(ue), {
key: 0,
size: "large",
class: "flex items-center bg-purple-5 dark:bg-purple-8 text-xl transition-all"
}, {
default: c(() => [
B(I(a(M)(e.headerTitle)[0]), 1)
]),
_: 1
})) : S("", !0),
e.collapsed && e.logo ? (t(), _("div", Pe, [
b(a(ie), { src: e.logo }, null, 8, ["src"])
])) : S("", !0),
Z($("h1", { class: "text-20px font-400 transition-all line-clamp-1 my-0" }, I(a(M)(e.headerTitle)), 513), [
[ee, !e.collapsed]
])
], !0)
]),
b(a(de), {
"selected-keys": h.value,
"onUpdate:selectedKeys": i[0] || (i[0] = (m) => h.value = m),
"open-keys": e.collapsed ? void 0 : d.value,
mode: "inline",
onOpenChange: A,
onClick: L
}, {
default: c(() => [
(t(!0), _(V, null, O(e.items, (m) => (t(), _(V, {
key: m.path
}, [
m.children?.length ? (t(), p(a(me), {
key: m.path,
icon: m?.icon ? D(m?.icon) : void 0
}, {
title: c(() => [
B(I(a(M)(m.title)), 1)
]),
default: c(() => [
(t(!0), _(V, null, O(m.children, (x) => (t(), p(a(N), {
key: x.name
}, {
default: c(() => [
b(v, {
to: C(m.path, x.path)
}, {
default: c(() => [
B(I(a(M)(x.title)), 1)
]),
_: 2
}, 1032, ["to"])
]),
_: 2
}, 1024))), 128))
]),
_: 2
}, 1032, ["icon"])) : (t(), p(a(N), {
key: m.name,
icon: m?.icon ? D(m?.icon) : void 0
}, {
default: c(() => [
b(v, {
to: m.path
}, {
default: c(() => [
B(I(a(M)(m.title)), 1)
]),
_: 2
}, 1032, ["to"])
]),
_: 2
}, 1032, ["icon"]))
], 64))), 128))
]),
_: 1
}, 8, ["selected-keys", "open-keys"]),
f(n.$slots, "default", {}, void 0, !0)
]);
};
}
}), W = /* @__PURE__ */ w(Re, [["__scopeId", "data-v-d9da1f8e"]]), Ue = { class: "drawer-sidebar" }, De = ["aria-label"], Ee = /* @__PURE__ */ T({
__name: "AppSidebar",
props: /* @__PURE__ */ H({
logo: {},
headerTitle: { type: [String, Function], default: "Admin Dashboard" },
items: { default: () => [] }
}, {
drawerVisible: { type: Boolean, default: !1 },
drawerVisibleModifiers: {}
}),
emits: /* @__PURE__ */ H(["selectMenuItem", "collapseSidebar"], ["update:drawerVisible"]),
setup(e, { emit: l }) {
const r = l, g = te(e, "drawerVisible"), o = ae(), h = z(!1), d = z(!1);
function y() {
d.value = C(), h.value = s() < 600;
}
const u = we(y, 50);
G(u);
function s() {
return document.body.clientWidth;
}
function C() {
return s() < 1280;
}
addEventListener("resize", u);
function k(L) {
d.value = L, r("collapseSidebar", L);
}
function K() {
k(!d.value);
}
function F(L) {
r("selectMenuItem", L);
}
return ne(() => {
removeEventListener("resize", u);
}), (L, A) => (t(), _("div", null, [
$("div", Ue, [
b(a(he), {
open: g.value,
"onUpdate:open": A[0] || (A[0] = (n) => g.value = n),
closable: !1,
placement: "left",
size: "256",
onClose: A[1] || (A[1] = (n) => k(!1))
}, {
default: c(() => [
b(W, {
logo: e.logo,
"header-title": e.headerTitle,
items: e.items,
onSelectMenuItem: F
}, E({ _: 2 }, [
O(a(o), (n, i) => ({
name: i,
fn: c((v) => [
f(L.$slots, i, P(R(v)), void 0, !0)
])
}))
]), 1032, ["logo", "header-title", "items"])
]),
_: 3
}, 8, ["open"])
]),
h.value ? S("", !0) : (t(), p(a(ge), {
key: 0,
class: "app-sidebar z-11 bg-base! h-full",
collapsed: d.value,
collapsible: "",
trigger: null,
onCollapse: k
}, {
default: c(() => [
b(W, {
logo: e.logo,
"header-title": e.headerTitle,
items: e.items,
collapsed: d.value,
onSelectMenuItem: F
}, E({ _: 2 }, [
O(a(o), (n, i) => ({
name: i,
fn: c((v) => [
f(L.$slots, i, P(R(v)), void 0, !0)
])
}))
]), 1032, ["logo", "header-title", "items", "collapsed"]),
$("button", {
type: "button",
class: "sidebar-collapse-trigger",
"aria-label": d.value ? "Expand sidebar" : "Collapse sidebar",
onClick: K
}, [
d.value ? (t(), p(a(J), { key: 0 })) : (t(), p(a(re), { key: 1 }))
], 8, De)
]),
_: 3
}, 8, ["collapsed"]))
]));
}
}), He = /* @__PURE__ */ w(Ee, [["__scopeId", "data-v-81e9d937"]]);
function Ne() {
return oe("breadList");
}
const je = /* @__PURE__ */ T({
__name: "Breadcrumb",
props: {
items: {}
},
setup(e) {
const l = e, r = Q(), g = Le(), o = U(() => {
const d = r.matched, y = [];
return d.forEach((u) => {
if (u.meta?.lastRouteName) {
const s = g.resolve({ name: u.meta.lastRouteName });
y.push({
title: s.meta?.breadcrumb || s.meta?.title || "",
path: s.path
});
}
y.push({
title: u.meta?.breadcrumb || u.meta?.title || "",
path: u.path
});
}), l.items || y;
}), h = Ne();
return G(() => {
h.value = o.value;
}), q(r, () => {
h.value = o.value;
}), (d, y) => (t(), p(a(pe), null, {
default: c(() => [
(t(!0), _(V, null, O(o.value, (u, s) => (t(), p(a(fe), { key: s }, {
default: c(() => [
f(d.$slots, "default", { item: u }, () => [
u.path && s !== o.value.length - 1 ? (t(), p(a(Ie), {
key: 0,
to: u.path
}, {
default: c(() => [
B(I(a(M)(u.title)), 1)
]),
_: 2
}, 1032, ["to"])) : (t(), _(V, { key: 1 }, [
B(I(a(M)(u.title)), 1)
], 64))
], !0)
]),
_: 2
}, 1024))), 128))
]),
_: 3
}));
}
}), We = /* @__PURE__ */ w(je, [["__scopeId", "data-v-954c7181"]]), qe = /* @__PURE__ */ T({
__name: "LanguageSelect",
props: {
currentLanguage: {},
languages: {}
},
emits: ["changeLanguage"],
setup(e, { emit: l }) {
const r = e, g = l, o = U(() => Se(r.languages) ? Object.entries(r.languages).map(([y, u]) => ({
label: u,
value: y
})) : Ce(r.languages) ? r.languages : []), h = z(r.currentLanguage);
function d() {
document.documentElement.setAttribute("lang", h.value), g("changeLanguage", h.value);
}
return (y, u) => (t(), p(a(ve), {
value: h.value,
"onUpdate:value": u[0] || (u[0] = (s) => h.value = s),
size: "small",
class: "min-w-60px",
"dropdown-match-select-width": !1,
options: o.value,
onSelect: d
}, null, 8, ["value", "options"]));
}
}), Ge = /* @__PURE__ */ w(qe, [["__scopeId", "data-v-81ae7fdd"]]), Je = { class: "page-header" }, Qe = { class: "page-header-main" }, Xe = { class: "page-header-title" }, Ye = { class: "page-header-extra" }, Ze = /* @__PURE__ */ T({
__name: "PageHeader",
props: {
pageTitle: {},
back: { type: Function }
},
setup(e) {
return (l, r) => (t(), _("div", Je, [
$("div", Qe, [
e.back ? (t(), p(a(be), {
key: 0,
type: "text",
class: "page-header-back",
onClick: e.back
}, {
icon: c(() => [
b(a(ce))
]),
_: 1
}, 8, ["onClick"])) : S("", !0),
$("h1", Xe, I(e.pageTitle), 1),
$("div", Ye, [
f(l.$slots, "extra", {}, void 0, !0)
])
]),
f(l.$slots, "default", {}, void 0, !0)
]));
}
}), et = /* @__PURE__ */ w(Ze, [["__scopeId", "data-v-ea5cb535"]]), tt = {}, at = {
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
viewBox: "0 0 24 24"
};
function nt(e, l) {
return t(), _("svg", at, [...l[0] || (l[0] = [
$("path", { d: "M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" }, null, -1)
])]);
}
const ot = /* @__PURE__ */ w(tt, [["render", nt], ["__scopeId", "data-v-e3a1b169"]]), st = {}, lt = {
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
viewBox: "0 0 24 24"
};
function rt(e, l) {
return t(), _("svg", lt, [...l[0] || (l[0] = [
se('<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" data-v-e9043ad6></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" data-v-e9043ad6></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" data-v-e9043ad6></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" data-v-e9043ad6></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" data-v-e9043ad6></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" data-v-e9043ad6></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" data-v-e9043ad6></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" data-v-e9043ad6></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" data-v-e9043ad6></path>', 9)
])]);
}
const ct = /* @__PURE__ */ w(st, [["render", rt], ["__scopeId", "data-v-e9043ad6"]]), ut = {}, it = {
class: "VPSwitch",
type: "button",
role: "switch"
}, dt = { class: "check" }, mt = {
key: 0,
class: "icon"
};
function ht(e, l) {
return t(), _("button", it, [
$("span", dt, [
e.$slots.default ? (t(), _("span", mt, [
f(e.$slots, "default", {}, void 0, !0)
])) : S("", !0)
])
]);
}
const gt = /* @__PURE__ */ w(ut, [["render", ht], ["__scopeId", "data-v-35181a82"]]), pt = /* @__PURE__ */ T({
__name: "ThemeSwitch",
props: {
currentTheme: { default: "light" }
},
emits: ["toggleTheme"],
setup(e, { emit: l }) {
const r = e, g = l, o = z(r.currentTheme), h = U(() => o.value === "dark");
function d() {
o.value = h.value ? "light" : "dark", document.documentElement.classList.toggle("dark", h.value), g("toggleTheme", o.value);
}
return (y, u) => (t(), p(gt, {
class: "VPSwitchAppearance",
"aria-checked": h.value,
onClick: d
}, {
default: c(() => [
b(ct, { class: "sun" }),
b(ot, { class: "moon" })
]),
_: 1
}, 8, ["aria-checked"]));
}
}), ft = /* @__PURE__ */ w(pt, [["__scopeId", "data-v-4cfbae5d"]]), vt = { class: "flex flex-col gap-1 px-6 py-2 page-header light:bg-base" }, bt = { class: "main-content p-4" }, yt = /* @__PURE__ */ T({
__name: "Layout",
props: {
siteTitle: { type: [String, Function], default: "Admin Dashboard" },
pageTitle: {},
copyright: {},
logo: {},
showPageHeader: { type: Boolean, default: !0 },
showBreadcrumb: { type: Boolean, default: !0 },
breadcrumbItems: {},
sidebarItems: {},
showFooter: { type: Boolean, default: !0 },
showThemeSwitch: { type: Boolean, default: !0 },
currentTheme: {},
showLanguageSelect: { type: Boolean, default: !0 },
currentLanguage: {},
languages: { default: () => [] },
back: {}
},
emits: [
"toggleTheme",
"changeLanguage",
"menuSelect",
"sidebarCollapsed"
],
setup(e, { emit: l }) {
const r = l, g = z(!1);
function o(s) {
r("toggleTheme", s);
}
function h(s) {
r("changeLanguage", s);
}
function d(s) {
r("menuSelect", s);
}
function y(s) {
r("sidebarCollapsed", s);
}
const u = z([]);
return le("breadList", u), (s, C) => (t(), p(a(j), { class: "layout-container h-screen of-hidden" }, {
default: c(() => [
b(He, {
"drawer-visible": g.value,
"onUpdate:drawerVisible": C[0] || (C[0] = (k) => g.value = k),
logo: e.logo,
"header-title": e.siteTitle,
items: e.sidebarItems,
onSelectMenuItem: d,
onCollapseSidebar: y
}, {
logo: c((k) => [
f(s.$slots, "logo", P(R(k)), void 0, !0)
]),
_: 3
}, 8, ["drawer-visible", "logo", "header-title", "items"]),
b(a(j), { class: "main-container" }, {
default: c(() => [
b(a(ye), { class: "z-10 shadow-sm p-inline-0!" }, {
default: c(() => [
b(Oe, {
onClickUnFold: C[1] || (C[1] = (k) => g.value = !0)
}, {
actions: c(() => [
f(s.$slots, "header-extra", {}, void 0, !0)
]),
default: c(() => [
e.showLanguageSelect ? (t(), p(Ge, {
key: 0,
"current-language": e.currentLanguage,
languages: e.languages,
onChangeLanguage: h
}, null, 8, ["current-language", "languages"])) : S("", !0),
e.showThemeSwitch ? (t(), p(ft, {
key: 1,
"current-theme": e.currentTheme,
onToggleTheme: o
}, null, 8, ["current-theme"])) : S("", !0)
]),
_: 3
})
]),
_: 3
}),
b(a(_e), { class: "flex flex-col max-h-full of-auto" }, {
default: c(() => [
$("div", vt, [
e.showBreadcrumb ? (t(), p(We, {
key: 0,
items: e.breadcrumbItems
}, {
default: c((k) => [
f(s.$slots, "breadcrumb-item", { item: k }, void 0, !0)
]),
_: 3
}, 8, ["items"])) : S("", !0),
e.showPageHeader && e.pageTitle ? (t(), p(et, {
key: 1,
"page-title": a(M)(e.pageTitle),
back: e.back
}, {
default: c(() => [
f(s.$slots, "page-header-extra", {}, void 0, !0)
]),
_: 3
}, 8, ["page-title", "back"])) : S("", !0)
]),
$("div", bt, [
f(s.$slots, "default", {}, void 0, !0)
]),
e.showFooter ? (t(), p(a($e), { key: 0 }, {
default: c(() => [
b(xe, {
copyright: a(M)(e.copyright)
}, {
default: c(() => [
f(s.$slots, "footer-content", {}, void 0, !0)
]),
_: 3
}, 8, ["copyright"])
]),
_: 3
})) : S("", !0)
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}));
}
}), Ct = /* @__PURE__ */ w(yt, [["__scopeId", "data-v-f8895db8"]]), X = {
siteTitle: "Admin Dashboard",
copyright: "Uozi-Tech"
};
function Lt(e) {
Object.assign(X, e);
}
function It() {
return X;
}
export {
Ct as AdminLayout,
xe as AppFooter,
Oe as AppHeader,
He as AppSidebar,
We as Breadcrumb,
Ge as LanguageSelect,
Ct as Layout,
et as PageHeader,
ft as ThemeSwitch,
It as getAppConfig,
M as getRealTitle,
Lt as setAppConfig,
Ne as useBreadcrumbs
};