vue-devui 1.0.0-beta.18 → 1.0.0-beta.20220808

package/rate/index.es.js

@@ -1,7 +1,8 @@
-import { defineComponent, reactive, ref, onMounted, createVNode, resolveComponent } from "vue";
+import { defineComponent, ref, watch, onMounted, createVNode, resolveComponent } from "vue";
 const rateProps = {
   modelValue: {
-    type: Number
+    type: Number,
+    default: 0
   },
   read: {
     type: Boolean,
@@ -40,69 +41,92 @@ 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, 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 rate = "";
 var Rate = defineComponent({
   name: "DRate",
   props: rateProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx) {
-    const totalLevelArray = reactive([]);
+    const totalLevelArray = ref([]);
     const chooseValue = ref(0);
     const setChange = (start, end, width) => {
       for (let i = start; i < end; i++) {
-        totalLevelArray[i]["width"] = width;
+        totalLevelArray.value[i]["width"] = width;
       }
     };
     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.value[intCurrentLevel]["width"] = halfStar * 100 + "%";
         setChange(intCurrentLevel + 1, props.count, "0");
+      } else {
+        setChange(intCurrentLevel, props.count, "0");
       }
     };
-    onMounted(() => {
+    const initLevelArray = () => {
+      totalLevelArray.value = [];
       for (let i = 0; i < props.count; i++) {
-        totalLevelArray.push({
+        totalLevelArray.value.push({
           width: "0"
         });
       }
+    };
+    watch([() => props.modelValue, () => props.count], () => {
+      initLevelArray();
       initRating();
     });
-    const hoverToggle = (e, index2, reset = false) => {
+    onMounted(() => {
+      initLevelArray();
+      initRating();
+    });
+    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,46 +134,48 @@ 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;
+    const ns = useNamespace("rate");
     return createVNode("div", {
-      "class": "devui-star-container",
-      "onMouseleave": (e) => hoverToggle(e, chooseValue, true)
+      "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",
@@ -166,9 +192,9 @@ var Rate = defineComponent({
       "fill": "#E3E5E9",
       "id": "Mask"
     }, [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"
+      "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
       }
@@ -176,15 +202,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", {
@@ -202,19 +227,16 @@ var Rate = defineComponent({
     }, [createVNode("g", {
       "id": "Mask"
     }, [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"
+      "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)])])])])]))]);
   }
 });
-Rate.install = function(app) {
-  app.component(Rate.name, Rate);
-};
 var index = {
   title: "Rate \u8BC4\u5206",
   category: "\u6570\u636E\u5C55\u793A",
   status: "100%",
   install(app) {
-    app.use(Rate);
+    app.component(Rate.name, Rate);
   }
 };
-export { Rate, index as default };
+export { Rate, index as default, rateProps };

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="",d=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},u=()=>{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"});u()}),{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:u,color:f,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-${u}`,style:{width:e.width}},[t.createVNode(t.resolveComponent("d-icon"),{name:r,color:f},null)]),a&&!r&&t.createVNode("span",{class:`devui-star-color-active devui-active-star devui-star-color-${u}`,style:{color:f,width:e.width}},[a]),!a&&!r&&t.createVNode("span",{class:`devui-star-color-active devui-active-star devui-star-color-${u}`,style:{color:f,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)])])])])]))])}});d.install=function(o){o.component(d.name,d)};var w={title:"Rate \u8BC4\u5206",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.use(d)}};i.Rate=d,i.default=w,Object.defineProperty(i,"__esModule",{value:!0}),i[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,c,a){let r=o;return c&&(r+=`__${c}`),a&&(r+=`--${a}`),r}function p(o,c=!1){const a=c?`.devui-${o}`:`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 k="",m=e.defineComponent({name:"DRate",props:y,emits:["change","update:modelValue"],setup(o,c){const a=e.ref([]),r=e.ref(0),s=(n,t,v)=>{for(let V=n;V<t;V++)a.value[V].width=v},u=()=>{r.value=o.modelValue;const n=r.value%1,t=Math.floor(r.value);s(0,t,"100%"),n>0?(a.value[t].width=n*100+"%",s(t+1,o.count,"0")):s(t,o.count,"0")},f=()=>{a.value=[];for(let n=0;n<o.count;n++)a.value.push({width:"0"})};e.watch([()=>o.modelValue,()=>o.count],()=>{f(),u()}),e.onMounted(()=>{f(),u()});const i=n=>{const t=n.target;return o.allowHalf&&n.offsetX*2<=t.clientWidth};return{totalLevelArray:a,chooseValue:r,hoverToggle:(n,t)=>{if(o.read)return;s(0,t+1,"100%");const v=i(n)?"50%":"100%";s(t,t+1,v),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(),c.emit("update:modelValue",r.value+1))},onMouseleave:()=>{u()}}},render(){const{totalLevelArray:o,icon:c,character:a,read:r,type:s,color:u,hoverToggle:f,selectValue:i,onMouseleave:h}=this,l=p("rate");return e.createVNode("div",{class:l.b(),onMouseleave:h,style:`--star-color: ${u}`},[o.map((w,n)=>e.createVNode("div",{class:[l.m("align"),l.m("pointer"),r?l.m("only-read"):""],key:n,onMouseover:t=>f(t,n),onClick:t=>i(t,n)},[c&&!a&&e.createVNode("span",{class:l.e("color")},[e.createVNode(e.resolveComponent("d-icon"),{name:c},null)]),a&&!c&&e.createVNode("span",{class:l.e("color")},[a]),!c&&!a&&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)])])])]),c&&!a&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),l.em("color",s)],style:{width:w.width}},[e.createVNode(e.resolveComponent("d-icon"),{name:c,color:u},null)]),a&&!c&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),l.em("color",s)],style:{color:u,width:w.width}},[a]),!a&&!c&&e.createVNode("span",{class:[l.e("color-active"),l.e("active-star"),u?l.em("color","customize"):l.em("color",s)],style:{width:w.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)])])])])]))])}}),N={title:"Rate \u8BC4\u5206",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.component(m.name,m)}};d.Rate=m,d.default=N,d.rateProps=y,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"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{line-height:1.5}.devui-rate__color-active i{color:var(--devui-brand, #5e7ce0)}.devui-rate__color-active svg g{fill:var(--devui-brand, #5e7ce0)}.devui-rate__color--success i{color:#3dcca6}.devui-rate__color--success svg g{fill:#3dcca6}.devui-rate__color--warning i{color:#fac20a}.devui-rate__color--warning svg g{fill:#fac20a}.devui-rate__color--error i{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-shape-icon-fill, #d7d8da);line-height:1.5}.devui-rate__color .icon{color:var(--devui-shape-icon-fill, #d7d8da)!important}.devui-rate__color svg g{fill:var(--devui-shape-icon-fill, #d7d8da)}.devui-rate--only-read{cursor:not-allowed}

package/result/index.es.js

@@ -1,20 +1,4 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { defineComponent, createVNode } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps } from "vue";
 const resultProps = {
   icon: {
     type: String,
@@ -29,50 +13,198 @@ const resultProps = {
     default: ""
   }
 };
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
   },
-  setup(props) {
-    return __spreadValues({}, props);
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
   },
-  render() {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+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 icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
     const {
       name,
-      size,
       color,
-      classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        width: size,
-        verticalAlign: "text-bottom"
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
       }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
       "style": {
-        fontSize: size,
-        color
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
       }
-    }, null);
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
   }
 });
 var result = "";
@@ -105,15 +237,12 @@ var Result = defineComponent({
     };
   }
 });
-Result.install = function(app) {
-  app.component(Result.name, Result);
-};
 var index = {
   title: "Result \u7ED3\u679C",
   category: "\u53CD\u9988",
   status: "100%",
   install(app) {
-    app.use(Result);
+    app.component(Result.name, Result);
   }
 };
-export { Result, index as default };
+export { Result, index as default, resultProps };

package/result/index.umd.js

@@ -1 +1 @@
-var m=Object.defineProperty;var c=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var f=(t,e,s)=>e in t?m(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,p=(t,e)=>{for(var s in e||(e={}))h.call(e,s)&&f(t,s,e[s]);if(c)for(var s of c(e))S.call(e,s)&&f(t,s,e[s]);return t};(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 s={icon:{type:String,default:"info"},title:{type:String,default:""},desc:{type:String,default:""}};var g=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(i){return p({},i)},render(){const{name:i,size:n,color:o,classPrefix:l}=this;return/^((https?):)?\/\//.test(i)?e.createVNode("img",{src:i,alt:i.split("/")[i.split("/").length-1],style:{width:n,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${l} ${l}-${i}`,style:{fontSize:n,color:o}},null)}}),_="",r=e.defineComponent({name:"DResult",props:s,setup(i,n){let o;return function(l){l.success="right-o",l.danger="error-o",l.warning="warning-o",l.info="info-o"}(o||(o={})),()=>{var l,d,u,a;return e.createVNode("div",{class:"devui-result"},[n.slots.icon?e.createVNode("div",null,[(l=n.slots)==null?void 0:l.icon()]):e.createVNode(g,{name:o[i.icon]||"",class:`devui-result__icon-${i.icon}`,size:"64px"},null),e.createVNode("div",{class:"devui-result__title"},[n.slots.title?(d=n.slots)==null?void 0:d.title():i.title]),e.createVNode("div",{class:"devui-result__desc"},[n.slots.desc?(u=n.slots)==null?void 0:u.desc():i.desc]),e.createVNode("div",{class:"devui-result__extra"},[n.slots.extra?(a=n.slots)==null?void 0:a.extra():""])])}}});r.install=function(i){i.component(r.name,r)};var y={title:"Result \u7ED3\u679C",category:"\u53CD\u9988",status:"100%",install(i){i.use(r)}};t.Result=r,t.default=y,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.index={},c.Vue))})(this,function(c,e){"use strict";const y={icon:{type:String,default:"info"},title:{type:String,default:""},desc:{type:String,default:""}},N={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},S={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function f(o,s,l){let n=o;return s&&(n+=`__${s}`),l&&(n+=`--${l}`),n}function v(o,s=!1){const l=s?`.devui-${o}`:`devui-${o}`;return{b:()=>f(l),e:t=>t?f(l,t):"",m:t=>t?f(l,"",t):"",em:(t,u)=>t&&u?f(l,t,u):""}}var z="",b=e.defineComponent({name:"DSvgIcon",props:S,setup(o){const{name:s,color:l,size:n}=e.toRefs(o),r=v("svg-icon"),i=e.computed(()=>`#icon-${s.value}`),a=e.computed(()=>typeof n.value=="number"?`${n.value}px`:n.value),t={width:a.value,height:a.value};return()=>e.createVNode("svg",{class:r.b(),style:t},[e.createVNode("use",{"xlink:href":i.value,fill:l.value},null)])}});function h(o){return/^((http|https):)?\/\//.test(o)}function D(o,s){const{component:l,name:n,size:r,color:i,classPrefix:a,rotate:t}=e.toRefs(o),u=v("icon"),d=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),p=l.value?e.resolveDynamicComponent(l.value):e.resolveDynamicComponent(b),m=()=>e.createVNode("img",e.mergeProps({src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&u.m("spin")],style:{width:d.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},s.attrs),null),$=()=>e.createVNode(p,e.mergeProps({name:n.value,color:i.value,size:d.value,class:[(t==null?void 0:t.value)==="infinite"&&u.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null),C=()=>{const P=/^icon-/.test(n.value)?n.value:`${a.value}-${n.value}`;return e.createVNode("i",e.mergeProps({class:[a.value,P,(t==null?void 0:t.value)==="infinite"&&u.m("spin")],style:{fontSize:d.value,color:i.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},s.attrs),null)};return{iconDom:()=>l.value?$():h(n.value)?m():C()}}var _=e.defineComponent({name:"DIcon",props:N,emits:["click"],setup(o,s){const{disabled:l,operable:n}=e.toRefs(o),{iconDom:r}=D(o,s),i=v("icon"),a=e.computed(()=>({[i.e("container")]:!0,[i.m("disabled")]:l.value,[i.m("operable")]:n.value})),t=u=>{l.value||s.emit("click",u)};return()=>{var u,d,p,m;return e.createVNode("div",{class:a.value,onClick:t},[(d=(u=s.slots).prefix)==null?void 0:d.call(u),r(),(m=(p=s.slots).suffix)==null?void 0:m.call(p)])}}}),R="",g=e.defineComponent({name:"DResult",props:y,setup(o,s){let l;return function(n){n.success="right-o",n.danger="error-o",n.warning="warning-o",n.info="info-o"}(l||(l={})),()=>{var n,r,i,a;return e.createVNode("div",{class:"devui-result"},[s.slots.icon?e.createVNode("div",null,[(n=s.slots)==null?void 0:n.icon()]):e.createVNode(_,{name:l[o.icon]||"",class:`devui-result__icon-${o.icon}`,size:"64px"},null),e.createVNode("div",{class:"devui-result__title"},[s.slots.title?(r=s.slots)==null?void 0:r.title():o.title]),e.createVNode("div",{class:"devui-result__desc"},[s.slots.desc?(i=s.slots)==null?void 0:i.desc():o.desc]),e.createVNode("div",{class:"devui-result__extra"},[s.slots.extra?(a=s.slots)==null?void 0:a.extra():""])])}}}),V={title:"Result \u7ED3\u679C",category:"\u53CD\u9988",status:"100%",install(o){o.component(g.name,g)}};c.Result=g,c.default=V,c.resultProps=y,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/result/style.css

@@ -1 +1 @@
-.devui-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:30px}.devui-result__icon-success:before{color:var(--devui-success, #50d4ab)}.devui-result__icon-danger:before{color:var(--devui-danger, #f66f6a)}.devui-result__icon-warning:before{color:var(--devui-warning, #fac20a)}.devui-result__icon-info:before{color:var(--devui-info, #5e7ce0)}.devui-result__title{margin-top:20px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size-lg, 14px)}.devui-result__desc{margin-top:10px;color:var(--devui-text-weak, #575d6c);font-size:var(--devui-font-size-md, 12px)}.devui-result__extra{margin-top:30px}
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 4px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:30px}.devui-result__icon-success:before{color:var(--devui-success, #50d4ab)}.devui-result__icon-danger:before{color:var(--devui-danger, #f66f6a)}.devui-result__icon-warning:before{color:var(--devui-warning, #fac20a)}.devui-result__icon-info:before{color:var(--devui-info, #5e7ce0)}.devui-result__title{margin-top:20px;color:var(--devui-text, #252b3a);font-size:var(--devui-font-size-lg, 14px)}.devui-result__desc{margin-top:10px;color:var(--devui-text-weak, #575d6c);font-size:var(--devui-font-size-md, 14px)}.devui-result__extra{margin-top:30px}