@farris/ui-vue/components/progress/index.umd.cjs

Farris Vue, a Farris Design based Vue3 component library.

(function(O,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue"),require("lodash-es"),require("../common/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","lodash-es","../common/index.umd.js"],r):(O=typeof globalThis<"u"?globalThis:O||self,r(O.progress={},O.Vue,O.LodashES,O.common))})(this,function(O,r,L,z){"use strict";const q={},A={};function W(e){const{properties:t,title:l,ignore:s}=e,o=s&&Array.isArray(s),c=Object.keys(t).reduce((a,f)=>((!o||!s.find(y=>y===f))&&(a[f]=t[f].type==="object"&&t[f].properties?W(t[f]):L.cloneDeep(t[f].default)),a),{});if(l&&(!o||!s.find(a=>a==="id"))){const a=l.toLowerCase().replace(/-/g,"_");c.id=`${a}_${Math.random().toString().slice(2,6)}`}return c}function C(e){const{properties:t,title:l,required:s}=e;if(s&&Array.isArray(s)){const o=s.reduce((c,a)=>(c[a]=t[a].type==="object"&&t[a].properties?W(t[a]):L.cloneDeep(t[a].default),c),{});if(l&&s.find(c=>c==="id")){const c=l.toLowerCase().replace(/-/g,"_");o.id=`${c}_${Math.random().toString().slice(2,6)}`}return o}return{type:l}}function F(e,t={},l){const s=q[e];if(s){let o=C(s);const c=A[e];return o=c?c({getSchemaByType:F},o,t,l):o,o}return null}function X(e,t){const l=W(t);return Object.keys(l).reduce((s,o)=>(Object.prototype.hasOwnProperty.call(e,o)&&(s[o]&&L.isPlainObject(s[o])&&L.isPlainObject(e[o]||!e[o])?Object.assign(s[o],e[o]||{}):s[o]=e[o]),s),l),l}function _(e,t){return Object.keys(e).filter(s=>e[s]!=null).reduce((s,o)=>{if(t.has(o)){const c=t.get(o);if(typeof c=="string")s[c]=e[o];else{const a=c(o,e[o],e);Object.assign(s,a)}}else s[o]=e[o];return s},{})}function Y(e,t,l=new Map){const s=X(e,t);return _(s,l)}function U(e={}){function t(n,i,u,d){if(typeof u=="number")return d[n].length===u;if(typeof u=="object"){const m=Object.keys(u)[0],P=u[m];if(m==="not")return Number(d[n].length)!==Number(P);if(m==="moreThan")return Number(d[n].length)>=Number(P);if(m==="lessThan")return Number(d[n].length)<=Number(P)}return!1}function l(n,i,u,d){return d[n]&&d[n].propertyValue&&String(d[n].propertyValue.value)===String(u)}const s=new Map([["length",t],["getProperty",l]]);Object.keys(e).reduce((n,i)=>(n.set(i,e[i]),n),s);function o(n,i){const u=n;return typeof i=="number"?[{target:u,operator:"length",param:null,value:Number(i)}]:typeof i=="boolean"?[{target:u,operator:"getProperty",param:n,value:!!i}]:typeof i=="object"?Object.keys(i).map(d=>{if(d==="length")return{target:u,operator:"length",param:null,value:i[d]};const m=d,P=i[d];return{target:u,operator:"getProperty",param:m,value:P}}):[]}function c(n){return Object.keys(n).reduce((u,d)=>{const m=o(d,n[d]);return u.push(...m),u},[])}function a(n,i){if(s.has(n.operator)){const u=s.get(n.operator);return u&&u(n.target,n.param,n.value,i)||!1}return!1}function f(n,i){return c(n).reduce((m,P)=>m&&a(P,i),!0)}function y(n,i){const u=Object.keys(n),d=u.includes("allOf"),m=u.includes("anyOf"),P=d||m,g=(P?n[P?d?"allOf":"anyOf":"allOf"]:[n]).map(S=>f(S,i));return d?!g.includes(!1):g.includes(!0)}return{parseValueSchema:y}}const J={},Q={};U();function Z(e,t,l=new Map,s=(a,f,y,n)=>f,o={},c=a=>a){return q[t.title]=t,A[t.title]=s,J[t.title]=o,Q[t.title]=c,(a={},f=!0)=>{if(!f)return _(a,l);const y=Y(a,t,l),n=Object.keys(e).reduce((i,u)=>(i[u]=e[u].default,i),{});return Object.assign(n,y)}}function H(e,t){return{customClass:t.class,customStyle:t.style}}const x=new Map([["appearance",H]]);function K(e,t,l){return t}const I={$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"]},ee={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:[]}}}}}},R={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,t)=>`${e}%`}},E=Z(R,I,x,K,ee);function re(e){function t(a){return+a.replace("%","")}function l(a){let f=[];return Object.keys(a).forEach(y=>{const n=a[y],i=t(y);isNaN(i)||f.push({key:i,value:n})}),f=f.sort((y,n)=>y.key-n.key),f}const s=r.computed(()=>!!e.strokeColor&&typeof e.strokeColor!="string"),o=r.computed(()=>{const{from:a="#59a1ff",to:f="#59a1ff",direction:y="to right",...n}=e.strokeColor;if(Object.keys(n).length!==0){const i=l(n).map(({key:u,value:d})=>`${d} ${u}%`).join(", ");return`linear-gradient(${y}, ${i})`}return`linear-gradient(${y}, ${a}, ${f})`}),c=r.computed(()=>l(e.strokeColor).map(({key:a,value:f})=>({offset:`${a}%`,color:f})));return{isGradient:s,linearGradient:o,circleGradient:c}}function te(e){return{strokeWidth:r.computed(()=>e.strokeWidth||(e.progressType==="line"&&e.size!=="small"?8:6))}}function se(e){return{formatPercentageText:r.computed(()=>e.format(e.percent,e.successPercent))}}function ne(e,t,l,s){const{isCircleStyle:o}=t,{isGradient:c,linearGradient:a}=l,{strokeWidth:f}=s,y=r.computed(()=>{const g={"f-progress":!0,"f-progress-line":e.progressType==="line","ant-progress-small":e.size==="small","f-progress-show-info":e.showInfo,"f-progress-circle":o.value},$=`f-progress-status-${e.progressStatus}`;return g[$]=!0,g}),n=r.computed(()=>({width:`${e.width}px`,height:`${e.width}px`,"font-size":`${e.width*.15+6}px`,"f-progress-circle-gradient":c.value})),i=r.computed(()=>({"f-progress-inner":!0,"f-progress-circle-gradient":c.value})),u=0,d=r.computed(()=>u+1),m=r.computed(()=>{const g=50-f.value/2,$=e.gapPosition||(e.progressType==="circle"?"top":"bottom");let S=0,v=-g,B=0,N=g*-2;switch($){case"left":S=-g,v=0,B=g*2,N=0;break;case"right":S=g,v=0,B=g*-2,N=0;break;case"bottom":v=g,N=g*2;break}return`M 50,50 m ${S},${v}
                a ${g},${g} 0 1 1 ${B},${-N}
                a ${g},${g} 0 1 1 ${-B},${N}`}),P=r.computed(()=>{const g=50-f.value/2,$=Math.PI*2*g,S=e.gapDegree||(e.progressType==="circle"?0:75);return{strokeDasharray:`${$-S}px ${$}px`,strokeDashoffset:`-${S/2}px`,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"}}),M=r.computed(()=>{const g=50-f.value/2,$=Math.PI*2*g,S=e.gapDegree||(e.progressType==="circle"?0:75),v=e.successPercent!==void 0&&e.successPercent!==null?[e.successPercent,e.percent]:[e.percent];return v.map((B,N)=>{const T=v.length===2&&N===0;return{stroke:c.value&&!T?`url(#gradient-${d.value})`:null,strokePathStyle:{stroke:c.value?null:T?"default":e.strokeColor,transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",strokeDasharray:`${(B||0)/100*($-S)}px ${$}px`,strokeDashoffset:`-${S/2}px`}}}).reverse()}),D=r.computed(()=>({width:`${e.percent}%`,"border-radius":e.strokeLinecap==="round"?"100px":"0",background:c.value?null:e.strokeColor,"background-image":c.value?a.value:null,height:`${f.value}px`}));return{progressClass:y,inCircleProgressBarStyle:n,inCircleProgressBarClass:i,pathString:m,trailPathStyle:P,progressCirclePaths:M,gradientId:d,inlineProgressBackgroundStyle:D}}function oe(e){return{isCircleStyle:r.computed(()=>e.progressType==="circle"||e.progressType==="dashboard")}}function ce(e){const t=r.computed(()=>{const o={"f-progress-text-icon":!0,"f-icon":!0},c=`f-icon-${e.progressStatus}`;return o[c]=!0,o}),l=r.computed(()=>{const o={"f-progress-text-icon":!0,"f-icon":!0},c=e.progressStatus==="success"?"f-icon-checkmark":"f-icon-x";return o[c]=!0,o}),s=r.computed(()=>e.progressStatus==="error"||e.progressStatus==="success");return{inlineProgrssStatusClass:t,circleProgrssStatusClass:l,shouldShowStatus:s}}function ae(e){const t=r.computed(()=>({width:`${e.successPercent}%`,"border-radius":e.strokeLinecap==="round"?"100px":"0",height:`${e.strokeWidth}px`,"background-image":e.enableBackgroundImg?`url(${e.backgroundImg})`:null})),l=r.computed(()=>e.successPercent||e.successPercent===0);return{inlineProgressSuccessBackgroundStyle:t,shouldShowSuccessInlineProgressBackground:l}}const G=r.defineComponent({name:"FProgress",props:R,emits:[],setup(e){const t=r.ref(e.progressType),l=r.ref(e.showInfo),s=r.ref(e.percent),o=r.ref(e.strokeLinecap),c=re(e),{isGradient:a,circleGradient:f}=c,y=te(e),{strokeWidth:n}=y,{formatPercentageText:i}=se(e),u=oe(e),{isCircleStyle:d}=u,{progressClass:m,inCircleProgressBarStyle:P,inCircleProgressBarClass:M,pathString:D,trailPathStyle:g,progressCirclePaths:$,gradientId:S,inlineProgressBackgroundStyle:v}=ne(e,u,c,y),{inlineProgrssStatusClass:B,circleProgrssStatusClass:N,shouldShowStatus:T}=ce(e),{inlineProgressSuccessBackgroundStyle:p,shouldShowSuccessInlineProgressBackground:k}=ae(e);r.watch(()=>e.percent,V=>{s.value=V||0});function h(){return l.value&&r.createVNode("span",{class:"f-progress-text"},[T.value?r.createVNode("span",{class:d.value?N.value:B.value},null):i.value])}function b(){return r.createVNode(r.Fragment,null,[r.createVNode("div",{class:"f-progress-outer"},[r.createVNode("div",{class:"f-progress-inner"},[r.createVNode("div",{class:"f-progress-bg",style:v.value},null),k.value&&r.createVNode("div",{class:"f-progress-success-bg",style:p.value},null)])]),h()])}function w(){return r.createVNode("div",{class:M.value,style:P.value},[r.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[a.value&&r.createVNode("defs",null,[r.createVNode("linearGradient",{id:"gradient-"+S.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[f.value.map(V=>r.createVNode("stop",{offset:V.offset,"stop-color":V.color},null))])]),r.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":n.value,d:D.value,style:g.value},null),$.value.map(V=>r.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:D.value,"stroke-linecap":o.value,stroke:V.stroke,"stroke-width":s.value?n.value:0,style:V.strokePathStyle},null))]),h()])}return()=>r.createVNode("div",{class:m.value},[t.value==="line"&&b(),d.value&&w()])}});function le(e,t,l){var T;const s="",o="",c=r.ref();function a(){return(t==null?void 0:t.schema.componentType)!=="frame"}function f(){return!1}function y(){return(t==null?void 0:t.schema.componentType)!=="frame"}function n(){return(t==null?void 0:t.schema.componentType)==="frame"}function i(p){if(!p||!p.value)return null;if(p.value.schema&&p.value.schema.type==="component")return p.value;const k=r.ref(p==null?void 0:p.value.parent),h=i(k);return h||null}function u(p=t){var w;const{componentInstance:k,designerItemElementRef:h}=p;if(!k||!k.value)return null;const{getCustomButtons:b}=k.value;return k.value.canMove||b&&((w=b())!=null&&w.length)?h:u(p.parent)}function d(p){return!!l}function m(){return(t==null?void 0:t.schema.label)||(t==null?void 0:t.schema.title)||(t==null?void 0:t.schema.name)}function P(){}function M(p,k){var h;!p||!k||(h=t==null?void 0:t.setupContext)==null||h.emit("dragEnd")}function D(p,k){const{componentType:h}=p;let b=F(h,p,k);const w=h.toLowerCase().replace(/-/g,"_");return b&&!b.id&&b.type===h&&(b.id=`${w}_${Math.random().toString().slice(2,6)}`),b}function g(p){}function $(...p){}function S(p){if(!p)return;const k=t==null?void 0:t.schema,{formSchemaUtils:h}=p;if(k&&h.getExpressions().length){const b=h.getExpressions().findIndex(w=>w.target===k.id);b>-1&&h.getExpressions().splice(b,1)}}function v(p){S(p),t!=null&&t.schema.contents&&t.schema.contents.map(k=>{let h=k.id;k.type==="component-ref"&&(h=k.component);const b=e.value.querySelectorAll(`#${h}-design-item`);b!=null&&b.length&&Array.from(b).map(w=>{var V;(V=w==null?void 0:w.componentInstance)!=null&&V.value.onRemoveComponent&&w.componentInstance.value.onRemoveComponent(p)})})}function B(){}function N(p){}return c.value={canMove:a(),canSelectParent:f(),canDelete:y(),canNested:!n(),contents:t==null?void 0:t.schema.contents,elementRef:e,parent:(T=t==null?void 0:t.parent)==null?void 0:T.componentInstance,schema:t==null?void 0:t.schema,styles:s,designerClass:o,canAccepts:d,getBelongedComponentInstance:i,getDraggableDesignItemElement:u,getDraggingDisplayText:m,getPropConfig:$,getDragScopeElement:P,onAcceptMovedChildElement:M,onChildElementMovedOut:g,addNewChildComponentSchema:D,triggerBelongedComponentToMoveWhenMoved:r.ref(!1),triggerBelongedComponentToDeleteWhenDeleted:r.ref(!1),onRemoveComponent:v,getCustomButtons:B,onPropertyChanged:N},c}const ie=r.defineComponent({name:"FProgressDesign",props:R,emits:[],setup(e,t){const l=r.ref(e.progressStatus),s=r.ref(e.progressType),o=r.ref(e.size),c=r.ref(e.showInfo),a=r.ref(e.strokeWidth),f=r.ref(e.percent),y=r.ref(e.strokeLinecap),n=r.ref(!1),i=r.ref(e.strokeColor),u=r.ref(null),d=r.ref(0),m=r.ref(e.width),P=r.ref(""),M=r.ref([]),D=r.ref(""),g=r.ref([]),$=r.ref(e.enableBackgroundImg),S=r.ref(e.backgroundImg),v=r.ref(),B=r.inject("design-item-context"),N=le(v,B);r.onMounted(()=>{v.value.componentInstance=N}),t.expose(N.value),r.watch(()=>e.percent,j=>{f.value=j||0});const T=r.computed(()=>a.value||(s.value==="line"&&o.value!=="small"?8:6)),p=r.computed(()=>s.value==="circle"||s.value==="dashboard"),k=r.computed(()=>{const j={"f-progress":!0,"f-progress-line":s.value==="line","ant-progress-small":o.value==="small","f-progress-show-info":c.value,".f-progress-circle":p.value},ge=`f-progress-status-${l.value}`;return j[ge]=!0,j}),h=r.computed(()=>({width:`${f.value}%`,"border-radius":y.value==="round"?"100px":"0",backgroud:n.value?null:i.value,"background-image":n.value?u.value:null,height:`${T.value}px`})),b=r.computed(()=>({width:`${f.value}%`,"border-radius":y.value==="round"?"100px":"0",height:`${T.value}px`,"background-image":$.value?S.value:null})),w=r.computed(()=>d.value||d.value===0);function V(){return r.createVNode("div",{class:"f-progress-outer"},[r.createVNode("div",{class:"f-progress-inner"},[r.createVNode("div",{class:"f-progress-bg",style:h.value},null),w.value&&r.createVNode("div",{class:"f-progress-success-bg",style:b.value},null)])])}const fe=r.computed(()=>({width:`${m.value}px`,height:`${m.value}px`,"font-size":`${m.value*.15+6}px`,"f-progress-circle-gradient":n.value})),de=r.computed(()=>({}));function pe(){return r.createVNode("div",{class:"f-progress-inner",style:fe.value},[r.createVNode("svg",{class:"f-progress-circle",viewBox:"0 0 100 100"},[n.value&&r.createVNode("defs",null,[r.createVNode("linearGradient",{id:"gradient-"+P.value,x1:"100%",y1:"0%",x2:"0%",y2:"0%"},[M.value.map(j=>r.createVNode("stop",{offset:j.offset,"stop-color":j.color},null))])]),r.createVNode("path",{class:"f-progress-circle-trail",stroke:"#efefef","fill-opacity":"0","stroke-width":T.value,d:D.value,style:de.value},null),g.value.map(j=>r.createVNode("path",{class:"f-progress-circle-path","fill-opacity":"0",d:D.value,"stroke-linecap":y.value,stroke:j.stroke,"stroke-width":f.value?T.value:0,style:j.strokePathStyle},null))])])}return()=>r.createVNode("div",{ref:v,class:k.value},[s.value==="line"&&V(),p.value&&pe()])}});G.register=(e,t,l)=>{e.progress=G,t.progress=E},G.registerDesigner=(e,t,l)=>{e.progress=ie,t.progress=E};const ue=z.withInstall(G);O.Progress=G,O.default=ue,O.progressProps=R,O.propsResolver=E,Object.defineProperties(O,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});