dm-vue3-ui/lib/catalogue/index.vue.js

This Components Library will help get you started developing in Vue 3.

"use strict";const e=require("vue"),l=require("@ant-design/icons-vue"),a=require("vue3-draggable-resizable"),t=require("../utils/theme"),o=require("../utils/index"),n=require("./useCollapse"),i=require("./useDraggable"),s={class:"dm-catalogue__content"},r={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:u}){e.useCssVars((e=>({"431b30a4":x.value.maxWidth,"1951107e":C.value})));const c=o.store("platformConfig")||{},p=(null==c?void 0:c.themeColor)||"default";t.themeManager.initializeTheme(),t.themeManager.applyThemeByType(p);const m=d,g=u,{collapsed:h,toggleCollapsed:f}=n(),{activeDraggable:v,draggableStyle:y,resizingHandle:w}=i(m.width),x=e.computed((()=>({...m.style||{},width:h.value?"0":y.width+"px",maxWidth:m.maxWidth+"px"}))),C=e.computed((()=>m.draggHandleWidth+"px")),b=e.computed((()=>{const e=[];return"left"===m.pos?e.push("ml"):e.push("mr"),e}));return e.watch((()=>h.value),(()=>{g("changeCollapsed")}),{immediate:!0}),(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dm-catalogue",{collapsed:e.unref(h)}]),style:e.normalizeStyle(x.value),onMouseenter:o[4]||(o[4]=()=>v.value=!0),onMouseleave:o[5]||(o[5]=()=>v.value=!1)},[e.createElementVNode("div",s,[m.draggable?e.withDirectives((e.openBlock(),e.createBlock(e.unref(a),{key:0,active:e.unref(v),"onUpdate:active":o[0]||(o[0]=l=>e.isRef(v)?v.value=l:null),w:e.unref(y).width,"onUpdate:w":o[1]||(o[1]=l=>e.unref(y).width=l),minW:e.unref(y).minWidth,draggable:!1,disabledH:!0,resizable:!0,handles:b.value,onResizing:o[2]||(o[2]=l=>e.unref(w)(l,m.maxWidth))},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3},8,["active","w","minW","handles"])),[[e.vShow,!e.unref(h)]]):e.withDirectives((e.openBlock(),e.createElementBlock("div",r,[e.renderSlot(t.$slots,"default")],512)),[[e.vShow,!e.unref(h)]]),m.collapseable?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["dm-catalogue__toggle",t.pos]),style:e.normalizeStyle(m.collapseStyle),onClick:o[3]||(o[3]=(...l)=>e.unref(f)&&e.unref(f)(...l))},[e.renderSlot(t.$slots,"icon",{collapsed:e.unref(h)},(()=>[e.createVNode(e.unref(l.LeftOutlined),{style:{fontSize:"12px"},class:e.normalizeClass([e.unref(h)?"toggle-open-icon":""])},null,8,["class"])]))],6)):e.createCommentVNode("",!0)])],38))}});module.exports=d;