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

Farris Vue, a Farris Design based Vue3 component library.

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