vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/progress/index.es.js

@@ -1 +1,153 @@
-import{defineComponent as e,toRefs as t,reactive as s,watch as r,createVNode as a,createTextVNode as o}from"vue";var l=e({name:"DProgress",props:{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}},setup(e){const{height:a,percentage:o,percentageText:l,barBgColor:i,isCircle:n,strokeWidth:d,showContent:h}=t(e),p=s({pathString:"",trailPath:null,strokePath:null}),u=()=>{if(!n)return;const e=50-d.value/2,t=-e,s=-2*e;p.pathString=`M 50,50 m 0,${t}\n      a ${e},${e} 0 1 1 0,${-s}\n      a ${e},${e} 0 1 1 0,${s}`;const r=2*Math.PI*e;p.trailPath={stroke:"#dfe1e6",strokeDasharray:`${r}px ${r}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"},p.strokePath={stroke:i||null,strokeDasharray:`${o.value/100*r}px ${r}px`,strokeDashoffset:"0",transition:"stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"}};return u(),r([a,o,l,i,n,d,h],(()=>{u()})),{data:p}},render(){var e;const{height:t,percentage:s,percentageText:r,barBgColor:l,isCircle:i,strokeWidth:n,showContent:d,data:h,$slots:p}=this,u=a("div",{className:"devui-progress--line",style:{height:t,borderRadius:t}},[a("div",{className:"devui-progress-bar",style:{height:t,borderRadius:t,width:`${s}%`,backgroundColor:l}},null),a("span",{style:{lineHeight:t}},[r])]),c=a("span",{className:"devui-progress-circle-text"},[s,o("%")]),g=a("div",{className:"devui-progress-circle"},[a("svg",{className:"devui-progress-circle",viewBox:"0 0 100 100"},[a("path",{className:"devui-progress-circle-trail","fill-opacity":"0","stroke-width":n,style:h.trailPath,d:h.pathString},null),a("path",{className:"devui-progress-circle-path",d:h.pathString,"stroke-linecap":"round","fill-opacity":"0",stroke:l,"stroke-width":s?n:0,style:h.strokePath},null)]),d&&(null==(e=p.default)?void 0:e.call(p)),d&&!p.default&&c]);return a("div",{className:"devui-progress"},[i?g:u])}});l.install=function(e){e.component(l.name,l)};var i={title:"Progress 进度条",category:"反馈",status:"已完成",install(e){e.use(l)}};export{l as Progress,i as default};
+import { defineComponent, toRefs, reactive, watch, createVNode, createTextVNode } from "vue";
+var progress = "";
+var Progress = defineComponent({
+  name: "DProgress",
+  props: {
+    height: {
+      type: String,
+      default: "20px"
+    },
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    percentageText: {
+      type: String,
+      default: ""
+    },
+    barBgColor: {
+      type: String,
+      default: "#5170ff"
+    },
+    isCircle: {
+      type: Boolean,
+      default: false
+    },
+    strokeWidth: {
+      type: Number,
+      default: 6
+    },
+    showContent: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const {
+      height,
+      percentage,
+      percentageText,
+      barBgColor,
+      isCircle,
+      strokeWidth,
+      showContent
+    } = toRefs(props);
+    const data = reactive({
+      pathString: "",
+      trailPath: null,
+      strokePath: null
+    });
+    const setCircleProgress = () => {
+      if (!isCircle) {
+        return;
+      }
+      const radius = 50 - strokeWidth.value / 2;
+      const beginPositionY = -radius;
+      const endPositionY = radius * -2;
+      data.pathString = `M 50,50 m 0,${beginPositionY}
+      a ${radius},${radius} 0 1 1 0,${-endPositionY}
+      a ${radius},${radius} 0 1 1 0,${endPositionY}`;
+      const len = Math.PI * 2 * radius;
+      data.trailPath = {
+        stroke: "#dfe1e6",
+        strokeDasharray: `${len}px ${len}px`,
+        strokeDashoffset: `0`,
+        transition: "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s"
+      };
+      data.strokePath = {
+        stroke: barBgColor || null,
+        strokeDasharray: `${percentage.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], () => {
+      setCircleProgress();
+    });
+    return {
+      data
+    };
+  },
+  render() {
+    var _a;
+    const {
+      height,
+      percentage,
+      percentageText,
+      barBgColor,
+      isCircle,
+      strokeWidth,
+      showContent,
+      data,
+      $slots
+    } = this;
+    const progressLine = createVNode("div", {
+      "class": "devui-progress--line",
+      "style": {
+        height,
+        borderRadius: height
+      }
+    }, [createVNode("div", {
+      "class": "devui-progress-bar",
+      "style": {
+        height,
+        borderRadius: height,
+        width: `${percentage}%`,
+        backgroundColor: barBgColor
+      }
+    }, null), createVNode("span", {
+      "style": {
+        lineHeight: height
+      }
+    }, [percentageText])]);
+    const textElement = createVNode("span", {
+      "class": "devui-progress-circle-text"
+    }, [percentage, createTextVNode("%")]);
+    const progressCircle = createVNode("div", {
+      "class": "devui-progress-circle"
+    }, [createVNode("svg", {
+      "class": "devui-progress-circle",
+      "viewBox": "0 0 100 100"
+    }, [createVNode("path", {
+      "class": "devui-progress-circle-trail",
+      "fill-opacity": "0",
+      "stroke-width": strokeWidth,
+      "style": data.trailPath,
+      "d": data.pathString
+    }, null), createVNode("path", {
+      "class": "devui-progress-circle-path",
+      "d": data.pathString,
+      "stroke-linecap": "round",
+      "fill-opacity": "0",
+      "stroke": barBgColor,
+      "stroke-width": percentage ? strokeWidth : 0,
+      "style": data.strokePath
+    }, null)]), showContent && ((_a = $slots.default) == null ? void 0 : _a.call($slots)), showContent && !$slots.default && textElement]);
+    return createVNode("div", {
+      "class": "devui-progress"
+    }, [!isCircle ? progressLine : progressCircle]);
+  }
+});
+Progress.install = function(app) {
+  app.component(Progress.name, Progress);
+};
+var index = {
+  title: "Progress \u8FDB\u5EA6\u6761",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.use(Progress);
+  }
+};
+export { Progress, index as default };

package/progress/index.umd.js

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

package/quadrant-diagram/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/quadrant-diagram/index.es.js

@@ -1 +1,489 @@
-import{defineComponent as i,toRefs as e,ref as a,reactive as t,onMounted as n,watch as s,createVNode as l}from"vue";const r={tickWidth:10,spaceBetweenLabelsAxis:20,xAxisLabel:"紧急度",yAxisLabel:"重要度",xAxisRange:{min:0,max:100,step:10},yAxisRange:{min:0,max:50,step:5},originPosition:{left:30,bottom:30},axisMargin:35,xWeight:1,yWeight:1},u={diagramId:{type:String,default:"1"},axisConfigs:{type:Object,default:r},view:{type:Object,default:{height:900,width:950}}},x={diagramId:{type:String},axisConfigs:{type:Object},view:{type:Object}};var o="object"==typeof global&&global&&global.Object===Object&&global,g="object"==typeof self&&self&&self.Object===Object&&self,c=o||g||Function("return this")(),v=c.Symbol,f=Object.prototype,d=f.hasOwnProperty,p=f.toString,T=v?v.toStringTag:void 0;var m=Object.prototype.toString;var y=v?v.toStringTag:void 0;function h(i){return null==i?void 0===i?"[object Undefined]":"[object Null]":y&&y in Object(i)?function(i){var e=d.call(i,T),a=i[T];try{i[T]=void 0;var t=!0}catch(s){}var n=p.call(i);return t&&(e?i[T]=a:delete i[T]),n}(i):function(i){return m.call(i)}(i)}var O=/\s/;var b=/^\s+/;function k(i){return i?i.slice(0,function(i){for(var e=i.length;e--&&O.test(i.charAt(e)););return e}(i)+1).replace(b,""):i}function A(i){var e=typeof i;return null!=i&&("object"==e||"function"==e)}var S=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,N=/^0o[0-7]+$/i,R=parseInt;function j(i){if("number"==typeof i)return i;if(function(i){return"symbol"==typeof i||function(i){return null!=i&&"object"==typeof i}(i)&&"[object Symbol]"==h(i)}(i))return NaN;if(A(i)){var e="function"==typeof i.valueOf?i.valueOf():i;i=A(e)?e+"":e}if("string"!=typeof i)return 0===i?i:+i;i=k(i);var a=w.test(i);return a||N.test(i)?R(i.slice(2),a?2:8):S.test(i)?NaN:+i}var M=function(){return c.Date.now()},W=Math.max,I=Math.min;function P(i,e,a){var t,n,s,l,r,u,x=0,o=!1,g=!1,c=!0;if("function"!=typeof i)throw new TypeError("Expected a function");function v(e){var a=t,s=n;return t=n=void 0,x=e,l=i.apply(s,a)}function f(i){return x=i,r=setTimeout(p,e),o?v(i):l}function d(i){var a=i-u;return void 0===u||a>=e||a<0||g&&i-x>=s}function p(){var i=M();if(d(i))return T(i);r=setTimeout(p,function(i){var a=e-(i-u);return g?I(a,s-(i-x)):a}(i))}function T(i){return r=void 0,c&&t?v(i):(t=n=void 0,l)}function m(){var i=M(),a=d(i);if(t=arguments,n=this,u=i,a){if(void 0===r)return f(u);if(g)return clearTimeout(r),r=setTimeout(p,e),v(u)}return void 0===r&&(r=setTimeout(p,e)),l}return e=j(e)||0,A(a)&&(o=!!a.leading,s=(g="maxWait"in a)?W(j(a.maxWait)||0,e):s,c="trailing"in a?!!a.trailing:c),m.cancel=function(){void 0!==r&&clearTimeout(r),x=0,t=u=n=r=void 0},m.flush=function(){return void 0===r?l:T(M())},m}var C=i({name:"DQuadrantDiagramAxis",props:x,setup(i){const{diagramId:l,view:r,axisConfigs:u}=e(i),x=a("#0000ff"),o=a("#ff0000"),g=a(),c=a(),v=t({axisOrigin:{x:0,y:0},axisTop:0,axisRight:0,axisWidth:0,axisHeight:0,yAxisTicksNum:0,xAxisTicksNum:0,xTickSpacing:0,yTickSpacing:0}),f=u.value;n((()=>{d()})),s(r.value,(()=>{d()}));const d=P((()=>{p(),T(),m(),k()}),200),p=()=>{g.value=document.querySelector("#devui-quadrant-axis-"+l.value)},T=()=>{c.value=g.value.getContext("2d"),v.axisOrigin=f.axisOrigin,v.axisTop=f.axisTop,v.axisRight=f.axisRight,v.axisWidth=f.axisWidth,v.axisHeight=f.axisHeight,v.yAxisTicksNum=f.yAxisTicksNum,v.xAxisTicksNum=f.xAxisTicksNum,v.xTickSpacing=f.xTickSpacing,v.yTickSpacing=f.yTickSpacing},m=()=>{c.value.save(),c.value.fillStyle=x.value,c.value.strokeStyle=x.value,h(),y(),c.value.lineWidth=.5,O(),b(),c.value.restore()},y=()=>{c.value.beginPath(),c.value.moveTo(v.axisOrigin.x,v.axisOrigin.y),c.value.lineTo(v.axisOrigin.x,v.axisTop-f.axisMargin),c.value.stroke(),c.value.moveTo(v.axisOrigin.x,v.axisTop-f.axisMargin),c.value.lineTo(v.axisOrigin.x+5,v.axisTop-f.axisMargin+10),c.value.lineTo(v.axisOrigin.x-5,v.axisTop-f.axisMargin+10),c.value.fill()},h=()=>{c.value.beginPath(),c.value.moveTo(v.axisOrigin.x,v.axisOrigin.y),c.value.lineTo(v.axisRight+f.axisMargin-10,v.axisOrigin.y),c.value.stroke(),c.value.moveTo(v.axisRight+f.axisMargin,v.axisOrigin.y),c.value.lineTo(v.axisRight+f.axisMargin-10,v.axisOrigin.y+5),c.value.lineTo(v.axisRight+f.axisMargin-10,v.axisOrigin.y-5),c.value.fill()},O=()=>{let i;for(let e=1;e<v.xAxisTicksNum;e++)c.value.beginPath(),i=e%f.xAxisRange.step==0?f.tickWidth:f.tickWidth/2,c.value.moveTo(v.axisOrigin.x+e*v.xTickSpacing,v.axisOrigin.y-i),c.value.lineTo(v.axisOrigin.x+e*v.xTickSpacing,v.axisOrigin.y+i),c.value.stroke()},b=()=>{let i;for(let e=1;e<v.yAxisTicksNum;e++)c.value.beginPath(),i=e%f.yAxisRange.step==0?f.tickWidth:f.tickWidth/2,c.value.moveTo(v.axisOrigin.x-i,v.axisOrigin.y-e*v.yTickSpacing),c.value.lineTo(v.axisOrigin.x+i,v.axisOrigin.y-e*v.yTickSpacing),c.value.stroke()},k=()=>{c.value.save(),c.value.fillStyle=o.value,A(),S(),c.value.restore(),w()},A=()=>{c.value.textAlign="center",c.value.textBaseline="top";for(let i=0;i<=v.xAxisTicksNum;i++)i%f.xAxisRange.step==0&&c.value.fillText(i,v.axisOrigin.x+i*v.xTickSpacing,v.axisOrigin.y+f.spaceBetweenLabelsAxis)},S=()=>{c.value.textAlign="center",c.value.textBaseline="middle";for(let i=0;i<=v.yAxisTicksNum;i++)i%f.yAxisRange.step==0&&c.value.fillText(i,v.axisOrigin.x-f.spaceBetweenLabelsAxis,v.axisOrigin.y-i*v.yTickSpacing)},w=()=>{c.value.font="12px Microsoft YaHei",c.value.textAlign="left",c.value.fillStyle=o.value;const i=c.value.measureText(f.xAxisLabel).width;N(f.xAxisLabel,v.axisRight+f.axisMargin/2,v.axisOrigin.y-i-15),c.value.fillText(f.yAxisLabel,v.axisOrigin.x+15,v.axisTop-f.axisMargin/2)},N=(i,e,a)=>{for(let t=0;t<i.length;t++){const n=i.slice(t,t+1).toString();n.match(/[A-Za-z0-9]/)?(c.value.save(),c.value.translate(e,a),c.value.rotate(Math.PI/180*90),c.value.textBaseline="bottom",c.value.fillText(n,0,0),c.value.restore(),a+=c.value.measureText(n).width):n.match(/[\u4E00-\u9FA5]/)&&(c.value.save(),c.value.textBaseline="top",c.value.fillText(n,e,a),c.value.restore(),a+=c.value.measureText(n).width)}}},render(){const{diagramId:i,view:e}=this;return l("div",null,[l("canvas",{id:"devui-quadrant-axis-"+i,height:e.height,width:e.width},null)])}}),L=i({name:"DQuadrantDiagram",props:u,setup(i){const{diagramId:a,axisConfigs:n,view:l}=e(i),u=t({axisOrigin:{x:null,y:null},axisTop:null,axisRight:null,axisWidth:null,axisHeight:null,yAxisTicksNum:null,xAxisTicksNum:null,xTickSpacing:null,yTickSpacing:null}),x=()=>{const i=Object.keys(r);for(let e=0;e<i.length;e++)void 0===u[i[e]]&&(u[i[e]]=r[i[e]]);u.axisOrigin={x:n.value.originPosition.left,y:l.value.height-n.value.originPosition.bottom},u.axisTop=n.value.axisMargin,u.axisRight=l.value.width-n.value.axisMargin,u.axisWidth=u.axisRight-u.axisOrigin.x,u.axisHeight=u.axisOrigin.y-u.axisTop,u.yAxisTicksNum=n.value.yAxisRange.max-n.value.yAxisRange.min,u.xAxisTicksNum=n.value.xAxisRange.max-n.value.xAxisRange.min,u.xTickSpacing=u.axisWidth/u.xAxisTicksNum,u.yTickSpacing=u.axisHeight/u.yAxisTicksNum};return x(),s(l.value,(()=>{x()})),{diagramId:a,calAxisConfig:u}},render(){const{diagramId:i,calAxisConfig:e,view:a}=this;return l("div",{class:"devui-quadrant-diagram",id:i},[l(C,{diagramId:i,axisConfigs:e,view:a},null)])}});L.install=function(i){i.component(L.name,L)};var B={title:"QuadrantDiagram 象限图",category:"数据展示",status:"10%",install(i){i.use(L)}};export{L as QuadrantDiagram,B as default};
+import { defineComponent, toRefs, ref, reactive, onMounted, watch, createVNode } from "vue";
+const DEFAULT_AXIS_CONFIGS = {
+  tickWidth: 10,
+  spaceBetweenLabelsAxis: 20,
+  xAxisLabel: "\u7D27\u6025\u5EA6",
+  yAxisLabel: "\u91CD\u8981\u5EA6",
+  xAxisRange: {
+    min: 0,
+    max: 100,
+    step: 10
+  },
+  yAxisRange: {
+    min: 0,
+    max: 50,
+    step: 5
+  },
+  originPosition: {
+    left: 30,
+    bottom: 30
+  },
+  axisMargin: 35,
+  xWeight: 1,
+  yWeight: 1
+};
+const DEFAULT_VIEW_CONFIGS = {
+  height: 900,
+  width: 950
+};
+const AXIS_TITLE_SPACE = 15;
+const quadrantDiagramProps = {
+  diagramId: {
+    type: String,
+    default: "1"
+  },
+  axisConfigs: {
+    type: Object,
+    default: DEFAULT_AXIS_CONFIGS
+  },
+  view: {
+    type: Object,
+    default: DEFAULT_VIEW_CONFIGS
+  }
+};
+const quadrantDiagramAxisProps = {
+  diagramId: {
+    type: String
+  },
+  axisConfigs: {
+    type: Object
+  },
+  view: {
+    type: Object
+  }
+};
+var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
+var freeGlobal$1 = freeGlobal;
+var freeSelf = typeof self == "object" && self && self.Object === Object && self;
+var root = freeGlobal$1 || freeSelf || Function("return this")();
+var root$1 = root;
+var Symbol$1 = root$1.Symbol;
+var Symbol$2 = Symbol$1;
+var objectProto$1 = Object.prototype;
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+var nativeObjectToString$1 = objectProto$1.toString;
+var symToStringTag$1 = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
+  try {
+    value[symToStringTag$1] = void 0;
+    var unmasked = true;
+  } catch (e) {
+  }
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+var objectProto = Object.prototype;
+var nativeObjectToString = objectProto.toString;
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+var nullTag = "[object Null]", undefinedTag = "[object Undefined]";
+var symToStringTag = Symbol$2 ? Symbol$2.toStringTag : void 0;
+function baseGetTag(value) {
+  if (value == null) {
+    return value === void 0 ? undefinedTag : nullTag;
+  }
+  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
+}
+function isObjectLike(value) {
+  return value != null && typeof value == "object";
+}
+var symbolTag = "[object Symbol]";
+function isSymbol(value) {
+  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+}
+var reWhitespace = /\s/;
+function trimmedEndIndex(string) {
+  var index2 = string.length;
+  while (index2-- && reWhitespace.test(string.charAt(index2))) {
+  }
+  return index2;
+}
+var reTrimStart = /^\s+/;
+function baseTrim(string) {
+  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
+}
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == "object" || type == "function");
+}
+var NAN = 0 / 0;
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+var reIsBinary = /^0b[01]+$/i;
+var reIsOctal = /^0o[0-7]+$/i;
+var freeParseInt = parseInt;
+function toNumber(value) {
+  if (typeof value == "number") {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject(value)) {
+    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
+    value = isObject(other) ? other + "" : other;
+  }
+  if (typeof value != "string") {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+var now = function() {
+  return root$1.Date.now();
+};
+var now$1 = now;
+var FUNC_ERROR_TEXT = "Expected a function";
+var nativeMax = Math.max, nativeMin = Math.min;
+function debounce(func, wait, options) {
+  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject(options)) {
+    leading = !!options.leading;
+    maxing = "maxWait" in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  function invokeFunc(time) {
+    var args = lastArgs, thisArg = lastThis;
+    lastArgs = lastThis = void 0;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+  function leadingEdge(time) {
+    lastInvokeTime = time;
+    timerId = setTimeout(timerExpired, wait);
+    return leading ? invokeFunc(time) : result;
+  }
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
+    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+  function trailingEdge(time) {
+    timerId = void 0;
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = void 0;
+    return result;
+  }
+  function cancel() {
+    if (timerId !== void 0) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = void 0;
+  }
+  function flush() {
+    return timerId === void 0 ? result : trailingEdge(now$1());
+  }
+  function debounced() {
+    var time = now$1(), isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+    if (isInvoking) {
+      if (timerId === void 0) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === void 0) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+var index$1 = "";
+var DQuadrantDiagramAxis = defineComponent({
+  name: "DQuadrantDiagramAxis",
+  props: quadrantDiagramAxisProps,
+  setup(props) {
+    const {
+      diagramId,
+      view,
+      axisConfigs
+    } = toRefs(props);
+    const AXIS_COLOR = ref("#0000ff");
+    const AXIS_LABEL_COLOR = ref("#ff0000");
+    const quadrantAxis = ref();
+    const context = ref();
+    const axisInnerAttr = reactive({
+      axisOrigin: {
+        x: 0,
+        y: 0
+      },
+      axisTop: 0,
+      axisRight: 0,
+      axisWidth: 0,
+      axisHeight: 0,
+      yAxisTicksNum: 0,
+      xAxisTicksNum: 0,
+      xTickSpacing: 0,
+      yTickSpacing: 0
+    });
+    const axisConfigsVal = axisConfigs.value;
+    onMounted(() => {
+      resetAxis();
+    });
+    watch(view.value, () => {
+      resetAxis();
+    });
+    const resetAxis = debounce(() => {
+      initAxisData();
+      setAxisData();
+      drawAxis();
+      drawAxisLabels();
+    }, 200);
+    const initAxisData = () => {
+      quadrantAxis.value = document.querySelector("#devui-quadrant-axis-" + diagramId.value);
+    };
+    const setAxisData = () => {
+      context.value = quadrantAxis.value.getContext("2d");
+      axisInnerAttr.axisOrigin = axisConfigsVal.axisOrigin;
+      axisInnerAttr.axisTop = axisConfigsVal.axisTop;
+      axisInnerAttr.axisRight = axisConfigsVal.axisRight;
+      axisInnerAttr.axisWidth = axisConfigsVal.axisWidth;
+      axisInnerAttr.axisHeight = axisConfigsVal.axisHeight;
+      axisInnerAttr.yAxisTicksNum = axisConfigsVal.yAxisTicksNum;
+      axisInnerAttr.xAxisTicksNum = axisConfigsVal.xAxisTicksNum;
+      axisInnerAttr.xTickSpacing = axisConfigsVal.xTickSpacing;
+      axisInnerAttr.yTickSpacing = axisConfigsVal.yTickSpacing;
+    };
+    const drawAxis = () => {
+      context.value.save();
+      context.value.fillStyle = AXIS_COLOR.value;
+      context.value.strokeStyle = AXIS_COLOR.value;
+      drawXAxis();
+      drawYAxis();
+      context.value.lineWidth = 0.5;
+      drawXAxisTicks();
+      drawYAxisTicks();
+      context.value.restore();
+    };
+    const drawYAxis = () => {
+      context.value.beginPath();
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
+      context.value.lineTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
+      context.value.stroke();
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
+      context.value.lineTo(axisInnerAttr.axisOrigin.x + 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
+      context.value.lineTo(axisInnerAttr.axisOrigin.x - 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
+      context.value.fill();
+    };
+    const drawXAxis = () => {
+      context.value.beginPath();
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y);
+      context.value.stroke();
+      context.value.moveTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin, axisInnerAttr.axisOrigin.y);
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y + 5);
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y - 5);
+      context.value.fill();
+    };
+    const drawXAxisTicks = () => {
+      let deltaY;
+      for (let i = 1; i < axisInnerAttr.xAxisTicksNum; i++) {
+        context.value.beginPath();
+        if (i % axisConfigsVal.xAxisRange.step === 0) {
+          deltaY = axisConfigsVal.tickWidth;
+        } else {
+          deltaY = axisConfigsVal.tickWidth / 2;
+        }
+        context.value.moveTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing, axisInnerAttr.axisOrigin.y - deltaY);
+        context.value.lineTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing, axisInnerAttr.axisOrigin.y + deltaY);
+        context.value.stroke();
+      }
+    };
+    const drawYAxisTicks = () => {
+      let deltaX;
+      for (let i = 1; i < axisInnerAttr.yAxisTicksNum; i++) {
+        context.value.beginPath();
+        if (i % axisConfigsVal.yAxisRange.step === 0) {
+          deltaX = axisConfigsVal.tickWidth;
+        } else {
+          deltaX = axisConfigsVal.tickWidth / 2;
+        }
+        context.value.moveTo(axisInnerAttr.axisOrigin.x - deltaX, axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+        context.value.lineTo(axisInnerAttr.axisOrigin.x + deltaX, axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+        context.value.stroke();
+      }
+    };
+    const drawAxisLabels = () => {
+      context.value.save();
+      context.value.fillStyle = AXIS_LABEL_COLOR.value;
+      drawXTicksLabels();
+      drawYTicksLabels();
+      context.value.restore();
+      drawAxisTitle();
+    };
+    const drawXTicksLabels = () => {
+      context.value.textAlign = "center";
+      context.value.textBaseline = "top";
+      for (let i = 0; i <= axisInnerAttr.xAxisTicksNum; i++) {
+        if (i % axisConfigsVal.xAxisRange.step === 0) {
+          context.value.fillText(i, axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing, axisInnerAttr.axisOrigin.y + axisConfigsVal.spaceBetweenLabelsAxis);
+        }
+      }
+    };
+    const drawYTicksLabels = () => {
+      context.value.textAlign = "center";
+      context.value.textBaseline = "middle";
+      for (let i = 0; i <= axisInnerAttr.yAxisTicksNum; i++) {
+        if (i % axisConfigsVal.yAxisRange.step === 0) {
+          context.value.fillText(i, axisInnerAttr.axisOrigin.x - axisConfigsVal.spaceBetweenLabelsAxis, axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+        }
+      }
+    };
+    const drawAxisTitle = () => {
+      context.value.font = "12px Microsoft YaHei";
+      context.value.textAlign = "left";
+      context.value.fillStyle = AXIS_LABEL_COLOR.value;
+      const xLabelWidth = context.value.measureText(axisConfigsVal.xAxisLabel).width;
+      rotateLabel(axisConfigsVal.xAxisLabel, axisInnerAttr.axisRight + axisConfigsVal.axisMargin / 2, axisInnerAttr.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE);
+      context.value.fillText(axisConfigsVal.yAxisLabel, axisInnerAttr.axisOrigin.x + AXIS_TITLE_SPACE, axisInnerAttr.axisTop - axisConfigsVal.axisMargin / 2);
+    };
+    const rotateLabel = (name, x, y) => {
+      for (let i = 0; i < name.length; i++) {
+        const str = name.slice(i, i + 1).toString();
+        if (str.match(/[A-Za-z0-9]/)) {
+          context.value.save();
+          context.value.translate(x, y);
+          context.value.rotate(Math.PI / 180 * 90);
+          context.value.textBaseline = "bottom";
+          context.value.fillText(str, 0, 0);
+          context.value.restore();
+          y += context.value.measureText(str).width;
+        } else if (str.match(/[\u4E00-\u9FA5]/)) {
+          context.value.save();
+          context.value.textBaseline = "top";
+          context.value.fillText(str, x, y);
+          context.value.restore();
+          y += context.value.measureText(str).width;
+        }
+      }
+    };
+  },
+  render() {
+    const {
+      diagramId,
+      view
+    } = this;
+    return createVNode("div", null, [createVNode("canvas", {
+      "id": "devui-quadrant-axis-" + diagramId,
+      "height": view.height,
+      "width": view.width
+    }, null)]);
+  }
+});
+var QuadrantDiagram = defineComponent({
+  name: "DQuadrantDiagram",
+  props: quadrantDiagramProps,
+  setup(props) {
+    const {
+      diagramId,
+      axisConfigs,
+      view
+    } = toRefs(props);
+    const calAxisConfig = reactive({
+      axisOrigin: {
+        x: null,
+        y: null
+      },
+      axisTop: null,
+      axisRight: null,
+      axisWidth: null,
+      axisHeight: null,
+      yAxisTicksNum: null,
+      xAxisTicksNum: null,
+      xTickSpacing: null,
+      yTickSpacing: null
+    });
+    const initAxisData = () => {
+      const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS);
+      for (let i = 0; i < axisConfigKeys.length; i++) {
+        if (calAxisConfig[axisConfigKeys[i]] === void 0) {
+          calAxisConfig[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]];
+        }
+      }
+      calAxisConfig.axisOrigin = {
+        x: axisConfigs.value.originPosition.left,
+        y: view.value.height - axisConfigs.value.originPosition.bottom
+      };
+      calAxisConfig.axisTop = axisConfigs.value.axisMargin;
+      calAxisConfig.axisRight = view.value.width - axisConfigs.value.axisMargin;
+      calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x;
+      calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop;
+      calAxisConfig.yAxisTicksNum = axisConfigs.value.yAxisRange.max - axisConfigs.value.yAxisRange.min;
+      calAxisConfig.xAxisTicksNum = axisConfigs.value.xAxisRange.max - axisConfigs.value.xAxisRange.min;
+      calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum;
+      calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum;
+    };
+    initAxisData();
+    watch(view.value, () => {
+      initAxisData();
+    });
+    return {
+      diagramId,
+      calAxisConfig
+    };
+  },
+  render() {
+    const {
+      diagramId,
+      calAxisConfig,
+      view
+    } = this;
+    return createVNode("div", {
+      "class": "devui-quadrant-diagram",
+      "id": diagramId
+    }, [createVNode(DQuadrantDiagramAxis, {
+      "diagramId": diagramId,
+      "axisConfigs": calAxisConfig,
+      "view": view
+    }, null)]);
+  }
+});
+QuadrantDiagram.install = function(app) {
+  app.component(QuadrantDiagram.name, QuadrantDiagram);
+};
+var index = {
+  title: "QuadrantDiagram \u8C61\u9650\u56FE",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "10%",
+  install(app) {
+    app.use(QuadrantDiagram);
+  }
+};
+export { QuadrantDiagram, index as default };