@mlightcad/ui-components 0.1.3 → 0.1.5

package/dist/ui-components.umd.js

@@ -1,2 +1,2 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-5adaeb5a]{border:none;padding:0;cursor:pointer;width:var(--021a85e9);height:var(--021a85e9)}.ml-vertical-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:column;background-color:var(--el-fill-color)}.ml-horizontal-toolbar-button-group[data-v-c6504e33]{display:flex;flex-direction:row;background-color:var(--el-fill-color)}.ml-toolbar-button[data-v-c6504e33]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-c6504e33]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-cd1a3c67]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-disabled[data-v-cd1a3c67]{pointer-events:none;opacity:.6}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-cd1a3c67]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-cd1a3c67]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-cd1a3c67]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-cd1a3c67]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;flex-direction:column;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-tabs[data-v-cd1a3c67]{display:flex;flex-direction:column;height:100%;flex:1}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs{display:flex;flex-direction:column;height:100%}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__header{margin:0;border-bottom:none;order:1;flex-shrink:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__content{flex:1;overflow:auto;padding:0;order:2;min-height:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tab-pane{height:100%;overflow:auto}.ml-tool-palette-default-content[data-v-cd1a3c67]{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-cd1a3c67],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-cd1a3c67]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(k,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),require("element-plus/es/components/dropdown/style/css"),require("element-plus/es/components/dropdown-menu/style/css"),require("element-plus/es/components/dropdown-item/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tabs/style/css"),require("element-plus/es/components/tab-pane/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/icon/style/css","vue","element-plus/es/components/dropdown/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tabs/style/css","element-plus/es/components/tab-pane/style/css"],y):(k=typeof globalThis<"u"?globalThis:k||self,y(k.UIComponents={},k.es,null,null,k.Vue))})(this,function(k,y,ve,we,e){"use strict";const A={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},H=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function X(t,c){return e.openBlock(),e.createElementBlock("svg",A,[...H])}const V={render:X},q={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},U=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function F(t,c){return e.openBlock(),e.createElementBlock("svg",q,[...U])}const $={render:F},I=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>n.reverse?s.value?V:$:s.value?$:V),r=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(i,d)=>{const m=y.ElIcon;return e.openBlock(),e.createBlock(m,{size:r.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),j=(t=>(e.pushScopeId("data-v-3fc33b5d"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("path",{fill:"currentColor",d:"m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"})],-1)),G=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.items.filter(r=>r.name!==n.current)),o=r=>{s("click",r)};return(r,h)=>{const i=y.ElIcon,d=y.ElDropdownItem,m=y.ElDropdownMenu,w=y.ElDropdown;return e.openBlock(),e.createBlock(w,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,u=>(e.openBlock(),e.createBlock(d,{key:u.text,command:u.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(i,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[j]),_:1})]),_:1})}}}),z=(t,c)=>{const n=t.__vccOpts||t;for(const[s,l]of c)n[s]=l;return n},T=z(G,[["__scopeId","data-v-3fc33b5d"]]),J='<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>',S=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=o=>{s("click",o)};return(o,r)=>(e.openBlock(),e.createBlock(T,{icon:J,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),K={},Q={class:"ml-status-bar"},Z={class:"ml-status-bar-left"},P={class:"ml-status-bar-right"};function R(t,c){return e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",P,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const N=z(K,[["render",R],["__scopeId","data-v-d6a59cf0"]]),W=z(e.defineComponent({__name:"MlToggleButton",props:e.mergeModels({size:{default:30},data:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:e.mergeModels(["click"],["update:modelValue"]),setup(t,{emit:c}){e.useCssVars(d=>({"021a85e9":r.value}));const n=t,s=e.useModel(t,"modelValue"),l=c,o=e.computed(()=>s.value?n.data.onIcon:n.data.offIcon),r=e.computed(()=>n.size+"px"),h=e.computed(()=>s.value?n.data.onTooltip:n.data.offTooltip),i=()=>{s.value=!s.value,l("click",s.value)};return(d,m)=>{const w=y.ElButton,u=y.ElTooltip;return e.openBlock(),e.createBlock(u,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(w,{class:"ml-toggle-button",icon:o.value,onClick:i},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-5adaeb5a"]]),ee={key:0,class:"ml-toolbar-button-text"},D=z(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:c}){const n=t,s=c,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),r=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,i=e.computed(()=>n.size==="large"),d=m=>{s("click",m)};return(m,w)=>{const u=y.ElIcon,v=y.ElButton,p=y.ElTooltip,B=y.ElButtonGroup;return e.openBlock(),e.createBlock(B,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(M,x)=>(e.openBlock(),e.createBlock(p,{key:M.text,content:h(M),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(v,{class:"ml-toolbar-button",style:e.normalizeStyle({width:r.value+"px",height:r.value+"px"}),key:x,onClick:C=>d(M.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(M.icon)))]),_:2},1032,["size"]),i.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(M.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-c6504e33"]]),O=20;function te(t,c,n){const s=e.ref(!1),l=i=>{if(n.value&&t.value){const d=t.value.getBoundingClientRect(),m=i.clientX<d.left||i.clientX>d.right||i.clientY<d.top||i.clientY>d.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},r=()=>{c.value&&c.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{c.value&&c.value.removeEventListener("mousemove",o),t.value&&t.value.removeEventListener("mousemove",o)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(n,i=>{i&&(s.value=!1)}),e.watch(t,i=>{i?r():h()}),{autoOpened:s}}function ne(t,c,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),r={x:0,y:0},h=e.computed(()=>l.value==null||o.value==null?{x:0,y:0}:{x:l.value.x-o.value.x,y:l.value.y-o.value.y}),i=()=>{if(t.value){const p=t.value.getBoundingClientRect();o.value={x:p.left,y:p.top},l.value={x:p.left,y:p.top}}},d=()=>{t.value&&t.value.addEventListener("mousedown",w)},m=()=>{t.value&&t.value.removeEventListener("mousedown",w)},w=p=>{if(t.value!=null){if(c&&c.value){const B=c.value.getBoundingClientRect();if(p.clientX<B.left||p.clientX>B.right||p.clientY<B.top||p.clientY>B.bottom)return}s.value=!0,r.x=p.clientX,r.y=p.clientY,i(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",v)}},u=p=>{if(s.value&&o.value&&l.value){const B=window.innerWidth,M=window.innerHeight,x=t.value,C=x.getBoundingClientRect(),E=C.width,a=C.height,f=o.value.x+(p.clientX-r.x),g=o.value.y+(p.clientY-r.y);l.value.x=Math.max(n?n.value.offset.value.left:0,f);const b=B-E;l.value.x=Math.min(n?b-n.value.offset.value.right:b,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(g,M-a));const L=M-a;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),x.style.left=l.value.x+"px",x.style.top=l.value.y+"px"}},v=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",v)};return e.onMounted(()=>{t.value&&(i(),d())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",w)}),e.watch(t,p=>{p?(i(),d()):m()}),{isDragging:s,movement:h,position:l}}function oe(t,c,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:r,position:h}=ne(t,c,n);return e.watch(r,i=>{if(i&&t.value){const m=t.value.getBoundingClientRect();m.left<=n.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-m.left-m.width<=n.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:o,movement:r,position:h}}function le(t,c,n,s){const l=e.ref(null),o=e.ref(null),r=e.ref(null),h=e.ref(null);return e.watch(t,(i,d)=>{l.value=d}),e.watch(c,(i,d)=>{o.value=d}),e.watch(n,(i,d)=>{r.value=d}),e.watch(s,(i,d)=>{h.value=d}),{lastLeft:l,lastTop:o,lastWidth:r,lastHeight:h}}function se(t,c,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),r=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),i=e.computed(()=>n.value?n.value.x:null);return e.watch([r,h],([d,m])=>{(l.value==null||o.value==null||c.value)&&(l.value=d,o.value=m)}),e.watch(i,d=>{s.value&&n.value&&(o.value=d)}),{left:o,width:l}}function ae(t,c=e.ref({left:0,right:0,top:0,bottom:0})){const n=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const o=t.value.getBoundingClientRect();n.value.left=Math.max(o.left,c.value.left),n.value.top=Math.max(o.top,c.value.top),n.value.width=o.width,n.value.height=o.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,o=>{o&&l()}),{isIntialized:s,initialRect:n}}function ie(t,c=e.ref(!1),n=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:o}=ae(t,s),r=e.ref(!1);let h=0,i=0,d=0,m=0,w=0;const u=5,v=e.ref(null),p=E=>{if(!(!t.value||c.value))if(r.value){const a=E.clientX-m,f=E.clientY-w;if(v.value==="left"||v.value==="left-bottom-corner"){const g=i-a;g>l.width&&(o.value.width=g,o.value.left=h+a,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(v.value==="right"||v.value==="right-bottom-corner"){const g=i+a;g>l.width&&(o.value.width=g,t.value.style.width=o.value.width+"px")}if(v.value==="bottom"||v.value==="left-bottom-corner"||v.value==="right-bottom-corner"){const g=d+f;g>l.height&&(o.value.height=g,t.value.style.height=o.value.height+"px")}}else{const a=t.value.getBoundingClientRect(),f=E.clientX-a.left,g=E.clientY-a.top,b=Math.abs(f)<=u,L=Math.abs(a.width-f)<=u,_=Math.abs(a.height-g)<=u;b&&_&&n.value?(t.value.style.cursor="nesw-resize",v.value="left-bottom-corner"):L&&_&&!n.value?(t.value.style.cursor="nwse-resize",v.value="right-bottom-corner"):b&&n.value?(t.value.style.cursor="ew-resize",v.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",v.value="right"):_?(t.value.style.cursor="ns-resize",v.value="bottom"):(t.value.style.cursor="",v.value=null)}},B=E=>{if(!t.value||!v.value)return;const a=t.value.getBoundingClientRect();m=E.clientX,w=E.clientY,i=a.width,d=a.height,h=a.left,o.value.width=i,o.value.height=d,o.value.left=a.left,o.value.top=a.top,r.value=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",M)},M=()=>{r.value=!1,v.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",M)},x=()=>{t.value&&(t.value.removeEventListener("mousedown",B),t.value.removeEventListener("mousemove",p)),document.removeEventListener("mouseup",M)},C=()=>{t.value&&(t.value.addEventListener("mousedown",B),t.value.addEventListener("mousemove",p))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{x()}),e.watch(t,E=>{E?C():x()}),{rect:o,isResizing:r}}function ce(t,c,n,s){const l=()=>{if(t.value){const i=t.value;c.value?i.style.transition="width 0.3s ease-out, left 0.3s ease-out":i.style.transition="width 0.3s ease"}},o=()=>{t.value&&(t.value.style.transition="")},r=()=>{t.value&&t.value.removeEventListener("transitionend",o)},h=()=>{t.value&&t.value.addEventListener("transitionend",o)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",o)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",o)}),e.watch(t,i=>{i?h():r()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function re(t,c,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:r,orientation:h,movement:i,position:d,isDragging:m}=oe(t,c,s),w=e.computed(()=>h.value==="right"),{rect:u,isResizing:v}=ie(t,n,w,s.value.offset),{width:p,left:B}=se(u,v,d,m),{lastTop:M,lastHeight:x}=le(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:C}=te(t,c,n);ce(t,w,n,C);const E=b=>{if(t.value){const L=t.value.getBoundingClientRect(),_=L.left+b;if(w.value){u.value.left=_;const fe=window.innerWidth-L.width-L.left;L.left<=0&&fe>=0&&b<0&&(u.value.left=Math.max(0,_)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&b<0&&(u.value.left=Math.max(0,_))}},a=()=>{const b=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,E(b)};e.onMounted(()=>{window.addEventListener("resize",a)}),e.onUnmounted(()=>{window.removeEventListener("resize",a)});const f=b=>{b?(u.value.width=O,w.value&&B.value&&p.value&&(u.value.left=B.value+p.value-O)):(u.value.width=p.value,w.value&&B.value&&p.value&&(u.value.left=B.value))},g=()=>{r.value?(u.value.top=s.value.offset.value.top,u.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(u.value.top=M.value,u.value.height=x.value)};return e.watch(r,()=>{g()}),e.watch(n,b=>{f(b)}),e.watch(C,b=>{n.value&&!m.value&&f(!b)}),e.watch(i,b=>{if(b&&t.value){const _=t.value.getBoundingClientRect();u.value.left=_.left,u.value.top=_.top}}),{rect:u,orientation:h,reversed:w}}const de=(t=>(e.pushScopeId("data-v-cd1a3c67"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),ue={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},pe={key:1,class:"ml-tool-palette-default-content"},Y=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},tabs:{default:void 0},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0},disabled:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{},activeTab:{default:""},activeTabModifiers:{}}),emits:e.mergeModels(["close","tab-change","tab-close"],["update:modelValue","update:activeTab"]),setup(t,{emit:c}){const n=t,s=e.useModel(t,"modelValue"),l=e.useModel(t,"activeTab"),o=c,r=e.computed(()=>n.tabs&&n.tabs.length>0);e.onMounted(()=>{r.value&&!l.value&&n.tabs&&n.tabs.length>0&&(l.value=n.tabs[0].name)}),e.watch(()=>n.tabs,a=>{a&&a.length>0&&!l.value&&(l.value=a[0].name)},{immediate:!0});const h=e.ref(!1),i=e.ref(null),d=e.ref(null),m=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:w,orientation:u,reversed:v}=re(d,i,h,m),p=e.computed(()=>({left:`${w.value.left}px`,top:`${w.value.top}px`,width:`${w.value.width}px`,height:`${w.value.height}px`})),B=e.computed(()=>v.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),M=e.computed(()=>{if(r.value&&l.value&&n.tabs){const a=n.tabs.find(f=>f.name===l.value);if(a!=null&&a.title)return a.title}return n.title}),x=()=>{s.value=!1;const a=d.value;o("close",{x:a?a.clientLeft:0,y:a?a.clientTop:0})},C=a=>{o("tab-change",a)},E=a=>{if(o("tab-close",a),l.value===a&&n.tabs){const f=n.tabs.findIndex(g=>g.name===a);if(f>=0){const g=n.tabs[f+1]||n.tabs[f-1];g&&(l.value=g.name)}}};return(a,f)=>{const g=y.ElIcon,b=y.ElTabPane,L=y.ElTabs;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:d,style:e.normalizeStyle([p.value]),class:e.normalizeClass(["ml-tool-palette-dialog",{"ml-tool-palette-disabled":a.disabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(u)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:i,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(B.value)},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:f[0]||(f[0]=_=>!a.disabled&&x())},{default:e.withCtx(()=>[de]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:h.value,"onUpdate:modelValue":f[1]||(f[1]=_=>h.value=_),reverse:e.unref(v),disabled:a.disabled},null,8,["modelValue","reverse","disabled"]),e.createElementVNode("span",ue,e.toDisplayString(M.value),1)],4),e.createElementVNode("div",me,[r.value?(e.openBlock(),e.createBlock(L,{key:0,modelValue:l.value,"onUpdate:modelValue":f[2]||(f[2]=_=>l.value=_),type:"border-card",class:"ml-tool-palette-tabs",onTabRemove:f[3]||(f[3]=_=>!a.disabled&&E),onTabChange:f[4]||(f[4]=_=>!a.disabled&&C)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,_=>(e.openBlock(),e.createBlock(b,{key:_.name,name:_.name,label:_.label},{label:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(_.label),1)]),default:e.withCtx(()=>[e.renderSlot(a.$slots,`tab-${_.name}`,{},void 0,!0)]),_:2},1032,["name","label"]))),128))]),_:3},8,["modelValue"])):(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(a.$slots,"default",{},void 0,!0)]))])],2)],6)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-cd1a3c67"]]),he={install(t){t.component("MlCollapse",T),t.component("MlDropdown",T),t.component("MlLanguage",S),t.component("MlStatusBar",N),t.component("MlToggleButton",W),t.component("MlToolBar",D),t.component("MlToolPalette",Y)}};k.MlCollapse=I,k.MlDropdown=T,k.MlLanguage=S,k.MlStatusBar=N,k.MlToggleButton=W,k.MlToolBar=D,k.MlToolPalette=Y,k.default=he,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(".ml-dropdown-icon[data-v-3fc33b5d],.ml-dropdown-icon[data-v-3fc33b5d]:hover{outline:none;border:none}.ml-status-bar[data-v-d6a59cf0]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;background-color:var(--el-fill-color);box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-status-bar-left[data-v-d6a59cf0],.ml-status-bar-right[data-v-d6a59cf0]{display:flex;align-items:center}.ml-status-bar-left[data-v-d6a59cf0]>*{margin-right:10px}.ml-status-bar-right[data-v-d6a59cf0]>*{margin-left:10px}.ml-toggle-button[data-v-0dbba7bb]{border:none;padding:0;cursor:pointer;width:var(--10a97421);height:var(--10a97421)}.ml-toolbar-group[data-v-64f06546]{background-color:var(--el-fill-color)}.ml-sub-toolbar-group[data-v-64f06546]{background-color:var(--el-bg-color)}.ml-toolbar-button[data-v-64f06546]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-64f06546]{margin-top:5px}.ml-tool-palette-dialog[data-v-cd1a3c67]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;box-sizing:border-box;border:1px solid var(--el-border-color)}.ml-tool-palette-disabled[data-v-cd1a3c67]{pointer-events:none;opacity:.6}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-cd1a3c67]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-cd1a3c67]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-cd1a3c67]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;background-color:var(--el-fill-color)}.ml-tool-palette-title[data-v-cd1a3c67]{pointer-events:none;margin-top:10px;margin-bottom:10px;font-size:small;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ml-tool-palette-content[data-v-cd1a3c67]{-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;flex-direction:column;background-color:var(--el-fill-color);overflow:hidden}.ml-tool-palette-tabs[data-v-cd1a3c67]{display:flex;flex-direction:column;height:100%;flex:1}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs{display:flex;flex-direction:column;height:100%}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__header{margin:0;border-bottom:none;order:1;flex-shrink:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tabs__content{flex:1;overflow:auto;padding:0;order:2;min-height:0;position:relative}.ml-tool-palette-tabs[data-v-cd1a3c67] .el-tab-pane{height:100%;overflow:auto}.ml-tool-palette-default-content[data-v-cd1a3c67]{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-cd1a3c67],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-cd1a3c67]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-cd1a3c67]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(M,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("element-plus/es"),require("element-plus/es/components/base/style/css"),require("element-plus/es/components/icon/style/css"),require("vue"),require("element-plus/es/components/dropdown/style/css"),require("element-plus/es/components/dropdown-menu/style/css"),require("element-plus/es/components/dropdown-item/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/style/css"),require("element-plus/es/components/popover/style/css"),require("element-plus/es/components/button-group/style/css"),require("element-plus/es/components/tabs/style/css"),require("element-plus/es/components/tab-pane/style/css")):typeof define=="function"&&define.amd?define(["exports","element-plus/es","element-plus/es/components/base/style/css","element-plus/es/components/icon/style/css","vue","element-plus/es/components/dropdown/style/css","element-plus/es/components/dropdown-menu/style/css","element-plus/es/components/dropdown-item/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css","element-plus/es/components/popover/style/css","element-plus/es/components/button-group/style/css","element-plus/es/components/tabs/style/css","element-plus/es/components/tab-pane/style/css"],k):(M=typeof globalThis<"u"?globalThis:M||self,k(M.UIComponents={},M.es,null,null,M.Vue))})(this,function(M,k,ke,xe,e){"use strict";const F={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},j=[e.createElementVNode("path",{fill:"currentColor",d:"M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.59 30.59 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.59 30.59 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0"},null,-1)];function G(t,r){return e.openBlock(),e.createElementBlock("svg",F,[...j])}const N={render:G},P={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},J=[e.createElementVNode("path",{fill:"currentColor",d:"M340.864 149.312a30.59 30.59 0 0 0 0 42.752L652.736 512 340.864 831.872a30.59 30.59 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"},null,-1)];function K(t,r){return e.openBlock(),e.createElementBlock("svg",P,[...J])}const W={render:K},D=e.defineComponent({__name:"MlCollapse",props:e.mergeModels({size:{default:18},reverse:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(t,{emit:r}){const o=t,a=e.useModel(t,"modelValue"),s=r,l=e.computed(()=>o.reverse?a.value?N:W:a.value?W:N),c=e.computed(()=>`${o.size}px`),h=()=>{s("change",a.value),a.value=!a.value};return(i,d)=>{const f=k.ElIcon;return e.openBlock(),e.createBlock(f,{size:c.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value)))]),_:1},8,["size"])}}}),Q=(t=>(e.pushScopeId("data-v-3fc33b5d"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{preserveAspectRatio:"xMidYMid meet",viewBox:"0 0 24 24",width:"1.2em",height:"1.2em","data-v-63d067da":""},[e.createElementVNode("path",{fill:"currentColor",d:"m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"})],-1)),Z=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:r}){const o=t,a=r,s=e.computed(()=>o.items.filter(c=>c.name!==o.current)),l=c=>{a("click",c)};return(c,h)=>{const i=k.ElIcon,d=k.ElDropdownItem,f=k.ElDropdownMenu,b=k.ElDropdown;return e.openBlock(),e.createBlock(b,{onCommand:l},{dropdown:e.withCtx(()=>[e.createVNode(f,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,m=>(e.openBlock(),e.createBlock(d,{key:m.text,command:m.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(m.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(i,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[Q]),_:1})]),_:1})}}}),V=(t,r)=>{const o=t.__vccOpts||t;for(const[a,s]of r)o[a]=s;return o},S=V(Z,[["__scopeId","data-v-3fc33b5d"]]),R='<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" data-v-63d067da=""><path fill="currentColor" d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"></path></svg>',O=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:r}){const o=t,a=r,s=l=>{a("click",l)};return(l,c)=>(e.openBlock(),e.createBlock(S,{icon:R,items:o.languages,current:o.current,onClick:s},null,8,["items","current"]))}}),ee={},te={class:"ml-status-bar"},oe={class:"ml-status-bar-left"},ne={class:"ml-status-bar-right"};function le(t,r){return e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("div",oe,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",ne,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const Y=V(ee,[["render",le],["__scopeId","data-v-d6a59cf0"]]),A=V(e.defineComponent({__name:"MlToggleButton",props:e.mergeModels({size:{default:30},data:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:e.mergeModels(["click"],["update:modelValue"]),setup(t,{emit:r}){e.useCssVars(d=>({"10a97421":c.value}));const o=t,a=e.useModel(t,"modelValue"),s=r,l=e.computed(()=>a.value?o.data.onIcon:o.data.offIcon),c=e.computed(()=>o.size+"px"),h=e.computed(()=>a.value?o.data.onTooltip:o.data.offTooltip),i=()=>{a.value=!a.value,s("click",a.value)};return(d,f)=>{const b=k.ElButton,m=k.ElTooltip;return e.openBlock(),e.createBlock(m,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(b,{class:"ml-toggle-button",icon:l.value,onClick:i},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-0dbba7bb"]]),se={key:0,class:"ml-toolbar-button-text"},ae={key:0,class:"ml-toolbar-button-text"},ie={key:0,class:"ml-toolbar-button-text"},H=V(e.defineComponent({__name:"MlToolBar",props:{items:{},size:{default:"large"},direction:{default:"horizontal"},placement:{}},emits:["click","toggle"],setup(t,{emit:r}){const o=t,a=r,s=e.computed(()=>o.size==="small"?20:30),l=e.computed(()=>o.size==="small"?30:o.size==="medium"?50:70),c=e.computed(()=>o.size==="large"),h=e.ref(null),i=n=>{h.value=n},d=()=>{h.value=null},f=e.ref({});e.watch(()=>o.items,n=>{n.forEach(u=>{u.toggle&&f.value[u.command]===void 0&&(f.value[u.command]=u.toggle.value??!1)})},{immediate:!0});const b=n=>{if(n.toggle){const u=!f.value[n.command];f.value[n.command]=u,a("toggle",n.command,u)}else a("click",n.command)},m=n=>{n&&a("click",n),d()},v=n=>!!n.toggle&&f.value[n.command],p=n=>n.toggle?v(n)?n.toggle.on.icon:n.toggle.off.icon:n.icon,B=n=>n.toggle?v(n)?n.toggle.on.text:n.toggle.off.text:n.text,E=n=>n.toggle?v(n)?n.toggle.on.description??n.toggle.on.text:n.toggle.off.description??n.toggle.off.text:n.description??n.text,C=e.computed(()=>{const n="right-start",u="bottom-start";return o.placement&&(o.direction==="vertical"&&(o.placement.startsWith("left")||o.placement.startsWith("right"))||o.direction==="horizontal"&&(o.placement.startsWith("top")||o.placement.startsWith("bottom")))?o.placement:o.direction==="vertical"?n:u}),L=n=>o.direction==="horizontal"&&n.children?n.children.length*l.value:l.value,x=n=>o.direction==="vertical"&&n.children?l.value:0;return(n,u)=>{const g=k.ElIcon,_=k.ElButton,y=k.ElTooltip,w=k.ElButtonGroup,I=k.ElPopover;return e.openBlock(),e.createBlock(w,{class:"ml-toolbar-group",direction:n.direction},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,(z,$)=>{var U;return e.openBlock(),e.createElementBlock(e.Fragment,{key:$},[(U=z.children)!=null&&U.length?(e.openBlock(),e.createBlock(I,{key:0,visible:h.value===$,trigger:"manual",placement:C.value,"show-arrow":!0,teleported:!0,"popper-style":{minWidth:L(z)+"px",maxWidth:x(z)+"px","--el-popover-padding":"0px","--el-popover-border-width":"0px","--el-popover-border-color":"transparent"},onMouseenter:T=>i($),onMouseleave:d},{reference:e.withCtx(()=>[e.createVNode(_,{class:"ml-toolbar-button",style:e.normalizeStyle({width:l.value+"px",height:l.value+"px"}),onMouseenter:T=>i($),onMouseleave:d},{default:e.withCtx(()=>[e.createVNode(y,{content:E(z),"auto-close":3e3,"show-after":1e3,"hide-after":0},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(g,{size:s.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p(z))))]),_:2},1032,["size"]),c.value?(e.openBlock(),e.createElementBlock("div",ae,e.toDisplayString(B(z)),1)):e.createCommentVNode("",!0)])]),_:2},1032,["content"])]),_:2},1032,["style","onMouseenter"])]),default:e.withCtx(()=>[e.createVNode(w,{class:"ml-sub-toolbar-group",direction:n.direction,onMouseenter:T=>i($),onMouseleave:d},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(z.children,(T,Be)=>(e.openBlock(),e.createBlock(y,{key:Be,content:E(T),"auto-close":3e3,"show-after":1e3,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(_,{class:"ml-toolbar-button",style:e.normalizeStyle({width:l.value+"px",height:l.value+"px"}),onClick:$e=>m(T.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(g,{size:s.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p(T))))]),_:2},1032,["size"]),c.value?(e.openBlock(),e.createElementBlock("div",se,e.toDisplayString(B(T)),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"])]),_:2},1032,["content"]))),128))]),_:2},1032,["direction","onMouseenter"])]),_:2},1032,["visible","placement","popper-style","onMouseenter"])):(e.openBlock(),e.createBlock(y,{key:1,content:E(z),"auto-close":3e3,"show-after":1e3,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(_,{class:"ml-toolbar-button",style:e.normalizeStyle({width:l.value+"px",height:l.value+"px"}),onClick:T=>b(z)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(g,{size:s.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(p(z))))]),_:2},1032,["size"]),c.value?(e.openBlock(),e.createElementBlock("div",ie,e.toDisplayString(B(z)),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"])]),_:2},1032,["content"]))],64)}),128))]),_:1},8,["direction"])}}}),[["__scopeId","data-v-64f06546"]]),q=20;function ce(t,r,o){const a=e.ref(!1),s=i=>{if(o.value&&t.value){const d=t.value.getBoundingClientRect(),f=i.clientX<d.left||i.clientX>d.right||i.clientY<d.top||i.clientY>d.bottom;a.value=!f}},l=()=>{o.value&&(a.value=!0)},c=()=>{r.value&&r.value.addEventListener("mousemove",l),t.value&&t.value.addEventListener("mousemove",l)},h=()=>{r.value&&r.value.removeEventListener("mousemove",l),t.value&&t.value.removeEventListener("mousemove",l)};return e.onMounted(()=>{window.addEventListener("mousemove",s)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",s)}),e.watch(o,i=>{i&&(a.value=!1)}),e.watch(t,i=>{i?c():h()}),{autoOpened:a}}function re(t,r,o){const a=e.ref(!1),s=e.ref(null),l=e.ref(null),c={x:0,y:0},h=e.computed(()=>s.value==null||l.value==null?{x:0,y:0}:{x:s.value.x-l.value.x,y:s.value.y-l.value.y}),i=()=>{if(t.value){const p=t.value.getBoundingClientRect();l.value={x:p.left,y:p.top},s.value={x:p.left,y:p.top}}},d=()=>{t.value&&t.value.addEventListener("mousedown",b)},f=()=>{t.value&&t.value.removeEventListener("mousedown",b)},b=p=>{if(t.value!=null){if(r&&r.value){const B=r.value.getBoundingClientRect();if(p.clientX<B.left||p.clientX>B.right||p.clientY<B.top||p.clientY>B.bottom)return}a.value=!0,c.x=p.clientX,c.y=p.clientY,i(),document.addEventListener("mousemove",m),document.addEventListener("mouseup",v)}},m=p=>{if(a.value&&l.value&&s.value){const B=window.innerWidth,E=window.innerHeight,C=t.value,L=C.getBoundingClientRect(),x=L.width,n=L.height,u=l.value.x+(p.clientX-c.x),g=l.value.y+(p.clientY-c.y);s.value.x=Math.max(o?o.value.offset.value.left:0,u);const _=B-x;s.value.x=Math.min(o?_-o.value.offset.value.right:_,s.value.x),s.value.y=Math.max(o?o.value.offset.value.top:0,Math.min(g,E-n));const y=E-n;s.value.y=Math.min(o?y-o.value.offset.value.bottom:y,s.value.y),C.style.left=s.value.x+"px",C.style.top=s.value.y+"px"}},v=()=>{a.value=!1,document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",v)};return e.onMounted(()=>{t.value&&(i(),d())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",b)}),e.watch(t,p=>{p?(i(),d()):f()}),{isDragging:a,movement:h,position:s}}function de(t,r,o){const a=e.ref(!1),s=e.ref("left"),{isDragging:l,movement:c,position:h}=re(t,r,o);return e.watch(c,i=>{if(i&&t.value){const f=t.value.getBoundingClientRect();f.left<=o.value.offset.value.left?(s.value="left",a.value=!0):window.innerWidth-f.left-f.width<=o.value.offset.value.right?(s.value="right",a.value=!0):a.value=!1}}),{docked:a,orientation:s,isDragging:l,movement:c,position:h}}function ue(t,r,o,a){const s=e.ref(null),l=e.ref(null),c=e.ref(null),h=e.ref(null);return e.watch(t,(i,d)=>{s.value=d}),e.watch(r,(i,d)=>{l.value=d}),e.watch(o,(i,d)=>{c.value=d}),e.watch(a,(i,d)=>{h.value=d}),{lastLeft:s,lastTop:l,lastWidth:c,lastHeight:h}}function me(t,r,o,a){const s=e.ref(t.value.width),l=e.ref(t.value.left),c=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),i=e.computed(()=>o.value?o.value.x:null);return e.watch([c,h],([d,f])=>{(s.value==null||l.value==null||r.value)&&(s.value=d,l.value=f)}),e.watch(i,d=>{a.value&&o.value&&(l.value=d)}),{left:l,width:s}}function pe(t,r=e.ref({left:0,right:0,top:0,bottom:0})){const o=e.ref({});let a=!1;const s=()=>{if(!a&&t.value){const l=t.value.getBoundingClientRect();o.value.left=Math.max(l.left,r.value.left),o.value.top=Math.max(l.top,r.value.top),o.value.width=l.width,o.value.height=l.height,a=!0}};return e.onMounted(()=>{t.value&&s()}),e.watch(t,l=>{l&&s()}),{isIntialized:a,initialRect:o}}function he(t,r=e.ref(!1),o=e.ref(!1),a=e.ref({left:0,right:0,top:0,bottom:0}),s={width:20,height:40}){const{initialRect:l}=pe(t,a),c=e.ref(!1);let h=0,i=0,d=0,f=0,b=0;const m=5,v=e.ref(null),p=x=>{if(!(!t.value||r.value))if(c.value){const n=x.clientX-f,u=x.clientY-b;if(v.value==="left"||v.value==="left-bottom-corner"){const g=i-n;g>s.width&&(l.value.width=g,l.value.left=h+n,t.value.style.left=l.value.left+"px",t.value.style.width=l.value.width+"px")}if(v.value==="right"||v.value==="right-bottom-corner"){const g=i+n;g>s.width&&(l.value.width=g,t.value.style.width=l.value.width+"px")}if(v.value==="bottom"||v.value==="left-bottom-corner"||v.value==="right-bottom-corner"){const g=d+u;g>s.height&&(l.value.height=g,t.value.style.height=l.value.height+"px")}}else{const n=t.value.getBoundingClientRect(),u=x.clientX-n.left,g=x.clientY-n.top,_=Math.abs(u)<=m,y=Math.abs(n.width-u)<=m,w=Math.abs(n.height-g)<=m;_&&w&&o.value?(t.value.style.cursor="nesw-resize",v.value="left-bottom-corner"):y&&w&&!o.value?(t.value.style.cursor="nwse-resize",v.value="right-bottom-corner"):_&&o.value?(t.value.style.cursor="ew-resize",v.value="left"):y&&!o.value?(t.value.style.cursor="ew-resize",v.value="right"):w?(t.value.style.cursor="ns-resize",v.value="bottom"):(t.value.style.cursor="",v.value=null)}},B=x=>{if(!t.value||!v.value)return;const n=t.value.getBoundingClientRect();f=x.clientX,b=x.clientY,i=n.width,d=n.height,h=n.left,l.value.width=i,l.value.height=d,l.value.left=n.left,l.value.top=n.top,c.value=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",E)},E=()=>{c.value=!1,v.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",E)},C=()=>{t.value&&(t.value.removeEventListener("mousedown",B),t.value.removeEventListener("mousemove",p)),document.removeEventListener("mouseup",E)},L=()=>{t.value&&(t.value.addEventListener("mousedown",B),t.value.addEventListener("mousemove",p))};return e.onMounted(()=>{t.value&&L()}),e.onBeforeUnmount(()=>{C()}),e.watch(t,x=>{x?L():C()}),{rect:l,isResizing:c}}function fe(t,r,o,a){const s=()=>{if(t.value){const i=t.value;r.value?i.style.transition="width 0.3s ease-out, left 0.3s ease-out":i.style.transition="width 0.3s ease"}},l=()=>{t.value&&(t.value.style.transition="")},c=()=>{t.value&&t.value.removeEventListener("transitionend",l)},h=()=>{t.value&&t.value.addEventListener("transitionend",l)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",l)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",l)}),e.watch(t,i=>{i?h():c()}),e.watch(o,()=>{s()}),e.watch(a,()=>{s()})}function ve(t,r,o,a){const s=e.ref(window.innerWidth),l=e.ref(window.innerHeight),{docked:c,orientation:h,movement:i,position:d,isDragging:f}=de(t,r,a),b=e.computed(()=>h.value==="right"),{rect:m,isResizing:v}=he(t,o,b,a.value.offset),{width:p,left:B}=me(m,v,d,f),{lastTop:E,lastHeight:C}=ue(e.computed(()=>m.value.left),e.computed(()=>m.value.top),e.computed(()=>m.value.width),e.computed(()=>m.value.height)),{autoOpened:L}=ce(t,r,o);fe(t,b,o,L);const x=_=>{if(t.value){const y=t.value.getBoundingClientRect(),w=y.left+_;if(b.value){m.value.left=w;const I=window.innerWidth-y.width-y.left;y.left<=0&&I>=0&&_<0&&(m.value.left=Math.max(0,w)),window.innerWidth-y.width<=0&&(m.value.left=window.innerWidth-y.width)}else y.left+y.width>=window.innerWidth&&_<0&&(m.value.left=Math.max(0,w))}},n=()=>{const _=window.innerWidth-s.value;s.value=window.innerWidth,l.value=window.innerHeight,x(_)};e.onMounted(()=>{window.addEventListener("resize",n)}),e.onUnmounted(()=>{window.removeEventListener("resize",n)});const u=_=>{_?(m.value.width=q,b.value&&B.value&&p.value&&(m.value.left=B.value+p.value-q)):(m.value.width=p.value,b.value&&B.value&&p.value&&(m.value.left=B.value))},g=()=>{c.value?(m.value.top=a.value.offset.value.top,m.value.height=window.innerHeight-a.value.offset.value.top-a.value.offset.value.bottom):(m.value.top=E.value,m.value.height=C.value)};return e.watch(c,()=>{g()}),e.watch(o,_=>{u(_)}),e.watch(L,_=>{o.value&&!f.value&&u(!_)}),e.watch(i,_=>{if(_&&t.value){const w=t.value.getBoundingClientRect();m.value.left=w.left,m.value.top=w.top}}),{rect:m,orientation:h,reversed:b}}const we=(t=>(e.pushScopeId("data-v-cd1a3c67"),t=t(),e.popScopeId(),t))(()=>e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},[e.createElementVNode("path",{fill:"currentColor",d:"M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"})],-1)),ge={class:"ml-tool-palette-title"},_e={class:"ml-tool-palette-content"},be={key:1,class:"ml-tool-palette-default-content"},X=V(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},tabs:{default:void 0},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0},disabled:{type:Boolean,default:!1}},{modelValue:{default:!0},modelModifiers:{},activeTab:{default:""},activeTabModifiers:{}}),emits:e.mergeModels(["close","tab-change","tab-close"],["update:modelValue","update:activeTab"]),setup(t,{emit:r}){const o=t,a=e.useModel(t,"modelValue"),s=e.useModel(t,"activeTab"),l=r,c=e.computed(()=>o.tabs&&o.tabs.length>0);e.onMounted(()=>{c.value&&!s.value&&o.tabs&&o.tabs.length>0&&(s.value=o.tabs[0].name)}),e.watch(()=>o.tabs,n=>{n&&n.length>0&&!s.value&&(s.value=n[0].name)},{immediate:!0});const h=e.ref(!1),i=e.ref(null),d=e.ref(null),f=e.computed(()=>({offset:e.ref({left:o.leftOffset,right:o.rightOffset,top:o.topOffset,bottom:o.bottomOffset})})),{rect:b,orientation:m,reversed:v}=ve(d,i,h,f),p=e.computed(()=>({left:`${b.value.left}px`,top:`${b.value.top}px`,width:`${b.value.width}px`,height:`${b.value.height}px`})),B=e.computed(()=>v.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),E=e.computed(()=>{if(c.value&&s.value&&o.tabs){const n=o.tabs.find(u=>u.name===s.value);if(n!=null&&n.title)return n.title}return o.title}),C=()=>{a.value=!1;const n=d.value;l("close",{x:n?n.clientLeft:0,y:n?n.clientTop:0})},L=n=>{l("tab-change",n)},x=n=>{if(l("tab-close",n),s.value===n&&o.tabs){const u=o.tabs.findIndex(g=>g.name===n);if(u>=0){const g=o.tabs[u+1]||o.tabs[u-1];g&&(s.value=g.name)}}};return(n,u)=>{const g=k.ElIcon,_=k.ElTabPane,y=k.ElTabs;return a.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:d,style:e.normalizeStyle([p.value]),class:e.normalizeClass(["ml-tool-palette-dialog",{"ml-tool-palette-disabled":n.disabled}])},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(m)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:i,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(B.value)},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:u[0]||(u[0]=w=>!n.disabled&&C())},{default:e.withCtx(()=>[we]),_:1}),e.createVNode(D,{class:"ml-tool-palette-dialog-icon",modelValue:h.value,"onUpdate:modelValue":u[1]||(u[1]=w=>h.value=w),reverse:e.unref(v),disabled:n.disabled},null,8,["modelValue","reverse","disabled"]),e.createElementVNode("span",ge,e.toDisplayString(E.value),1)],4),e.createElementVNode("div",_e,[c.value?(e.openBlock(),e.createBlock(y,{key:0,modelValue:s.value,"onUpdate:modelValue":u[2]||(u[2]=w=>s.value=w),type:"border-card",class:"ml-tool-palette-tabs",onTabRemove:u[3]||(u[3]=w=>!n.disabled&&x),onTabChange:u[4]||(u[4]=w=>!n.disabled&&L)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.tabs,w=>(e.openBlock(),e.createBlock(_,{key:w.name,name:w.name,label:w.label},{label:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(w.label),1)]),default:e.withCtx(()=>[e.renderSlot(n.$slots,`tab-${w.name}`,{},void 0,!0)]),_:2},1032,["name","label"]))),128))]),_:3},8,["modelValue"])):(e.openBlock(),e.createElementBlock("div",be,[e.renderSlot(n.$slots,"default",{},void 0,!0)]))])],2)],6)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-cd1a3c67"]]),ye={install(t){t.component("MlCollapse",S),t.component("MlDropdown",S),t.component("MlLanguage",O),t.component("MlStatusBar",Y),t.component("MlToggleButton",A),t.component("MlToolBar",H),t.component("MlToolPalette",X)}};M.MlCollapse=D,M.MlDropdown=S,M.MlLanguage=O,M.MlStatusBar=Y,M.MlToggleButton=A,M.MlToolBar=H,M.MlToolPalette=X,M.default=ye,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/index.d.ts

@@ -10,7 +10,6 @@ export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
 export type { MlToggleButtonData } from './components/MlToggleButton.vue';
 export type { MlButtonData } from './components/MlToolBar.vue';
 export type { MlToolPaletteTab } from './components/MlToolPalette.vue';
-export * from './components/types';
 declare const _default: {
     install(app: any): void;
 };

package/lib/index.js

@@ -6,7 +6,6 @@ import MlToggleButton from './components/MlToggleButton.vue';
 import MlToolBar from './components/MlToolBar.vue';
 import MlToolPalette from './components/MlToolPalette.vue';
 export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToggleButton, MlToolBar, MlToolPalette };
-export * from './components/types';
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlightcad/ui-components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "One common UI component library based on Element Plus for web-based CAD",
   "license": "MIT",
   "author": "MLight Lee <mlight.lee@outlook.com>",

package/src/components/MlToggleButton.vue

@@ -5,10 +5,9 @@
 </template>
 
 <script lang="ts" setup>
+import type { Component } from 'vue'
 import { computed } from 'vue'
 
-import { MlIconType } from './types'
-
 /**
  * Data to descibe toggle button
  */
@@ -16,11 +15,11 @@ export interface MlToggleButtonData {
   /**
    * Icon used when button is 'on'
    */
-  onIcon: MlIconType
+  onIcon: Component
   /**
    * Icon used when button is 'off'.
    */
-  offIcon: MlIconType
+  offIcon: Component
   /**
    * Tooltip when button is 'on'
    */

package/src/components/MlToolBar.vue

@@ -1,53 +1,180 @@
 <template>
-  <el-button-group :class="buttonGroupClass">
-    <el-tooltip
-      v-for="(item, index) in items"
-      :key="item.text"
-      :content="buttonTooltip(item)"
-      :hide-after="0"
-    >
-      <el-button
-        class="ml-toolbar-button"
-        :style="{ width: buttonSize + 'px', height: buttonSize + 'px' }"
-        :key="index"
-        @click="handleCommand(item.command)"
+  <el-button-group class="ml-toolbar-group" :direction="direction">
+    <template v-for="(item, index) in items" :key="index">
+      <!-- ================= Button with sub toolbar ================= -->
+      <el-popover
+        v-if="item.children?.length"
+        :visible="activePopoverIndex === index"
+        trigger="manual"
+        :placement="popoverPlacement"
+        :show-arrow="true"
+        :teleported="true"
+        :popper-style="{
+          minWidth: getSubToolbarMinWidth(item) + 'px',
+          maxWidth: getSubToolbarMaxWidth(item) + 'px',
+          '--el-popover-padding': '0px',
+          '--el-popover-border-width': '0px',
+          '--el-popover-border-color': 'transparent'
+        }"
+        @mouseenter="openPopover(index)"
+        @mouseleave="closePopover"
       >
-        <div>
-          <el-icon :size="buttonIconSize">
-            <component :is="item.icon" />
-          </el-icon>
-          <div v-if="isShowButtonText" class="ml-toolbar-button-text">
-            {{ item.text }}
+        <!-- Sub toolbar -->
+        <el-button-group
+          class="ml-sub-toolbar-group"
+          :direction="direction"
+          @mouseenter="openPopover(index)"
+          @mouseleave="closePopover"
+        >
+          <el-tooltip
+            v-for="(child, cIndex) in item.children"
+            :key="cIndex"
+            :content="buttonTooltip(child)"
+            :auto-close="3000"
+            :show-after="1000"
+            :hide-after="0"
+          >
+            <el-button
+              class="ml-toolbar-button"
+              :style="{ width: buttonSize + 'px', height: buttonSize + 'px' }"
+              @click="handleSubCommand(child.command)"
+            >
+              <div>
+                <el-icon :size="buttonIconSize">
+                  <component :is="resolvedIcon(child)" />
+                </el-icon>
+                <div v-if="isShowButtonText" class="ml-toolbar-button-text">
+                  {{ resolvedText(child) }}
+                </div>
+              </div>
+            </el-button>
+          </el-tooltip>
+        </el-button-group>
+
+        <!-- Reference -->
+        <template #reference>
+          <el-button
+            class="ml-toolbar-button"
+            :style="{ width: buttonSize + 'px', height: buttonSize + 'px' }"
+            @mouseenter="openPopover(index)"
+            @mouseleave="closePopover"
+          >
+            <el-tooltip
+              :content="buttonTooltip(item)"
+              :auto-close="3000"
+              :show-after="1000"
+              :hide-after="0"
+            >
+              <div>
+                <el-icon :size="buttonIconSize">
+                  <component :is="resolvedIcon(item)" />
+                </el-icon>
+                <div v-if="isShowButtonText" class="ml-toolbar-button-text">
+                  {{ resolvedText(item) }}
+                </div>
+              </div>
+            </el-tooltip>
+          </el-button>
+        </template>
+      </el-popover>
+
+      <!-- ================= Normal / Toggle button ================= -->
+      <el-tooltip
+        v-else
+        :content="buttonTooltip(item)"
+        :auto-close="3000"
+        :show-after="1000"
+        :hide-after="0"
+      >
+        <el-button
+          class="ml-toolbar-button"
+          :style="{ width: buttonSize + 'px', height: buttonSize + 'px' }"
+          @click="handleItemClick(item)"
+        >
+          <div>
+            <el-icon :size="buttonIconSize">
+              <component :is="resolvedIcon(item)" />
+            </el-icon>
+            <div v-if="isShowButtonText" class="ml-toolbar-button-text">
+              {{ resolvedText(item) }}
+            </div>
           </div>
-        </div>
-      </el-button>
-    </el-tooltip>
+        </el-button>
+      </el-tooltip>
+    </template>
   </el-button-group>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { Component } from 'vue'
+import { computed, ref, watch } from 'vue'
+type VerticalPlacement =
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
 
-import { MlIconType } from './types'
+type HorizontalPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
 
 /**
  * Data to descibe button appearance
  */
 export interface MlButtonData {
   /**
-   * Icon represented by one vue component
+   * Command string which will be passed to click event as event arguments
    */
-  icon: MlIconType
+  command: string
   /**
-   * Text shown below icon
+   * Sub toolbar data. If this property is set, the button will have a sub toolbar.
    */
-  text: string
+  children?: MlButtonData[]
   /**
-   * Command string which will be passed to click event as event arguments
+   * Toggle button configuration.
+   * If this property is set, the button becomes a toggle button.
    */
-  command: string
+  toggle?: {
+    /**
+     * Initial toggle value
+     */
+    value?: boolean
+    /**
+     * Appearance when toggle is ON
+     */
+    on: {
+      icon: Component
+      text: string
+      description: string
+    }
+    /**
+     * Appearance when toggle is OFF
+     */
+    off: {
+      icon: Component
+      text: string
+      description: string
+    }
+  }
+  /**
+   * Icon represented by one vue component
+   * ⚠️ Ignored when toggle is defined
+   */
+  icon?: Component
+  /**
+   * Text shown below icon
+   * ⚠️ Ignored when toggle is defined
+   */
+  text?: string
   /**
    * Tooltips content when hover
+   * ⚠️ Ignored when toggle is defined
    */
   description?: string
 }
@@ -73,61 +200,157 @@ interface Props {
    * - horizontal: arrange button horizontally
    */
   direction?: 'vertical' | 'horizontal'
+  /**
+   * Placement of sub toolbar (popover)
+   * - vertical toolbar: left / right variants
+   * - horizontal toolbar: top / bottom variants
+   */
+  placement?: VerticalPlacement | HorizontalPlacement
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'large',
-  layout: 'horizontal'
-})
-
-const emit = defineEmits({
-  click: null
+  direction: 'horizontal'
 })
 
-const buttonGroupClass = computed(() => {
-  return props.direction === 'vertical'
-    ? 'ml-vertical-toolbar-button-group'
-    : 'ml-horizontal-toolbar-button-group'
-})
+const emit = defineEmits<{
+  (e: 'click', command?: string): void
+  (e: 'toggle', command: string, value: boolean): void
+}>()
 
-const buttonIconSize = computed(() => {
-  return props.size === 'small' ? 20 : 30
-})
+const buttonIconSize = computed(() => (props.size === 'small' ? 20 : 30))
 
 const buttonSize = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return 30
-    case 'medium':
-      return 50
-  }
+  if (props.size === 'small') return 30
+  if (props.size === 'medium') return 50
   return 70
 })
 
+const isShowButtonText = computed(() => props.size === 'large')
+
+const activePopoverIndex = ref<number | null>(null)
+
+const openPopover = (index: number) => {
+  activePopoverIndex.value = index
+}
+
+const closePopover = () => {
+  activePopoverIndex.value = null
+}
+
+/**
+ * Internal toggle state map
+ */
+const toggleStateMap = ref<Record<string, boolean>>({})
+
+watch(
+  () => props.items,
+  items => {
+    items.forEach(item => {
+      if (item.toggle && toggleStateMap.value[item.command] === undefined) {
+        toggleStateMap.value[item.command] = item.toggle.value ?? false
+      }
+    })
+  },
+  { immediate: true }
+)
+
+const handleItemClick = (item: MlButtonData) => {
+  if (item.toggle) {
+    const next = !toggleStateMap.value[item.command]
+    toggleStateMap.value[item.command] = next
+    emit('toggle', item.command, next)
+  } else {
+    emit('click', item.command)
+  }
+}
+
+const handleSubCommand = (command?: string) => {
+  if (command) emit('click', command)
+  closePopover() // 👈 hide sub toolbar after click
+}
+
+/**
+ * Resolve current toggle state
+ */
+const isToggleOn = (item: MlButtonData) =>
+  !!item.toggle && toggleStateMap.value[item.command]
+
+/**
+ * Resolve icon (toggle-aware)
+ */
+const resolvedIcon = (item: MlButtonData) => {
+  if (!item.toggle) return item.icon
+  return isToggleOn(item) ? item.toggle.on.icon : item.toggle.off.icon
+}
+
+/**
+ * Resolve text (toggle-aware)
+ */
+const resolvedText = (item: MlButtonData) => {
+  if (!item.toggle) return item.text
+  return isToggleOn(item) ? item.toggle.on.text : item.toggle.off.text
+}
+
+/**
+ * Resolve tooltip (toggle-aware)
+ */
 const buttonTooltip = (item: MlButtonData) => {
-  return item.description ? item.description : item.text
+  if (!item.toggle) {
+    return item.description ?? item.text
+  }
+  return isToggleOn(item)
+    ? (item.toggle.on.description ?? item.toggle.on.text)
+    : (item.toggle.off.description ?? item.toggle.off.text)
 }
 
-const isShowButtonText = computed(() => {
-  return props.size === 'large'
+const popoverPlacement = computed(() => {
+  const verticalDefaults: VerticalPlacement = 'right-start'
+  const horizontalDefaults: HorizontalPlacement = 'bottom-start'
+
+  if (!props.placement) {
+    return props.direction === 'vertical'
+      ? verticalDefaults
+      : horizontalDefaults
+  }
+
+  // Direction-aware validation
+  if (
+    props.direction === 'vertical' &&
+    (props.placement.startsWith('left') || props.placement.startsWith('right'))
+  ) {
+    return props.placement
+  }
+
+  if (
+    props.direction === 'horizontal' &&
+    (props.placement.startsWith('top') || props.placement.startsWith('bottom'))
+  ) {
+    return props.placement
+  }
+
+  // Fallback if placement doesn't match direction
+  return props.direction === 'vertical' ? verticalDefaults : horizontalDefaults
 })
 
-const handleCommand = (command: string) => {
-  emit('click', command)
+const getSubToolbarMinWidth = (item: MlButtonData) => {
+  return props.direction === 'horizontal' && item.children
+    ? item.children.length * buttonSize.value
+    : buttonSize.value
+}
+
+const getSubToolbarMaxWidth = (item: MlButtonData) => {
+  return props.direction === 'vertical' && item.children ? buttonSize.value : 0
 }
 </script>
 
 <style scoped>
-.ml-vertical-toolbar-button-group {
-  display: flex;
-  flex-direction: column;
+.ml-toolbar-group {
   background-color: var(--el-fill-color);
 }
 
-.ml-horizontal-toolbar-button-group {
-  display: flex;
-  flex-direction: row;
-  background-color: var(--el-fill-color);
+.ml-sub-toolbar-group {
+  background-color: var(--el-bg-color);
 }
 
 .ml-toolbar-button {
@@ -139,7 +362,6 @@ const handleCommand = (command: string) => {
 }
 
 .ml-toolbar-button-text {
-  margin-left: 0px;
   margin-top: 5px;
 }
 </style>

package/src/index.ts

@@ -18,7 +18,6 @@ export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
 export type { MlToggleButtonData } from './components/MlToggleButton.vue'
 export type { MlButtonData } from './components/MlToolBar.vue'
 export type { MlToolPaletteTab } from './components/MlToolPalette.vue'
-export * from './components/types'
 
 // Optionally, export them as a plugin for Vue
 export default {

package/src/components/types.ts

@@ -1,3 +0,0 @@
-import { DefineComponent } from 'vue'
-
-export type MlIconType = () => DefineComponent