0.2.0

Author: weizhenye

dist/vue-highcharts.js

@@ -1,98 +1,71 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('highcharts')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'highcharts'], factory) :
-  (global = global || self, factory(global.VueHighcharts = {}, global.Highcharts));
-}(this, function (exports, HighchartsOnly) { 'use strict';
-
-  HighchartsOnly = HighchartsOnly && HighchartsOnly.hasOwnProperty('default') ? HighchartsOnly['default'] : HighchartsOnly;
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueHighcharts = {}, global.Vue));
+}(this, (function (exports, vue) { 'use strict';
 
   var ctors = {
     Highcharts: 'chart',
     Highstock: 'stockChart',
     Highmaps: 'mapChart',
-    HighchartsGantt: 'ganttChart',
+    HighchartsGantt: 'ganttChart'
   };
 
-  // eslint-disable-next-line consistent-return
-  function clone(obj) {
-    var copy;
-    if (obj === null || typeof obj !== 'object') {
-      return obj;
-    }
-    if (obj instanceof Array) {
-      copy = [];
-      for (var i = obj.length - 1; i >= 0; i--) {
-        copy[i] = clone(obj[i]);
-      }
-      return copy;
-    }
-    /* istanbul ignore else */
-    if (obj instanceof Object) {
-      copy = {};
-      for (var key in obj) {
-        copy[key] = clone(obj[key]);
-      }
-      return copy;
-    }
-  }
-
-  function render(createElement) {
-    return createElement('div');
+  function render() {
+    return vue.h('div', {
+      ref: 'highchartsRef'
+    });
   }
 
-  function create(name, Highcharts) {
+  function createHighcharts(name, Highcharts) {
     var ctor = Highcharts[ctors[name]];
+
     if (!ctor) {
-      return Highcharts.win
-        ? null
-        // When running in server, Highcharts will not be instanced,
-        // so there're no constructors in Highcharts,
-        // to avoid unmated content during SSR, it returns minimum component.
-        : { render: render };
+      return Highcharts.win ? null // When running in server, Highcharts will not be instanced,
+      // so there're no constructors in Highcharts,
+      // to avoid unmated content during SSR, it returns minimum component.
+      : {
+        render: render
+      };
     }
+
     return {
       name: name,
-      props: {
-        options: { type: Object, required: true }
-      },
-      watch: {
-        options: {
-          handler: function () {
-            this.$_h_render();
-          },
-          deep: true
-        }
-      },
-      mounted: function () {
-        this.$_h_render();
-      },
-      beforeDestroy: function () {
-        this.chart.destroy();
-      },
-      methods: {
-        $_h_render: function () {
-          this.chart = ctor(this.$el, clone(this.options));
-        }
-      },
-      render: render
+      props: ['options'],
+      render: render,
+      setup: function setup(props) {
+        var highchartsRef = vue.ref(null);
+        var chart = vue.ref(null);
+        vue.onMounted(function () {
+          vue.watchEffect(function () {
+            chart.value = ctor(highchartsRef.value, props.options);
+          });
+        });
+        vue.onBeforeUnmount(function () {
+          if (highchartsRef.value) {
+            chart.value.destroy();
+          }
+        });
+        return {
+          highchartsRef: highchartsRef,
+          chart: chart
+        };
+      }
     };
   }
+  function install(app, options) {
+    Object.keys(ctors).forEach(function (name) {
+      var component = createHighcharts(name, options.Highcharts);
 
-  function install(Vue, options) {
-    var Highcharts = (options && options.Highcharts) || HighchartsOnly;
-    for (var name in ctors) {
-      var component = create(name, Highcharts);
-      component && Vue.component(name, component);
-    }
-  }
-
-  if (typeof window !== 'undefined' && window.Vue && window.Highcharts) {
-    install(window.Vue, window.Highcharts);
+      if (component) {
+        app.component(name, component);
+      }
+    });
   }
 
+  exports.createHighcharts = createHighcharts;
   exports.default = install;
-  exports.genComponent = create;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 
-}));
+})));

dist/vue-highcharts.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-highcharts",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Highcharts component for Vue",
   "main": "dist/vue-highcharts.js",
   "module": "index.js",