vue-data-ui/dist/vue-ui-dashboard-CB7KJEOi.cjs

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),A=require("./pdf-DSkQT5iH.cjs"),G=require("./useNestedProp-0jJvFRhK.cjs"),$=require("./index-CBRI5uwl.cjs"),J=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),K={key:0,"data-html2canvas-ignore":"",style:{width:"100%",display:"flex","justify-content":"end"}},Q=["disabled"],Z=["stroke"],ee={key:1},te=["id"],oe=["onMousedown","onTouchstart"],le=["onMousedown","onTouchstart"],ae=["onMousedown","onTouchstart"],ne=["onMousedown","onTouchstart"],ue=["onMousedown","onTouchstart"],M=20,se={__name:"vue-ui-dashboard",props:{dataset:Array,config:Object},emits:["change"],setup(x,{expose:S,emit:X}){o.useCssVars(e=>({"014a5839":F.value,c96c137e:R.value}));const{vue_ui_dashboard:Y}=$.useConfig(),_=x,r=o.computed(()=>G.useNestedProp({userConfig:_.config,defaultConfig:Y})),E=o.ref($.createUid()),c=o.ref(r.value.locked);function V(){c.value=!c.value}const s=o.ref(_.dataset.map((e,t)=>({...e,index:t}))),h=o.ref(null),u=o.ref(null),v=o.ref({x:0,y:0}),f=o.ref({x:0,y:0}),i=o.ref(null),d=o.ref(!1),p=o.ref(null),m=o.ref(!1),b=o.ref(!1);function z(e){const t=e.target;(t.tagName==="INPUT"&&t.type==="range"||t.classList.contains("range-handle"))&&(b.value=!0)}function N(e){const t=e.target;t.tagName==="INPUT"&&t.type==="range"&&(b.value=!1)}function C(){m.value=!0,A.default({domElement:document.getElementById(`vue-ui-dashboard_${E.value}`),fileName:"vue-ui-dashboard"}).finally(()=>{m.value=!1})}function H(e){if(!c.value&&(d.value=!0,p.value=e,u.value===null)){h.value=e,v.value={x:event.clientX,y:event.clientY};const t=s.value[e],a=100-t.width,l=100-t.height;t.left<0&&(t.left=0),t.top<0&&(t.top=0),t.left>a&&(t.left=a),t.top>l&&(t.top=l),t.left<0&&(t.left=0),t.top<0&&(t.top=0),t.left+t.width>100&&(t.left=100-t.width),t.top+t.height>100&&(t.top=100-t.height)}}function y(e,t){d.value=!0,p.value=e,u.value={index:e,direction:t};const a=s.value[e];f.value={x:event.clientX,y:event.clientY,initialWidth:a.width,initialHeight:a.height}}function B(e,t,a){if(u.value.direction.includes("top")){const l=e.height-a/i.value.offsetHeight*100;l>=M&&(e.top+=a/i.value.offsetHeight*100,e.height=l)}if(u.value.direction.includes("bottom")){const l=e.height+a/i.value.offsetHeight*100;l>=M&&(e.height=l)}if(u.value.direction.includes("left")){const l=e.width-t/i.value.offsetWidth*100;l>=M&&(e.left+=t/i.value.offsetWidth*100,e.width=l)}if(u.value.direction.includes("right")){const l=e.width+t/i.value.offsetWidth*100;l>=M&&(e.width=l)}}function I(e){if(!(c.value||b.value)){if(d.value=!0,h.value!==null){const t=s.value[h.value],a=e.clientX-v.value.x,l=e.clientY-v.value.y,n=t.left+a/i.value.offsetWidth*100,g=t.top+l/i.value.offsetHeight*100;n>=0&&g>=0&&n+t.width<=100&&g+t.height<=100&&(t.left=n,t.top=g),v.value={x:e.clientX,y:e.clientY}}if(u.value!==null){const t=s.value[u.value.index],a=e.clientX-f.value.x,l=e.clientY-f.value.y;B(t,a,l),f.value={x:e.clientX,y:e.clientY}}}}const P=X;o.watch(s,e=>{e&&!d.value&&P("change",s.value)},{deep:!0});function D(){h.value=null,u.value=null,d.value=!1,p.value=null,s.value.forEach(e=>{e.left=Math.round(e.left/100*100),e.top=Math.round(e.top/100*100),e.width=Math.round(e.width/100*100),e.height=Math.round(e.height/100*100)})}function L(e){c.value||b.value||(d.value=!0,p.value=e,u.value===null&&(h.value=e,v.value={x:event.touches[0].clientX,y:event.touches[0].clientY}))}function k(e,t,a){if(d.value=!0,p.value=e,u.value===null){u.value={index:e,direction:t};const l=s.value[e];f.value={x:a.touches[0].clientX,y:a.touches[0].clientY,initialWidth:l.width,initialHeight:l.height}}}function T(e){if(d.value=!0,e.preventDefault(),u.value!==null){const t=s.value[u.value.index],a=e.touches[0].clientX-f.value.x,l=e.touches[0].clientY-f.value.y;B(t,a,l),f.value={x:e.touches[0].clientX,y:e.touches[0].clientY}}}function W(e){if(!(c.value||b.value)&&(d.value=!0,e.preventDefault(),h.value!==null)){const t=s.value[h.value],a=e.touches[0].clientX-v.value.x,l=e.touches[0].clientY-v.value.y,n=t.left+a/i.value.offsetWidth*100,g=t.top+l/i.value.offsetHeight*100;n>=0&&g>=0&&n+t.width<=100&&g+t.height<=100&&(t.left=n,t.top=g),v.value={x:e.touches[0].clientX,y:e.touches[0].clientY}}}function w(){d.value=!1,p.value=null,h.value=null,u.value=null,s.value.forEach(e=>{e.left=Math.round(e.left/100*100),e.top=Math.round(e.top/100*100),e.width=Math.round(e.width/100*100),e.height=Math.round(e.height/100*100)})}const F=o.computed(()=>r.value.style.item.borderColor),R=o.computed(()=>r.value.style.resizeHandles.backgroundColor),q=o.computed(()=>r.value.style.board.aspectRatio),O=o.computed(()=>r.value.style.board.backgroundColor),U=o.computed(()=>r.value.style.board.border);function j(){return s.value}return S({generatePdf:C,getItemsPositions:j,toggleLock:V}),(e,t)=>(o.openBlock(),o.createElementBlock("div",{onMousedown:z,onMouseup:N,onTouchstart:z,onTouchend:N},[r.value.allowPrint?(o.openBlock(),o.createElementBlock("div",K,[o.createElementVNode("button",{class:"vue-ui-dashboard-button",onClick:C,disabled:m.value,style:o.normalizeStyle([{"margin-top":"12px"},`color:${r.value.style.board.color}`])},[m.value?(o.openBlock(),o.createElementBlock("svg",{key:0,class:"vue-ui-dashboard-print-icon",xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:r.value.style.board.color,fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},t[4]||(t[4]=[o.createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-07570d07></path><path d="M18 16v.01" data-v-07570d07></path><path d="M6 16v.01" data-v-07570d07></path><path d="M12 5v.01" data-v-07570d07></path><path d="M12 12v.01" data-v-07570d07></path><path d="M12 1a4 4 0 0 1 2.001 7.464l.001 .072a3.998 3.998 0 0 1 1.987 3.758l.22 .128a3.978 3.978 0 0 1 1.591 -.417l.2 -.005a4 4 0 1 1 -3.994 3.77l-.28 -.16c-.522 .25 -1.108 .39 -1.726 .39c-.619 0 -1.205 -.14 -1.728 -.391l-.279 .16l.007 .231a4 4 0 1 1 -2.212 -3.579l.222 -.129a3.998 3.998 0 0 1 1.988 -3.756l.002 -.071a4 4 0 0 1 -1.995 -3.265l-.005 -.2a4 4 0 0 1 4 -4z" data-v-07570d07></path>',6)]),8,Z)):(o.openBlock(),o.createElementBlock("span",ee,"PDF"))],12,Q)])):o.createCommentVNode("",!0),o.createElementVNode("div",{class:"vue-ui-dashboard-container",ref_key:"dashboardContainer",ref:i,id:`vue-ui-dashboard_${E.value}`,style:o.normalizeStyle(`border:${U.value}; sbackground:${O.value}; aspect-ratio:${q.value}`)},[o.createElementVNode("div",{class:"vue-ui-dashboard-grid-container",ref:"container",onMousemove:I,onMouseup:D,onTouchmove:W,onTouchend:w,style:o.normalizeStyle(`background:${r.value.style.board.backgroundColor}`)},[t[5]||(t[5]=o.createElementVNode("div",{class:"vue-ui-dashboard-grid"},null,-1)),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(s.value,(a,l)=>(o.openBlock(),o.createElementBlock("div",{key:a.id,class:o.normalizeClass({"vue-ui-dashboard-grid-item":!0,"vue-ui-dashboard-grid-item--locked":c.value}),style:o.normalizeStyle({width:`${a.width}%`,height:`${a.height}%`,left:`${a.left}%`,top:`${a.top}%`,cursor:"move",boxShadow:p.value===l?"0 6px 12px -3px rgba(0,0,0,0.3)":"",zIndex:p.value===l?s.value.length+1:a.index,backgroundColor:r.value.style.item.backgroundColor}),onMousedown:n=>H(l),onTouchstart:n=>L(l)},[c.value?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock(o.Fragment,{key:0},[o.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",onMousedown:n=>y(l,"top-left"),onTouchstart:n=>k(l,"top-left",n),onTouchmove:t[0]||(t[0]=n=>T(n)),onTouchend:w},null,40,le),o.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",onMousedown:n=>y(l,"top-right"),onTouchstart:n=>k(l,"top-right",n),onTouchmove:t[1]||(t[1]=n=>T(n)),onTouchend:w},null,40,ae),o.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",onMousedown:n=>y(l,"bottom-left"),onTouchstart:n=>k(l,"bottom-left",n),onTouchmove:t[2]||(t[2]=n=>T(n)),onTouchend:w},null,40,ne),o.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",onMousedown:n=>y(l,"bottom-right"),onTouchstart:n=>k(l,"bottom-right",n),onTouchmove:t[3]||(t[3]=n=>T(n)),onTouchend:w},null,40,ue)],64)),o.renderSlot(e.$slots,"content",{item:a,index:l,left:a.left,top:a.top,height:a.height,width:a.width},void 0,!0)],46,oe))),128))],36)],12,te)],32))}},re=J._export_sfc(se,[["__scopeId","data-v-07570d07"]]);exports.default=re;