vue-devui 1.0.0-rc.9 → 1.0.2

package/timeline/index.es.js

@@ -17,9 +17,6 @@ const timeAxisProps = {
     default: "left"
   }
 };
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
@@ -42,6 +39,17 @@ const iconProps = {
   classPrefix: {
     type: String,
     default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
   }
 };
 const svgIconProps = {
@@ -112,51 +120,95 @@ var svgIcon = defineComponent({
     };
   }
 });
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
 var DIcon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props, {
-    attrs
-  }) {
+  emits: ["click"],
+  setup(props, ctx) {
     const {
-      component,
-      name,
-      size,
-      color,
-      classPrefix
+      disabled,
+      operable
     } = toRefs(props);
-    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const svgIconDom = () => {
-      return createVNode(IconComponent, mergeProps({
-        "name": name.value,
-        "color": color.value,
-        "size": iconSize.value
-      }, attrs), null);
-    };
-    const imgIconDom = () => {
-      return createVNode("img", mergeProps({
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: iconSize.value || ""
-        }
-      }, attrs), null);
-    };
-    const fontIconDom = () => {
-      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-      return createVNode("i", mergeProps({
-        "class": [classPrefix.value, fontIconClass],
-        "style": {
-          fontSize: iconSize.value,
-          color: color.value
-        }
-      }, attrs), null);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value,
+      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
     };
     return () => {
-      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
     };
   }
 });

package/timeline/index.umd.js

@@ -1 +1 @@
-(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const $={direction:{type:String,default:"vertical"},center:{type:Boolean,default:!1},mode:{type:String,default:"normal"},timePosition:{type:String,default:"left"}};function T(n){return/^((http|https):)?\/\//.test(n)}const D={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"}},z={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function p(n,l,s){let t=n;return l&&(t+=`__${l}`),s&&(t+=`--${s}`),t}function F(n,l=!1){const s=l?`.devui-${n}`:`devui-${n}`;return{b:()=>p(s),e:r=>r?p(s,r):"",m:r=>r?p(s,"",r):"",em:(r,c)=>r&&c?p(s,r,c):""}}var R="",q=e.defineComponent({name:"DSvgIcon",props:z,setup(n){const{name:l,color:s,size:t}=e.toRefs(n),u=F("svg-icon"),o=e.computed(()=>`#icon-${l.value}`),d=e.computed(()=>typeof t.value=="number"?`${t.value}px`:t.value),r={width:d.value,height:d.value};return()=>e.createVNode("svg",{class:u.b(),style:r},[e.createVNode("use",{"xlink:href":o.value,fill:s.value},null)])}}),E=e.defineComponent({name:"DIcon",props:D,setup(n,{attrs:l}){const{component:s,name:t,size:u,color:o,classPrefix:d}=e.toRefs(n),r=s.value?e.resolveDynamicComponent(s.value):e.resolveDynamicComponent(q),c=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),i=()=>e.createVNode(r,e.mergeProps({name:t.value,color:o.value,size:c.value},l),null),m=()=>e.createVNode("img",e.mergeProps({src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:c.value||""}},l),null),g=()=>{const h=/^icon-/.test(t.value)?t.value:`${d.value}-${t.value}`;return e.createVNode("i",e.mergeProps({class:[d.value,h],style:{fontSize:c.value,color:o.value}},l),null)};return()=>s.value?i():T(t.value)?m():g()}});const _={time:{type:String},dotColor:{type:String},lineStyle:{type:String,default:"solid"},lineColor:{type:String},position:{type:String},timePosition:{type:String,default:"left"},type:{type:String,default:"primary"}};var y=e.defineComponent({name:"DTimelineItem",components:{DIcon:E},props:_,emits:[],setup(n,l){const s=e.inject("timeAxis"),t="devui-timeline-item",u=()=>{var i,m;return e.createVNode("div",{class:`${t}-time`},[l.slots.time?(m=(i=l.slots).time)==null?void 0:m.call(i):n.time])},o=()=>{var i,m;return e.createVNode("div",{class:`${t}-content`},[(m=(i=l.slots).default)==null?void 0:m.call(i,n)])},d=i=>i.includes(n.position)?o():s.props.direction==="horizontal"||n.timePosition==="left"?u():"",r=i=>i==="primary"?"":e.createVNode("i",{class:`icon-${i==="success"?"right":i}-o`},null),c=()=>{var i,m;return l.slots.dot?e.createVNode("div",{style:{color:n.dotColor},class:`${t}-dot`},[" ",(m=(i=l.slots).dot)==null?void 0:m.call(i)]):e.createVNode("div",{class:`${t}-dot ${t}-type-${n.type}`,style:{borderColor:n.dotColor}},[r(n.type)])};return()=>e.createVNode("div",{class:t},[e.createVNode("div",{class:`${t}-data-left ${t}-data-top`},[d(["top","left"])]),e.createVNode("div",{class:`${t}-axis`},[c(),s.props.direction==="vertical"&&n.timePosition==="bottom"?u():"",e.createVNode("div",{class:`${t}-line ${t}-line-style-${n.lineStyle}`,style:{borderColor:n.lineColor}},[l.slots.extra?e.createVNode("div",{class:`${t}-line-extra`},[l.slots.extra()]):""])]),e.createVNode("div",{class:`${t}-data-right ${t}-data-bottom`},[d(["right","bottom"])])])}}),j="",v=e.defineComponent({name:"DTimeline",components:{TimelineItem:y},props:$,emits:[],setup(n,l){e.provide("timeAxis",{ctx:l,props:n});const s=e.ref(),t=e.reactive({marginLeft:"0px",height:"auto"}),u=()=>{t.height="auto",t.marginLeft="0px",n.direction==="horizontal"&&e.nextTick(()=>{var d;const o=s.value;n.center&&(t.marginLeft=(((d=o==null?void 0:o.firstElementChild)==null?void 0:d.clientWidth)||0)/2+"px"),t.height=Math.max(...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-data-top")).map(r=>r.clientHeight),...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-data-bottom")).map(r=>r.clientHeight))*2+Math.max(...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-axis")).map(r=>r.clientHeight))+"px"})};return e.onMounted(()=>{u()}),e.watch(e.toRef(n,"direction"),()=>{u()}),()=>{const o=(c,i)=>i?e.createVNode(c,{position:i},null):e.createVNode(c,null,null),d=()=>{var m,g,h;const c=(h=(g=(m=l.slots).default)==null?void 0:g.call(m))!=null?h:[];let i;return c.length===1&&c[0].type===e.Fragment?i=c[0].children||[]:i=c,i.map((a,S)=>{var N,P,V,C,I,b,A,x;return S+1===i.length&&!((N=a.props)==null?void 0:N.lineStyle)&&!((P=a.props)==null?void 0:P["line-style"])&&(a=e.createVNode(a,{"line-style":"none"},null)),!((V=a.props)==null?void 0:V.timePosition)&&!((C=a.props)==null?void 0:C["time-position"])&&(a=e.createVNode(a,{"time-position":n.timePosition?n.timePosition:"left"},null)),n.direction==="horizontal"?((I=a.props)==null?void 0:I.position)==="top"||((b=a.props)==null?void 0:b.position)==="bottom"?a:n.mode==="alternative"?o(a,S%2===0?"bottom":"top"):o(a,"bottom"):((A=a.props)==null?void 0:A.position)==="left"||((x=a.props)==null?void 0:x.position)==="right"?a:n.mode==="alternative"?o(a,S%2===0?"left":"right"):o(a,"right")})},r=()=>n.direction==="horizontal"?"horizontal":"vertical";return e.createVNode("div",{class:`devui-timeline devui-timeline-${r()}  ${n.center?"devui-timeline-"+r()+"-center":""} `,ref:s,style:t},[d()])}}}),L={title:"Timeline \u65F6\u95F4\u8F74",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(n){n.component(v.name,v),n.component(y.name,y)}};f.Timeline=v,f.TimelineItem=y,f.default=L,f.timeAxisProps=$,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
+(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const b={direction:{type:String,default:"vertical"},center:{type:Boolean,default:!1},mode:{type:String,default:"normal"},timePosition:{type:String,default:"left"}},z={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]}},x={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function y(n,r,s){let i=n;return r&&(i+=`__${r}`),s&&(i+=`--${s}`),i}function $(n,r=!1){const s=r?`.devui-${n}`:`devui-${n}`;return{b:()=>y(s),e:t=>t?y(s,t):"",m:t=>t?y(s,"",t):"",em:(t,a)=>t&&a?y(s,t,a):""}}var L="",F=e.defineComponent({name:"DSvgIcon",props:x,setup(n){const{name:r,color:s,size:i}=e.toRefs(n),m=$("svg-icon"),o=e.computed(()=>`#icon-${r.value}`),d=e.computed(()=>typeof i.value=="number"?`${i.value}px`:i.value),t={width:d.value,height:d.value};return()=>e.createVNode("svg",{class:m.b(),style:t},[e.createVNode("use",{"xlink:href":o.value,fill:s.value},null)])}});function k(n){return/^((http|https):)?\/\//.test(n)}function q(n,r){const{component:s,name:i,size:m,color:o,classPrefix:d,rotate:t}=e.toRefs(n),a=$("icon"),l=e.computed(()=>typeof m.value=="number"?`${m.value}px`:m.value),u=s.value?e.resolveDynamicComponent(s.value):e.resolveDynamicComponent(F),p=()=>e.createVNode("img",e.mergeProps({src:i.value,alt:i.value.split("/")[i.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&a.m("spin")],style:{width:l.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},r.attrs),null),h=()=>e.createVNode(u,e.mergeProps({name:i.value,color:o.value,size:l.value,class:[(t==null?void 0:t.value)==="infinite"&&a.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},r.attrs),null),c=()=>{const S=/^icon-/.test(i.value)?i.value:`${d.value}-${i.value}`;return e.createVNode("i",e.mergeProps({class:[d.value,S,(t==null?void 0:t.value)==="infinite"&&a.m("spin")],style:{fontSize:l.value,color:o.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},r.attrs),null)};return{iconDom:()=>s.value?h():k(i.value)?p():c()}}var E=e.defineComponent({name:"DIcon",props:z,emits:["click"],setup(n,r){const{disabled:s,operable:i}=e.toRefs(n),{iconDom:m}=q(n,r),o=$("icon"),d=e.computed(()=>({[o.e("container")]:!0,[o.m("disabled")]:s.value,[o.m("operable")]:i.value,[o.m("no-slots")]:!Object.keys(r.slots).length})),t=a=>{s.value||r.emit("click",a)};return()=>{var a,l,u,p;return e.createVNode("div",{class:d.value,onClick:t},[(l=(a=r.slots).prefix)==null?void 0:l.call(a),m(),(p=(u=r.slots).suffix)==null?void 0:p.call(u)])}}});const R={time:{type:String},dotColor:{type:String},lineStyle:{type:String,default:"solid"},lineColor:{type:String},position:{type:String},timePosition:{type:String,default:"left"},type:{type:String,default:"primary"}};var g=e.defineComponent({name:"DTimelineItem",components:{DIcon:E},props:R,emits:[],setup(n,r){const s=e.inject("timeAxis"),i="devui-timeline-item",m=()=>{var l,u;return e.createVNode("div",{class:`${i}-time`},[r.slots.time?(u=(l=r.slots).time)==null?void 0:u.call(l):n.time])},o=()=>{var l,u;return e.createVNode("div",{class:`${i}-content`},[(u=(l=r.slots).default)==null?void 0:u.call(l,n)])},d=l=>l.includes(n.position)?o():s.props.direction==="horizontal"||n.timePosition==="left"?m():"",t=l=>l==="primary"?"":e.createVNode("i",{class:`icon-${l==="success"?"right":l}-o`},null),a=()=>{var l,u;return r.slots.dot?e.createVNode("div",{style:{color:n.dotColor},class:`${i}-dot`},[" ",(u=(l=r.slots).dot)==null?void 0:u.call(l)]):e.createVNode("div",{class:`${i}-dot ${i}-type-${n.type}`,style:{borderColor:n.dotColor}},[t(n.type)])};return()=>e.createVNode("div",{class:i},[e.createVNode("div",{class:`${i}-data-left ${i}-data-top`},[d(["top","left"])]),e.createVNode("div",{class:`${i}-axis`},[a(),s.props.direction==="vertical"&&n.timePosition==="bottom"?m():"",e.createVNode("div",{class:`${i}-line ${i}-line-style-${n.lineStyle}`,style:{borderColor:n.lineColor}},[r.slots.extra?e.createVNode("div",{class:`${i}-line-extra`},[r.slots.extra()]):""])]),e.createVNode("div",{class:`${i}-data-right ${i}-data-bottom`},[d(["right","bottom"])])])}}),M="",N=e.defineComponent({name:"DTimeline",components:{TimelineItem:g},props:b,emits:[],setup(n,r){e.provide("timeAxis",{ctx:r,props:n});const s=e.ref(),i=e.reactive({marginLeft:"0px",height:"auto"}),m=()=>{i.height="auto",i.marginLeft="0px",n.direction==="horizontal"&&e.nextTick(()=>{var d;const o=s.value;n.center&&(i.marginLeft=(((d=o==null?void 0:o.firstElementChild)==null?void 0:d.clientWidth)||0)/2+"px"),i.height=Math.max(...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-data-top")).map(t=>t.clientHeight),...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-data-bottom")).map(t=>t.clientHeight))*2+Math.max(...Array.from(o==null?void 0:o.querySelectorAll(".devui-timeline-item-axis")).map(t=>t.clientHeight))+"px"})};return e.onMounted(()=>{m()}),e.watch(e.toRef(n,"direction"),()=>{m()}),()=>{const o=(a,l)=>l?e.createVNode(a,{position:l},null):e.createVNode(a,null,null),d=()=>{var u,p,h;const a=(h=(p=(u=r.slots).default)==null?void 0:p.call(u))!=null?h:[];let l;return a.length===1&&a[0].type===e.Fragment?l=a[0].children||[]:l=a,l.map((c,v)=>{var S,V,C,P,I,D,A,T;return v+1===l.length&&!((S=c.props)==null?void 0:S.lineStyle)&&!((V=c.props)==null?void 0:V["line-style"])&&(c=e.createVNode(c,{"line-style":"none"},null)),!((C=c.props)==null?void 0:C.timePosition)&&!((P=c.props)==null?void 0:P["time-position"])&&(c=e.createVNode(c,{"time-position":n.timePosition?n.timePosition:"left"},null)),n.direction==="horizontal"?((I=c.props)==null?void 0:I.position)==="top"||((D=c.props)==null?void 0:D.position)==="bottom"?c:n.mode==="alternative"?o(c,v%2===0?"bottom":"top"):o(c,"bottom"):((A=c.props)==null?void 0:A.position)==="left"||((T=c.props)==null?void 0:T.position)==="right"?c:n.mode==="alternative"?o(c,v%2===0?"left":"right"):o(c,"right")})},t=()=>n.direction==="horizontal"?"horizontal":"vertical";return e.createVNode("div",{class:`devui-timeline devui-timeline-${t()}  ${n.center?"devui-timeline-"+t()+"-center":""} `,ref:s,style:i},[d()])}}}),_={title:"Timeline \u65F6\u95F4\u8F74",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(n){n.component(N.name,N),n.component(g.name,g)}};f.Timeline=N,f.TimelineItem=g,f.default=_,f.timeAxisProps=b,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});

package/timeline/style.css

@@ -1 +1 @@
-.devui-svg-icon{vertical-align:middle}.devui-timeline-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-timeline-vertical .devui-timeline-item{display:flex;flex-direction:row;width:100%}.devui-timeline-vertical .devui-timeline-item-axis{display:flex;flex-direction:column;align-items:center;padding:0 12px}.devui-timeline-vertical .devui-timeline-item-line{position:relative;height:calc(100% - 18px);min-height:20px;border-left-width:2px;border-left-color:var(--devui-dividing-line, #dfe1e6)}.devui-timeline-vertical .devui-timeline-item-line-extra{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-timeline-vertical .devui-timeline-item-line:first-child{display:none}.devui-timeline-vertical .devui-timeline-item-data-left{text-align:end}.devui-timeline-vertical .devui-timeline-item-data-left,.devui-timeline-vertical .devui-timeline-item-data-right{margin-bottom:24px;margin-top:-2px;flex:1}.devui-timeline-vertical .devui-timeline-item-line-style-dashed{border-left-style:dashed}.devui-timeline-vertical .devui-timeline-item-line-style-solid{border-left-style:solid}.devui-timeline-vertical .devui-timeline-item-line-style-dotted{border-left-style:dotted}.devui-timeline-vertical .devui-timeline-item-line-style-none{border-left-style:none}.devui-timeline-vertical .devui-timeline-item .devui-timeline-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-timeline-horizontal{display:flex;flex-direction:row;align-items:center;position:relative}.devui-timeline-horizontal-center .devui-timeline-item-data-top,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom{text-align:center;padding:0 6px}.devui-timeline-horizontal-center .devui-timeline-item-data-top>div,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom>div{transform:translate(-50%)}.devui-timeline-horizontal .devui-timeline-item{display:flex;flex-direction:column;height:100%}.devui-timeline-horizontal .devui-timeline-item-axis{display:flex;flex-direction:row;align-items:center;padding:12px 0}.devui-timeline-horizontal .devui-timeline-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #dfe1e6)}.devui-timeline-horizontal .devui-timeline-item-line-extra{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-timeline-horizontal .devui-timeline-item:first-child .devui-timeline-item-line:first-child{opacity:0}.devui-timeline-horizontal .devui-timeline-item-data-top,.devui-timeline-horizontal .devui-timeline-item-data-bottom{padding-right:12px;flex:1}.devui-timeline-horizontal .devui-timeline-item-line-style-dashed{border-bottom-style:dashed}.devui-timeline-horizontal .devui-timeline-item-line-style-solid{border-bottom-style:solid}.devui-timeline-horizontal .devui-timeline-item-line-style-dotted{border-bottom-style:dotted}.devui-timeline-horizontal .devui-timeline-item-line-style-none{border-bottom-style:none}.devui-timeline-horizontal .devui-timeline-item .devui-timeline-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-timeline-item-dot,.devui-timeline-item-dot>svg{width:18px;height:18px;flex-shrink:0}.devui-timeline-item-dot>i{font-size:18px;vertical-align:0}.devui-timeline-item-type-primary{border:2px solid var(--devui-placeholder, #8a8e99);border-radius:50%}.devui-timeline-item-type-success i{color:var(--devui-success, #50d4ab)}.devui-timeline-item-type-error i{color:var(--devui-danger, #f66f6a)}.devui-timeline-item-type-warning i{color:var(--devui-warning, #fac20a)}.devui-timeline-item-type-running{line-height:16px;text-align:center;animation:devui-timeline-running 1.5s linear infinite;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@keyframes devui-timeline-running{0%{transform:rotate(0);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:var(--devui-success, #50d4ab);border-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-timeline-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-timeline-vertical .devui-timeline-item{display:flex;flex-direction:row;width:100%}.devui-timeline-vertical .devui-timeline-item-axis{display:flex;flex-direction:column;align-items:center;padding:0 12px}.devui-timeline-vertical .devui-timeline-item-line{position:relative;height:calc(100% - 18px);min-height:20px;border-left-width:2px;border-left-color:var(--devui-dividing-line, #f2f2f3)}.devui-timeline-vertical .devui-timeline-item-line-extra{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-timeline-vertical .devui-timeline-item-line:first-child{display:none}.devui-timeline-vertical .devui-timeline-item-data-left{text-align:end}.devui-timeline-vertical .devui-timeline-item-data-left,.devui-timeline-vertical .devui-timeline-item-data-right{margin-bottom:24px;margin-top:-2px;flex:1}.devui-timeline-vertical .devui-timeline-item-line-style-dashed{border-left-style:dashed}.devui-timeline-vertical .devui-timeline-item-line-style-solid{border-left-style:solid}.devui-timeline-vertical .devui-timeline-item-line-style-dotted{border-left-style:dotted}.devui-timeline-vertical .devui-timeline-item-line-style-none{border-left-style:none}.devui-timeline-vertical .devui-timeline-item .devui-timeline-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-timeline-horizontal{display:flex;flex-direction:row;align-items:center;position:relative}.devui-timeline-horizontal-center .devui-timeline-item-data-top,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom{text-align:center;padding:0 6px}.devui-timeline-horizontal-center .devui-timeline-item-data-top>div,.devui-timeline-horizontal-center .devui-timeline-item-data-bottom>div{transform:translate(-50%)}.devui-timeline-horizontal .devui-timeline-item{display:flex;flex-direction:column;height:100%}.devui-timeline-horizontal .devui-timeline-item-axis{display:flex;flex-direction:row;align-items:center;padding:12px 0}.devui-timeline-horizontal .devui-timeline-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #f2f2f3)}.devui-timeline-horizontal .devui-timeline-item-line-extra{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-timeline-horizontal .devui-timeline-item:first-child .devui-timeline-item-line:first-child{opacity:0}.devui-timeline-horizontal .devui-timeline-item-data-top,.devui-timeline-horizontal .devui-timeline-item-data-bottom{padding-right:12px;flex:1}.devui-timeline-horizontal .devui-timeline-item-line-style-dashed{border-bottom-style:dashed}.devui-timeline-horizontal .devui-timeline-item-line-style-solid{border-bottom-style:solid}.devui-timeline-horizontal .devui-timeline-item-line-style-dotted{border-bottom-style:dotted}.devui-timeline-horizontal .devui-timeline-item-line-style-none{border-bottom-style:none}.devui-timeline-horizontal .devui-timeline-item .devui-timeline-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-timeline-item-dot,.devui-timeline-item-dot>svg{width:18px;height:18px;flex-shrink:0}.devui-timeline-item-dot>i{font-size:18px;vertical-align:0}.devui-timeline-item-type-primary{border:2px solid var(--devui-placeholder, #babbc0);border-radius:50%}.devui-timeline-item-type-success i{color:var(--devui-success, #50d4ab)}.devui-timeline-item-type-error i{color:var(--devui-danger, #f66f6a)}.devui-timeline-item-type-warning i{color:var(--devui-warning, #fac20a)}.devui-timeline-item-type-running{line-height:16px;text-align:center;animation:devui-timeline-running 1.5s linear infinite;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@keyframes devui-timeline-running{0%{transform:rotate(0);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}}