fix #141: typescript error in [email protected]

Author: junedchhipa

dist/vue3-apexcharts.js

@@ -42,7 +42,7 @@ const A = [
   // events emitted by this component
   emits: A,
   setup(a, { emit: x }) {
-    const g = b(null), n = b(null), f = (e) => e && typeof e == "object" && !Array.isArray(e) && e != null, S = (e, t) => {
+    const g = b(null), t = b(null), f = (e) => e && typeof e == "object" && !Array.isArray(e) && e != null, S = (e, n) => {
       typeof Object.assign != "function" && function() {
         Object.assign = function(o) {
           if (o == null)
@@ -58,15 +58,15 @@ const A = [
         };
       }();
       let s = Object.assign({}, e);
-      return f(e) && f(t) && Object.keys(t).forEach((o) => {
-        f(t[o]) ? o in e ? s[o] = S(e[o], t[o]) : Object.assign(s, {
-          [o]: t[o]
+      return f(e) && f(n) && Object.keys(n).forEach((o) => {
+        f(n[o]) ? o in e ? s[o] = S(e[o], n[o]) : Object.assign(s, {
+          [o]: n[o]
         }) : Object.assign(s, {
-          [o]: t[o]
+          [o]: n[o]
         });
       }), s;
     }, r = async () => {
-      if (await H(), n.value)
+      if (await H(), t.value)
         return;
       const e = {
         chart: {
@@ -76,50 +76,50 @@ const A = [
           events: {}
         },
         series: a.series
-      }, t = a.options.chart ? a.options.chart.events : null;
+      }, n = a.options.chart ? a.options.chart.events : null;
       A.forEach((o) => {
         let v = (...i) => x(o, ...i);
         e.chart.events[o] = (...i) => {
-          v(...i), t && t.hasOwnProperty(o) && t[o](...i);
+          v(...i), n && n.hasOwnProperty(o) && n[o](...i);
         };
       });
       const s = S(a.options, e);
-      return n.value = new w(g.value, s), n.value.render();
+      return t.value = new w(g.value, s), t.value.render();
     }, d = () => (h(), r()), h = () => {
-      n.value.destroy();
-    }, O = (e, t) => n.value.updateSeries(e, t), y = (e, t, s, o) => n.value.updateOptions(e, t, s, o), j = (e) => n.value.toggleSeries(e), P = (e) => {
-      n.value.showSeries(e);
+      t.value.destroy(), t.value = null;
+    }, O = (e, n) => t.value.updateSeries(e, n), y = (e, n, s, o) => t.value.updateOptions(e, n, s, o), j = (e) => t.value.toggleSeries(e), P = (e) => {
+      t.value.showSeries(e);
     }, C = (e) => {
-      n.value.hideSeries(e);
-    }, E = (e, t) => n.value.appendSeries(e, t), M = () => {
-      n.value.resetSeries();
-    }, D = (e, t) => {
-      n.value.toggleDataPointSelection(e, t);
-    }, L = (e) => n.value.appendData(e), R = (e, t) => n.value.zoomX(e, t), X = (e) => n.value.dataURI(e), z = (e) => n.value.setLocale(e), I = (e, t) => {
-      n.value.addXaxisAnnotation(e, t);
-    }, U = (e, t) => {
-      n.value.addYaxisAnnotation(e, t);
-    }, B = (e, t) => {
-      n.value.addPointAnnotation(e, t);
-    }, T = (e, t) => {
-      n.value.removeAnnotation(e, t);
+      t.value.hideSeries(e);
+    }, E = (e, n) => t.value.appendSeries(e, n), M = () => {
+      t.value.resetSeries();
+    }, D = (e, n) => {
+      t.value.toggleDataPointSelection(e, n);
+    }, L = (e) => t.value.appendData(e), R = (e, n) => t.value.zoomX(e, n), X = (e) => t.value.dataURI(e), z = (e) => t.value.setLocale(e), I = (e, n) => {
+      t.value.addXaxisAnnotation(e, n);
+    }, U = (e, n) => {
+      t.value.addYaxisAnnotation(e, n);
+    }, B = (e, n) => {
+      t.value.addPointAnnotation(e, n);
+    }, T = (e, n) => {
+      t.value.removeAnnotation(e, n);
     }, Y = () => {
-      n.value.clearAnnotations();
+      t.value.clearAnnotations();
     };
     _(() => {
       window.ApexCharts = w;
     }), q(() => {
       g.value = K().proxy.$el, r();
     }), $(() => {
-      n.value && h();
+      t.value && h();
     });
     const u = F(a);
     return c(u.options, () => {
-      !n.value && a.options ? r() : n.value.updateOptions(a.options);
+      !t.value && a.options ? r() : t.value.updateOptions(a.options);
     }), c(
       u.series,
       () => {
-        !n.value && a.series ? r() : n.value.updateSeries(a.series);
+        !t.value && a.series ? r() : t.value.updateSeries(a.series);
       },
       { deep: !0 }
     ), c(u.type, () => {
@@ -129,7 +129,7 @@ const A = [
     }), c(u.height, () => {
       d();
     }), {
-      chart: n,
+      chart: t,
       init: r,
       refresh: d,
       destroy: h,

dist/vue3-apexcharts.umd.cjs

@@ -1 +1 @@
-(function(o,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue"),require("apexcharts")):typeof define=="function"&&define.amd?define(["vue","apexcharts"],u):(o=typeof globalThis<"u"?globalThis:o||self,o.VueApexCharts=u(o.Vue,o.ApexCharts))})(this,function(o,u){"use strict";const x=["animationEnd","beforeMount","mounted","updated","click","mouseMove","mouseLeave","legendClick","markerClick","selection","dataPointSelection","dataPointMouseEnter","dataPointMouseLeave","beforeZoom","beforeResetZoom","zoomed","scrolled","brushScrolled"],f=o.defineComponent({name:"apexchart",props:{options:{type:Object},type:{type:String},series:{type:Array,required:!0},width:{default:"100%"},height:{default:"auto"}},emits:x,setup(i,{emit:A}){const S=o.ref(null),n=o.ref(null),v=e=>e&&typeof e=="object"&&!Array.isArray(e)&&e!=null,g=(e,t)=>{typeof Object.assign!="function"&&function(){Object.assign=function(a){if(a==null)throw new TypeError("Cannot convert undefined or null to object");let p=Object(a);for(let r=1;r<arguments.length;r++){let d=arguments[r];if(d!=null)for(let w in d)d.hasOwnProperty(w)&&(p[w]=d[w])}return p}}();let s=Object.assign({},e);return v(e)&&v(t)&&Object.keys(t).forEach(a=>{v(t[a])?a in e?s[a]=g(e[a],t[a]):Object.assign(s,{[a]:t[a]}):Object.assign(s,{[a]:t[a]})}),s},c=async()=>{if(await o.nextTick(),n.value)return;const e={chart:{type:i.type||i.options.chart.type||"line",height:i.height,width:i.width,events:{}},series:i.series},t=i.options.chart?i.options.chart.events:null;x.forEach(a=>{let p=(...r)=>A(a,...r);e.chart.events[a]=(...r)=>{p(...r),t&&t.hasOwnProperty(a)&&t[a](...r)}});const s=g(i.options,e);return n.value=new u(S.value,s),n.value.render()},h=()=>(m(),c()),m=()=>{n.value.destroy()},b=(e,t)=>n.value.updateSeries(e,t),O=(e,t,s,a)=>n.value.updateOptions(e,t,s,a),j=e=>n.value.toggleSeries(e),P=e=>{n.value.showSeries(e)},C=e=>{n.value.hideSeries(e)},E=(e,t)=>n.value.appendSeries(e,t),M=()=>{n.value.resetSeries()},D=(e,t)=>{n.value.toggleDataPointSelection(e,t)},L=e=>n.value.appendData(e),R=(e,t)=>n.value.zoomX(e,t),T=e=>n.value.dataURI(e),X=e=>n.value.setLocale(e),q=(e,t)=>{n.value.addXaxisAnnotation(e,t)},z=(e,t)=>{n.value.addYaxisAnnotation(e,t)},I=(e,t)=>{n.value.addPointAnnotation(e,t)},U=(e,t)=>{n.value.removeAnnotation(e,t)},B=()=>{n.value.clearAnnotations()};o.onBeforeMount(()=>{window.ApexCharts=u}),o.onMounted(()=>{S.value=o.getCurrentInstance().proxy.$el,c()}),o.onBeforeUnmount(()=>{n.value&&m()});const l=o.toRefs(i);return o.watch(l.options,()=>{!n.value&&i.options?c():n.value.updateOptions(i.options)}),o.watch(l.series,()=>{!n.value&&i.series?c():n.value.updateSeries(i.series)},{deep:!0}),o.watch(l.type,()=>{h()}),o.watch(l.width,()=>{h()}),o.watch(l.height,()=>{h()}),{chart:n,init:c,refresh:h,destroy:m,updateOptions:O,updateSeries:b,toggleSeries:j,showSeries:P,hideSeries:C,resetSeries:M,zoomX:R,toggleDataPointSelection:D,appendData:L,appendSeries:E,addXaxisAnnotation:q,addYaxisAnnotation:z,addPointAnnotation:I,removeAnnotation:U,clearAnnotations:B,setLocale:X,dataURI:T}},render(){return o.h("div",{class:"vue-apexcharts"})}}),y=i=>{i.component(f.name,f)};return f.install=y,f});
+(function(o,u){typeof exports=="object"&&typeof module<"u"?module.exports=u(require("vue"),require("apexcharts")):typeof define=="function"&&define.amd?define(["vue","apexcharts"],u):(o=typeof globalThis<"u"?globalThis:o||self,o.VueApexCharts=u(o.Vue,o.ApexCharts))})(this,function(o,u){"use strict";const x=["animationEnd","beforeMount","mounted","updated","click","mouseMove","mouseLeave","legendClick","markerClick","selection","dataPointSelection","dataPointMouseEnter","dataPointMouseLeave","beforeZoom","beforeResetZoom","zoomed","scrolled","brushScrolled"],f=o.defineComponent({name:"apexchart",props:{options:{type:Object},type:{type:String},series:{type:Array,required:!0},width:{default:"100%"},height:{default:"auto"}},emits:x,setup(i,{emit:A}){const S=o.ref(null),t=o.ref(null),v=e=>e&&typeof e=="object"&&!Array.isArray(e)&&e!=null,g=(e,n)=>{typeof Object.assign!="function"&&function(){Object.assign=function(a){if(a==null)throw new TypeError("Cannot convert undefined or null to object");let p=Object(a);for(let r=1;r<arguments.length;r++){let d=arguments[r];if(d!=null)for(let w in d)d.hasOwnProperty(w)&&(p[w]=d[w])}return p}}();let s=Object.assign({},e);return v(e)&&v(n)&&Object.keys(n).forEach(a=>{v(n[a])?a in e?s[a]=g(e[a],n[a]):Object.assign(s,{[a]:n[a]}):Object.assign(s,{[a]:n[a]})}),s},l=async()=>{if(await o.nextTick(),t.value)return;const e={chart:{type:i.type||i.options.chart.type||"line",height:i.height,width:i.width,events:{}},series:i.series},n=i.options.chart?i.options.chart.events:null;x.forEach(a=>{let p=(...r)=>A(a,...r);e.chart.events[a]=(...r)=>{p(...r),n&&n.hasOwnProperty(a)&&n[a](...r)}});const s=g(i.options,e);return t.value=new u(S.value,s),t.value.render()},h=()=>(m(),l()),m=()=>{t.value.destroy(),t.value=null},b=(e,n)=>t.value.updateSeries(e,n),O=(e,n,s,a)=>t.value.updateOptions(e,n,s,a),j=e=>t.value.toggleSeries(e),P=e=>{t.value.showSeries(e)},C=e=>{t.value.hideSeries(e)},E=(e,n)=>t.value.appendSeries(e,n),M=()=>{t.value.resetSeries()},D=(e,n)=>{t.value.toggleDataPointSelection(e,n)},L=e=>t.value.appendData(e),R=(e,n)=>t.value.zoomX(e,n),T=e=>t.value.dataURI(e),X=e=>t.value.setLocale(e),q=(e,n)=>{t.value.addXaxisAnnotation(e,n)},z=(e,n)=>{t.value.addYaxisAnnotation(e,n)},I=(e,n)=>{t.value.addPointAnnotation(e,n)},U=(e,n)=>{t.value.removeAnnotation(e,n)},B=()=>{t.value.clearAnnotations()};o.onBeforeMount(()=>{window.ApexCharts=u}),o.onMounted(()=>{S.value=o.getCurrentInstance().proxy.$el,l()}),o.onBeforeUnmount(()=>{t.value&&m()});const c=o.toRefs(i);return o.watch(c.options,()=>{!t.value&&i.options?l():t.value.updateOptions(i.options)}),o.watch(c.series,()=>{!t.value&&i.series?l():t.value.updateSeries(i.series)},{deep:!0}),o.watch(c.type,()=>{h()}),o.watch(c.width,()=>{h()}),o.watch(c.height,()=>{h()}),{chart:t,init:l,refresh:h,destroy:m,updateOptions:O,updateSeries:b,toggleSeries:j,showSeries:P,hideSeries:C,resetSeries:M,zoomX:R,toggleDataPointSelection:D,appendData:L,appendSeries:E,addXaxisAnnotation:q,addYaxisAnnotation:z,addPointAnnotation:I,removeAnnotation:U,clearAnnotations:B,setLocale:X,dataURI:T}},render(){return o.h("div",{class:"vue-apexcharts"})}}),y=i=>{i.component(f.name,f)};return f.install=y,f});

package-lock.json

@@ -1,7 +1,7 @@
 import ApexCharts, { ApexOptions } from "apexcharts";
-import { Component, ComponentOptions, ComponentPublicInstance, Plugin } from "vue";
+import { DefineComponent, Plugin } from "vue";
 
-export interface VueApexChartsComponent extends ComponentPublicInstance {
+export interface VueApexChartsComponent {
   // data
   readonly chart?: ApexCharts;
   // props
@@ -52,6 +52,8 @@ export interface VueApexChartsComponent extends ComponentPublicInstance {
   dataURI(options?: { scale?: number; width?: number }): Promise<void>;
 }
 
-declare const VueApexCharts: Component & ComponentOptions<VueApexChartsComponent> & Plugin;
+type VueApexChartsComponentType = DefineComponent<VueApexChartsComponent>;
+
+declare const VueApexCharts: VueApexChartsComponentType & Plugin;
 
 export default VueApexCharts;