@abi-software/flatmapvuer 0.6.3-vue.3.9 → 1.0.0

package/src/components/TreeControls.vue

@@ -1,231 +1,231 @@
-<template>
-  <div class="container">
-    <el-row>
-      <el-col :span="12">
-        <div class="title-text">Systems</div>
-      </el-col>
-    </el-row>
-    <div class="tree-container">
-      <el-tree
-        ref="tree"
-        node-key="key"
-        show-checkbox
-        :check-strictly="false"
-        :data="treeData"
-        :render-after-expand="false"
-        :default-expanded-keys="defaultExpandedKeys"
-        @check="checkChanged"
-      >
-        <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>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-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',
-  components: {
-    Checkbox,
-    CheckboxGroup,
-    ColorPicker,
-    Row,
-    Tree,
-  },
-  props: {
-    treeData: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    active: {
-      type: String,
-      default: '',
-    },
-    hover: {
-      type: String,
-      default: '',
-    },
-  },
-  data: function () {
-    return {
-      defaultExpandedKeys: ['All'],
-    }
-  },
-  unmounted: function () {
-    this.sortedPrimitiveGroups = undefined
-  },
-  methods: {
-    nodeIsActive: function (data) {
-      return this.active === data.models
-    },
-    nodeIsHover: function (data) {
-      return this.hover === data.models
-    },
-    changeActiveByNode: function (data) {
-      if (data.models) {
-        this.$emit('change-active', data.models)
-      }
-    },
-    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)
-      } else {
-        this.$emit('changed', { key: node.key, value: isChecked })
-      }
-    },
-    getBackgroundStyles: function (node) {
-      if ('colour' in node) {
-        return { background: node.colour }
-      }
-      return {}
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-
-.checkbox-container {
-  display: flex;
-  cursor: pointer;
-}
-
-.tree-controls {
-  position: absolute;
-  bottom: 0px;
-  transition: all 1s ease;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.container {
-  text-align: left;
-  overflow: none;
-  padding-top: 7px;
-  padding-bottom: 16px;
-  background: #ffffff;
-}
-
-.title-text {
-  width: 59px;
-  height: 20px;
-  color: rgb(48, 49, 51);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  margin-left: 8px;
-}
-
-.all-checkbox {
-  float: right;
-}
-
-.tree-container {
-  width: 260px;
-  border: 1px solid rgb(144, 147, 153);
-  border-radius: 4px;
-  background: #ffffff;
-  margin-top: 6px;
-  scrollbar-width: thin;
-
-  :deep(.el-tree) {
-    max-height: 240px;
-    min-height: 130px;
-    overflow: auto;
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 10px;
-      box-shadow: inset 0 0 6px #c0c4cc;
-    }
-  }
-
-  :deep(.el-tree-node__content) {
-    height: 22px;
-  }
-}
-
-:deep(.el-checkbox__input) {
-  &.is-indeterminate,
-  &.is-checked {
-    .el-checkbox__inner {
-      background-color: $app-primary-color;
-      border-color: $app-primary-color;
-    }
-  }
-}
-
-:deep(
-  .el-tree-node__children
-  .el-tree-node__children
-  .el-tree-node__content
-  > label.el-checkbox) {
-  display: none;
-}
-
-:deep(.el-checkbox__label) {
-  padding-left: 5px;
-  color: $app-primary-color !important;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0px;
-  line-height: 14px;
-}
-
-.activeItem {
-  background-color: #bbb !important;
-}
-
-.region-tree-node {
-  flex: 1;
-  color: $app-primary-color !important;
-  display: flex;
-  font-size: 12px;
-  line-height: 14px;
-  padding-left: 0px;
-  background-color: #fff;
-  width: 100%;
-}
-
-.hoverItem {
-  background-color: #eee !important;
-}
-</style>
+<template>
+  <div class="container">
+    <el-row>
+      <el-col :span="12">
+        <div class="title-text">Systems</div>
+      </el-col>
+    </el-row>
+    <div class="tree-container">
+      <el-tree
+        ref="tree"
+        node-key="key"
+        show-checkbox
+        :check-strictly="false"
+        :data="treeData"
+        :render-after-expand="false"
+        :default-expanded-keys="defaultExpandedKeys"
+        @check="checkChanged"
+      >
+        <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>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+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',
+  components: {
+    Checkbox,
+    CheckboxGroup,
+    ColorPicker,
+    Row,
+    Tree,
+  },
+  props: {
+    treeData: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    active: {
+      type: String,
+      default: '',
+    },
+    hover: {
+      type: String,
+      default: '',
+    },
+  },
+  data: function () {
+    return {
+      defaultExpandedKeys: ['All'],
+    }
+  },
+  unmounted: function () {
+    this.sortedPrimitiveGroups = undefined
+  },
+  methods: {
+    nodeIsActive: function (data) {
+      return this.active === data.models
+    },
+    nodeIsHover: function (data) {
+      return this.hover === data.models
+    },
+    changeActiveByNode: function (data) {
+      if (data.models) {
+        this.$emit('change-active', data.models)
+      }
+    },
+    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)
+      } else {
+        this.$emit('changed', { key: node.key, value: isChecked })
+      }
+    },
+    getBackgroundStyles: function (node) {
+      if ('colour' in node) {
+        return { background: node.colour }
+      }
+      return {}
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.checkbox-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.tree-controls {
+  position: absolute;
+  bottom: 0px;
+  transition: all 1s ease;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.container {
+  text-align: left;
+  overflow: none;
+  padding-top: 7px;
+  padding-bottom: 16px;
+  background: #ffffff;
+}
+
+.title-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.all-checkbox {
+  float: right;
+}
+
+.tree-container {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  margin-top: 6px;
+  scrollbar-width: thin;
+
+  :deep(.el-tree) {
+    max-height: 240px;
+    min-height: 130px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+
+  :deep(.el-tree-node__content) {
+    height: 22px;
+  }
+}
+
+:deep(.el-checkbox__input) {
+  &.is-indeterminate,
+  &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+:deep(
+  .el-tree-node__children
+  .el-tree-node__children
+  .el-tree-node__content
+  > label.el-checkbox) {
+  display: none;
+}
+
+:deep(.el-checkbox__label) {
+  padding-left: 5px;
+  color: $app-primary-color !important;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.activeItem {
+  background-color: #bbb !important;
+}
+
+.region-tree-node {
+  flex: 1;
+  color: $app-primary-color !important;
+  display: flex;
+  font-size: 12px;
+  line-height: 14px;
+  padding-left: 0px;
+  background-color: #fff;
+  width: 100%;
+}
+
+.hoverItem {
+  background-color: #eee !important;
+}
+</style>

package/src/components/index.js

@@ -1,7 +1,7 @@
-// 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'
-import Tooltip from './Tooltip.vue'
-
-export { FlatmapVuer, MultiFlatmapVuer, Tooltip}
+// 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'
+import Tooltip from './Tooltip.vue'
+
+export { FlatmapVuer, MultiFlatmapVuer, Tooltip}

package/src/components/legends/DynamicLegends.vue

@@ -1,106 +1,106 @@
-<template>
-  <div>
-    <el-row>
-      <el-col :span="12">
-        <div class="title-display-text">{{ title }}</div>
-      </el-col>
-    </el-row>
-    <div class="legends-group">
-      <el-row
-        v-for="item in lists"
-        :key="item[identifierKey]"
-        :label="item[identifierKey]"
-      >
-        <div class="legends-container">
-          <div
-            class="legends-visual"
-            :style="{ background: item[colourKey] }"
-          ></div>
-          <div class="label">
-            {{ capitalise(item[identifierKey]) }}
-          </div>
-        </div>
-      </el-row>
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import Vue from 'vue'
-import { ElCol as Col, ElRow as Row } from 'element-plus'
-Vue.use(Col)
-Vue.use(Row)
-
-export default {
-  name: 'DynamicLegends',
-  props: {
-    identifierKey: {
-      type: String,
-      default: 'id',
-    },
-    colourKey: {
-      type: String,
-      default: 'colour',
-    },
-    title: {
-      type: String,
-      default: '',
-    },
-    lists: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-  },
-  methods: {
-    capitalise: function (label) {
-      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-@use 'element-plus/theme-chalk/src/row';
-
-.legends-visual {
-  margin: 2px;
-  width: 11px;
-  margin-right: 5px;
-  display: inline-block;
-}
-
-.title-display-text {
-  width: 59px;
-  height: 20px;
-  color: rgb(48, 49, 51);
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 20px;
-  margin-left: 8px;
-}
-
-.label {
-  padding-left: 35px;
-  color: $app-primary-color;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0px;
-  line-height: 14px;
-}
-
-.legends-container {
-  display: flex;
-  cursor: pointer;
-}
-
-.legends-group {
-  width: 224;
-  border: 1px solid rgb(144, 147, 153);
-  border-radius: 4px;
-  background: #ffffff;
-  padding: 18px;
-}
-</style>
+<template>
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <div class="title-display-text">{{ title }}</div>
+      </el-col>
+    </el-row>
+    <div class="legends-group">
+      <el-row
+        v-for="item in lists"
+        :key="item[identifierKey]"
+        :label="item[identifierKey]"
+      >
+        <div class="legends-container">
+          <div
+            class="legends-visual"
+            :style="{ background: item[colourKey] }"
+          ></div>
+          <div class="label">
+            {{ capitalise(item[identifierKey]) }}
+          </div>
+        </div>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import Vue from 'vue'
+import { ElCol as Col, ElRow as Row } from 'element-plus'
+Vue.use(Col)
+Vue.use(Row)
+
+export default {
+  name: 'DynamicLegends',
+  props: {
+    identifierKey: {
+      type: String,
+      default: 'id',
+    },
+    colourKey: {
+      type: String,
+      default: 'colour',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    lists: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+  },
+  methods: {
+    capitalise: function (label) {
+      return label.charAt(0).toUpperCase() + label.slice(1).toLowerCase()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@use 'element-plus/theme-chalk/src/row';
+
+.legends-visual {
+  margin: 2px;
+  width: 11px;
+  margin-right: 5px;
+  display: inline-block;
+}
+
+.title-display-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.label {
+  padding-left: 35px;
+  color: $app-primary-color;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.legends-container {
+  display: flex;
+  cursor: pointer;
+}
+
+.legends-group {
+  width: 224;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  padding: 18px;
+}
+</style>