vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
291 lines (290 loc) • 9.51 kB
JavaScript
import { defineComponent as ne, toRef as M, ref as v, computed as h, shallowReadonly as re, reactive as le, watch as b, onMounted as oe, onBeforeMount as te, createVNode as n, renderSlot as C, mergeProps as P } from "vue";
import "../avatar/index.mjs";
import "../dropdown/index.mjs";
import "../dropdown-list/index.mjs";
import "../dropdown-item/index.mjs";
import "../icon/index.mjs";
import "../menu/index.mjs";
import "../switch/index.mjs";
import { useProps as se, useNameHelper as ue, useIcons as ie, useLocale as ce, emitEvent as u } from "@vexip-ui/config";
import { useRtl as de, useMounted as me } from "@vexip-ui/hooks";
import { isClient as H } from "@vexip-ui/utils";
import { layoutHeaderProps as fe } from "./props.mjs";
import { useLayoutState as pe, computeSeriesColors as O } from "./helper.mjs";
import f from "../icon/icon.mjs";
import ge from "../switch/switch.vue2.mjs";
import B from "../avatar/avatar.vue2.mjs";
import ve from "../dropdown/dropdown-list.vue2.mjs";
import he from "../dropdown/dropdown-item.vue2.mjs";
import be from "../menu/menu.mjs";
import Ce from "../dropdown/dropdown.vue2.mjs";
const we = /* @__PURE__ */ ne({
name: "LayoutHeader",
props: fe,
emits: ["update:sign-type", "update:color", "update:user-dropped", "update:dark-mode"],
setup(I, {
slots: t,
emit: y,
expose: $
}) {
var E;
const a = se("layoutHeader", I, {
locale: null,
tag: "header",
logo: "",
signName: "",
user: {
default: () => ({
name: ""
}),
static: !0
},
userDropped: !1,
avatarCircle: !1,
config: () => ["nav", "theme", "color"],
actions: () => [],
signType: "aside",
colors: () => ["#339af0", "#f03e3e", "#be4bdb", "#7950f2", "#1b9e44", "#f76707"],
color: "",
menus: {
default: () => [],
static: !0
},
menuProps: null,
darkMode: null
}), r = ue("layout"), i = ie(), k = ce("layout", M(a, "locale")), o = pe(), L = v(a.signType), S = v(a.userDropped), x = v(), {
isRtl: w
} = de(), {
isMounted: j
} = me(), c = h(() => (j.value, H ? document.documentElement : null)), p = v(a.color || _() || ((E = a.colors) == null ? void 0 : E[0])), d = v(!1), V = h(() => [r.be("header"), {
[r.bs("vars")]: !o.isLayout,
[r.bem("header", "inherit")]: o.isLayout || a.inherit,
[r.bem("header", "away")]: !o.affixMatched,
[r.bem("header", "affixed")]: o.affixed
}, o.classes.header]), q = h(() => {
var e;
return (e = a.actions) != null && e.length ? a.actions.filter((l) => !l.hidden) : [{
label: "signOut",
name: k.value.signOut,
icon: i.value.signOut.icon,
iconProps: i.value.signOut
}];
}), z = h(() => !!(a.logo || a.signName || t.left)), F = h(() => {
var e, l;
return !!((e = a.menus) != null && e.length || (l = a.menuProps) != null && l.router);
}), g = re(le({
expanded: M(o, "expanded"),
reduced: M(o, "reduced"),
toggleExpanded: N,
toggleReduced: R,
handleColorChange: U,
toggleUserDropped: m
}));
$({
menu: x,
toggleExpanded: N,
toggleReduced: R,
expandMenuByLabel: Q,
toggleUserDropped: m
}), b(() => a.signType, (e) => {
L.value = e;
}), b(() => a.userDropped, (e) => {
S.value = e;
}), b(p, O), b(() => a.darkMode, (e) => {
var l;
d.value = e ?? ((l = c.value) == null ? void 0 : l.classList.contains("dark")) ?? !1;
}, {
immediate: !0
}), oe(() => {
A(d.value);
}), te(() => {
b(() => a.color, (e) => {
var l;
p.value = e || _() || ((l = a.colors) == null ? void 0 : l[0]);
}, {
immediate: !0
}), O(p.value);
});
function _() {
return c.value ? getComputedStyle(c.value).getPropertyValue("--vxp-color-primary-base") : "#339af0";
}
function G(e, l) {
u(a.onUserAction, e, l);
}
function D(e) {
o.changeInLock(() => {
L.value = e, y("update:sign-type", e), u(a.onNavChange, e);
});
}
function N(e = !o.expanded) {
o.expanded = e, u(a.onExpandedChange, e);
}
function R(e = !o.reduced) {
o.reduced = e, u(a.onReducedChange, e);
}
function U(e) {
p.value = e, y("update:color", e), u(a.onColorChange, e);
}
function J(e) {
u(a.onSignClick, e);
}
function m(e = !S.value) {
S.value = e, y("update:user-dropped", e), u(a.onDroppedChange, e);
}
function K(e, l) {
m(!1), u(a.onMenuSelect, e, l);
}
function Q(e) {
var l;
(l = x.value) == null || l.expandItemByLabel(e);
}
function A(e) {
d.value = e, y("update:dark-mode", e), u(a.onToggleTheme, e), H && requestAnimationFrame(() => {
c.value && (e ? c.value.classList.add("dark") : c.value.classList.remove("dark"));
});
}
function T() {
return n(f, i.value.check, null);
}
function W() {
return n("div", {
class: r.be("config-unit")
}, [n("div", {
class: [r.be("brief-block"), r.bem("brief-block", "aside")],
onClick: () => D("aside")
}, [L.value === "aside" && T()]), n("div", {
class: r.be("brief-block"),
onClick: () => D("header")
}, [L.value === "header" && T()])]);
}
function X() {
return n("div", {
class: r.be("config-unit")
}, [n(ge, {
value: d.value,
class: [r.be("theme-mode"), d.value && r.bem("theme-mode", "dark")],
"aria-label": "theme",
onChange: A
}, {
icon: () => d.value ? n(f, i.value.dark, null) : n(f, i.value.light, null)
})]);
}
function Y() {
var e;
return (e = a.colors) != null && e.length ? n("div", {
class: r.be("config-unit")
}, [a.colors.map((l) => n("div", {
key: l,
class: r.be("major-color"),
style: {
backgroundColor: l
},
onClick: () => U(l)
}, [p.value === l && T()]))]) : null;
}
function Z() {
var e;
return t.avatar ? C(t, "avatar", g) : typeof ((e = a.user) == null ? void 0 : e.avatar) == "string" ? n(B, {
src: a.user.avatar,
circle: a.avatarCircle,
onClick: () => m()
}, {
icon: () => n(f, i.value.user, null)
}) : n(B, {
circle: a.avatarCircle,
onClick: () => m()
}, {
icon: () => n(f, P(i.value.user, {
icon: a.user.avatar || i.value.user.icon
}), null)
});
}
function ee() {
return n(ve, null, {
default: () => {
var e, l;
return [((e = a.user) == null ? void 0 : e.name) && n("li", {
class: r.be("user-profile")
}, [n("span", {
class: r.be("user-name")
}, [a.user.name]), a.user.email && n("span", {
class: r.be("user-email")
}, [a.user.email])]), (l = a.config) != null && l.length ? ae() : null, q.value.map((s) => n(he, {
key: s.label,
class: r.be("user-action"),
label: s.label,
disabled: s.disabled,
divided: s.divided,
onSelect: () => G(s.label, s.meta || {})
}, {
default: () => [s.icon && n(f, P(s.iconProps, {
icon: s.icon,
style: {
marginRight: "6px"
}
}), null), s.name || s.label]
}))];
}
});
}
function ae() {
return n("li", {
class: r.be("config")
}, [a.config.includes("nav") && o.navConfig && [n("div", {
key: 1,
class: r.be("config-label")
}, [k.value.signType]), W()], a.config.includes("theme") && [n("div", {
key: 2,
class: r.be("config-label")
}, [k.value.themeMode]), X()], a.config.includes("color") && [n("div", {
key: 3,
class: r.be("config-label")
}, [k.value.majorColor]), Y()]]);
}
return () => {
const e = a.tag || "header";
return n(e, {
class: V.value
}, {
default: () => [z.value && n("div", {
class: [r.be("header-left"), o.classes.headerLeft]
}, [t.left ? C(t, "left", g) : a.signType === "header" ? n("div", {
class: r.be("sign"),
onClick: J
}, [a.logo && n("div", {
class: r.be("logo")
}, [n("img", {
src: a.logo,
alt: "Logo"
}, null)]), a.signName && n("span", {
class: r.be("sign-name")
}, [a.signName])]) : null]), n("div", {
class: [r.be("header-main"), o.classes.headerMain]
}, [t.default ? C(t, "default", g) : F.value ? n(be, P({
ref: x
}, a.menuProps || {}, {
horizontal: !0,
transfer: !0,
options: a.menus,
onSelect: K
}), null) : null]), t.right && n("div", {
class: [r.be("header-right"), o.classes.headerRight]
}, [C(t, "right", g)]), t.user ? C(t, "user", g) : n(Ce, {
class: [r.be("user"), o.classes.headerUser],
transfer: !0,
placement: w.value ? "bottom-start" : "bottom-end",
visible: S.value,
trigger: "custom",
onClickOutside: () => m(!1)
}, {
default: Z,
drop: ee
})]
});
};
}
});
export {
we as default
};
//# sourceMappingURL=layout-header.mjs.map