vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
15 lines (14 loc) • 6.28 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),v=require("../utils/index.cjs"),C={class:"progress-inner"},$={key:0,class:"progress-success"},B={key:0,class:"icon-svg",focusable:"false","data-icon":"check-circle",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},S={key:1,class:"progress-success-info"},w={key:1,class:"progress-text"},x={class:"progress-circle",viewBox:"0 0 100 100"},z={key:0},E=["id"],N=["stop-color"],V=["stop-color"],T=["d","stroke-linecap","stroke-width"],b=["d","stroke-linecap","stroke-width","opacity"],I={key:0,class:"icon-svg",focusable:"false","data-icon":"check",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896"},M={key:1,class:"progress-success-info"},P={key:2,class:"progress-text"},D=e.defineComponent({__name:"Progress",props:{width:{default:void 0},percent:{default:0},lineSize:{default:void 0},lineColor:{default:void 0},lineCap:{default:"round"},showInfo:{type:Boolean,default:!0},infoSize:{default:void 0},success:{default:void 0},format:{type:Function,default:r=>r+"%"},type:{default:"line"}},setup(r){const o=r,{colorPalettes:h}=v.useInject("Progress"),g=v.useSlotsExist(["success"]),i=e.computed(()=>{if(o.width===void 0){if(o.type==="line")return"100%";if(o.type==="circle")return"120px"}return typeof o.width=="number"?`${o.width}px`:o.width}),s=e.computed(()=>{if(o.lineSize===void 0){if(o.type==="line")return 8;if(o.type==="circle")return 6}return o.lineSize}),a=e.computed(()=>{if(o.infoSize===void 0){if(o.type==="line")return"14px";if(o.type==="circle")return"24px"}return`${o.infoSize}px`}),n=e.computed(()=>(100-s.value)*Math.PI),u=e.computed(()=>{const t=100-s.value;return`M 50,50 m 0,-${t/2}
a ${t/2},${t/2} 0 1 1 0,${t}
a ${t/2},${t/2} 0 1 1 0,-${t}`}),l=e.computed(()=>o.lineColor!==void 0&&typeof o.lineColor!="string"),d=e.computed(()=>o.lineColor===void 0?h.value[5]:typeof o.lineColor=="string"?o.lineColor:`linear-gradient(to ${o.lineColor.direction||"right"}, ${o.lineColor["0%"]||o.lineColor.from}, ${o.lineColor["100%"]||o.lineColor.to})`),p=e.computed(()=>{if(l.value){const t=o.lineColor;return t.direction===void 0||t.direction==="right"?`right-${t["0%"]||t.from}-${t["100%"]||t.to}`:`left-${t["100%"]||t.to}-${t["0%"]||t.from}`}return null}),k=e.computed(()=>{if(l.value){const t=o.lineColor;return t.direction===void 0||t.direction==="right"?t["0%"]||t.from:t["100%"]||t.to}}),y=e.computed(()=>{if(l.value){const t=o.lineColor;return!t.direction||t.direction==="right"?t["100%"]||t.to:t["0%"]||t.from}}),f=e.computed(()=>o.format(o.percent>100?100:o.percent)),m=e.computed(()=>g.success||o.success);return(t,c)=>r.type==="line"?(e.openBlock(),e.createElementBlock("div",{key:0,class:"progress-line-wrap",style:e.normalizeStyle(`
--progress-size: ${i.value};
--progress-primary-color: ${d.value};
--progress-success-color: #52c41a;
--progress-font-size: ${a.value};
--progress-border-radius: ${r.lineCap==="round"?"100px":0};
`)},[e.createElementVNode("div",C,[e.createElementVNode("div",{class:e.normalizeClass(["progress-bg",{"line-success":r.percent>=100&&!l.value}]),style:e.normalizeStyle(`width: ${r.percent>=100?100:r.percent}%; height: ${s.value}px;`)},null,6)]),r.showInfo?(e.openBlock(),e.createBlock(e.Transition,{key:0,name:"fade",mode:"out-in"},{default:e.withCtx(()=>[r.percent>=100?(e.openBlock(),e.createElementBlock("span",$,[m.value===void 0?(e.openBlock(),e.createElementBlock("svg",B,[...c[0]||(c[0]=[e.createElementVNode("path",{d:"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"},null,-1)])])):(e.openBlock(),e.createElementBlock("p",S,[e.renderSlot(t.$slots,"success",{},()=>[e.createTextVNode(e.toDisplayString(r.success),1)],!0)]))])):(e.openBlock(),e.createElementBlock("p",w,[e.renderSlot(t.$slots,"format",{percent:r.percent},()=>[e.createTextVNode(e.toDisplayString(f.value),1)],!0)]))]),_:3})):e.createCommentVNode("",!0)],4)):(e.openBlock(),e.createElementBlock("div",{key:1,class:"progress-circle-wrap",style:e.normalizeStyle(`
--progress-size: ${i.value};
--progress-primary-color: ${l.value?`url(#${p.value})`:d.value};
--progress-success-color: #52c41a;
--progress-font-size: ${a.value};
`)},[(e.openBlock(),e.createElementBlock("svg",x,[l.value?(e.openBlock(),e.createElementBlock("defs",z,[e.createElementVNode("linearGradient",{id:`${p.value}`,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[e.createElementVNode("stop",{offset:"0%","stop-color":k.value},null,8,N),e.createElementVNode("stop",{offset:"100%","stop-color":y.value},null,8,V)],8,E)])):e.createCommentVNode("",!0),e.createElementVNode("path",{d:u.value,"stroke-linecap":r.lineCap,class:"circle-trail","stroke-width":s.value,style:e.normalizeStyle(`stroke-dasharray: ${n.value}px, ${n.value}px;`),"fill-opacity":"0"},null,12,T),e.createElementVNode("path",{d:u.value,"stroke-linecap":r.lineCap,class:e.normalizeClass(["circle-path",{"circle-path-success":r.percent>=100&&!l.value}]),"stroke-width":s.value,style:e.normalizeStyle(`stroke-dasharray: ${r.percent/100*n.value}px, ${n.value}px;`),opacity:r.percent===0?0:1,"fill-opacity":"0"},null,14,b)])),r.showInfo?(e.openBlock(),e.createBlock(e.Transition,{key:0,name:"fade",mode:"out-in"},{default:e.withCtx(()=>[m.value===void 0&&r.percent>=100?(e.openBlock(),e.createElementBlock("svg",I,[...c[1]||(c[1]=[e.createElementVNode("path",{d:"M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"},null,-1)])])):r.percent>=100?(e.openBlock(),e.createElementBlock("p",M,[e.renderSlot(t.$slots,"success",{},()=>[e.createTextVNode(e.toDisplayString(r.success),1)],!0)])):(e.openBlock(),e.createElementBlock("p",P,[e.renderSlot(t.$slots,"format",{percent:r.percent},()=>[e.createTextVNode(e.toDisplayString(f.value),1)],!0)]))]),_:3})):e.createCommentVNode("",!0)],4))}});exports.default=D;