@vtj/ui 0.0.5 → 0.0.6

package/lib/cdn/index.cjs.js

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

package/lib/cdn/index.es.js

@@ -1,32 +1,32 @@
-var v = Object.defineProperty, x = Object.defineProperties;
+var C = Object.defineProperty, F = 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) => {
+var y = Object.getOwnPropertySymbols;
+var B = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var m = (e, t, n) => t in e ? C(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, d = (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]);
+    B.call(t, n) && m(e, n, t[n]);
+  if (y)
+    for (var n of y(t))
+      E.call(t, n) && m(e, n, t[n]);
   return e;
-}, d = (e, t) => x(e, g(t));
+}, V = (e, t) => F(e, g(t));
 var p = (e, t, n) => new Promise((o, u) => {
-  var s = (i) => {
+  var s = (r) => {
     try {
-      c(n.next(i));
+      c(n.next(r));
     } catch (l) {
       u(l);
     }
-  }, r = (i) => {
+  }, i = (r) => {
     try {
-      c(n.throw(i));
+      c(n.throw(r));
     } catch (l) {
       u(l);
     }
-  }, c = (i) => i.done ? o(i.value) : Promise.resolve(i.value).then(s, r);
+  }, c = (r) => r.done ? o(r.value) : Promise.resolve(r.value).then(s, i);
   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({
+const S = { class: "x-test-suit" }, w = /* @__PURE__ */ Vue.createElementVNode("div", { class: "x-test-suit__header" }, "XTestSuit", -1), X = { class: "x-test-suit__body" }, A = { class: "x-test-suit_props" }, N = { class: "x-test-suit_slots" }, b = /* @__PURE__ */ Vue.createTextVNode(" Default Slot"), $ = { key: 0 }, f = /* @__PURE__ */ Vue.defineComponent({
   __name: "TestSuit",
   props: {
     p1: null,
@@ -44,22 +44,22 @@ const S = { class: "x-test-suit" }, E = /* @__PURE__ */ Vue.createElementVNode("
     ]), u = () => {
       t("click");
     };
-    return (s, r) => (Vue.openBlock(), Vue.createElementBlock("div", S, [
-      E,
-      Vue.createElementVNode("div", w, [
-        Vue.createElementVNode("div", X, [
+    return (s, i) => (Vue.openBlock(), Vue.createElementBlock("div", S, [
+      w,
+      Vue.createElementVNode("div", X, [
+        Vue.createElementVNode("div", A, [
           (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", N, [
           Vue.createElementVNode("div", null, [
             Vue.renderSlot(s.$slots, "default", {}, () => [
-              N
+              b
             ])
           ]),
-          s.$slots.footer ? (Vue.openBlock(), Vue.createElementBlock("div", b, [
+          s.$slots.footer ? (Vue.openBlock(), Vue.createElementBlock("div", $, [
             Vue.renderSlot(s.$slots, "footer")
           ])) : Vue.createCommentVNode("", !0)
         ])
@@ -70,31 +70,49 @@ const S = { class: "x-test-suit" }, E = /* @__PURE__ */ Vue.createElementVNode("
 f.install = function(e) {
   e.component("XTestSuit", f);
 };
-function $(e, t = {}) {
+const _ = /* @__PURE__ */ Vue.defineComponent({
+  __name: "Element",
+  props: {
+    tag: { default: "div" }
+  },
+  setup(e) {
+    const t = e;
+    return (n, o) => (Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(t.tag), null, {
+      default: Vue.withCtx(() => [
+        Vue.renderSlot(n.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+});
+_.install = function(e) {
+  e.component("XElement", _);
+};
+function T(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(
+    const r = c || VtjUtils.merge(
       {},
       t.option,
       t.optionFactory ? yield t.optionFactory(t.option) : {}
     );
-    o.setOption(i);
+    o.setOption(r);
   }), s = () => {
     o == null || o.dispose(), u();
-  }, r = VtjUtils.debounce(() => {
+  }, i = 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), {
+  return Vue.onMounted(u), Vue.watch(() => [t.option, t.optionFactory], s), VueUse.useResizeObserver(e, i), {
     getChart: () => o,
     echarts,
     reset: s,
-    resize: r
+    resize: i
   };
 }
 const a = /* @__PURE__ */ Vue.defineComponent({
@@ -109,13 +127,13 @@ const a = /* @__PURE__ */ Vue.defineComponent({
     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);
+    })), { getChart: s, reset: i, resize: c, echarts: r } = T(o, n);
     return t({
       getChart: s,
-      echarts: i,
-      reset: r,
+      echarts: r,
+      reset: i,
       resize: c
-    }), (l, T) => (Vue.openBlock(), Vue.createElementBlock("div", {
+    }), (l, z) => (Vue.openBlock(), Vue.createElementBlock("div", {
       ref_key: "container",
       ref: o,
       style: Vue.normalizeStyle(Vue.unref(u))
@@ -125,9 +143,9 @@ const a = /* @__PURE__ */ Vue.defineComponent({
 a.install = function(e) {
   e.component("XChart", a);
 };
-function F(e, t) {
+function x(e, t) {
   const n = (u) => p(this, null, function* () {
-    const s = d(y({}, u), {
+    const s = V(d({}, u), {
       title: {},
       xAxis: {},
       yAxis: {}
@@ -136,9 +154,9 @@ function F(e, t) {
       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);
+    const i = (e.dimensions || []).length;
+    if (i > 1) {
+      const c = new Array(i - 1);
       c.fill({ type: t }), s.series = c;
     }
     return VtjUtils.merge(
@@ -156,7 +174,7 @@ function F(e, t) {
     key: o
   };
 }
-const _ = /* @__PURE__ */ Vue.defineComponent({
+const h = /* @__PURE__ */ Vue.defineComponent({
   __name: "Bar",
   props: {
     category: { default: "x" },
@@ -165,17 +183,17 @@ const _ = /* @__PURE__ */ Vue.defineComponent({
     optionFactory: null
   },
   setup(e) {
-    const t = e, { optionFactory: n, key: o } = F(t, "bar");
+    const t = e, { optionFactory: n, key: o } = x(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", _);
+h.install = function(e) {
+  e.component("XChartBar", h);
 };
-const h = /* @__PURE__ */ Vue.defineComponent({
+const k = /* @__PURE__ */ Vue.defineComponent({
   __name: "Line",
   props: {
     category: { default: "x" },
@@ -184,17 +202,17 @@ const h = /* @__PURE__ */ Vue.defineComponent({
     optionFactory: null
   },
   setup(e) {
-    const t = e, { optionFactory: n, key: o } = F(t, "line");
+    const t = e, { optionFactory: n, key: o } = x(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);
+k.install = function(e) {
+  e.component("XChartLine", k);
 };
-const k = /* @__PURE__ */ Vue.defineComponent({
+const v = /* @__PURE__ */ Vue.defineComponent({
   __name: "Pie",
   props: {
     dimensions: { default: () => [] },
@@ -203,7 +221,7 @@ const k = /* @__PURE__ */ Vue.defineComponent({
   },
   setup(e) {
     const t = e, n = Vue.ref(Symbol("key")), o = (u) => p(this, null, function* () {
-      const s = d(y({}, u), {
+      const s = V(d({}, u), {
         dataset: {
           dimensions: t.dimensions,
           source: typeof t.source == "function" ? yield t.source() : t.source
@@ -230,13 +248,14 @@ const k = /* @__PURE__ */ Vue.defineComponent({
     }));
   }
 });
-k.install = function(e) {
-  e.component("XChartPie", k);
+v.install = function(e) {
+  e.component("XChartPie", v);
 };
 export {
   a as XChart,
-  _ as XChartBar,
-  h as XChartLine,
-  k as XChartPie,
+  h as XChartBar,
+  k as XChartLine,
+  v as XChartPie,
+  _ as XElement,
   f as XTestSuit
 };

package/lib/cdn/index.umd.js

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

package/lib/index.cjs.js

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

package/lib/index.es.js

@@ -1,36 +1,36 @@
-var E = Object.defineProperty, N = Object.defineProperties;
+var N = Object.defineProperty, D = Object.defineProperties;
 var O = Object.getOwnPropertyDescriptors;
-var C = Object.getOwnPropertySymbols;
+var S = 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) => {
+var X = (t, e, o) => e in t ? N(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, x = (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]);
+    P.call(e, o) && X(t, o, e[o]);
+  if (S)
+    for (var o of S(e))
+      V.call(e, o) && X(t, o, e[o]);
   return t;
-}, v = (t, e) => N(t, O(e));
+}, F = (t, e) => D(t, O(e));
 var f = (t, e, o) => new Promise((n, i) => {
-  var s = (a) => {
+  var s = (r) => {
     try {
-      r(o.next(a));
+      a(o.next(r));
     } catch (_) {
       i(_);
     }
-  }, c = (a) => {
+  }, c = (r) => {
     try {
-      r(o.throw(a));
+      a(o.throw(r));
     } catch (_) {
       i(_);
     }
-  }, r = (a) => a.done ? n(a.value) : Promise.resolve(a.value).then(s, c);
-  r((o = o.apply(t, e)).next());
+  }, a = (r) => r.done ? n(r.value) : Promise.resolve(r.value).then(s, c);
+  a((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 { defineComponent as y, computed as z, openBlock as u, createElementBlock as d, createElementVNode as p, Fragment as R, renderList as J, unref as l, toDisplayString as w, renderSlot as g, createCommentVNode as M, createTextVNode as j, createBlock as h, resolveDynamicComponent as q, withCtx as G, ref as v, onMounted as H, watch as k, normalizeStyle as I } 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({
+import { useResizeObserver as K } from "@vueuse/core";
+import { debounce as Q, merge as C } from "@vtj/utils";
+const U = { class: "x-test-suit" }, W = /* @__PURE__ */ p("div", { class: "x-test-suit__header" }, "XTestSuit", -1), Y = { class: "x-test-suit__body" }, Z = { class: "x-test-suit_props" }, tt = { class: "x-test-suit_slots" }, et = /* @__PURE__ */ j(" Default Slot"), ot = { key: 0 }, b = /* @__PURE__ */ y({
   __name: "TestSuit",
   props: {
     p1: null,
@@ -48,24 +48,24 @@ const I = { class: "x-test-suit" }, K = /* @__PURE__ */ y("div", { class: "x-tes
     ]), 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))
+    return (s, c) => (u(), d("div", U, [
+      W,
+      p("div", Y, [
+        p("div", Z, [
+          (u(!0), d(R, null, J(l(n), (a) => (u(), d("div", null, w(a.name) + ": " + w(JSON.stringify(a.value)), 1))), 256))
         ]),
-        y("div", { class: "x-test-suit_events" }, [
-          y("button", { onClick: i }, "Tigger Click Event")
+        p("div", { class: "x-test-suit_events" }, [
+          p("button", { onClick: i }, "Tigger Click Event")
         ]),
-        y("div", W, [
-          y("div", null, [
-            w(s.$slots, "default", {}, () => [
-              Y
+        p("div", tt, [
+          p("div", null, [
+            g(s.$slots, "default", {}, () => [
+              et
             ])
           ]),
-          s.$slots.footer ? (l(), p("div", Z, [
-            w(s.$slots, "footer")
-          ])) : J("", !0)
+          s.$slots.footer ? (u(), d("div", ot, [
+            g(s.$slots, "footer")
+          ])) : M("", !0)
         ])
       ])
     ]));
@@ -74,34 +74,52 @@ const I = { class: "x-test-suit" }, K = /* @__PURE__ */ y("div", { class: "x-tes
 b.install = function(t) {
   t.component("XTestSuit", b);
 };
-function tt(t, e = {}) {
-  const o = h(!1);
+const $ = /* @__PURE__ */ y({
+  __name: "Element",
+  props: {
+    tag: { default: "div" }
+  },
+  setup(t) {
+    const e = t;
+    return (o, n) => (u(), h(q(e.tag), null, {
+      default: G(() => [
+        g(o.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+});
+$.install = function(t) {
+  t.component("XElement", $);
+};
+function nt(t, e = {}) {
+  const o = v(!1);
   let n = null;
-  const i = (r) => f(this, null, function* () {
+  const i = (a) => f(this, null, function* () {
     n = A.init(t.value);
-    const a = r || g(
+    const r = a || C(
       {},
       e.option,
       e.optionFactory ? yield e.optionFactory(e.option) : {}
     );
-    n.setOption(a);
+    n.setOption(r);
   }), s = () => {
     n == null || n.dispose(), i();
-  }, c = H(() => {
+  }, c = Q(() => {
     if (!o.value) {
       o.value = !0;
       return;
     }
     n == null || n.resize();
   }, 100);
-  return j(i), x(() => [e.option, e.optionFactory], s), G(t, c), {
+  return H(i), k(() => [e.option, e.optionFactory], s), K(t, c), {
     getChart: () => n,
     echarts: A,
     reset: s,
     resize: c
   };
 }
-const d = /* @__PURE__ */ m({
+const m = /* @__PURE__ */ y({
   __name: "Chart",
   props: {
     width: { default: "100%" },
@@ -110,28 +128,28 @@ const d = /* @__PURE__ */ m({
     optionFactory: null
   },
   setup(t, { expose: e }) {
-    const o = t, n = h(), i = z(() => ({
+    const o = t, n = v(), i = z(() => ({
       width: o.width,
       height: o.height
-    })), { getChart: s, reset: c, resize: r, echarts: a } = tt(n, o);
+    })), { getChart: s, reset: c, resize: a, echarts: r } = nt(n, o);
     return e({
       getChart: s,
-      echarts: a,
+      echarts: r,
       reset: c,
-      resize: r
-    }), (_, et) => (l(), p("div", {
+      resize: a
+    }), (_, st) => (u(), d("div", {
       ref_key: "container",
       ref: n,
-      style: q(u(i))
+      style: I(l(i))
     }, "Chart", 4));
   }
 });
-d.install = function(t) {
-  t.component("XChart", d);
+m.install = function(t) {
+  t.component("XChart", m);
 };
 function L(t, e) {
   const o = (i) => f(this, null, function* () {
-    const s = v(F({}, i), {
+    const s = F(x({}, i), {
       title: {},
       xAxis: {},
       yAxis: {}
@@ -142,15 +160,15 @@ function L(t, e) {
     };
     const c = (t.dimensions || []).length;
     if (c > 1) {
-      const r = new Array(c - 1);
-      r.fill({ type: e }), s.series = r;
+      const a = new Array(c - 1);
+      a.fill({ type: e }), s.series = a;
     }
-    return g(
+    return C(
       s,
       t.optionFactory ? yield t.optionFactory(s) : {}
     );
-  }), n = h(Symbol("key"));
-  return x(
+  }), n = v(Symbol("key"));
+  return k(
     () => [t.category, t.dimensions, t.source, t.optionFactory],
     () => {
       n.value = Symbol("key");
@@ -160,7 +178,7 @@ function L(t, e) {
     key: n
   };
 }
-const B = /* @__PURE__ */ m({
+const B = /* @__PURE__ */ y({
   __name: "Bar",
   props: {
     category: { default: "x" },
@@ -170,16 +188,16 @@ const B = /* @__PURE__ */ m({
   },
   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)
+    return (i, s) => (u(), h(l(m), {
+      key: l(n),
+      optionFactory: l(o)
     }, null, 8, ["optionFactory"]));
   }
 });
 B.install = function(t) {
   t.component("XChartBar", B);
 };
-const $ = /* @__PURE__ */ m({
+const E = /* @__PURE__ */ y({
   __name: "Line",
   props: {
     category: { default: "x" },
@@ -189,16 +207,16 @@ const $ = /* @__PURE__ */ m({
   },
   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)
+    return (i, s) => (u(), h(l(m), {
+      key: l(n),
+      optionFactory: l(o)
     }, null, 8, ["optionFactory"]));
   }
 });
-$.install = function(t) {
-  t.component("XChartLine", $);
+E.install = function(t) {
+  t.component("XChartLine", E);
 };
-const T = /* @__PURE__ */ m({
+const T = /* @__PURE__ */ y({
   __name: "Pie",
   props: {
     dimensions: { default: () => [] },
@@ -206,8 +224,8 @@ const T = /* @__PURE__ */ m({
     optionFactory: null
   },
   setup(t) {
-    const e = t, o = h(Symbol("key")), n = (i) => f(this, null, function* () {
-      const s = v(F({}, i), {
+    const e = t, o = v(Symbol("key")), n = (i) => f(this, null, function* () {
+      const s = F(x({}, i), {
         dataset: {
           dimensions: e.dimensions,
           source: typeof e.source == "function" ? yield e.source() : e.source
@@ -218,17 +236,17 @@ const T = /* @__PURE__ */ m({
           }
         ]
       });
-      return g(
+      return C(
         s,
         e.optionFactory ? yield e.optionFactory(s) : {}
       );
     });
-    return x(
+    return k(
       () => [e.dimensions, e.source, e.optionFactory],
       () => {
         o.value = Symbol("key");
       }
-    ), (i, s) => (l(), k(u(d), {
+    ), (i, s) => (u(), h(l(m), {
       key: o.value,
       optionFactory: n
     }));
@@ -238,9 +256,10 @@ T.install = function(t) {
   t.component("XChartPie", T);
 };
 export {
-  d as XChart,
+  m as XChart,
   B as XChartBar,
-  $ as XChartLine,
+  E as XChartLine,
   T as XChartPie,
+  $ as XElement,
   b as XTestSuit
 };

package/lib/index.umd.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vtj/ui",
   "private": false,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "cross-env ENV_TYPE=dev vite",

package/src/components/XChart/Chart.vue

@@ -9,14 +9,14 @@ export type IOptionFactory = (
   opt?: Record<string, any>
 ) => Promise<Record<string, any>>;
 
-export interface Props {
+export interface IProps {
   width?: string;
   height?: string;
   option?: Record<string, any>;
   optionFactory?: IOptionFactory;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<IProps>(), {
   width: '100%',
   height: '400px',
   option: () => ({})

package/src/components/XChartBar/Bar.vue

@@ -10,14 +10,14 @@ export type IOptionFactory = (
   opt?: Record<string, any>
 ) => Promise<Record<string, any>>;
 
-export interface Props {
+export interface IProps {
   category?: 'x' | 'y';
   dimensions?: string[];
   source?: ISourceType | (() => Promise<ISourceType>);
   optionFactory?: IOptionFactory;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<IProps>(), {
   category: 'x',
   dimensions: () => [],
   source: () => []

package/src/components/XChartLine/Line.vue

@@ -10,14 +10,14 @@ export type IOptionFactory = (
   opt?: Record<string, any>
 ) => Promise<Record<string, any>>;
 
-export interface Props {
+export interface IProps {
   category?: 'x' | 'y';
   dimensions?: string[];
   source?: ISourceType | (() => Promise<ISourceType>);
   optionFactory?: IOptionFactory;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<IProps>(), {
   category: 'x',
   dimensions: () => [],
   source: () => []

package/src/components/XChartPie/Pie.vue

@@ -11,13 +11,13 @@ export type IOptionFactory = (
   opt?: Record<string, any>
 ) => Promise<Record<string, any>>;
 
-export interface Props {
+export interface IProps {
   dimensions?: string[];
   source?: ISourceType | (() => Promise<ISourceType>);
   optionFactory?: IOptionFactory;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<IProps>(), {
   dimensions: () => [],
   source: () => []
 });

package/src/components/XElement/Element.vue

@@ -0,0 +1,14 @@
+<template>
+  <component :is="props.tag">
+    <slot></slot>
+  </component>
+</template>
+<script lang="ts" setup>
+export interface IProps {
+  tag?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  tag: 'div'
+});
+</script>

package/src/components/XElement/index.ts

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

package/src/index.ts

@@ -1,6 +1,7 @@
 import './theme/index.scss';
 import { App } from 'vue';
 import XTestSuit from './components/XTestSuit';
+import XElement from './components/XElement';
 import XChart from './components/XChart';
 import XChartBar from './components/XChartBar';
 import XChartLine from './components/XChartLine';
@@ -8,6 +9,7 @@ import XChartPie from './components/XChartPie';
 
 const components: Record<string, any> = {
   XTestSuit,
+  XElement,
   XChart,
   XChartBar,
   XChartLine,
@@ -20,4 +22,4 @@ components.install = function (app: App) {
   });
 };
 
-export { XTestSuit, XChart, XChartBar, XChartLine, XChartPie };
+export { XElement, XTestSuit, XChart, XChartBar, XChartLine, XChartPie };

package/types/src/components/XChart/Chart.vue.d.ts

@@ -1,5 +1,5 @@
 export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
-export interface Props {
+export interface IProps {
     width?: string;
     height?: string;
     option?: Record<string, any>;

package/types/src/components/XChartBar/Bar.vue.d.ts

@@ -1,6 +1,6 @@
 export declare type ISourceType = Array<Record<string, any>>;
 export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
-export interface Props {
+export interface IProps {
     category?: 'x' | 'y';
     dimensions?: string[];
     source?: ISourceType | (() => Promise<ISourceType>);

package/types/src/components/XChartLine/Line.vue.d.ts

@@ -1,6 +1,6 @@
 export declare type ISourceType = Array<Record<string, any>>;
 export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
-export interface Props {
+export interface IProps {
     category?: 'x' | 'y';
     dimensions?: string[];
     source?: ISourceType | (() => Promise<ISourceType>);

package/types/src/components/XChartPie/Pie.vue.d.ts

@@ -1,6 +1,6 @@
 export declare type ISourceType = Array<Record<string, any>>;
 export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
-export interface Props {
+export interface IProps {
     dimensions?: string[];
     source?: ISourceType | (() => Promise<ISourceType>);
     optionFactory?: IOptionFactory;

package/types/src/components/XElement/Element.vue.d.ts

@@ -0,0 +1,23 @@
+export interface IProps {
+    tag?: string;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}, {
+    props: {
+        tag: string;
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+}>>, {
+    tag: string;
+}>;
+export default _sfc_main;

package/types/src/components/XElement/index.d.ts

@@ -0,0 +1,2 @@
+import Element from './Element.vue';
+export default Element;

package/types/src/index.d.ts

@@ -1,6 +1,7 @@
 import XTestSuit from './components/XTestSuit';
+import XElement from './components/XElement';
 import XChart from './components/XChart';
 import XChartBar from './components/XChartBar';
 import XChartLine from './components/XChartLine';
 import XChartPie from './components/XChartPie';
-export { XTestSuit, XChart, XChartBar, XChartLine, XChartPie };
+export { XElement, XTestSuit, XChart, XChartBar, XChartLine, XChartPie };