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

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

"use strict";const r=require("vue");require("../masker/index.cjs");require("../native-scroll/index.cjs");require("../resize-observer/index.cjs");const i=require("@vexip-ui/config"),d=require("@vexip-ui/hooks"),w=require("@vexip-ui/utils"),oe=require("./layout-main.cjs"),de=require("./layout-header.cjs"),ie=require("./layout-footer.cjs"),ue=require("./layout-aside.cjs"),le=require("./props.cjs"),E=require("./helper.cjs"),se=require("./symbol.cjs"),ce=require("../masker/masker.vue2.cjs"),fe=require("../resize-observer/resize-observer.cjs"),pe=require("../native-scroll/native-scroll.cjs");function Y(f){return typeof f=="function"||Object.prototype.toString.call(f)==="[object Object]"&&!r.isVNode(f)}const ve=r.defineComponent({name:"Layout",props:le.layoutProps,emits:["update:expanded","update:reduced","update:sign-type","update:color","update:dark-mode"],setup(f,{slots:a,emit:p,expose:$}){const n=i.useProps("layout",f,{locale:null,noAside:!1,footer:!1,tag:"section",menus:{default:()=>[],static:!0},menuProps:null,logo:"",signName:"",config:()=>["nav","theme","color"],user:null,actions:()=>[],expanded:!1,reduced:!1,avatarCircle:!1,signType:"aside",headerFixed:"lg",asideFixed:"lg",copyright:"",links:()=>[],colors:()=>["#339af0","#f03e3e","#be4bdb","#7950f2","#1b9e44","#f76707"],color:"",miniHeaderSign:"lg",verticalLinks:"md",darkMode:null,fixedMain:!1,fitWindow:!1,innerClasses:()=>({}),noHeader:!1,noMasker:!1}),t=i.useNameHelper("layout"),v=r.ref(!1),u=r.ref(n.expanded),l=r.ref(n.reduced),y=r.ref(n.signType),V=r.ref(!1),x=r.ref(n.color),{isMounted:q}=d.useMounted("frame"),j=r.ref(),m=r.ref(),A=r.ref(),T=r.ref(),H=E.useMediaQuery(r.toRef(n,"headerFixed")),M=E.useMediaQuery(r.toRef(n,"asideFixed")),D=E.useMediaQuery(r.toRef(n,"miniHeaderSign")),s=r.reactive({isLayout:!0,locked:r.computed(()=>v.value),affixed:!1,scrollY:0,affixMatched:H,expandMatched:M,useExpand:!1,expanded:u,reduced:l,navConfig:r.computed(()=>!n.noAside),classes:r.toRef(n,"innerClasses"),changeInLock:ee}),g=r.computed(()=>!n.noHeader&&y.value==="header"),L=r.computed(()=>[t.b(),t.bs("vars"),{[t.bm("inherit")]:n.inherit,[t.bm("no-aside")]:n.noAside,[t.bm("no-header")]:n.noHeader,[t.bm("header-main")]:g.value,[t.bm("locked")]:!q.value||v.value,[t.bm("fit-window")]:n.fitWindow}]),U=r.computed(()=>w.isClient&&q.value?document.documentElement:null),C=r.computed(()=>n.noAside||g.value||s.useExpand),_=r.computed(()=>{var e,o;return((e=T.value)==null?void 0:e.menu)||((o=A.value)==null?void 0:o.menu)}),N=r.ref(n.darkMode),P=r.ref("100%"),z=r.computed(()=>({[t.cv("view-height")]:n.fitWindow?"100vh":P.value})),F=i.useZIndex(),R=r.ref(u.value?F():0),c=r.shallowReadonly(r.reactive({expanded:u,reduced:l,toggleExpanded:h,toggleReduced:b}));r.provide(se.LAYOUT_STATE,s),$({scroll:m,menu:_,toggleExpanded:h,toggleReduced:b,expandMenuByLabel:X}),r.watch(H,e=>{s.affixed=!e&&s.scrollY>=50}),r.watch(()=>n.expanded,e=>{u.value=e}),r.watch(u,e=>{s.useExpand&&e&&(R.value=F())}),r.watch(()=>n.reduced,e=>{l.value=e}),r.watch(y,e=>{p("update:sign-type",e),i.emitEvent(n.onNavChange,e)}),r.watch(()=>n.color,e=>{var o;x.value=e||((o=n.colors)==null?void 0:o[0])||Z()}),r.watch(x,e=>{p("update:color",e),i.emitEvent(n.onColorChange,e)}),r.watch(()=>n.darkMode,e=>{N.value=e});function Z(){return U.value?getComputedStyle(U.value).getPropertyValue("--vxp-color-primary-base"):"#339af0"}function h(e=!l.value){u.value=e,p("update:expanded",e),i.emitEvent(n.onExpandedChange,e)}function b(e=!l.value){l.value=e,p("update:reduced",e),i.emitEvent(n.onReducedChange,e)}function G(e){i.emitEvent(n.onSignClick,e)}function I(e,o){i.emitEvent(n.onMenuSelect,e,o)}function J(e){p("update:dark-mode",e),i.emitEvent(n.onToggleTheme,e)}function K(e,o){i.emitEvent(n.onUserAction,e,o)}function X(e){var o;(o=_.value)==null||o.expandItemByLabel(e)}function W(){var e;(e=m.value)!=null&&e.$el&&(P.value=`${m.value.$el.offsetHeight-w.getYBorder(m.value.$el)}px`),i.emitEvent(n.onContentResize)}let S;function ee(e){S==null||S(),S=w.runQueueFrame([()=>v.value=!0,e,()=>v.value=!1])}function k(e){e.stopPropagation(),e.preventDefault()}function B(){if(!n.logo&&!n.signName&&!a.sign)return null;if(a.sign)return r.renderSlot(a,"sign",c);const e=n.signName&&!(C.value&&!D.value);return r.createVNode("div",{class:[t.be("sign"),!e&&t.bem("sign","logo-only")],onClick:G},[[n.logo&&r.createVNode("div",{class:t.be("logo")},[r.createVNode("img",{src:n.logo,alt:"Logo"},null)]),e&&r.createVNode("span",{class:t.be("sign-name")},[n.signName])]])}function O(){return n.noHeader?r.createVNode("header",{role:"none","aria-hidden":!0,style:"display: none"},null):a.header?r.renderSlot(a,"header",c):r.createVNode(de,r.mergeProps({ref:A,"sign-type":y.value,"onUpdate:sign-type":e=>y.value=e,"user-dropped":V.value,"onUpdate:user-dropped":e=>V.value=e,color:x.value,"onUpdate:color":e=>x.value=e,"dark-mode":N.value,"onUpdate:dark-mode":e=>N.value=e,inherit:!0,locale:n.locale,user:n.user,actions:n.actions,config:n.config,"avatar-circle":n.avatarCircle,menus:n.noAside?n.menus:[],"menu-props":n.noAside?n.menuProps:null,colors:n.colors,onUserAction:K,onExpandedChange:h,onReducedChange:b,onMenuSelect:I,onToggleTheme:J},{onWheel:k,onMousemove:k}),{left:d.createSlotRender(a,["header-left","headerLeft"],()=>C.value?B():null),default:d.createSlotRender(a,["header-main","headerMain"]),right:d.createSlotRender(a,["header-right","headerRight"]),user:d.createSlotRender(a,["header-user","headerUser"]),avatar:d.createSlotRender(a,["header-avatar","headerAvatar"])})}function ne(){return n.noAside?r.createVNode("div",{role:"none","aria-hidden":!0,style:"display: none"},null):r.createVNode("div",{class:[t.be("sidebar"),!M.value&&t.bem("sidebar","away"),n.innerClasses.sidebar],style:{zIndex:s.useExpand?R.value+1:void 0},onWheel:k,onMousemove:k},[a.aside?r.renderSlot(a,"aside",c):r.createVNode(ue,{ref:T,expanded:u.value,"onUpdate:expanded":e=>u.value=e,reduced:l.value,"onUpdate:reduced":e=>l.value=e,inherit:!0,"sign-type":g.value?"header":"aside",menus:n.menus,"menu-props":n.menuProps,fixed:n.asideFixed,onExpandedChange:h,onReducedChange:b,onMenuSelect:I},{top:d.createSlotRender(a,["aside-top","asideTop"],()=>C.value?null:B()),default:d.createSlotRender(a,["aside-main","asideMain"]),bottom:d.createSlotRender(a,["aside-bottom","asideBottom"]),expand:d.createSlotRender(a,["aside-expand","asideExpand"])})])}function re(){return a.default?r.renderSlot(a,"default",c):r.createVNode(oe,{fixed:n.fixedMain},{default:d.createSlotRender(a,["main"])})}function ae(){return a.footer?r.renderSlot(a,"footer",c):r.createVNode(ie,{inherit:!0,copyright:n.copyright,links:n.links,"vertical-links":n.verticalLinks},{links:d.createSlotRender(a,["footer-links","footerLinks"]),copyright:d.createSlotRender(a,["footer-copyright","footerCopyright"])})}function te(){return n.noMasker||!s.useExpand?null:a.masker?r.renderSlot(a,"masker",c):r.createVNode(ce,{active:u.value,"onUpdate:active":e=>u.value=e,class:t.be("masker"),inner:!0,closable:!0,"auto-remove":!0,transfer:!1,style:{zIndex:R.value},onToggle:h},null)}function Q(){const e=n.tag||"section";return r.createVNode(e,{class:[t.be("wrapper"),n.fixedMain&&t.bem("wrapper","fixed"),n.innerClasses.wrapper]},{default:()=>[g.value&&O(),ne(),r.createVNode("section",{ref:j,class:[t.be("section"),{[t.bem("section","away")]:M.value,[t.bem("section","reduced")]:l.value,[t.bem("section","locked")]:v.value,[t.bem("section","fixed")]:n.fixedMain},n.innerClasses.section]},[!g.value&&O(),re(),n.footer&&ae()]),te()]})}return()=>{let e;if(n.fitWindow){let o;return r.createVNode("section",{class:L.value,style:z.value},[r.createVNode(fe,{throttle:!0,onResize:W},Y(o=Q())?o:{default:()=>[o]})])}return r.createVNode(pe,{ref:m,class:L.value,inherit:n.inherit,"use-y-bar":!0,"observe-deep":!0,"bar-class":[t.be("scrollbar"),n.innerClasses.scrollbar],style:z.value,onResize:W},Y(e=Q())?e:{default:()=>[e]})}}});module.exports=ve;
//# sourceMappingURL=layout.cjs.map