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

Farris Vue, a Farris Design based Vue3 component library.

(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("../dynamic-resolver/index.umd.js"),require("../common/index.umd.js"),require("../designer-canvas/index.umd.js")):typeof define=="function"&&define.amd?define(["exports","vue","../dynamic-resolver/index.umd.js","../common/index.umd.js","../designer-canvas/index.umd.js"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.step={},u.Vue,u.dynamicResolver,u.common,u.designerCanvas))})(this,function(u,e,M,w,L){"use strict";const P=new Map([["appearance",M.resolveAppearance]]);function A(r,p,o){return p}const D={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/step.schema.json",title:"step",description:"A Farris Component",type:"object",properties:{id:{description:"The unique identifier for step",type:"string"},type:{description:"The type string of step",type:"string",default:"step"},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"]},B={title:"step",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:[]}}}}}},v={direction:{type:String,default:"horizontal"},fill:{type:Boolean,default:!1},height:{type:Number,default:0},clickable:{type:Boolean,default:!0},steps:{type:Array,default:[{id:"1",title:"审批中（示例）",description:"正在审批"},{id:"2",title:"复核中（示例）",description:"等待复核"}]},activeIndex:{type:Number,default:0},onClick:{type:Function,default:()=>{}}},O=M.createPropsResolver(v,D,P,A,B),d=e.defineComponent({name:"FStep",props:v,emits:["click"],setup(r,p){const o=e.ref(r.direction),f=e.ref(r.fill),N=e.ref(r.height),g=e.ref(r.steps),i=e.ref(r.activeIndex),V=e.computed(()=>({"f-progress-step-list":o.value==="horizontal","f-progress-step-list-block":o.value==="vertical","f-progress-step-horizontal-fill":o.value==="horizontal"&&f.value,"f-progress-step-vertical-fill":o.value==="vertical"&&f.value})),k=e.computed(()=>({height:o.value==="vertical"?`${N.value}px`:""}));function m(s,t){const l={step:!0,active:t===i.value,clickable:r.clickable,current:t===i.value,finish:t<i.value};return s.status&&(l[s.status]=!0),w.getCustomClass(l,s.class||"")}function S(s,t){if(!r.clickable)return;const l={step:s,stepIndex:t};p.emit("click",l)}function y(s,t){const l={"f-progressstep-row":!0,"step-active":t===i.value,"step-current":t===i.value,"step-finish":t<i.value};return s.status&&(l["step-"+s.status]=!0),l}function b(s,t){const l={"step-icon":!0,"step-success":t,"f-icon":t,"f-icon-check":t};return w.getCustomClass(l,s.icon||"")}function $(s,t){const l=[];return s.icon?l.push(e.createVNode("span",{class:b(s,!1)},null)):t>=i.value?l.push(e.createVNode("span",{class:"step-icon"},[t+1])):l.push(e.createVNode("span",{class:b(s,!0)},null)),l}function T(s,t){return{"step-name":!0,"step-name-success":t<i.value}}function z(s,t){return e.createVNode("div",{class:"f-progress-step-title"},[e.createVNode("p",{class:T(s,t)},[s.title])])}function q(s,t){return{"f-progress-step-line":!0,"f-progress-step-line-success":t===i.value}}function j(s,t){return t!==g.value.length-1}const R=e.computed(()=>({triangle:!0,"":o.value==="vertical"}));function C(){return g.value.map((s,t)=>e.createVNode("li",{class:m(s,t),onClick:l=>S(s,t)},[e.createVNode("div",{class:y(s,t)},[e.createVNode("div",{class:"f-progress-step-content"},[$(s,t),z(s,t)]),j(s,t)&&e.createVNode("div",{class:q(s,t)},[e.createVNode("span",{class:R.value},null)])])]))}return e.watch(()=>r.activeIndex,()=>{r.activeIndex>-1&&r.activeIndex<=g.value.length&&(i.value=r.activeIndex,C())}),()=>e.createVNode("div",{class:"f-progress-step"},[e.createVNode("ul",{class:V.value,style:k.value},[C()])])}}),_=e.defineComponent({name:"FStepDesign",props:v,emits:[],setup(r,p){const o=e.ref(r.direction),f=e.ref(r.fill),N=e.ref(r.height),g=e.ref(r.steps),i=e.ref(0),V=e.ref(r.clickable),k=e.ref(0),m=e.ref(),S=e.inject("design-item-context"),y=L.useDesignerComponent(m,S);e.onMounted(()=>{m.value.componentInstance=y}),p.expose(y.value);const b=e.computed(()=>({"f-progress-step-list":o.value==="horizontal","f-progress-step-list-block":o.value==="vertical","f-progress-step-horizontal-fill":o.value==="horizontal"&&f.value,"f-progress-step-vertical-fill":o.value==="vertical"&&f.value})),$=e.computed(()=>({height:o.value==="vertical"?`${N.value}px`:""}));function T(n,c){const a={step:!0,active:c===i.value,clickable:V.value,"click-disable":n.disable,current:c===i.value};return c<i.value&&(a.finish=!0),n.status&&(a[n.status]=!0),n.hasOwnProperty("class")&&n.class.split(" ").reduce((h,F)=>(h[F]=!0,h),a),a}function z(n,c){}function q(n,c){const a={"f-progressstep-row":!0,"step-active":c===i.value,"step-current":c===i.value};return c<i.value&&(a["step-finish"]=!0),n.status&&(a["step-"+n.status]=!0),a}function j(n,c){const a={"step-icon":!0,"step-success":c,"k-icon":c,"k-i-check":c};return n.hasOwnProperty("icon")&&n.class.split(" ").reduce((h,F)=>(h[F]=!0,h),a),a}function R(n,c){const a=[];return n.icon?a.push(e.createVNode("span",{class:j(n,!1)},null)):c>=i.value||c===k.value?a.push(e.createVNode("span",{class:"step-icon"},[c+1])):a.push(e.createVNode("span",{class:j(n,!0)},null)),a}function C(n,c){return{"step-name":!0,"step-name-success":c<i.value}}function s(n,c){return e.createVNode("div",{class:"f-progress-step-title"},[e.createVNode("p",{class:C(n,c)},[n.title])])}function t(n,c){return{"f-progress-step-line":!0,"f-progress-step-line-success":c===i.value}}function l(n,c){return c!==g.value.length-1}const x=e.computed(()=>({triangle:!0,"":o.value==="vertical"}));function E(){return g.value.map((n,c)=>e.createVNode("li",{class:T(n,c),onClick:a=>void 0},[e.createVNode("div",{class:q(n,c)},[e.createVNode("div",{class:"f-progress-step-content"},[R(n,c),s(n,c)]),l(n,c)&&e.createVNode("div",{class:t(n,c)},[e.createVNode("span",{class:x.value},null)])])]))}return()=>e.createVNode("div",{ref:m,class:"f-progress-step"},[e.createVNode("ul",{class:b.value,style:$.value},[E()])])}});d.install=r=>{r.component(d.name,d)},d.register=(r,p,o,f)=>{r.step=d,p.step=O},d.registerDesigner=(r,p,o)=>{r.step=_,p.step=O},u.FStep=d,u.default=d,u.propsResolver=O,u.stepProps=v,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});