@vtj/ui 0.0.5

package/README.md

@@ -0,0 +1,4 @@
+# Vue3 通用业务组件库
+
+Vue 3 + TypeScript + Vite
+

package/lib/cdn/index.cjs.js

@@ -0,0 +1 @@
+"use strict";var F=Object.defineProperty,g=Object.defineProperties;var x=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var C=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var k=(e,t,o)=>t in e?F(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,d=(e,t)=>{for(var o in t||(t={}))C.call(t,o)&&k(e,o,t[o]);if(h)for(var o of h(t))B.call(t,o)&&k(e,o,t[o]);return e},y=(e,t)=>g(e,x(t));var p=(e,t,o)=>new Promise((n,u)=>{var s=i=>{try{c(o.next(i))}catch(l){u(l)}},r=i=>{try{c(o.throw(i))}catch(l){u(l)}},c=i=>i.done?n(i.value):Promise.resolve(i.value).then(s,r);c((o=o.apply(e,t)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S={class:"x-test-suit"},E=Vue.createElementVNode("div",{class:"x-test-suit__header"},"XTestSuit",-1),w={class:"x-test-suit__body"},b={class:"x-test-suit_props"},X={class:"x-test-suit_slots"},A=Vue.createTextVNode(" Default Slot"),N={key:0},V=Vue.defineComponent({__name:"TestSuit",props:{p1:null,p2:null,p3:{type:Boolean},p4:null},emits:["click"],setup(e,{emit:t}){const o=e,n=Vue.computed(()=>[{name:"p1",value:o.p1},{name:"p2",value:o.p2},{name:"p3",value:o.p3},{name:"p4",value:o.p4}]),u=()=>{t("click")};return(s,r)=>(Vue.openBlock(),Vue.createElementBlock("div",S,[E,Vue.createElementVNode("div",w,[Vue.createElementVNode("div",b,[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(Vue.unref(n),c=>(Vue.openBlock(),Vue.createElementBlock("div",null,Vue.toDisplayString(c.name)+": "+Vue.toDisplayString(JSON.stringify(c.value)),1))),256))]),Vue.createElementVNode("div",{class:"x-test-suit_events"},[Vue.createElementVNode("button",{onClick:u},"Tigger Click Event")]),Vue.createElementVNode("div",X,[Vue.createElementVNode("div",null,[Vue.renderSlot(s.$slots,"default",{},()=>[A])]),s.$slots.footer?(Vue.openBlock(),Vue.createElementBlock("div",N,[Vue.renderSlot(s.$slots,"footer")])):Vue.createCommentVNode("",!0)])])]))}});V.install=function(e){e.component("XTestSuit",V)};function T(e,t={}){const o=Vue.ref(!1);let n=null;const u=c=>p(this,null,function*(){n=echarts.init(e.value);const i=c||VtjUtils.merge({},t.option,t.optionFactory?yield t.optionFactory(t.option):{});n.setOption(i)}),s=()=>{n==null||n.dispose(),u()},r=VtjUtils.debounce(()=>{if(!o.value){o.value=!0;return}n==null||n.resize()},100);return Vue.onMounted(u),Vue.watch(()=>[t.option,t.optionFactory],s),VueUse.useResizeObserver(e,r),{getChart:()=>n,echarts,reset:s,resize:r}}const a=Vue.defineComponent({__name:"Chart",props:{width:{default:"100%"},height:{default:"400px"},option:{default:()=>({})},optionFactory:null},setup(e,{expose:t}){const o=e,n=Vue.ref(),u=Vue.computed(()=>({width:o.width,height:o.height})),{getChart:s,reset:r,resize:c,echarts:i}=T(n,o);return t({getChart:s,echarts:i,reset:r,resize:c}),(l,$)=>(Vue.openBlock(),Vue.createElementBlock("div",{ref_key:"container",ref:n,style:Vue.normalizeStyle(Vue.unref(u))},"Chart",4))}});a.install=function(e){e.component("XChart",a)};function v(e,t){const o=u=>p(this,null,function*(){const s=y(d({},u),{title:{},xAxis:{},yAxis:{}});e.category==="x"?(s.xAxis={type:"category"},s.yAxis={}):(s.xAxis={},s.yAxis={type:"category"}),s.dataset={dimensions:e.dimensions,source:typeof e.source=="function"?yield e.source():e.source};const r=(e.dimensions||[]).length;if(r>1){const c=new Array(r-1);c.fill({type:t}),s.series=c}return VtjUtils.merge(s,e.optionFactory?yield e.optionFactory(s):{})}),n=Vue.ref(Symbol("key"));return Vue.watch(()=>[e.category,e.dimensions,e.source,e.optionFactory],()=>{n.value=Symbol("key")}),{optionFactory:o,key:n}}const m=Vue.defineComponent({__name:"Bar",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,{optionFactory:o,key:n}=v(t,"bar");return(u,s)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(a),{key:Vue.unref(n),optionFactory:Vue.unref(o)},null,8,["optionFactory"]))}});m.install=function(e){e.component("XChartBar",m)};const f=Vue.defineComponent({__name:"Line",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,{optionFactory:o,key:n}=v(t,"line");return(u,s)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(a),{key:Vue.unref(n),optionFactory:Vue.unref(o)},null,8,["optionFactory"]))}});f.install=function(e){e.component("XChartLine",f)};const _=Vue.defineComponent({__name:"Pie",props:{dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,o=Vue.ref(Symbol("key")),n=u=>p(this,null,function*(){const s=y(d({},u),{dataset:{dimensions:t.dimensions,source:typeof t.source=="function"?yield t.source():t.source},series:[{type:"pie"}]});return VtjUtils.merge(s,t.optionFactory?yield t.optionFactory(s):{})});return Vue.watch(()=>[t.dimensions,t.source,t.optionFactory],()=>{o.value=Symbol("key")}),(u,s)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(a),{key:o.value,optionFactory:n}))}});_.install=function(e){e.component("XChartPie",_)};exports.XChart=a;exports.XChartBar=m;exports.XChartLine=f;exports.XChartPie=_;exports.XTestSuit=V;

package/lib/cdn/index.es.js

@@ -0,0 +1,242 @@
+var v = Object.defineProperty, x = Object.defineProperties;
+var g = Object.getOwnPropertyDescriptors;
+var V = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
+var m = (e, t, n) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, y = (e, t) => {
+  for (var n in t || (t = {}))
+    C.call(t, n) && m(e, n, t[n]);
+  if (V)
+    for (var n of V(t))
+      B.call(t, n) && m(e, n, t[n]);
+  return e;
+}, d = (e, t) => x(e, g(t));
+var p = (e, t, n) => new Promise((o, u) => {
+  var s = (i) => {
+    try {
+      c(n.next(i));
+    } catch (l) {
+      u(l);
+    }
+  }, r = (i) => {
+    try {
+      c(n.throw(i));
+    } catch (l) {
+      u(l);
+    }
+  }, c = (i) => i.done ? o(i.value) : Promise.resolve(i.value).then(s, r);
+  c((n = n.apply(e, t)).next());
+});
+const S = { class: "x-test-suit" }, E = /* @__PURE__ */ Vue.createElementVNode("div", { class: "x-test-suit__header" }, "XTestSuit", -1), w = { class: "x-test-suit__body" }, X = { class: "x-test-suit_props" }, A = { class: "x-test-suit_slots" }, N = /* @__PURE__ */ Vue.createTextVNode(" Default Slot"), b = { key: 0 }, f = /* @__PURE__ */ Vue.defineComponent({
+  __name: "TestSuit",
+  props: {
+    p1: null,
+    p2: null,
+    p3: { type: Boolean },
+    p4: null
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const n = e, o = Vue.computed(() => [
+      { name: "p1", value: n.p1 },
+      { name: "p2", value: n.p2 },
+      { name: "p3", value: n.p3 },
+      { name: "p4", value: n.p4 }
+    ]), u = () => {
+      t("click");
+    };
+    return (s, r) => (Vue.openBlock(), Vue.createElementBlock("div", S, [
+      E,
+      Vue.createElementVNode("div", w, [
+        Vue.createElementVNode("div", X, [
+          (Vue.openBlock(!0), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(o), (c) => (Vue.openBlock(), Vue.createElementBlock("div", null, Vue.toDisplayString(c.name) + ": " + Vue.toDisplayString(JSON.stringify(c.value)), 1))), 256))
+        ]),
+        Vue.createElementVNode("div", { class: "x-test-suit_events" }, [
+          Vue.createElementVNode("button", { onClick: u }, "Tigger Click Event")
+        ]),
+        Vue.createElementVNode("div", A, [
+          Vue.createElementVNode("div", null, [
+            Vue.renderSlot(s.$slots, "default", {}, () => [
+              N
+            ])
+          ]),
+          s.$slots.footer ? (Vue.openBlock(), Vue.createElementBlock("div", b, [
+            Vue.renderSlot(s.$slots, "footer")
+          ])) : Vue.createCommentVNode("", !0)
+        ])
+      ])
+    ]));
+  }
+});
+f.install = function(e) {
+  e.component("XTestSuit", f);
+};
+function $(e, t = {}) {
+  const n = Vue.ref(!1);
+  let o = null;
+  const u = (c) => p(this, null, function* () {
+    o = echarts.init(e.value);
+    const i = c || VtjUtils.merge(
+      {},
+      t.option,
+      t.optionFactory ? yield t.optionFactory(t.option) : {}
+    );
+    o.setOption(i);
+  }), s = () => {
+    o == null || o.dispose(), u();
+  }, r = VtjUtils.debounce(() => {
+    if (!n.value) {
+      n.value = !0;
+      return;
+    }
+    o == null || o.resize();
+  }, 100);
+  return Vue.onMounted(u), Vue.watch(() => [t.option, t.optionFactory], s), VueUse.useResizeObserver(e, r), {
+    getChart: () => o,
+    echarts,
+    reset: s,
+    resize: r
+  };
+}
+const a = /* @__PURE__ */ Vue.defineComponent({
+  __name: "Chart",
+  props: {
+    width: { default: "100%" },
+    height: { default: "400px" },
+    option: { default: () => ({}) },
+    optionFactory: null
+  },
+  setup(e, { expose: t }) {
+    const n = e, o = Vue.ref(), u = Vue.computed(() => ({
+      width: n.width,
+      height: n.height
+    })), { getChart: s, reset: r, resize: c, echarts: i } = $(o, n);
+    return t({
+      getChart: s,
+      echarts: i,
+      reset: r,
+      resize: c
+    }), (l, T) => (Vue.openBlock(), Vue.createElementBlock("div", {
+      ref_key: "container",
+      ref: o,
+      style: Vue.normalizeStyle(Vue.unref(u))
+    }, "Chart", 4));
+  }
+});
+a.install = function(e) {
+  e.component("XChart", a);
+};
+function F(e, t) {
+  const n = (u) => p(this, null, function* () {
+    const s = d(y({}, u), {
+      title: {},
+      xAxis: {},
+      yAxis: {}
+    });
+    e.category === "x" ? (s.xAxis = { type: "category" }, s.yAxis = {}) : (s.xAxis = {}, s.yAxis = { type: "category" }), s.dataset = {
+      dimensions: e.dimensions,
+      source: typeof e.source == "function" ? yield e.source() : e.source
+    };
+    const r = (e.dimensions || []).length;
+    if (r > 1) {
+      const c = new Array(r - 1);
+      c.fill({ type: t }), s.series = c;
+    }
+    return VtjUtils.merge(
+      s,
+      e.optionFactory ? yield e.optionFactory(s) : {}
+    );
+  }), o = Vue.ref(Symbol("key"));
+  return Vue.watch(
+    () => [e.category, e.dimensions, e.source, e.optionFactory],
+    () => {
+      o.value = Symbol("key");
+    }
+  ), {
+    optionFactory: n,
+    key: o
+  };
+}
+const _ = /* @__PURE__ */ Vue.defineComponent({
+  __name: "Bar",
+  props: {
+    category: { default: "x" },
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(e) {
+    const t = e, { optionFactory: n, key: o } = F(t, "bar");
+    return (u, s) => (Vue.openBlock(), Vue.createBlock(Vue.unref(a), {
+      key: Vue.unref(o),
+      optionFactory: Vue.unref(n)
+    }, null, 8, ["optionFactory"]));
+  }
+});
+_.install = function(e) {
+  e.component("XChartBar", _);
+};
+const h = /* @__PURE__ */ Vue.defineComponent({
+  __name: "Line",
+  props: {
+    category: { default: "x" },
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(e) {
+    const t = e, { optionFactory: n, key: o } = F(t, "line");
+    return (u, s) => (Vue.openBlock(), Vue.createBlock(Vue.unref(a), {
+      key: Vue.unref(o),
+      optionFactory: Vue.unref(n)
+    }, null, 8, ["optionFactory"]));
+  }
+});
+h.install = function(e) {
+  e.component("XChartLine", h);
+};
+const k = /* @__PURE__ */ Vue.defineComponent({
+  __name: "Pie",
+  props: {
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(e) {
+    const t = e, n = Vue.ref(Symbol("key")), o = (u) => p(this, null, function* () {
+      const s = d(y({}, u), {
+        dataset: {
+          dimensions: t.dimensions,
+          source: typeof t.source == "function" ? yield t.source() : t.source
+        },
+        series: [
+          {
+            type: "pie"
+          }
+        ]
+      });
+      return VtjUtils.merge(
+        s,
+        t.optionFactory ? yield t.optionFactory(s) : {}
+      );
+    });
+    return Vue.watch(
+      () => [t.dimensions, t.source, t.optionFactory],
+      () => {
+        n.value = Symbol("key");
+      }
+    ), (u, s) => (Vue.openBlock(), Vue.createBlock(Vue.unref(a), {
+      key: n.value,
+      optionFactory: o
+    }));
+  }
+});
+k.install = function(e) {
+  e.component("XChartPie", k);
+};
+export {
+  a as XChart,
+  _ as XChartBar,
+  h as XChartLine,
+  k as XChartPie,
+  f as XTestSuit
+};

package/lib/cdn/index.umd.js

@@ -0,0 +1 @@
+(function(u,s){typeof exports=="object"&&typeof module!="undefined"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(u=typeof globalThis!="undefined"?globalThis:u||self,s(u.VtjUI={}))})(this,function(u){"use strict";var X=Object.defineProperty,A=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var E=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var b=(u,s,c)=>s in u?X(u,s,{enumerable:!0,configurable:!0,writable:!0,value:c}):u[s]=c,x=(u,s)=>{for(var c in s||(s={}))T.call(s,c)&&b(u,c,s[c]);if(E)for(var c of E(s))j.call(s,c)&&b(u,c,s[c]);return u},B=(u,s)=>A(u,N(s));var m=(u,s,c)=>new Promise((_,f)=>{var h=a=>{try{V(c.next(a))}catch(p){f(p)}},k=a=>{try{V(c.throw(a))}catch(p){f(p)}},V=a=>a.done?_(a.value):Promise.resolve(a.value).then(h,k);V((c=c.apply(u,s)).next())});const s="",c={class:"x-test-suit"},_=Vue.createElementVNode("div",{class:"x-test-suit__header"},"XTestSuit",-1),f={class:"x-test-suit__body"},h={class:"x-test-suit_props"},k={class:"x-test-suit_slots"},V=Vue.createTextVNode(" Default Slot"),a={key:0},p=Vue.defineComponent({__name:"TestSuit",props:{p1:null,p2:null,p3:{type:Boolean},p4:null},emits:["click"],setup(e,{emit:t}){const i=e,n=Vue.computed(()=>[{name:"p1",value:i.p1},{name:"p2",value:i.p2},{name:"p3",value:i.p3},{name:"p4",value:i.p4}]),r=()=>{t("click")};return(o,d)=>(Vue.openBlock(),Vue.createElementBlock("div",c,[_,Vue.createElementVNode("div",f,[Vue.createElementVNode("div",h,[(Vue.openBlock(!0),Vue.createElementBlock(Vue.Fragment,null,Vue.renderList(Vue.unref(n),l=>(Vue.openBlock(),Vue.createElementBlock("div",null,Vue.toDisplayString(l.name)+": "+Vue.toDisplayString(JSON.stringify(l.value)),1))),256))]),Vue.createElementVNode("div",{class:"x-test-suit_events"},[Vue.createElementVNode("button",{onClick:r},"Tigger Click Event")]),Vue.createElementVNode("div",k,[Vue.createElementVNode("div",null,[Vue.renderSlot(o.$slots,"default",{},()=>[V])]),o.$slots.footer?(Vue.openBlock(),Vue.createElementBlock("div",a,[Vue.renderSlot(o.$slots,"footer")])):Vue.createCommentVNode("",!0)])])]))}});p.install=function(e){e.component("XTestSuit",p)};function w(e,t={}){const i=Vue.ref(!1);let n=null;const r=l=>m(this,null,function*(){n=echarts.init(e.value);const C=l||VtjUtils.merge({},t.option,t.optionFactory?yield t.optionFactory(t.option):{});n.setOption(C)}),o=()=>{n==null||n.dispose(),r()},d=VtjUtils.debounce(()=>{if(!i.value){i.value=!0;return}n==null||n.resize()},100);return Vue.onMounted(r),Vue.watch(()=>[t.option,t.optionFactory],o),VueUse.useResizeObserver(e,d),{getChart:()=>n,echarts,reset:o,resize:d}}const y=Vue.defineComponent({__name:"Chart",props:{width:{default:"100%"},height:{default:"400px"},option:{default:()=>({})},optionFactory:null},setup(e,{expose:t}){const i=e,n=Vue.ref(),r=Vue.computed(()=>({width:i.width,height:i.height})),{getChart:o,reset:d,resize:l,echarts:C}=w(n,i);return t({getChart:o,echarts:C,reset:d,resize:l}),($,U)=>(Vue.openBlock(),Vue.createElementBlock("div",{ref_key:"container",ref:n,style:Vue.normalizeStyle(Vue.unref(r))},"Chart",4))}});y.install=function(e){e.component("XChart",y)};function S(e,t){const i=r=>m(this,null,function*(){const o=B(x({},r),{title:{},xAxis:{},yAxis:{}});e.category==="x"?(o.xAxis={type:"category"},o.yAxis={}):(o.xAxis={},o.yAxis={type:"category"}),o.dataset={dimensions:e.dimensions,source:typeof e.source=="function"?yield e.source():e.source};const d=(e.dimensions||[]).length;if(d>1){const l=new Array(d-1);l.fill({type:t}),o.series=l}return VtjUtils.merge(o,e.optionFactory?yield e.optionFactory(o):{})}),n=Vue.ref(Symbol("key"));return Vue.watch(()=>[e.category,e.dimensions,e.source,e.optionFactory],()=>{n.value=Symbol("key")}),{optionFactory:i,key:n}}const v=Vue.defineComponent({__name:"Bar",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,{optionFactory:i,key:n}=S(t,"bar");return(r,o)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(y),{key:Vue.unref(n),optionFactory:Vue.unref(i)},null,8,["optionFactory"]))}});v.install=function(e){e.component("XChartBar",v)};const F=Vue.defineComponent({__name:"Line",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,{optionFactory:i,key:n}=S(t,"line");return(r,o)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(y),{key:Vue.unref(n),optionFactory:Vue.unref(i)},null,8,["optionFactory"]))}});F.install=function(e){e.component("XChartLine",F)};const g=Vue.defineComponent({__name:"Pie",props:{dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const t=e,i=Vue.ref(Symbol("key")),n=r=>m(this,null,function*(){const o=B(x({},r),{dataset:{dimensions:t.dimensions,source:typeof t.source=="function"?yield t.source():t.source},series:[{type:"pie"}]});return VtjUtils.merge(o,t.optionFactory?yield t.optionFactory(o):{})});return Vue.watch(()=>[t.dimensions,t.source,t.optionFactory],()=>{i.value=Symbol("key")}),(r,o)=>(Vue.openBlock(),Vue.createBlock(Vue.unref(y),{key:i.value,optionFactory:n}))}});g.install=function(e){e.component("XChartPie",g)},u.XChart=y,u.XChartBar=v,u.XChartLine=F,u.XChartPie=g,u.XTestSuit=p,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/cdn/style.css

@@ -0,0 +1 @@
+.x-test-suit{width:100%;height:100%;border:1px solid #ccc}.x-test-suit__header{padding:5px 10px;background-color:#efefef}.x-test-suit__body{padding:10px}

package/lib/index.cjs.js

@@ -0,0 +1 @@
+"use strict";var B=Object.defineProperty,S=Object.defineProperties;var b=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable;var F=(e,n,o)=>n in e?B(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,f=(e,n)=>{for(var o in n||(n={}))E.call(n,o)&&F(e,o,n[o]);if(g)for(var o of g(n))w.call(n,o)&&F(e,o,n[o]);return e},m=(e,n)=>S(e,b(n));var d=(e,n,o)=>new Promise((r,s)=>{var c=a=>{try{i(o.next(a))}catch(p){s(p)}},u=a=>{try{i(o.throw(a))}catch(p){s(p)}},i=a=>a.done?r(a.value):Promise.resolve(a.value).then(c,u);i((o=o.apply(e,n)).next())});Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),N=require("echarts"),X=require("@vueuse/core"),y=require("@vtj/utils");function A(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const r=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(n,o,r.get?r:{enumerable:!0,get:()=>e[o]})}}return n.default=e,Object.freeze(n)}const x=A(N);const O={class:"x-test-suit"},V=t.createElementVNode("div",{class:"x-test-suit__header"},"XTestSuit",-1),T={class:"x-test-suit__body"},$={class:"x-test-suit_props"},j={class:"x-test-suit_slots"},z=t.createTextVNode(" Default Slot"),P={key:0},_=t.defineComponent({__name:"TestSuit",props:{p1:null,p2:null,p3:{type:Boolean},p4:null},emits:["click"],setup(e,{emit:n}){const o=e,r=t.computed(()=>[{name:"p1",value:o.p1},{name:"p2",value:o.p2},{name:"p3",value:o.p3},{name:"p4",value:o.p4}]),s=()=>{n("click")};return(c,u)=>(t.openBlock(),t.createElementBlock("div",O,[V,t.createElementVNode("div",T,[t.createElementVNode("div",$,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(r),i=>(t.openBlock(),t.createElementBlock("div",null,t.toDisplayString(i.name)+": "+t.toDisplayString(JSON.stringify(i.value)),1))),256))]),t.createElementVNode("div",{class:"x-test-suit_events"},[t.createElementVNode("button",{onClick:s},"Tigger Click Event")]),t.createElementVNode("div",j,[t.createElementVNode("div",null,[t.renderSlot(c.$slots,"default",{},()=>[z])]),c.$slots.footer?(t.openBlock(),t.createElementBlock("div",P,[t.renderSlot(c.$slots,"footer")])):t.createCommentVNode("",!0)])])]))}});_.install=function(e){e.component("XTestSuit",_)};function L(e,n={}){const o=t.ref(!1);let r=null;const s=i=>d(this,null,function*(){r=x.init(e.value);const a=i||y.merge({},n.option,n.optionFactory?yield n.optionFactory(n.option):{});r.setOption(a)}),c=()=>{r==null||r.dispose(),s()},u=y.debounce(()=>{if(!o.value){o.value=!0;return}r==null||r.resize()},100);return t.onMounted(s),t.watch(()=>[n.option,n.optionFactory],c),X.useResizeObserver(e,u),{getChart:()=>r,echarts:x,reset:c,resize:u}}const l=t.defineComponent({__name:"Chart",props:{width:{default:"100%"},height:{default:"400px"},option:{default:()=>({})},optionFactory:null},setup(e,{expose:n}){const o=e,r=t.ref(),s=t.computed(()=>({width:o.width,height:o.height})),{getChart:c,reset:u,resize:i,echarts:a}=L(r,o);return n({getChart:c,echarts:a,reset:u,resize:i}),(p,M)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"container",ref:r,style:t.normalizeStyle(t.unref(s))},"Chart",4))}});l.install=function(e){e.component("XChart",l)};function C(e,n){const o=s=>d(this,null,function*(){const c=m(f({},s),{title:{},xAxis:{},yAxis:{}});e.category==="x"?(c.xAxis={type:"category"},c.yAxis={}):(c.xAxis={},c.yAxis={type:"category"}),c.dataset={dimensions:e.dimensions,source:typeof e.source=="function"?yield e.source():e.source};const u=(e.dimensions||[]).length;if(u>1){const i=new Array(u-1);i.fill({type:n}),c.series=i}return y.merge(c,e.optionFactory?yield e.optionFactory(c):{})}),r=t.ref(Symbol("key"));return t.watch(()=>[e.category,e.dimensions,e.source,e.optionFactory],()=>{r.value=Symbol("key")}),{optionFactory:o,key:r}}const h=t.defineComponent({__name:"Bar",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const n=e,{optionFactory:o,key:r}=C(n,"bar");return(s,c)=>(t.openBlock(),t.createBlock(t.unref(l),{key:t.unref(r),optionFactory:t.unref(o)},null,8,["optionFactory"]))}});h.install=function(e){e.component("XChartBar",h)};const k=t.defineComponent({__name:"Line",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const n=e,{optionFactory:o,key:r}=C(n,"line");return(s,c)=>(t.openBlock(),t.createBlock(t.unref(l),{key:t.unref(r),optionFactory:t.unref(o)},null,8,["optionFactory"]))}});k.install=function(e){e.component("XChartLine",k)};const v=t.defineComponent({__name:"Pie",props:{dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(e){const n=e,o=t.ref(Symbol("key")),r=s=>d(this,null,function*(){const c=m(f({},s),{dataset:{dimensions:n.dimensions,source:typeof n.source=="function"?yield n.source():n.source},series:[{type:"pie"}]});return y.merge(c,n.optionFactory?yield n.optionFactory(c):{})});return t.watch(()=>[n.dimensions,n.source,n.optionFactory],()=>{o.value=Symbol("key")}),(s,c)=>(t.openBlock(),t.createBlock(t.unref(l),{key:o.value,optionFactory:r}))}});v.install=function(e){e.component("XChartPie",v)};exports.XChart=l;exports.XChartBar=h;exports.XChartLine=k;exports.XChartPie=v;exports.XTestSuit=_;

package/lib/index.es.js

@@ -0,0 +1,246 @@
+var E = Object.defineProperty, N = Object.defineProperties;
+var O = Object.getOwnPropertyDescriptors;
+var C = Object.getOwnPropertySymbols;
+var P = Object.prototype.hasOwnProperty, V = Object.prototype.propertyIsEnumerable;
+var S = (t, e, o) => e in t ? E(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, F = (t, e) => {
+  for (var o in e || (e = {}))
+    P.call(e, o) && S(t, o, e[o]);
+  if (C)
+    for (var o of C(e))
+      V.call(e, o) && S(t, o, e[o]);
+  return t;
+}, v = (t, e) => N(t, O(e));
+var f = (t, e, o) => new Promise((n, i) => {
+  var s = (a) => {
+    try {
+      r(o.next(a));
+    } catch (_) {
+      i(_);
+    }
+  }, c = (a) => {
+    try {
+      r(o.throw(a));
+    } catch (_) {
+      i(_);
+    }
+  }, r = (a) => a.done ? n(a.value) : Promise.resolve(a.value).then(s, c);
+  r((o = o.apply(t, e)).next());
+});
+import { defineComponent as m, computed as z, openBlock as l, createElementBlock as p, createElementVNode as y, Fragment as D, renderList as R, unref as u, toDisplayString as X, renderSlot as w, createCommentVNode as J, createTextVNode as M, ref as h, onMounted as j, watch as x, normalizeStyle as q, createBlock as k } from "vue";
+import * as A from "echarts";
+import { useResizeObserver as G } from "@vueuse/core";
+import { debounce as H, merge as g } from "@vtj/utils";
+const I = { class: "x-test-suit" }, K = /* @__PURE__ */ y("div", { class: "x-test-suit__header" }, "XTestSuit", -1), Q = { class: "x-test-suit__body" }, U = { class: "x-test-suit_props" }, W = { class: "x-test-suit_slots" }, Y = /* @__PURE__ */ M(" Default Slot"), Z = { key: 0 }, b = /* @__PURE__ */ m({
+  __name: "TestSuit",
+  props: {
+    p1: null,
+    p2: null,
+    p3: { type: Boolean },
+    p4: null
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const o = t, n = z(() => [
+      { name: "p1", value: o.p1 },
+      { name: "p2", value: o.p2 },
+      { name: "p3", value: o.p3 },
+      { name: "p4", value: o.p4 }
+    ]), i = () => {
+      e("click");
+    };
+    return (s, c) => (l(), p("div", I, [
+      K,
+      y("div", Q, [
+        y("div", U, [
+          (l(!0), p(D, null, R(u(n), (r) => (l(), p("div", null, X(r.name) + ": " + X(JSON.stringify(r.value)), 1))), 256))
+        ]),
+        y("div", { class: "x-test-suit_events" }, [
+          y("button", { onClick: i }, "Tigger Click Event")
+        ]),
+        y("div", W, [
+          y("div", null, [
+            w(s.$slots, "default", {}, () => [
+              Y
+            ])
+          ]),
+          s.$slots.footer ? (l(), p("div", Z, [
+            w(s.$slots, "footer")
+          ])) : J("", !0)
+        ])
+      ])
+    ]));
+  }
+});
+b.install = function(t) {
+  t.component("XTestSuit", b);
+};
+function tt(t, e = {}) {
+  const o = h(!1);
+  let n = null;
+  const i = (r) => f(this, null, function* () {
+    n = A.init(t.value);
+    const a = r || g(
+      {},
+      e.option,
+      e.optionFactory ? yield e.optionFactory(e.option) : {}
+    );
+    n.setOption(a);
+  }), s = () => {
+    n == null || n.dispose(), i();
+  }, c = H(() => {
+    if (!o.value) {
+      o.value = !0;
+      return;
+    }
+    n == null || n.resize();
+  }, 100);
+  return j(i), x(() => [e.option, e.optionFactory], s), G(t, c), {
+    getChart: () => n,
+    echarts: A,
+    reset: s,
+    resize: c
+  };
+}
+const d = /* @__PURE__ */ m({
+  __name: "Chart",
+  props: {
+    width: { default: "100%" },
+    height: { default: "400px" },
+    option: { default: () => ({}) },
+    optionFactory: null
+  },
+  setup(t, { expose: e }) {
+    const o = t, n = h(), i = z(() => ({
+      width: o.width,
+      height: o.height
+    })), { getChart: s, reset: c, resize: r, echarts: a } = tt(n, o);
+    return e({
+      getChart: s,
+      echarts: a,
+      reset: c,
+      resize: r
+    }), (_, et) => (l(), p("div", {
+      ref_key: "container",
+      ref: n,
+      style: q(u(i))
+    }, "Chart", 4));
+  }
+});
+d.install = function(t) {
+  t.component("XChart", d);
+};
+function L(t, e) {
+  const o = (i) => f(this, null, function* () {
+    const s = v(F({}, i), {
+      title: {},
+      xAxis: {},
+      yAxis: {}
+    });
+    t.category === "x" ? (s.xAxis = { type: "category" }, s.yAxis = {}) : (s.xAxis = {}, s.yAxis = { type: "category" }), s.dataset = {
+      dimensions: t.dimensions,
+      source: typeof t.source == "function" ? yield t.source() : t.source
+    };
+    const c = (t.dimensions || []).length;
+    if (c > 1) {
+      const r = new Array(c - 1);
+      r.fill({ type: e }), s.series = r;
+    }
+    return g(
+      s,
+      t.optionFactory ? yield t.optionFactory(s) : {}
+    );
+  }), n = h(Symbol("key"));
+  return x(
+    () => [t.category, t.dimensions, t.source, t.optionFactory],
+    () => {
+      n.value = Symbol("key");
+    }
+  ), {
+    optionFactory: o,
+    key: n
+  };
+}
+const B = /* @__PURE__ */ m({
+  __name: "Bar",
+  props: {
+    category: { default: "x" },
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(t) {
+    const e = t, { optionFactory: o, key: n } = L(e, "bar");
+    return (i, s) => (l(), k(u(d), {
+      key: u(n),
+      optionFactory: u(o)
+    }, null, 8, ["optionFactory"]));
+  }
+});
+B.install = function(t) {
+  t.component("XChartBar", B);
+};
+const $ = /* @__PURE__ */ m({
+  __name: "Line",
+  props: {
+    category: { default: "x" },
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(t) {
+    const e = t, { optionFactory: o, key: n } = L(e, "line");
+    return (i, s) => (l(), k(u(d), {
+      key: u(n),
+      optionFactory: u(o)
+    }, null, 8, ["optionFactory"]));
+  }
+});
+$.install = function(t) {
+  t.component("XChartLine", $);
+};
+const T = /* @__PURE__ */ m({
+  __name: "Pie",
+  props: {
+    dimensions: { default: () => [] },
+    source: { type: [Array, Function], default: () => [] },
+    optionFactory: null
+  },
+  setup(t) {
+    const e = t, o = h(Symbol("key")), n = (i) => f(this, null, function* () {
+      const s = v(F({}, i), {
+        dataset: {
+          dimensions: e.dimensions,
+          source: typeof e.source == "function" ? yield e.source() : e.source
+        },
+        series: [
+          {
+            type: "pie"
+          }
+        ]
+      });
+      return g(
+        s,
+        e.optionFactory ? yield e.optionFactory(s) : {}
+      );
+    });
+    return x(
+      () => [e.dimensions, e.source, e.optionFactory],
+      () => {
+        o.value = Symbol("key");
+      }
+    ), (i, s) => (l(), k(u(d), {
+      key: o.value,
+      optionFactory: n
+    }));
+  }
+});
+T.install = function(t) {
+  t.component("XChartPie", T);
+};
+export {
+  d as XChart,
+  B as XChartBar,
+  $ as XChartLine,
+  T as XChartPie,
+  b as XTestSuit
+};

package/lib/index.umd.js

@@ -0,0 +1 @@
+(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("echarts"),require("@vueuse/core"),require("@vtj/utils")):typeof define=="function"&&define.amd?define(["exports","vue","echarts","@vueuse/core","@vtj/utils"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.VtjUI={},o.vue,o.echarts,o.core,o.utils))})(this,function(o,e,s,k,p){"use strict";var z=Object.defineProperty,P=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var M=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var X=(o,e,s)=>e in o?z(o,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):o[e]=s,b=(o,e)=>{for(var s in e||(e={}))M.call(e,s)&&X(o,s,e[s]);if(N)for(var s of N(e))q.call(e,s)&&X(o,s,e[s]);return o},E=(o,e)=>P(o,L(e));var h=(o,e,s)=>new Promise((k,p)=>{var g=l=>{try{_(s.next(l))}catch(y){p(y)}},m=l=>{try{_(s.throw(l))}catch(y){p(y)}},_=l=>l.done?k(l.value):Promise.resolve(l.value).then(g,m);_((s=s.apply(o,e)).next())});function g(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const r=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(n,c,r.get?r:{enumerable:!0,get:()=>t[c]})}}return n.default=t,Object.freeze(n)}const m=g(s),_="",l={class:"x-test-suit"},y=e.createElementVNode("div",{class:"x-test-suit__header"},"XTestSuit",-1),A={class:"x-test-suit__body"},T={class:"x-test-suit_props"},V={class:"x-test-suit_slots"},j=e.createTextVNode(" Default Slot"),O={key:0},F=e.defineComponent({__name:"TestSuit",props:{p1:null,p2:null,p3:{type:Boolean},p4:null},emits:["click"],setup(t,{emit:n}){const c=t,r=e.computed(()=>[{name:"p1",value:c.p1},{name:"p2",value:c.p2},{name:"p3",value:c.p3},{name:"p4",value:c.p4}]),a=()=>{n("click")};return(i,d)=>(e.openBlock(),e.createElementBlock("div",l,[y,e.createElementVNode("div",A,[e.createElementVNode("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r),u=>(e.openBlock(),e.createElementBlock("div",null,e.toDisplayString(u.name)+": "+e.toDisplayString(JSON.stringify(u.value)),1))),256))]),e.createElementVNode("div",{class:"x-test-suit_events"},[e.createElementVNode("button",{onClick:a},"Tigger Click Event")]),e.createElementVNode("div",V,[e.createElementVNode("div",null,[e.renderSlot(i.$slots,"default",{},()=>[j])]),i.$slots.footer?(e.openBlock(),e.createElementBlock("div",O,[e.renderSlot(i.$slots,"footer")])):e.createCommentVNode("",!0)])])]))}});F.install=function(t){t.component("XTestSuit",F)};function $(t,n={}){const c=e.ref(!1);let r=null;const a=u=>h(this,null,function*(){r=m.init(t.value);const S=u||p.merge({},n.option,n.optionFactory?yield n.optionFactory(n.option):{});r.setOption(S)}),i=()=>{r==null||r.dispose(),a()},d=p.debounce(()=>{if(!c.value){c.value=!0;return}r==null||r.resize()},100);return e.onMounted(a),e.watch(()=>[n.option,n.optionFactory],i),k.useResizeObserver(t,d),{getChart:()=>r,echarts:m,reset:i,resize:d}}const f=e.defineComponent({__name:"Chart",props:{width:{default:"100%"},height:{default:"400px"},option:{default:()=>({})},optionFactory:null},setup(t,{expose:n}){const c=t,r=e.ref(),a=e.computed(()=>({width:c.width,height:c.height})),{getChart:i,reset:d,resize:u,echarts:S}=$(r,c);return n({getChart:i,echarts:S,reset:d,resize:u}),(D,R)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:r,style:e.normalizeStyle(e.unref(a))},"Chart",4))}});f.install=function(t){t.component("XChart",f)};function w(t,n){const c=a=>h(this,null,function*(){const i=E(b({},a),{title:{},xAxis:{},yAxis:{}});t.category==="x"?(i.xAxis={type:"category"},i.yAxis={}):(i.xAxis={},i.yAxis={type:"category"}),i.dataset={dimensions:t.dimensions,source:typeof t.source=="function"?yield t.source():t.source};const d=(t.dimensions||[]).length;if(d>1){const u=new Array(d-1);u.fill({type:n}),i.series=u}return p.merge(i,t.optionFactory?yield t.optionFactory(i):{})}),r=e.ref(Symbol("key"));return e.watch(()=>[t.category,t.dimensions,t.source,t.optionFactory],()=>{r.value=Symbol("key")}),{optionFactory:c,key:r}}const C=e.defineComponent({__name:"Bar",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(t){const n=t,{optionFactory:c,key:r}=w(n,"bar");return(a,i)=>(e.openBlock(),e.createBlock(e.unref(f),{key:e.unref(r),optionFactory:e.unref(c)},null,8,["optionFactory"]))}});C.install=function(t){t.component("XChartBar",C)};const x=e.defineComponent({__name:"Line",props:{category:{default:"x"},dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(t){const n=t,{optionFactory:c,key:r}=w(n,"line");return(a,i)=>(e.openBlock(),e.createBlock(e.unref(f),{key:e.unref(r),optionFactory:e.unref(c)},null,8,["optionFactory"]))}});x.install=function(t){t.component("XChartLine",x)};const B=e.defineComponent({__name:"Pie",props:{dimensions:{default:()=>[]},source:{type:[Array,Function],default:()=>[]},optionFactory:null},setup(t){const n=t,c=e.ref(Symbol("key")),r=a=>h(this,null,function*(){const i=E(b({},a),{dataset:{dimensions:n.dimensions,source:typeof n.source=="function"?yield n.source():n.source},series:[{type:"pie"}]});return p.merge(i,n.optionFactory?yield n.optionFactory(i):{})});return e.watch(()=>[n.dimensions,n.source,n.optionFactory],()=>{c.value=Symbol("key")}),(a,i)=>(e.openBlock(),e.createBlock(e.unref(f),{key:c.value,optionFactory:r}))}});B.install=function(t){t.component("XChartPie",B)},o.XChart=f,o.XChartBar=C,o.XChartLine=x,o.XChartPie=B,o.XTestSuit=F,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/style.css

@@ -0,0 +1 @@
+.x-test-suit{width:100%;height:100%;border:1px solid #ccc}.x-test-suit__header{padding:5px 10px;background-color:#efefef}.x-test-suit__body{padding:10px}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@vtj/ui",
+  "private": false,
+  "version": "0.0.5",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env ENV_TYPE=dev vite",
+    "build": "vue-tsc --noEmit && cross-env ENV_TYPE=prod vite build && npm run build:cdn",
+    "build:cdn": "vue-tsc --noEmit && cross-env ENV_TYPE=prod CDN=true vite build",
+    "preview": "vite preview",
+    "deploy:major": "npm run build && npm version major && npm publish --access public",
+    "deploy:minor": "npm run build && npm version minor && npm publish --access public",
+    "deploy:patch": "npm run build && npm version patch && npm publish --access public"
+  },
+  "dependencies": {
+    "@vtj/utils": "^0.0.6",
+    "echarts": "^5.3.3",
+    "element-plus": "^2.2.14"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.18.10",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^18.7.8",
+    "@vitejs/plugin-legacy": "^2.0.1",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "cross-env": "^7.0.3",
+    "rollup-plugin-external-globals": "^0.6.1",
+    "sass": "^1.54.5",
+    "typescript": "^4.7.4",
+    "unplugin-element-plus": "^0.4.1",
+    "vite": "^3.0.7",
+    "vite-plugin-dts": "^1.4.1",
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.3",
+    "vue-tsc": "^0.39.5",
+    "@vueuse/core": "^9.1.0"
+  },
+  "files": [
+    "lib",
+    "types",
+    "src"
+  ],
+  "main": "lib/index.umd.js",
+  "module": "lib/index.es.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    "./lib/style.css": "./lib/style.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js"
+    }
+  }
+}

package/src/components/XChart/Chart.vue

@@ -0,0 +1,42 @@
+<template>
+  <div ref="container" :style="style">Chart</div>
+</template>
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import useECharts from '../../hooks/useECharts';
+
+export type IOptionFactory = (
+  opt?: Record<string, any>
+) => Promise<Record<string, any>>;
+
+export interface Props {
+  width?: string;
+  height?: string;
+  option?: Record<string, any>;
+  optionFactory?: IOptionFactory;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '100%',
+  height: '400px',
+  option: () => ({})
+});
+
+const container = ref<HTMLElement>();
+
+const style = computed(() => {
+  return {
+    width: props.width,
+    height: props.height
+  };
+});
+
+const { getChart, reset, resize, echarts } = useECharts(container, props);
+
+defineExpose({
+  getChart,
+  echarts,
+  reset,
+  resize
+});
+</script>

package/src/components/XChart/index.ts

@@ -0,0 +1,8 @@
+import Chart from './Chart.vue';
+import { App } from 'vue';
+
+Chart.install = function (app: App) {
+  app.component('XChart', Chart);
+};
+
+export default Chart;