vue-devui 1.0.0 → 1.0.1

package/status/index.es.js

@@ -56,6 +56,10 @@ var index = {
   title: "Status \u72B6\u6001",
   category: "\u901A\u7528",
   status: "100%",
+  deprecated: {
+    value: true,
+    reason: "Status \u662F\u65E0\u5185\u5BB9\u5305\u88F9\u72B6\u6001\u4E0B\u7684 Badge \u7EC4\u4EF6\uFF0C\u5E94\u8BE5\u4F7F\u7528 Badge \u66FF\u4EE3\u3002"
+  },
   install(app) {
     app.component(Status.name, Status);
   }

package/status/index.umd.js

@@ -1 +1 @@
-(function(t,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],u):(t=typeof globalThis!="undefined"?globalThis:t||self,u(t.index={},t.Vue))})(this,function(t,u){"use strict";function r(n,a,e){let i=n;return a&&(i+=`__${a}`),e&&(i+=`--${e}`),i}function f(n,a=!1){const e=a?`.devui-${n}`:`devui-${n}`;return{b:()=>r(e),e:s=>s?r(e,s):"",m:s=>s?r(e,"",s):"",em:(s,p)=>s&&p?r(e,s,p):""}}var y="",d=u.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(n,a){const e=f("status"),i=u.computed(()=>{const{type:o}=n,c=["success","error","initial","warning","waiting","running","invalid"];let l=`${e.b()} ${e.em("bg","invalid")}`;return c.includes(o)&&(l=`${e.b()} ${e.em("bg",o)}`),l});return()=>{var o,c;return u.createVNode("span",{class:i.value},[(c=(o=a.slots).default)==null?void 0:c.call(o)])}}}),m={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"100%",install(n){n.component(d.name,d)}};t.Status=d,t.default=m,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(t,s){typeof exports=="object"&&typeof module!="undefined"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(t=typeof globalThis!="undefined"?globalThis:t||self,s(t.index={},t.Vue))})(this,function(t,s){"use strict";function c(u,a,e){let i=u;return a&&(i+=`__${a}`),e&&(i+=`--${e}`),i}function f(u,a=!1){const e=a?`.devui-${u}`:`devui-${u}`;return{b:()=>c(e),e:n=>n?c(e,n):"",m:n=>n?c(e,"",n):"",em:(n,p)=>n&&p?c(e,n,p):""}}var v="",d=s.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(u,a){const e=f("status"),i=s.computed(()=>{const{type:o}=u,r=["success","error","initial","warning","waiting","running","invalid"];let l=`${e.b()} ${e.em("bg","invalid")}`;return r.includes(o)&&(l=`${e.b()} ${e.em("bg",o)}`),l});return()=>{var o,r;return s.createVNode("span",{class:i.value},[(r=(o=a.slots).default)==null?void 0:r.call(o)])}}}),m={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"100%",deprecated:{value:!0,reason:"Status \u662F\u65E0\u5185\u5BB9\u5305\u88F9\u72B6\u6001\u4E0B\u7684 Badge \u7EC4\u4EF6\uFF0C\u5E94\u8BE5\u4F7F\u7528 Badge \u66FF\u4EE3\u3002"},install(u){u.component(d.name,d)}};t.Status=d,t.default=m,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});

package/steps/index.es.js

@@ -250,7 +250,8 @@ var Icon = defineComponent({
     const wrapClassed = computed(() => ({
       [ns.e("container")]: true,
       [ns.m("disabled")]: disabled.value,
-      [ns.m("operable")]: operable.value
+      [ns.m("operable")]: operable.value,
+      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
     }));
     const onClick = (e) => {
       if (disabled.value) {

package/steps/index.umd.js

@@ -1 +1 @@
-(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,e){"use strict";const P={modelValue:{type:Number,default:0},space:{type:Number},alignCenter:{type:Boolean,default:!1},direction:{type:String,default:"horizontal"},simple:{type:Boolean,default:!1}};function y(a,s,o){let n=a;return s&&(n+=`__${s}`),o&&(n+=`--${o}`),n}function v(a,s=!1){const o=s?`.devui-${a}`:`devui-${a}`;return{b:()=>y(o),e:t=>t?y(o,t):"",m:t=>t?y(o,"",t):"",em:(t,r)=>t&&r?y(o,t,r):""}}var k="";const D="active-step",I="steps",z="steps-props";var C=e.defineComponent({name:"DSteps",props:P,emits:["update:modelValue"],setup(a,{slots:s}){const{modelValue:o,direction:n,simple:u}=e.toRefs(a),l=v("steps"),c=e.ref(o.value);e.provide(D,c),e.provide(z,a);const t=e.ref([]);e.provide(I,t),e.watch(o,i=>{c.value=i});const r=e.computed(()=>{const i=n.value==="vertical"?" vertical":"",p=u.value?" simple":"";return`${l.b()}${i}${p}`});return()=>{var i;return e.createVNode("div",{class:r.value},[(i=s.default)==null?void 0:i.call(s)])}}});const x={title:{type:String,required:!0},description:{type:String},icon:{type:String},status:{type:String}},E={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},T={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};var M="",_=e.defineComponent({name:"DSvgIcon",props:T,setup(a){const{name:s,color:o,size:n}=e.toRefs(a),u=v("svg-icon"),l=e.computed(()=>`#icon-${s.value}`),c=e.computed(()=>typeof n.value=="number"?`${n.value}px`:n.value),t={width:c.value,height:c.value};return()=>e.createVNode("svg",{class:u.b(),style:t},[e.createVNode("use",{"xlink:href":l.value,fill:o.value},null)])}});function A(a){return/^((http|https):)?\/\//.test(a)}function R(a,s){const{component:o,name:n,size:u,color:l,classPrefix:c,rotate:t}=e.toRefs(a),r=v("icon"),i=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),p=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(_),m=()=>e.createVNode("img",e.mergeProps({src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{width:i.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},s.attrs),null),S=()=>e.createVNode(p,e.mergeProps({name:n.value,color:l.value,size:i.value,class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null),h=()=>{const N=/^icon-/.test(n.value)?n.value:`${c.value}-${n.value}`;return e.createVNode("i",e.mergeProps({class:[c.value,N,(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{fontSize:i.value,color:l.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null)};return{iconDom:()=>o.value?S():A(n.value)?m():h()}}var g=e.defineComponent({name:"DIcon",props:E,emits:["click"],setup(a,s){const{disabled:o,operable:n}=e.toRefs(a),{iconDom:u}=R(a,s),l=v("icon"),c=e.computed(()=>({[l.e("container")]:!0,[l.m("disabled")]:o.value,[l.m("operable")]:n.value})),t=r=>{o.value||s.emit("click",r)};return()=>{var r,i,p,m;return e.createVNode("div",{class:c.value,onClick:t},[(i=(r=s.slots).prefix)==null?void 0:i.call(r),u(),(m=(p=s.slots).suffix)==null?void 0:m.call(p)])}}}),U="";e.defineComponent({name:"DIconGroup",setup(a,s){const o=v("icon-group");return()=>{var n,u;return e.createVNode("div",{class:o.b()},[(u=(n=s.slots).default)==null?void 0:u.call(n)])}}});var G="",V=e.defineComponent({name:"DStep",props:x,setup(a,{slots:s}){const{title:o,description:n,icon:u,status:l}=e.toRefs(a),c=v("step"),t=e.getCurrentInstance(),r=e.inject(D),i=e.inject(I);i.value.push(t);const p=e.inject(z),m=i.value.indexOf(t),S=e.computed(()=>{const f=r.value===m?" active":"",b=r.value>m?" finished":"",F=p.alignCenter?" center":"",O=(l==null?void 0:l.value)?` ${l==null?void 0:l.value}`:"",w=p.simple?` ${c.m("simple")}`:"";return`${c.b()}${f}${b}${F}${O}${w}`}),h=e.computed(()=>{const f={};return p.space?f.width=`${p.space}px`:f.flexBasis=p.alignCenter||p.simple?`${100/i.value.length}%`:`${100/(i.value.length-1)}%`,f}),$=e.computed(()=>{const f=r.value===m,b=r.value>m;return f?"var(--devui-brand)":b?"var(--devui-success)":"var(--devui-placeholder)"}),N={finish:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),success:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),error:e.createVNode(g,{name:"error-o",color:"var(--devui-danger)",size:"24px"},null)},B=()=>{var f;return s.icon?(f=s.icon)==null?void 0:f.call(s,$.value):u.value?e.createVNode(g,{name:u.value,color:$.value,size:"24px"},null):l.value&&N[l.value]?N[l.value]:r.value>i.value.indexOf(t)?e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null):e.createVNode("span",{class:c.e("dot")},[m+1])};return()=>e.createVNode(e.Fragment,null,[p.simple?e.createVNode("div",{class:S.value,style:h.value},[o.value]):e.createVNode("div",{class:S.value,style:h.value},[e.createVNode("div",{class:c.e("dot-container")},[B(),e.createVNode("div",{class:c.e("line")},null)]),e.createVNode("div",{class:c.e("content")},[e.createVNode("span",{class:c.e("title")},[o.value]),n.value&&e.createVNode("span",{class:c.e("description")},[n.value])])])])}}),j={title:"Steps \u6B65\u9AA4\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(C.name,C),a.component(V.name,V)}};d.Step=V,d.Steps=C,d.default=j,d.stepProps=x,d.stepsProps=P,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,e){"use strict";const P={modelValue:{type:Number,default:0},space:{type:Number},alignCenter:{type:Boolean,default:!1},direction:{type:String,default:"horizontal"},simple:{type:Boolean,default:!1}};function y(a,n,o){let s=a;return n&&(s+=`__${n}`),o&&(s+=`--${o}`),s}function v(a,n=!1){const o=n?`.devui-${a}`:`devui-${a}`;return{b:()=>y(o),e:t=>t?y(o,t):"",m:t=>t?y(o,"",t):"",em:(t,r)=>t&&r?y(o,t,r):""}}var w="";const D="active-step",I="steps",z="steps-props";var C=e.defineComponent({name:"DSteps",props:P,emits:["update:modelValue"],setup(a,{slots:n}){const{modelValue:o,direction:s,simple:u}=e.toRefs(a),l=v("steps"),c=e.ref(o.value);e.provide(D,c),e.provide(z,a);const t=e.ref([]);e.provide(I,t),e.watch(o,i=>{c.value=i});const r=e.computed(()=>{const i=s.value==="vertical"?" vertical":"",p=u.value?" simple":"";return`${l.b()}${i}${p}`});return()=>{var i;return e.createVNode("div",{class:r.value},[(i=n.default)==null?void 0:i.call(n)])}}});const x={title:{type:String,required:!0},description:{type:String},icon:{type:String},status:{type:String}},E={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},T={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};var M="",_=e.defineComponent({name:"DSvgIcon",props:T,setup(a){const{name:n,color:o,size:s}=e.toRefs(a),u=v("svg-icon"),l=e.computed(()=>`#icon-${n.value}`),c=e.computed(()=>typeof s.value=="number"?`${s.value}px`:s.value),t={width:c.value,height:c.value};return()=>e.createVNode("svg",{class:u.b(),style:t},[e.createVNode("use",{"xlink:href":l.value,fill:o.value},null)])}});function j(a){return/^((http|https):)?\/\//.test(a)}function A(a,n){const{component:o,name:s,size:u,color:l,classPrefix:c,rotate:t}=e.toRefs(a),r=v("icon"),i=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),p=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(_),m=()=>e.createVNode("img",e.mergeProps({src:s.value,alt:s.value.split("/")[s.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{width:i.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},n.attrs),null),S=()=>e.createVNode(p,e.mergeProps({name:s.value,color:l.value,size:i.value,class:[(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},n.attrs),null),h=()=>{const N=/^icon-/.test(s.value)?s.value:`${c.value}-${s.value}`;return e.createVNode("i",e.mergeProps({class:[c.value,N,(t==null?void 0:t.value)==="infinite"&&r.m("spin")],style:{fontSize:i.value,color:l.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},n.attrs),null)};return{iconDom:()=>o.value?S():j(s.value)?m():h()}}var g=e.defineComponent({name:"DIcon",props:E,emits:["click"],setup(a,n){const{disabled:o,operable:s}=e.toRefs(a),{iconDom:u}=A(a,n),l=v("icon"),c=e.computed(()=>({[l.e("container")]:!0,[l.m("disabled")]:o.value,[l.m("operable")]:s.value,[l.m("no-slots")]:!Object.keys(n.slots).length})),t=r=>{o.value||n.emit("click",r)};return()=>{var r,i,p,m;return e.createVNode("div",{class:c.value,onClick:t},[(i=(r=n.slots).prefix)==null?void 0:i.call(r),u(),(m=(p=n.slots).suffix)==null?void 0:m.call(p)])}}}),U="";e.defineComponent({name:"DIconGroup",setup(a,n){const o=v("icon-group");return()=>{var s,u;return e.createVNode("div",{class:o.b()},[(u=(s=n.slots).default)==null?void 0:u.call(s)])}}});var G="",V=e.defineComponent({name:"DStep",props:x,setup(a,{slots:n}){const{title:o,description:s,icon:u,status:l}=e.toRefs(a),c=v("step"),t=e.getCurrentInstance(),r=e.inject(D),i=e.inject(I);i.value.push(t);const p=e.inject(z),m=i.value.indexOf(t),S=e.computed(()=>{const f=r.value===m?" active":"",b=r.value>m?" finished":"",O=p.alignCenter?" center":"",F=(l==null?void 0:l.value)?` ${l==null?void 0:l.value}`:"",k=p.simple?` ${c.m("simple")}`:"";return`${c.b()}${f}${b}${O}${F}${k}`}),h=e.computed(()=>{const f={};return p.space?f.width=`${p.space}px`:f.flexBasis=p.alignCenter||p.simple?`${100/i.value.length}%`:`${100/(i.value.length-1)}%`,f}),$=e.computed(()=>{const f=r.value===m,b=r.value>m;return f?"var(--devui-brand)":b?"var(--devui-success)":"var(--devui-placeholder)"}),N={finish:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),success:e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null),error:e.createVNode(g,{name:"error-o",color:"var(--devui-danger)",size:"24px"},null)},B=()=>{var f;return n.icon?(f=n.icon)==null?void 0:f.call(n,$.value):u.value?e.createVNode(g,{name:u.value,color:$.value,size:"24px"},null):l.value&&N[l.value]?N[l.value]:r.value>i.value.indexOf(t)?e.createVNode(g,{name:"right-o",color:"var(--devui-success)",size:"24px"},null):e.createVNode("span",{class:c.e("dot")},[m+1])};return()=>e.createVNode(e.Fragment,null,[p.simple?e.createVNode("div",{class:S.value,style:h.value},[o.value]):e.createVNode("div",{class:S.value,style:h.value},[e.createVNode("div",{class:c.e("dot-container")},[B(),e.createVNode("div",{class:c.e("line")},null)]),e.createVNode("div",{class:c.e("content")},[e.createVNode("span",{class:c.e("title")},[o.value]),s.value&&e.createVNode("span",{class:c.e("description")},[s.value])])])])}}),R={title:"Steps \u6B65\u9AA4\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(C.name,C),a.component(V.name,V)}};d.Step=V,d.Steps=C,d.default=R,d.stepProps=x,d.stepsProps=P,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/steps/style.css

@@ -1 +1 @@
-.devui-steps{display:flex}.devui-steps.vertical{flex-direction:column;height:100%}.devui-steps.vertical .devui-step{flex-direction:row}.devui-steps.vertical .devui-step__line{width:1px;height:100%;left:12px;top:24px}.devui-steps.vertical .devui-step__content{margin-left:8px;padding-top:2px}.devui-steps.simple .devui-step{position:relative;height:36px;line-height:36px;text-align:center;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-steps.simple .devui-step:not(:first-child){margin-left:18px}.devui-steps.simple .devui-step:not(:last-child){margin-right:18px}.devui-steps.simple .devui-step:not(:first-child):before{content:"";width:0;height:0;position:absolute;left:-28px;top:0;border:solid 18px transparent;border-top-color:var(--devui-brand-foil, #f2f2f3);border-right-color:var(--devui-brand-foil, #f2f2f3);border-bottom-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step:after{content:"";width:0;height:0;position:absolute;right:-36px;top:0;border:solid 18px transparent;border-left-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step.active{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.active:before{border-top-color:var(--devui-brand, #5e7ce0);border-right-color:var(--devui-brand, #5e7ce0);border-bottom-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.active:after{border-left-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.finished{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.finished:before{border-top-color:var(--devui-success, #50d4ab);border-right-color:var(--devui-success, #50d4ab);border-bottom-color:var(--devui-success, #50d4ab)}.devui-steps.simple .devui-step.finished:after{border-left-color:var(--devui-success, #50d4ab)}.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-step{display:flex;flex-direction:column;flex-shrink:1}.devui-step:last-child{flex-shrink:0}.devui-step:last-child:not(.center):not(.devui-step--simple){flex-basis:auto!important}.devui-step:last-child .devui-step__line{display:none}.devui-step__dot-container{position:relative}.devui-step__content{display:flex;flex-direction:column}.devui-step__dot{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step__line{position:absolute;top:12px;left:24px;width:calc(100% - 24px);height:1px;background-color:var(--devui-line, #d7d8da)}.devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step__description{color:var(--devui-placeholder, #babbc0);font-size:12px}.devui-step.active .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.active .devui-step__title,.devui-step.active .devui-step__description{color:var(--devui-brand, #5e7ce0)}.devui-step.finished .devui-step__dot{background-color:var(--devui-success, #50d4ab)}.devui-step.finished .devui-step__title,.devui-step.finished .devui-step__description{color:var(--devui-success, #50d4ab)}.devui-step.center{text-align:center}.devui-step.center .devui-step__line{left:calc(50% + 12px)}.devui-step.wait .devui-step__dot{background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step.wait .devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step.process .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.process .devui-step__title{color:var(--devui-brand, #5e7ce0)}.devui-step.finish .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.finish .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.success .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.success .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.error .devui-step__dot{background-color:var(--devui-danger, #f66f6a);color:var(--devui-light-text, #ffffff)}.devui-step.error .devui-step__title{color:var(--devui-danger, #f66f6a)}
+.devui-steps{display:flex}.devui-steps.vertical{flex-direction:column;height:100%}.devui-steps.vertical .devui-step{flex-direction:row}.devui-steps.vertical .devui-step__line{width:1px;height:100%;left:12px;top:24px}.devui-steps.vertical .devui-step__content{margin-left:8px;padding-top:2px}.devui-steps.simple .devui-step{position:relative;height:36px;line-height:36px;text-align:center;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-steps.simple .devui-step:not(:first-child){margin-left:18px}.devui-steps.simple .devui-step:not(:last-child){margin-right:18px}.devui-steps.simple .devui-step:not(:first-child):before{content:"";width:0;height:0;position:absolute;left:-28px;top:0;border:solid 18px transparent;border-top-color:var(--devui-brand-foil, #f2f2f3);border-right-color:var(--devui-brand-foil, #f2f2f3);border-bottom-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step:after{content:"";width:0;height:0;position:absolute;right:-36px;top:0;border:solid 18px transparent;border-left-color:var(--devui-brand-foil, #f2f2f3)}.devui-steps.simple .devui-step.active{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.active:before{border-top-color:var(--devui-brand, #5e7ce0);border-right-color:var(--devui-brand, #5e7ce0);border-bottom-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.active:after{border-left-color:var(--devui-brand, #5e7ce0)}.devui-steps.simple .devui-step.finished{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-steps.simple .devui-step.finished:before{border-top-color:var(--devui-success, #50d4ab);border-right-color:var(--devui-success, #50d4ab);border-bottom-color:var(--devui-success, #50d4ab)}.devui-steps.simple .devui-step.finished:after{border-left-color:var(--devui-success, #50d4ab)}.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-step{display:flex;flex-direction:column;flex-shrink:1}.devui-step:last-child{flex-shrink:0}.devui-step:last-child:not(.center):not(.devui-step--simple){flex-basis:auto!important}.devui-step:last-child .devui-step__line{display:none}.devui-step__dot-container{position:relative}.devui-step__content{display:flex;flex-direction:column}.devui-step__dot{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px;border-radius:50%;background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step__line{position:absolute;top:12px;left:24px;width:calc(100% - 24px);height:1px;background-color:var(--devui-line, #d7d8da)}.devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step__description{color:var(--devui-placeholder, #babbc0);font-size:12px}.devui-step.active .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.active .devui-step__title,.devui-step.active .devui-step__description{color:var(--devui-brand, #5e7ce0)}.devui-step.finished .devui-step__dot{background-color:var(--devui-success, #50d4ab)}.devui-step.finished .devui-step__title,.devui-step.finished .devui-step__description{color:var(--devui-success, #50d4ab)}.devui-step.center{text-align:center}.devui-step.center .devui-step__line{left:calc(50% + 12px)}.devui-step.wait .devui-step__dot{background-color:var(--devui-brand-foil, #f2f2f3);color:var(--devui-text, #252b3a)}.devui-step.wait .devui-step__title{color:var(--devui-placeholder, #babbc0)}.devui-step.process .devui-step__dot{background-color:var(--devui-brand, #5e7ce0);color:var(--devui-light-text, #ffffff)}.devui-step.process .devui-step__title{color:var(--devui-brand, #5e7ce0)}.devui-step.finish .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.finish .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.success .devui-step__dot{background-color:var(--devui-success, #50d4ab);color:var(--devui-light-text, #ffffff)}.devui-step.success .devui-step__title{color:var(--devui-success, #50d4ab)}.devui-step.error .devui-step__dot{background-color:var(--devui-danger, #f66f6a);color:var(--devui-light-text, #ffffff)}.devui-step.error .devui-step__title{color:var(--devui-danger, #f66f6a)}