@abi-software/mapintegratedvuer 0.7.2-vue3.0-alpha.0 → 1.0.0

package/src/components/ContextHelp.vue

@@ -1,73 +1,73 @@
-<template>
-  <div v-if="showHelp" class="content-container">
-    <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>
-      <div class="content">
-      <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
-  },
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: Object
-  },
-  data: function() {
-    return  {
-      isActive: false,
-      showHelp: true,
-      steps: [
-      ]
-    }
-  },
-  methods: {
-      close: function(){
-        this.showHelp = false
-      },
-
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.step-item {
-  font-size: 14px;
-  margin-bottom: 18px;
-  text-align: left;
-}
-
-.header{
-  height: 20px;
-}
-
-.box-card {
-  width: 280px;
-  height: 280px;
-  overflow: auto;
-}
-
-.active {
-  width: 380px !important;
-  height: 380px !important;
-}
-</style>
+<template>
+  <div v-if="showHelp" class="content-container">
+    <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>
+      <div class="content">
+      <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
+  },
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: Object
+  },
+  data: function() {
+    return  {
+      isActive: false,
+      showHelp: true,
+      steps: [
+      ]
+    }
+  },
+  methods: {
+      close: function(){
+        this.showHelp = false
+      },
+
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.step-item {
+  font-size: 14px;
+  margin-bottom: 18px;
+  text-align: left;
+}
+
+.header{
+  height: 20px;
+}
+
+.box-card {
+  width: 280px;
+  height: 280px;
+  overflow: auto;
+}
+
+.active {
+  width: 380px !important;
+  height: 380px !important;
+}
+</style>

package/src/components/CustomSplitter.vue

@@ -1,151 +1,151 @@
-<template>
-  <div style="height: 100%; width: 100%">
-    <resize-sensor
-      @resize="calculateStyles(index)">
-    </resize-sensor>
-    <splitpanes
-      class="default-theme"
-      :horizontal="isHorizontal"
-      :dbl-click-splitter="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"
-          />
-        </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 { mapStores } from 'pinia';
-import { useSplitFlowStore } from '../stores/splitFlow';
-
-export default {
-  name: "CustomSplitter",
-  components: {
-    Splitpanes,
-    Pane,
-    ResizeSensor
-  },
-  props: {
-    index: {
-      type: String,
-      default: function() {
-        return "split-1";
-      }
-    }
-  },
-  methods: {
-    requestStylesUpdate: function(refName) {
-      if (this.$refs) {
-        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});
-
-        }
-      }
-    },
-    /**
-     * Callback when the vuers emit a selected event.
-     */
-    calculateStyles: function(refName) {
-      if (this.$refs) {
-        if (refName.startsWith("pane")) {
-          this.requestStylesUpdate(refName);
-        } else if (refName.startsWith("split")) {
-          this.customLayout[refName].children.forEach((childName) => {
-            if (childName.startsWith("pane")) {
-               this.requestStylesUpdate(childName);
-            }
-          });
-        }
-      }
-    },
-    childUnmounted: function(refName) {
-      EventBus.emit("PaneUnmounted", {refName});
-    }
-  },
-  computed: {
-    ...mapStores(useSplitFlowStore),
-    children() {
-      return this.customLayout[this.index].children;
-    },
-    customLayout() {
-      return this.splitFlowStore.customLayout;
-    },
-    isHorizontal() {
-      return this.customLayout[this.index].horizontal;
-    },
-  },
-};
-</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;
-    position: relative;
-  }
-}
-
-:deep(.splitpanes__splitter) {
-  margin: 0px 0px 0px 0px !important;
-  z-index: 6 !important;
-  &::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 0;
-    transition: opacity 0.4s;
-    background-color: rgba(131, 0, 191, 0.3) !important;
-    opacity: 0;
-    z-index: 7 !important;
-    &:hover {
-      opacity: 1;
-    }
-  }
-}
-
-:deep(.splitpanes--horizontal > .splitpanes__splitter),
-:deep(.splitpanes--vertical > .splitpanes__splitter) {
-  background-color: #ccc !important;
-  border-left: unset;
-}
-
-:deep(.splitpanes--horizontal > .splitpanes__splitter) {
-  height: 1px;
-  &::before {
-    top: -2px;
-    height: 10px;
-    width: 100%;
-  }
-}
-
-:deep(.splitpanes--vertical > .splitpanes__splitter) {
-  width: 1px;
-  &::before {
-    left: -3px;
-    width: 11px;
-    height: 100%;
-  }
-}
-
-</style>
+<template>
+  <div style="height: 100%; width: 100%">
+    <resize-sensor
+      @resize="calculateStyles(index)">
+    </resize-sensor>
+    <splitpanes
+      class="default-theme"
+      :horizontal="isHorizontal"
+      :dbl-click-splitter="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"
+          />
+        </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 { mapStores } from 'pinia';
+import { useSplitFlowStore } from '../stores/splitFlow';
+
+export default {
+  name: "CustomSplitter",
+  components: {
+    Splitpanes,
+    Pane,
+    ResizeSensor
+  },
+  props: {
+    index: {
+      type: String,
+      default: function() {
+        return "split-1";
+      }
+    }
+  },
+  methods: {
+    requestStylesUpdate: function(refName) {
+      if (this.$refs) {
+        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});
+
+        }
+      }
+    },
+    /**
+     * Callback when the vuers emit a selected event.
+     */
+    calculateStyles: function(refName) {
+      if (this.$refs) {
+        if (refName.startsWith("pane")) {
+          this.requestStylesUpdate(refName);
+        } else if (refName.startsWith("split")) {
+          this.customLayout[refName].children.forEach((childName) => {
+            if (childName.startsWith("pane")) {
+               this.requestStylesUpdate(childName);
+            }
+          });
+        }
+      }
+    },
+    childUnmounted: function(refName) {
+      EventBus.emit("PaneUnmounted", {refName});
+    }
+  },
+  computed: {
+    ...mapStores(useSplitFlowStore),
+    children() {
+      return this.customLayout[this.index].children;
+    },
+    customLayout() {
+      return this.splitFlowStore.customLayout;
+    },
+    isHorizontal() {
+      return this.customLayout[this.index].horizontal;
+    },
+  },
+};
+</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;
+    position: relative;
+  }
+}
+
+:deep(.splitpanes__splitter) {
+  margin: 0px 0px 0px 0px !important;
+  z-index: 6 !important;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    transition: opacity 0.4s;
+    background-color: rgba(131, 0, 191, 0.3) !important;
+    opacity: 0;
+    z-index: 7 !important;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+:deep(.splitpanes--horizontal > .splitpanes__splitter),
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
+  background-color: #ccc !important;
+  border-left: unset;
+}
+
+:deep(.splitpanes--horizontal > .splitpanes__splitter) {
+  height: 1px;
+  &::before {
+    top: -2px;
+    height: 10px;
+    width: 100%;
+  }
+}
+
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
+  width: 1px;
+  &::before {
+    left: -3px;
+    width: 11px;
+    height: 100%;
+  }
+}
+
+</style>

package/src/components/DatasetHeader.vue

@@ -1,97 +1,97 @@
-<template>
-  <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>
-      </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-button class="button" @click="openDatasetUrl()">Get Dataset</el-button>
-          </div>
-        </div>
-      </el-card>
-    </div>
-  </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
-  },
-  props: {
-    /**
-     * Object containing information for
-     * the required viewing.
-     */
-    entry: Object,
-  },
-  data: function() {
-    return {
-      cardDisplayed: false
-    }
-  },
-  methods: {
-    switchCardDisplay: function(){
-      this.cardDisplayed = !this.cardDisplayed;
-    },
-    openCard: function(event){
-      if (this.entry.datasetImage || this.entry.datasetDescription) {
-        this.cardDisplayed = true;
-        this.$refs.card.$el.style.left = event.layerX + 'px';
-        this.$refs.card.$el.style.top = event.layerY + 'px';
-      } else {
-        this.openDatasetUrl();
-      }
-    },
-    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-title-container{
-  padding: 3px;
-}
-.dataset-title{
-  font-size: 16px;
-  color: #606266;
-}
-.dataset-card{
-  width: 230px;
-  position: absolute;
-  z-index: 10;
-}
-.image{
-  width: 100%;
-  display: block;
-}
-.dataset-description{
-  font-size: 10px;
-}
-</style>
+<template>
+  <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>
+      </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-button class="button" @click="openDatasetUrl()">Get Dataset</el-button>
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </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
+  },
+  props: {
+    /**
+     * Object containing information for
+     * the required viewing.
+     */
+    entry: Object,
+  },
+  data: function() {
+    return {
+      cardDisplayed: false
+    }
+  },
+  methods: {
+    switchCardDisplay: function(){
+      this.cardDisplayed = !this.cardDisplayed;
+    },
+    openCard: function(event){
+      if (this.entry.datasetImage || this.entry.datasetDescription) {
+        this.cardDisplayed = true;
+        this.$refs.card.$el.style.left = event.layerX + 'px';
+        this.$refs.card.$el.style.top = event.layerY + 'px';
+      } else {
+        this.openDatasetUrl();
+      }
+    },
+    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-title-container{
+  padding: 3px;
+}
+.dataset-title{
+  font-size: 16px;
+  color: #606266;
+}
+.dataset-card{
+  width: 230px;
+  position: absolute;
+  z-index: 10;
+}
+.image{
+  width: 100%;
+  display: block;
+}
+.dataset-description{
+  font-size: 10px;
+}
+</style>