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

package/radio/index.es.js

@@ -17,10 +17,10 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, inject, computed, createVNode, provide, toRef, isVNode } from "vue";
+import { inject, computed, provide, toRef, defineComponent, createVNode, isVNode } from "vue";
 const radioCommonProps = {
   modelValue: {
-    type: String,
+    type: [Number, String, Boolean],
     default: null
   },
   name: {
@@ -38,7 +38,7 @@ const radioCommonProps = {
 };
 const radioProps = __spreadProps(__spreadValues({}, radioCommonProps), {
   value: {
-    type: String,
+    type: [Number, String, Boolean],
     required: true,
     default: null
   }
@@ -64,8 +64,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+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) : "";
@@ -77,111 +77,123 @@ function useNamespace(block) {
     em
   };
 }
+function useRadio(props, ctx) {
+  const radioGroupConf = inject(radioGroupInjectionKey, null);
+  const isDisabled = computed(() => {
+    return props.disabled || (radioGroupConf == null ? void 0 : radioGroupConf.disabled.value);
+  });
+  const isChecked = computed(() => {
+    const _value = radioGroupConf ? radioGroupConf.modelValue.value : props.modelValue;
+    return props.value === _value;
+  });
+  const radioName = computed(() => {
+    return radioGroupConf ? radioGroupConf.name.value : props.name || void 0;
+  });
+  const judgeCanChange = (_value) => {
+    const beforeChange = props.beforeChange || (radioGroupConf ? radioGroupConf.beforeChange : null);
+    let flag = Promise.resolve(true);
+    if (beforeChange) {
+      const canChange = beforeChange(_value);
+      if (typeof canChange === "undefined") {
+        return flag;
+      }
+      if (typeof canChange === "boolean") {
+        flag = Promise.resolve(canChange);
+      } else {
+        flag = canChange;
+      }
+    }
+    return flag;
+  };
+  const handleChange = async (event) => {
+    const _value = props.value;
+    const canChange = await judgeCanChange(_value);
+    if (!canChange) {
+      event.preventDefault();
+      return;
+    }
+    radioGroupConf == null ? void 0 : radioGroupConf.emitChange(_value);
+    ctx.emit("update:modelValue", _value);
+    ctx.emit("change", _value);
+  };
+  return {
+    isChecked,
+    radioName,
+    isDisabled,
+    handleChange
+  };
+}
+function useRadioGroup(props, ctx) {
+  const emitChange = (radioValue) => {
+    ctx.emit("update:modelValue", radioValue);
+    ctx.emit("change", radioValue);
+  };
+  provide(radioGroupInjectionKey, {
+    modelValue: toRef(props, "modelValue"),
+    name: toRef(props, "name"),
+    disabled: toRef(props, "disabled"),
+    beforeChange: props.beforeChange,
+    emitChange
+  });
+}
 var radio = "";
 var Radio = defineComponent({
   name: "DRadio",
   props: radioProps,
   emits: ["change", "update:modelValue"],
-  setup(props, {
-    emit
-  }) {
-    const radioGroupConf = inject(radioGroupInjectionKey, null);
-    const isDisabled = computed(() => {
-      return props.disabled || (radioGroupConf == null ? void 0 : radioGroupConf.disabled.value);
-    });
-    const isChecked = computed(() => {
-      const _value = radioGroupConf ? radioGroupConf.modelValue.value : props.modelValue;
-      return props.value === _value;
-    });
-    const radioName = computed(() => {
-      return radioGroupConf ? radioGroupConf.name.value : props.name || void 0;
-    });
-    const judgeCanChange = (_value) => {
-      const beforeChange = props.beforeChange || (radioGroupConf ? radioGroupConf.beforeChange : null);
-      let flag = Promise.resolve(true);
-      if (beforeChange) {
-        const canChange = beforeChange(_value);
-        if (typeof canChange === "undefined") {
-          return flag;
-        }
-        if (typeof canChange === "boolean") {
-          flag = Promise.resolve(canChange);
-        } else {
-          flag = canChange;
-        }
-      }
-      return flag;
-    };
-    return {
-      isChecked,
-      radioName,
-      disabled: isDisabled,
-      handleChange: async (event) => {
-        const _value = props.value;
-        const canChange = await judgeCanChange(_value);
-        if (!canChange) {
-          event.preventDefault();
-          return;
-        }
-        radioGroupConf == null ? void 0 : radioGroupConf.emitChange(_value);
-        emit("update:modelValue", _value);
-        emit("change", _value);
-      }
-    };
-  },
-  render() {
-    var _a;
+  setup(props, ctx) {
+    const ns = useNamespace("radio");
     const {
-      disabled,
-      radioName,
-      value,
       isChecked,
-      $slots,
+      radioName,
+      isDisabled,
       handleChange
-    } = this;
-    const ns = useNamespace("radio");
-    const labelCls = [ns.b(), {
-      active: isChecked,
-      disabled
-    }];
-    return createVNode("label", {
-      "class": labelCls
-    }, [createVNode("input", {
-      "type": "radio",
-      "name": radioName,
-      "class": ns.e("input"),
-      "disabled": disabled,
-      "onChange": handleChange,
-      "value": value,
-      "checked": isChecked
-    }, null), createVNode("span", {
-      "class": ns.e("material")
-    }, [createVNode("svg", {
-      "height": "100%",
-      "width": "100%",
-      "viewBox": "0 0 1024 1024",
-      "xmlns": "http://www.w3.org/2000/svg"
-    }, [createVNode("circle", {
-      "class": {
-        [ns.e("material-outer")]: true,
-        disabled
-      },
-      "cx": "512",
-      "cy": "512",
-      "r": "486.5",
-      "stroke-width": "51"
-    }, null), createVNode("circle", {
-      "class": {
-        [ns.e("material-inner")]: true,
-        disabled
-      },
-      "cx": "512",
-      "fill-rule": "nonzero",
-      "cy": "512",
-      "r": "320"
-    }, null)])]), createVNode("span", {
-      "class": ns.e("label")
-    }, [(_a = $slots.default) == null ? void 0 : _a.call($slots)])]);
+    } = useRadio(props, ctx);
+    return () => {
+      var _a, _b;
+      const labelCls = [ns.b(), {
+        active: isChecked.value,
+        disabled: isDisabled.value
+      }];
+      return createVNode("label", {
+        "class": labelCls
+      }, [createVNode("input", {
+        "type": "radio",
+        "name": radioName.value,
+        "class": ns.e("input"),
+        "disabled": isDisabled.value,
+        "onChange": handleChange,
+        "value": props.value,
+        "checked": isChecked.value
+      }, null), createVNode("span", {
+        "class": ns.e("material")
+      }, [createVNode("svg", {
+        "height": "100%",
+        "width": "100%",
+        "viewBox": "0 0 1024 1024",
+        "xmlns": "http://www.w3.org/2000/svg"
+      }, [createVNode("circle", {
+        "class": {
+          [ns.e("material-outer")]: true,
+          disabled: isDisabled.value
+        },
+        "cx": "512",
+        "cy": "512",
+        "r": "486.5",
+        "stroke-width": "51"
+      }, null), createVNode("circle", {
+        "class": {
+          [ns.e("material-inner")]: true,
+          disabled: isDisabled.value
+        },
+        "cx": "512",
+        "fill-rule": "nonzero",
+        "cy": "512",
+        "r": "320"
+      }, null)])]), createVNode("span", {
+        "class": ns.e("label")
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]);
+    };
   }
 });
 var radioGroup = "";
@@ -192,50 +204,34 @@ var RadioGroup = defineComponent({
   name: "DRadioGroup",
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
-  setup(props, {
-    emit
-  }) {
-    const emitChange = (radioValue) => {
-      emit("update:modelValue", radioValue);
-      emit("change", radioValue);
-    };
-    provide(radioGroupInjectionKey, {
-      modelValue: toRef(props, "modelValue"),
-      name: toRef(props, "name"),
-      disabled: toRef(props, "disabled"),
-      beforeChange: props.beforeChange,
-      emitChange
-    });
-  },
-  render() {
-    const {
-      values,
-      direction
-    } = this;
+  setup(props, ctx) {
     const ns = useNamespace("radio-group");
-    const getContent = () => {
-      const defaultSlot = this.$slots.default;
-      if (defaultSlot) {
-        return defaultSlot();
-      } else if (Array.isArray(values)) {
-        return values.map((item) => {
-          return createVNode(Radio, {
-            "key": item,
-            "value": item
-          }, _isSlot(item) ? item : {
-            default: () => [item]
+    useRadioGroup(props, ctx);
+    return () => {
+      const getContent = () => {
+        const defaultSlot = ctx.slots.default;
+        if (defaultSlot) {
+          return defaultSlot();
+        } else if (Array.isArray(props.values)) {
+          return props.values.map((item) => {
+            return createVNode(Radio, {
+              "key": item,
+              "value": item
+            }, _isSlot(item) ? item : {
+              default: () => [item]
+            });
           });
-        });
-      } else {
-        return "";
-      }
+        } else {
+          return "";
+        }
+      };
+      return createVNode("div", {
+        "class": [ns.b(), {
+          "is-row": props.direction === "row",
+          "is-column": props.direction === "column"
+        }]
+      }, [getContent()]);
     };
-    return createVNode("div", {
-      "class": [ns.b(), {
-        "is-row": direction === "row",
-        "is-column": direction === "column"
-      }]
-    }, [getContent()]);
   }
 });
 var index = {

package/radio/index.umd.js

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

package/rate/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, reactive, ref, onMounted, createVNode, resolveComponent } from "vue";
+import { defineComponent, ref, watch, onMounted, createVNode, resolveComponent } from "vue";
 const rateProps = {
   modelValue: {
     type: Number,
@@ -51,8 +51,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+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) : "";
@@ -70,11 +70,11 @@ var Rate = defineComponent({
   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 = () => {
@@ -83,18 +83,26 @@ var Rate = defineComponent({
       const intCurrentLevel = Math.floor(chooseValue.value);
       setChange(0, intCurrentLevel, "100%");
       if (halfStar > 0) {
-        totalLevelArray[intCurrentLevel]["width"] = halfStar * 100 + "%";
+        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();
+    });
+    onMounted(() => {
+      initLevelArray();
       initRating();
     });
     const isSemiSelected = (e) => {

package/rate/index.umd.js

@@ -1 +1 @@
-(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"});
+(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 V={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:V,emits:["change","update:modelValue"],setup(o,c){const a=e.ref([]),r=e.ref(0),s=(n,t,v)=>{for(let y=n;y<t;y++)a.value[y].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=V,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/result/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, createVNode } from "vue";
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps } from "vue";
 const resultProps = {
   icon: {
     type: String,
@@ -13,6 +13,10 @@ const resultProps = {
     default: ""
   }
 };
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
     type: String,
@@ -20,43 +24,135 @@ const iconProps = {
     required: true
   },
   size: {
-    type: String,
+    type: [Number, String],
     default: "inherit"
   },
   color: {
     type: String,
     default: "inherit"
   },
+  component: {
+    type: Object,
+    default: null
+  },
   classPrefix: {
     type: String,
-    default: "icon"
+    default: DEFAULT_PREFIX
   }
 };
+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,
+      color,
+      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)]);
+    };
+  }
+});
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props) {
+  setup(props, {
+    attrs
+  }) {
     const {
+      component,
       name,
       size,
       color,
       classPrefix
     } = toRefs(props);
-    return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const svgIconDom = () => {
+      return createVNode(IconComponent, mergeProps({
+        "name": name.value,
+        "color": color.value,
+        "size": iconSize.value
+      }, attrs), null);
+    };
+    const imgIconDom = () => {
+      return createVNode("img", mergeProps({
         "src": name.value,
         "alt": name.value.split("/")[name.value.split("/").length - 1],
         "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
+          width: iconSize.value || ""
         }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+      }, attrs), null);
+    };
+    const fontIconDom = () => {
+      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+      return createVNode("i", mergeProps({
+        "class": [classPrefix.value, fontIconClass],
         "style": {
-          fontSize: size.value,
+          fontSize: iconSize.value,
           color: color.value
         }
-      }, null);
+      }, attrs), null);
+    };
+    return () => {
+      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
     };
   }
 });

package/result/index.umd.js

@@ -1 +1 @@
-(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";const u={icon:{type:String,default:"info"},title:{type:String,default:""},desc:{type:String,default:""}},c={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var f=e.defineComponent({name:"DIcon",props:c,setup(i){const{name:t,size:n,color:l,classPrefix:o}=e.toRefs(i);return()=>/^((https?):)?\/\//.test(t.value)?e.createVNode("img",{src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:n.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${o.value} ${o.value}-${t.value}`,style:{fontSize:n.value,color:l.value}},null)}}),v="",r=e.defineComponent({name:"DResult",props:u,setup(i,t){let n;return function(l){l.success="right-o",l.danger="error-o",l.warning="warning-o",l.info="info-o"}(n||(n={})),()=>{var l,o,a,d;return e.createVNode("div",{class:"devui-result"},[t.slots.icon?e.createVNode("div",null,[(l=t.slots)==null?void 0:l.icon()]):e.createVNode(f,{name:n[i.icon]||"",class:`devui-result__icon-${i.icon}`,size:"64px"},null),e.createVNode("div",{class:"devui-result__title"},[t.slots.title?(o=t.slots)==null?void 0:o.title():i.title]),e.createVNode("div",{class:"devui-result__desc"},[t.slots.desc?(a=t.slots)==null?void 0:a.desc():i.desc]),e.createVNode("div",{class:"devui-result__extra"},[t.slots.extra?(d=t.slots)==null?void 0:d.extra():""])])}}}),p={title:"Result \u7ED3\u679C",category:"\u53CD\u9988",status:"100%",install(i){i.component(r.name,r)}};s.Result=r,s.default=p,s.resultProps=u,Object.defineProperty(s,"__esModule",{value:!0}),s[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 f={icon:{type:String,default:"info"},title:{type:String,default:""},desc:{type:String,default:""}};function m(o){return/^((http|https):)?\/\//.test(o)}const v={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"}},g={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function d(o,n,s){let t=o;return n&&(t+=`__${n}`),s&&(t+=`--${s}`),t}function y(o,n=!1){const s=n?`.devui-${o}`:`devui-${o}`;return{b:()=>d(s),e:l=>l?d(s,l):"",m:l=>l?d(s,"",l):"",em:(l,c)=>l&&c?d(s,l,c):""}}var $="",h=e.defineComponent({name:"DSvgIcon",props:g,setup(o){const{name:n,color:s,size:t}=e.toRefs(o),i=y("svg-icon"),a=e.computed(()=>`#icon-${n.value}`),u=e.computed(()=>typeof t.value=="number"?`${t.value}px`:t.value),l={width:u.value,height:u.value};return()=>e.createVNode("svg",{class:i.b(),style:l},[e.createVNode("use",{"xlink:href":a.value,fill:s.value},null)])}}),S=e.defineComponent({name:"DIcon",props:v,setup(o,{attrs:n}){const{component:s,name:t,size:i,color:a,classPrefix:u}=e.toRefs(o),l=s.value?e.resolveDynamicComponent(s.value):e.resolveDynamicComponent(h),c=e.computed(()=>typeof i.value=="number"?`${i.value}px`:i.value),_=()=>e.createVNode(l,e.mergeProps({name:t.value,color:a.value,size:c.value},n),null),D=()=>e.createVNode("img",e.mergeProps({src:t.value,alt:t.value.split("/")[t.value.split("/").length-1],style:{width:c.value||""}},n),null),P=()=>{const V=/^icon-/.test(t.value)?t.value:`${u.value}-${t.value}`;return e.createVNode("i",e.mergeProps({class:[u.value,V],style:{fontSize:c.value,color:a.value}},n),null)};return()=>s.value?_():m(t.value)?D():P()}}),b="",p=e.defineComponent({name:"DResult",props:f,setup(o,n){let s;return function(t){t.success="right-o",t.danger="error-o",t.warning="warning-o",t.info="info-o"}(s||(s={})),()=>{var t,i,a,u;return e.createVNode("div",{class:"devui-result"},[n.slots.icon?e.createVNode("div",null,[(t=n.slots)==null?void 0:t.icon()]):e.createVNode(S,{name:s[o.icon]||"",class:`devui-result__icon-${o.icon}`,size:"64px"},null),e.createVNode("div",{class:"devui-result__title"},[n.slots.title?(i=n.slots)==null?void 0:i.title():o.title]),e.createVNode("div",{class:"devui-result__desc"},[n.slots.desc?(a=n.slots)==null?void 0:a.desc():o.desc]),e.createVNode("div",{class:"devui-result__extra"},[n.slots.extra?(u=n.slots)==null?void 0:u.extra():""])])}}}),N={title:"Result \u7ED3\u679C",category:"\u53CD\u9988",status:"100%",install(o){o.component(p.name,p)}};r.Result=p,r.default=N,r.resultProps=f,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="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-svg-icon{vertical-align:middle}.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}