vue-data-ui-hq
Version:
A user-empowering data visualization Vue 3 components library for eloquent data storytelling
65 lines (56 loc) • 14 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),j=require("./useNestedProp-C14rfl0j.cjs"),w=require("./index-ZfICPrrM.cjs"),D=require("./useResponsive-BJ7DTGpm.cjs"),C=require("./BaseIcon-DO69J5Rk.cjs"),O=require("./Title-FbHK83tB.cjs"),q=require("./PackageVersion-D3dK8oA3.cjs"),U=require("./_plugin-vue_export-helper-BHFhmbuH.cjs");class W{constructor(P,T,B,S=!0,f=!0){this.interval=T,this.elapsed=0,this.isPaused=!1;const g=`
let interval;
let elapsed = 0;
let paused = false;
let startTime;
let tickInterval;
onmessage = function(e) {
const { action, data } = e.data;
switch(action) {
case 'start':
startTime = Date.now();
tickInterval = data.interval;
elapsed = 0;
paused = false;
interval = setInterval(() => {
elapsed += tickInterval;
postMessage({ elapsed, timestamp: Date.now() });
}, tickInterval);
break;
case 'pause':
paused = true;
clearInterval(interval);
elapsed = Date.now() - startTime;
break;
case 'resume':
if (paused) {
startTime = Date.now() - elapsed;
interval = setInterval(() => {
elapsed += tickInterval;
postMessage({ elapsed, timestamp: Date.now() });
}, tickInterval);
}
paused = false;
break;
case 'stop':
clearInterval(interval);
elapsed = 0;
postMessage({ elapsed });
break;
case 'reset':
elapsed = 0;
clearInterval(interval);
postMessage({ elapsed });
break;
case 'lap':
postMessage({
elapsed,
timestamp: Date.now(),
action: 'lap'
});
break;
default:
break;
}
};
`,M=new Blob([g],{type:"application/javascript"}),N=URL.createObjectURL(M),n=new Worker(N);function y(u){let c=Math.floor(u/1e3),t=Math.floor(u%1e3/10),h=Math.floor(c/3600),b=Math.floor(c%3600/60),r=c%60,o="";return f&&(o+=String(h).padStart(2,"0")+":"),o+=String(b).padStart(2,"0")+":",o+=String(r).padStart(2,"0"),S&&(o+="."+String(t).padStart(2,"0")),o}this.start=()=>{this.isPaused=!1,n.postMessage({action:"start",data:{interval:this.interval}})},this.pause=()=>{this.isPaused?this.resume():(this.isPaused=!0,n.postMessage({action:"pause"}))},this.resume=()=>{this.isPaused&&(n.postMessage({action:"resume"}),this.isPaused=!1)},this.stop=()=>{n.postMessage({action:"stop"}),this.isPaused=!1},this.reset=()=>{n.postMessage({action:"reset"}),this.elapsed=0,this.isPaused=!1},this.restart=()=>{this.stop(),this.start()},this.lap=()=>new Promise(u=>{n.postMessage({action:"lap"});const c=t=>{const{elapsed:h,timestamp:b,action:r}=t.data;if(r==="lap"){const o=y(h);u({timestamp:b||0,elapsed:h,formatted:o})}};n.addEventListener("message",c,{once:!0})}),n.onmessage=u=>{const{elapsed:c,timestamp:t}=u.data;this.elapsed=c,P({timestamp:t||0,elapsed:this.elapsed,formatted:y(this.elapsed)})},n.onerror=u=>{B&&B(u)}}}const G=["xmlns","viewBox"],X=["width","height"],J={key:1},K=["id"],Q=["stop-color"],Y=["stop-color"],Z=["cx","cy","r","fill","stroke","stroke-width"],ee=["d","stroke","stroke-width"],te=["r","fill","stroke","stroke-width"],re=["r","fill","stroke","stroke-width"],ae=["x","y"],se=["x","y","font-size","fill","font-weight"],oe={key:0,class:"vue-ui-timer-controls"},ne=["title"],le=["title"],ue=["title"],ie=["title"],ce=["title"],de={__name:"vue-ui-timer",props:{config:{type:Object,default(){return{}}}},emits:["start","pause","reset","restart","lap"],setup(R,{expose:P,emit:T}){const{vue_ui_timer:B}=w.useConfig(),S=R,f=T,g=e.ref(null),M=e.ref(null),N=e.ref(null),n=e.ref(null),y=e.ref(w.createUid()),u=e.ref(0);e.onMounted(()=>{c()});function c(){if(t.value.responsive){const a=D.throttle(()=>{const{width:l,height:i}=D.useResponsive({chart:g.value,title:t.value.style.title.text?M.value:null,legend:N.value});r.value.width=l,r.value.height=i,r.value.tracker.core=w.translateSize({relator:Math.min(l,i),adjuster:t.value.style.width,source:6*t.value.stopwatch.tracker.radiusRatio,threshold:1,fallback:1}),r.value.tracker.aura=w.translateSize({relator:Math.min(l,i),adjuster:t.value.style.width,source:12*t.value.stopwatch.tracker.aura.radiusRatio,threshold:1,fallback:1}),r.value.label=w.translateSize({relator:Math.min(l,i),adjuster:t.value.style.width,source:t.value.stopwatch.label.fontSize,threshold:10,fallback:10})});n.value=new ResizeObserver(a),n.value.observe(g.value.parentNode)}}e.onBeforeUnmount(()=>{n.value&&n.value.disconnect()});const t=e.computed({get:()=>h(),set:a=>a});function h(){return j.useNestedProp({userConfig:S.config,defaultConfig:B})}e.watch(()=>S.config,a=>{t.value=h(),c(),u.value+=1},{deep:!0});const b=e.computed(()=>{if(t.value.stopwatch.showHours&&t.value.stopwatch.showHundredth)return"00:00:00.00";if(t.value.stopwatch.showHours&&!t.value.stopwatch.showHundredth)return"00:00:00";if(!t.value.stopwatch.showHours&&t.value.stopwatch.showHundredth)return"00:00.00";if(!t.value.stopwatch.showHours&&!t.value.stopwatch.showHundredth)return"00:00"}),r=e.ref({height:t.value.style.height,width:t.value.style.width,tracker:{core:6*t.value.stopwatch.tracker.radiusRatio,aura:12*t.value.stopwatch.tracker.aura.radiusRatio},label:t.value.stopwatch.label.fontSize}),o=e.ref(0),k=new W(a=>F(a),10,"",t.value.stopwatch.showHundredth,t.value.stopwatch.showHours),V=e.ref(!0),s=e.ref(!1),d=e.ref(!1);function x(){f("start"),V.value&&k.start(),V.value=!1,s.value=!0}function z(){s.value&&(f("reset"),k.stop(),m.value=[],V.value=!0,s.value=!1)}function I(){d.value=!d.value,f("pause",o.value),k.pause()}function $(){s.value&&(d.value=!1,f("restart"),m.value=[],k.restart())}const m=e.ref([]);async function E(){if(!s.value||d.value)return;const a=await k.lap();a&&(m.value.push(a),f("lap",m.value))}function F({timestamp:a,elapsed:l,formatted:i}){o.value={timestamp:a,elapsed:l,formatted:i}}const p=e.computed(()=>Math.min(r.value.width,r.value.height)/2.5*t.value.stopwatch.track.radiusRatio);function H(a,l){const _=360/(l*1e3);return a*_%360}function A(a){let l=a*(Math.PI/180),i=r.value.width/2+p.value*Math.cos(l),_=r.value.height/2+p.value*Math.sin(l);return{cx:i,cy:_}}const v=e.computed(()=>{const a=H(o.value.elapsed,t.value.stopwatch.cycleSeconds),{cx:l,cy:i}=A(a-90),_=a>180?1:0;return{cx:l||r.value.width/2,cy:i||r.value.height/2-p.value,largeArcFlag:_,sweepFlag:1}});return P({start:x,pause:I,reset:z,restart:$,lap:E}),(a,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"timerChart",ref:g,class:"vue-ui-timer",style:e.normalizeStyle({fontFamily:e.unref(t).style.fontFamily,width:"100%",height:e.unref(t).responsive?"100%":"auto",textAlign:"center"})},[e.unref(t).style.title.text?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"chartTitle",ref:M,style:e.normalizeStyle({width:"100%",background:e.unref(t).style.backgroundColor})},[(e.openBlock(),e.createBlock(O._sfc_main,{key:`title_${e.unref(u)}`,config:{title:{cy:"title",...e.unref(t).style.title},subtitle:{cy:"subtitle",...e.unref(t).style.title.subtitle}}},null,8,["config"]))],4)):e.createCommentVNode("",!0),(e.openBlock(),e.createElementBlock("svg",{xmlns:e.unref(w.XMLNS),viewBox:`0 0 ${e.unref(r).width<=0?10:e.unref(r).width} ${e.unref(r).height<=0?10:e.unref(r).height}`,style:e.normalizeStyle({maxWidth:"100%",overflow:"visible",background:e.unref(t).style.backgroundColor})},[e.createVNode(q._sfc_main),a.$slots["chart-background"]?(e.openBlock(),e.createElementBlock("foreignObject",{key:0,x:0,y:0,width:e.unref(r).width<=0?10:e.unref(r).width,height:e.unref(r).height<=0?10:e.unref(r).height,style:{pointerEvents:"none"}},[e.renderSlot(a.$slots,"chart-background",{},void 0,!0)],8,X)):e.createCommentVNode("",!0),e.unref(t).stopwatch.tracker.gradient.show?(e.openBlock(),e.createElementBlock("defs",J,[e.createElementVNode("radialGradient",{id:`tracker_gradient_${e.unref(y)}`,cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"},[e.createElementVNode("stop",{offset:"0%","stop-color":e.unref(t).stopwatch.tracker.gradient.color},null,8,Q),e.createElementVNode("stop",{offset:"100%","stop-color":e.unref(t).stopwatch.tracker.fill},null,8,Y)],8,K)])):e.createCommentVNode("",!0),e.createElementVNode("circle",{cx:e.unref(r).width/2,cy:e.unref(r).height/2,r:e.unref(p),fill:e.unref(t).stopwatch.track.fill,stroke:e.unref(t).stopwatch.track.stroke,"stroke-width":e.unref(t).stopwatch.track.strokeWidth},null,8,Z),e.unref(t).stopwatch.cycleTrack.show?(e.openBlock(),e.createElementBlock("path",{key:2,d:`M ${e.unref(r).width/2},${e.unref(r).height/2-e.unref(p)} A ${e.unref(p)},${e.unref(p)} 0 ${e.unref(v).largeArcFlag},${e.unref(v).sweepFlag} ${e.unref(v).cx},${e.unref(v).cy}`,stroke:e.unref(t).stopwatch.cycleTrack.stroke,"stroke-width":e.unref(t).stopwatch.cycleTrack.strokeWidth,"stroke-linecap":"round",fill:"none"},null,8,ee)):e.createCommentVNode("",!0),e.createElementVNode("circle",e.mergeProps(e.unref(v),{r:e.unref(r).tracker.core,fill:e.unref(t).stopwatch.tracker.gradient.show?`url(#tracker_gradient_${e.unref(y)})`:e.unref(t).stopwatch.tracker.fill,stroke:e.unref(t).stopwatch.tracker.stroke,"stroke-width":e.unref(t).stopwatch.tracker.strokeWidth}),null,16,te),e.unref(t).stopwatch.tracker.aura.show?(e.openBlock(),e.createElementBlock("circle",e.mergeProps({key:3},e.unref(v),{r:e.unref(r).tracker.aura,fill:`${e.unref(t).stopwatch.tracker.aura.fill}20`,stroke:e.unref(t).stopwatch.tracker.aura.stroke,"stroke-width":e.unref(t).stopwatch.tracker.aura.strokeWidth}),null,16,re)):e.createCommentVNode("",!0),a.$slots.time?(e.openBlock(),e.createElementBlock("foreignObject",{key:4,x:e.unref(r).width/2,y:e.unref(r).height/2,height:"0.1",width:"0.1",style:{overflow:"visible"}},[e.renderSlot(a.$slots,"time",e.normalizeProps(e.guardReactiveProps({...e.unref(o)})),void 0,!0)],8,ae)):(e.openBlock(),e.createElementBlock("text",{key:5,x:e.unref(r).width/2,y:e.unref(r).height/2+e.unref(r).label/4,"font-size":e.unref(r).label,"text-anchor":"middle",fill:e.unref(t).stopwatch.label.color,"font-weight":e.unref(t).stopwatch.label.bold?"bold":"normal",style:{"font-variant-numeric":"tabular-nums !important"}},e.toDisplayString(e.unref(o).formatted||e.unref(b)),9,se))],12,G)),e.createElementVNode("div",{ref_key:"chartLegend",ref:N,style:e.normalizeStyle({width:"100%",backgroundColor:e.unref(t).stopwatch.legend.backgroundColor})},[a.$slots.controls?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",oe,[e.unref(t).stopwatch.legend.buttons.start?(e.openBlock(),e.createElementBlock("button",{key:0,title:e.unref(t).stopwatch.legend.buttonTitles.start,onClick:x,class:"vue-ui-timer-button",style:e.normalizeStyle({opacity:e.unref(s)?.2:1,cursor:e.unref(s)?"default":"pointer"})},[e.createVNode(C.default,{name:"play",stroke:e.unref(t).stopwatch.legend.buttons.iconColor},null,8,["stroke"])],12,ne)):e.createCommentVNode("",!0),e.unref(t).stopwatch.legend.buttons.pause?(e.openBlock(),e.createElementBlock("button",{key:1,title:e.unref(d)?e.unref(t).stopwatch.legend.buttonTitles.resume:e.unref(t).stopwatch.legend.buttonTitles.pause,onClick:I,class:"vue-ui-timer-button",style:e.normalizeStyle({opacity:e.unref(s)?1:.2,cursor:e.unref(s)?"pointer":"default"})},[e.createVNode(C.default,{name:"pause",stroke:e.unref(t).stopwatch.legend.buttons.iconColor},null,8,["stroke"])],12,le)):e.createCommentVNode("",!0),e.unref(t).stopwatch.legend.buttons.reset?(e.openBlock(),e.createElementBlock("button",{key:2,title:e.unref(t).stopwatch.legend.buttonTitles.reset,onClick:z,class:"vue-ui-timer-button",style:e.normalizeStyle({opacity:e.unref(s)?1:.2,cursor:e.unref(s)?"pointer":"default"})},[e.createVNode(C.default,{name:"stop",stroke:e.unref(t).stopwatch.legend.buttons.iconColor},null,8,["stroke"])],12,ue)):e.createCommentVNode("",!0),e.unref(t).stopwatch.legend.buttons.restart?(e.openBlock(),e.createElementBlock("button",{key:3,title:e.unref(t).stopwatch.legend.buttonTitles.restart,onClick:$,class:"vue-ui-timer-button",style:e.normalizeStyle({opacity:e.unref(s)?1:.2,cursor:e.unref(s)?"pointer":"default"})},[e.createVNode(C.default,{name:"restart",stroke:e.unref(t).stopwatch.legend.buttons.iconColor},null,8,["stroke"])],12,ie)):e.createCommentVNode("",!0),e.unref(t).stopwatch.legend.buttons.lap?(e.openBlock(),e.createElementBlock("button",{key:4,title:e.unref(t).stopwatch.legend.buttonTitles.lap,onClick:E,class:"vue-ui-timer-button",style:e.normalizeStyle({opacity:e.unref(s)&&!e.unref(d)?1:.2,cursor:e.unref(s)&&!e.unref(d)?"pointer":"default"})},[e.createVNode(C.default,{name:"lap",stroke:e.unref(t).stopwatch.legend.buttons.iconColor},null,8,["stroke"])],12,ce)):e.createCommentVNode("",!0)])),e.renderSlot(a.$slots,"controls",e.normalizeProps(e.guardReactiveProps({start:x,pause:I,reset:z,restart:$,lap:E,laps:e.unref(m),isRunning:e.unref(s),isPaused:e.unref(d),...e.unref(o)})),void 0,!0),e.renderSlot(a.$slots,"laps",e.normalizeProps(e.guardReactiveProps({laps:e.unref(m),lap:E,isRunning:e.unref(s),isPaused:e.unref(d),...e.unref(o)})),void 0,!0)],4)],4))}},fe=U._export_sfc(de,[["__scopeId","data-v-a84cd987"]]);exports.default=fe;