tdesign-pro-component
Version:
ProComponents tdesign-vue-next + Vue3 + TS
289 lines (288 loc) • 7.28 kB
JavaScript
import { w as k } from "./utils-DU1amZow.js";
import { defineComponent as p, createVNode as l, ref as h, Fragment as C, mergeProps as g, resolveComponent as P, isVNode as S, useSlots as $, watch as M, openBlock as H, createBlock as j, unref as v, isRef as G, createSlots as _, withCtx as f, renderSlot as c } from "vue";
import { u as w } from "./hooks-9GWkbKry.js";
import { H as L, b as O, c as T, S as V, d as I, A as B, L as R, C as N, F as b } from "./vendor-B4aI3wuy.js";
const A = /* @__PURE__ */ p({
name: "ProLayoutHeader",
setup(n, {
slots: t
}) {
return () => l(L, null, {
default: () => [l("div", {
class: "pro-layout-header"
}, [t.logo && l("div", {
class: "pro-layout-header-logo"
}, [t.logo()]), l("div", {
class: "pro-layout-header-body"
}, [t.default && t.default()]), t.actions && l("div", {
class: "pro-layout-header-actions"
}, [t.actions()])])]
});
}
}), U = /* @__PURE__ */ p({
name: "LayoutMenu",
props: {
routes: {
type: Array,
default: () => []
},
routeGroup: {
type: Boolean,
default: !1
},
menuTheme: String,
menuProps: Object,
onClick: Function
},
setup(n, {
emit: t,
expose: d
}) {
const r = h(!1);
function s(a, e) {
t("click", a, e);
}
d({
setCollapsed: (a) => r.value = a
});
const u = ({
routes: a
}) => !a || a.length <= 0 ? null : l(C, null, [a.map((e) => e.children && e.children.length > 0 ? n.routeGroup ? l(T, {
key: e.path,
title: typeof e.title == "string" ? e.title : e.title()
}, {
default: () => [l(u, {
routes: e.children
}, null)]
}) : l(V, {
disabled: e.disabled,
icon: (e == null ? void 0 : e.icon) && (typeof (e == null ? void 0 : e.icon) == "string" ? l(P("t-icon"), {
name: e.icon
}, null) : e.icon()),
key: e.path,
title: typeof e.title == "string" ? e.title : e.title(),
value: e.path
}, {
default: () => [l(u, {
routes: e.children
}, null)]
}) : l(I, {
disabled: e.disabled,
key: e.path,
value: e.path,
icon: e.icon && (typeof e.icon == "string" ? l(P("t-icon"), {
name: e.icon
}, null) : e.icon()),
onClick: (y) => s(e.path, e)
}, {
default: () => [l("span", null, [typeof e.title == "string" ? e.title : e.title()])]
}))]);
return () => l(C, null, [l(O, g(n.menuProps, {
theme: n.menuTheme,
collapsed: r.value,
"onUpdate:collapsed": (a) => r.value = a
}), {
default: () => [l(u, {
routes: n.routes
}, null)]
})]);
}
}), F = /* @__PURE__ */ p({
name: "ProLayoutAside",
props: {
routes: {
type: Array,
default: () => []
},
routeGroup: {
type: Boolean
},
menuTheme: {
type: String,
default: "light"
},
menuProps: Object
},
setup(n, {
slots: t,
emit: d,
expose: r
}) {
const s = h();
r({
setCollapsed: (a) => s.value.setCollapsed(a)
});
function u(a, e) {
d("menuClick", a, e);
}
return () => l(B, {
style: {
width: "auto"
}
}, {
default: () => [n.routes && n.routes.length ? l(U, g(n, {
ref: s,
onClick: u
}), null) : t && t.default ? t == null ? void 0 : t.default() : null]
});
}
});
function m(n) {
return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !S(n);
}
const W = /* @__PURE__ */ p({
props: {
headerRender: {
type: [Boolean, Function],
default: !1
},
logoRender: {
type: [Boolean, Function],
default: !1
},
actionsRender: {
type: [Boolean, Function],
default: !1
},
asideRender: {
type: [Boolean, Function],
default: !1
},
routes: {
type: Array
},
routeGroup: {
type: Boolean
},
menuTheme: String,
menuProps: Object
},
setup(n, {
slots: t,
emit: d,
expose: r
}) {
const s = h(), u = () => l(A, n, {
//@ts-ignore
logo: t.logo ? () => t.logo() : n.logoRender ? n.logoRender(n) : null,
//@ts-ignore
default: () => n.headerRender ? n.headerRender(n) : null,
//@ts-ignore
actions: t.actions ? () => t.actions() : n.actionsRender ? n.actionsRender(n) : null
}), a = () => {
let o;
if (!(!n.asideRender && !n.routes))
return l(F, g({
ref: s,
onMenuClick: y
}, n), m(o = n.asideRender(n)) ? o : {
default: () => [o]
});
}, e = () => {
let o;
if (t.footer) {
let i;
return l(b, null, m(i = t.footer()) ? i : {
default: () => [i]
});
}
if (n.footerRender)
return l(b, null, m(o = n.footerRender(n)) ? o : {
default: () => [o]
});
};
function y(o, i) {
d("menuClick", o, i);
}
return r({
setCollapsed: (o) => s.value.setCollapsed(o)
}), () => l(R, {
style: {
minHeight: "100%",
minWidth: "100%"
}
}, {
default: () => {
let o, i;
return l(C, null, [t.header ? l(L, null, m(o = t.header()) ? o : {
default: () => [o]
}) : n.headerRender && l(u, null, null), l(R, null, {
default: () => [t.aside ? l(B, null, m(i = t.aside()) ? i : {
default: () => [i]
}) : l(a, null, null), l(R, null, {
default: () => [l(N, null, {
default: () => [t && t.default && t.default()]
}), l(e, null, null)]
})]
})]);
}
});
}
}), q = /* @__PURE__ */ p({
name: "ProLayout",
__name: "ProLayout",
props: {
headerRender: {},
logoRender: {},
actionsRender: {},
asideRender: {},
footerRender: {},
routes: {},
routeGroup: {
type: Boolean
},
collapsed: {
type: Boolean
},
menuTheme: {},
menuProps: {},
onClick: {
type: Function
}
},
setup(n, {
emit: t
}) {
const d = $(), u = w(n, "collapsed", t, !1), a = h();
return M(u, (e) => {
a.value.setCollapsed(e);
}), (e, y) => (H(), j(v(W), g({
ref_key: "layoutRef",
ref: a,
collapsed: v(u),
"onUpdate:collapsed": y[0] || (y[0] = (o) => G(u) ? u.value = o : null)
}, e.$props), _({
default: f(() => [c(e.$slots, "default")]),
_: 2
}, [d.logo ? {
name: "logo",
fn: f(() => [c(e.$slots, "logo")]),
key: "0"
} : void 0, d.header ? {
name: "header",
fn: f(() => [c(e.$slots, "header")]),
key: "1"
} : void 0, d.actions ? {
name: "actions",
fn: f(() => [c(e.$slots, "actions")]),
key: "2"
} : void 0, d.aside ? {
name: "aside",
fn: f(() => [c(e.$slots, "aside")]),
key: "3"
} : void 0, d.aside ? {
name: "aside",
fn: f(() => [c(e.$slots, "aside")]),
key: "4"
} : void 0, d.footer ? {
name: "footer",
fn: f(() => [c(e.$slots, "footer")]),
key: "5"
} : void 0]), 1040, ["collapsed"]));
}
}), K = k(q), Q = k(A), X = k(F);
export {
K as P,
Q as a,
X as b
};