vue-devui 1.0.0-rc.1 → 1.0.0-rc.12

package/statistic/index.es.js

@@ -4,7 +4,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, ref, computed, onMounted, watch, createVNode, mergeProps, createTextVNode } from "vue";
+import { defineComponent, ref, computed, onMounted, watch, createVNode, createTextVNode } from "vue";
 const statisticProps = {
   title: {
     type: String,
@@ -26,9 +26,6 @@ const statisticProps = {
     type: String,
     default: ""
   },
-  valueStyle: {
-    type: Object
-  },
   animationDuration: {
     type: Number,
     default: 2e3
@@ -61,9 +58,10 @@ const isHasDot = (value) => {
   if (!isNaN(value)) {
     return (value + "").indexOf(".") !== -1;
   }
+  return false;
 };
 const analysisValueType = (value, propsValue, groupSeparator, splitPrecisionNumber) => {
-  const fixedNumber = propsValue.toString().indexOf(".") !== -1 ? propsValue.toString().length - propsValue.toString().indexOf(".") - 1 : 0;
+  const fixedNumber = (propsValue == null ? void 0 : propsValue.toString().indexOf(".")) !== -1 ? (propsValue == null ? void 0 : propsValue.toString().length) - (propsValue == null ? void 0 : propsValue.toString().indexOf(".")) - 1 : 0;
   if (typeof value === "number") {
     if (isHasDot(value)) {
       return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator) : separator(value.toFixed(fixedNumber).toString(), groupSeparator);
@@ -92,16 +90,7 @@ const easeInExpo = function(x) {
 const easeInOutCirc = function(x) {
   return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2;
 };
-var easing = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  easeOutCubic,
-  linear,
-  easeOutExpo,
-  easeInOutExpo,
-  easeInExpo,
-  easeInOutCirc
-});
+var easing = { easeOutCubic, linear, easeOutExpo, easeInOutExpo, easeInExpo, easeInOutCirc };
 class Tween {
   constructor(options) {
     __publicField(this, "from");
@@ -119,7 +108,7 @@ class Tween {
     __publicField(this, "time");
     __publicField(this, "elapsed");
     __publicField(this, "keys");
-    const { from, to, duration, delay, easing: easing2, onStart, onUpdate, onFinish } = options;
+    const { from, to, duration, delay, easing: easingValue, onStart, onUpdate, onFinish } = options;
     for (const key in from) {
       if (to[key] === void 0) {
         to[key] = from[key];
@@ -134,7 +123,7 @@ class Tween {
     this.to = to;
     this.duration = duration;
     this.delay = delay;
-    this.easing = easing2;
+    this.easing = easingValue;
     this.onStart = onStart;
     this.onUpdate = onUpdate;
     this.onFinish = onFinish;
@@ -187,15 +176,38 @@ class Tween {
     this.timer = null;
   }
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var statistic = "";
 var Statistic = defineComponent({
   name: "DStatistic",
-  inheritAttrs: false,
   props: statisticProps,
   setup(props, ctx) {
     var _a;
     const innerValue = ref((_a = props.valueFrom) != null ? _a : props.value);
     const tween = ref(null);
+    const ns = useNamespace("statistic");
     const animation = (from = ((_b) => (_b = props.valueFrom) != null ? _b : 0)(), to = typeof props.value === "number" ? props.value : Number(props.value)) => {
       if (from !== to) {
         tween.value = new Tween({
@@ -233,35 +245,30 @@ var Statistic = defineComponent({
     });
     return () => {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-      return createVNode("div", mergeProps({
-        "class": "devui-statistic"
-      }, ctx.attrs), [createVNode("div", {
-        "class": "devui-statistic-title",
-        "style": props.titleStyle
+      return createVNode("div", {
+        "class": ns.b()
+      }, [createVNode("div", {
+        "class": ns.e("title")
       }, [((_b = (_a2 = ctx.slots).title) == null ? void 0 : _b.call(_a2)) || props.title]), createVNode("div", {
-        "class": "devui-statistic-content",
-        "style": props.valueStyle
+        "class": ns.e("content")
       }, [props.prefix || ((_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)) ? createVNode("span", {
-        "class": "devui-statistic-prefix"
+        "class": ns.e("prefix")
       }, [((_f = (_e = ctx.slots).prefix) == null ? void 0 : _f.call(_e)) || props.prefix]) : null, createVNode("span", {
-        "class": "devui-statistic--value"
+        "class": ns.e("value")
       }, [statisticValue.value]), props.suffix || ((_h = (_g = ctx.slots).suffix) == null ? void 0 : _h.call(_g)) ? createVNode("span", {
-        "class": "devui-statistic-suffix"
+        "class": ns.e("suffix")
       }, [((_j = (_i = ctx.slots).suffix) == null ? void 0 : _j.call(_i)) || props.suffix]) : null]), props.extra || ((_l = (_k = ctx.slots).extra) == null ? void 0 : _l.call(_k)) ? createVNode("div", {
-        "class": "devui-statistic-extra"
+        "class": ns.e("extra")
       }, [createTextVNode(" "), ((_n = (_m = ctx.slots).extra) == null ? void 0 : _n.call(_m)) || props.extra]) : null]);
     };
   }
 });
-Statistic.install = function(app) {
-  app.component(Statistic.name, Statistic);
-};
 var index = {
   title: "Statistic \u7EDF\u8BA1\u6570\u503C",
   category: "\u6570\u636E\u5C55\u793A",
   status: "100%",
   install(app) {
-    app.use(Statistic);
+    app.component(Statistic.name, Statistic);
   }
 };
-export { Statistic, index as default };
+export { Statistic, index as default, statisticProps };

package/statistic/index.umd.js

@@ -1 +1 @@
-var $=Object.defineProperty;var z=(a,e,f)=>e in a?$(a,e,{enumerable:!0,configurable:!0,writable:!0,value:f}):a[e]=f;var n=(a,e,f)=>(z(a,typeof e!="symbol"?e+"":e,f),f);(function(a,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis!="undefined"?globalThis:a||self,e(a.index={},a.Vue))})(this,function(a,e){"use strict";const f={title:{type:String,default:""},value:{type:[Number,String]},prefix:{type:String},suffix:{type:String},precision:{type:Number},groupSeparator:{type:String,default:""},valueStyle:{type:Object},animationDuration:{type:Number,default:2e3},valueFrom:{type:Number},animation:{type:Boolean,default:!1},start:{type:Boolean,default:!0},extra:{type:String,default:""}},y=(t,i)=>t.replace(/\d+/,function(s){return s.replace(/(\d)(?=(\d{3})+$)/g,function(l){return l+`${i}`})}),C=t=>{if(!isNaN(t))return(t+"").indexOf(".")!==-1},D=(t,i,r,s)=>{const l=i.toString().indexOf(".")!==-1?i.toString().length-i.toString().indexOf(".")-1:0;return typeof t=="number"?C(t)?y(s?t.toFixed(s).toString():t.toFixed(l).toString(),r):y(s?t.toFixed(s).toString():t.toString(),r):t},c=Math.pow,v=Math.sqrt,E=function(t){return 1-c(1-t,3)},A=t=>t,I=function(t){return t===1?1:1-c(2,-10*t)},M=function(t){return t===0?0:t===1?1:t<.5?c(2,20*t-10)/2:(2-c(2,-20*t+10))/2},_=function(t){return t===0?0:c(2,10*t-10)},U=function(t){return t<.5?(1-v(1-c(2*t,2)))/2:(v(1-c(-2*t+2,2))+1)/2};var j=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",easeOutCubic:E,linear:A,easeOutExpo:I,easeInOutExpo:M,easeInExpo:_,easeInOutCirc:U});class q{constructor(i){n(this,"from");n(this,"to");n(this,"duration");n(this,"delay");n(this,"easing");n(this,"onStart");n(this,"onUpdate");n(this,"onFinish");n(this,"startTime");n(this,"started");n(this,"finished");n(this,"timer");n(this,"time");n(this,"elapsed");n(this,"keys");const{from:r,to:s,duration:l,delay:g,easing:S,onStart:u,onUpdate:d,onFinish:h}=i;for(const o in r)s[o]===void 0&&(s[o]=r[o]);for(const o in s)r[o]===void 0&&(r[o]=s[o]);this.from=r,this.to=s,this.duration=l,this.delay=g,this.easing=S,this.onStart=u,this.onUpdate=d,this.onFinish=h,this.startTime=Date.now()+this.delay,this.started=!1,this.finished=!1,this.timer=null,this.keys={}}update(){if(this.time=Date.now(),!(this.time<this.startTime)&&!this.finished){if(this.elapsed===this.duration){this.finished||(this.finished=!0,this.onFinish&&this.onFinish(this.keys));return}this.elapsed=this.time-this.startTime,this.elapsed=this.elapsed>this.duration?this.duration:this.elapsed;for(const i in this.to)this.keys[i]=this.from[i]+(this.to[i]-this.from[i])*j[this.easing](this.elapsed/this.duration);this.started||(this.onStart&&this.onStart(this.keys),this.started=!0),this.onUpdate(this.keys)}}start(){this.startTime=Date.now()+this.delay;const i=()=>{this.update(),this.timer=requestAnimationFrame(i),this.finished&&(cancelAnimationFrame(this.timer),this.timer=null)};i()}stop(){cancelAnimationFrame(this.timer),this.timer=null}}var H="",m=e.defineComponent({name:"DStatistic",inheritAttrs:!1,props:f,setup(t,i){var S;const r=e.ref((S=t.valueFrom)!=null?S:t.value),s=e.ref(null),l=(u=(h=>(h=t.valueFrom)!=null?h:0)(),d=typeof t.value=="number"?t.value:Number(t.value))=>{u!==d&&(s.value=new q({from:{value:u},to:{value:d},delay:0,duration:t.animationDuration,easing:"easeOutCubic",onUpdate:o=>{r.value=o.value},onFinish:()=>{r.value=d}}),s.value.start())},g=e.computed(()=>D(r.value,t.value,t.groupSeparator,t.precision));return e.onMounted(()=>{t.animation&&t.start&&l()}),e.watch(()=>t.start,u=>{u&&!s.value&&l()}),()=>{var u,d,h,o,x,F,p,O,b,N,T,k,V,w;return e.createVNode("div",e.mergeProps({class:"devui-statistic"},i.attrs),[e.createVNode("div",{class:"devui-statistic-title",style:t.titleStyle},[((d=(u=i.slots).title)==null?void 0:d.call(u))||t.title]),e.createVNode("div",{class:"devui-statistic-content",style:t.valueStyle},[t.prefix||((o=(h=i.slots).prefix)==null?void 0:o.call(h))?e.createVNode("span",{class:"devui-statistic-prefix"},[((F=(x=i.slots).prefix)==null?void 0:F.call(x))||t.prefix]):null,e.createVNode("span",{class:"devui-statistic--value"},[g.value]),t.suffix||((O=(p=i.slots).suffix)==null?void 0:O.call(p))?e.createVNode("span",{class:"devui-statistic-suffix"},[((N=(b=i.slots).suffix)==null?void 0:N.call(b))||t.suffix]):null]),t.extra||((k=(T=i.slots).extra)==null?void 0:k.call(T))?e.createVNode("div",{class:"devui-statistic-extra"},[e.createTextVNode(" "),((w=(V=i.slots).extra)==null?void 0:w.call(V))||t.extra]):null])}}});m.install=function(t){t.component(m.name,m)};var B={title:"Statistic \u7EDF\u8BA1\u6570\u503C",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.use(m)}};a.Statistic=m,a.default=B,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+var _=Object.defineProperty;var j=(a,i,c)=>i in a?_(a,i,{enumerable:!0,configurable:!0,writable:!0,value:c}):a[i]=c;var r=(a,i,c)=>(j(a,typeof i!="symbol"?i+"":i,c),c);(function(a,i){typeof exports=="object"&&typeof module!="undefined"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(a=typeof globalThis!="undefined"?globalThis:a||self,i(a.index={},a.Vue))})(this,function(a,i){"use strict";const c={title:{type:String,default:""},value:{type:[Number,String]},prefix:{type:String},suffix:{type:String},precision:{type:Number},groupSeparator:{type:String,default:""},animationDuration:{type:Number,default:2e3},valueFrom:{type:Number},animation:{type:Boolean,default:!1},start:{type:Boolean,default:!0},extra:{type:String,default:""}},y=(t,e)=>t.replace(/\d+/,function(s){return s.replace(/(\d)(?=(\d{3})+$)/g,function(o){return o+`${e}`})}),$=t=>isNaN(t)?!1:(t+"").indexOf(".")!==-1,A=(t,e,n,s)=>{const o=(e==null?void 0:e.toString().indexOf("."))!==-1?(e==null?void 0:e.toString().length)-(e==null?void 0:e.toString().indexOf("."))-1:0;return typeof t=="number"?$(t)?y(s?t.toFixed(s).toString():t.toFixed(o).toString(),n):y(s?t.toFixed(s).toString():t.toString(),n):t},l=Math.pow,v=Math.sqrt;var M={easeOutCubic:function(t){return 1-l(1-t,3)},linear:t=>t,easeOutExpo:function(t){return t===1?1:1-l(2,-10*t)},easeInOutExpo:function(t){return t===0?0:t===1?1:t<.5?l(2,20*t-10)/2:(2-l(2,-20*t+10))/2},easeInExpo:function(t){return t===0?0:l(2,10*t-10)},easeInOutCirc:function(t){return t<.5?(1-v(1-l(2*t,2)))/2:(v(1-l(-2*t+2,2))+1)/2}};class U{constructor(e){r(this,"from");r(this,"to");r(this,"duration");r(this,"delay");r(this,"easing");r(this,"onStart");r(this,"onUpdate");r(this,"onFinish");r(this,"startTime");r(this,"started");r(this,"finished");r(this,"timer");r(this,"time");r(this,"elapsed");r(this,"keys");const{from:n,to:s,duration:o,delay:m,easing:S,onStart:u,onUpdate:f,onFinish:h}=e;for(const d in n)s[d]===void 0&&(s[d]=n[d]);for(const d in s)n[d]===void 0&&(n[d]=s[d]);this.from=n,this.to=s,this.duration=o,this.delay=m,this.easing=S,this.onStart=u,this.onUpdate=f,this.onFinish=h,this.startTime=Date.now()+this.delay,this.started=!1,this.finished=!1,this.timer=null,this.keys={}}update(){if(this.time=Date.now(),!(this.time<this.startTime)&&!this.finished){if(this.elapsed===this.duration){this.finished||(this.finished=!0,this.onFinish&&this.onFinish(this.keys));return}this.elapsed=this.time-this.startTime,this.elapsed=this.elapsed>this.duration?this.duration:this.elapsed;for(const e in this.to)this.keys[e]=this.from[e]+(this.to[e]-this.from[e])*M[this.easing](this.elapsed/this.duration);this.started||(this.onStart&&this.onStart(this.keys),this.started=!0),this.onUpdate(this.keys)}}start(){this.startTime=Date.now()+this.delay;const e=()=>{this.update(),this.timer=requestAnimationFrame(e),this.finished&&(cancelAnimationFrame(this.timer),this.timer=null)};e()}stop(){cancelAnimationFrame(this.timer),this.timer=null}}function g(t,e,n){let s=t;return e&&(s+=`__${e}`),n&&(s+=`--${n}`),s}function q(t,e=!1){const n=e?`.devui-${t}`:`devui-${t}`;return{b:()=>g(n),e:u=>u?g(n,u):"",m:u=>u?g(n,"",u):"",em:(u,f)=>u&&f?g(n,u,f):""}}var P="",F=i.defineComponent({name:"DStatistic",props:c,setup(t,e){var u;const n=i.ref((u=t.valueFrom)!=null?u:t.value),s=i.ref(null),o=q("statistic"),m=(f=(d=>(d=t.valueFrom)!=null?d:0)(),h=typeof t.value=="number"?t.value:Number(t.value))=>{f!==h&&(s.value=new U({from:{value:f},to:{value:h},delay:0,duration:t.animationDuration,easing:"easeOutCubic",onUpdate:x=>{n.value=x.value},onFinish:()=>{n.value=h}}),s.value.start())},S=i.computed(()=>A(n.value,t.value,t.groupSeparator,t.precision));return i.onMounted(()=>{t.animation&&t.start&&m()}),i.watch(()=>t.start,f=>{f&&!s.value&&m()}),()=>{var f,h,d,x,N,O,b,T,k,w,C,D,E,I;return i.createVNode("div",{class:o.b()},[i.createVNode("div",{class:o.e("title")},[((h=(f=e.slots).title)==null?void 0:h.call(f))||t.title]),i.createVNode("div",{class:o.e("content")},[t.prefix||((x=(d=e.slots).prefix)==null?void 0:x.call(d))?i.createVNode("span",{class:o.e("prefix")},[((O=(N=e.slots).prefix)==null?void 0:O.call(N))||t.prefix]):null,i.createVNode("span",{class:o.e("value")},[S.value]),t.suffix||((T=(b=e.slots).suffix)==null?void 0:T.call(b))?i.createVNode("span",{class:o.e("suffix")},[((w=(k=e.slots).suffix)==null?void 0:w.call(k))||t.suffix]):null]),t.extra||((D=(C=e.slots).extra)==null?void 0:D.call(C))?i.createVNode("div",{class:o.e("extra")},[i.createTextVNode(" "),((I=(E=e.slots).extra)==null?void 0:I.call(E))||t.extra]):null])}}}),B={title:"Statistic \u7EDF\u8BA1\u6570\u503C",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.component(F.name,F)}};a.Statistic=F,a.default=B,a.statisticProps=c,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/statistic/style.css

@@ -1 +1 @@
-.devui-statistic{box-sizing:border-box;margin:0;padding:0;font-size:14px;line-height:1.5715;list-style:none}.devui-statistic-title{margin-bottom:4px;font-size:14px}.devui-statistic-content{font-size:24px;display:flex;align-items:center}.devui-statistic-prefix{margin-right:6px;display:flex;align-items:center}.devui-statistic-suffix{margin-left:6px;display:flex;align-items:center}.devui-statistic--value{display:inline-block}
+.devui-statistic{box-sizing:border-box;margin:0;padding:0;font-size:14px;line-height:1.5715;list-style:none}.devui-statistic__title{margin-bottom:4px;font-size:14px}.devui-statistic__content{font-size:24px;display:flex;align-items:center}.devui-statistic__prefix{margin-right:6px;display:flex;align-items:center}.devui-statistic__suffix{margin-left:6px;display:flex;align-items:center}.devui-statistic__value{display:inline-block}

package/status/index.es.js

@@ -1,4 +1,27 @@
 import { defineComponent, computed, createVNode } from "vue";
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var status = "";
 var Status = defineComponent({
   name: "DStatus",
@@ -9,14 +32,15 @@ var Status = defineComponent({
     }
   },
   setup(props, ctx) {
+    const ns = useNamespace("status");
     const typeClass = computed(() => {
       const {
         type
       } = props;
       const typeStatus = ["success", "error", "initial", "warning", "waiting", "running", "invalid"];
-      let typeClassStr = `devui-status devui-status-bg-invalid`;
+      let typeClassStr = `${ns.b()} ${ns.em("bg", "invalid")}`;
       if (typeStatus.includes(type)) {
-        typeClassStr = `devui-status devui-status-bg-${type}`;
+        typeClassStr = `${ns.b()} ${ns.em("bg", type)}`;
       }
       return typeClassStr;
     });

package/status/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){"use strict";var l="",s=t.defineComponent({name:"DStatus",props:{type:{default:"invalid",type:String}},setup(i,o){const r=t.computed(()=>{const{type:n}=i,u=["success","error","initial","warning","waiting","running","invalid"];let a="devui-status devui-status-bg-invalid";return u.includes(n)&&(a=`devui-status devui-status-bg-${n}`),a});return()=>{var n,u;return t.createVNode("span",{class:r.value},[(u=(n=o.slots).default)==null?void 0:u.call(n)])}}}),d={title:"Status \u72B6\u6001",category:"\u901A\u7528",status:"100%",install(i){i.component(s.name,s)}};e.Status=s,e.default=d,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"});
+(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"});

package/status/style.css

@@ -1 +1 @@
-.devui-status{line-height:20px;height:20px;display:flex;align-items:center}.devui-status:before{display:inline-block;content:"";width:10px;height:10px;margin-right:5px;border-radius:100%}.devui-status.devui-status-bg-success:before{background-color:var(--devui-success, #50d4ab)}.devui-status.devui-status-bg-error:before{background-color:var(--devui-danger, #f66f6a)}.devui-status.devui-status-bg-warning:before{background-color:var(--devui-warning, #fac20a)}.devui-status.devui-status-bg-initial:before{background-color:var(--devui-initial, #e9edfa)}.devui-status.devui-status-bg-waiting:before{background-color:var(--devui-waiting, #9faad7)}.devui-status.devui-status-bg-running:before{background-color:var(--devui-info, #5e7ce0)}.devui-status.devui-status-bg-invalid:before{background-color:var(--devui-dividing-line, #dfe1e6)}
+.devui-status{line-height:20px;height:20px;display:flex;align-items:center}.devui-status:before{display:inline-block;content:"";width:10px;height:10px;margin-right:5px;border-radius:100%}.devui-status.devui-status__bg--success:before{background-color:var(--devui-success, #50d4ab)}.devui-status.devui-status__bg--error:before{background-color:var(--devui-danger, #f66f6a)}.devui-status.devui-status__bg--warning:before{background-color:var(--devui-warning, #fac20a)}.devui-status.devui-status__bg--initial:before{background-color:var(--devui-initial, #e9edfa)}.devui-status.devui-status__bg--waiting:before{background-color:var(--devui-waiting, #9faad7)}.devui-status.devui-status__bg--running:before{background-color:var(--devui-info, #5e7ce0)}.devui-status.devui-status__bg--invalid:before{background-color:var(--devui-dividing-line, #f2f2f3)}

package/steps/index.es.js

@@ -0,0 +1,385 @@
+import { defineComponent, toRefs, ref, provide, watch, computed, createVNode, resolveDynamicComponent, mergeProps, getCurrentInstance, inject, Fragment } from "vue";
+const stepsProps = {
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  space: {
+    type: Number
+  },
+  alignCenter: {
+    type: Boolean,
+    default: false
+  },
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  simple: {
+    type: Boolean,
+    default: false
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var steps = "";
+const ACTIVE_STEP = "active-step";
+const STEPS = "steps";
+const STEPS_PROPS = "steps-props";
+var Steps = defineComponent({
+  name: "DSteps",
+  props: stepsProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    slots
+  }) {
+    const {
+      modelValue,
+      direction,
+      simple
+    } = toRefs(props);
+    const ns = useNamespace("steps");
+    const activeStep = ref(modelValue.value);
+    provide(ACTIVE_STEP, activeStep);
+    provide(STEPS_PROPS, props);
+    const steps2 = ref([]);
+    provide(STEPS, steps2);
+    watch(modelValue, (newVal) => {
+      activeStep.value = newVal;
+    });
+    const stepsClass = computed(() => {
+      const directionClass = direction.value === "vertical" ? " vertical" : "";
+      const simpleClass = simple.value ? " simple" : "";
+      return `${ns.b()}${directionClass}${simpleClass}`;
+    });
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": stepsClass.value
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const stepProps = {
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  status: {
+    type: String
+  }
+};
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+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)`
+      }
+    }, 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 Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    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
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      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)]);
+    };
+  }
+});
+var iconGroup = "";
+defineComponent({
+  name: "DIconGroup",
+  setup(_, ctx) {
+    const ns = useNamespace("icon-group");
+    return () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": ns.b()
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
+    };
+  }
+});
+var step = "";
+var Step = defineComponent({
+  name: "DStep",
+  props: stepProps,
+  setup(props, {
+    slots
+  }) {
+    const {
+      title,
+      description,
+      icon: icon2,
+      status
+    } = toRefs(props);
+    const ns = useNamespace("step");
+    const instance = getCurrentInstance();
+    const activeStep = inject(ACTIVE_STEP);
+    const steps2 = inject(STEPS);
+    steps2.value.push(instance);
+    const stepsProps2 = inject(STEPS_PROPS);
+    const currentStepIndex = steps2.value.indexOf(instance);
+    const stepClass = computed(() => {
+      const activeClass = activeStep.value === currentStepIndex ? " active" : "";
+      const finishedClass = activeStep.value > currentStepIndex ? " finished" : "";
+      const centerClass = stepsProps2.alignCenter ? " center" : "";
+      const statusClass = (status == null ? void 0 : status.value) ? ` ${status == null ? void 0 : status.value}` : "";
+      const simpleClass = stepsProps2.simple ? ` ${ns.m("simple")}` : "";
+      return `${ns.b()}${activeClass}${finishedClass}${centerClass}${statusClass}${simpleClass}`;
+    });
+    const stepStyle = computed(() => {
+      const styleObj = {};
+      if (stepsProps2.space) {
+        styleObj.width = `${stepsProps2.space}px`;
+      } else {
+        styleObj.flexBasis = stepsProps2.alignCenter || stepsProps2.simple ? `${100 / steps2.value.length}%` : `${100 / (steps2.value.length - 1)}%`;
+      }
+      return styleObj;
+    });
+    const iconColor = computed(() => {
+      const isActive = activeStep.value === currentStepIndex;
+      const isFinished = activeStep.value > currentStepIndex;
+      return isActive ? "var(--devui-brand)" : isFinished ? "var(--devui-success)" : "var(--devui-placeholder)";
+    });
+    const statusMap = {
+      finish: createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null),
+      success: createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null),
+      error: createVNode(Icon, {
+        "name": "error-o",
+        "color": "var(--devui-danger)",
+        "size": "24px"
+      }, null)
+    };
+    const renderDot = () => {
+      var _a;
+      return slots.icon ? (_a = slots.icon) == null ? void 0 : _a.call(slots, iconColor.value) : icon2.value ? createVNode(Icon, {
+        "name": icon2.value,
+        "color": iconColor.value,
+        "size": "24px"
+      }, null) : status.value && statusMap[status.value] ? statusMap[status.value] : activeStep.value > steps2.value.indexOf(instance) ? createVNode(Icon, {
+        "name": "right-o",
+        "color": "var(--devui-success)",
+        "size": "24px"
+      }, null) : createVNode("span", {
+        "class": ns.e("dot")
+      }, [currentStepIndex + 1]);
+    };
+    return () => {
+      return createVNode(Fragment, null, [stepsProps2.simple ? createVNode("div", {
+        "class": stepClass.value,
+        "style": stepStyle.value
+      }, [title.value]) : createVNode("div", {
+        "class": stepClass.value,
+        "style": stepStyle.value
+      }, [createVNode("div", {
+        "class": ns.e("dot-container")
+      }, [renderDot(), createVNode("div", {
+        "class": ns.e("line")
+      }, null)]), createVNode("div", {
+        "class": ns.e("content")
+      }, [createVNode("span", {
+        "class": ns.e("title")
+      }, [title.value]), description.value && createVNode("span", {
+        "class": ns.e("description")
+      }, [description.value])])])]);
+    };
+  }
+});
+var index = {
+  title: "Steps \u6B65\u9AA4\u6761",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Steps.name, Steps);
+    app.component(Step.name, Step);
+  }
+};
+export { Step, Steps, index as default, stepProps, stepsProps };

package/steps/index.umd.js

@@ -0,0 +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 R(a){return/^((http|https):)?\/\//.test(a)}function j(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)`}},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():R(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}=j(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])])])])}}),A={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=A,d.stepProps=x,d.stepsProps=P,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/{gantt → steps}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gantt",
+  "name": "steps",
   "version": "0.0.0",
   "main": "index.umd.js",
   "module": "index.es.js",