@farris/ui-vue 1.7.1 → 1.7.2-beta.2

package/components/progress/index.umd.cjs

@@ -1,3 +1,3 @@
-(function(g,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../common/index.umd.js"],t):(g=typeof globalThis<"u"?globalThis:g||self,t(g.progress={},g.Vue,g.common))})(this,function(g,t,j){"use strict";const I={progressType:{type:String,default:"line"},strokeWidth:{type:Number,default:0},size:{type:String,default:"default"},showInfo:{type:Boolean,default:!0},progressStatus:{type:String,default:"default"},successPercent:{type:Number,default:0},strokeColor:{type:String,default:""},strokeLinecap:{type:String,default:"round"},width:{type:Number,default:100},percent:{type:Number,default:20},enableBackgroundImg:{type:Boolean,default:!1},backgroundImg:{type:String,default:""},gapPosition:{type:String},gapDegree:{type:Number,default:0},format:{type:Function,default:(e,o)=>`${e}%`}};function V(e){function o(c){return+c.replace("%","")}function f(c){let n=[];return Object.keys(c).forEach(a=>{const i=c[a],k=o(a);isNaN(k)||n.push({key:k,value:i})}),n=n.sort((a,i)=>a.key-i.key),n}const h=t.computed(()=>!!e.strokeColor&&typeof e.strokeColor!="string"),l=t.computed(()=>{const{from:c="#59a1ff",to:n="#59a1ff",direction:a="to right",...i}=e.strokeColor;if(Object.keys(i).length!==0){const k=f(i).map(({key:b,value:P})=>`${P} ${b}%`).join(", ");return`linear-gradient(${a}, ${k})`}return`linear-gradient(${a}, ${c}, ${n})`}),r=t.computed(()=>f(e.strokeColor).map(({key:c,value:n})=>({offset:`${c}%`,color:n})));return{isGradient:h,linearGradient:l,circleGradient:r}}function v(e){return{strokeWidth:t.computed(()=>e.strokeWidth||(e.progressType==="line"&&e.size!=="small"?8:6))}}function O(e){return{formatPercentageText:t.computed(()=>e.format(e.percent,e.successPercent))}}function G(e,o,f,h){const{isCircleStyle:l}=o,{isGradient:r,linearGradient:c}=f,{strokeWidth:n}=h,a=t.computed(()=>{const s={"f-progress":!0,"f-progress-line":e.progressType==="line","ant-progress-small":e.size==="small","f-progress-show-info":e.showInfo,"f-progress-circle":l.value},u=`f-progress-status-${e.progressStatus}`;return s[u]=!0,s}),i=t.computed(()=>({width:`${e.width}px`,height:`${e.width}px`,"font-size":`${e.width*.15+6}px`,"f-progress-circle-gradient":r.value})),k=t.computed(()=>({"f-progress-inner":!0,"f-progress-circle-gradient":r.value})),b=0,P=t.computed(()=>b+1),x=t.computed(()=>{const s=50-n.value/2,u=e.gapPosition||(e.progressType==="circle"?"top":"bottom");let d=0,y=-s,p=0,m=s*-2;switch(u){case"left":d=-s,y=0,p=s*2,m=0;break;case"right":d=s,y=0,p=s*-2,m=0;break;case"bottom":y=s,m=s*2;break}return`M 50,50 m ${d},${y}
-                a ${s},${s} 0 1 1 ${p},${-m}
-                a ${s},${s} 0 1 1 ${-p},${m}`}),w=t.computed(()=>{const s=50-n.value/2,u=Math.PI*2*s,d=e.gapDegree||(e.progressType==="circle"?0:75);return{strokeDasharray:`${u-d}px ${u}px`,strokeDashoffset:`-${d/2}px`,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"}}),N=t.computed(()=>{const s=50-n.value/2,u=Math.PI*2*s,d=e.gapDegree||(e.progressType==="circle"?0:75),y=e.successPercent!==void 0&&e.successPercent!==null?[e.successPercent,e.percent]:[e.percent];return y.map((p,m)=>{const C=y.length===2&&m===0;return{stroke:r.value&&!C?`url(#gradient-${P.value})`:null,strokePathStyle:{stroke:r.value?null:C?"default":e.strokeColor,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",strokeDasharray:`${(p||0)/100*(u-d)}px ${u}px`,strokeDashoffset:`-${d/2}px`}}}).reverse()}),$=t.computed(()=>({width:`${e.percent}%`,"border-radius":e.strokeLinecap==="round"?"100px":"0",background:r.value?null:e.strokeColor,"background-image":r.value?c.value:null,height:`${n.value}px`}));return{progressClass:a,inCircleProgressBarStyle:i,inCircleProgressBarClass:k,pathString:x,trailPathStyle:w,progressCirclePaths:N,gradientId:P,inlineProgressBackgroundStyle:$}}function W(e){return{isCircleStyle:t.computed(()=>e.progressType==="circle"||e.progressType==="dashboard")}}function D(e){const o=t.computed(()=>{const l={"f-progress-text-icon":!0,"f-icon":!0},r=`f-icon-${e.progressStatus}`;return l[r]=!0,l}),f=t.computed(()=>{const l={"f-progress-text-icon":!0,"f-icon":!0},r=e.progressStatus==="success"?"f-icon-checkmark":"f-icon-x";return l[r]=!0,l}),h=t.computed(()=>e.progressStatus==="error"||e.progressStatus==="success");return{inlineProgrssStatusClass:o,circleProgrssStatusClass:f,shouldShowStatus:h}}function L(e){const o=t.computed(()=>({width:`${e.successPercent}%`,"border-radius":e.strokeLinecap==="round"?"100px":"0",height:`${e.strokeWidth}px`,"background-image":e.enableBackgroundImg?`url(${e.backgroundImg})`:null})),f=t.computed(()=>e.successPercent||e.successPercent===0);return{inlineProgressSuccessBackgroundStyle:o,shouldShowSuccessInlineProgressBackground:f}}const T=t.defineComponent({name:"FProgress",props:I,emits:[],setup(e){const o=t.ref(e.progressType),f=t.ref(e.showInfo),h=t.ref(e.percent),l=t.ref(e.strokeLinecap),r=V(e),{isGradient:c,circleGradient:n}=r,a=v(e),{strokeWidth:i}=a,{formatPercentageText:k}=O(e),b=W(e),{isCircleStyle:P}=b,{progressClass:x,inCircleProgressBarStyle:w,inCircleProgressBarClass:N,pathString:$,trailPathStyle:s,progressCirclePaths:u,gradientId:d,inlineProgressBackgroundStyle:y}=G(e,b,r,a),{inlineProgrssStatusClass:p,circleProgrssStatusClass:m,shouldShowStatus:C}=D(e),{inlineProgressSuccessBackgroundStyle:z,shouldShowSuccessInlineProgressBackground:F}=L(e);t.watch(()=>e.percent,S=>{h.value=S||0});function B(){return f.value&&t.createVNode("span",{class:"f-progress-text"},[C.value?t.createVNode("span",{class:P.value?m.value:p.value},null):k.value])}function K(){return t.createVNode(t.Fragment,null,[t.createVNode("div",{class:"f-progress-outer"},[t.createVNode("div",{class:"f-progress-inner"},[t.createVNode("div",{class:"f-progress-bg",style:y.value},null),F.value&&t.createVNode("div",{class:"f-progress-success-bg",style:z.value},null)])]),B()])}function q(){return t.createVNode("div",{class:N.value,style:w.value},[t.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[c.value&&t.createVNode("defs",null,[t.createVNode("linearGradient",{id:"gradient-"+d.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[n.value.map(S=>t.createVNode("stop",{offset:S.offset,"stop-color":S.color},null))])]),t.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":i.value,d:$.value,style:s.value},null),u.value.map(S=>t.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:$.value,"stroke-linecap":l.value,stroke:S.stroke,"stroke-width":h.value?i.value:0,style:S.strokePathStyle},null))]),B()])}return()=>t.createVNode("div",{class:x.value},[o.value==="line"&&K(),P.value&&q()])}}),M=j.withInstall(T);g.Progress=T,g.default=M,g.progressProps=I,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../designer-canvas/index.umd.js"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../designer-canvas/index.umd.js","../common/index.umd.js"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.progress={},f.Vue,f.dynamicResolver,f.designerCanvas,f.common))})(this,function(f,e,D,M,q){"use strict";const L=new Map([["appearance",D.resolveAppearance]]);function F(t,r,i){return r}const z={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/progress.schema.json",title:"progress",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for progress",type:"string"},type:{description:"The type string of progress",type:"string",default:"progress"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},disable:{type:"string",default:!1},editable:{description:"",type:"boolean",default:!0},placeholder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},require:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},visible:{description:"",type:"boolean",default:!0}},required:["id","type"]},R={title:"progress",description:"A Farris Component",type:"object",categories:{basic:{description:"Basic Infomation",title:"基本信息",properties:{id:{description:"组件标识",title:"标识",type:"string",readonly:!0},type:{description:"组件类型",title:"控件类型",type:"select",editor:{type:"waiting for modification",enum:[]}}}}}},I={progressType:{type:String,default:"line"},strokeWidth:{type:Number,default:0},size:{type:String,default:"default"},showInfo:{type:Boolean,default:!0},progressStatus:{type:String,default:"default"},successPercent:{type:Number,default:0},strokeColor:{type:String,default:""},strokeLinecap:{type:String,default:"round"},width:{type:Number,default:100},percent:{type:Number,default:20},enableBackgroundImg:{type:Boolean,default:!1},backgroundImg:{type:String,default:""},gapPosition:{type:String},gapDegree:{type:Number,default:0},format:{type:Function,default:(t,r)=>`${t}%`}},T=D.createPropsResolver(I,z,L,F,R);function A(t){function r(d){return+d.replace("%","")}function i(d){let o=[];return Object.keys(d).forEach(c=>{const a=d[c],k=r(c);isNaN(k)||o.push({key:k,value:a})}),o=o.sort((c,a)=>c.key-a.key),o}const l=e.computed(()=>!!t.strokeColor&&typeof t.strokeColor!="string"),u=e.computed(()=>{const{from:d="#59a1ff",to:o="#59a1ff",direction:c="to right",...a}=t.strokeColor;if(Object.keys(a).length!==0){const k=i(a).map(({key:C,value:b})=>`${b} ${C}%`).join(", ");return`linear-gradient(${c}, ${k})`}return`linear-gradient(${c}, ${d}, ${o})`}),n=e.computed(()=>i(t.strokeColor).map(({key:d,value:o})=>({offset:`${d}%`,color:o})));return{isGradient:l,linearGradient:u,circleGradient:n}}function K(t){return{strokeWidth:e.computed(()=>t.strokeWidth||(t.progressType==="line"&&t.size!=="small"?8:6))}}function X(t){return{formatPercentageText:e.computed(()=>t.format(t.percent,t.successPercent))}}function Y(t,r,i,l){const{isCircleStyle:u}=r,{isGradient:n,linearGradient:d}=i,{strokeWidth:o}=l,c=e.computed(()=>{const s={"f-progress":!0,"f-progress-line":t.progressType==="line","ant-progress-small":t.size==="small","f-progress-show-info":t.showInfo,"f-progress-circle":u.value},p=`f-progress-status-${t.progressStatus}`;return s[p]=!0,s}),a=e.computed(()=>({width:`${t.width}px`,height:`${t.width}px`,"font-size":`${t.width*.15+6}px`,"f-progress-circle-gradient":n.value})),k=e.computed(()=>({"f-progress-inner":!0,"f-progress-circle-gradient":n.value})),C=0,b=e.computed(()=>C+1),x=e.computed(()=>{const s=50-o.value/2,p=t.gapPosition||(t.progressType==="circle"?"top":"bottom");let y=0,m=-s,P=0,h=s*-2;switch(p){case"left":y=-s,m=0,P=s*2,h=0;break;case"right":y=s,m=0,P=s*-2,h=0;break;case"bottom":m=s,h=s*2;break}return`M 50,50 m ${y},${m}
+                a ${s},${s} 0 1 1 ${P},${-h}
+                a ${s},${s} 0 1 1 ${-P},${h}`}),j=e.computed(()=>{const s=50-o.value/2,p=Math.PI*2*s,y=t.gapDegree||(t.progressType==="circle"?0:75);return{strokeDasharray:`${p-y}px ${p}px`,strokeDashoffset:`-${y/2}px`,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"}}),N=e.computed(()=>{const s=50-o.value/2,p=Math.PI*2*s,y=t.gapDegree||(t.progressType==="circle"?0:75),m=t.successPercent!==void 0&&t.successPercent!==null?[t.successPercent,t.percent]:[t.percent];return m.map((P,h)=>{const S=m.length===2&&h===0;return{stroke:n.value&&!S?`url(#gradient-${b.value})`:null,strokePathStyle:{stroke:n.value?null:S?"default":t.strokeColor,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",strokeDasharray:`${(P||0)/100*(p-y)}px ${p}px`,strokeDashoffset:`-${y/2}px`}}}).reverse()}),v=e.computed(()=>({width:`${t.percent}%`,"border-radius":t.strokeLinecap==="round"?"100px":"0",background:n.value?null:t.strokeColor,"background-image":n.value?d.value:null,height:`${o.value}px`}));return{progressClass:c,inCircleProgressBarStyle:a,inCircleProgressBarClass:k,pathString:x,trailPathStyle:j,progressCirclePaths:N,gradientId:b,inlineProgressBackgroundStyle:v}}function _(t){return{isCircleStyle:e.computed(()=>t.progressType==="circle"||t.progressType==="dashboard")}}function E(t){const r=e.computed(()=>{const u={"f-progress-text-icon":!0,"f-icon":!0},n=`f-icon-${t.progressStatus}`;return u[n]=!0,u}),i=e.computed(()=>{const u={"f-progress-text-icon":!0,"f-icon":!0},n=t.progressStatus==="success"?"f-icon-checkmark":"f-icon-x";return u[n]=!0,u}),l=e.computed(()=>t.progressStatus==="error"||t.progressStatus==="success");return{inlineProgrssStatusClass:r,circleProgrssStatusClass:i,shouldShowStatus:l}}function H(t){const r=e.computed(()=>({width:`${t.successPercent}%`,"border-radius":t.strokeLinecap==="round"?"100px":"0",height:`${t.strokeWidth}px`,"background-image":t.enableBackgroundImg?`url(${t.backgroundImg})`:null})),i=e.computed(()=>t.successPercent||t.successPercent===0);return{inlineProgressSuccessBackgroundStyle:r,shouldShowSuccessInlineProgressBackground:i}}const w=e.defineComponent({name:"FProgress",props:I,emits:[],setup(t){const r=e.ref(t.progressType),i=e.ref(t.showInfo),l=e.ref(t.percent),u=e.ref(t.strokeLinecap),n=A(t),{isGradient:d,circleGradient:o}=n,c=K(t),{strokeWidth:a}=c,{formatPercentageText:k}=X(t),C=_(t),{isCircleStyle:b}=C,{progressClass:x,inCircleProgressBarStyle:j,inCircleProgressBarClass:N,pathString:v,trailPathStyle:s,progressCirclePaths:p,gradientId:y,inlineProgressBackgroundStyle:m}=Y(t,C,n,c),{inlineProgrssStatusClass:P,circleProgrssStatusClass:h,shouldShowStatus:S}=E(t),{inlineProgressSuccessBackgroundStyle:V,shouldShowSuccessInlineProgressBackground:O}=H(t);e.watch(()=>t.percent,$=>{l.value=$||0});function B(){return i.value&&e.createVNode("span",{class:"f-progress-text"},[S.value?e.createVNode("span",{class:b.value?h.value:P.value},null):k.value])}function G(){return e.createVNode(e.Fragment,null,[e.createVNode("div",{class:"f-progress-outer"},[e.createVNode("div",{class:"f-progress-inner"},[e.createVNode("div",{class:"f-progress-bg",style:m.value},null),O.value&&e.createVNode("div",{class:"f-progress-success-bg",style:V.value},null)])]),B()])}function W(){return e.createVNode("div",{class:N.value,style:j.value},[e.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[d.value&&e.createVNode("defs",null,[e.createVNode("linearGradient",{id:"gradient-"+y.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[o.value.map($=>e.createVNode("stop",{offset:$.offset,"stop-color":$.color},null))])]),e.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":a.value,d:v.value,style:s.value},null),p.value.map($=>e.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:v.value,"stroke-linecap":u.value,stroke:$.stroke,"stroke-width":l.value?a.value:0,style:$.strokePathStyle},null))]),B()])}return()=>e.createVNode("div",{class:x.value},[r.value==="line"&&G(),b.value&&W()])}}),J=e.defineComponent({name:"FProgressDesign",props:I,emits:[],setup(t,r){const i=e.ref(t.progressStatus),l=e.ref(t.progressType),u=e.ref(t.size),n=e.ref(t.showInfo),d=e.ref(t.strokeWidth),o=e.ref(t.percent),c=e.ref(t.strokeLinecap),a=e.ref(!1),k=e.ref(t.strokeColor),C=e.ref(null),b=e.ref(0),x=e.ref(t.width),j=e.ref(""),N=e.ref([]),v=e.ref(""),s=e.ref([]),p=e.ref(t.enableBackgroundImg),y=e.ref(t.backgroundImg),m=e.ref(),P=e.inject("design-item-context"),h=M.useDesignerComponent(m,P);e.onMounted(()=>{m.value.componentInstance=h}),r.expose(h.value),e.watch(()=>t.percent,g=>{o.value=g||0});const S=e.computed(()=>d.value||(l.value==="line"&&u.value!=="small"?8:6)),V=e.computed(()=>l.value==="circle"||l.value==="dashboard"),O=e.computed(()=>{const g={"f-progress":!0,"f-progress-line":l.value==="line","ant-progress-small":u.value==="small","f-progress-show-info":n.value,".f-progress-circle":V.value},te=`f-progress-status-${i.value}`;return g[te]=!0,g}),B=e.computed(()=>({width:`${o.value}%`,"border-radius":c.value==="round"?"100px":"0",backgroud:a.value?null:k.value,"background-image":a.value?C.value:null,height:`${S.value}px`})),G=e.computed(()=>({width:`${o.value}%`,"border-radius":c.value==="round"?"100px":"0",height:`${S.value}px`,"background-image":p.value?y.value:null})),W=e.computed(()=>b.value||b.value===0);function $(){return e.createVNode("div",{class:"f-progress-outer"},[e.createVNode("div",{class:"f-progress-inner"},[e.createVNode("div",{class:"f-progress-bg",style:B.value},null),W.value&&e.createVNode("div",{class:"f-progress-success-bg",style:G.value},null)])])}const U=e.computed(()=>({width:`${x.value}px`,height:`${x.value}px`,"font-size":`${x.value*.15+6}px`,"f-progress-circle-gradient":a.value})),Z=e.computed(()=>({}));function ee(){return e.createVNode("div",{class:"f-progress-inner",style:U.value},[e.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[a.value&&e.createVNode("defs",null,[e.createVNode("linearGradient",{id:"gradient-"+j.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[N.value.map(g=>e.createVNode("stop",{offset:g.offset,"stop-color":g.color},null))])]),e.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":S.value,d:v.value,style:Z.value},null),s.value.map(g=>e.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:v.value,"stroke-linecap":c.value,stroke:g.stroke,"stroke-width":o.value?S.value:0,style:g.strokePathStyle},null))])])}return()=>e.createVNode("div",{ref:m,class:O.value},[l.value==="line"&&$(),V.value&&ee()])}});w.register=(t,r,i)=>{t.progress=w,r.progress=T},w.registerDesigner=(t,r,i)=>{t.progress=J,r.progress=T};const Q=q.withInstall(w);f.Progress=w,f.default=Q,f.progressProps=I,f.propsResolver=T,Object.defineProperties(f,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});