dm-vue3-ui
Version:
This Components Library will help get you started developing in Vue 3.
2 lines (1 loc) • 2.43 kB
JavaScript
;const e=require("vue"),l=require("@ant-design/icons-vue"),a=require("vue3-draggable-resizable"),t=require("./useCollapse"),o=require("./useDraggable"),n={class:"dm-catalogue__content"},s={key:1,class:"catalogue-container"},d=e.defineComponent({name:"dm-catalogue",__name:"index",props:{width:{default:200},maxWidth:{default:400},draggable:{type:Boolean,default:()=>!0},collapseable:{type:Boolean,default:()=>!0},draggHandleWidth:{default:10},pos:{default:"right"},style:{},collapseStyle:{default:()=>({top:"50px",width:"20px",height:"20px"})}},emits:["changeCollapsed"],setup(d,{emit:i}){e.useCssVars((e=>({fb05e954:h.value.maxWidth,"4ba033a0":v.value})));const r=d,u=i,{collapsed:c,toggleCollapsed:p}=t(),{activeDraggable:g,draggableStyle:m,resizingHandle:f}=o(r.width),h=e.computed((()=>({...r.style||{},width:c.value?"0":m.width+"px",maxWidth:r.maxWidth+"px"}))),v=e.computed((()=>r.draggHandleWidth+"px")),w=e.computed((()=>{const e=[];return"left"===r.pos?e.push("ml"):e.push("mr"),e}));return e.watch((()=>c.value),(()=>{u("changeCollapsed")}),{immediate:!0}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dm-catalogue",{collapsed:e.unref(c)}]),style:e.normalizeStyle(h.value),onMouseenter:o[4]||(o[4]=()=>g.value=!0),onMouseleave:o[5]||(o[5]=()=>g.value=!1)},[e.createElementVNode("div",n,[r.draggable?e.withDirectives((e.openBlock(),e.createBlock(e.unref(a),{key:0,active:e.unref(g),"onUpdate:active":o[0]||(o[0]=l=>e.isRef(g)?g.value=l:null),w:e.unref(m).width,"onUpdate:w":o[1]||(o[1]=l=>e.unref(m).width=l),minW:e.unref(m).minWidth,draggable:!1,disabledH:!0,resizable:!0,handles:w.value,onResizing:o[2]||(o[2]=l=>e.unref(f)(l,r.maxWidth))},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3},8,["active","w","minW","handles"])),[[e.vShow,!e.unref(c)]]):e.withDirectives((e.openBlock(),e.createElementBlock("div",s,[e.renderSlot(t.$slots,"default")],512)),[[e.vShow,!e.unref(c)]]),r.collapseable?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["dm-catalogue__toggle",t.pos]),style:e.normalizeStyle(r.collapseStyle),onClick:o[3]||(o[3]=(...l)=>e.unref(p)&&e.unref(p)(...l))},[e.renderSlot(t.$slots,"icon",{collapsed:e.unref(c)},(()=>[e.createVNode(e.unref(l.LeftOutlined),{style:{fontSize:"12px"},class:e.normalizeClass([e.unref(c)?"toggle-open-icon":""])},null,8,["class"])]))],6)):e.createCommentVNode("",!0)])],38))}});module.exports=d;