1.0.0 release candidate (#54)

* resolve merge conflict

* minor tweaks, fixes issue where top right hotspot not showing

* set min/max on Pane size

* styling for the guidance system

* fixed incorrect event handlers being removed

* added mobile vh support for safari + chrome

* added position relative to main stage

* add transparent prop to fixedhotspot

* styling of the guidance system

* added alignment class. Fixed bad webpack imports in guidance

* fix various build errors

* pre-merging with freyas stuff

* Slider block

* slider block styling

* issue with zindex solved by reseting it to auto

* okay one last ting witht he units i promise

* highlight multiple elements  in vis

* shadow boxes on toggle hotspot

* premerge

* fixed default array assingment

* added colours bus, components should now use preselected bus colours

* sliderBlock Emits event (#51)

* Dev (#50)

* resolve merge conflict

* minor tweaks, fixes issue where top right hotspot not showing

* set min/max on Pane size

* styling for the guidance system

* fixed incorrect event handlers being removed

* added mobile vh support for safari + chrome

* added position relative to main stage

* add transparent prop to fixedhotspot

* styling of the guidance system

* added alignment class. Fixed bad webpack imports in guidance

* fix various build errors

* pre-merging with freyas stuff

* Slider block

* slider block styling

* issue with zindex solved by reseting it to auto

* okay one last ting witht he units i promise

* highlight multiple elements  in vis

* shadow boxes on toggle hotspot

* premerge

* fixed default array assingment

* added colours bus, components should now use preselected bus colours

Co-authored-by: Robert King <robertkng104@gmail.com>
Co-authored-by: Daniel Torren Peraire <dt1716@ic.ac.uk>

* bump version to 0.3.0

* removed duplicate export of the same thing

* added missing bracket

* removed critical dependency thing (i think)

* sliderBlock Emits event

* 🤞

Co-authored-by: FreyaXH <40359318+FreyaXH@users.noreply.github.com>
Co-authored-by: Robert King <robertkng104@gmail.com>
Co-authored-by: Daniel Torren Peraire <dt1716@ic.ac.uk>
Co-authored-by: Robert Jones <rdj4318@ic.ac.uk>

* Updated @impvis/components

* iv-pane now correctly overflows text

* bump to beta version

* fixed Pane adding uneeded scrollbar

* Added version checker

* Fixed z-index issure with titleBar

* prevent content in main-stage from overflowing its container

* bump version to beta2

* pane work continues

* fixed z-index weirdness, removed need for title component, integrated into iv-visualisation

* no longer exporting iv-title-bar

* bump to beta3

* renamed to SliderBlock

* working sidebar sections

* added custom meter component, working sidebars, now just need theming

* added proper themeing support

* sections have working styling

* added placeholder navigation

* bump to 1.0.0-beta1

* final 1.0.0 candidate

* fixed duplicate key in GuidanceModal

Co-authored-by: Unknown <XH2416@ic.ac.uk>
Co-authored-by: Robert King <robertkng104@gmail.com>
Co-authored-by: Daniel Torren Peraire <dt1716@ic.ac.uk>
Co-authored-by: FreyaXH <40359318+FreyaXH@users.noreply.github.com>
Co-authored-by: Puredbest <67276280+Puredbest@users.noreply.github.com>
Co-authored-by: Robert Jones <rdj4318@ic.ac.uk>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impvis/components",
-  "version": "0.3.2",
+  "version": "1.0.0",
   "license": "BSD-3-Clause",
   "main": "./dist/impvis-components.js",
   "unpkg": "./dist/impvis-components.umd.js",
@@ -15,19 +15,22 @@
     "examples:dragdrop": "vue-cli-service serve ./Examples/SVGDragAndDrop.js"
   },
   "dependencies": {
+    "compare-versions": "^3.6.0",
     "component-fixture": "^1.14.0",
     "core-js": "^3.6.5",
     "save": "^2.4.0",
     "vue-resize": "^0.5.0"
   },
   "peerDependencies": {
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-awesome": "^4.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^3.1.1",
     "@rbnlffl/rollup-plugin-eslint": "^1.0.0",
+    "@rollup/plugin-alias": "^3.1.1",
     "@rollup/plugin-commonjs": "^13.0.0",
     "@rollup/plugin-image": "^2.0.5",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^8.1.0",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",

rollup.config.js

@@ -7,11 +7,13 @@ import resolve from "@rollup/plugin-node-resolve";
 import eslint from "@rbnlffl/rollup-plugin-eslint";
 import alias from "@rollup/plugin-alias";
 import {terser} from "rollup-plugin-terser";
-
+import json from "@rollup/plugin-json";
 const external = [
     'vue',
     'katex',
-    'katex/dist/katex.min.css' 
+    'katex/dist/katex.min.css',
+    'vue-awesome/components/Icon',
+    'vue-awesome/icons'
 ]
 const pluginConfig = [
     alias({
@@ -26,6 +28,7 @@ const pluginConfig = [
     commonjs(), 
     scss({output:'./dist/impvis-components.css'}),
     image(),
+    json(),
     vue({css:false}),
     eslint(),
     terser()

src/Theme.js

@@ -0,0 +1,36 @@
+class Theme{
+    constructor(baseHex){
+        this.main = baseHex;
+        this.light = this.generateTint(0.2)
+        this.dark = this.generateShade(0.8)
+        this.highlight = this.generateTint(0.8)
+    }
+    generateShade(fraction){
+        if(fraction > 1 || fraction < 0) throw Error("fraction must be between 0 and 1");
+            const colorRGB = Theme.hexToRGB(this.main)
+            return Theme.rgbToHex(...colorRGB.map( (v) => Math.round(fraction * (v))))
+    }
+    generateTint(fraction){
+        if(fraction > 1 || fraction < 0) throw Error("fraction must be between 0 and 1");
+        const colorRGB = Theme.hexToRGB(this.main)
+        return Theme.rgbToHex(...colorRGB.map( (v) => Math.round(v + fraction * (255 - v))))
+    }
+    static hexToRGB(hex){
+        const subhex = hex.substring(1)
+        if(subhex.length < 6) throw Error("Must include hex code starting with #")
+        return [parseInt(subhex.substring(0,2),16),parseInt(subhex.substring(2,4),16),parseInt(subhex.substring(4,6),16)]
+    }
+    static rgbToHex(r,g,b){
+        return `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}`
+    }
+}
+Theme.DeepBlue = new Theme('#0b3053')
+Theme.Blue = new Theme('#008bd2')
+Theme.Turqouise = new Theme('#11b1a2')
+Theme.Lime = new Theme('#a8cc6a')
+Theme.Purple = new Theme('#62296b')
+Theme.Red = new Theme('#cf103f')
+Theme.Orange = new Theme('#ef7814')
+Theme.Yellow = new Theme('#fcd916')
+Theme.Gold = new Theme('#f6b00f')
+export default Theme;

src/buses/guidanceBus.js

@@ -1,3 +1,5 @@
 import Vue from 'vue';
-const guidanceBus = new Vue();
+const guidanceBus = new Vue({
+    data:{ active:false}
+});
 export default guidanceBus;

src/components/Button/Button.vue

@@ -39,7 +39,8 @@ $disabledColor:#D3D3D3;
     text-align: center;
     text-decoration: none;
     display: inline-block;
-    font-size: 1rem;
+    font-size: 1.2rem;
+    height:1.45rem;
     padding: 0.25em 0.5em;
     background-color: $green;
     color:$white;

src/components/DropdownList/DropdownList.vue

@@ -59,7 +59,6 @@ export default {
 <style scoped>
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   display: inline-block;
 }

src/components/DropdownList/DropdownListElement.vue

@@ -29,8 +29,6 @@ export default {
 <style>
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content-element {
-    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 12px;
     font-weight: normal;
     letter-spacing: .05rem;
     text-align: center;

src/components/DropdownTextBox/DropdownTextBox.vue

@@ -90,8 +90,6 @@ export default {
     display: block;
     border: 1px solid rgba(0, 0, 0, 0.2);
     color: black;
-    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 12px;
     font-weight: normal;
     letter-spacing: .05rem;
     text-align: center;

src/components/Meter/Meter.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="iv-meter">
+        <span class="iv-meter-bar" :style="{'width':widthPercentage}"></span>
+    </div>
+</template>
+<script>
+export default {
+    name:'iv-meter',
+    props:{
+        min:{
+            type:Number,
+            required:true
+        },
+        max:{
+            type:Number,
+            required:true
+        },
+        value:{
+            type:Number,
+            required:true
+        }
+    },
+    mounted(){
+        if(this.max < this.min) throw RangeError('The minimum value may not exceed the maximum value')
+    },
+    computed:{
+        boundedValue(){
+            return (this.value > this.min)? ((this.value < this.max)? this.value : this.max) : this.min
+        },
+        widthPercentage(){
+            return `${100*(this.boundedValue - this.min)/(this.max - this.min)}%`
+        }
+    }
+}
+</script>
+<style lang="scss">
+.iv-meter{
+    width:100%;
+    min-height:5px;
+    background:#aaa;
+    .iv-meter-bar{
+        min-height:5px;
+        height:100%;
+        background:#ff1447;
+        display: block;
+        text-indent: -9999px;
+    }
+}
+</style>

src/components/Meter/index.js

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

src/components/Navigation/PageIndicator.vue

@@ -0,0 +1,52 @@
+<template>
+    <div id="iv-page-indicator">
+        <a v-for="i in number_of_pages" :key="i" href="#" :id="`iv-page-indicator-no-${i}`"
+        class="iv-page-indicator-button" :class="{'iv-current-page': (i) === current_page}">{{i}}</a>
+    </div>
+</template>
+<script>
+export default {
+    name:'iv-page-indicator',
+    props:{
+        number_of_pages:{
+            type:Number,
+            required:true,
+            default: 5 
+        },
+        current_page:{
+            type:Number,
+            required:true,
+            default:3
+        }
+    }
+}
+</script>
+<style lang="scss">
+@import "src/globals.scss";
+#iv-page-indicator{
+    display:flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    z-index:$titlebarZLevel;
+    margin-left:0.5rem;
+}
+.iv-page-indicator-button{
+    text-decoration: none;
+    padding: 0.1rem 0.3rem;
+    margin: 0 0.3rem;
+    font-size:1.1rem;
+    line-height: 1.1rem;
+    font-weight:600;
+    border-radius: 7px;
+    box-sizing: border-box;
+    border: 0.15rem solid $white;
+    color:$white;
+    &:visited{
+        color:$white;
+    }
+    &.iv-current-page{
+        color:$primaryImperialBlue;
+        background: $white;
+    }
+}
+</style>

src/components/Navigation/PaneNavigator.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="iv-pane-navigator">
+        <a href="#" id="iv-pagination-prev" class="iv-button">Previous</a>
+        <a href="#" id="iv-pagination-next" class="iv-button">Next</a>
+    </div>    
+</template>
+<script>
+export default{
+    name:'iv-pane-navigator'
+}
+</script>
+<style lang="scss">
+@import 'src/globals.scss';
+.iv-pane-navigator{
+    height:3rem;
+    flex: 0 0 auto;
+    display:flex;
+    align-items: center;
+    justify-content: space-around;
+    flex-direction: row;
+    background:$lightgray;
+    position:relative;
+    a{
+        width:5rem;
+        background:$primaryDarkBlue;
+        &:hover{
+            background:#3e668b
+        }
+    }
+    &::before{
+        content:"";
+        position: absolute;
+        left:0;
+        top:0;
+        width:100%;
+        height:100%;
+        z-index:-1;
+        box-shadow: -10px 10px 10px 10px #e4e4e4;
+    }
+}
+</style>

src/components/Navigation/index.js

@@ -0,0 +1,3 @@
+import PaneNavigator from './PaneNavigator.vue'
+import PageIndicator from './PageIndicator.vue'
+export {PaneNavigator,PageIndicator};