t-fighting-design/lib/progress/src/index2.js

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./index3.js"),a=require("../../_utils/index3.js"),g=["aria-value"],f={key:0,class:"f-progress__text"},m=e.defineComponent({name:"FProgress"}),_=e.defineComponent({...m,props:d.Props,setup(i){const o=i,t=e.ref(!1),n=e.ref(null),u=e.computed(()=>{const{background:r,height:s,square:l}=o;return{height:a.sizeChange(s),background:r,borderRadius:l?"0px":"100px"}}),p=e.computed(()=>{const{percentage:r,color:s,square:l}=o;return{width:`${r}%`,background:s,borderRadius:l?"0px":"100px"}}),c=()=>t.value=n.value.clientHeight>=18&&o.textInside;return e.onMounted(()=>{c()}),(r,s)=>(e.openBlock(),e.createElementBlock("div",{role:"progressbar",class:e.normalizeClass(["f-progress",{"f-progress__liner":r.linear}]),style:e.normalizeStyle({width:e.unref(a.sizeChange)(r.width)}),"aria-value":r.percentage,"aria-valuemin":0,"aria-valuemax":100},[e.createElementVNode("div",{class:"f-progress__bar",style:e.normalizeStyle(e.unref(u))},[e.createElementVNode("div",{ref_key:"fillRef",ref:n,class:e.normalizeClass(["f-progress__fill",{[`f-progress__fill-${r.type}`]:r.type,"f-progress__stripe":r.stripe}]),style:e.normalizeStyle(e.unref(p))},[t.value&&r.showText?(e.openBlock(),e.createElementBlock("span",{key:0,class:"f-progress__percentage",style:e.normalizeStyle({color:r.textColor})},e.toDisplayString(r.percentage)+"% ",5)):e.createCommentVNode("",!0)],6)],4),!t.value&&r.showText?(e.openBlock(),e.createElementBlock("div",f,e.toDisplayString(r.percentage)+"% ",1)):e.createCommentVNode("",!0)],14,g))}});exports.default=_;