vue-clock-lonlyape-v3/dist/vue-clock.umd.cjs

a clock component for vue3

(function(v,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(v=typeof globalThis<"u"?globalThis:v||self,u(v["vue-clock"]={},v.Vue))})(this,function(v,u){"use strict";const x=u.defineComponent({__name:"clock",props:{option:{},width:{},height:{},adaptive:{type:Boolean},timezone:{},time:{},border:{},background:{},dial:{},number:{},needle:{}},emits:["timeChange"],setup(g,{emit:D}){const s={adaptive:!0,timezone:"",time:{isStatic:!1,timestamp:0},border:{type:"circle",width:300,height:300,lineWidth:2,color:"#bbb"},background:{color:"",image:""},dial:{isDial:!0,distance:0,maxLength:8,minLength:5,maxWidth:3,minWidth:2,color:"#888"},number:{isNumber:!0,type:"arabic",color:"#777",fontSize:"19px",fontWeight:"normal",fontFamily:"微软雅黑",radius:125},needle:{second:{length:110,color:"#aaa",lineWidth:3,longOut:5},minute:{length:100,color:"#999",lineWidth:4,longOut:5},hour:{length:70,color:"#888",lineWidth:4,longOut:5}}},C=D,S=g,l=u.computed(()=>{var c,p,z,T,N,P;let e={...S};Object.keys(e).forEach(A=>{e[A]===void 0&&delete e[A]});var a={...s.time,...e.time},t={...s.border,...e.border},r={...s.background,...e.background},i={...s.dial,...e.dial},o={...s.number,...e.number},d={second:{...(c=s.needle)==null?void 0:c.second,...(p=e.needle)==null?void 0:p.second},minute:{...(z=s.needle)==null?void 0:z.minute,...(T=e.needle)==null?void 0:T.minute},hour:{...(N=s.needle)==null?void 0:N.hour,...(P=e.needle)==null?void 0:P.hour}};return{...S,time:a,border:t,background:r,dial:i,number:o,needle:d}}),w=u.ref(),h=u.ref(),f=u.ref();var n={},O={},y={};const W=u.ref({});u.onBeforeMount(()=>{u.nextTick(()=>{n=h.value.getContext("2d"),I(),M(),l.value.time.isStatic||(O=setInterval(M,1e3)),b(),setTimeout(R,100)})}),u.watch(l,()=>{l.value.time.isStatic&&clearInterval(O),b()},{deep:!0}),u.watch(f,b);function R(){const e=JSON.parse(JSON.stringify(l.value)),a=e.border.width;var t=new ResizeObserver(r=>{r.forEach(i=>{let o=i.contentRect,d=l.value;k(d,e,o.width-6,a),I(),b()})});t.observe(w.value)}function k(e,a,t,r){if(l.value.adaptive)for(let i in e){let o=e[i],d=a[i],c=t/r<1?t/r:1;typeof o=="number"?e[i]=d*c:typeof o=="object"?k(o,d,t,r):i=="fontSize"&&(e[i]=d.replace(/^\d*/,p=>p*c))}}function b(){var e,a,t;V(),k(l.value,l.value,((e=h.value)==null?void 0:e.width)-6,((t=(a=l.value)==null?void 0:a.border)==null?void 0:t.width)||1),L(),j(),E(),$(),J()}function V(){n==null||n.clearRect(0,0,h.value.width,h.value.width)}function I(){var e={};l.value.width&&(/%$/.test(l.value.width)?e.width=l.value.width:e.width=Number(l.value.width)+"px"),l.value.height?/%$/.test(l.value.height)?e.height=l.value.height:e.height=Number(l.value.height)+"px":e.height="600px",W.value=e,h.value.width=e.width?Number(e.width.split("px")[0]):w.value.clientWidth,h.value.height=Number(e.height.split("px")[0])}function j(){n.save(),n.translate(h.value.width/2,h.value.height/2),n.beginPath();let e=l.value.border.width,a=l.value.border.height;l.value.border.type=="rectangle"?n.rect(-e/2,-a/2,e,a):n.arc(0,0,e/2,0,Math.PI*2,!0),n.closePath(),n.strokeStyle=l.value.border.color,n.lineWidth=l.value.border.lineWidth,n.stroke(),n.restore()}function L(){n.save(),n.beginPath(),n.translate(h.value.width/2,h.value.height/2);let e=l.value.border.width,a=l.value.border.height;var t,r;if(l.value.border.type=="rectangle"?(n.rect(-e/2,-a/2,e,a),t=-e/2,r=-a/2):(n.arc(0,0,e/2,0,Math.PI*2,!0),t=-e/2,r=-e/2),l.value.background.color&&(n.fillStyle=l.value.background.color,n.fill()),l.value.background.image){var i=new Image;y.bgImg?i=y.bgImg:(i.src=l.value.background.image,i.onload=function(){console.log("img loaded"),y.bgImg=i});var o,d,c;i.width>=i.height?(o=(i.width-i.height)/2,d=0,c=i.height):(o=0,d=(i.height-i.width)/2,c=i.width),n.clip(),n.drawImage(i,o,d,c,c,t,r,-t*2,-r*2)}n.closePath(),n.restore()}function E(){if(l.value.dial.isDial){var e=Math.PI*2/60,a=0,t=l.value.border||{},r=l.value.dial||{},i=l.value.dial.distance?l.value.dial.distance+t.lineWidth/2:t.lineWidth/2;l.value.dial.distance==0&&(i=t.lineWidth/2);var o={x:0,y:t.width/2-i};for(let d=0;d<60;d++)a=e*d,n.save(),n.translate(h.value.width/2,h.value.height/2),d%5==0?m(o,a,r.maxLength-o.y,r.color,r.maxWidth):m(o,a,r.minLength-o.y,r.color,r.minWidth),n.restore()}}function $(){if(l.value.number.isNumber){var e=[];for(let t=1;t<13;t++)e[t-1]=t+3,t+3>12&&(e[t-1]=3-(12-t));if(l.value.number.type=="roman")for(let t=0;t<12;t++)e[t]=F(e[t]);var a=Math.PI/6;n.save(),n.fillStyle=l.value.number.color,n.font=l.value.number.fontWeight+" "+l.value.number.fontSize+" "+l.value.number.fontFamily,n.textBaseline="middle",n.textAlign="center",n.translate(h.value.width/2,h.value.height/2);for(let t=0;t<e.length;t++)n.fillText(e[t],(l.value.number.radius||1)*Math.cos(a*(t+1)),(l.value.number.radius||1)*Math.sin(a*(t+1)));n.restore()}}function F(e){var a=["I","V","X","L","C","D","M"],t=e.toString().split("");for(let i=0;i<t.length;i++){var r=Number(t[t.length-1-i]);if(t[t.length-1-i]="",r>=5&&r<9){t[t.length-1-i]=a[2*i+1];for(let o=0;o<r-5;o++)t[t.length-1-i]+=a[2*i]}else if(r==9)t[t.length-1-i]=a[2*i]+a[2*i+2];else if(r==4)t[t.length-1-i]=a[2*i]+a[2*i+1];else for(let o=0;o<r;o++)t[t.length-1-i]+=a[2*i]}return t.join("")}function J(){var e=f.value.hAngle,a=f.value.mAngle,t=f.value.sAngle;n.save(),n.translate(h.value.width/2,h.value.height/2),m({x:0,y:l.value.needle.hour.longOut},e,l.value.needle.hour.length,l.value.needle.hour.color,l.value.needle.hour.lineWidth),m({x:0,y:l.value.needle.minute.longOut},a,l.value.needle.minute.length,l.value.needle.minute.color,l.value.needle.minute.lineWidth),m({x:0,y:l.value.needle.second.longOut},t,l.value.needle.second.length,l.value.needle.second.color,l.value.needle.second.lineWidth),n.restore()}function q(){let e=l.value.time.timestamp||new Date().getTime();var a=l.value.time.isStatic?new Date(e):new Date,t=a.getTime(),r;l.value.timezone===void 0||l.value.timezone===""?r=-a.getTimezoneOffset()/60:r=Number(l.value.timezone);var i=a.getTimezoneOffset()*6e4,o=t+i;return new Date(o+36e5*r)}function M(){var e=q(),a=e.getHours(),t=e.getMinutes(),r=e.getSeconds(),i=Math.PI*2*(r%60)/60,o=Math.PI*2*(t%60)/60+i/60,d=Math.PI*2*(a%12)/12+o/12;f.value={sAngle:i,mAngle:o,hAngle:d},C("timeChange",e)}function m(e,a,t,r,i){n.save(),n.beginPath(),n.rotate(a),n.moveTo(e.x,e.y),n.lineTo(0,-t),n.strokeStyle=r,n.lineWidth=i,n.stroke(),n.restore()}return(e,a)=>(u.openBlock(),u.createElementBlock("div",{ref_key:"$el",ref:w,class:"lonlyape-clock",style:u.normalizeStyle(W.value)},[u.createElementVNode("canvas",{ref_key:"canvas",ref:h},null,512)],4))}}),_=x,B={install(g){console.log(g),g.component("clock",x)}};v.clock=_,v.default=B,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});