@mlightcad/ui-components 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui-components.es.js +358 -300
- package/dist/ui-components.umd.js +2 -2
- package/lib/index.d.ts +1 -0
- package/package.json +3 -3
- package/src/components/MlToolBar.vue +2 -0
- package/src/components/MlToolPalette.vue +158 -4
- package/src/index.ts +1 -0
- package/README.md +0 -188
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(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-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.ml-vertical-toolbar-button-group[data-v-
|
|
2
|
-
(function(B,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")):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"],y):(B=typeof globalThis<"u"?globalThis:B||self,y(B.UIComponents={},B.es,null,null,B.Vue))})(this,function(B,y,fe,ve,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,i){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,i){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:i}){const o=t,s=e.useModel(t,"modelValue"),l=i,n=e.computed(()=>o.reverse?s.value?V:$:s.value?$:V),a=e.computed(()=>`${o.size}px`),h=()=>{l("change",s.value),s.value=!s.value};return(c,r)=>{const d=y.ElIcon;return e.openBlock(),e.createBlock(d,{size:a.value,onClick:h},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.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:i}){const o=t,s=i,l=e.computed(()=>o.items.filter(a=>a.name!==o.current)),n=a=>{s("click",a)};return(a,h)=>{const c=y.ElIcon,r=y.ElDropdownItem,d=y.ElDropdownMenu,v=y.ElDropdown;return e.openBlock(),e.createBlock(v,{onCommand:n},{dropdown:e.withCtx(()=>[e.createVNode(d,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(()=>[j]),_:1})]),_:1})}}}),z=(t,i)=>{const o=t.__vccOpts||t;for(const[s,l]of i)o[s]=l;return o},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:i}){const o=t,s=i,l=n=>{s("click",n)};return(n,a)=>(e.openBlock(),e.createBlock(T,{icon:J,items:o.languages,current:o.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,i){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:i}){e.useCssVars(r=>({"0547f26d":a.value}));const o=t,s=e.useModel(t,"modelValue"),l=i,n=e.computed(()=>s.value?o.data.onIcon:o.data.offIcon),a=e.computed(()=>o.size+"px"),h=e.computed(()=>s.value?o.data.onTooltip:o.data.offTooltip),c=()=>{s.value=!s.value,l("click",s.value)};return(r,d)=>{const v=y.ElButton,u=y.ElTooltip;return e.openBlock(),e.createBlock(u,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(v,{class:"ml-toggle-button",icon:n.value,onClick:c},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-b676e93b"]]),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:i}){const o=t,s=i,l=e.computed(()=>o.direction==="vertical"?"ml-vertical-toolbar-button-group":"ml-horizontal-toolbar-button-group"),n=e.computed(()=>o.size==="small"?20:30),a=e.computed(()=>{switch(o.size){case"small":return 30;case"medium":return 50}return 70}),h=d=>d.description?d.description:d.text,c=e.computed(()=>o.size==="large"),r=d=>{s("click",d)};return(d,v)=>{const u=y.ElIcon,p=y.ElButton,m=y.ElTooltip,f=y.ElButtonGroup;return e.openBlock(),e.createBlock(f,{class:e.normalizeClass(l.value)},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.items,(g,E)=>(e.openBlock(),e.createBlock(m,{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:E,onClick:k=>r(g.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(u,{size:n.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.icon)))]),_:2},1032,["size"]),c.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(g.text),1)):e.createCommentVNode("",!0)])]),_:2},1032,["style","onClick"]))]),_:2},1032,["content"]))),128))]),_:1},8,["class"])}}}),[["__scopeId","data-v-5261c686"]]),O=20;function te(t,i,o){const s=e.ref(!1),l=c=>{if(o.value&&t.value){const r=t.value.getBoundingClientRect(),d=c.clientX<r.left||c.clientX>r.right||c.clientY<r.top||c.clientY>r.bottom;s.value=!d}},n=()=>{o.value&&(s.value=!0)},a=()=>{i.value&&i.value.addEventListener("mousemove",n),t.value&&t.value.addEventListener("mousemove",n)},h=()=>{i.value&&i.value.removeEventListener("mousemove",n),t.value&&t.value.removeEventListener("mousemove",n)};return e.onMounted(()=>{window.addEventListener("mousemove",l)}),e.onUnmounted(()=>{window.removeEventListener("mousemove",l)}),e.watch(o,c=>{c&&(s.value=!1)}),e.watch(t,c=>{c?a():h()}),{autoOpened:s}}function oe(t,i,o){const s=e.ref(!1),l=e.ref(null),n=e.ref(null),a={x:0,y:0},h=e.computed(()=>l.value==null||n.value==null?{x:0,y:0}:{x:l.value.x-n.value.x,y:l.value.y-n.value.y}),c=()=>{if(t.value){const m=t.value.getBoundingClientRect();n.value={x:m.left,y:m.top},l.value={x:m.left,y:m.top}}},r=()=>{t.value&&t.value.addEventListener("mousedown",v)},d=()=>{t.value&&t.value.removeEventListener("mousedown",v)},v=m=>{if(t.value!=null){if(i&&i.value){const f=i.value.getBoundingClientRect();if(m.clientX<f.left||m.clientX>f.right||m.clientY<f.top||m.clientY>f.bottom)return}s.value=!0,a.x=m.clientX,a.y=m.clientY,c(),document.addEventListener("mousemove",u),document.addEventListener("mouseup",p)}},u=m=>{if(s.value&&n.value&&l.value){const f=window.innerWidth,g=window.innerHeight,E=t.value,k=E.getBoundingClientRect(),x=k.width,w=k.height,b=n.value.x+(m.clientX-a.x),M=n.value.y+(m.clientY-a.y);l.value.x=Math.max(o?o.value.offset.value.left:0,b);const _=f-x;l.value.x=Math.min(o?_-o.value.offset.value.right:_,l.value.x),l.value.y=Math.max(o?o.value.offset.value.top:0,Math.min(M,g-w));const L=g-w;l.value.y=Math.min(o?L-o.value.offset.value.bottom:L,l.value.y),E.style.left=l.value.x+"px",E.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",v)}),e.watch(t,m=>{m?(c(),r()):d()}),{isDragging:s,movement:h,position:l}}function ne(t,i,o){const s=e.ref(!1),l=e.ref("left"),{isDragging:n,movement:a,position:h}=oe(t,i,o);return e.watch(a,c=>{if(c&&t.value){const d=t.value.getBoundingClientRect();d.left<=o.value.offset.value.left?(l.value="left",s.value=!0):window.innerWidth-d.left-d.width<=o.value.offset.value.right?(l.value="right",s.value=!0):s.value=!1}}),{docked:s,orientation:l,isDragging:n,movement:a,position:h}}function le(t,i,o,s){const l=e.ref(null),n=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)=>{n.value=r}),e.watch(o,(c,r)=>{a.value=r}),e.watch(s,(c,r)=>{h.value=r}),{lastLeft:l,lastTop:n,lastWidth:a,lastHeight:h}}function se(t,i,o,s){const l=e.ref(t.value.width),n=e.ref(t.value.left),a=e.computed(()=>t.value.width),h=e.computed(()=>t.value.left),c=e.computed(()=>o.value?o.value.x:null);return e.watch([a,h],([r,d])=>{(l.value==null||n.value==null||i.value)&&(l.value=r,n.value=d)}),e.watch(c,r=>{s.value&&o.value&&(n.value=r)}),{left:n,width:l}}function ie(t,i=e.ref({left:0,right:0,top:0,bottom:0})){const o=e.ref({});let s=!1;const l=()=>{if(!s&&t.value){const n=t.value.getBoundingClientRect();o.value.left=Math.max(n.left,i.value.left),o.value.top=Math.max(n.top,i.value.top),o.value.width=n.width,o.value.height=n.height,s=!0}};return e.onMounted(()=>{t.value&&l()}),e.watch(t,n=>{n&&l()}),{isIntialized:s,initialRect:o}}function ce(t,i=e.ref(!1),o=e.ref(!1),s=e.ref({left:0,right:0,top:0,bottom:0}),l={width:20,height:40}){const{initialRect:n}=ie(t,s),a=e.ref(!1);let h=0,c=0,r=0,d=0,v=0;const u=5,p=e.ref(null),m=x=>{if(!(!t.value||i.value))if(a.value){const w=x.clientX-d,b=x.clientY-v;if(p.value==="left"||p.value==="left-bottom-corner"){const M=c-w;M>l.width&&(n.value.width=M,n.value.left=h+w,t.value.style.left=n.value.left+"px",t.value.style.width=n.value.width+"px")}if(p.value==="right"||p.value==="right-bottom-corner"){const M=c+w;M>l.width&&(n.value.width=M,t.value.style.width=n.value.width+"px")}if(p.value==="bottom"||p.value==="left-bottom-corner"||p.value==="right-bottom-corner"){const M=r+b;M>l.height&&(n.value.height=M,t.value.style.height=n.value.height+"px")}}else{const w=t.value.getBoundingClientRect(),b=x.clientX-w.left,M=x.clientY-w.top,_=b<=u,L=b>=w.width-u,C=M>=w.height-u;_&&C&&o.value?(t.value.style.cursor="nesw-resize",p.value="left-bottom-corner"):L&&C&&!o.value?(t.value.style.cursor="nwse-resize",p.value="right-bottom-corner"):_&&o.value?(t.value.style.cursor="ew-resize",p.value="left"):L&&!o.value?(t.value.style.cursor="ew-resize",p.value="right"):C?(t.value.style.cursor="ns-resize",p.value="bottom"):(t.value.style.cursor="",p.value=null)}},f=x=>{if(!t.value||!p.value)return;const w=t.value.getBoundingClientRect();d=x.clientX,v=x.clientY,c=w.width,r=w.height,h=w.left,n.value.width=c,n.value.height=r,n.value.left=w.left,n.value.top=w.top,a.value=!0,document.addEventListener("mousemove",m),document.addEventListener("mouseup",g)},g=()=>{a.value=!1,p.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",g)},E=()=>{t.value&&(t.value.removeEventListener("mousedown",f),t.value.removeEventListener("mousemove",m)),document.removeEventListener("mouseup",g)},k=()=>{t.value&&(t.value.addEventListener("mousedown",f),t.value.addEventListener("mousemove",m))};return e.onMounted(()=>{t.value&&k()}),e.onBeforeUnmount(()=>{E()}),e.watch(t,x=>{x?k():E()}),{rect:n,isResizing:a}}function ae(t,i,o,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"}},n=()=>{t.value&&(t.value.style.transition="")},a=()=>{t.value&&t.value.removeEventListener("transitionend",n)},h=()=>{t.value&&t.value.addEventListener("transitionend",n)};e.onMounted(()=>{t.value&&t.value.addEventListener("transitionend",n)}),e.onBeforeUnmount(()=>{t.value&&t.value.removeEventListener("transitionend",n)}),e.watch(t,c=>{c?h():a()}),e.watch(o,()=>{l()}),e.watch(s,()=>{l()})}function re(t,i,o,s){const l=e.ref(window.innerWidth),n=e.ref(window.innerHeight),{docked:a,orientation:h,movement:c,position:r,isDragging:d}=ne(t,i,s),v=e.computed(()=>h.value==="right"),{rect:u,isResizing:p}=ce(t,o,v,s.value.offset),{width:m,left:f}=se(u,p,r,d),{lastTop:g,lastHeight:E}=le(e.computed(()=>u.value.left),e.computed(()=>u.value.top),e.computed(()=>u.value.width),e.computed(()=>u.value.height)),{autoOpened:k}=te(t,i,o);ae(t,v,o,k);const x=_=>{if(t.value){const L=t.value.getBoundingClientRect(),C=L.left+_;if(v.value){u.value.left=C;const pe=window.innerWidth-L.width-L.left;L.left<=0&&pe>=0&&_<0&&(u.value.left=Math.max(0,C)),window.innerWidth-L.width<=0&&(u.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&_<0&&(u.value.left=Math.max(0,C))}},w=()=>{const _=window.innerWidth-l.value;l.value=window.innerWidth,n.value=window.innerHeight,x(_)};e.onMounted(()=>{window.addEventListener("resize",w)}),e.onUnmounted(()=>{window.removeEventListener("resize",w)});const b=_=>{_?(u.value.width=O,v.value&&f.value&&m.value&&(u.value.left=f.value+m.value-O)):(u.value.width=m.value,v.value&&f.value&&m.value&&(u.value.left=f.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=E.value)};return e.watch(a,()=>{M()}),e.watch(o,_=>{b(_)}),e.watch(k,_=>{o.value&&!d.value&&b(!_)}),e.watch(c,_=>{if(_&&t.value){const C=t.value.getBoundingClientRect();u.value.left=C.left,u.value.top=C.top}}),{rect:u,orientation:h,reversed:v}}const ue=(t=>(e.pushScopeId("data-v-8645db4f"),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)),de={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},Y=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 o=t,s=e.useModel(t,"modelValue"),l=i,n=e.ref(!1),a=e.ref(null),h=e.ref(null),c=e.computed(()=>({offset:e.ref({left:o.leftOffset,right:o.rightOffset,top:o.topOffset,bottom:o.bottomOffset})})),{rect:r,orientation:d,reversed:v}=re(h,a,n,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=e.computed(()=>v.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),m=()=>{s.value=!1;const f=h.value;l("close",{x:f?f.clientLeft:0,y:f?f.clientTop:0})};return(f,g)=>{const E=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(d)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(p.value)},[e.createVNode(E,{size:18,class:"ml-tool-palette-dialog-icon",onClick:m},{default:e.withCtx(()=>[ue]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:n.value,"onUpdate:modelValue":g[0]||(g[0]=k=>n.value=k),reverse:e.unref(v)},null,8,["modelValue","reverse"]),e.createElementVNode("span",de,e.toDisplayString(o.title),1)],4),e.createElementVNode("div",me,[e.renderSlot(f.$slots,"default",{},void 0,!0)])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-8645db4f"]]),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)}};B.MlCollapse=I,B.MlDropdown=T,B.MlLanguage=S,B.MlStatusBar=N,B.MlToggleButton=W,B.MlToolBar=D,B.MlToolPalette=Y,B.default=he,Object.defineProperties(B,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(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-b676e93b]{border:none;padding:0;cursor:pointer;width:var(--0547f26d);height:var(--0547f26d)}.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-43098ce9]{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-dialog-icon[data-v-43098ce9]{border-bottom:1px solid var(--el-border-color);cursor:default}.ml-tool-palette-dialog-icon[data-v-43098ce9]:hover{color:var(--el-color-primary)}.ml-tool-palette-dialog-layout[data-v-43098ce9]{display:flex;height:100%}.ml-tool-palette-title-bar[data-v-43098ce9]{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-43098ce9]{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-43098ce9]{-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-43098ce9]{display:flex;flex-direction:column;height:100%;flex:1}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs{display:flex;flex-direction:column;height:100%}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs__header{margin:0;border-bottom:none;order:1;flex-shrink:0;position:relative}.ml-tool-palette-tabs[data-v-43098ce9] .el-tabs__content{flex:1;overflow:auto;padding:0;order:2;min-height:0;position:relative}.ml-tool-palette-tabs[data-v-43098ce9] .el-tab-pane{height:100%;overflow:auto}.ml-tool-palette-default-content[data-v-43098ce9]{flex:1;overflow:auto;display:flex;flex-direction:column}.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar[data-v-43098ce9]{order:1}.ml-tool-palette-dialog-layout.left .ml-tool-palette-content[data-v-43098ce9],.ml-tool-palette-dialog-layout.right .ml-tool-palette-title-bar[data-v-43098ce9]{order:2}.ml-tool-palette-dialog-layout.right .ml-tool-palette-content[data-v-43098ce9]{order:1}")),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
|
|
2
|
+
(function(M,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):(M=typeof globalThis<"u"?globalThis:M||self,y(M.UIComponents={},M.es,null,null,M.Vue))})(this,function(M,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(a,u)=>{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 a=y.ElIcon,u=y.ElDropdownItem,m=y.ElDropdownMenu,v=y.ElDropdown;return e.openBlock(),e.createBlock(v,{onCommand:o},{dropdown:e.withCtx(()=>[e.createVNode(m,null,{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.value,d=>(e.openBlock(),e.createBlock(u,{key:d.text,command:d.name},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d.text),1)]),_:2},1032,["command"]))),128))]),_:1})]),default:e.withCtx(()=>[e.createVNode(a,{size:"30",class:"ml-dropdown-icon"},{default:e.withCtx(()=>[j]),_:1})]),_:1})}}}),T=(t,c)=>{const n=t.__vccOpts||t;for(const[s,l]of c)n[s]=l;return n},z=T(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(z,{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 D=T(K,[["render",R],["__scopeId","data-v-d6a59cf0"]]),N=T(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(u=>({"0547f26d":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),a=()=>{s.value=!s.value,l("click",s.value)};return(u,m)=>{const v=y.ElButton,d=y.ElTooltip;return e.openBlock(),e.createBlock(d,{content:h.value,"hide-after":0},{default:e.withCtx(()=>[e.createVNode(v,{class:"ml-toggle-button",icon:o.value,onClick:a},null,8,["icon"])]),_:1},8,["content"])}}}),[["__scopeId","data-v-b676e93b"]]),ee={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: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,a=e.computed(()=>n.size==="large"),u=m=>{s("click",m)};return(m,v)=>{const d=y.ElIcon,f=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,(x,E)=>(e.openBlock(),e.createBlock(p,{key:x.text,content:h(x),"hide-after":0},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(f,{class:"ml-toolbar-button",style:e.normalizeStyle({width:r.value+"px",height:r.value+"px"}),key:E,onClick:C=>u(x.command)},{default:e.withCtx(()=>[e.createElementVNode("div",null,[e.createVNode(d,{size:o.value},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(x.icon)))]),_:2},1032,["size"]),a.value?(e.openBlock(),e.createElementBlock("div",ee,e.toDisplayString(x.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=a=>{if(n.value&&t.value){const u=t.value.getBoundingClientRect(),m=a.clientX<u.left||a.clientX>u.right||a.clientY<u.top||a.clientY>u.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,a=>{a&&(s.value=!1)}),e.watch(t,a=>{a?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}),a=()=>{if(t.value){const p=t.value.getBoundingClientRect();o.value={x:p.left,y:p.top},l.value={x:p.left,y:p.top}}},u=()=>{t.value&&t.value.addEventListener("mousedown",v)},m=()=>{t.value&&t.value.removeEventListener("mousedown",v)},v=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,a(),document.addEventListener("mousemove",d),document.addEventListener("mouseup",f)}},d=p=>{if(s.value&&o.value&&l.value){const B=window.innerWidth,x=window.innerHeight,E=t.value,C=E.getBoundingClientRect(),k=C.width,i=C.height,g=o.value.x+(p.clientX-r.x),w=o.value.y+(p.clientY-r.y);l.value.x=Math.max(n?n.value.offset.value.left:0,g);const _=B-k;l.value.x=Math.min(n?_-n.value.offset.value.right:_,l.value.x),l.value.y=Math.max(n?n.value.offset.value.top:0,Math.min(w,x-i));const L=x-i;l.value.y=Math.min(n?L-n.value.offset.value.bottom:L,l.value.y),E.style.left=l.value.x+"px",E.style.top=l.value.y+"px"}},f=()=>{s.value=!1,document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",f)};return e.onMounted(()=>{t.value&&(a(),u())}),e.onUnmounted(()=>{t.value&&t.value.removeEventListener("mousedown",v)}),e.watch(t,p=>{p?(a(),u()):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,a=>{if(a&&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,(a,u)=>{l.value=u}),e.watch(c,(a,u)=>{o.value=u}),e.watch(n,(a,u)=>{r.value=u}),e.watch(s,(a,u)=>{h.value=u}),{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),a=e.computed(()=>n.value?n.value.x:null);return e.watch([r,h],([u,m])=>{(l.value==null||o.value==null||c.value)&&(l.value=u,o.value=m)}),e.watch(a,u=>{s.value&&n.value&&(o.value=u)}),{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,a=0,u=0,m=0,v=0;const d=5,f=e.ref(null),p=k=>{if(!(!t.value||c.value))if(r.value){const i=k.clientX-m,g=k.clientY-v;if(f.value==="left"||f.value==="left-bottom-corner"){const w=a-i;w>l.width&&(o.value.width=w,o.value.left=h+i,t.value.style.left=o.value.left+"px",t.value.style.width=o.value.width+"px")}if(f.value==="right"||f.value==="right-bottom-corner"){const w=a+i;w>l.width&&(o.value.width=w,t.value.style.width=o.value.width+"px")}if(f.value==="bottom"||f.value==="left-bottom-corner"||f.value==="right-bottom-corner"){const w=u+g;w>l.height&&(o.value.height=w,t.value.style.height=o.value.height+"px")}}else{const i=t.value.getBoundingClientRect(),g=k.clientX-i.left,w=k.clientY-i.top,_=g<=d,L=g>=i.width-d,b=w>=i.height-d;_&&b&&n.value?(t.value.style.cursor="nesw-resize",f.value="left-bottom-corner"):L&&b&&!n.value?(t.value.style.cursor="nwse-resize",f.value="right-bottom-corner"):_&&n.value?(t.value.style.cursor="ew-resize",f.value="left"):L&&!n.value?(t.value.style.cursor="ew-resize",f.value="right"):b?(t.value.style.cursor="ns-resize",f.value="bottom"):(t.value.style.cursor="",f.value=null)}},B=k=>{if(!t.value||!f.value)return;const i=t.value.getBoundingClientRect();m=k.clientX,v=k.clientY,a=i.width,u=i.height,h=i.left,o.value.width=a,o.value.height=u,o.value.left=i.left,o.value.top=i.top,r.value=!0,document.addEventListener("mousemove",p),document.addEventListener("mouseup",x)},x=()=>{r.value=!1,f.value=null,t.value&&(t.value.style.cursor=""),document.removeEventListener("mousemove",p),document.removeEventListener("mouseup",x)},E=()=>{t.value&&(t.value.removeEventListener("mousedown",B),t.value.removeEventListener("mousemove",p)),document.removeEventListener("mouseup",x)},C=()=>{t.value&&(t.value.addEventListener("mousedown",B),t.value.addEventListener("mousemove",p))};return e.onMounted(()=>{t.value&&C()}),e.onBeforeUnmount(()=>{E()}),e.watch(t,k=>{k?C():E()}),{rect:o,isResizing:r}}function ce(t,c,n,s){const l=()=>{if(t.value){const a=t.value;c.value?a.style.transition="width 0.3s ease-out, left 0.3s ease-out":a.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,a=>{a?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:a,position:u,isDragging:m}=oe(t,c,s),v=e.computed(()=>h.value==="right"),{rect:d,isResizing:f}=ie(t,n,v,s.value.offset),{width:p,left:B}=se(d,f,u,m),{lastTop:x,lastHeight:E}=le(e.computed(()=>d.value.left),e.computed(()=>d.value.top),e.computed(()=>d.value.width),e.computed(()=>d.value.height)),{autoOpened:C}=te(t,c,n);ce(t,v,n,C);const k=_=>{if(t.value){const L=t.value.getBoundingClientRect(),b=L.left+_;if(v.value){d.value.left=b;const fe=window.innerWidth-L.width-L.left;L.left<=0&&fe>=0&&_<0&&(d.value.left=Math.max(0,b)),window.innerWidth-L.width<=0&&(d.value.left=window.innerWidth-L.width)}else L.left+L.width>=window.innerWidth&&_<0&&(d.value.left=Math.max(0,b))}},i=()=>{const _=window.innerWidth-l.value;l.value=window.innerWidth,o.value=window.innerHeight,k(_)};e.onMounted(()=>{window.addEventListener("resize",i)}),e.onUnmounted(()=>{window.removeEventListener("resize",i)});const g=_=>{_?(d.value.width=O,v.value&&B.value&&p.value&&(d.value.left=B.value+p.value-O)):(d.value.width=p.value,v.value&&B.value&&p.value&&(d.value.left=B.value))},w=()=>{r.value?(d.value.top=s.value.offset.value.top,d.value.height=window.innerHeight-s.value.offset.value.top-s.value.offset.value.bottom):(d.value.top=x.value,d.value.height=E.value)};return e.watch(r,()=>{w()}),e.watch(n,_=>{g(_)}),e.watch(C,_=>{n.value&&!m.value&&g(!_)}),e.watch(a,_=>{if(_&&t.value){const b=t.value.getBoundingClientRect();d.value.left=b.left,d.value.top=b.top}}),{rect:d,orientation:h,reversed:v}}const ue=(t=>(e.pushScopeId("data-v-43098ce9"),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)),de={class:"ml-tool-palette-title"},me={class:"ml-tool-palette-content"},pe={key:1,class:"ml-tool-palette-default-content"},Y=T(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}},{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,i=>{i&&i.length>0&&!l.value&&(l.value=i[0].name)},{immediate:!0});const h=e.ref(!1),a=e.ref(null),u=e.ref(null),m=e.computed(()=>({offset:e.ref({left:n.leftOffset,right:n.rightOffset,top:n.topOffset,bottom:n.bottomOffset})})),{rect:v,orientation:d,reversed:f}=re(u,a,h,m),p=e.computed(()=>({left:`${v.value.left}px`,top:`${v.value.top}px`,width:`${v.value.width}px`,height:`${v.value.height}px`})),B=e.computed(()=>f.value?{borderLeft:"1px solid var(--el-border-color)",borderRight:null}:{borderLeft:null,borderRight:"1px solid var(--el-border-color)"}),x=e.computed(()=>{if(r.value&&l.value&&n.tabs){const i=n.tabs.find(g=>g.name===l.value);if(i&&i.title)return i.title}return n.title}),E=()=>{s.value=!1;const i=u.value;o("close",{x:i?i.clientLeft:0,y:i?i.clientTop:0})},C=i=>{o("tab-change",i)},k=i=>{if(o("tab-close",i),l.value===i&&n.tabs){const g=n.tabs.findIndex(w=>w.name===i);if(g>=0){const w=n.tabs[g+1]||n.tabs[g-1];w&&(l.value=w.name)}}};return(i,g)=>{const w=y.ElIcon,_=y.ElTabPane,L=y.ElTabs;return s.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"toolPaletteElement",ref:u,style:e.normalizeStyle([p.value]),class:"ml-tool-palette-dialog"},[e.createElementVNode("div",{class:e.normalizeClass(["ml-tool-palette-dialog-layout",e.unref(d)])},[e.createElementVNode("div",{ref_key:"titleBarElement",ref:a,class:"ml-tool-palette-title-bar",style:e.normalizeStyle(B.value)},[e.createVNode(w,{size:18,class:"ml-tool-palette-dialog-icon",onClick:E},{default:e.withCtx(()=>[ue]),_:1}),e.createVNode(I,{class:"ml-tool-palette-dialog-icon",modelValue:h.value,"onUpdate:modelValue":g[0]||(g[0]=b=>h.value=b),reverse:e.unref(f)},null,8,["modelValue","reverse"]),e.createElementVNode("span",de,e.toDisplayString(x.value),1)],4),e.createElementVNode("div",me,[r.value?(e.openBlock(),e.createBlock(L,{key:0,modelValue:l.value,"onUpdate:modelValue":g[1]||(g[1]=b=>l.value=b),type:"border-card",class:"ml-tool-palette-tabs",onTabRemove:k,onTabChange:C},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.tabs,b=>(e.openBlock(),e.createBlock(_,{key:b.name,name:b.name,label:b.label},{label:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(b.label),1)]),default:e.withCtx(()=>[e.renderSlot(i.$slots,`tab-${b.name}`,{},void 0,!0)]),_:2},1032,["name","label"]))),128))]),_:3},8,["modelValue"])):(e.openBlock(),e.createElementBlock("div",pe,[e.renderSlot(i.$slots,"default",{},void 0,!0)]))])],2)],4)):e.createCommentVNode("",!0)}}}),[["__scopeId","data-v-43098ce9"]]),he={install(t){t.component("MlCollapse",z),t.component("MlDropdown",z),t.component("MlLanguage",S),t.component("MlStatusBar",D),t.component("MlToggleButton",N),t.component("MlToolBar",W),t.component("MlToolPalette",Y)}};M.MlCollapse=I,M.MlDropdown=z,M.MlLanguage=S,M.MlStatusBar=D,M.MlToggleButton=N,M.MlToolBar=W,M.MlToolPalette=Y,M.default=he,Object.defineProperties(M,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/lib/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export { MlCollapse, MlDropdown, MlLanguage, MlStatusBar, MlToggleButton, MlTool
|
|
|
9
9
|
export type { MlDropdownMenuItem } from './components/MlDropdown.vue';
|
|
10
10
|
export type { MlToggleButtonData } from './components/MlToggleButton.vue';
|
|
11
11
|
export type { MlButtonData } from './components/MlToolBar.vue';
|
|
12
|
+
export type { MlToolPaletteTab } from './components/MlToolPalette.vue';
|
|
12
13
|
export * from './components/types';
|
|
13
14
|
declare const _default: {
|
|
14
15
|
install(app: any): void;
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mlightcad/ui-components",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "One common UI component library based on Element Plus",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "One common UI component library based on Element Plus for web-based CAD",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "MLight Lee <mlight.lee@outlook.com>",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "
|
|
9
|
+
"url": "https://gitlab.com/mlightcad/ui-components"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
12
12
|
"ui",
|
|
@@ -121,11 +121,13 @@ const handleCommand = (command: string) => {
|
|
|
121
121
|
.ml-vertical-toolbar-button-group {
|
|
122
122
|
display: flex;
|
|
123
123
|
flex-direction: column;
|
|
124
|
+
background-color: var(--el-fill-color);
|
|
124
125
|
}
|
|
125
126
|
|
|
126
127
|
.ml-horizontal-toolbar-button-group {
|
|
127
128
|
display: flex;
|
|
128
129
|
flex-direction: row;
|
|
130
|
+
background-color: var(--el-fill-color);
|
|
129
131
|
}
|
|
130
132
|
|
|
131
133
|
.ml-toolbar-button {
|
|
@@ -29,23 +29,63 @@
|
|
|
29
29
|
v-model="collapsed"
|
|
30
30
|
:reverse="reversed"
|
|
31
31
|
/>
|
|
32
|
-
<span class="ml-tool-palette-title">{{
|
|
32
|
+
<span class="ml-tool-palette-title">{{ displayedTitle }}</span>
|
|
33
33
|
</div>
|
|
34
34
|
<div class="ml-tool-palette-content">
|
|
35
|
-
<
|
|
35
|
+
<el-tabs
|
|
36
|
+
v-if="hasTabs"
|
|
37
|
+
v-model="activeTab"
|
|
38
|
+
type="border-card"
|
|
39
|
+
class="ml-tool-palette-tabs"
|
|
40
|
+
@tab-remove="handleTabClose"
|
|
41
|
+
@tab-change="handleTabChange"
|
|
42
|
+
>
|
|
43
|
+
<el-tab-pane
|
|
44
|
+
v-for="tab in props.tabs"
|
|
45
|
+
:key="tab.name"
|
|
46
|
+
:name="tab.name"
|
|
47
|
+
:label="tab.label"
|
|
48
|
+
>
|
|
49
|
+
<template #label>
|
|
50
|
+
<span>{{ tab.label }}</span>
|
|
51
|
+
</template>
|
|
52
|
+
<slot :name="`tab-${tab.name}`" />
|
|
53
|
+
</el-tab-pane>
|
|
54
|
+
</el-tabs>
|
|
55
|
+
<div v-else class="ml-tool-palette-default-content">
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</div>
|
|
36
58
|
</div>
|
|
37
59
|
</div>
|
|
38
60
|
</div>
|
|
39
61
|
</template>
|
|
40
62
|
|
|
41
63
|
<script lang="ts" setup>
|
|
42
|
-
import { computed, ref } from 'vue'
|
|
64
|
+
import { computed, onMounted, ref, watch } from 'vue'
|
|
43
65
|
|
|
44
66
|
import { WIDTH_OF_TITLE_BAR } from '../composables/types'
|
|
45
67
|
import { useBoundingRect } from '../composables/useBoundingRect'
|
|
46
68
|
import { DragOptions } from '../composables/useDrag'
|
|
47
69
|
import MlCollapse from './MlCollapse.vue'
|
|
48
70
|
|
|
71
|
+
/**
|
|
72
|
+
* Tab definition for tool palette
|
|
73
|
+
*/
|
|
74
|
+
export interface MlToolPaletteTab {
|
|
75
|
+
/**
|
|
76
|
+
* Unique name identifier for the tab
|
|
77
|
+
*/
|
|
78
|
+
name: string
|
|
79
|
+
/**
|
|
80
|
+
* Display label for the tab
|
|
81
|
+
*/
|
|
82
|
+
label: string
|
|
83
|
+
/**
|
|
84
|
+
* Title to display in the title bar when this tab is active
|
|
85
|
+
*/
|
|
86
|
+
title?: string
|
|
87
|
+
}
|
|
88
|
+
|
|
49
89
|
/**
|
|
50
90
|
* Properties of MlToolPalette component
|
|
51
91
|
*/
|
|
@@ -54,6 +94,10 @@ interface Props {
|
|
|
54
94
|
* The title of tool palette dialog
|
|
55
95
|
*/
|
|
56
96
|
title?: string
|
|
97
|
+
/**
|
|
98
|
+
* Array of tab definitions. If provided, the tool palette will display tabs.
|
|
99
|
+
*/
|
|
100
|
+
tabs?: MlToolPaletteTab[]
|
|
57
101
|
/**
|
|
58
102
|
* The minimum distance from the left side of the tool palette to the left side of the window
|
|
59
103
|
*/
|
|
@@ -78,11 +122,22 @@ interface Events {
|
|
|
78
122
|
* @param pos The left and top position of the tool palette before closed
|
|
79
123
|
*/
|
|
80
124
|
(e: 'close', pos: { x: number; y: number }): void
|
|
125
|
+
/**
|
|
126
|
+
* Trigger this event when the active tab changes.
|
|
127
|
+
* @param tabName The name of the newly active tab
|
|
128
|
+
*/
|
|
129
|
+
(e: 'tab-change', tabName: string): void
|
|
130
|
+
/**
|
|
131
|
+
* Trigger this event when a tab is closed.
|
|
132
|
+
* @param tabName The name of the closed tab
|
|
133
|
+
*/
|
|
134
|
+
(e: 'tab-close', tabName: string): void
|
|
81
135
|
}
|
|
82
136
|
|
|
83
137
|
// Attributes of tool palette component
|
|
84
138
|
const props = withDefaults(defineProps<Props>(), {
|
|
85
139
|
title: '',
|
|
140
|
+
tabs: undefined,
|
|
86
141
|
leftOffset: 0,
|
|
87
142
|
rightOffset: 0,
|
|
88
143
|
topOffset: 0,
|
|
@@ -90,8 +145,29 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
90
145
|
})
|
|
91
146
|
// Flag to control whether the tool palette is visible
|
|
92
147
|
const visible = defineModel({ default: true })
|
|
148
|
+
// Active tab name (only used when tabs are provided)
|
|
149
|
+
const activeTab = defineModel<string>('activeTab', { default: '' })
|
|
93
150
|
const emit = defineEmits<Events>()
|
|
94
151
|
|
|
152
|
+
// Check if tabs are provided
|
|
153
|
+
const hasTabs = computed(() => {
|
|
154
|
+
return props.tabs && props.tabs.length > 0
|
|
155
|
+
})
|
|
156
|
+
|
|
157
|
+
// Initialize active tab to first tab if tabs are provided and no active tab is set
|
|
158
|
+
onMounted(() => {
|
|
159
|
+
if (hasTabs.value && !activeTab.value && props.tabs && props.tabs.length > 0) {
|
|
160
|
+
activeTab.value = props.tabs[0].name
|
|
161
|
+
}
|
|
162
|
+
})
|
|
163
|
+
|
|
164
|
+
// Watch for tabs prop changes and initialize active tab if needed
|
|
165
|
+
watch(() => props.tabs, (newTabs: MlToolPaletteTab[] | undefined) => {
|
|
166
|
+
if (newTabs && newTabs.length > 0 && !activeTab.value) {
|
|
167
|
+
activeTab.value = newTabs[0].name
|
|
168
|
+
}
|
|
169
|
+
}, { immediate: true })
|
|
170
|
+
|
|
95
171
|
// This varible is used in CSS
|
|
96
172
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
97
173
|
const collapsedWidth = WIDTH_OF_TITLE_BAR
|
|
@@ -138,6 +214,19 @@ const titleBarBorderStyle = computed(() => {
|
|
|
138
214
|
}
|
|
139
215
|
})
|
|
140
216
|
|
|
217
|
+
// Compute the title to display in the title bar
|
|
218
|
+
const displayedTitle = computed(() => {
|
|
219
|
+
// If tabs are provided and there's an active tab, use the active tab's title
|
|
220
|
+
if (hasTabs.value && activeTab.value && props.tabs) {
|
|
221
|
+
const activeTabData = props.tabs.find(tab => tab.name === activeTab.value)
|
|
222
|
+
if (activeTabData && activeTabData.title) {
|
|
223
|
+
return activeTabData.title
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
// Otherwise, use the component's title prop
|
|
227
|
+
return props.title
|
|
228
|
+
})
|
|
229
|
+
|
|
141
230
|
const handleClose = () => {
|
|
142
231
|
visible.value = false
|
|
143
232
|
const element = toolPaletteElement.value
|
|
@@ -146,6 +235,29 @@ const handleClose = () => {
|
|
|
146
235
|
y: element ? element.clientTop : 0
|
|
147
236
|
})
|
|
148
237
|
}
|
|
238
|
+
|
|
239
|
+
// Handle tab change
|
|
240
|
+
const handleTabChange = (tabName: string) => {
|
|
241
|
+
emit('tab-change', tabName)
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
// Handle tab close
|
|
245
|
+
const handleTabClose = (tabName: string) => {
|
|
246
|
+
emit('tab-close', tabName)
|
|
247
|
+
|
|
248
|
+
// If closing the active tab, switch to another tab
|
|
249
|
+
if (activeTab.value === tabName && props.tabs) {
|
|
250
|
+
const currentIndex = props.tabs.findIndex(t => t.name === tabName)
|
|
251
|
+
if (currentIndex >= 0) {
|
|
252
|
+
// Try to switch to next tab, or previous if at the end
|
|
253
|
+
const nextTab = props.tabs[currentIndex + 1] || props.tabs[currentIndex - 1]
|
|
254
|
+
if (nextTab) {
|
|
255
|
+
activeTab.value = nextTab.name
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
149
261
|
</script>
|
|
150
262
|
|
|
151
263
|
<style scoped>
|
|
@@ -198,11 +310,53 @@ const handleClose = () => {
|
|
|
198
310
|
user-select: none; /* Prevent text selection */
|
|
199
311
|
flex-grow: 1;
|
|
200
312
|
display: flex;
|
|
201
|
-
|
|
313
|
+
flex-direction: column;
|
|
202
314
|
background-color: var(--el-fill-color);
|
|
203
315
|
overflow: hidden; /* Hides content when width becomes 0 */
|
|
204
316
|
}
|
|
205
317
|
|
|
318
|
+
.ml-tool-palette-tabs {
|
|
319
|
+
display: flex;
|
|
320
|
+
flex-direction: column;
|
|
321
|
+
height: 100%;
|
|
322
|
+
flex: 1;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.ml-tool-palette-tabs :deep(.el-tabs) {
|
|
326
|
+
display: flex;
|
|
327
|
+
flex-direction: column;
|
|
328
|
+
height: 100%;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.ml-tool-palette-tabs :deep(.el-tabs__header) {
|
|
332
|
+
margin: 0;
|
|
333
|
+
border-bottom: none;
|
|
334
|
+
order: 1;
|
|
335
|
+
flex-shrink: 0;
|
|
336
|
+
position: relative;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.ml-tool-palette-tabs :deep(.el-tabs__content) {
|
|
340
|
+
flex: 1;
|
|
341
|
+
overflow: auto;
|
|
342
|
+
padding: 0;
|
|
343
|
+
order: 2;
|
|
344
|
+
min-height: 0;
|
|
345
|
+
position: relative;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.ml-tool-palette-tabs :deep(.el-tab-pane) {
|
|
349
|
+
height: 100%;
|
|
350
|
+
overflow: auto;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.ml-tool-palette-default-content {
|
|
354
|
+
flex: 1;
|
|
355
|
+
overflow: auto;
|
|
356
|
+
display: flex;
|
|
357
|
+
flex-direction: column;
|
|
358
|
+
}
|
|
359
|
+
|
|
206
360
|
/* When direction is 'left' */
|
|
207
361
|
.ml-tool-palette-dialog-layout.left .ml-tool-palette-title-bar {
|
|
208
362
|
order: 1;
|
package/src/index.ts
CHANGED
|
@@ -17,6 +17,7 @@ export {
|
|
|
17
17
|
export type { MlDropdownMenuItem } from './components/MlDropdown.vue'
|
|
18
18
|
export type { MlToggleButtonData } from './components/MlToggleButton.vue'
|
|
19
19
|
export type { MlButtonData } from './components/MlToolBar.vue'
|
|
20
|
+
export type { MlToolPaletteTab } from './components/MlToolPalette.vue'
|
|
20
21
|
export * from './components/types'
|
|
21
22
|
|
|
22
23
|
// Optionally, export them as a plugin for Vue
|
package/README.md
DELETED
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
# Common UI Component Libaray
|
|
2
|
-
|
|
3
|
-
This is one common UI component library based on Element Plus.
|
|
4
|
-
|
|
5
|
-
## Components
|
|
6
|
-
|
|
7
|
-
The following components are included in this package.
|
|
8
|
-
|
|
9
|
-
- Tool Palette: one dockable, resizable, and floating window, which is quite similar to AutoCAD Tool Palette.
|
|
10
|
-
- Toolbar: one toolbar which can be easily customized by one array of button data.
|
|
11
|
-
|
|
12
|
-
You can play with them through [this live demo](https://mlight-lee.github.io/ui-components/).
|
|
13
|
-
|
|
14
|
-
### Tool Palette
|
|
15
|
-
|
|
16
|
-
AutoCAD uses [tool palettes](https://help.autodesk.com/view/ACD/2025/ENU/?guid=GUID-167A8594-92CB-4FCC-B72C-0F546383E97C) to organize blocks, hatches, and custom tools in a tabbed window. Tool Palette component is quite similar to one in AutoCAD. It supports the following features.
|
|
17
|
-
|
|
18
|
-
- Dockable: dock to the left or right side of the window
|
|
19
|
-
- Folderable: roll open or closed as your need
|
|
20
|
-
- Auto-hide: roll open and closed as the cursor moves across it. When this option is cleared, the full tool palette stays open continuously.
|
|
21
|
-
|
|
22
|
-
<img src="./doc/palette.jpg" alt="Tool Palette Example">
|
|
23
|
-
|
|
24
|
-
You can customize tool palette by the following properties.
|
|
25
|
-
|
|
26
|
-
```javascript
|
|
27
|
-
/**
|
|
28
|
-
* Properties of MlToolPalette component
|
|
29
|
-
*/
|
|
30
|
-
interface Props {
|
|
31
|
-
/**
|
|
32
|
-
* The title of tool palette dialog
|
|
33
|
-
*/
|
|
34
|
-
title?: string
|
|
35
|
-
/**
|
|
36
|
-
* The minimum distance from the left side of the tool palette to the left side of the window
|
|
37
|
-
*/
|
|
38
|
-
leftOffset?: number
|
|
39
|
-
/**
|
|
40
|
-
* The minimum distance from the right side of the tool palette to the right side of the window
|
|
41
|
-
*/
|
|
42
|
-
rightOffset?: number
|
|
43
|
-
/**
|
|
44
|
-
* The minimum distance from the top side of the tool palette to the top side of the window
|
|
45
|
-
*/
|
|
46
|
-
topOffset?: number
|
|
47
|
-
/**
|
|
48
|
-
* The minimum distance from the bottom side of the tool palette to the bottom side of the window
|
|
49
|
-
*/
|
|
50
|
-
bottomOffset?: number
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
Four `offsetXXX` properties are used to set the minimum distance from the side of the tool palette to the side of the window. It is quite useful if you want the tool palette is shown within certain area. For example, one web page has one title bar at the top of window, one status bar at the bottom of window, and one canvas area between the title bar and the status bar. The height of the title bar is 60px and the height of the status bar is 20px. Then you can set `topOffset` to 60 and `bottomOffset` to 20 to let the tool palette are shown and moved within canvas area only.
|
|
55
|
-
|
|
56
|
-
```javascript
|
|
57
|
-
<script lang="ts" setup>
|
|
58
|
-
import { MlToolPalette } from '@mlightcad/ui-components'
|
|
59
|
-
const toolPaletteVisible = ref<boolean>(false)
|
|
60
|
-
</script>
|
|
61
|
-
|
|
62
|
-
<template>
|
|
63
|
-
<ml-tool-palette
|
|
64
|
-
class="tool-palette"
|
|
65
|
-
v-model="toolPaletteVisible"
|
|
66
|
-
title="Tool Palette Test"
|
|
67
|
-
:top-offset="60"
|
|
68
|
-
:bottom-offset="20"
|
|
69
|
-
>
|
|
70
|
-
<span>Tool Palette Test</span>
|
|
71
|
-
</ml-tool-palette>
|
|
72
|
-
</template>
|
|
73
|
-
|
|
74
|
-
<style scoped>
|
|
75
|
-
.tool-palette {
|
|
76
|
-
position: fixed;
|
|
77
|
-
top: 55px;
|
|
78
|
-
width: 400px;
|
|
79
|
-
}
|
|
80
|
-
</style>
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
### Toolbar
|
|
84
|
-
|
|
85
|
-
Toolbar component has the followiing features.
|
|
86
|
-
|
|
87
|
-
- Define button list by one array of `MlButtonData`
|
|
88
|
-
- Arrange button vertically or horizontally
|
|
89
|
-
- Support three kind of button size
|
|
90
|
-
|
|
91
|
-
<img src="./doc/toolbar.jpg" width="423" height="223" alt="ViewCube Example">
|
|
92
|
-
|
|
93
|
-
Features above can be customized by the following properties.
|
|
94
|
-
|
|
95
|
-
```javascript
|
|
96
|
-
/**
|
|
97
|
-
* Properties of MLToolBar components
|
|
98
|
-
*/
|
|
99
|
-
interface Props {
|
|
100
|
-
/**
|
|
101
|
-
* An array of button data
|
|
102
|
-
*/
|
|
103
|
-
items: MlButtonData[]
|
|
104
|
-
/**
|
|
105
|
-
* Button size.
|
|
106
|
-
* - small: 30px
|
|
107
|
-
* - medium: 50px
|
|
108
|
-
* - large: 70px
|
|
109
|
-
*/
|
|
110
|
-
size?: 'small' | 'medium'| 'large'
|
|
111
|
-
/**
|
|
112
|
-
* Layout type.
|
|
113
|
-
* - vertical: arrange button vertically
|
|
114
|
-
* - horizontal: arrange button horizontally
|
|
115
|
-
*/
|
|
116
|
-
direction?: 'vertical' | 'horizontal'
|
|
117
|
-
}
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
Buttons in toolbar are described by the following data. Property `icon` can be icon provided by Element Plus or icon imported through `vite-svg-loader`.
|
|
121
|
-
|
|
122
|
-
```javascript
|
|
123
|
-
/**
|
|
124
|
-
* Data to descibe button appearance
|
|
125
|
-
*/
|
|
126
|
-
export interface MlButtonData {
|
|
127
|
-
/**
|
|
128
|
-
* Icon represented by one vue component
|
|
129
|
-
*/
|
|
130
|
-
icon: Component
|
|
131
|
-
/**
|
|
132
|
-
* Text shown below icon
|
|
133
|
-
*/
|
|
134
|
-
text: string
|
|
135
|
-
/**
|
|
136
|
-
* Command string which will be passed to click event as event arguments
|
|
137
|
-
*/
|
|
138
|
-
command: string
|
|
139
|
-
/**
|
|
140
|
-
* Tooltips content when hover
|
|
141
|
-
*/
|
|
142
|
-
description?: string
|
|
143
|
-
}
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
Usage of this component is as follows.
|
|
147
|
-
|
|
148
|
-
```javascript
|
|
149
|
-
<script setup lang="ts">
|
|
150
|
-
import '@mlightcad/ui-components/dist/style.css'
|
|
151
|
-
import { MlButtonData, MlToolbar } from '@mlightcad/ui-components'
|
|
152
|
-
import { reactive } from 'vue'
|
|
153
|
-
import { Delete, Edit, Search } from '@element-plus/icons-vue'
|
|
154
|
-
|
|
155
|
-
const data = reactive<MlButtonData[]>([
|
|
156
|
-
{
|
|
157
|
-
icon: Edit,
|
|
158
|
-
text: 'Edit',
|
|
159
|
-
command: 'edit',
|
|
160
|
-
description: 'This is description for edit button'
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
icon: Delete,
|
|
164
|
-
text: 'Delete',
|
|
165
|
-
command: 'delete',
|
|
166
|
-
description: 'This is description for delete button'
|
|
167
|
-
},
|
|
168
|
-
{
|
|
169
|
-
icon: Search,
|
|
170
|
-
text: 'Search',
|
|
171
|
-
command: 'search',
|
|
172
|
-
description: 'This is description for search button'
|
|
173
|
-
}
|
|
174
|
-
])
|
|
175
|
-
|
|
176
|
-
const handleCommand = (command: string) => {
|
|
177
|
-
console.log(command)
|
|
178
|
-
}
|
|
179
|
-
</script>
|
|
180
|
-
|
|
181
|
-
<template>
|
|
182
|
-
<div>
|
|
183
|
-
<ml-toolbar :items="data" layout="vertical" @click="handleCommand"/>
|
|
184
|
-
</div>
|
|
185
|
-
</template>
|
|
186
|
-
|
|
187
|
-
<style></style>
|
|
188
|
-
```
|