plus-pro-components
Version:
Page level components developed based on Element Plus.
212 lines (209 loc) • 8.47 kB
JavaScript
import { createElementVNode, defineComponent, openBlock, createElementBlock, Fragment, createVNode, unref, normalizeClass, withCtx, createBlock, resolveDynamicComponent, renderSlot, createCommentVNode, toDisplayString, createTextVNode, renderList } from 'vue';
import { User, ArrowDown } from '@element-plus/icons-vue';
import { ElHeader, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import '../../../hooks/index.mjs';
import '../../utils/index.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { isFunction } from '../../utils/is.mjs';
const _hoisted_1 = { class: "plus-header__left" };
const _hoisted_2 = ["src"];
const _hoisted_3 = {
key: 1,
class: "plus-header__title"
};
const _hoisted_4 = /* @__PURE__ */ createElementVNode(
"div",
{ class: "plus-header__placeholder" },
null,
-1
/* HOISTED */
);
const _hoisted_5 = { class: "plus-header__right" };
const _hoisted_6 = { class: "plus-header__dropdown-area" };
const _hoisted_7 = ["src"];
const _hoisted_8 = { class: "plus-header__username" };
const _hoisted_9 = {
key: 0,
class: "plus-header-placeholder"
};
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "PlusHeader"
},
__name: "index",
props: {
logo: { default: "https://plus-pro-components.com/logo.png" },
fixed: { type: Boolean, default: false },
title: { default: "PlusProComponents" },
logoutText: { default: "" },
trigger: { default: "click" },
userInfo: { default: () => ({}) },
hasUserInfo: { type: Boolean, default: true },
dropdownList: { default: () => [] },
renderHeaderLeft: {},
renderHeaderRight: {}
},
emits: ["clickDropdownItem"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const { t } = useLocale();
const logoutItem = {
label: props.logoutText || t("plus.header.logout"),
value: "logout"
};
const handleClickItem = (item) => {
emit("clickDropdownItem", item);
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(
Fragment,
null,
[
createVNode(unref(ElHeader), {
class: normalizeClass(["plus-header", { "is-fixed": _ctx.fixed }])
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
_ctx.renderHeaderLeft && unref(isFunction)(_ctx.renderHeaderLeft) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderHeaderLeft), {
key: 0,
logo: _ctx.logo,
title: _ctx.title
}, null, 8, ["logo", "title"])) : _ctx.$slots["header-left"] ? renderSlot(_ctx.$slots, "header-left", {
key: 1,
logo: _ctx.logo,
title: _ctx.title
}) : (openBlock(), createElementBlock(
Fragment,
{ key: 2 },
[
_ctx.logo ? (openBlock(), createElementBlock("img", {
key: 0,
src: _ctx.logo,
alt: "",
class: "plus-header__logo"
}, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
_ctx.title ? (openBlock(), createElementBlock(
"h2",
_hoisted_3,
toDisplayString(_ctx.title),
1
/* TEXT */
)) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
))
]),
_hoisted_4,
createElementVNode("div", _hoisted_5, [
_ctx.renderHeaderRight && unref(isFunction)(_ctx.renderHeaderRight) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderHeaderRight), {
key: 0,
"user-info": _ctx.userInfo,
title: _ctx.title
}, null, 8, ["user-info", "title"])) : _ctx.$slots["header-right"] ? renderSlot(_ctx.$slots, "header-right", {
key: 1,
userInfo: _ctx.userInfo,
title: _ctx.title
}) : createCommentVNode("v-if", true),
_ctx.hasUserInfo ? (openBlock(), createBlock(unref(ElDropdown), {
key: 2,
placement: "bottom-end",
trigger: "click"
}, {
dropdown: withCtx(() => [
createVNode(unref(ElDropdownMenu), { class: "header-dropdown" }, {
default: withCtx(() => [
createVNode(unref(ElDropdownItem), {
onClick: _cache[0] || (_cache[0] = ($event) => handleClickItem(logoutItem))
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(_ctx.logoutText || unref(t)("plus.header.logout")),
1
/* TEXT */
)
]),
_: 1
/* STABLE */
}),
(openBlock(true), createElementBlock(
Fragment,
null,
renderList(_ctx.dropdownList, (item) => {
return openBlock(), createBlock(unref(ElDropdownItem), {
key: item.value,
onClick: ($event) => handleClickItem(item)
}, {
default: withCtx(() => [
createTextVNode(
toDisplayString(item.label),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["onClick"]);
}),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
})
]),
default: withCtx(() => [
createElementVNode("span", _hoisted_6, [
createCommentVNode(" avatar "),
_ctx.userInfo.avatar ? (openBlock(), createElementBlock("img", {
key: 0,
src: _ctx.userInfo.avatar,
alt: "",
class: "plus-header__avatar"
}, null, 8, _hoisted_7)) : (openBlock(), createBlock(unref(ElIcon), {
key: 1,
size: 20,
class: "plus-header__avatar"
}, {
default: withCtx(() => [
createVNode(unref(User))
]),
_: 1
/* STABLE */
})),
createCommentVNode(" username "),
createElementVNode(
"p",
_hoisted_8,
toDisplayString(_ctx.userInfo.username || "admin"),
1
/* TEXT */
),
createVNode(unref(ElIcon), { class: "el-icon-caret-bottom el-icon--right" }, {
default: withCtx(() => [
createVNode(unref(ArrowDown))
]),
_: 1
/* STABLE */
})
])
]),
_: 1
/* STABLE */
})) : createCommentVNode("v-if", true)
])
]),
_: 3
/* FORWARDED */
}, 8, ["class"]),
_ctx.fixed ? (openBlock(), createElementBlock("div", _hoisted_9)) : createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
export { _sfc_main as default };