vue-data-ui-hq/dist/vue-ui-dashboard-jGllRT4v.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),U=require("./pdf-v1ddxvP5.cjs"),A=require("./useNestedProp-C14rfl0j.cjs"),G=require("./index-ZfICPrrM.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"],ne=["onMousedown","onTouchstart"],ae=["onMousedown","onTouchstart"],le=["onMousedown","onTouchstart"],ue=["onMousedown","onTouchstart"],T=20,re={__name:"vue-ui-dashboard",props:{dataset:Array,config:Object},emits:["change"],setup(B,{expose:x,emit:S}){t.useCssVars(e=>({f9823544:t.unref(L),"57e70dbc":t.unref(F)}));const{vue_ui_dashboard:X}=G.useConfig(),_=B,s=t.computed(()=>A.useNestedProp({userConfig:_.config,defaultConfig:X})),E=t.ref(`vue-ui-dashboard-${Math.random()}`),d=t.ref(s.value.locked);function Y(){d.value=!d.value}const r=t.ref(_.dataset.map((e,o)=>({...e,index:o}))),h=t.ref(null),u=t.ref(null),f=t.ref({x:0,y:0}),v=t.ref({x:0,y:0}),i=t.ref(null),c=t.ref(!1),p=t.ref(null),m=t.ref(!1),b=t.ref(!1);function z(e){const o=e.target;o.tagName==="INPUT"&&o.type==="range"&&(b.value=!0)}function N(e){const o=e.target;o.tagName==="INPUT"&&o.type==="range"&&(b.value=!1)}function C(){m.value=!0,U.default({domElement:document.getElementById(`vue-ui-dashboard_${E.value}`),fileName:"vue-ui-dashboard"}).finally(()=>{m.value=!1})}function V(e){if(!d.value&&(c.value=!0,p.value=e,u.value===null)){h.value=e,f.value={x:event.clientX,y:event.clientY};const o=r.value[e],a=100-o.width,n=100-o.height;o.left<0&&(o.left=0),o.top<0&&(o.top=0),o.left>a&&(o.left=a),o.top>n&&(o.top=n),o.left<0&&(o.left=0),o.top<0&&(o.top=0),o.left+o.width>100&&(o.left=100-o.width),o.top+o.height>100&&(o.top=100-o.height)}}function y(e,o){c.value=!0,p.value=e,u.value={index:e,direction:o};const a=r.value[e];v.value={x:event.clientX,y:event.clientY,initialWidth:a.width,initialHeight:a.height}}function $(e,o,a){if(u.value.direction.includes("top")){const n=e.height-a/i.value.offsetHeight*100;n>=T&&(e.top+=a/i.value.offsetHeight*100,e.height=n)}if(u.value.direction.includes("bottom")){const n=e.height+a/i.value.offsetHeight*100;n>=T&&(e.height=n)}if(u.value.direction.includes("left")){const n=e.width-o/i.value.offsetWidth*100;n>=T&&(e.left+=o/i.value.offsetWidth*100,e.width=n)}if(u.value.direction.includes("right")){const n=e.width+o/i.value.offsetWidth*100;n>=T&&(e.width=n)}}function H(e){if(!(d.value||b.value)){if(c.value=!0,h.value!==null){const o=r.value[h.value],a=e.clientX-f.value.x,n=e.clientY-f.value.y,l=o.left+a/i.value.offsetWidth*100,g=o.top+n/i.value.offsetHeight*100;l>=0&&g>=0&&l+o.width<=100&&g+o.height<=100&&(o.left=l,o.top=g),f.value={x:e.clientX,y:e.clientY}}if(u.value!==null){const o=r.value[u.value.index],a=e.clientX-v.value.x,n=e.clientY-v.value.y;$(o,a,n),v.value={x:e.clientX,y:e.clientY}}}}const I=S;t.watch(r,e=>{e&&!c.value&&I("change",r.value)},{deep:!0});function P(){h.value=null,u.value=null,c.value=!1,p.value=null,r.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 D(e){d.value||b.value||(c.value=!0,p.value=e,u.value===null&&(h.value=e,f.value={x:event.touches[0].clientX,y:event.touches[0].clientY}))}function k(e,o,a){if(c.value=!0,p.value=e,u.value===null){u.value={index:e,direction:o};const n=r.value[e];v.value={x:a.touches[0].clientX,y:a.touches[0].clientY,initialWidth:n.width,initialHeight:n.height}}}function M(e){if(c.value=!0,e.preventDefault(),u.value!==null){const o=r.value[u.value.index],a=e.touches[0].clientX-v.value.x,n=e.touches[0].clientY-v.value.y;$(o,a,n),v.value={x:e.touches[0].clientX,y:e.touches[0].clientY}}}function W(e){if(!(d.value||b.value)&&(c.value=!0,e.preventDefault(),h.value!==null)){const o=r.value[h.value],a=e.touches[0].clientX-f.value.x,n=e.touches[0].clientY-f.value.y,l=o.left+a/i.value.offsetWidth*100,g=o.top+n/i.value.offsetHeight*100;l>=0&&g>=0&&l+o.width<=100&&g+o.height<=100&&(o.left=l,o.top=g),f.value={x:e.touches[0].clientX,y:e.touches[0].clientY}}}function w(){c.value=!1,p.value=null,h.value=null,u.value=null,r.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 L=t.computed(()=>s.value.style.item.borderColor),F=t.computed(()=>s.value.style.resizeHandles.backgroundColor),R=t.computed(()=>s.value.style.board.aspectRatio),q=t.computed(()=>s.value.style.board.backgroundColor),O=t.computed(()=>s.value.style.board.border);function j(){return r.value}return x({generatePdf:C,getItemsPositions:j,toggleLock:Y}),(e,o)=>(t.openBlock(),t.createElementBlock("div",{onMousedown:z,onMouseup:N,onTouchstart:z,onTouchend:N},[t.unref(s).allowPrint?(t.openBlock(),t.createElementBlock("div",K,[t.createElementVNode("button",{class:"vue-ui-dashboard-button",onClick:C,disabled:t.unref(m),style:t.normalizeStyle([{"margin-top":"12px"},`color:${t.unref(s).style.board.color}`])},[t.unref(m)?(t.openBlock(),t.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:t.unref(s).style.board.color,fill:"none","stroke-linecap":"round","stroke-linejoin":"round"},o[4]||(o[4]=[t.createStaticVNode('<path stroke="none" d="M0 0h24v24H0z" fill="none" data-v-c94a91b0></path><path d="M18 16v.01" data-v-c94a91b0></path><path d="M6 16v.01" data-v-c94a91b0></path><path d="M12 5v.01" data-v-c94a91b0></path><path d="M12 12v.01" data-v-c94a91b0></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-c94a91b0></path>',6)]),8,Z)):(t.openBlock(),t.createElementBlock("span",ee,"PDF"))],12,Q)])):t.createCommentVNode("",!0),t.createElementVNode("div",{class:"vue-ui-dashboard-container",ref_key:"dashboardContainer",ref:i,id:`vue-ui-dashboard_${t.unref(E)}`,style:t.normalizeStyle(`border:${t.unref(O)}; sbackground:${t.unref(q)}; aspect-ratio:${t.unref(R)}`)},[t.createElementVNode("div",{class:"vue-ui-dashboard-grid-container",ref:"container",onMousemove:H,onMouseup:P,onTouchmove:W,onTouchend:w,style:t.normalizeStyle(`background:${t.unref(s).style.board.backgroundColor}`)},[o[5]||(o[5]=t.createElementVNode("div",{class:"vue-ui-dashboard-grid"},null,-1)),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(r),(a,n)=>(t.openBlock(),t.createElementBlock("div",{key:a.id,class:t.normalizeClass({"vue-ui-dashboard-grid-item":!0,"vue-ui-dashboard-grid-item--locked":t.unref(d)}),style:t.normalizeStyle({width:`${a.width}%`,height:`${a.height}%`,left:`${a.left}%`,top:`${a.top}%`,cursor:"move",boxShadow:t.unref(p)===n?"0 6px 12px -3px rgba(0,0,0,0.3)":"",zIndex:t.unref(p)===n?t.unref(r).length+1:a.index,backgroundColor:t.unref(s).style.item.backgroundColor}),onMousedown:l=>V(n),onTouchstart:l=>D(n)},[t.unref(d)?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-left",onMousedown:l=>y(n,"top-left"),onTouchstart:l=>k(n,"top-left",l),onTouchmove:o[0]||(o[0]=l=>M(l)),onTouchend:w},null,40,ne),t.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-top-right",onMousedown:l=>y(n,"top-right"),onTouchstart:l=>k(n,"top-right",l),onTouchmove:o[1]||(o[1]=l=>M(l)),onTouchend:w},null,40,ae),t.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-left",onMousedown:l=>y(n,"bottom-left"),onTouchstart:l=>k(n,"bottom-left",l),onTouchmove:o[2]||(o[2]=l=>M(l)),onTouchend:w},null,40,le),t.createElementVNode("div",{class:"vue-ui-dashboard-resize-handle vue-ui-dashboard-bottom-right",onMousedown:l=>y(n,"bottom-right"),onTouchstart:l=>k(n,"bottom-right",l),onTouchmove:o[3]||(o[3]=l=>M(l)),onTouchend:w},null,40,ue)],64)),t.renderSlot(e.$slots,"content",{item:a,index:n,left:a.left,top:a.top,height:a.height,width:a.width},void 0,!0)],46,oe))),128))],36)],12,te)],32))}},se=J._export_sfc(re,[["__scopeId","data-v-c94a91b0"]]);exports.default=se;