Merge pull request #62 from Imperial-visualizations/dev

Version 1.0.4

Author: Puredbest

Template/App.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <iv-visualisation :title="projectName">
+            <div class="iv-welcome-message">
+                <!-- <img src='./assets/ImpVis-logo.png' alt="ImpVisLogo" height="50"/> -->
+                <h1> Welcome to Imperial Visualisations!</h1>
+                <p> Your project, {{projectName}} has succesfully been set up using the NodeJS template!</p>
+                <iv-hover-text></iv-hover-text>
+            </div>
+            
+
+            <template #hotspots>
+                <iv-pane position='left' format='overlay' opacity=1></iv-pane>
+
+                <iv-toggle-hotspot position='top' title='Toggle Hotspot' glass=true>
+                    I am in a toggle hotspot
+                </iv-toggle-hotspot>
+
+                <iv-fixed-hotspot position='topright'>
+                    I am in a fixed hotspot
+                </iv-fixed-hotspot>
+            </template>
+        </iv-visualisation>
+
+        
+    </div>
+</template>
+<script>
+import {name} from '../package.json';
+export default {
+    name:"App",
+    data(){
+        return {
+            projectName: name
+        }
+    }
+}
+</script>
+<style>
+.iv-welcome-message{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 50px;
+}
+</style>

Template/main.js

@@ -0,0 +1,8 @@
+import Vue from "vue";
+import ImpVisLib from "../src/main.js";
+import App from "./App.vue";
+Vue.use(ImpVisLib);
+Vue.config.productionTip= false;
+new Vue({
+    render:h=>h(App)
+}).$mount('#app');

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@impvis/components",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "BSD-3-Clause",
   "main": "./dist/impvis-components.js",
   "unpkg": "./dist/impvis-components.umd.js",
@@ -12,7 +12,8 @@
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "examples:tabs": "vue-cli-service serve ./Examples/Examples_Tabs.js",
-    "examples:dragdrop": "vue-cli-service serve ./Examples/SVGDragAndDrop.js"
+    "examples:dragdrop": "vue-cli-service serve ./Examples/SVGDragAndDrop.js",
+    "template": "vue-cli-service serve ./Template/main.js"
   },
   "dependencies": {
     "compare-versions": "^3.6.0",

package.json

@@ -33,11 +33,11 @@ export default {
             type:Array,
             default: () => ['left','right','top','bottom']
         },
-        hotspotColumnWidth:{
+        hotspotColumnSize:{
             type:String,
             default:"250px"
         },
-        hotspotColumnHeight:{
+        hotspotRowSize:{
             type:String,
             default:"250px"
         },
@@ -72,8 +72,8 @@ export default {
     computed:{
         gridStyle(){
             return {
-                'grid-template-columns': `${this.hotspotColumnWidth} 1fr ${this.hotspotColumnWidth}`,
-                'grid-template-rows': `${this.hotspotColumnHeight} 1fr ${this.hotspotColumnHeight}`
+                'grid-template-columns': `${this.hotspotColumnSize} 1fr ${this.hotspotColumnSize}`,
+                'grid-template-rows': `${this.hotspotRowSize} 1fr ${this.hotspotRowSize}`
             }
         },
         showSpots(){