vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
2 lines (1 loc) • 17.7 kB
JavaScript
"use strict";const e=require("vue"),r=require("./BaseIcon-DO69J5Rk.cjs"),D=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),A={beforeMount(t,d){t.clickOutsideEvent=function(a){t===a.target||t.contains(a.target)||d.value(a)},document.addEventListener("click",t.clickOutsideEvent)},unmounted(t){document.removeEventListener("click",t.clickOutsideEvent)}},L=["title"],w=["data-open"],X={__name:"UserOptions",props:{hasPdf:{type:Boolean,default:!0},hasXls:{type:Boolean,default:!0},hasImg:{type:Boolean,default:!1},hasLabel:{type:Boolean,default:!1},isLabelActive:{type:Boolean,default:!1},hasTable:{type:Boolean,default:!1},hasSort:{type:Boolean,default:!1},hasStack:{type:Boolean,default:!1},hasTooltip:{type:Boolean,default:!1},color:{type:String},backgroundColor:{type:String},isPrinting:{type:Boolean,default:!1},isImaging:{type:Boolean,default:!1},title:{type:String},uid:{type:String},hasFullscreen:{type:Boolean,default:!1},chartElement:{type:HTMLElement,default:null},isFullscreen:{type:Boolean,default:!1},isStacked:{type:Boolean,default:!1},isTooltip:{type:Boolean,default:!1},hasAnimation:{type:Boolean,default:!1},isAnimation:{type:Boolean,default:!1},titles:{type:Object,default(){return{}}},showTooltips:{type:Boolean,default:!0},zIndex:{type:Number,default:1},noOffset:{type:Boolean,default:!0},position:{type:String,default:"right"},offsetX:{type:Number,default:0},hasAnnotator:{type:Boolean,default:!1},isAnnotation:{type:Boolean,default:!1}},emits:["generatePdf","generateCsv","generateImage","toggleTable","toggleLabels","toggleSort","toggleFullscreen","toggleStack","toggleTooltip","toggleAnimation","toggleAnnotator"],setup(t,{emit:d}){const a=t,s=d;function m(){s("generatePdf")}function g(){s("generateCsv")}function B(){s("generateImage")}const b=e.ref(!1);function c(){b.value=!b.value,s("toggleTable")}const k=e.ref(!1),M=e.ref(!0);function h(){u.value=window.innerWidth>600,k.value=!k.value,k.value&&(M.value=!1)}function T(){a.isPrinting||a.isImaging||(k.value=!1)}function F(){k.value&&T()}const C=e.ref(a.isLabelActive);function I(){C.value=!C.value,s("toggleLabels")}const y=e.ref(a.isAnimation);function E(){y.value=!y.value,s("toggleAnimation")}const v=e.computed({get:()=>a.isAnnotation,set:l=>l});function z(){v.value=!v.value,s("toggleAnnotator")}function p(){s("toggleSort")}const $=e.ref(a.isStacked);function P(){$.value=!$.value,s("toggleStack")}const S=e.ref(a.isTooltip);function O(){S.value=!S.value,s("toggleTooltip")}const f=e.ref(!1);function N(l){a.chartElement&&(l==="in"?(f.value=!0,a.chartElement.requestFullscreen(),s("toggleFullscreen",!0)):(f.value=!1,document&&document.exitFullscreen(),s("toggleFullscreen",!1)))}function V(l){document.fullscreenElement?f.value=!0:f.value=!1}e.onMounted(()=>{document.addEventListener("fullscreenchange",V)}),e.onBeforeUnmount(()=>{document.removeEventListener("fullscreenchange",V)});const u=e.ref(window.innerWidth>600),n=e.ref({tooltip:!1,pdf:!1,csv:!1,img:!1,table:!1,labels:!1,sort:!1,stack:!1,fullscreen:!1,animation:!1,annotator:!1});return(l,o)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{"data-html2canvas-ignore":"",class:"vue-ui-user-options",style:e.normalizeStyle(`z-index: ${t.zIndex}; height: 34px; position: ${e.unref(f)?"fixed":"absolute"}; top: 0; ${t.position==="right"?`right:${e.unref(f)?"12px":"0"}`:`left:${e.unref(f)?"12px":"0"}`}; padding: 4px; background:transparent;`)},[e.createElementVNode("div",{tabindex:"0",title:e.unref(k)?t.titles.close||"":t.titles.open||"",style:e.normalizeStyle(`width:32px; position: absolute; top: 0;${t.position==="right"?`right: ${t.offsetX?t.offsetX:t.noOffset?0:4}px`:`left: ${t.noOffset?0:4}px`}; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; cursor:pointer; background:transparent`),onClick:e.withModifiers(h,["stop"]),onKeypress:e.withKeys(h,["enter"])},[e.createVNode(r.default,{name:e.unref(k)?"close":"menu",stroke:t.color,"stroke-width":2},null,8,["name","stroke"])],44,L),e.createElementVNode("div",{"data-open":e.unref(k),class:e.normalizeClass({"vue-ui-user-options-drawer":!0}),style:e.normalizeStyle(`background:${t.backgroundColor}; ${t.position==="right"?`right: ${t.offsetX?t.offsetX:t.noOffset?0:4}px`:`left: ${t.noOffset?0:4}px`}`)},[t.hasTooltip?(e.openBlock(),e.createElementBlock("button",{key:0,tabindex:"0",class:"vue-ui-user-options-button",onClick:O,onMouseenter:o[0]||(o[0]=i=>e.unref(n).tooltip=!0),onMouseout:o[1]||(o[1]=i=>e.unref(n).tooltip=!1)},[l.$slots.optionTooltip?e.renderSlot(l.$slots,"optionTooltip",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(S)?(e.openBlock(),e.createBlock(r.default,{key:0,name:"tooltip",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):(e.openBlock(),e.createBlock(r.default,{key:1,name:"tooltipDisabled",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.tooltip&&!l.$slots.optionTooltip?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-left-visible":t.position==="left"&&e.unref(n).tooltip,"button-info-right-visible":t.position==="right"&&e.unref(n).tooltip}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.tooltip),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasPdf?(e.openBlock(),e.createElementBlock("button",{key:1,tabindex:"0",class:"vue-ui-user-options-button",onClick:m,onMouseenter:o[2]||(o[2]=i=>e.unref(n).pdf=!0),onMouseout:o[3]||(o[3]=i=>e.unref(n).pdf=!1)},[l.$slots.optionPdf?e.renderSlot(l.$slots,"optionPdf",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.isPrinting?(e.openBlock(),e.createBlock(r.default,{key:0,name:"spin",isSpin:"",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):(e.openBlock(),e.createBlock(r.default,{key:1,name:"pdf",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.pdf&&!l.$slots.optionPdf?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).pdf,"button-info-left-visible":t.position==="left"&&e.unref(n).pdf}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.pdf),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasXls?(e.openBlock(),e.createElementBlock("button",{key:2,tabindex:"0",class:"vue-ui-user-options-button",onClick:g,onMouseenter:o[4]||(o[4]=i=>e.unref(n).csv=!0),onMouseout:o[5]||(o[5]=i=>e.unref(n).csv=!1)},[l.$slots.optionCsv?e.renderSlot(l.$slots,"optionCsv",{key:0},void 0,!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:"excel",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])),e.unref(u)&&t.titles.csv&&!l.$slots.optionCsv?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).csv,"button-info-left-visible":t.position==="left"&&e.unref(n).csv}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.csv),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasImg?(e.openBlock(),e.createElementBlock("button",{key:3,tabindex:"0",class:"vue-ui-user-options-button",onClick:B,onMouseenter:o[6]||(o[6]=i=>e.unref(n).img=!0),onMouseout:o[7]||(o[7]=i=>e.unref(n).img=!1)},[l.$slots.optionImg?e.renderSlot(l.$slots,"optionImg",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[t.isImaging?(e.openBlock(),e.createBlock(r.default,{key:0,name:"spin",isSpin:"",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):(e.openBlock(),e.createBlock(r.default,{key:1,name:"image",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.img&&!l.$slots.optionImg?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).img,"button-info-left-visible":t.position==="left"&&e.unref(n).img}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.img),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasTable?(e.openBlock(),e.createElementBlock("button",{key:4,tabindex:"0",class:"vue-ui-user-options-button",onClick:c,onMouseenter:o[8]||(o[8]=i=>e.unref(n).table=!0),onMouseout:o[9]||(o[9]=i=>e.unref(n).table=!1)},[l.$slots.optionTable?e.renderSlot(l.$slots,"optionTable",{key:0},void 0,!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:e.unref(b)?"tableClose":"tableOpen",stroke:t.color,style:{"pointer-events":"none"}},null,8,["name","stroke"])),e.unref(u)&&t.titles.table&&!l.$slots.optionTable?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).table,"button-info-left-visible":t.position==="left"&&e.unref(n).table}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.table),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasLabel?(e.openBlock(),e.createElementBlock("button",{key:5,tabindex:"0",class:"vue-ui-user-options-button",onClick:I,onMouseenter:o[10]||(o[10]=i=>e.unref(n).labels=!0),onMouseout:o[11]||(o[11]=i=>e.unref(n).labels=!1)},[l.$slots.optionLabels?e.renderSlot(l.$slots,"optionLabels",{key:0},void 0,!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:e.unref(C)?"labelClose":"labelOpen",stroke:t.color,style:{"pointer-events":"none"}},null,8,["name","stroke"])),e.unref(u)&&t.titles.labels&&!l.$slots.optionLabels?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).labels,"button-info-left-visible":t.position==="left"&&e.unref(n).labels}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.labels),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasSort?(e.openBlock(),e.createElementBlock("button",{key:6,tabindex:"0",class:"vue-ui-user-options-button",onClick:p,onMouseenter:o[12]||(o[12]=i=>e.unref(n).sort=!0),onMouseout:o[13]||(o[13]=i=>e.unref(n).sort=!1)},[l.$slots.optionSort?e.renderSlot(l.$slots,"optionSort",{key:0},void 0,!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:"sort",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])),e.unref(u)&&t.titles.sort&&!l.$slots.optionSort?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).sort,"button-info-left-visible":t.position==="left"&&e.unref(n).sort}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.sort),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasStack?(e.openBlock(),e.createElementBlock("button",{key:7,tabindex:"0",class:"vue-ui-user-options-button",onClick:P,onMouseenter:o[14]||(o[14]=i=>e.unref(n).stack=!0),onMouseout:o[15]||(o[15]=i=>e.unref(n).stack=!1)},[l.$slots.optionStack?e.renderSlot(l.$slots,"optionStack",{key:0},void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref($)?(e.openBlock(),e.createBlock(r.default,{key:0,name:"unstack",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):(e.openBlock(),e.createBlock(r.default,{key:1,name:"stack",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.stack&&!l.$slots.optionStack?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).stack,"button-info-left-visible":t.position==="left"&&e.unref(n).stack}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.stack),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasFullscreen?(e.openBlock(),e.createElementBlock("button",{key:8,tabindex:"0",class:"vue-ui-user-options-button",onMouseenter:o[16]||(o[16]=i=>e.unref(n).fullscreen=!0),onMouseout:o[17]||(o[17]=i=>e.unref(n).fullscreen=!1),onClick:o[18]||(o[18]=i=>N(e.unref(f)?"out":"in"))},[l.$slots.optionFullscreen?e.renderSlot(l.$slots,"optionFullscreen",e.normalizeProps(e.mergeProps({key:0},{toggleFullscreen:N,isFullscreen:e.unref(f)})),void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(f)?(e.openBlock(),e.createBlock(r.default,{key:0,name:"exitFullscreen",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):e.createCommentVNode("",!0),e.unref(f)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:"fullscreen",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.fullscreen&&!l.$slots.optionFullscreen?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).fullscreen,"button-info-left-visible":t.position==="left"&&e.unref(n).fullscreen}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.fullscreen),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasAnimation?(e.openBlock(),e.createElementBlock("button",{key:9,tabindex:"0",class:"vue-ui-user-options-button",onMouseenter:o[19]||(o[19]=i=>e.unref(n).animation=!0),onMouseout:o[20]||(o[20]=i=>e.unref(n).animation=!1),onClick:E},[l.$slots.optionAnimation?e.renderSlot(l.$slots,"optionAnimation",e.normalizeProps(e.mergeProps({key:0},{toggleAnimation:E,isAnimated:e.unref(y)})),void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(y)?(e.openBlock(),e.createBlock(r.default,{key:0,name:"play",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):e.createCommentVNode("",!0),e.unref(y)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:"pause",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.fullscreen&&!l.$slots.optionAnimation?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).animation,"button-info-left-visible":t.position==="left"&&e.unref(n).animation}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.animation),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0),t.hasAnnotator?(e.openBlock(),e.createElementBlock("button",{key:10,tabindex:"0",class:"vue-ui-user-options-button",onMouseenter:o[21]||(o[21]=i=>e.unref(n).annotator=!0),onMouseout:o[22]||(o[22]=i=>e.unref(n).annotator=!1),onClick:z},[l.$slots.optionAnnotator?e.renderSlot(l.$slots,"optionAnnotator",e.normalizeProps(e.mergeProps({key:0},{toggleAnnotator:z,isAnnotator:e.unref(v)})),void 0,!0):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.unref(v)?(e.openBlock(),e.createBlock(r.default,{key:0,name:"annotatorDisabled",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"])):e.createCommentVNode("",!0),e.unref(v)?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r.default,{key:1,name:"annotator",stroke:t.color,style:{"pointer-events":"none"}},null,8,["stroke"]))],64)),e.unref(u)&&t.titles.annotator&&!l.$slots.optionAnnotator?(e.openBlock(),e.createElementBlock("div",{key:2,dir:"auto",class:e.normalizeClass({"button-info-left":t.position==="left","button-info-right":t.position==="right","button-info-right-visible":t.position==="right"&&e.unref(n).annotator,"button-info-left-visible":t.position==="left"&&e.unref(n).annotator}),style:e.normalizeStyle({background:t.backgroundColor,color:t.color})},e.toDisplayString(t.titles.annotator),7)):e.createCommentVNode("",!0)],32)):e.createCommentVNode("",!0)],12,w)],4)),[[e.unref(A),F]])}},q=D._export_sfc(X,[["__scopeId","data-v-7bde71b6"]]);function U({elementId:t,fileName:d,canPrint:a=!0}){const s=e.ref(!1),m=e.ref(!1),g=e.ref(null);async function B(){!a||s.value||(s.value=!0,clearTimeout(g.value),g.value=setTimeout(async()=>{if(a)try{const{default:c}=await Promise.resolve().then(()=>require("./pdf-v1ddxvP5.cjs"));await c({domElement:document.getElementById(t),fileName:d})}catch(c){console.error("Error generating PDF:",c)}finally{s.value=!1}},100))}async function b(){!a||m.value||(m.value=!0,clearTimeout(g.value),g.value=setTimeout(async()=>{if(a)try{const{default:c}=await Promise.resolve().then(()=>require("./img-BFCs759q.cjs"));await c({domElement:document.getElementById(t),fileName:d,format:"png"})}catch(c){console.error("Error generating image:",c)}finally{m.value=!1}},100))}return{generatePdf:B,generateImage:b,isPrinting:s,isImaging:m}}exports.UserOptions=q;exports.usePrinter=U;exports.vClickOutside=A;