vue-devui 1.0.0-pre.0 → 1.0.0-rc.10

package/progress/index.es.js

@@ -1,47 +1,91 @@
-import { defineComponent, toRefs, reactive, watch, createVNode, createTextVNode } from "vue";
+import { defineComponent, toRefs, ref, effect, reactive, watch, createVNode, createTextVNode } from "vue";
+function middleNum(num, min = 0, max = 100) {
+  let middle = 0;
+  middle = Math.min(num, max);
+  middle = Math.max(middle, min);
+  return middle;
+}
+const progressProps = {
+  height: {
+    type: String,
+    default: "20px"
+  },
+  percentage: {
+    type: Number,
+    default: 0
+  },
+  percentageText: {
+    type: String,
+    default: ""
+  },
+  barBgColor: {
+    type: String,
+    default: "#5170ff"
+  },
+  isCircle: {
+    type: Boolean,
+    default: false
+  },
+  strokeWidth: {
+    type: Number,
+    default: 6
+  },
+  showContent: {
+    type: Boolean,
+    default: true
+  },
+  percentageTextPlacement: {
+    type: String,
+    default: "inside"
+  },
+  percentageTextColor: {
+    type: String,
+    default: ""
+  }
+};
+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 progress = "";
 var Progress = defineComponent({
   name: "DProgress",
-  props: {
-    height: {
-      type: String,
-      default: "20px"
-    },
-    percentage: {
-      type: Number,
-      default: 0
-    },
-    percentageText: {
-      type: String,
-      default: ""
-    },
-    barBgColor: {
-      type: String,
-      default: "#5170ff"
-    },
-    isCircle: {
-      type: Boolean,
-      default: false
-    },
-    strokeWidth: {
-      type: Number,
-      default: 6
-    },
-    showContent: {
-      type: Boolean,
-      default: true
-    }
-  },
+  props: progressProps,
   setup(props) {
     const {
       height,
       percentage,
       percentageText,
+      percentageTextPlacement,
+      percentageTextColor,
       barBgColor,
       isCircle,
       strokeWidth,
       showContent
     } = toRefs(props);
+    const normalPercentage = ref(0);
+    effect(() => {
+      normalPercentage.value = middleNum(percentage.value);
+    });
     const data = reactive({
       pathString: "",
       trailPath: null,
@@ -59,32 +103,35 @@ var Progress = defineComponent({
       a ${radius},${radius} 0 1 1 0,${endPositionY}`;
       const len = Math.PI * 2 * radius;
       data.trailPath = {
-        stroke: "#dfe1e6",
+        stroke: "var(--devui-dividing-line, #dfe1e6)",
         strokeDasharray: `${len}px ${len}px`,
         strokeDashoffset: `0`,
         transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
       };
       data.strokePath = {
         stroke: barBgColor || null,
-        strokeDasharray: `${percentage.value / 100 * len}px ${len}px`,
+        strokeDasharray: `${normalPercentage.value / 100 * len}px ${len}px`,
         strokeDashoffset: `0`,
         transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
       };
     };
     setCircleProgress();
-    watch([height, percentage, percentageText, barBgColor, isCircle, strokeWidth, showContent], () => {
+    watch([height, normalPercentage, percentageText, percentageTextPlacement, percentageTextColor, barBgColor, isCircle, strokeWidth, showContent], () => {
       setCircleProgress();
     });
     return {
-      data
+      data,
+      normalPercentage
     };
   },
   render() {
     var _a;
     const {
       height,
-      percentage,
+      normalPercentage,
       percentageText,
+      percentageTextPlacement,
+      percentageTextColor,
       barBgColor,
       isCircle,
       strokeWidth,
@@ -92,62 +139,69 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
+    const ns = useNamespace("progress");
+    const isOutside = percentageTextPlacement === "outside";
+    const isInsideBg = percentageTextPlacement === "insideBg";
+    const createPercentageText = () => {
+      return createVNode("span", {
+        "style": {
+          lineHeight: height,
+          color: percentageTextColor
+        }
+      }, [percentageText]);
+    };
     const progressLine = createVNode("div", {
-      "class": "devui-progress--line",
+      "class": ns.e("content")
+    }, [createVNode("div", {
+      "class": ns.e("line"),
       "style": {
         height,
         borderRadius: height
       }
     }, [createVNode("div", {
-      "class": "devui-progress-bar",
+      "class": [ns.e("bar"), percentageTextPlacement],
       "style": {
         height,
         borderRadius: height,
-        width: `${percentage}%`,
+        width: `${normalPercentage}%`,
         backgroundColor: barBgColor
       }
-    }, null), createVNode("span", {
+    }, [!isOutside && !isInsideBg ? createPercentageText() : null]), isInsideBg ? createPercentageText() : null]), isOutside && !!percentageText ? createPercentageText() : null]);
+    const textElement = createVNode("span", {
+      "class": ns.e("circle-text"),
       "style": {
-        lineHeight: height
+        color: percentageTextColor
       }
-    }, [percentageText])]);
-    const textElement = createVNode("span", {
-      "class": "devui-progress-circle-text"
-    }, [percentage, createTextVNode("%")]);
+    }, [normalPercentage, createTextVNode("%")]);
     const progressCircle = createVNode("div", {
-      "class": "devui-progress-circle"
+      "class": ns.e("circle")
     }, [createVNode("svg", {
-      "class": "devui-progress-circle",
+      "class": ns.e("circle"),
       "viewBox": "0 0 100 100"
     }, [createVNode("path", {
-      "class": "devui-progress-circle-trail",
       "fill-opacity": "0",
       "stroke-width": strokeWidth,
       "style": data.trailPath,
       "d": data.pathString
     }, null), createVNode("path", {
-      "class": "devui-progress-circle-path",
       "d": data.pathString,
       "stroke-linecap": "round",
       "fill-opacity": "0",
       "stroke": barBgColor,
-      "stroke-width": percentage ? strokeWidth : 0,
+      "stroke-width": normalPercentage ? strokeWidth : 0,
       "style": data.strokePath
     }, null)]), showContent && ((_a = $slots.default) == null ? void 0 : _a.call($slots)), showContent && !$slots.default && textElement]);
     return createVNode("div", {
-      "class": "devui-progress"
+      "class": ns.b()
     }, [!isCircle ? progressLine : progressCircle]);
   }
 });
-Progress.install = function(app) {
-  app.component(Progress.name, Progress);
-};
 var index = {
   title: "Progress \u8FDB\u5EA6\u6761",
   category: "\u6570\u636E\u5C55\u793A",
   status: "100%",
   install(app) {
-    app.use(Progress);
+    app.component(Progress.name, Progress);
   }
 };
-export { Progress, index as default };
+export { Progress, index as default, progressProps };

package/progress/index.umd.js

@@ -1,3 +1,3 @@
-(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";var P="",i=e.defineComponent({name:"DProgress",props:{height:{type:String,default:"20px"},percentage:{type:Number,default:0},percentageText:{type:String,default:""},barBgColor:{type:String,default:"#5170ff"},isCircle:{type:Boolean,default:!1},strokeWidth:{type:Number,default:6},showContent:{type:Boolean,default:!0}},setup(t){const{height:n,percentage:p,percentageText:u,barBgColor:h,isCircle:l,strokeWidth:d,showContent:a}=e.toRefs(t),r=e.reactive({pathString:"",trailPath:null,strokePath:null}),g=()=>{if(!l)return;const o=50-d.value/2,k=-o,c=o*-2;r.pathString=`M 50,50 m 0,${k}
-      a ${o},${o} 0 1 1 0,${-c}
-      a ${o},${o} 0 1 1 0,${c}`;const f=Math.PI*2*o;r.trailPath={stroke:"#dfe1e6",strokeDasharray:`${f}px ${f}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},r.strokePath={stroke:h||null,strokeDasharray:`${p.value/100*f}px ${f}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}};return g(),e.watch([n,p,u,h,l,d,a],()=>{g()}),{data:r}},render(){var c;const{height:t,percentage:n,percentageText:p,barBgColor:u,isCircle:h,strokeWidth:l,showContent:d,data:a,$slots:r}=this,g=e.createVNode("div",{class:"devui-progress--line",style:{height:t,borderRadius:t}},[e.createVNode("div",{class:"devui-progress-bar",style:{height:t,borderRadius:t,width:`${n}%`,backgroundColor:u}},null),e.createVNode("span",{style:{lineHeight:t}},[p])]),o=e.createVNode("span",{class:"devui-progress-circle-text"},[n,e.createTextVNode("%")]),k=e.createVNode("div",{class:"devui-progress-circle"},[e.createVNode("svg",{class:"devui-progress-circle",viewBox:"0 0 100 100"},[e.createVNode("path",{class:"devui-progress-circle-trail","fill-opacity":"0","stroke-width":l,style:a.trailPath,d:a.pathString},null),e.createVNode("path",{class:"devui-progress-circle-path",d:a.pathString,"stroke-linecap":"round","fill-opacity":"0",stroke:u,"stroke-width":n?l:0,style:a.strokePath},null)]),d&&((c=r.default)==null?void 0:c.call(r)),d&&!r.default&&o]);return e.createVNode("div",{class:"devui-progress"},[h?k:g])}});i.install=function(t){t.component(i.name,i)};var y={title:"Progress \u8FDB\u5EA6\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.use(i)}};s.Progress=i,s.default=y,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.index={},i.Vue))})(this,function(i,e){"use strict";function $(t,o=0,r=100){let s=0;return s=Math.min(t,r),s=Math.max(s,o),s}const C={height:{type:String,default:"20px"},percentage:{type:Number,default:0},percentageText:{type:String,default:""},barBgColor:{type:String,default:"#5170ff"},isCircle:{type:Boolean,default:!1},strokeWidth:{type:Number,default:6},showContent:{type:Boolean,default:!0},percentageTextPlacement:{type:String,default:"inside"},percentageTextColor:{type:String,default:""}};function P(t,o,r){let s=t;return o&&(s+=`__${o}`),r&&(s+=`--${r}`),s}function b(t,o=!1){const r=o?`.devui-${t}`:`devui-${t}`;return{b:()=>P(r),e:a=>a?P(r,a):"",m:a=>a?P(r,"",a):"",em:(a,d)=>a&&d?P(r,a,d):""}}var S="",x=e.defineComponent({name:"DProgress",props:C,setup(t){const{height:o,percentage:r,percentageText:s,percentageTextPlacement:g,percentageTextColor:h,barBgColor:f,isCircle:a,strokeWidth:d,showContent:u}=e.toRefs(t),l=e.ref(0);e.effect(()=>{l.value=$(r.value)});const n=e.reactive({pathString:"",trailPath:null,strokePath:null}),y=()=>{if(!a)return;const c=50-d.value/2,k=-c,m=c*-2;n.pathString=`M 50,50 m 0,${k}
+      a ${c},${c} 0 1 1 0,${-m}
+      a ${c},${c} 0 1 1 0,${m}`;const p=Math.PI*2*c;n.trailPath={stroke:"var(--devui-dividing-line, #dfe1e6)",strokeDasharray:`${p}px ${p}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},n.strokePath={stroke:f||null,strokeDasharray:`${l.value/100*p}px ${p}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}};return y(),e.watch([o,l,s,g,h,f,a,d,u],()=>{y()}),{data:n,normalPercentage:l}},render(){var N;const{height:t,normalPercentage:o,percentageText:r,percentageTextPlacement:s,percentageTextColor:g,barBgColor:h,isCircle:f,strokeWidth:a,showContent:d,data:u,$slots:l}=this,n=b("progress"),y=s==="outside",c=s==="insideBg",k=()=>e.createVNode("span",{style:{lineHeight:t,color:g}},[r]),m=e.createVNode("div",{class:n.e("content")},[e.createVNode("div",{class:n.e("line"),style:{height:t,borderRadius:t}},[e.createVNode("div",{class:[n.e("bar"),s],style:{height:t,borderRadius:t,width:`${o}%`,backgroundColor:h}},[!y&&!c?k():null]),c?k():null]),y&&!!r?k():null]),p=e.createVNode("span",{class:n.e("circle-text"),style:{color:g}},[o,e.createTextVNode("%")]),V=e.createVNode("div",{class:n.e("circle")},[e.createVNode("svg",{class:n.e("circle"),viewBox:"0 0 100 100"},[e.createVNode("path",{"fill-opacity":"0","stroke-width":a,style:u.trailPath,d:u.pathString},null),e.createVNode("path",{d:u.pathString,"stroke-linecap":"round","fill-opacity":"0",stroke:h,"stroke-width":o?a:0,style:u.strokePath},null)]),d&&((N=l.default)==null?void 0:N.call(l)),d&&!l.default&&p]);return e.createVNode("div",{class:n.b()},[f?V:m])}}),T={title:"Progress \u8FDB\u5EA6\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.component(x.name,x)}};i.Progress=x,i.default=T,i.progressProps=C,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/progress/style.css

@@ -1 +1 @@
-.devui-progress--line{position:relative;background:#dfe1e6}.devui-progress--line .devui-progress-bar{width:0;height:100%;transition:width .6s ease;background-color:#5e7ce0}.devui-progress--line>span{display:block;white-space:nowrap;color:#fff;text-align:center;position:absolute;left:0;top:0;height:100%;width:100%;font-size:12px;line-height:1.5}.devui-progress-circle{position:relative}.devui-progress-circle .devui-progress-circle-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:#252b3a;line-height:1;white-space:normal;text-align:center;transform:translate(-50%,-50%)}
+.devui-progress__content{display:flex;flex-wrap:nowrap}.devui-progress__content .devui-progress__line{width:100%;position:relative;background:var(--devui-dividing-line, #f2f2f3)}.devui-progress__content .devui-progress__line .devui-progress__bar{width:0;height:100%;transition:width .6s ease;background-color:#5e7ce0}.devui-progress__content .devui-progress__line .devui-progress__bar>span{display:block;white-space:nowrap;color:var(--devui-light-text, #ffffff);font-size:12px;line-height:1.5;padding:0 10px}.devui-progress__content .devui-progress__line>span{display:block;white-space:nowrap;color:var(--devui-light-text, #ffffff);text-align:center;position:absolute;left:0;top:0;height:100%;width:100%;font-size:12px;line-height:1.5}.devui-progress__content .devui-progress__line .inside{text-align:center}.devui-progress__content .devui-progress__line .insideLeft{text-align:left}.devui-progress__content .devui-progress__line .insideRight{text-align:right}.devui-progress__content>span{min-width:46px;padding:0 5px;text-align:center}.devui-progress__circle{position:relative}.devui-progress__circle .devui-progress__circle-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:var(--devui-text, #252b3a);line-height:1;white-space:normal;text-align:center;transform:translate(-50%,-50%)}