@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
2 lines • 3.47 kB
JavaScript
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./progress-circle-constants.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtProgressCircle`,props:{ariaLabel:{type:String,required:!0},progress:{type:Number,default:0,validator:e=>e>=0&&e<=100},size:{type:String,default:`500`,validator:e=>Object.keys(t.PROGRESS_CIRCLE_SIZES).includes(e)},kind:{type:String,default:`default`,validator:e=>Object.keys(t.PROGRESS_CIRCLE_KINDS).includes(e)}},data(){return{strokeWidth:3.25,uid:Math.random().toString(36).substring(2,9)}},computed:{isAi(){return this.kind===`ai`},aiGradientId(){return`progress-circle-ai-gradient-${this.uid}`},fillStrokeStyle(){return this.isAi?{stroke:`url(#${this.aiGradientId})`}:{}},sizeClass(){return t.PROGRESS_CIRCLE_SIZES[this.size]},kindClass(){return t.PROGRESS_CIRCLE_KINDS[this.kind]},circleRadius(){return 12-this.strokeWidth/2},circleCircumference(){return 2*Math.PI*this.circleRadius},circlePath(){let e=this.circleRadius,t=12-e;return`M 12 ${t} A ${e} ${e} 0 0 1 12 ${12+e} A ${e} ${e} 0 0 1 12 ${t} Z`},cssVars(){let e=this.circleCircumference,t=e*(this.progress>0&&this.progress<5?5:this.progress)/100,n=this.strokeWidth,r=n/2,i=this.progress>0&&this.progress<100,a=i?n:0;return{"--stroke-dasharray":!i&&this.progress>=100?`none`:e,"--fill-dashoffset":e-Math.max(0,t-a),"--fill-rotate":`${i?r/e*360:0}deg`,"--track-dasharray":!i&&this.progress<=0?`none`:`${Math.max(0,e-t-a)} ${e}`,"--track-dashoffset":-(t+(i?r:0))}}}},i=[`aria-label`,`aria-valuenow`],a={key:0},o=[`id`],s=[`d`,`stroke-width`],c=[`d`,`stroke-width`];function l(e,t,r,l,u,d){return(0,n.openBlock)(),(0,n.createElementBlock)(`div`,{class:(0,n.normalizeClass)([`d-progress-circle`,[d.sizeClass,d.kindClass]]),role:`progressbar`,"aria-label":r.ariaLabel,tabindex:`-1`,"aria-valuenow":r.progress,"aria-valuemin":`0`,"aria-valuemax":`100`,"data-qa":`dt-progress-circle`},[((0,n.openBlock)(),(0,n.createElementBlock)(`svg`,{class:`d-progress-circle__bar`,style:(0,n.normalizeStyle)(d.cssVars),viewBox:`0 0 24 24`},[d.isAi?((0,n.openBlock)(),(0,n.createElementBlock)(`defs`,a,[(0,n.createElementVNode)(`linearGradient`,{id:d.aiGradientId,x1:`0%`,y1:`0%`,x2:`100%`,y2:`100%`},[...t[0]||(t[0]=[(0,n.createElementVNode)(`stop`,{offset:`0%`,"stop-color":`var(--dt-color-brand-gold)`},null,-1),(0,n.createElementVNode)(`stop`,{offset:`33%`,"stop-color":`var(--dt-color-brand-red)`},null,-1),(0,n.createElementVNode)(`stop`,{offset:`66%`,"stop-color":`var(--dt-color-brand-magenta)`},null,-1),(0,n.createElementVNode)(`stop`,{offset:`100%`,"stop-color":`var(--dt-color-brand-purple)`},null,-1)])],8,o)])):(0,n.createCommentVNode)(``,!0),r.progress<=95?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:1,d:d.circlePath,class:`d-progress-circle__shape d-progress-circle__shape--track`,fill:`none`,"stroke-width":u.strokeWidth,"stroke-linecap":`round`},null,8,s)):(0,n.createCommentVNode)(``,!0),r.progress>0?((0,n.openBlock)(),(0,n.createElementBlock)(`path`,{key:2,d:d.circlePath,class:`d-progress-circle__shape d-progress-circle__shape--fill`,fill:`none`,"stroke-width":u.strokeWidth,"stroke-linecap":`round`,style:(0,n.normalizeStyle)(d.fillStrokeStyle)},null,12,c)):(0,n.createCommentVNode)(``,!0)],4))],10,i)}var u=e.t(r,[[`render`,l]]);exports.default=u;
//# sourceMappingURL=progress-circle.cjs.map