@mlightcad/ui-components 0.0.9 → 0.0.10

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-vertical-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-27b5412a]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-27b5412a]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-e0d4453a]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-e0d4453a]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-e0d4453a]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-e0d4453a]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-e0d4453a]{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-e0d4453a]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-e0d4453a]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-e0d4453a],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-e0d4453a]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-e0d4453a]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-(function(E,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/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/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/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css"],y):(E=typeof globalThis<"u"?globalThis:E||self,y(E.UIComponents={},E.es,null,null,E.Vue))})(this,function(E,y,ce,re,e){"use strict";const H={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},O=[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 Y(t,a){return e.openBlock(),e.createElementBlock("svg",H,[...O])}const V={render:Y},A={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},X=[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 q(t,a){return e.openBlock(),e.createElementBlock("svg",A,[...X])}const $={render:q},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:a}){const n=t,s=e.useModel(t,"modelValue"),l=a,o=e.computed(()=>n.reverse?s.value?V:$:s.value?$:V),c=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(i,r)=>{const m=y.ElIcon;return e.openBlock(),e.createBlock(m,{size:c.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),U=(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)),F=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:a}){const n=t,s=a,l=e.computed(()=>n.items.filter(c=>c.name!==n.current)),o=c=>{s("click",c)};return(c,h)=>{const i=y.ElIcon,r=y.ElDropdownItem,m=y.ElDropdownMenu,_=y.ElDropdown;return e.openBlock(),e.createBlock(_,{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(r,{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(()=>[U]),_:1})]),_:1})}}}),T=(t,a)=>{const n=t.__vccOpts||t;for(const[s,l]of a)n[s]=l;return n},z=T(F,[["__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:a}){const n=t,s=a,l=o=>{s("click",o)};return(o,c)=>(e.openBlock(),e.createBlock(z,{icon:j,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),G={key:0,class:"ml-toolbar-button-text"},W=T(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:a}){const n=t,s=a,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),c=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"),r=m=>{s("click",m)};return(m,_)=>{const u=y.ElIcon,p=y.ElButton,d=y.ElTooltip,v=y.ElButtonGroup;return e.openBlock(),e.createBlock(v,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(g,B)=>(e.openBlock(),e.createBlock(d,{key:g.text,content:h(g),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{class:"ml-toolbar-button",style:e.normalizeStyle({width:c.value+"px",height:c.value+"px"}),key:B,onClick:C=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value,innerHTML:g.icon},null,8,["size","innerHTML"]),i.value?(e.openBlock(),e.createElementBlock("div",G,e.toDisplayString(g.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-27b5412a"]]),D=20;function J(t,a,n){const s=e.ref(!1),l=i=>{if(n.value&&t.value){const r=t.value.getBoundingClientRect(),m=i.clientX<r.left||i.clientX>r.right||i.clientY<r.top||i.clientY>r.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},c=()=>{a.value&&a.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{a.value&&a.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?c():h()}),{autoOpened:s}}function K(t,a,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),c={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 d=t.value.getBoundingClientRect();o.value={x:d.left,y:d.top},l.value={x:d.left,y:d.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",_)},m=()=>{t.value&&t.value.removeEventListener("mousedown",_)},_=d=>{if(t.value!=null){if(a&&a.value){const v=a.value.getBoundingClientRect();if(d.clientX<v.left||d.clientX>v.right||d.clientY<v.top||d.clientY>v.bottom)return}s.value=!0,c.x=d.clientX,c.y=d.clientY,i(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=d=>{if(s.value&&o.value&&l.value){const v=window.innerWidth,g=window.innerHeight,B=t.value,C=B.getBoundingClientRect(),M=C.width,f=C.height,b=o.value.x+(d.clientX-c.x),x=o.value.y+(d.clientY-c.y);l.value.x=Math.max(n?n.value.offset.value.left:0,b);const w=v-M;l.value.x=Math.min(n?w-n.value.offset.value.right:w,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(x,g-f));const L=g-f;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),B.style.left=l.value.x+"px",B.style.top=l.value.y+"px"}},p=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",p)};return e.onMounted(()=>{t.value&&(i(),r())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",_)}),e.watch(t,d=>{d?(i(),r()):m()}),{isDragging:s,movement:h,position:l}}function Q(t,a,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:c,position:h}=K(t,a,n);return e.watch(c,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:c,position:h}}function Z(t,a,n,s){const l=e.ref(null),o=e.ref(null),c=e.ref(null),h=e.ref(null);return e.watch(t,(i,r)=>{l.value=r}),e.watch(a,(i,r)=>{o.value=r}),e.watch(n,(i,r)=>{c.value=r}),e.watch(s,(i,r)=>{h.value=r}),{lastLeft:l,lastTop:o,lastWidth:c,lastHeight:h}}function P(t,a,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),c=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),i=e.computed(()=>n.value?n.value.x:null);return e.watch([c,h],([r,m])=>{(l.value==null||o.value==null||a.value)&&(l.value=r,o.value=m)}),e.watch(i,r=>{s.value&&n.value&&(o.value=r)}),{left:o,width:l}}function R(t,a=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,a.value.left),n.value.top=Math.max(o.top,a.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 ee(t,a=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}=R(t,s),c=e.ref(!1);let h=0,i=0,r=0,m=0,_=0;const u=5,p=e.ref(null),d=M=>{if(!(!t.value||a.value))if(c.value){const f=M.clientX-m,b=M.clientY-_;if(p.value==="left"||p.value==="left-bottom-corner"){const x=i-f;x>l.width&&(o.value.width=x,o.value.left=h+f,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(p.value==="right"||p.value==="right-bottom-corner"){const x=i+f;x>l.width&&(o.value.width=x,t.value.style.width=o.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const x=r+b;x>l.height&&(o.value.height=x,t.value.style.height=o.value.height+"px")}}else{const f=t.value.getBoundingClientRect(),b=M.clientX-f.left,x=M.clientY-f.top,w=b<=u,L=b>=f.width-u,k=x>=f.height-u;w&&k&&n.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&k&&!n.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):w&&n.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",p.value="right"):k?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},v=M=>{if(!t.value||!p.value)return;const f=t.value.getBoundingClientRect();m=M.clientX,_=M.clientY,i=f.width,r=f.height,h=f.left,o.value.width=i,o.value.height=r,o.value.left=f.left,o.value.top=f.top,c.value=!0,document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)},g=()=>{c.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)},B=()=>{t.value&&(t.value.removeEventListener("mousedown",v),t.value.removeEventListener("mousemove",d)),document.removeEventListener("mouseup",g)},C=()=>{t.value&&(t.value.addEventListener("mousedown",v),t.value.addEventListener("mousemove",d))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{B()}),e.watch(t,M=>{M?C():B()}),{rect:o,isResizing:c}}function te(t,a,n,s){const l=()=>{if(t.value){const i=t.value;a.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="")},c=()=>{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():c()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function ne(t,a,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:c,orientation:h,movement:i,position:r,isDragging:m}=Q(t,a,s),_=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ee(t,n,_,s.value.offset),{width:d,left:v}=P(u,p,r,m),{lastTop:g,lastHeight:B}=Z(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:C}=J(t,a,n);te(t,_,n,C);const M=w=>{if(t.value){const L=t.value.getBoundingClientRect(),k=L.left+w;if(_.value){u.value.left=k;const ae=window.innerWidth-L.width-L.left;L.left<=0&&ae>=0&&w<0&&(u.value.left=Math.max(0,k)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&w<0&&(u.value.left=Math.max(0,k))}},f=()=>{const w=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,M(w)};e.onMounted(()=>{window.addEventListener("resize",f)}),e.onUnmounted(()=>{window.removeEventListener("resize",f)});const b=w=>{w?(u.value.width=D,_.value&&v.value&&d.value&&(u.value.left=v.value+d.value-D)):(u.value.width=d.value,_.value&&v.value&&d.value&&(u.value.left=v.value))},x=()=>{c.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=g.value,u.value.height=B.value)};return e.watch(c,()=>{x()}),e.watch(n,w=>{b(w)}),e.watch(C,w=>{n.value&&!m.value&&b(!w)}),e.watch(i,w=>{if(w&&t.value){const k=t.value.getBoundingClientRect();u.value.left=k.left,u.value.top=k.top}}),{rect:u,orientation:h,reversed:_}}const oe=(t=>(e.pushScopeId("data-v-e0d4453a"),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)),le={class:"ml-tool-palette-title"},se={class:"ml-tool-palette-content"},N=T(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["close"],["update:modelValue"]),setup(t,{emit:a}){const n=t,s=e.useModel(t,"modelValue"),l=a,o=e.ref(!1),c=e.ref(null),h=e.ref(null),i=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:r,orientation:m,reversed:_}=ne(h,c,o,i),u=e.computed(()=>({left:`${r.value.left}px`,top:`${r.value.top}px`,width:`${r.value.width}px`,height:`${r.value.height}px`})),p=()=>{s.value=!1;const d=h.value;l("close",{x:d?d.clientLeft:0,y:d?d.clientTop:0})};return(d,v)=>{const g=y.ElIcon;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:h,style:e.normalizeStyle([u.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(m)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:c,class:"ml-tool-palette-title-bar"},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:p},{default:e.withCtx(()=>[oe]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:o.value,"onUpdate:modelValue":v[0]||(v[0]=B=>o.value=B),reverse:e.unref(_)},null,8,["modelValue","reverse"]),e.createElementVNode("span",le,e.toDisplayString(n.title),1)],512),e.createElementVNode("div",se,[e.renderSlot(d.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-e0d4453a"]]),ie={install(t){t.component("MlCollapse",z),t.component("MlDropdown",z),t.component("MlLanguage",S),t.component("MlToolbar",W),t.component("MlToolPalette",N)}};E.MlCollapse=I,E.MlDropdown=z,E.MlLanguage=S,E.MlToolPalette=N,E.MlToolbar=W,E.default=ie,Object.defineProperties(E,{__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-b0c9d107]{position:fixed;bottom:0;left:0;right:0;height:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--el-border-color);box-shadow:0 -2px 1-px #0000003d}.ml-status-bar-left[data-v-b0c9d107],.ml-status-bar-right[data-v-b0c9d107]{display:flex;align-items:center}.ml-status-bar-left[data-v-b0c9d107]>*{margin-right:10px}.ml-status-bar-right[data-v-b0c9d107]>*{margin-left:10px}.ml-vertical-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:column}.ml-horizontal-toolbar-button-group[data-v-27b5412a]{display:flex;flex-direction:row}.ml-toolbar-button[data-v-27b5412a]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px}.ml-toolbar-button-text[data-v-27b5412a]{margin-left:0;margin-top:5px}.ml-tool-palette-dialog[data-v-539d98d3]{cursor:default;width:300px;min-width:var(--collapsed-width);position:fixed;border:1px solid;border-radius:4px}.ml-tool-palette-dialog-icon[data-v-539d98d3]{border-bottom:1px solid}.ml-tool-palette-dialog-layout[data-v-539d98d3]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-539d98d3]{width:var(--collapsed-width);display:flex;justify-content:left;align-items:center;cursor:move;writing-mode:vertical-rl;text-align:center;border:1px}.ml-tool-palette-title[data-v-539d98d3]{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-539d98d3]{pointer-events:none;-webkit-user-select:none;user-select:none;flex-grow:1;display:flex;justify-content:space-around;align-items:center;background-color:#fff;overflow:hidden}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-539d98d3]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-539d98d3],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-539d98d3]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-539d98d3]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(y,E){typeof exports=="object"&&typeof module<"u"?E(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/button-group/style/css"),require("element-plus/es/components/tooltip/style/css"),require("element-plus/es/components/button/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/button-group/style/css","element-plus/es/components/tooltip/style/css","element-plus/es/components/button/style/css"],E):(y=typeof globalThis<"u"?globalThis:y||self,E(y.UIComponents={},y.es,null,null,y.Vue))})(this,function(y,E,pe,fe,e){"use strict";const O={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},Y=[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 A(t,i){return e.openBlock(),e.createElementBlock("svg",O,[...Y])}const V={render:A},X={xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",viewBox:"0 0 1024 1024"},q=[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 U(t,i){return e.openBlock(),e.createElementBlock("svg",X,[...q])}const $={render:U},S=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:i}){const n=t,s=e.useModel(t,"modelValue"),l=i,o=e.computed(()=>n.reverse?s.value?V:$:s.value?$:V),a=e.computed(()=>`${n.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(c,r)=>{const m=E.ElIcon;return e.openBlock(),e.createBlock(m,{size:a.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.value)))]),_:1},8,["size"])}}}),F=(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)),j=e.defineComponent({__name:"MlDropdown",props:{icon:{},items:{},current:{default:void 0}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=e.computed(()=>n.items.filter(a=>a.name!==n.current)),o=a=>{s("click",a)};return(a,h)=>{const c=E.ElIcon,r=E.ElDropdownItem,m=E.ElDropdownMenu,_=E.ElDropdown;return e.openBlock(),e.createBlock(_,{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(r,{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(c,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[F]),_:1})]),_:1})}}}),z=(t,i)=>{const n=t.__vccOpts||t;for(const[s,l]of i)n[s]=l;return n},T=z(j,[["__scopeId","data-v-3fc33b5d"]]),G='<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>',I=e.defineComponent({__name:"MlLanguage",props:{languages:{},current:{}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=o=>{s("click",o)};return(o,a)=>(e.openBlock(),e.createBlock(T,{icon:G,items:n.languages,current:n.current,onClick:l},null,8,["items","current"]))}}),J={},K={class:"ml-status-bar"},Q={class:"ml-status-bar-left"},Z={class:"ml-status-bar-right"};function P(t,i){return e.openBlock(),e.createElementBlock("div",K,[e.createElementVNode("div",Q,[e.renderSlot(t.$slots,"left",{},void 0,!0)]),e.createElementVNode("div",Z,[e.renderSlot(t.$slots,"right",{},void 0,!0)])])}const N=z(J,[["render",P],["__scopeId","data-v-b0c9d107"]]),R={key:0,class:"ml-toolbar-button-text"},W=z(e.defineComponent({__name:"MlToolbar",props:{items:{},size:{default:"large"},direction:{}},emits:{click:null},setup(t,{emit:i}){const n=t,s=i,l=e.computed(()=>n.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),o=e.computed(()=>n.size==="small"?20:30),a=e.computed(()=>{switch(n.size){case"small":return 30;case"medium":return 50}return 70}),h=m=>m.description?m.description:m.text,c=e.computed(()=>n.size==="large"),r=m=>{s("click",m)};return(m,_)=>{const u=E.ElIcon,p=E.ElButton,d=E.ElTooltip,v=E.ElButtonGroup;return e.openBlock(),e.createBlock(v,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m.items,(g,B)=>(e.openBlock(),e.createBlock(d,{key:g.text,content:h(g),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(p,{class:"ml-toolbar-button",style:e.normalizeStyle({width:a.value+"px",height:a.value+"px"}),key:B,onClick:C=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:o.value,innerHTML:g.icon},null,8,["size","innerHTML"]),c.value?(e.openBlock(),e.createElementBlock("div",R,e.toDisplayString(g.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-27b5412a"]]),D=20;function ee(t,i,n){const s=e.ref(!1),l=c=>{if(n.value&&t.value){const r=t.value.getBoundingClientRect(),m=c.clientX<r.left||c.clientX>r.right||c.clientY<r.top||c.clientY>r.bottom;s.value=!m}},o=()=>{n.value&&(s.value=!0)},a=()=>{i.value&&i.value.addEventListener("mousemove",o),t.value&&t.value.addEventListener("mousemove",o)},h=()=>{i.value&&i.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,c=>{c&&(s.value=!1)}),e.watch(t,c=>{c?a():h()}),{autoOpened:s}}function te(t,i,n){const s=e.ref(!1),l=e.ref(null),o=e.ref(null),a={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}),c=()=>{if(t.value){const d=t.value.getBoundingClientRect();o.value={x:d.left,y:d.top},l.value={x:d.left,y:d.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",_)},m=()=>{t.value&&t.value.removeEventListener("mousedown",_)},_=d=>{if(t.value!=null){if(i&&i.value){const v=i.value.getBoundingClientRect();if(d.clientX<v.left||d.clientX>v.right||d.clientY<v.top||d.clientY>v.bottom)return}s.value=!0,a.x=d.clientX,a.y=d.clientY,c(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=d=>{if(s.value&&o.value&&l.value){const v=window.innerWidth,g=window.innerHeight,B=t.value,C=B.getBoundingClientRect(),x=C.width,f=C.height,b=o.value.x+(d.clientX-a.x),M=o.value.y+(d.clientY-a.y);l.value.x=Math.max(n?n.value.offset.value.left:0,b);const w=v-x;l.value.x=Math.min(n?w-n.value.offset.value.right:w,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(M,g-f));const L=g-f;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),B.style.left=l.value.x+"px",B.style.top=l.value.y+"px"}},p=()=>{s.value=!1,document.removeEventListener("mousemove",u),document.removeEventListener("mouseup",p)};return e.onMounted(()=>{t.value&&(c(),r())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",_)}),e.watch(t,d=>{d?(c(),r()):m()}),{isDragging:s,movement:h,position:l}}function ne(t,i,n){const s=e.ref(!1),l=e.ref("left"),{isDragging:o,movement:a,position:h}=te(t,i,n);return e.watch(a,c=>{if(c&&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:a,position:h}}function oe(t,i,n,s){const l=e.ref(null),o=e.ref(null),a=e.ref(null),h=e.ref(null);return e.watch(t,(c,r)=>{l.value=r}),e.watch(i,(c,r)=>{o.value=r}),e.watch(n,(c,r)=>{a.value=r}),e.watch(s,(c,r)=>{h.value=r}),{lastLeft:l,lastTop:o,lastWidth:a,lastHeight:h}}function le(t,i,n,s){const l=e.ref(t.value.width),o=e.ref(t.value.left),a=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),c=e.computed(()=>n.value?n.value.x:null);return e.watch([a,h],([r,m])=>{(l.value==null||o.value==null||i.value)&&(l.value=r,o.value=m)}),e.watch(c,r=>{s.value&&n.value&&(o.value=r)}),{left:o,width:l}}function se(t,i=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,i.value.left),n.value.top=Math.max(o.top,i.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,i=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}=se(t,s),a=e.ref(!1);let h=0,c=0,r=0,m=0,_=0;const u=5,p=e.ref(null),d=x=>{if(!(!t.value||i.value))if(a.value){const f=x.clientX-m,b=x.clientY-_;if(p.value==="left"||p.value==="left-bottom-corner"){const M=c-f;M>l.width&&(o.value.width=M,o.value.left=h+f,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(p.value==="right"||p.value==="right-bottom-corner"){const M=c+f;M>l.width&&(o.value.width=M,t.value.style.width=o.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const M=r+b;M>l.height&&(o.value.height=M,t.value.style.height=o.value.height+"px")}}else{const f=t.value.getBoundingClientRect(),b=x.clientX-f.left,M=x.clientY-f.top,w=b<=u,L=b>=f.width-u,k=M>=f.height-u;w&&k&&n.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&k&&!n.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):w&&n.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",p.value="right"):k?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},v=x=>{if(!t.value||!p.value)return;const f=t.value.getBoundingClientRect();m=x.clientX,_=x.clientY,c=f.width,r=f.height,h=f.left,o.value.width=c,o.value.height=r,o.value.left=f.left,o.value.top=f.top,a.value=!0,document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)},g=()=>{a.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)},B=()=>{t.value&&(t.value.removeEventListener("mousedown",v),t.value.removeEventListener("mousemove",d)),document.removeEventListener("mouseup",g)},C=()=>{t.value&&(t.value.addEventListener("mousedown",v),t.value.addEventListener("mousemove",d))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{B()}),e.watch(t,x=>{x?C():B()}),{rect:o,isResizing:a}}function ce(t,i,n,s){const l=()=>{if(t.value){const c=t.value;i.value?c.style.transition="width 0.3s ease-out, left 0.3s ease-out":c.style.transition="width 0.3s ease"}},o=()=>{t.value&&(t.value.style.transition="")},a=()=>{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,c=>{c?h():a()}),e.watch(n,()=>{l()}),e.watch(s,()=>{l()})}function ae(t,i,n,s){const l=e.ref(window.innerWidth),o=e.ref(window.innerHeight),{docked:a,orientation:h,movement:c,position:r,isDragging:m}=ne(t,i,s),_=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ie(t,n,_,s.value.offset),{width:d,left:v}=le(u,p,r,m),{lastTop:g,lastHeight:B}=oe(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:C}=ee(t,i,n);ce(t,_,n,C);const x=w=>{if(t.value){const L=t.value.getBoundingClientRect(),k=L.left+w;if(_.value){u.value.left=k;const he=window.innerWidth-L.width-L.left;L.left<=0&&he>=0&&w<0&&(u.value.left=Math.max(0,k)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&w<0&&(u.value.left=Math.max(0,k))}},f=()=>{const w=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,x(w)};e.onMounted(()=>{window.addEventListener("resize",f)}),e.onUnmounted(()=>{window.removeEventListener("resize",f)});const b=w=>{w?(u.value.width=D,_.value&&v.value&&d.value&&(u.value.left=v.value+d.value-D)):(u.value.width=d.value,_.value&&v.value&&d.value&&(u.value.left=v.value))},M=()=>{a.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=g.value,u.value.height=B.value)};return e.watch(a,()=>{M()}),e.watch(n,w=>{b(w)}),e.watch(C,w=>{n.value&&!m.value&&b(!w)}),e.watch(c,w=>{if(w&&t.value){const k=t.value.getBoundingClientRect();u.value.left=k.left,u.value.top=k.top}}),{rect:u,orientation:h,reversed:_}}const re=(t=>(e.pushScopeId("data-v-539d98d3"),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"},de={class:"ml-tool-palette-content"},H=z(e.defineComponent({__name:"MlToolPalette",props:e.mergeModels({title:{default:""},leftOffset:{default:0},rightOffset:{default:0},topOffset:{default:0},bottomOffset:{default:0}},{modelValue:{default:!0},modelModifiers:{}}),emits:e.mergeModels(["close"],["update:modelValue"]),setup(t,{emit:i}){const n=t,s=e.useModel(t,"modelValue"),l=i,o=e.ref(!1),a=e.ref(null),h=e.ref(null),c=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:r,orientation:m,reversed:_}=ae(h,a,o,c),u=e.computed(()=>({left:`${r.value.left}px`,top:`${r.value.top}px`,width:`${r.value.width}px`,height:`${r.value.height}px`})),p=()=>{s.value=!1;const d=h.value;l("close",{x:d?d.clientLeft:0,y:d?d.clientTop:0})};return(d,v)=>{const g=E.ElIcon;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:h,style:e.normalizeStyle([u.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(m)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar"},[e.createVNode(g,{size:18,class:"ml-tool-palette-dialog-icon",onClick:p},{default:e.withCtx(()=>[re]),_:1}),e.createVNode(S,{class:"ml-tool-palette-dialog-icon",modelValue:o.value,"onUpdate:modelValue":v[0]||(v[0]=B=>o.value=B),reverse:e.unref(_)},null,8,["modelValue","reverse"]),e.createElementVNode("span",ue,e.toDisplayString(n.title),1)],512),e.createElementVNode("div",de,[e.renderSlot(d.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-539d98d3"]]),me={install(t){t.component("MlCollapse",T),t.component("MlDropdown",T),t.component("MlLanguage",I),t.component("MlStatusBar",N),t.component("MlToolbar",W),t.component("MlToolPalette",H)}};y.MlCollapse=S,y.MlDropdown=T,y.MlLanguage=I,y.MlStatusBar=N,y.MlToolPalette=H,y.MlToolbar=W,y.default=me,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/index.d.ts

@@ -1,9 +1,10 @@
 import MlCollapse from './components/MlCollapse.vue';
 import MlDropdown from './components/MlDropdown.vue';
 import MlLanguage from './components/MlLanguage.vue';
+import MlStatusBar from './components/MlStatusBar.vue';
 import MlToolbar from './components/MlToolbar.vue';
 import MlToolPalette from './components/MlToolPalette.vue';
-export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette };
+export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToolbar, MlToolPalette };
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
 export type { MlButtonData } from './components/MlToolbar.vue';
 declare const _default: {

package/lib/index.js

@@ -1,9 +1,10 @@
 import MlCollapse from './components/MlCollapse.vue';
 import MlDropdown from './components/MlDropdown.vue';
 import MlLanguage from './components/MlLanguage.vue';
+import MlStatusBar from './components/MlStatusBar.vue';
 import MlToolbar from './components/MlToolbar.vue';
 import MlToolPalette from './components/MlToolPalette.vue';
-export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette };
+export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToolbar, MlToolPalette };
 // Optionally, export them as a plugin for Vue
 export default {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -11,6 +12,7 @@ export default {
         app.component('MlCollapse', MlDropdown);
         app.component('MlDropdown', MlDropdown);
         app.component('MlLanguage', MlLanguage);
+        app.component('MlStatusBar', MlStatusBar);
         app.component('MlToolbar', MlToolbar);
         app.component('MlToolPalette', MlToolPalette);
     }

package/package.json

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

package/src/components/MlCollapse.vue

@@ -7,8 +7,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import arrowLeft from '../svg/arrow-left.svg'
-import arrowRight from '../svg/arrow-right.svg'
+import arrowLeft from '../svgs/arrow-left.svg'
+import arrowRight from '../svgs/arrow-right.svg'
 
 /**
  * Properties of MlCllapse component

package/src/components/MlStatusBar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="ml-status-bar">
+    <div class="ml-status-bar-left">
+      <!-- Slot for left-aligned components -->
+      <slot name="left"></slot>
+    </div>
+    <div class="ml-status-bar-right">
+      <!-- Slot for right-aligned components -->
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.ml-status-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--el-border-color);
+  box-shadow: 0 -2px 1-px rgba(0, 0, 0, 0.24);
+}
+
+.ml-status-bar-left,
+.ml-status-bar-right {
+  display: flex;
+  align-items: center;
+}
+
+.ml-status-bar-left > * {
+  margin-right: 10px;
+}
+
+.ml-status-bar-right > * {
+  margin-left: 10px;
+}
+</style>

package/src/components/MlToolPalette.vue

@@ -41,9 +41,9 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 
-import { WIDTH_OF_TITLE_BAR } from '../composable/types'
-import { useBoundingRect } from '../composable/useBoundingRect'
-import { DragOptions } from '../composable/useDrag'
+import { WIDTH_OF_TITLE_BAR } from '../composables/types'
+import { useBoundingRect } from '../composables/useBoundingRect'
+import { DragOptions } from '../composables/useDrag'
 import MlCollapse from './MlCollapse.vue'
 
 /**
@@ -112,12 +112,11 @@ const dragOptions = computed<DragOptions>(() => {
     })
   }
 })
-const { rect: toolPaletteRect, orientation, reversed } = useBoundingRect(
-  toolPaletteElement,
-  titleBarElement,
-  collapsed,
-  dragOptions
-)
+const {
+  rect: toolPaletteRect,
+  orientation,
+  reversed
+} = useBoundingRect(toolPaletteElement, titleBarElement, collapsed, dragOptions)
 
 // Resized style
 const resizedStyle = computed(() => {

package/src/{composable → composables}/useBoundingRect.ts

@@ -39,8 +39,18 @@ export function useBoundingRect(
   const reversed = computed(() => {
     return orientation.value === 'right'
   })
-  const { rect, isResizing } = useResize(toolPaletteRef, collapsed, reversed, dragOptions.value.offset)
-  const { width: toolPaletteWidth, left: toolPaletteLeft } = useLeftPosAndWidth(rect, isResizing, position, isDragging)
+  const { rect, isResizing } = useResize(
+    toolPaletteRef,
+    collapsed,
+    reversed,
+    dragOptions.value.offset
+  )
+  const { width: toolPaletteWidth, left: toolPaletteLeft } = useLeftPosAndWidth(
+    rect,
+    isResizing,
+    position,
+    isDragging
+  )
   const { lastTop, lastHeight } = useLastPosAndSize(
     computed(() => rect.value.left),
     computed(() => rect.value.top),
@@ -59,7 +69,7 @@ export function useBoundingRect(
         rect.value.left = tempLeft
 
         // If the following conditions are met, decrease the distance between the right side of tool palette and right side of window
-        // - the distance between the right side of tool palette and right side of window equal to or greater than 0, 
+        // - the distance between the right side of tool palette and right side of window equal to or greater than 0,
         // - The left side of window overlaps with the left side of tool platte
         const rightOffset = window.innerWidth - temp.width - temp.left
         if (temp.left <= 0 && rightOffset >= 0 && xDelta < 0) {
@@ -72,7 +82,7 @@ export function useBoundingRect(
         }
       } else {
         // The right side of window overlaps with the right side of tool platte
-        if (((temp.left + temp.width) >= window.innerWidth) && xDelta < 0) {
+        if (temp.left + temp.width >= window.innerWidth && xDelta < 0) {
           rect.value.left = Math.max(0, tempLeft)
         }
       }
@@ -98,7 +108,8 @@ export function useBoundingRect(
     if (shrink) {
       rect.value.width = WIDTH_OF_TITLE_BAR
       if (reversed.value && toolPaletteLeft.value && toolPaletteWidth.value) {
-        rect.value.left = toolPaletteLeft.value + toolPaletteWidth.value - WIDTH_OF_TITLE_BAR
+        rect.value.left =
+          toolPaletteLeft.value + toolPaletteWidth.value - WIDTH_OF_TITLE_BAR
       }
     } else {
       rect.value.width = toolPaletteWidth.value
@@ -111,7 +122,10 @@ export function useBoundingRect(
   const setDockedHeight = () => {
     if (docked.value) {
       rect.value.top = dragOptions.value.offset.value.top
-      rect.value.height = window.innerHeight - dragOptions.value.offset.value.top - dragOptions.value.offset.value.bottom
+      rect.value.height =
+        window.innerHeight -
+        dragOptions.value.offset.value.top -
+        dragOptions.value.offset.value.bottom
     } else {
       rect.value.top = lastTop.value
       rect.value.height = lastHeight.value

package/src/{composable → composables}/useDrag.ts

@@ -1,11 +1,4 @@
-import {
-  computed,
-  onMounted,
-  onUnmounted,
-  Ref,
-  ref,
-  watch
-} from 'vue'
+import { computed, onMounted, onUnmounted, Ref, ref, watch } from 'vue'
 
 import { Offset, Position } from './types'
 
@@ -14,7 +7,7 @@ import { Offset, Position } from './types'
  */
 export interface DragOptions {
   /**
-   * The minimum distance from the side of the element to the side of the window. If the position of the 
+   * The minimum distance from the side of the element to the side of the window. If the position of the
    * element `targetRef` is located in the specified offset area, just modify its position to not intersect
    * with the offset area.
    */
@@ -45,12 +38,12 @@ export function useDrag(
   // The mouse position when mouse click down
   const mouseStartPos = { x: 0, y: 0 }
   const movement = computed(() => {
-    return (position.value == null || initialPosition.value == null) ?
-      { x: 0, y: 0 } :
-      {
-        x: position.value.x - initialPosition.value.x,
-        y: position.value.y - initialPosition.value.y
-      }
+    return position.value == null || initialPosition.value == null
+      ? { x: 0, y: 0 }
+      : {
+          x: position.value.x - initialPosition.value.x,
+          y: position.value.y - initialPosition.value.y
+        }
   })
 
   const setInitialPosition = () => {
@@ -134,11 +127,11 @@ export function useDrag(
       )
       const distanceToBottomBorder = viewportHeight - elementHeight
       position.value.y = Math.min(
-          options
-            ? distanceToBottomBorder - options.value.offset.value.bottom
-            : distanceToBottomBorder,
-          position.value.y
-        )
+        options
+          ? distanceToBottomBorder - options.value.offset.value.bottom
+          : distanceToBottomBorder,
+        position.value.y
+      )
 
       // Update values of left and top attributes of container element
       element.style.left = position.value.x + 'px'

package/src/{composable → composables}/useDragEx.ts

@@ -23,7 +23,11 @@ export function useDragEx(
 ) {
   const docked = ref<boolean>(false)
   const orientation = ref<Orientation>('left')
-  const { isDragging, movement, position } = useDrag(targetRef, dragElementRef, options)
+  const { isDragging, movement, position } = useDrag(
+    targetRef,
+    dragElementRef,
+    options
+  )
 
   // Watch movement of tool palette to modify `docked` flag and `orientation` flag when the tool palette
   // is on the left/right border of the window

package/src/{composable → composables}/useInitialRect.ts

@@ -23,9 +23,9 @@ export function useInitialRect(
   const setInitialPosition = () => {
     if (!isIntialized && targetRef.value) {
       const rect = targetRef.value.getBoundingClientRect()
-      initialRect.value.left = Math.max(rect.left, offset.value.left) 
-      initialRect.value.top = Math.max(rect.top, offset.value.top) 
-      initialRect.value.width = rect.width 
+      initialRect.value.left = Math.max(rect.left, offset.value.left)
+      initialRect.value.top = Math.max(rect.top, offset.value.top)
+      initialRect.value.width = rect.width
       initialRect.value.height = rect.height
       isIntialized = true
     }

package/src/{composable → composables}/useLastPosAndSize.ts

@@ -40,4 +40,4 @@ export function useLastPosAndSize(
     lastWidth,
     lastHeight
   }
-}
+}

package/src/{composable → composables}/useLeftPosAndWidth.ts

@@ -3,9 +3,9 @@ import { computed, Ref, ref, watch } from 'vue'
 import { Position, Rect } from './types'
 
 /**
- * Get width and left position of tool palette. 
+ * Get width and left position of tool palette.
  * - the left position stored in this function is always the one when the tool palette is expanded.
- * - The width stored in this function will not change after tool palette expanded or collapsed. 
+ * - The width stored in this function will not change after tool palette expanded or collapsed.
  * So tool palette depends on value returned by this function to decide width to expand.
  * @param rect Input reference to current position and size of tool palette
  * @param isResizing Input flag whether the tool palette is resizing
@@ -25,7 +25,7 @@ export function useLeftPosAndWidth(
   const left = ref<number | null | undefined>(rect.value.left)
   const resizeWidth = computed(() => rect.value.width)
   const resizedLeft = computed(() => rect.value.left)
-  const draggedLeft = computed(() => position.value ? position.value.x : null)
+  const draggedLeft = computed(() => (position.value ? position.value.x : null))
 
   watch([resizeWidth, resizedLeft], ([newWidthVal, newLeftVal]) => {
     if (width.value == null || left.value == null) {
@@ -37,11 +37,11 @@ export function useLeftPosAndWidth(
     }
   })
 
-  watch(draggedLeft, (newVal) => {
+  watch(draggedLeft, newVal => {
     if (isDragging.value && position.value) {
       left.value = newVal
     }
   })
 
   return { left, width }
-}
+}

package/src/{composable → composables}/useResize.ts

@@ -1,7 +1,7 @@
 import { onBeforeUnmount, onMounted, Ref, ref, watch } from 'vue'
 
-import { Offset } from './types';
-import { useInitialRect } from './useInitialRect';
+import { Offset } from './types'
+import { useInitialRect } from './useInitialRect'
 
 /**
  * Resize the specified element when moving mouse to its
@@ -25,7 +25,7 @@ export function useResize(
   collapsed: Ref<boolean> = ref(false),
   reverse: Ref<boolean> = ref(false),
   offset: Ref<Offset> = ref({ left: 0, right: 0, top: 0, bottom: 0 }),
-  minSize: { width: number; height: number } = { width: 20, height: 40 },
+  minSize: { width: number; height: number } = { width: 20, height: 40 }
 ) {
   const { initialRect: resizedBoundingRect } = useInitialRect(targetRef, offset)
   const isResizing = ref(false)

package/src/index.ts

@@ -1,9 +1,17 @@
 import MlCollapse from './components/MlCollapse.vue'
 import MlDropdown from './components/MlDropdown.vue'
 import MlLanguage from './components/MlLanguage.vue'
+import MlStatusBar from './components/MlStatusBar.vue'
 import MlToolbar from './components/MlToolbar.vue'
 import MlToolPalette from './components/MlToolPalette.vue'
-export { MlCollapse, MlDropdown, MlLanguage, MlToolbar, MlToolPalette }
+export {
+  MlCollapse,
+  MlDropdown,
+  MlLanguage,
+  MlStatusBar,
+  MlToolbar,
+  MlToolPalette
+}
 export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
 export type { MlButtonData } from './components/MlToolbar.vue'
 
@@ -14,6 +22,7 @@ export default {
     app.component('MlCollapse', MlDropdown)
     app.component('MlDropdown', MlDropdown)
     app.component('MlLanguage', MlLanguage)
+    app.component('MlStatusBar', MlStatusBar)
     app.component('MlToolbar', MlToolbar)
     app.component('MlToolPalette', MlToolPalette)
   }

package/lib/MlDropdown.vue.d.ts

@@ -1,59 +0,0 @@
-/**
- * Data to descibe dropdown menu item
- */
-export interface MlDropdownMenuItem {
-    /**
-     * Key of the dropdown menu item
-     */
-    name: string;
-    /**
-     * Text shown in dropdown menu item
-     */
-    text: string;
-}
-/**
- * Properties of MlDropdown component
- */
-interface Props {
-    /**
-     * Dropdown icon represented by one SVG string
-     */
-    icon: string;
-    /**
-     * An array of avaiable language
-     */
-    items: MlDropdownMenuItem[];
-    /**
-     * Key of the current selected dropdown menu item
-     */
-    current?: string;
-}
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    current: undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<Props>, {
-    current: undefined;
-}>>> & {
-    onClick?: ((...args: any[]) => any) | undefined;
-}, {
-    current: string;
-}, {}>;
-export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

package/lib/MlDropdown.vue.js

@@ -1,106 +0,0 @@
-import { computed } from 'vue';
-let __VLS_typeProps;
-const props = withDefaults(defineProps(), {
-    current: undefined
-});
-const emit = defineEmits({
-    click: null
-});
-// Filter out the current item
-const filteredItems = computed(() => {
-    return props.items.filter(item => item.name !== props.current);
-});
-const handleCommand = (command) => {
-    emit('click', command);
-};
-const __VLS_withDefaultsArg = (function (t) { return t; })({
-    current: undefined
-});
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    emits: {},
-});
-;
-let __VLS_functionalComponentProps;
-const __VLS_ctxBase = {};
-const __VLS_ctx = __VLS_ctxBase;
-let __VLS_name;
-const __VLS_localComponents = {
-    ...{},
-    ...{},
-    ...__VLS_ctxBase,
-};
-let __VLS_components;
-let __VLS_styleScopedClasses;
-__VLS_styleScopedClasses['ml-dropdown-icon'];
-// CSS variable injection 
-// CSS variable injection end 
-let __VLS_resolvedLocalAndGlobalComponents;
-const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.ElDropdown;
-/** @type { [typeof __VLS_components.ElDropdown, typeof __VLS_components.elDropdown, typeof __VLS_components.ElDropdown, typeof __VLS_components.elDropdown, ] } */
-// @ts-ignore
-const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onCommand': {} }, }));
-const __VLS_2 = __VLS_1({ ...{ 'onCommand': {} }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
-let __VLS_6;
-const __VLS_7 = {
-    onCommand: (__VLS_ctx.handleCommand)
-};
-let __VLS_3;
-let __VLS_4;
-const __VLS_8 = __VLS_resolvedLocalAndGlobalComponents.ElIcon;
-/** @type { [typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ] } */
-// @ts-ignore
-const __VLS_9 = __VLS_asFunctionalComponent(__VLS_8, new __VLS_8({ size: ("30"), ...{ class: ("ml-dropdown-icon") }, }));
-const __VLS_10 = __VLS_9({ size: ("30"), ...{ class: ("ml-dropdown-icon") }, }, ...__VLS_functionalComponentArgsRest(__VLS_9));
-__VLS_elementAsFunction(__VLS_intrinsicElements.svg, __VLS_intrinsicElements.svg)({ preserveAspectRatio: ("xMidYMid meet"), viewBox: ("0 0 24 24"), width: ("1.2em"), height: ("1.2em"), "data-v-63d067da": (""), });
-__VLS_elementAsFunction(__VLS_intrinsicElements.path, __VLS_intrinsicElements.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"), });
-__VLS_nonNullable(__VLS_13.slots).default;
-const __VLS_13 = __VLS_pickFunctionalComponentCtx(__VLS_8, __VLS_10);
-__VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-{
-    const { dropdown: __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
-    const __VLS_14 = __VLS_resolvedLocalAndGlobalComponents.ElDropdownMenu;
-    /** @type { [typeof __VLS_components.ElDropdownMenu, typeof __VLS_components.elDropdownMenu, typeof __VLS_components.ElDropdownMenu, typeof __VLS_components.elDropdownMenu, ] } */
-    // @ts-ignore
-    const __VLS_15 = __VLS_asFunctionalComponent(__VLS_14, new __VLS_14({}));
-    const __VLS_16 = __VLS_15({}, ...__VLS_functionalComponentArgsRest(__VLS_15));
-    for (const [item] of __VLS_getVForSourceType((__VLS_ctx.filteredItems))) {
-        const __VLS_20 = __VLS_resolvedLocalAndGlobalComponents.ElDropdownItem;
-        /** @type { [typeof __VLS_components.ElDropdownItem, typeof __VLS_components.elDropdownItem, typeof __VLS_components.ElDropdownItem, typeof __VLS_components.elDropdownItem, ] } */
-        // @ts-ignore
-        const __VLS_21 = __VLS_asFunctionalComponent(__VLS_20, new __VLS_20({ key: ((item.text)), command: ((item.name)), }));
-        const __VLS_22 = __VLS_21({ key: ((item.text)), command: ((item.name)), }, ...__VLS_functionalComponentArgsRest(__VLS_21));
-        (item.text);
-        __VLS_nonNullable(__VLS_25.slots).default;
-        const __VLS_25 = __VLS_pickFunctionalComponentCtx(__VLS_20, __VLS_22);
-    }
-    __VLS_nonNullable(__VLS_19.slots).default;
-    const __VLS_19 = __VLS_pickFunctionalComponentCtx(__VLS_14, __VLS_16);
-}
-const __VLS_5 = __VLS_pickFunctionalComponentCtx(__VLS_0, __VLS_2);
-__VLS_styleScopedClasses['ml-dropdown-icon'];
-var __VLS_slots;
-var __VLS_inheritedAttrs;
-const __VLS_refs = {};
-const __VLS_templateResult = { slots: __VLS_slots,
-    refs: $refs,
-    attrs: {},
-};
-const __VLS_internalComponent = (await import('vue')).defineComponent({
-    setup() {
-        return {
-            filteredItems: filteredItems,
-            handleCommand: handleCommand,
-        };
-    },
-    emits: {},
-    props: {},
-});
-export default (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    emits: {},
-    props: {},
-});
-;
-//# sourceMappingURL=MlDropdown.vue.js.map