@abi-software/mapintegratedvuer 1.21.1 → 1.21.2

package/src/components/ContextHelp.vue

@@ -1,50 +1,46 @@
 <template>
   <div v-if="showHelp" class="content-container">
-    <el-card class="box-card"
+    <el-card
+      class="box-card"
       @mouseover="isActive = true"
       @mouseleave="isActive = false"
-      :class="{active: isActive}">
-      <div slot="header" class="header">
-        <span>Needing some help?</span>
-        <i class="el-icon-close" style="float: right; padding: 3px 0" @click="close"></i>
-      </div>
+      :class="{ active: isActive }"
+    >
+      <template v-slot:header>
+        <div class="header">
+          <span>Needing some help?</span>
+          <i class="el-icon-close" style="float: right; padding: 3px 0" @click="close"></i>
+        </div>
+      </template>
       <div class="content">
-      <div v-for="o in steps" :key="o" class="step-item">{{o.description}}</div>
+        <div v-for="o in steps" :key="o" class="step-item">{{ o.description }}</div>
       </div>
     </el-card>
   </div>
 </template>
 
 <script>
-/* eslint-disable no-alert, no-console */
-import { ElCard as Card } from "element-plus";
-
 export default {
-  name: "ContextHelp",
-  components: {
-    Card
-  },
+  name: 'ContextHelp',
   props: {
     /**
      * Object containing information for
      * the required viewing.
      */
-    entry: Object
+    entry: Object,
   },
-  data: function() {
-    return  {
+  data: function () {
+    return {
       isActive: false,
       showHelp: true,
-      steps: [
-      ]
-    }
+      steps: [],
+    };
   },
   methods: {
-      close: function(){
-        this.showHelp = false
-      },
-
-  }
+    close: function () {
+      this.showHelp = false;
+    },
+  },
 };
 </script>
 
@@ -56,7 +52,7 @@ export default {
   text-align: left;
 }
 
-.header{
+.header {
   height: 20px;
 }
 

package/src/components/CustomSplitter.vue

@@ -1,86 +1,77 @@
 <template>
   <div style="height: 100%; width: 100%">
-    <resize-sensor
-      @resize="calculateStyles(index)">
-    </resize-sensor>
-    <splitpanes
-      class="default-theme"
-      :horizontal="isHorizontal"
-      :maximize-panes="false"
-    >
-      <template v-for="(child) in children" :key="child">
+    <resize-sensor @resize="calculateStyles(index)"></resize-sensor>
+    <splitpanes class="default-theme" :horizontal="isHorizontal" :maximize-panes="false">
+      <template v-for="child in children" :key="child">
         <pane :ref="child" @vue:beforeUnmount="childUnmounted(child)">
           <resize-sensor
             v-if="customLayout[child].content"
-            @resize="calculateStyles(child)">
-          </resize-sensor>
-          <custom-splitter
-            v-else
-            :key="child"
-            :index="child"
-          />
+            @resize="calculateStyles(child)"
+          ></resize-sensor>
+          <custom-splitter v-else :key="child" :index="child" />
         </pane>
       </template>
     </splitpanes>
   </div>
 </template>
 
-
 <script>
-/* eslint-disable no-alert, no-console */
 import EventBus from './EventBus';
-import ResizeSensor from "./ResizeSensor.vue";
-import { Splitpanes, Pane } from "splitpanes";
-import "splitpanes/dist/splitpanes.css";
+import ResizeSensor from './ResizeSensor.vue';
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
 import { mapStores } from 'pinia';
 import { useSplitFlowStore } from '../stores/splitFlow';
 
 export default {
-  name: "CustomSplitter",
+  name: 'CustomSplitter',
   components: {
     Splitpanes,
     Pane,
-    ResizeSensor
+    ResizeSensor,
   },
   props: {
     index: {
       type: String,
-      default: function() {
-        return "split-1";
-      }
-    }
+      default: function () {
+        return 'split-1';
+      },
+    },
   },
   methods: {
-    requestStylesUpdate: function(refName) {
+    requestStylesUpdate: function (refName) {
       if (this.$refs) {
-        if (refName in this.$refs && this.$refs[refName] &&
-        this.$refs[refName][0] && this.$refs[refName][0].$el) {
+        if (
+          refName in this.$refs &&
+          this.$refs[refName] &&
+          this.$refs[refName][0] &&
+          this.$refs[refName][0].$el
+        ) {
           const el = this.$refs[refName][0].$el;
           const rect = el.getBoundingClientRect();
-          EventBus.emit("PaneResize", {refName, rect});
-
+          EventBus.emit('PaneResize', { refName, rect });
         }
       }
     },
     /**
      * Callback when the vuers emit a selected event.
      */
-    calculateStyles: function(refName) {
+    calculateStyles: function (refName) {
       if (this.$refs) {
-        if (refName.startsWith("pane")) {
+        if (refName.startsWith('pane')) {
           this.requestStylesUpdate(refName);
-        } else if (refName.startsWith("split")) {
+        } else if (refName.startsWith('split')) {
           this.customLayout[refName].children.forEach((childName) => {
-            if (childName.startsWith("pane")) {
-               this.requestStylesUpdate(childName);
+            if (childName.startsWith('pane')) {
+              this.requestStylesUpdate(childName);
             }
           });
         }
       }
     },
-    childUnmounted: function(refName) {
-      EventBus.emit("PaneUnmounted", {refName});
-    }
+    childUnmounted: function (refName) {
+      EventBus.emit('PaneUnmounted', { refName });
+    },
   },
   computed: {
     ...mapStores(useSplitFlowStore),
@@ -98,7 +89,6 @@ export default {
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-
 :deep() {
   .splitpanes.default-theme .splitpanes__pane {
     background-color: #ccc !important;
@@ -110,7 +100,7 @@ export default {
   margin: 0px 0px 0px 0px !important;
   z-index: 6 !important;
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     left: 0;
     top: 0;
@@ -147,5 +137,4 @@ export default {
     height: 100%;
   }
 }
-
 </style>

package/src/components/DatasetHeader.vue

@@ -1,16 +1,27 @@
 <template>
-  <div class="dataset-title-container" ref="container" @mouseleave="cardDisplayed=false">
+  <div class="dataset-title-container" ref="container" @mouseleave="cardDisplayed = false">
     <div @click="openCard($event)" class="dataset-link">
       <el-link class="dataset-title">
-        {{entry.datasetTitle}}
-        <i v-show="!cardDisplayed && (entry.datasetImage || entry.datasetDescription)" class="el-icon-arrow-down el-icon--right"></i>
-        <i v-show="cardDisplayed && (entry.datasetImage || entry.datasetDescription)" class="el-icon-arrow-up el-icon--right"></i>
+        {{ entry.datasetTitle }}
+        <i
+          v-show="!cardDisplayed && (entry.datasetImage || entry.datasetDescription)"
+          class="el-icon-arrow-down el-icon--right"
+        ></i>
+        <i
+          v-show="cardDisplayed && (entry.datasetImage || entry.datasetDescription)"
+          class="el-icon-arrow-up el-icon--right"
+        ></i>
       </el-link>
-      <el-card v-show="cardDisplayed" :body-style="{ padding: '0px' }" class="dataset-card" ref="card">
-        <img :src="entry.datasetImage" class="image"/>
-        <div style="padding: 14px;">
-          <span class="dataset-description">{{entry.datasetDescription}}</span>
-          <div >
+      <el-card
+        v-show="cardDisplayed"
+        :body-style="{ padding: '0px' }"
+        class="dataset-card"
+        ref="card"
+      >
+        <img :src="entry.datasetImage" class="image" />
+        <div style="padding: 14px">
+          <span class="dataset-description">{{ entry.datasetDescription }}</span>
+          <div>
             <el-button class="button" @click="openDatasetUrl()">Get Dataset</el-button>
           </div>
         </div>
@@ -19,23 +30,9 @@
   </div>
 </template>
 
-
 <script>
-/* eslint-disable no-alert, no-console */
-import {
-  ElButton as Button,
-  ElCard as Card,
-  ElLink as Link
-} from "element-plus";
-
-
 export default {
-  name: "DatasetHeader",
-  components: {
-    Button,
-    Card,
-    Link
-  },
+  name: 'DatasetHeader',
   props: {
     /**
      * Object containing information for
@@ -43,16 +40,16 @@ export default {
      */
     entry: Object,
   },
-  data: function() {
+  data: function () {
     return {
-      cardDisplayed: false
-    }
+      cardDisplayed: false,
+    };
   },
   methods: {
-    switchCardDisplay: function(){
+    switchCardDisplay: function () {
       this.cardDisplayed = !this.cardDisplayed;
     },
-    openCard: function(event){
+    openCard: function (event) {
       if (this.entry.datasetImage || this.entry.datasetDescription) {
         this.cardDisplayed = true;
         this.$refs.card.$el.style.left = event.layerX + 'px';
@@ -61,37 +58,36 @@ export default {
         this.openDatasetUrl();
       }
     },
-    openDatasetUrl: function(){
-      if (this.entry.datasetUrl)
-        window.open(this.entry.datasetUrl, '_blank');
+    openDatasetUrl: function () {
+      if (this.entry.datasetUrl) window.open(this.entry.datasetUrl, '_blank');
       this.cardDisplayed = false;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.dataset-link{
-  text-align:center;
+.dataset-link {
+  text-align: center;
 }
-.dataset-title-container{
+.dataset-title-container {
   padding: 3px;
 }
-.dataset-title{
+.dataset-title {
   font-size: 16px;
   color: #606266;
 }
-.dataset-card{
+.dataset-card {
   width: 230px;
   position: absolute;
   z-index: 10;
 }
-.image{
+.image {
   width: 100%;
   display: block;
 }
-.dataset-description{
+.dataset-description {
   font-size: 10px;
 }
 </style>