vue-devui 1.0.0-beta.12 → 1.0.0-beta.16

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 } from "vue";
+import { defineComponent, ref, computed, onMounted, watch, createVNode, mergeProps, createTextVNode } from "vue";
 const statisticProps = {
   title: {
     type: String,
@@ -24,16 +24,9 @@ const statisticProps = {
   },
   groupSeparator: {
     type: String,
-    default: ","
-  },
-  showGroupSeparator: {
-    type: Boolean,
-    default: false
-  },
-  titleStyle: {
-    type: Object
+    default: ""
   },
-  contentStyle: {
+  valueStyle: {
     type: Object
   },
   animationDuration: {
@@ -49,25 +42,17 @@ const statisticProps = {
   },
   start: {
     type: Boolean,
-    default: false
+    default: true
   },
   extra: {
     type: String,
     default: ""
-  },
-  easing: {
-    type: String,
-    default: "easeOutCubic"
-  },
-  delay: {
-    type: Number,
-    default: 0
   }
 };
-const separator = (SeparatorString, groupSeparator, showGroupSeparator) => {
+const separator = (SeparatorString, groupSeparator) => {
   const res = SeparatorString.replace(/\d+/, function(n) {
     return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
-      return $1 + `${showGroupSeparator ? groupSeparator : ""}`;
+      return $1 + `${groupSeparator}`;
     });
   });
   return res;
@@ -77,13 +62,13 @@ const isHasDot = (value) => {
     return (value + "").indexOf(".") !== -1;
   }
 };
-const analysisValueType = (value, propsValue, groupSeparator, splitPrecisionNumber, showGroupSeparator) => {
+const analysisValueType = (value, propsValue, groupSeparator, splitPrecisionNumber) => {
   const fixedNumber = propsValue.toString().indexOf(".") !== -1 ? propsValue.toString().length - propsValue.toString().indexOf(".") - 1 : 0;
   if (typeof value === "number") {
     if (isHasDot(value)) {
-      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toFixed(fixedNumber).toString(), groupSeparator, showGroupSeparator);
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator) : separator(value.toFixed(fixedNumber).toString(), groupSeparator);
     } else {
-      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator, showGroupSeparator) : separator(value.toString(), groupSeparator, showGroupSeparator);
+      return splitPrecisionNumber ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator) : separator(value.toString(), groupSeparator);
     }
   } else {
     return value;
@@ -220,9 +205,9 @@ var Statistic = defineComponent({
           to: {
             value: to
           },
-          delay: props.delay,
+          delay: 0,
           duration: props.animationDuration,
-          easing: props.easing,
+          easing: "easeOutCubic",
           onUpdate: (keys) => {
             innerValue.value = keys.value;
           },
@@ -234,7 +219,7 @@ var Statistic = defineComponent({
       }
     };
     const statisticValue = computed(() => {
-      return analysisValueType(innerValue.value, props.value, props.groupSeparator, props.precision, props.showGroupSeparator);
+      return analysisValueType(innerValue.value, props.value, props.groupSeparator, props.precision);
     });
     onMounted(() => {
       if (props.animation && props.start) {
@@ -247,7 +232,7 @@ var Statistic = defineComponent({
       }
     });
     return () => {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      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", {
@@ -255,14 +240,16 @@ var Statistic = defineComponent({
         "style": props.titleStyle
       }, [((_b = (_a2 = ctx.slots).title) == null ? void 0 : _b.call(_a2)) || props.title]), createVNode("div", {
         "class": "devui-statistic-content",
-        "style": props.contentStyle
+        "style": props.valueStyle
       }, [props.prefix || ((_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)) ? createVNode("span", {
         "class": "devui-statistic-prefix"
       }, [((_f = (_e = ctx.slots).prefix) == null ? void 0 : _f.call(_e)) || props.prefix]) : null, createVNode("span", {
         "class": "devui-statistic--value"
       }, [statisticValue.value]), props.suffix || ((_h = (_g = ctx.slots).suffix) == null ? void 0 : _h.call(_g)) ? createVNode("span", {
         "class": "devui-statistic-suffix"
-      }, [((_j = (_i = ctx.slots).suffix) == null ? void 0 : _j.call(_i)) || props.suffix]) : null]), ((_l = (_k = ctx.slots).extra) == null ? void 0 : _l.call(_k)) || props.extra]);
+      }, [((_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"
+      }, [createTextVNode(" "), ((_n = (_m = ctx.slots).extra) == null ? void 0 : _n.call(_m)) || props.extra]) : null]);
     };
   }
 });

package/statistic/index.umd.js

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

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;opacity:.7;font-size:14px}.devui-statistic-content{font-size:24px;display:flex;align-items:center}.devui-statistic-prefix{margin-right:6px;display:flex}.devui-statistic-suffix{margin-left:6px;display:flex}.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}