|
|
|
|
"use strict";const t=require("../../../../common/vendor.js"),e="counterclockwise",r="clockwise",i={name:"zui-progress-circle",components:{},props:{size:{type:Number,default:180},position:{type:Number,default:0},range:{type:[Array],default:()=>[0,360]},direction:{type:String,default:r,validator:t=>[e,r].includes(t)},ringWidth:{type:Number,default:8},linecap:{type:String,default:"round"},texture:{type:[String,Array],default:()=>["#1BB507","#E2D8D8"]},pointer:String,pointerOffset:Number,fixOverlay:Boolean,debug:Boolean},data:()=>({}),computed:{preset(){const t={};return t.start=this.range[0],t.end=this.range[0]>this.range[1]?this.range[1]+360:this.range[1],t.ringRadius=(this.size-this.ringWidth)/2,t.ringCenter=this.size/2,t.ringPerimeter=2*Math.PI*t.ringRadius,t.ringLength=(t.end-t.start)*Math.PI*t.ringRadius/180,t.ringStart=t.start*Math.PI*t.ringRadius/180,t.ringEnd=t.end*Math.PI*t.ringRadius/180,/^(ccw|counterclockwise)$/i.test(this.direction)?t.direction=e:t.direction=r,t},textureFG(){const t=this.size;return"string"==typeof this.texture?this.parseTexture(this.texture,t):"[object Array]"===Object.prototype.toString.call(this.texture)?"number"==typeof this.texture[0]?this.parseTexture(this.texture,t):this.parseTexture(this.texture[0],t):this.parseTexture("#1BB507",t)},textureBG(){const t=this.size;return"string"==typeof this.texture?this.parseTexture(void 0,t):"[object Array]"===Object.prototype.toString.call(this.texture)?"number"==typeof this.texture[0]?this.parseTexture(void 0,t):this.parseTexture(this.texture[1],t):this.parseTexture("#E2D8D8",t)},hasBackground(){return!!this.textureBG},svgDataUrl(){let t=this.createSVG();return t=`data:image/svg+xml,${encodeURIComponent(t.replace(/ +/g," "))}`,t},style(){const t={width:`${this.size}px`,height:`${this.size}px`,"--zui-progress-circle-ring-size":`${this.size}px`,"--zui-progress-circle-ring-width":`${this.ringWidth}px`};return Object.keys(t).map((e=>`${e}:${t[e]}`)).join(";")},pointerStyle(){const t={},{start:e,end:r,ringRadius:i}=this.preset;let n=(r-e)*this.position+e;"round"!==this.linecap&&"butt"!==this.linecap||(n+=this.ringWidth/3*180/(Math.PI*i));const s=this.pointerOffset||0;return t["--zui-progress-circle-pointer-rotate"]=`translate(-${s}px, -50%) rotate(${n}deg)`,t["--zui-progress-circle-pointer-center"]=`${s}px 50%`,Object.keys(t).map((e=>`${e}:${t[e]}`)).join(";")}},methods:{parseTexture(t,e){if(!t)return;if(/^#[0-9a-f]+/i.test(t))return{type:"color",value:t};const r=(()=>{const t=999999*Math.random();return Math.round(t)+1e5})();return/Gradient>/i.test(t)?{type:"gradient",value:`url(#def_${r})`,def:t=/id="[^"]+"/.test(t)?t.replace(/id="[^"]+"/,`id="def_${r}"`):t.replace(/<(\w+Gradient) /,`<$1 id="def_${r}" `)}:"[object Array]"===Object.prototype.toString.call(t)?{type:"gradient",value:`url(#def_${r})`,def:t=this.createGradient(r,t.slice(1),t[0])}:{type:"pattern",value:`url(#def_${r})`,def:t=/<pattern /.test(t)?/id="[^"]+"/.test(t)?t.replace(/id="[^"]+"/,`id="def_${r}"`):t.replace(/<pattern /,`<$1 id="def_${r}" `):this.createPattern(`def_${r}`,t,e)}},createGradient(t,e,r){const i=100/(e.length-1);return`<linearGradient id="def_${t}" x1="0%" y1="0%" x2="100%" y2="64.9%" gradientTransform="rotate(${r})">\n ${new Array(e.length).fill(null).map(((t,r)=>`<stop offset="${i*r*100}%" stop-color="${e[r]}" />`)).join("")}\n </linearGradient>`},createPattern:(t,e,r)=>`<pattern id="${t}" patternUnits="userSpaceOnUse" width="100%" height="100%">\n <image xlink:href="${e}" x="0" y="0" width="100%" height="100%"/>\n </pattern>`,createCircle(t,e,r){const{ringCenter:i,ringRadius:n,fixOverlay:s}=this.preset,a={cx:i,cy:i,r:n,"stroke-width":this.ringWidth,stroke:t&&t.value,"stroke-linecap":this.linecap,"stroke-dasharray":e.join(",")};if(s){const t="fg"===r?this.ringWidth:this.ringWidth-1;a["stroke-width"]=t>8?t:8}return`<circle fill="none" stroke-dashoffset="1" ${Object.keys(a).map((t=>a[t]?`${t}="${a[t]}"`:"")).join(" ")}></circle>`},generateDashArray(t){const{direction:r,ringStart:i,ringPerimeter:n,ringLength:s}=this.preset;let a=r===e?i+(1-t)*s:i,o=0,h=0,d=0;h=1+a,d=t*s;const c=a+t*s;return c>n?(o=c-n,h=a-o):o=0,[o,h,d,n]},createSVG(){const t=this.hasBackground?this.createCircle(this.textureBG,this.generateDashArray(1)):"",e=this.createCircle(this.textureFG,this.generateDashArray(this.position),"fg"),r=[this.textureFG.def||"",this.textureBG&&this.textureBG.def||""];return`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${this.size}" height="${this.size}">\n <defs>\n ${r.join("\n")}\n </defs>\n <g>\n ${t}\n ${e}\n </g>\n</svg>`}}};const n=t._export_sfc(i,[["render",function(e,r,i,n,s,a){return t.e({a:i.pointer},i.pointer?{b:i.pointer,c:t.s(a.pointerStyle)}:{},{d:a.svgDataUrl,e:i.debug},(i.debug,{}),{f:t.n(i.debug?"debug":""),g:t.s(a.style)})}],["__scopeId","data-v-429415b9"]]);wx.createComponent(n);
|
尚政杰