@uozi-admin/layout-antdv
Version:
Easy to implement admin layout
573 lines (572 loc) • 20.3 kB
JavaScript
import { defineComponent as L, createElementBlock as b, openBlock as o, renderSlot as g, createTextVNode as T, toDisplayString as S, createElementVNode as w, createVNode as f, unref as n, createCommentVNode as $, ref as M, resolveComponent as G, createBlock as h, withDirectives as J, withCtx as s, vShow as Q, Fragment as z, renderList as B, h as H, mergeModels as D, useModel as X, useSlots as Y, onMounted as K, onUnmounted as Z, createSlots as E, normalizeProps as P, guardReactiveProps as R, inject as x, computed as U, watch as ee, createStaticVNode as te, provide as ae } from "vue";
import { MenuUnfoldOutlined as oe } from "@ant-design/icons-vue";
import { Avatar as ne, Image as se, Menu as le, SubMenu as re, MenuItem as N, Drawer as ue, LayoutSider as de, Breadcrumb as ce, BreadcrumbItem as ie, Select as pe, SelectOption as ge, PageHeader as he, Layout as O, LayoutHeader as me, LayoutContent as fe, LayoutFooter as ve } from "ant-design-vue";
import { isFunction as _e, throttle as be, isArray as ye, isObject as $e } from "lodash-es";
import { useRoute as W, useRouter as we, RouterLink as Se } from "vue-router";
const ke = { class: "app-footer" }, Le = /* @__PURE__ */ L({
__name: "AppFooter",
props: {
copyright: {}
},
setup(r) {
return (l, u) => (o(), b("div", ke, [
g(l.$slots, "default", {}, void 0, !0),
g(l.$slots, "footer-content", {}, () => [
T(S(l.copyright), 1)
], !0)
]));
}
}), y = (r, l) => {
const u = r.__vccOpts || r;
for (const [c, d] of l)
u[c] = d;
return u;
}, Ce = /* @__PURE__ */ y(Le, [["__scopeId", "data-v-df504333"]]), Ie = { class: "app-header" }, Te = { class: "tool" }, Me = { class: "flex w-full items-center justify-end" }, ze = { class: "flex items-center gap-4" }, Be = /* @__PURE__ */ L({
__name: "AppHeader",
emits: ["clickUnFold"],
setup(r, { emit: l }) {
const u = l;
return (c, d) => (o(), b("div", Ie, [
w("div", Te, [
f(n(oe), {
onClick: d[0] || (d[0] = (p) => u("clickUnFold"))
})
]),
w("div", Me, [
w("div", ze, [
g(c.$slots, "default", {}, void 0, !0)
]),
c.$slots.actions ? g(c.$slots, "actions", { key: 0 }, void 0, !0) : $("", !0)
])
]));
}
}), Ae = /* @__PURE__ */ y(Be, [["__scopeId", "data-v-48d86765"]]);
function k(r) {
return r ? _e(r) ? r() : r : "";
}
const Ve = { class: "logo mb-1" }, Fe = {
key: 1,
class: "p-4"
}, Pe = /* @__PURE__ */ L({
__name: "SidebarContent",
props: {
logo: {},
headerTitle: { type: [String, Function], default: "Admin Dashboard" },
items: { default: () => [] },
collapsed: { type: Boolean, default: !1 }
},
emits: ["clickMenuItem"],
setup(r, { emit: l }) {
const u = l, c = W(), d = M([c.name]), p = c.path.lastIndexOf("/"), m = M([c.path.substring(0, p)]);
function v({ item: t }) {
u("clickMenuItem", t);
}
return (t, e) => {
const _ = G("RouterLink");
return o(), b("div", null, [
w("div", Ve, [
g(t.$slots, "logo", { collapsed: t.collapsed }, () => [
t.collapsed && !t.logo ? (o(), h(n(ne), {
key: 0,
size: "large",
class: "flex items-center bg-purple-5 dark:bg-purple-8 text-xl transition-all"
}, {
default: s(() => [
T(S(n(k)(t.headerTitle)[0]), 1)
]),
_: 1
})) : $("", !0),
t.collapsed && t.logo ? (o(), b("div", Fe, [
f(n(se), { src: t.logo }, null, 8, ["src"])
])) : $("", !0),
J(w("h1", { class: "text-20px font-400 transition-all line-clamp-1 my-0" }, S(n(k)(t.headerTitle)), 513), [
[Q, !t.collapsed]
])
], !0)
]),
f(n(le), {
"selected-keys": d.value,
"onUpdate:selectedKeys": e[0] || (e[0] = (a) => d.value = a),
"open-keys": m.value,
"onUpdate:openKeys": e[1] || (e[1] = (a) => m.value = a),
mode: "inline",
onClick: v
}, {
default: s(() => [
(o(!0), b(z, null, B(t.items, (a) => {
var C;
return o(), b(z, {
key: a.path
}, [
(C = a.children) != null && C.length ? (o(), h(n(re), {
key: a.path,
icon: a != null && a.icon ? H(a == null ? void 0 : a.icon) : void 0
}, {
title: s(() => [
T(S(n(k)(a.title)), 1)
]),
default: s(() => [
(o(!0), b(z, null, B(a.children, (i) => (o(), h(n(N), {
key: i.name
}, {
default: s(() => [
f(_, {
to: `${a.path}/${i.path}`
}, {
default: s(() => [
T(S(n(k)(i.title)), 1)
]),
_: 2
}, 1032, ["to"])
]),
_: 2
}, 1024))), 128))
]),
_: 2
}, 1032, ["icon"])) : (o(), h(n(N), {
key: a.name,
icon: a != null && a.icon ? H(a == null ? void 0 : a.icon) : void 0
}, {
default: s(() => [
f(_, {
to: a.path
}, {
default: s(() => [
T(S(n(k)(a.title)), 1)
]),
_: 2
}, 1032, ["to"])
]),
_: 2
}, 1032, ["icon"]))
], 64);
}), 128))
]),
_: 1
}, 8, ["selected-keys", "open-keys"]),
g(t.$slots, "default", {}, void 0, !0)
]);
};
}
}), j = /* @__PURE__ */ y(Pe, [["__scopeId", "data-v-e89bd37c"]]), Re = { class: "drawer-sidebar" }, Ue = /* @__PURE__ */ L({
__name: "AppSidebar",
props: /* @__PURE__ */ D({
logo: {},
headerTitle: { type: [String, Function], default: "Admin Dashboard" },
items: { default: () => [] }
}, {
drawerVisible: { type: Boolean, default: !1 },
drawerVisibleModifiers: {}
}),
emits: /* @__PURE__ */ D(["clickMenuItem", "collapseSidebar"], ["update:drawerVisible"]),
setup(r, { emit: l }) {
const u = l, c = X(r, "drawerVisible"), d = Y(), p = M(!1), m = M(!1);
function v() {
m.value = _(), p.value = e() < 600;
}
const t = be(v, 50);
K(t);
function e() {
return document.body.clientWidth;
}
function _() {
return e() < 1280;
}
addEventListener("resize", t);
function a(i) {
m.value = i, u("collapseSidebar", i);
}
function C({ item: i }) {
u("clickMenuItem", i);
}
return Z(() => {
removeEventListener("resize", t);
}), (i, I) => (o(), b("div", null, [
w("div", Re, [
f(n(ue), {
open: c.value,
"onUpdate:open": I[0] || (I[0] = (V) => c.value = V),
closable: !1,
placement: "left",
width: "256",
onClose: I[1] || (I[1] = (V) => a(!1))
}, {
default: s(() => [
f(j, {
logo: i.logo,
"header-title": i.headerTitle,
items: i.items,
onSelectMenuItem: C
}, E({ _: 2 }, [
B(n(d), (V, A) => ({
name: A,
fn: s((F) => [
g(i.$slots, A, P(R(F)), void 0, !0)
])
}))
]), 1032, ["logo", "header-title", "items"])
]),
_: 3
}, 8, ["open"])
]),
p.value ? $("", !0) : (o(), h(n(de), {
key: 0,
class: "z-11 bg-base! h-full",
collapsed: m.value,
collapsible: "",
onCollapse: a
}, {
default: s(() => [
f(j, {
logo: i.logo,
"header-title": i.headerTitle,
items: i.items,
collapsed: m.value,
onSelectMenuItem: C
}, E({ _: 2 }, [
B(n(d), (V, A) => ({
name: A,
fn: s((F) => [
g(i.$slots, A, P(R(F)), void 0, !0)
])
}))
]), 1032, ["logo", "header-title", "items", "collapsed"])
]),
_: 3
}, 8, ["collapsed"]))
]));
}
}), He = /* @__PURE__ */ y(Ue, [["__scopeId", "data-v-bd55eaa0"]]);
function De() {
return x("breadList");
}
const Ee = /* @__PURE__ */ L({
__name: "Breadcrumb",
props: {
items: {}
},
setup(r) {
const l = r, u = W(), c = we(), d = U(() => {
const m = u.matched, v = [];
return m.forEach((t) => {
var e, _, a, C, i;
if ((e = t.meta) != null && e.lastRouteName) {
const I = c.resolve({ name: t.meta.lastRouteName });
v.push({
title: ((_ = I.meta) == null ? void 0 : _.breadcrumb) || ((a = I.meta) == null ? void 0 : a.title) || "",
path: I.path
});
}
v.push({
title: ((C = t.meta) == null ? void 0 : C.breadcrumb) || ((i = t.meta) == null ? void 0 : i.title) || "",
path: t.path
});
}), l.items || v;
}), p = De();
return K(() => {
p.value = d.value;
}), ee(u, () => {
p.value = d.value;
}), (m, v) => (o(), h(n(ce), null, {
default: s(() => [
(o(!0), b(z, null, B(d.value, (t, e) => (o(), h(n(ie), { key: e }, {
default: s(() => [
g(m.$slots, "default", { item: t }, () => [
t.path && e !== d.value.length - 1 ? (o(), h(n(Se), {
key: 0,
to: t.path
}, {
default: s(() => [
T(S(n(k)(t.title)), 1)
]),
_: 2
}, 1032, ["to"])) : (o(), b(z, { key: 1 }, [
T(S(n(k)(t.title)), 1)
], 64))
], !0)
]),
_: 2
}, 1024))), 128))
]),
_: 3
}));
}
}), Ne = /* @__PURE__ */ y(Ee, [["__scopeId", "data-v-9b8b7b65"]]), Oe = /* @__PURE__ */ L({
__name: "LanguageSelect",
props: {
currentLanguage: {},
languages: {}
},
emits: ["changeLanguage"],
setup(r, { emit: l }) {
const u = r, c = l, d = U(() => {
if (ye(u.languages)) {
const v = {};
return u.languages.forEach((t) => {
v[t] = t;
}), v;
}
return $e(u.languages) ? u.languages : {};
}), p = M(u.currentLanguage);
function m() {
document.documentElement.setAttribute("lang", p.value), c("changeLanguage", p.value);
}
return (v, t) => (o(), h(n(pe), {
value: p.value,
"onUpdate:value": t[0] || (t[0] = (e) => p.value = e),
size: "small",
class: "min-w-60px",
"dropdown-match-select-width": !1,
onSelect: m
}, {
default: s(() => [
(o(!0), b(z, null, B(d.value, (e, _) => (o(), h(n(ge), {
key: _,
value: _
}, {
default: s(() => [
T(S(e), 1)
]),
_: 2
}, 1032, ["value"]))), 128))
]),
_: 1
}, 8, ["value"]));
}
}), je = /* @__PURE__ */ y(Oe, [["__scopeId", "data-v-46aa1dfb"]]), Ke = /* @__PURE__ */ L({
__name: "PageHeader",
props: {
pageTitle: {
type: String
}
},
setup(r) {
return (l, u) => (o(), h(n(he), {
class: "p-0",
title: r.pageTitle
}, {
default: s(() => [
g(l.$slots, "default", {}, void 0, !0),
g(l.$slots, "extra", {}, void 0, !0)
]),
_: 3
}, 8, ["title"]));
}
}), We = /* @__PURE__ */ y(Ke, [["__scopeId", "data-v-7342eb4a"]]), qe = {}, Ge = {
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
viewBox: "0 0 24 24"
};
function Je(r, l) {
return o(), b("svg", Ge, l[0] || (l[0] = [
w("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 Qe = /* @__PURE__ */ y(qe, [["render", Je], ["__scopeId", "data-v-e3a1b169"]]), Xe = {}, Ye = {
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": "true",
focusable: "false",
viewBox: "0 0 24 24"
};
function Ze(r, l) {
return o(), b("svg", Ye, l[0] || (l[0] = [
te('<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 xe = /* @__PURE__ */ y(Xe, [["render", Ze], ["__scopeId", "data-v-e9043ad6"]]), et = {}, tt = {
class: "VPSwitch",
type: "button",
role: "switch"
}, at = { class: "check" }, ot = {
key: 0,
class: "icon"
};
function nt(r, l) {
return o(), b("button", tt, [
w("span", at, [
r.$slots.default ? (o(), b("span", ot, [
g(r.$slots, "default", {}, void 0, !0)
])) : $("", !0)
])
]);
}
const st = /* @__PURE__ */ y(et, [["render", nt], ["__scopeId", "data-v-35181a82"]]), lt = /* @__PURE__ */ L({
__name: "ThemeSwitch",
props: {
currentTheme: { default: "light" }
},
emits: ["toggleTheme"],
setup(r, { emit: l }) {
const u = r, c = l, d = M(u.currentTheme), p = U(() => d.value === "dark");
function m() {
d.value = p.value ? "light" : "dark", document.documentElement.classList.toggle("dark", p.value), c("toggleTheme", d.value);
}
return (v, t) => (o(), h(st, {
class: "VPSwitchAppearance",
"aria-checked": p.value,
onClick: m
}, {
default: s(() => [
f(xe, { class: "sun" }),
f(Qe, { class: "moon" })
]),
_: 1
}, 8, ["aria-checked"]));
}
}), rt = /* @__PURE__ */ y(lt, [["__scopeId", "data-v-4cfbae5d"]]), ut = { class: "flex flex-col gap-1 px-6 py-2 page-header light:bg-base" }, dt = { class: "main-content p-4" }, ct = /* @__PURE__ */ L({
__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: () => [] }
},
emits: [
"toggleTheme",
"changeLanguage",
"menuSelect",
"sidebarCollapsed"
],
setup(r, { emit: l }) {
const u = l, c = M(!1);
function d(e) {
u("toggleTheme", e);
}
function p(e) {
u("changeLanguage", e);
}
function m(e) {
u("menuSelect", e);
}
function v(e) {
u("sidebarCollapsed", e);
}
const t = M([]);
return ae("breadList", t), (e, _) => (o(), h(n(O), { class: "layout-container h-screen of-hidden" }, {
default: s(() => [
f(He, {
"drawer-visible": c.value,
"onUpdate:drawerVisible": _[0] || (_[0] = (a) => c.value = a),
logo: e.logo,
"header-title": e.siteTitle,
items: e.sidebarItems,
onSelectMenuItem: m,
onCollapseSidebar: v
}, {
logo: s((a) => [
g(e.$slots, "logo", P(R(a)), void 0, !0)
]),
_: 3
}, 8, ["drawer-visible", "logo", "header-title", "items"]),
f(n(O), { class: "main-container" }, {
default: s(() => [
f(n(me), { class: "z-10 shadow-sm p-inline-0!" }, {
default: s(() => [
f(Ae, {
onClickUnFold: _[1] || (_[1] = (a) => c.value = !0)
}, {
actions: s(() => [
g(e.$slots, "header-extra", {}, void 0, !0)
]),
default: s(() => [
e.showLanguageSelect ? (o(), h(je, {
key: 0,
"current-language": e.currentLanguage,
languages: e.languages,
onChangeLanguage: p
}, null, 8, ["current-language", "languages"])) : $("", !0),
e.showThemeSwitch ? (o(), h(rt, {
key: 1,
"current-theme": e.currentTheme,
onToggleTheme: d
}, null, 8, ["current-theme"])) : $("", !0)
]),
_: 3
})
]),
_: 3
}),
f(n(fe), { class: "flex flex-col max-h-full of-auto" }, {
default: s(() => [
w("div", ut, [
e.showBreadcrumb ? (o(), h(Ne, {
key: 0,
items: e.breadcrumbItems
}, {
default: s((a) => [
g(e.$slots, "breadcrumb-item", { item: a }, void 0, !0)
]),
_: 3
}, 8, ["items"])) : $("", !0),
e.showPageHeader && e.pageTitle ? (o(), h(We, {
key: 1,
"page-title": n(k)(e.pageTitle)
}, {
default: s(() => [
g(e.$slots, "page-header-extra", {}, void 0, !0)
]),
_: 3
}, 8, ["page-title"])) : $("", !0)
]),
w("div", dt, [
g(e.$slots, "default", {}, void 0, !0)
]),
e.showFooter ? (o(), h(n(ve), { key: 0 }, {
default: s(() => [
f(Ce, {
copyright: n(k)(e.copyright)
}, {
default: s(() => [
g(e.$slots, "footer-content", {}, void 0, !0)
]),
_: 3
}, 8, ["copyright"])
]),
_: 3
})) : $("", !0)
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}));
}
}), ft = /* @__PURE__ */ y(ct, [["__scopeId", "data-v-89cb894e"]]), q = {
siteTitle: "Admin Dashboard",
copyright: "Uozi-Tech"
};
function vt(r) {
Object.assign(q, r);
}
function _t() {
return q;
}
export {
ft as AdminLayout,
Ce as AppFooter,
Ae as AppHeader,
He as AppSidebar,
Ne as Breadcrumb,
je as LanguageSelect,
ft as Layout,
We as PageHeader,
rt as ThemeSwitch,
_t as getAppConfig,
k as getRealTitle,
vt as setAppConfig,
De as useBreadcrumbs
};