vue-devui 1.0.0-rc.5 → 1.0.0-rc.8

package/progress/index.es.js

@@ -1,4 +1,10 @@
-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,
@@ -27,8 +33,39 @@ const progressProps = {
   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) {
+  const namespace = `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",
@@ -38,11 +75,17 @@ var Progress = defineComponent({
       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,
@@ -67,25 +110,28 @@ var Progress = defineComponent({
       };
       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,
@@ -93,50 +139,60 @@ 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]);
   }
 });

package/progress/index.umd.js

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

package/progress/style.css

@@ -1 +1 @@
-.devui-progress--line{position:relative;background:var(--devui-dividing-line, #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: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-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, #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%)}

package/radio/index.es.js

@@ -54,6 +54,29 @@ const radioGroupProps = __spreadProps(__spreadValues({}, radioCommonProps), {
   }
 });
 const radioGroupInjectionKey = Symbol("DRadioGroup");
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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 radio = "";
 var Radio = defineComponent({
   name: "DRadio",
@@ -116,7 +139,8 @@ var Radio = defineComponent({
       $slots,
       handleChange
     } = this;
-    const labelCls = ["devui-radio", {
+    const ns = useNamespace("radio");
+    const labelCls = [ns.b(), {
       active: isChecked,
       disabled
     }];
@@ -125,13 +149,13 @@ var Radio = defineComponent({
     }, [createVNode("input", {
       "type": "radio",
       "name": radioName,
-      "class": "devui-radio-input",
+      "class": ns.e("input"),
       "disabled": disabled,
       "onChange": handleChange,
       "value": value,
       "checked": isChecked
     }, null), createVNode("span", {
-      "class": "devui-radio-material"
+      "class": ns.e("material")
     }, [createVNode("svg", {
       "height": "100%",
       "width": "100%",
@@ -139,7 +163,7 @@ var Radio = defineComponent({
       "xmlns": "http://www.w3.org/2000/svg"
     }, [createVNode("circle", {
       "class": {
-        "devui-radio-material-outer": true,
+        [ns.e("material-outer")]: true,
         disabled
       },
       "cx": "512",
@@ -148,7 +172,7 @@ var Radio = defineComponent({
       "stroke-width": "51"
     }, null), createVNode("circle", {
       "class": {
-        "devui-radio-material-inner": true,
+        [ns.e("material-inner")]: true,
         disabled
       },
       "cx": "512",
@@ -156,7 +180,7 @@ var Radio = defineComponent({
       "cy": "512",
       "r": "320"
     }, null)])]), createVNode("span", {
-      "class": "devui-radio-label"
+      "class": ns.e("label")
     }, [(_a = $slots.default) == null ? void 0 : _a.call($slots)])]);
   }
 });
@@ -188,6 +212,7 @@ var RadioGroup = defineComponent({
       values,
       direction
     } = this;
+    const ns = useNamespace("radio-group");
     const getContent = () => {
       const defaultSlot = this.$slots.default;
       if (defaultSlot) {
@@ -206,7 +231,7 @@ var RadioGroup = defineComponent({
       }
     };
     return createVNode("div", {
-      "class": ["devui-radio-group", {
+      "class": [ns.b(), {
         "is-row": direction === "row",
         "is-column": direction === "column"
       }]

package/radio/index.umd.js

@@ -1 +1 @@
-var S=Object.defineProperty,j=Object.defineProperties;var P=Object.getOwnPropertyDescriptors;var C=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var v=(t,e,o)=>e in t?S(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,p=(t,e)=>{for(var o in e||(e={}))k.call(e,o)&&v(t,o,e[o]);if(C)for(var o of C(e))x.call(e,o)&&v(t,o,e[o]);return t},b=(t,e)=>j(t,P(e));(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,e){"use strict";const o={modelValue:{type:String,default:null},name:{type:String,default:null},beforeChange:{type:Function,default:null},disabled:{type:Boolean,default:!1}},V=b(p({},o),{value:{type:String,required:!0,default:null}}),N=b(p({},o),{values:{type:Array,default:null},direction:{type:String,default:"column"}}),y=Symbol("DRadioGroup");var D="",c=e.defineComponent({name:"DRadio",props:V,emits:["change","update:modelValue"],setup(a,{emit:d}){const n=e.inject(y,null),r=e.computed(()=>a.disabled||(n==null?void 0:n.disabled.value)),l=e.computed(()=>{const i=n?n.modelValue.value:a.modelValue;return a.value===i}),h=e.computed(()=>n?n.name.value:a.name||void 0),g=i=>{const u=a.beforeChange||(n?n.beforeChange:null);let s=Promise.resolve(!0);if(u){const f=u(i);if(typeof f=="undefined")return s;typeof f=="boolean"?s=Promise.resolve(f):s=f}return s};return{isChecked:l,radioName:h,disabled:r,handleChange:async i=>{const u=a.value;if(!await g(u)){i.preventDefault();return}n==null||n.emitChange(u),d("update:modelValue",u),d("change",u)}}},render(){var i;const{disabled:a,radioName:d,value:n,isChecked:r,$slots:l,handleChange:h}=this,g=["devui-radio",{active:r,disabled:a}];return e.createVNode("label",{class:g},[e.createVNode("input",{type:"radio",name:d,class:"devui-radio-input",disabled:a,onChange:h,value:n,checked:r},null),e.createVNode("span",{class:"devui-radio-material"},[e.createVNode("svg",{height:"100%",width:"100%",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("circle",{class:{"devui-radio-material-outer":!0,disabled:a},cx:"512",cy:"512",r:"486.5","stroke-width":"51"},null),e.createVNode("circle",{class:{"devui-radio-material-inner":!0,disabled:a},cx:"512","fill-rule":"nonzero",cy:"512",r:"320"},null)])]),e.createVNode("span",{class:"devui-radio-label"},[(i=l.default)==null?void 0:i.call(l)])])}}),_="";function R(a){return typeof a=="function"||Object.prototype.toString.call(a)==="[object Object]"&&!e.isVNode(a)}var m=e.defineComponent({name:"DRadioGroup",props:N,emits:["change","update:modelValue"],setup(a,{emit:d}){const n=r=>{d("update:modelValue",r),d("change",r)};e.provide(y,{modelValue:e.toRef(a,"modelValue"),name:e.toRef(a,"name"),disabled:e.toRef(a,"disabled"),beforeChange:a.beforeChange,emitChange:n})},render(){const{values:a,direction:d}=this,n=()=>{const r=this.$slots.default;return r?r():Array.isArray(a)?a.map(l=>e.createVNode(c,{key:l,value:l},R(l)?l:{default:()=>[l]})):""};return e.createVNode("div",{class:["devui-radio-group",{"is-row":d==="row","is-column":d==="column"}]},[n()])}}),w={title:"Radio \u5355\u9009\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(a){a.component(c.name,c),a.component(m.name,m)}};t.Radio=c,t.RadioGroup=m,t.default=w,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+var _=Object.defineProperty,P=Object.defineProperties;var k=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var N=(a,e,d)=>e in a?_(a,e,{enumerable:!0,configurable:!0,writable:!0,value:d}):a[e]=d,b=(a,e)=>{for(var d in e||(e={}))x.call(e,d)&&N(a,d,e[d]);if(v)for(var d of v(e))D.call(e,d)&&N(a,d,e[d]);return a},y=(a,e)=>P(a,k(e));(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 d={modelValue:{type:String,default:null},name:{type:String,default:null},beforeChange:{type:Function,default:null},disabled:{type:Boolean,default:!1}},R=y(b({},d),{value:{type:String,required:!0,default:null}}),w=y(b({},d),{values:{type:Array,default:null},direction:{type:String,default:"column"}}),C=Symbol("DRadioGroup");function m(n,o,t){let r=n;return o&&(r+=`__${o}`),t&&(r+=`--${t}`),r}function V(n){const o=`devui-${n}`;return{b:()=>m(o),e:l=>l?m(o,l):"",m:l=>l?m(o,"",l):"",em:(l,i)=>l&&i?m(o,l,i):""}}var G="",h=e.defineComponent({name:"DRadio",props:R,emits:["change","update:modelValue"],setup(n,{emit:o}){const t=e.inject(C,null),r=e.computed(()=>n.disabled||(t==null?void 0:t.disabled.value)),c=e.computed(()=>{const i=t?t.modelValue.value:n.modelValue;return n.value===i}),u=e.computed(()=>t?t.name.value:n.name||void 0),l=i=>{const s=n.beforeChange||(t?t.beforeChange:null);let f=Promise.resolve(!0);if(s){const g=s(i);if(typeof g=="undefined")return f;typeof g=="boolean"?f=Promise.resolve(g):f=g}return f};return{isChecked:c,radioName:u,disabled:r,handleChange:async i=>{const s=n.value;if(!await l(s)){i.preventDefault();return}t==null||t.emitChange(s),o("update:modelValue",s),o("change",s)}}},render(){var s;const{disabled:n,radioName:o,value:t,isChecked:r,$slots:c,handleChange:u}=this,l=V("radio"),i=[l.b(),{active:r,disabled:n}];return e.createVNode("label",{class:i},[e.createVNode("input",{type:"radio",name:o,class:l.e("input"),disabled:n,onChange:u,value:t,checked:r},null),e.createVNode("span",{class:l.e("material")},[e.createVNode("svg",{height:"100%",width:"100%",viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("circle",{class:{[l.e("material-outer")]:!0,disabled:n},cx:"512",cy:"512",r:"486.5","stroke-width":"51"},null),e.createVNode("circle",{class:{[l.e("material-inner")]:!0,disabled:n},cx:"512","fill-rule":"nonzero",cy:"512",r:"320"},null)])]),e.createVNode("span",{class:l.e("label")},[(s=c.default)==null?void 0:s.call(c)])])}}),A="";function S(n){return typeof n=="function"||Object.prototype.toString.call(n)==="[object Object]"&&!e.isVNode(n)}var p=e.defineComponent({name:"DRadioGroup",props:w,emits:["change","update:modelValue"],setup(n,{emit:o}){const t=r=>{o("update:modelValue",r),o("change",r)};e.provide(C,{modelValue:e.toRef(n,"modelValue"),name:e.toRef(n,"name"),disabled:e.toRef(n,"disabled"),beforeChange:n.beforeChange,emitChange:t})},render(){const{values:n,direction:o}=this,t=V("radio-group"),r=()=>{const c=this.$slots.default;return c?c():Array.isArray(n)?n.map(u=>e.createVNode(h,{key:u,value:u},S(u)?u:{default:()=>[u]})):""};return e.createVNode("div",{class:[t.b(),{"is-row":o==="row","is-column":o==="column"}]},[r()])}}),j={title:"Radio \u5355\u9009\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(n){n.component(h.name,h),n.component(p.name,p)}};a.Radio=h,a.RadioGroup=p,a.default=j,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/radio/style.css

@@ -1 +1 @@
-@charset "UTF-8";.devui-radio{display:flex;justify-content:flex-start;align-items:center;font-size:var(--devui-font-size, 12px);line-height:1.5;font-weight:400;cursor:pointer;color:var(--devui-text, #252b3a)}.devui-radio:hover .devui-radio-label{color:var(--devui-primary-hover, #7693f5)}.devui-radio:active .devui-radio-material-outer,.devui-radio:focus .devui-radio-material-outer,.devui-radio:hover .devui-radio-material-outer{stroke:var(--devui-form-control-line-active-hover, #344899)}.devui-radio:active .devui-radio-material-inner,.devui-radio:focus .devui-radio-material-inner,.devui-radio:hover .devui-radio-material-inner{fill:var(--devui-icon-fill-active-hover, #526ecc)}.devui-radio.active .devui-radio-material-outer{opacity:1;stroke:var(--devui-form-control-line-active-hover, #344899);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active .devui-radio-material-outer.disabled{stroke:var(--devui-icon-fill-active-disabled, #beccfa);fill:transparent}.devui-radio.active .devui-radio-material-inner{opacity:1;transform:scale(1);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active .devui-radio-material-inner.disabled{fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.disabled{cursor:not-allowed}.devui-radio.disabled .devui-radio-material-outer{stroke:var(--devui-disabled-line, #dfe1e6);fill:var(--devui-disabled-bg, #f5f5f6)}.devui-radio.disabled .devui-radio-material-inner{fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.disabled .devui-radio-label{color:var(--devui-disabled-text, #adb0b8)}.devui-radio-material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;line-height:16px;user-select:none}.devui-radio-material-outer{opacity:1;transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);stroke:var(--devui-line, #adb0b8);fill:transparent}.devui-radio-material-inner{opacity:0;transform:scale(0);transform-origin:50% 50%;transition:transform .2s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06);fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-radio-label{color:var(--devui-text, #252b3a);margin-left:8px;font-size:var(--devui-font-size, 12px);transition:color .3s cubic-bezier(.645,.045,.355,1)}.devui-radio-input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}.devui-radio-group{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.devui-radio-group.is-row{flex-direction:row}.devui-radio-group.is-column{flex-direction:column}.devui-radio-group .devui-radio{line-height:28px}.devui-radio-group .devui-radio:not(:last-child){padding-right:20px}
+@charset "UTF-8";.devui-radio{display:flex;justify-content:flex-start;align-items:center;font-size:var(--devui-font-size, 12px);line-height:1.5;font-weight:400;cursor:pointer;color:var(--devui-text, #252b3a)}.devui-radio:hover .devui-radio__label{color:var(--devui-primary-hover, #7693f5)}.devui-radio:active .devui-radio__material-outer,.devui-radio:focus .devui-radio__material-outer,.devui-radio:hover .devui-radio__material-outer{stroke:var(--devui-form-control-line-active-hover, #344899)}.devui-radio:active .devui-radio__material-inner,.devui-radio:focus .devui-radio__material-inner,.devui-radio:hover .devui-radio__material-inner{fill:var(--devui-icon-fill-active-hover, #526ecc)}.devui-radio.active .devui-radio__material-outer{opacity:1;stroke:var(--devui-form-control-line-active-hover, #344899);transition:stroke 50ms var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active .devui-radio__material-outer.disabled{stroke:var(--devui-icon-fill-active-disabled, #beccfa);fill:transparent}.devui-radio.active .devui-radio__material-inner{opacity:1;transform:scale(1);transition:transform var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95)),opacity var(--devui-animation-duration-base, .2s) var(--devui-animation-ease-in-out, cubic-bezier(.5, .05, .5, .95))}.devui-radio.active .devui-radio__material-inner.disabled{fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.disabled{cursor:not-allowed}.devui-radio.disabled .devui-radio__material-outer{stroke:var(--devui-disabled-line, #dfe1e6);fill:var(--devui-disabled-bg, #f5f5f6)}.devui-radio.disabled .devui-radio__material-inner{fill:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-radio.disabled .devui-radio__label{color:var(--devui-disabled-text, #adb0b8)}.devui-radio__material{vertical-align:middle;position:relative;display:inline-block;overflow:hidden;height:16px;width:16px;line-height:16px;user-select:none}.devui-radio__material-outer{opacity:1;transition:stroke 50ms cubic-bezier(.755,.05,.855,.06);stroke:var(--devui-line, #adb0b8);fill:transparent}.devui-radio__material-inner{opacity:0;transform:scale(0);transform-origin:50% 50%;transition:transform .2s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06);fill:var(--devui-icon-fill-active, #5e7ce0)}.devui-radio__label{color:var(--devui-text, #252b3a);margin-left:8px;font-size:var(--devui-font-size, 12px);transition:color .3s cubic-bezier(.645,.045,.355,1)}.devui-radio__input{opacity:0;z-index:-1;width:0;height:0;display:none;overflow:hidden;pointer-events:none}.devui-radio-group{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.devui-radio-group.is-row{flex-direction:row}.devui-radio-group.is-column{flex-direction:column}.devui-radio-group .devui-radio{line-height:28px}.devui-radio-group .devui-radio:not(:last-child){padding-right:20px}

package/rate/index.es.js

@@ -41,6 +41,29 @@ const rateProps = {
     default: void 0
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `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 rate = "";
 var Rate = defineComponent({
   name: "DRate",
@@ -127,22 +150,24 @@ var Rate = defineComponent({
       selectValue,
       onMouseleave
     } = this;
+    const ns = useNamespace("rate");
     return createVNode("div", {
-      "class": "devui-star-container",
-      "onMouseleave": onMouseleave
+      "class": ns.b(),
+      "onMouseleave": onMouseleave,
+      "style": `--star-color: ${color}`
     }, [totalLevelArray.map((item, index2) => createVNode("div", {
-      "class": `devui-star-align devui-pointer ${read ? "devui-only-read" : ""}`,
+      "class": [ns.m("align"), ns.m("pointer"), read ? ns.m("only-read") : ""],
       "key": index2,
       "onMouseover": (e) => hoverToggle(e, index2),
       "onClick": (e) => selectValue(e, index2)
     }, [icon && !character && createVNode("span", {
-      "class": "devui-star-color"
+      "class": ns.e("color")
     }, [createVNode(resolveComponent("d-icon"), {
       "name": icon
     }, null)]), character && !icon && createVNode("span", {
-      "class": "devui-star-color"
+      "class": ns.e("color")
     }, [character]), !icon && !character && createVNode("span", {
-      "class": "devui-star-color"
+      "class": ns.e("color")
     }, [createVNode("svg", {
       "width": "16px",
       "height": "16px",
@@ -161,7 +186,7 @@ var Rate = defineComponent({
     }, [createVNode("polygon", {
       "points": "8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835                       1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977                       12.1847656 9.71994835 12.3262379 14.3147912"
     }, null)])])])]), icon && !character && createVNode("span", {
-      "class": `devui-star-color-active devui-active-star devui-star-color-${type}`,
+      "class": [ns.e("color-active"), ns.e("active-star"), ns.em("color", type)],
       "style": {
         width: item.width
       }
@@ -169,15 +194,14 @@ var Rate = defineComponent({
       "name": icon,
       "color": color
     }, null)]), character && !icon && createVNode("span", {
-      "class": `devui-star-color-active devui-active-star devui-star-color-${type}`,
+      "class": [ns.e("color-active"), ns.e("active-star"), ns.em("color", type)],
       "style": {
         color,
         width: item.width
       }
     }, [character]), !character && !icon && createVNode("span", {
-      "class": `devui-star-color-active devui-active-star devui-star-color-${type}`,
+      "class": [ns.e("color-active"), ns.e("active-star"), !color ? ns.em("color", type) : ns.em("color", "customize")],
       "style": {
-        color,
         width: item.width
       }
     }, [createVNode("svg", {

package/rate/index.umd.js

@@ -1 +1 @@
-(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,e){"use strict";const g={modelValue:{type:Number,default:0},read:{type:Boolean,default:!1},count:{type:Number,default:5},type:{type:String,default:""},color:{type:String,default:""},icon:{type:String,default:""},character:{type:String,default:""},allowHalf:{type:Boolean,default:!1},onChange:{type:Function,default:void 0},onTouched:{type:Function,default:void 0}};var p="",f=e.defineComponent({name:"DRate",props:g,emits:["change","update:modelValue"],setup(a,i){const n=e.reactive([]),c=e.ref(0),l=(o,t,h)=>{for(let v=o;v<t;v++)n[v].width=h},s=()=>{c.value=a.modelValue;const o=c.value%1,t=Math.floor(c.value);l(0,t,"100%"),o>0?(n[t].width=o*100+"%",l(t+1,a.count,"0")):l(t,a.count,"0")};e.onMounted(()=>{for(let o=0;o<a.count;o++)n.push({width:"0"});s()});const d=o=>{const t=o.target;return a.allowHalf&&o.offsetX*2<=t.clientWidth};return{totalLevelArray:n,chooseValue:c,hoverToggle:(o,t)=>{if(a.read)return;l(0,t+1,"100%");const h=d(o)?"50%":"100%";l(t,t+1,h),l(t+1,a.count,"0")},selectValue:(o,t)=>{a.read||(l(0,t,"100%"),d(o)?(l(t,t+1,"50%"),c.value=t-.5):(l(t,t+1,"100%"),c.value=t),l(t+1,a.count,"0"),a.onChange&&a.onChange(c.value+1),a.onTouched&&a.onTouched(),i.emit("update:modelValue",c.value+1))},onMouseleave:()=>{s()}}},render(){const{totalLevelArray:a,icon:i,character:n,read:c,type:l,color:s,hoverToggle:d,selectValue:w,onMouseleave:V}=this;return e.createVNode("div",{class:"devui-star-container",onMouseleave:V},[a.map((u,o)=>e.createVNode("div",{class:`devui-star-align devui-pointer ${c?"devui-only-read":""}`,key:o,onMouseover:t=>d(t,o),onClick:t=>w(t,o)},[i&&!n&&e.createVNode("span",{class:"devui-star-color"},[e.createVNode(e.resolveComponent("d-icon"),{name:i},null)]),n&&!i&&e.createVNode("span",{class:"devui-star-color"},[n]),!i&&!n&&e.createVNode("span",{class:"devui-star-color"},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns-xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#E3E5E9",id:"Mask"},[e.createVNode("polygon",{points:"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835                       1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977                       12.1847656 9.71994835 12.3262379 14.3147912"},null)])])])]),i&&!n&&e.createVNode("span",{class:`devui-star-color-active devui-active-star devui-star-color-${l}`,style:{width:u.width}},[e.createVNode(e.resolveComponent("d-icon"),{name:i,color:s},null)]),n&&!i&&e.createVNode("span",{class:`devui-star-color-active devui-active-star devui-star-color-${l}`,style:{color:s,width:u.width}},[n]),!n&&!i&&e.createVNode("span",{class:`devui-star-color-active devui-active-star devui-star-color-${l}`,style:{color:s,width:u.width}},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns-xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{id:"Mask"},[e.createVNode("polygon",{points:"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1                       6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977                       12.1847656 9.71994835 12.3262379 14.3147912"},null)])])])])]))])}}),y={title:"Rate \u8BC4\u5206",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(a){a.component(f.name,f)}};r.Rate=f,r.default=y,r.rateProps=g,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});
+(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 y={modelValue:{type:Number,default:0},read:{type:Boolean,default:!1},count:{type:Number,default:5},type:{type:String,default:""},color:{type:String,default:""},icon:{type:String,default:""},character:{type:String,default:""},allowHalf:{type:Boolean,default:!1},onChange:{type:Function,default:void 0},onTouched:{type:Function,default:void 0}};function g(o,a,c){let r=o;return a&&(r+=`__${a}`),c&&(r+=`--${c}`),r}function p(o){const a=`devui-${o}`;return{b:()=>g(a),e:i=>i?g(a,i):"",m:i=>i?g(a,"",i):"",em:(i,h)=>i&&h?g(a,i,h):""}}var N="",w=e.defineComponent({name:"DRate",props:y,emits:["change","update:modelValue"],setup(o,a){const c=e.reactive([]),r=e.ref(0),s=(n,t,f)=>{for(let m=n;m<t;m++)c[m].width=f},u=()=>{r.value=o.modelValue;const n=r.value%1,t=Math.floor(r.value);s(0,t,"100%"),n>0?(c[t].width=n*100+"%",s(t+1,o.count,"0")):s(t,o.count,"0")};e.onMounted(()=>{for(let n=0;n<o.count;n++)c.push({width:"0"});u()});const i=n=>{const t=n.target;return o.allowHalf&&n.offsetX*2<=t.clientWidth};return{totalLevelArray:c,chooseValue:r,hoverToggle:(n,t)=>{if(o.read)return;s(0,t+1,"100%");const f=i(n)?"50%":"100%";s(t,t+1,f),s(t+1,o.count,"0")},selectValue:(n,t)=>{o.read||(s(0,t,"100%"),i(n)?(s(t,t+1,"50%"),r.value=t-.5):(s(t,t+1,"100%"),r.value=t),s(t+1,o.count,"0"),o.onChange&&o.onChange(r.value+1),o.onTouched&&o.onTouched(),a.emit("update:modelValue",r.value+1))},onMouseleave:()=>{u()}}},render(){const{totalLevelArray:o,icon:a,character:c,read:r,type:s,color:u,hoverToggle:i,selectValue:h,onMouseleave:V}=this,l=p("rate");return e.createVNode("div",{class:l.b(),onMouseleave:V,style:`--star-color: ${u}`},[o.map((n,t)=>e.createVNode("div",{class:[l.m("align"),l.m("pointer"),r?l.m("only-read"):""],key:t,onMouseover:f=>i(f,t),onClick:f=>h(f,t)},[a&&!c&&e.createVNode("span",{class:l.e("color")},[e.createVNode(e.resolveComponent("d-icon"),{name:a},null)]),c&&!a&&e.createVNode("span",{class:l.e("color")},[c]),!a&&!c&&e.createVNode("span",{class:l.e("color")},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns-xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{fill:"#E3E5E9",id:"Mask"},[e.createVNode("polygon",{points:"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835                       1 6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977                       12.1847656 9.71994835 12.3262379 14.3147912"},null)])])])]),a&&!c&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),l.em("color",s)],style:{width:n.width}},[e.createVNode(e.resolveComponent("d-icon"),{name:a,color:u},null)]),c&&!a&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),l.em("color",s)],style:{color:u,width:n.width}},[c]),!c&&!a&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),u?l.em("color","customize"):l.em("color",s)],style:{width:n.width}},[e.createVNode("svg",{width:"16px",height:"16px",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns-xlink":"http://www.w3.org/1999/xlink"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",{id:"Mask"},[e.createVNode("polygon",{points:"8 12.7603585 3.67376208 14.3147912 3.81523437 9.71994835 1                       6.0857977 5.41367261 4.80046131 8 1 10.5863274 4.80046131 15 6.0857977                       12.1847656 9.71994835 12.3262379 14.3147912"},null)])])])])]))])}}),v={title:"Rate \u8BC4\u5206",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.component(w.name,w)}};d.Rate=w,d.default=v,d.rateProps=y,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/rate/style.css

@@ -1 +1 @@
-.devui-star-align{font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-pointer{cursor:pointer}.devui-star-container{display:inline-flex}.devui-star-color-active{color:#6a81ed;line-height:1.5}.devui-star-color-active svg g{fill:#6a81ed}.devui-star-color-success{color:#3dcca6}.devui-star-color-success svg g{fill:#3dcca6}.devui-star-color-warning{color:#fac20a}.devui-star-color-warning svg g{fill:#fac20a}.devui-star-color-error{color:#f66f6a}.devui-star-color-error svg g{fill:#f66f6a}.devui-active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-star-color{color:var(--devui-dividing-line, #dfe1e6);line-height:1.5}.devui-star-color .icon{color:var(--devui-dividing-line, #dfe1e6)!important}.devui-star-color svg g{fill:var(--devui-dividing-line, #dfe1e6)}.devui-only-read{cursor:not-allowed}
+.devui-rate--align{font-size:var(--devui-font-size-icon, 16px);margin-right:5px;position:relative;line-height:1}.devui-rate--pointer{cursor:pointer}.devui-rate{display:inline-flex}.devui-rate__color-active{color:#6a81ed;line-height:1.5}.devui-rate__color-active svg g{fill:#6a81ed}.devui-rate__color--success{color:#3dcca6}.devui-rate__color--success svg g{fill:#3dcca6}.devui-rate__color--warning{color:#fac20a}.devui-rate__color--warning svg g{fill:#fac20a}.devui-rate__color--error{color:#f66f6a}.devui-rate__color--error svg g{fill:#f66f6a}.devui-rate__color--customize{color:var(--star-color)}.devui-rate__color--customize svg g{fill:var(--star-color)}.devui-rate__active-star{position:absolute;top:0;left:0;overflow:hidden}.devui-rate__color{color:var(--devui-dividing-line, #dfe1e6);line-height:1.5}.devui-rate__color .icon{color:var(--devui-dividing-line, #dfe1e6)!important}.devui-rate__color svg g{fill:var(--devui-dividing-line, #dfe1e6)}.devui-rate--only-read{cursor:not-allowed}