vue-devui 1.0.0-rc.7 → 1.0.0

package/progress/index.es.js

@@ -43,6 +43,29 @@ const progressProps = {
     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",
@@ -116,6 +139,7 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
+    const ns = useNamespace("progress");
     const isOutside = percentageTextPlacement === "outside";
     const isInsideBg = percentageTextPlacement === "insideBg";
     const createPercentageText = () => {
@@ -127,15 +151,15 @@ var Progress = defineComponent({
       }, [percentageText]);
     };
     const progressLine = createVNode("div", {
-      "class": "devui-progress-content"
+      "class": ns.e("content")
     }, [createVNode("div", {
-      "class": "devui-progress--line",
+      "class": ns.e("line"),
       "style": {
         height,
         borderRadius: height
       }
     }, [createVNode("div", {
-      "class": ["devui-progress-bar", percentageTextPlacement],
+      "class": [ns.e("bar"), percentageTextPlacement],
       "style": {
         height,
         borderRadius: height,
@@ -144,24 +168,22 @@ var Progress = defineComponent({
       }
     }, [!isOutside && !isInsideBg ? createPercentageText() : null]), isInsideBg ? createPercentageText() : null]), isOutside && !!percentageText ? createPercentageText() : null]);
     const textElement = createVNode("span", {
-      "class": "devui-progress-circle-text",
+      "class": ns.e("circle-text"),
       "style": {
         color: percentageTextColor
       }
     }, [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",
@@ -170,7 +192,7 @@ var Progress = defineComponent({
       "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]);
   }
 });

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";function v(t,n=0,l=100){let o=0;return o=Math.min(t,l),o=Math.max(o,n),o}const x={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:""}};var T="",P=e.defineComponent({name:"DProgress",props:x,setup(t){const{height:n,percentage:l,percentageText:o,percentageTextPlacement:h,percentageTextColor:f,barBgColor:y,isCircle:p,strokeWidth:g,showContent:d}=e.toRefs(t),a=e.ref(0);e.effect(()=>{a.value=v(l.value)});const i=e.reactive({pathString:"",trailPath:null,strokePath:null}),u=()=>{if(!p)return;const r=50-g.value/2,m=-r,k=r*-2;i.pathString=`M 50,50 m 0,${m}
-      a ${r},${r} 0 1 1 0,${-k}
-      a ${r},${r} 0 1 1 0,${k}`;const c=Math.PI*2*r;i.trailPath={stroke:"var(--devui-dividing-line, #dfe1e6)",strokeDasharray:`${c}px ${c}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},i.strokePath={stroke:y||null,strokeDasharray:`${a.value/100*c}px ${c}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}};return u(),e.watch([n,a,o,h,f,y,p,g,d],()=>{u()}),{data:i,normalPercentage:a}},render(){var C;const{height:t,normalPercentage:n,percentageText:l,percentageTextPlacement:o,percentageTextColor:h,barBgColor:f,isCircle:y,strokeWidth:p,showContent:g,data:d,$slots:a}=this,i=o==="outside",u=o==="insideBg",r=()=>e.createVNode("span",{style:{lineHeight:t,color:h}},[l]),m=e.createVNode("div",{class:"devui-progress-content"},[e.createVNode("div",{class:"devui-progress--line",style:{height:t,borderRadius:t}},[e.createVNode("div",{class:["devui-progress-bar",o],style:{height:t,borderRadius:t,width:`${n}%`,backgroundColor:f}},[!i&&!u?r():null]),u?r():null]),i&&!!l?r():null]),k=e.createVNode("span",{class:"devui-progress-circle-text",style:{color:h}},[n,e.createTextVNode("%")]),c=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":p,style:d.trailPath,d:d.pathString},null),e.createVNode("path",{class:"devui-progress-circle-path",d:d.pathString,"stroke-linecap":"round","fill-opacity":"0",stroke:f,"stroke-width":n?p:0,style:d.strokePath},null)]),g&&((C=a.default)==null?void 0:C.call(a)),g&&!a.default&&k]);return e.createVNode("div",{class:"devui-progress"},[y?c:m])}}),N={title:"Progress \u8FDB\u5EA6\u6761",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.component(P.name,P)}};s.Progress=P,s.default=N,s.progressProps=x,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-content{display:flex;flex-wrap:nowrap}.devui-progress-content .devui-progress--line{width:100%;position:relative;background:var(--devui-dividing-line, #dfe1e6)}.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%)}
+.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%)}