vue-devui 1.0.0-rc.4 → 1.0.0-rc.7

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,6 +33,14 @@ const progressProps = {
   showContent: {
     type: Boolean,
     default: true
+  },
+  percentageTextPlacement: {
+    type: String,
+    default: "inside"
+  },
+  percentageTextColor: {
+    type: String,
+    default: ""
   }
 };
 var progress = "";
@@ -38,11 +52,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 +87,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,28 +116,39 @@ var Progress = defineComponent({
       data,
       $slots
     } = this;
+    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-content"
+    }, [createVNode("div", {
       "class": "devui-progress--line",
       "style": {
         height,
         borderRadius: height
       }
     }, [createVNode("div", {
-      "class": "devui-progress-bar",
+      "class": ["devui-progress-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": "devui-progress-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"
     }, [createVNode("svg", {
@@ -132,7 +166,7 @@ var Progress = defineComponent({
       "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", {

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(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"});

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/rate/index.es.js

@@ -1,7 +1,8 @@
 import { defineComponent, reactive, ref, onMounted, createVNode, resolveComponent } from "vue";
 const rateProps = {
   modelValue: {
-    type: Number
+    type: Number,
+    default: 0
   },
   read: {
     type: Boolean,
@@ -54,18 +55,15 @@ var Rate = defineComponent({
       }
     };
     const initRating = () => {
-      if (!props.modelValue) {
-        return;
-      }
-      chooseValue.value = props.modelValue - 1;
+      chooseValue.value = props.modelValue;
       const halfStar = chooseValue.value % 1;
       const intCurrentLevel = Math.floor(chooseValue.value);
-      setChange(0, intCurrentLevel + 1, "100%");
+      setChange(0, intCurrentLevel, "100%");
       if (halfStar > 0) {
-        totalLevelArray[intCurrentLevel + 1]["width"] = halfStar * 100 + "%";
-        setChange(intCurrentLevel + 2, props.count, "0");
-      } else {
+        totalLevelArray[intCurrentLevel]["width"] = halfStar * 100 + "%";
         setChange(intCurrentLevel + 1, props.count, "0");
+      } else {
+        setChange(intCurrentLevel, props.count, "0");
       }
     };
     onMounted(() => {
@@ -76,33 +74,28 @@ var Rate = defineComponent({
       }
       initRating();
     });
-    const hoverToggle = (e, index2, reset = false) => {
+    const isSemiSelected = (e) => {
+      const target = e.target;
+      return props.allowHalf && e.offsetX * 2 <= target.clientWidth;
+    };
+    const hoverToggle = (e, index2) => {
       if (props.read) {
         return;
       }
-      if (reset) {
-        if (chooseValue.value >= 0) {
-          setChange(0, chooseValue.value + 1, "100%");
-          setChange(chooseValue.value + 1, props.count, "0");
-        } else {
-          setChange(0, props.count, "0");
-        }
-      } else {
-        setChange(0, index2 + 1, "100%");
-        if (props.allowHalf && e.offsetX * 2 <= e.target.clientWidth) {
-          setChange(index2, index2 + 1, "50%");
-        } else {
-          setChange(index2, index2 + 1, "100%");
-        }
-        setChange(index2 + 1, props.count, "0");
-      }
+      setChange(0, index2 + 1, "100%");
+      const width = isSemiSelected(e) ? "50%" : "100%";
+      setChange(index2, index2 + 1, width);
+      setChange(index2 + 1, props.count, "0");
+    };
+    const onMouseleave = () => {
+      initRating();
     };
     const selectValue = (e, index2) => {
       if (props.read) {
         return;
       }
       setChange(0, index2, "100%");
-      if (props.allowHalf && e.offsetX * 2 <= e.target.clientWidth) {
+      if (isSemiSelected(e)) {
         setChange(index2, index2 + 1, "50%");
         chooseValue.value = index2 - 0.5;
       } else {
@@ -110,33 +103,34 @@ var Rate = defineComponent({
         chooseValue.value = index2;
       }
       setChange(index2 + 1, props.count, "0");
-      index2 = chooseValue.value;
-      props.onChange && props.onChange(index2 + 1);
+      props.onChange && props.onChange(chooseValue.value + 1);
       props.onTouched && props.onTouched();
-      ctx.emit("update:modelValue", index2 + 1);
+      ctx.emit("update:modelValue", chooseValue.value + 1);
     };
     return {
       totalLevelArray,
       chooseValue,
       hoverToggle,
-      selectValue
+      selectValue,
+      onMouseleave
     };
   },
   render() {
     const {
       totalLevelArray,
-      chooseValue,
       icon,
       character,
       read,
       type,
       color,
       hoverToggle,
-      selectValue
+      selectValue,
+      onMouseleave
     } = this;
     return createVNode("div", {
       "class": "devui-star-container",
-      "onMouseleave": (e) => hoverToggle(e, chooseValue, true)
+      "onMouseleave": onMouseleave,
+      "style": `--star-color: ${color}`
     }, [totalLevelArray.map((item, index2) => createVNode("div", {
       "class": `devui-star-align devui-pointer ${read ? "devui-only-read" : ""}`,
       "key": index2,
@@ -182,9 +176,8 @@ var Rate = defineComponent({
         width: item.width
       }
     }, [character]), !character && !icon && createVNode("span", {
-      "class": `devui-star-color-active devui-active-star devui-star-color-${type}`,
+      "class": ["devui-star-color-active", "devui-active-star", !color ? `devui-star-color-${type}` : "devui-star-color-customize"],
       "style": {
-        color,
         width: item.width
       }
     }, [createVNode("svg", {

package/rate/index.umd.js

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

package/search/index.es.js

@@ -51,6 +51,7 @@ const searchProps = {
 };
 const SIZE_CLASS = {
   lg: "lg",
+  md: "md",
   sm: "sm"
 };
 const ICON_POSITION = {
@@ -5580,13 +5581,8 @@ const inputProps = {
     default: void 0
   }
 };
+const FORM_ITEM_TOKEN = Symbol("dFormItem");
 var input = "";
-const formItemInjectionKey = Symbol("dFormItem");
-const dFormItemEvents = {
-  blur: "d.form.blur",
-  change: "d.form.change",
-  input: "d.form.input"
-};
 var DInput = defineComponent({
   name: "DInput",
   directives: {
@@ -5601,19 +5597,17 @@ var DInput = defineComponent({
   props: inputProps,
   emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx) {
-    const formItem = inject(formItemInjectionKey, {});
-    const hasFormItem = Object.keys(formItem).length > 0;
+    const formItemContext = inject(FORM_ITEM_TOKEN);
     const sizeCls = computed(() => `devui-input-${props.size}`);
     const showPwdIcon = ref(false);
     const inputType = ref("text");
-    const inputCls = computed(() => {
-      return {
-        error: props.error,
-        [props.cssClass]: true,
-        "devui-input-restore": showPwdIcon.value,
-        [sizeCls.value]: props.size !== ""
-      };
-    });
+    const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+    const inputCls = computed(() => ({
+      "devui-error": props.error || isValidateError.value,
+      [props.cssClass]: true,
+      "devui-input-restore": showPwdIcon.value,
+      [sizeCls.value]: props.size !== ""
+    }));
     const showPreviewIcon = computed(() => inputType.value === "password");
     watch(() => props.showPassword, (flg) => {
       inputType.value = flg ? "password" : "text";
@@ -5621,17 +5615,18 @@ var DInput = defineComponent({
     }, {
       immediate: true
     });
+    watch(() => props.modelValue, () => {
+      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+    });
     const onInput = ($event) => {
       ctx.emit("update:modelValue", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx.emit("focus");
     }, onBlur = () => {
       ctx.emit("blur");
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
+      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
     }, onChange = ($event) => {
       ctx.emit("change", $event.target.value);
-      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
     }, onKeydown = ($event) => {
       ctx.emit("keydown", $event);
     }, onChangeInputType = () => {
@@ -5729,6 +5724,7 @@ var Search = defineComponent({
         autoFocus: props.autoFocus,
         modelValue: keywords.value,
         placeholder: props.placeholder,
+        maxLength: props.maxLength,
         cssClass: props.cssClass,
         onKeydown: onInputKeydown,
         "onUpdate:modelValue": onInputUpdate