vexip-ui/lib/components/layout/layout-header.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

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