@abi-software/flatmapvuer 0.5.9 → 0.6.0-vue3-0

package/src/components/SelectionsGroup.vue

@@ -2,7 +2,7 @@
   <div class="selections-container">
     <el-row>
       <el-col :span="12">
-        <div class="checkall-display-text">{{title}}</div>
+        <div class="checkall-display-text">{{ title }}</div>
       </el-col>
       <el-col :span="12">
         <el-checkbox
@@ -11,7 +11,8 @@
           :indeterminate="isIndeterminate"
           v-model="checkAll"
           @change="handleCheckAllChange"
-        >Display all</el-checkbox>
+          >Display all</el-checkbox
+        >
       </el-col>
     </el-row>
     <el-checkbox-group
@@ -21,20 +22,25 @@
       @change="handleCheckedItemsChange"
     >
       <div class="checkbox-group-inner">
-        <el-row v-for="item in selections" :key="item[identifierKey]" :label="item[identifierKey]">
+        <el-row
+          v-for="item in selections"
+          :key="item[identifierKey]"
+          :label="item[identifierKey]"
+        >
           <div class="checkbox-container">
             <el-checkbox
               class="my-checkbox"
               :label="item[identifierKey]"
               @change="visibilityToggle(item[identifierKey], $event)"
-              :checked="!('enabled' in item) || (item.enabled === true)">
+              :checked="!('enabled' in item) || item.enabled === true"
+            >
               <el-row class="checkbox-row">
-                <el-col :span="4">
-                <div class="path-visual" :style="getLineStyles(item)"></div>
+                <el-col :span="4" v-if="hasLineStyles(item)">
+                  <div class="path-visual" :style="getLineStyles(item)"></div>
                 </el-col>
                 <el-col :span="20">
                   <div :style="getBackgroundStyles(item)">
-                    {{item[labelKey]}}
+                    {{ item[labelKey] }}
                   </div>
                 </el-col>
               </el-row>
@@ -48,125 +54,123 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
 import {
-  Checkbox,
-  CheckboxGroup,
-  Col,
-  Row
-} from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
-Vue.use(Col);
-Vue.use(Row);
-
+  ElCheckbox as Checkbox,
+  ElCheckboxGroup as CheckboxGroup,
+  ElCol as Col,
+  ElRow as Row,
+} from 'element-plus'
 
 export default {
-  name: "SelectionsGroup",
+  name: 'SelectionsGroup',
+  components: {
+    Checkbox,
+    CheckboxGroup,
+    Col,
+    Row,
+  },
   methods: {
     /**
      * Function to toggle paths to default.
      * Also called when the associated button is pressed.
      */
-    reset: function() {
-      this.checkAll = true;
-      this.checkedItems = [];
-      this.selections.forEach(item => {
+    reset: function () {
+      this.checkAll = true
+      this.checkedItems = []
+      this.selections.forEach((item) => {
         if (!('enabled' in item) || item.enabled === true) {
-          this.checkedItems.push(item[this.identifierKey]);
+          this.checkedItems.push(item[this.identifierKey])
         } else {
-          this.checkAll = false;
+          this.checkAll = false
         }
-      });
+      })
     },
-    visibilityToggle: function(key, value) {
-      this.$emit("changed", {key, value});
+    visibilityToggle: function (key, value) {
+      this.$emit('changed', { key, value })
     },
-    handleCheckedItemsChange: function(value) {
-      let checkedCount = value.length;
-      this.checkAll = checkedCount === this.selections.length;
+    handleCheckedItemsChange: function (value) {
+      let checkedCount = value.length
+      this.checkAll = checkedCount === this.selections.length
     },
-    handleCheckAllChange: function(val) {
-      this.checkedItems = val ? this.selections.map(a => a[this.identifierKey]) : [];
-      this.$emit("checkAll",
-      {
-        keys: this.selections.map(a => a[this.identifierKey]),
-        value: val
-      });
+    handleCheckAllChange: function (val) {
+      this.checkedItems = val
+        ? this.selections.map((a) => a[this.identifierKey])
+        : []
+      this.$emit('checkAll', {
+        keys: this.selections.map((a) => a[this.identifierKey]),
+        value: val,
+      })
     },
-    getBackgroundStyles: function(item) {
-      if ('colour' in item && this.colourStyle === "background") {
-        return { background: item.colour };
+    getBackgroundStyles: function (item) {
+      if ('colour' in item && this.colourStyle === 'background') {
+        return { background: item.colour }
       }
-      return {};
+      return {}
     },
-    getLineStyles: function(item) {
-      if ('colour' in item && this.colourStyle === "line") {
-        if (('dashed' in item) && (item.dashed === true)) {
-          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`;
-          return { background };
-        }
-        else {
-          return { background: item.colour };
+    hasLineStyles: function(item) {
+      return 'colour' in item && this.colourStyle === 'line'
+    },
+    getLineStyles: function (item) {
+      if ('colour' in item && this.colourStyle === 'line') {
+        if ('dashed' in item && item.dashed === true) {
+          const background = `repeating-linear-gradient(90deg,${item.colour},${item.colour} 6px,transparent 0,transparent 9px)`
+          return { background }
+        } else {
+          return { background: item.colour }
         }
       }
-      return { display: "None"};
-    }
+      return { display: 'None' }
+    },
   },
   props: {
     colourStyle: {
       type: String,
-      default: "line"   
+      default: 'line',
     },
     identifierKey: {
       type: String,
-      default: "id"
+      default: 'id',
     },
     labelKey: {
       type: String,
-      default: "label"
+      default: 'label',
     },
     title: {
       type: String,
-      default: ""
+      default: '',
     },
     selections: {
       type: Array,
-      default: function() {
-        return [];
+      default: function () {
+        return []
       },
     },
   },
   computed: {
-    isIndeterminate: function() {
-      const count = this.checkedItems.length;
-      if ((count === 0) || this.checkAll){
-        return false;
+    isIndeterminate: function () {
+      const count = this.checkedItems.length
+      if (count === 0 || this.checkAll) {
+        return false
       }
-      return true;
-    }
+      return true
+    },
   },
-  data: function() {
+  data: function () {
     return {
       checkedItems: [],
       checkAll: true,
-    };
+    }
   },
-  mounted: function() {
-    this.reset();
-  }
-};
+  mounted: function () {
+    this.reset()
+  },
+}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/checkbox";
-@import "~element-ui/packages/theme-chalk/src/checkbox-group";
-@import "~element-ui/packages/theme-chalk/src/row";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/checkbox';
+@use 'element-plus/theme-chalk/src/checkbox-group';
+@use 'element-plus/theme-chalk/src/row';
 
 .path-visual {
   margin: 3px 0;
@@ -192,12 +196,14 @@ export default {
 }
 
 .all-checkbox {
+  height:20px;
   float: right;
 }
 
 .checkbox-container {
   display: flex;
   cursor: pointer;
+  width: 100%;
 }
 
 .checkbox-group {
@@ -216,7 +222,7 @@ export default {
   padding: 18px;
 }
 
-::v-deep .el-checkbox__label {
+:deep(.el-checkbox__label) {
   padding-left: 5px;
   color: $app-primary-color;
   font-size: 12px;
@@ -226,7 +232,7 @@ export default {
   width: 100%;
 }
 
-::v-deep .el-checkbox__input {
+:deep(.el-checkbox__input) {
   &.is-indeterminate,
   &.is-checked {
     .el-checkbox__inner {
@@ -236,7 +242,12 @@ export default {
   }
 }
 
-::v-deep .el-checkbox__label {
+:deep(.el-row) {
+  height:20px;
+  margin-bottom: 0;
+}
+
+:deep(.el-checkbox__label) {
   color: $app-primary-color !important;
 }
 
@@ -244,6 +255,4 @@ export default {
   width: 100%;
   top: 2px;
 }
-
 </style>
-

package/src/components/Tooltip.vue

@@ -1,47 +1,45 @@
 <template>
   <div class="tooltip-container">
     <template v-if="annotationDisplay">
-      <annotation-tool :annotationEntry="annotationEntry"/>
+      <annotation-tool :annotationEntry="annotationEntry" />
     </template>
     <template v-else>
-      <provenance-popup :entry="entry"/>
+      <provenance-popup :entry="entry" />
     </template>
   </div>
 </template>
 
-
 <script>
 /* eslint-disable no-alert, no-console */
-import AnnotationTool from "./AnnotationTool";
-import ProvenancePopup from "./ProvenancePopup";
+import AnnotationTool from './AnnotationTool.vue'
+import ProvenancePopup from './ProvenancePopup.vue'
 
 export default {
-  name: "Tooltip",
+  name: 'Tooltip',
   components: {
     AnnotationTool,
     ProvenancePopup,
   },
-  props: { 
+  props: {
     entry: {
       type: Object,
     },
     annotationDisplay: {
       type: Boolean,
-      default: false
+      default: false,
     },
     annotationEntry: {
       type: Object,
     },
   },
-};
+}
 </script>
 
-<style scoped lang="scss">
-
+<style lang="scss" scoped>
 .tooltip-container {
-  text-align:justify;
+  text-align: justify;
   border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   pointer-events: auto;
   background: #fff;
   border: 1px solid $app-primary-color;

package/src/components/TreeControls.vue

@@ -2,9 +2,7 @@
   <div class="container">
     <el-row>
       <el-col :span="12">
-        <div class="title-text">
-          Systems
-        </div>
+        <div class="title-text">Systems</div>
       </el-col>
     </el-row>
     <div class="tree-container">
@@ -18,20 +16,21 @@
         :default-expanded-keys="defaultExpandedKeys"
         @check="checkChanged"
       >
-        <span
-          slot-scope="{ node, data }"
-          class="region-tree-node"
-          :class="{
-            activeItem: nodeIsActive(data),
-            hoverItem: nodeIsHover(data),
-          }"
-          @click="changeActiveByNode(data)"
-          @mouseover="changeHoverByNode(data)"
-        >
-          <div :style="getBackgroundStyles(data)">
-            {{ node.label }}
-          </div>
-        </span>
+        <template #default="{ node, data }">
+          <span
+            class="region-tree-node"
+            :class="{
+              activeItem: nodeIsActive(data),
+              hoverItem: nodeIsHover(data),
+            }"
+            @click="changeActiveByNode(data)"
+            @mouseover="changeHoverByNode(data)"
+          >
+            <div :style="getBackgroundStyles(data)">
+              {{ node.label }}
+            </div>
+          </span>
+        </template>
       </el-tree>
     </div>
   </div>
@@ -39,86 +38,89 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Checkbox, CheckboxGroup, ColorPicker, Row, Tree } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-locale.use(lang);
-Vue.use(Checkbox);
-Vue.use(CheckboxGroup);
-Vue.use(ColorPicker);
-Vue.use(Row);
-Vue.use(Tree);
+import {
+  ElCheckbox as Checkbox,
+  ElCheckboxGroup as CheckboxGroup,
+  ElColorPicker as ColorPicker,
+  ElRow as Row,
+  ElTree as Tree,
+} from 'element-plus'
 
 /**
  * A vue component for toggling visibility of various regions.
  */
 export default {
-  name: "TreeControls",
+  name: 'TreeControls',
+  components: {
+    Checkbox,
+    CheckboxGroup,
+    ColorPicker,
+    Row,
+    Tree,
+  },
   props: {
     treeData: {
       type: Array,
       default: function () {
-        return [];
-      }
+        return []
+      },
     },
     active: {
       type: String,
-      default: ""
+      default: '',
     },
     hover: {
       type: String,
-      default: ""
-    }
+      default: '',
+    },
   },
   data: function () {
     return {
-      defaultExpandedKeys: ["All"],
-    };
+      defaultExpandedKeys: ['All'],
+    }
   },
   destroyed: function () {
-    this.sortedPrimitiveGroups = undefined;
+    this.sortedPrimitiveGroups = undefined
   },
   methods: {
-    nodeIsActive: function(data) {
-      return this.active === data.models;
+    nodeIsActive: function (data) {
+      return this.active === data.models
     },
-    nodeIsHover: function(data) {
-      return this.hover === data.models;
+    nodeIsHover: function (data) {
+      return this.hover === data.models
     },
-    changeActiveByNode: function(data) {
+    changeActiveByNode: function (data) {
       if (data.models) {
-        this.$emit("change-active", data.models);
+        this.$emit('change-active', data.models)
       }
     },
-    changeHoverByNode: function() {
+    changeHoverByNode: function () {
       //if (data.models) {
       //  this.$emit("change-active", data.models);
       //}
     },
     checkChanged: function (node, data) {
-      const isChecked = data.checkedKeys.includes(node.key);
-      if (node.key === "All") {
-        this.$emit("checkAll", isChecked);
+      const isChecked = data.checkedKeys.includes(node.key)
+      if (node.key === 'All') {
+        this.$emit('checkAll', isChecked)
       } else {
-        this.$emit("changed", {key: node.key, value: isChecked});
+        this.$emit('changed', { key: node.key, value: isChecked })
       }
     },
-    getBackgroundStyles: function(node) {
+    getBackgroundStyles: function (node) {
       if ('colour' in node) {
-        return { background: node.colour };
+        return { background: node.colour }
       }
-      return {};
+      return {}
     },
   },
-};
+}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/checkbox";
-@import "~element-ui/packages/theme-chalk/src/row";
-@import "~element-ui/packages/theme-chalk/src/tree";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/checkbox';
+@use 'element-plus/theme-chalk/src/row';
+@use 'element-plus/theme-chalk/src/tree';
 
 .checkbox-container {
   display: flex;
@@ -165,7 +167,7 @@ export default {
   margin-top: 6px;
   scrollbar-width: thin;
 
-  ::v-deep .el-tree {
+  :deep(.el-tree) {
     max-height: 240px;
     min-height: 130px;
     overflow: auto;
@@ -179,12 +181,12 @@ export default {
     }
   }
 
-  ::v-deep .el-tree-node__content {
+  :deep(.el-tree-node__content) {
     height: 22px;
   }
 }
 
-::v-deep .el-checkbox__input {
+:deep(.el-checkbox__input) {
   &.is-indeterminate,
   &.is-checked {
     .el-checkbox__inner {
@@ -194,11 +196,15 @@ export default {
   }
 }
 
-::v-deep .el-tree-node__children .el-tree-node__children .el-tree-node__content > label.el-checkbox {
+:deep(
+  .el-tree-node__children
+  .el-tree-node__children
+  .el-tree-node__content
+  > label.el-checkbox) {
   display: none;
 }
 
-::v-deep .el-checkbox__label {
+:deep(.el-checkbox__label) {
   padding-left: 5px;
   color: $app-primary-color !important;
   font-size: 12px;
@@ -220,12 +226,9 @@ export default {
   padding-left: 0px;
   background-color: #fff;
   width: 100%;
-
 }
 
 .hoverItem {
   background-color: #eee !important;
 }
-
 </style>
-

package/src/components/index.js

@@ -1,9 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import FlatmapVuer from "./FlatmapVuer.vue";
-import MultiFlatmapVuer from "./MultiFlatmapVuer.vue";
-  
-export {
-  FlatmapVuer,
-  MultiFlatmapVuer
-};
+import FlatmapVuer from './FlatmapVuer.vue'
+import MultiFlatmapVuer from './MultiFlatmapVuer.vue'
+
+export { FlatmapVuer, MultiFlatmapVuer }

package/src/components/legends/DynamicLegends.vue

@@ -27,48 +27,43 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import Vue from "vue";
-import { Col, Row } from "element-ui";
-import lang from "element-ui/lib/locale/lang/en";
-import locale from "element-ui/lib/locale";
-
-locale.use(lang);
-Vue.use(Col);
-Vue.use(Row);
+import Vue from 'vue'
+import { ElCol as Col, ElRow as Row } from 'element-plus'
+Vue.use(Col)
+Vue.use(Row)
 
 export default {
-  name: "DynamicLegends",
+  name: 'DynamicLegends',
   props: {
     identifierKey: {
       type: String,
-      default: "id",
+      default: 'id',
     },
     colourKey: {
       type: String,
-      default: "colour",
+      default: 'colour',
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     lists: {
       type: Array,
       default: function () {
-        return [];
+        return []
       },
     },
   },
   methods: {
     capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()
     },
   },
-};
+}
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import "~element-ui/packages/theme-chalk/src/row";
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/row';
 
 .legends-visual {
   margin: 2px;
@@ -109,4 +104,3 @@ export default {
   padding: 18px;
 }
 </style>
-