Merge pull request #189 from highcharts/release-v1.4.0

Release v1.4.0

.eslintignore

@@ -1,4 +1,9 @@
 dist/*
-demo/js/*
-demo/dist/*
-demo/node_modules/*
+
+demo-v2/src/js/*
+demo-v2/dist/*
+demo-v2/node_modules/*
+
+demo-v3/src/js/*
+demo-v3/dist/*
+demo-v3/node_modules/*

CHANGELOG.md

@@ -1,7 +1,21 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.4.0](https://github.com/highcharts/highcharts-vue/compare/v1.3.5...v1.4.0) (2021-05-26)
+
+
+### Features
+
+* **demo-v3:** Added demo-v3 scripts. ([f969c0a](https://github.com/highcharts/highcharts-vue/commit/f969c0a020bdd964f8fca75ed309ba4aabf6e979))
+* **docs:** Updated the docs. ([d51b1f8](https://github.com/highcharts/highcharts-vue/commit/d51b1f814b40d3f7cbe4799699e37f1316c700ba))
+* **vue:** Added support for Vue v3 apps. ([268aef1](https://github.com/highcharts/highcharts-vue/commit/268aef1ce1b41a642540ebfa4aa0c8fb58351ef8))
+
+
+### Bug Fixes
+
+* **tests:** Fixed tests, and get rid of Jest deprecation warnings. ([886187a](https://github.com/highcharts/highcharts-vue/commit/886187a335df84e40f1f5bba5dc9ba2d37e32994))
+
 <a name="1.3.5"></a>
 ## [1.3.5](https://github.com/highcharts/highcharts-vue/compare/v1.3.4...v1.3.5) (2019-05-29)
 

README.md

@@ -1,6 +1,7 @@
 # Highcharts-Vue
 
 Official Highcharts wrapper for Vue framework
+**This package now supports also the Vue v3** :tada:
 
 ## Table of Contents
 
@@ -220,15 +221,22 @@ export default {
 
 *Note that both ways of usage are **optional**, because wrapper automatically uses available Highcharts instance by default from peer dependency.*
 
-## Demo app
+## Demo apps
 
-If you would like to play with live app created with Highcharts Vue wrapper, or just want to see how it everything should looks like, this repository includes the demo example, which you can simply run locally on your machine. To achieve that, clone this repository, open terminal/console and enter these two commands from the repo directory level:
+If you would like to play with live app created with Highcharts Vue wrapper, or just want to see how it everything should looks like, this repository includes the demo example, which you can simply run locally on your machine. To achieve that, clone this repository, open terminal/console and enter below commands from the repository root level:
 
+To run the demo based on Vue v2:
 ```cli
-npm run build:app
-npm run app
+npm run build:app-v2
+npm run app-v2
 ```
-Server runs at `http://localhost:8080`
+or Vue 3:
+```cli
+npm run build:app-v3
+npm run app-v3
+```
+
+Server always runs at `http://localhost:8080`, unless it's taken by another process. Then you need to manually copy & visit the address displayed in terminal.
 
 ## Online demos
 
@@ -243,7 +251,7 @@ Server runs at `http://localhost:8080`
 
 ## Component Properties
 
-Here is the list of all allowed props allowed to pass directly to your `<highcharts>` component instance, which wrapper is able to handle.
+Here is the list of all available props allowed to pass directly to your `<highcharts>` component instance, which wrapper is able to handle.
 
 | Parameter | Type | Required | Description |
 | --------- | :----: | :--------: | ----------- |

demo/.gitignore → demo-v2/.gitignore

@@ -4,6 +4,8 @@ dist/
 npm-debug.log
 yarn-error.log
 
+yarn.lock
+
 # Editor directories and files
 .editorconfig
 .idea

demo/package.json → demo-v2/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "highcharts": "^7.0.1",
-    "highcharts-vue": "^1.0.4",
+    "highcharts-vue": "../",
     "vue": "^2.5.11"
   },
   "browserslist": [

demo-v3/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+yarn.lock
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

demo-v3/README.md

@@ -0,0 +1,24 @@
+# vue-app-demo
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

demo-v3/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

demo-v3/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "vue-app-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0",
+    "highcharts": "^7.0.1",
+    "highcharts-vue": "../"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

demo-v3/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

demo-v3/src/App.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="app">
+    <div class="logos">
+      <img class="logo-hc" src="./assets/highcharts_logo.png" alt="Highcharts Logo">
+      <img class="logo-vue" src="./assets/vue_logo.png" alt="Vue Logo">
+    </div>
+    <h2>Welcome in Vue 3 Highcharts Wrapper Demo</h2>
+    <hr style="width: 200px; margin: 60px auto;">
+    <h3>Select chart constructor:</h3>
+    <div class="button-grp">
+      <button @click="select('chart')" :class="{btnActive: selected === 'chart'}">Chart</button>
+      <button @click="select('stockChart')" :class="{btnActive: selected === 'stockChart'}">Stock Chart</button>
+      <button @click="select('mapChart')" :class="{btnActive: selected === 'mapChart'}">Map Chart</button>
+    </div>
+    <keep-alive>
+      <component :is="currentView"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import Chart from './components/Chart.vue'
+import StockChart from './components/StockChart'
+import MapChart from './components/MapChart'
+
+export default {
+  name: 'app',
+  data () {
+    return {
+      selected: 'chart',
+      currentView: 'chart'
+    }
+  },
+  components: {
+    chart: Chart,
+    stockChart: StockChart,
+    mapChart: MapChart
+  },
+  methods: {
+    activate (elem) {
+      this.selected = elem
+    },
+    handler () {
+      var args = arguments
+      for (var arg of args) {
+        if (arg instanceof Function) {
+          arg()
+        }
+      }
+    },
+    select (elem) {
+      this.currentView = elem
+      this.activate(elem)
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin: 0 auto;
+  margin-top: 60px;
+  width: 70%;
+}
+
+h1, h2 {
+  font-weight: normal;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+
+a {
+  color: #42b983;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.row > * {
+  padding: 0 20px;
+}
+.logos {
+  margin: 0 auto;
+  width:50%;
+}
+.logo-hc {
+  width: 70%;
+  height: auto;
+}
+.logo-vue {
+  width: 15%;
+  height: auto;
+}
+.button-grp {
+  margin: 20px 0;
+}
+button {
+  padding: 10px 20px;
+  outline: none;
+  background: #828ea0;
+  color: #fff;
+  font-size: 16px;
+  margin: 5px;
+  border: 0px;
+}
+button:hover {
+  background: #a7aeb8;
+  transition: background 0.2s;
+}
+button:active {
+  color: rgb(117, 117, 117);
+}
+.btnActive {
+  color: #6fcd98
+}
+</style>