@ophiuchus/circle
Version:
7 lines (6 loc) • 3.85 kB
JavaScript
/*!
* @ophiuchus/circle v1.0.0 Sun Sep 26 2021 14:35:57 GMT+0800 (中国标准时间)
* (c) 2021 @mws_ophiuchus
* Released under the MIT License.
*/
import t from"vue";function e(t,s){return s?"string"==typeof s?` ${t}--${s}`:Array.isArray(s)?s.reduce(((s,i)=>s+e(t,i)),""):Object.keys(s).reduce(((i,r)=>i+(s[r]?e(t,r):"")),""):""}function s(t){return function(s,i){return s&&"string"!=typeof s&&(i=s,s=""),`${s=s?`${t}__${s}`:t}${e(s,i)}`}}const i=/-(\w)/g;const r={methods:{slots(t="default",e){const{$slots:s,$scopedSlots:i}=this,r=i[t];return r?r(e):s[t]}}};function n(t){const{name:e}=this;t.component(e,this),t.component(`-${e}`.replace(i,((t,e)=>e.toUpperCase())),this)}function a(t){return{functional:!0,props:t.props,model:t.model,render:(e,s)=>t(e,s.props,function(t){const e=t.scopedSlots||t.data.scopedSlots||{},s=t.slots();return Object.keys(s).forEach((t=>{e[t]||(e[t]=()=>s[t])})),e}(s),s)}}function o(t){return function(e){return"function"==typeof e&&(e=a(e)),e.functional||(e.mixins=e.mixins||[],e.mixins.push(r)),e.name=t,e.install=n,e}}const h=t.prototype.$isServer;let l=Date.now();const c=h?global:window,u=c.requestAnimationFrame||function(t){const e=Date.now(),s=Math.max(0,16-(e-l)),i=setTimeout(t,s);return l=e+s,i},d=c.cancelAnimationFrame||c.clearTimeout;function p(t){return u.call(c,t)}const[f,m]=[o(y="sf-"+(y="circle")),s(y)];var y;let $=0;function x(t){return Math.min(Math.max(t,0),100)}var S=f({props:{text:String,size:[Number,String],color:[String,Object],layerColor:String,strokeLinecap:String,value:{type:Number,default:0},speed:{type:[Number,String],default:0},fill:{type:String,default:"none"},rate:{type:[Number,String],default:100},strokeWidth:{type:[Number,String],default:40},clockwise:{type:Boolean,default:!0}},beforeCreate(){this.uid="sf-circle-gradient-"+$++},computed:{style(){const t=function(t){if(null!=t)return e=t=String(t),/^\d+(\.\d+)?$/.test(e)?`${t}px`:t;var e}(this.size);return{width:t,height:t}},path(){return function(t,e){const s=t?1:0;return`M ${e/2} ${e/2} m 0, -500 a 500, 500 0 1, ${s} 0, 1000 a 500, 500 0 1, ${s} 0, -1000`}(this.clockwise,this.viewBoxSize)},viewBoxSize(){return+this.strokeWidth+1e3},layerStyle(){return{fill:`${this.fill}`,stroke:`${this.layerColor}`,strokeWidth:`${this.strokeWidth}px`}},hoverStyle(){const t=3140*this.value/100;return{stroke:`${this.gradient?`url(#${this.uid})`:this.color}`,strokeWidth:+this.strokeWidth+1+"px",strokeLinecap:this.strokeLinecap,strokeDasharray:`${t}px 3140px`}},gradient(){return null!==(t=this.color)&&"object"==typeof t;var t},LinearGradient(){const t=this.$createElement;if(!this.gradient)return;const e=Object.keys(this.color).sort(((t,e)=>parseFloat(t)-parseFloat(e))).map(((e,s)=>t("stop",{key:s,attrs:{offset:e,"stop-color":this.color[e]}})));return t("defs",[t("linearGradient",{attrs:{id:this.uid,x1:"100%",y1:"0%",x2:"0%",y2:"0%"}},[e])])}},watch:{rate:{handler(t){var e;this.startTime=Date.now(),this.startRate=this.value,this.endRate=x(t),this.increase=this.endRate>this.startRate,this.duration=Math.abs(1e3*(this.startRate-this.endRate)/this.speed),this.speed?(e=this.rafId,d.call(c,e),this.rafId=p(this.animate)):this.$emit("input",this.endRate)},immediate:!0}},methods:{animate(){const t=Date.now(),e=Math.min((t-this.startTime)/this.duration,1)*(this.endRate-this.startRate)+this.startRate;this.$emit("input",x(parseFloat(e.toFixed(1)))),(this.increase?e<this.endRate:e>this.endRate)&&(this.rafId=p(this.animate))}},render(){const t=arguments[0];return t("div",{class:m(),style:this.style},[t("svg",{attrs:{viewBox:`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}},[this.LinearGradient,t("path",{class:m("layer"),style:this.layerStyle,attrs:{d:this.path}}),t("path",{attrs:{d:this.path},class:m("hover"),style:this.hoverStyle})]),this.slots()||this.text&&t("div",{class:m("text")},[this.text])])}});export default S;