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