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

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

"use strict";const e=require("vue");require("../icon/index.cjs");require("../menu/index.cjs");require("../native-scroll/index.cjs");const r=require("@vexip-ui/config"),w=require("./props.cjs"),b=require("./helper.cjs"),M=require("../native-scroll/native-scroll.cjs"),T=require("../menu/menu.cjs"),x=require("../icon/icon.cjs"),A=e.defineComponent({name:"LayoutAside",props:w.layoutAsideProps,emits:["update:reduced","update:expanded"],setup(V,{slots:s,emit:N,expose:S}){const a=r.useProps("layoutAside",V,{tag:"aside",expanded:!1,reduced:!1,menus:{default:()=>[],static:!0},menuProps:null,logo:"",signName:"",fixed:"lg",signType:"aside"}),n=r.useNameHelper("layout"),p=r.useIcons(),u=b.useLayoutState(),d=e.ref(a.reduced),c=e.ref(a.expanded),m=e.ref("100%"),y=b.useMediaQuery(e.toRef(a,"fixed")),q=b.useUpdateCounter(),g=e.ref(),v=e.ref(),f=e.ref(),C=e.computed(()=>[n.be("aside"),{[n.bs("vars")]:!u.isLayout,[n.bem("aside","inherit")]:u.isLayout||a.inherit,[n.bem("aside","fixed")]:y.value,[n.bem("aside","expanded")]:c.value,[n.bem("aside","reduced")]:d.value,[n.bem("aside","no-sign")]:a.signType!=="aside"},u.classes.aside]),E=e.computed(()=>!!(a.logo||a.signName||s.top)),H=e.computed(()=>{var t,o;return!!((t=a.menus)!=null&&t.length||(o=a.menuProps)!=null&&o.router)}),l=e.shallowReadonly(e.reactive({expanded:c,reduced:d,toggleExpanded:i,toggleReduced:h}));S({menu:f,toggleExpanded:i,toggleReduced:h,expandMenuByLabel:k}),e.watch(()=>a.reduced,t=>{d.value=t}),e.watch(()=>a.expanded,t=>{c.value=t}),e.watch(y,t=>{u.useExpand=!t,t&&i(!1)},{immediate:!0}),e.watch(q,()=>L);function L(){let t=0,o=0;g.value&&(t=g.value.offsetHeight),v.value&&(o=v.value.offsetHeight),t||o?m.value=`calc(100% - ${t+o}px)`:m.value="100%"}function i(t=!c.value){c.value=t,N("update:expanded",t),r.emitEvent(a.onExpandedChange,t)}function h(t=!d.value){d.value=t,N("update:reduced",t),r.emitEvent(a.onReducedChange,t)}function P(t){r.emitEvent(a.onSignClick,t)}function R(t,o){r.emitEvent(a.onMenuSelect,t,o)}function k(t){var o;(o=f.value)==null||o.expandItemByLabel(t)}return()=>{const t=a.tag||"aside";return e.createVNode(t,{class:C.value},{default:()=>[E.value&&e.createVNode("div",{ref:g,class:[n.be("aside-top"),u.classes.asideTop]},[s.top?e.renderSlot(s,"top",l):e.createVNode("div",{class:n.be("sign"),onClick:P},[a.logo&&e.createVNode("div",{class:n.be("logo")},[e.createVNode("img",{src:a.logo,alt:"Logo"},null)]),a.signName&&e.createVNode("span",{class:n.be("sign-name")},[a.signName])])]),e.createVNode(M,{class:[n.be("aside-main"),u.classes.main],"use-y-bar":!0,"observe-deep":!0,height:m.value},{default:()=>[s.default?e.renderSlot(s,"default",l):H.value?e.createVNode(T,e.mergeProps({ref:f},a.menuProps||{},{transfer:!0,options:a.menus,reduced:d.value,onSelect:R}),null):null]}),e.createVNode("div",{ref:v,class:[n.be("aside-bottom"),u.classes.asideBottom]},[s.bottom?e.renderSlot(s,"bottom",l):e.createVNode("div",{class:n.be("reduce-handler"),onClick:()=>h()},[d.value?e.createVNode(x,p.value.indent,null):e.createVNode(x,p.value.outdent,null)])]),e.createVNode("div",{class:[n.be("expand-handler"),u.classes.expandHandler],onClick:()=>i()},[s.expand?e.renderSlot(s,"expand",l):e.createVNode(x,p.value.angleRight,null)])]})}}});module.exports=A;
//# sourceMappingURL=layout-aside.cjs.map