@abi-software/flatmapvuer 1.1.3 → 1.2.0

package/src/components/ConnectionDialog.vue

@@ -1,134 +1,134 @@
-<template>
-  <div class="dialog-container">
-    <el-row>
-      <el-col>
-        <span class="dialog-title">Visualise connection</span>
-        <el-row v-if="inDrawing">
-          <span class="dialog-subtitle">Finalise drawing</span>
-          <el-button-group>
-            <el-button
-              type="primary"
-              plain
-              @click="$emit('confirmDrawn', true)"
-            >
-              Confirm
-            </el-button>
-            <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
-              Cancel
-            </el-button>
-          </el-button-group>
-        </el-row>
-        <el-row v-else>
-          <el-button
-            type="primary"
-            plain
-            @click="$emit('dialogDisplay', false)"
-          >
-            Close
-          </el-button>
-        </el-row>
-      </el-col>
-    </el-row>
-    <el-row v-if="hasConnection">
-      <el-col>
-        <b><span>Related Features</span></b>
-        <el-row v-for="(value, key) in connectionEntry" :key="key">
-          <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
-            <span>{{ capitalise(value.label) }}</span>
-          </el-card>
-        </el-row>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import {
-  ElRow as Row,
-  ElCol as Col,
-  ElCard as Card,
-  ElButton as Button,
-  ElButtonGroup as ButtonGroup,
-} from "element-plus";
-
-export default {
-  name: "ConnectionDialog",
-  components: {
-    Row,
-    Col,
-    ButtonGroup,
-    Button,
-    Card,
-  },
-  props: {
-    connectionEntry: {
-      type: Object,
-    },
-    inDrawing: {
-      type: Boolean,
-      default: false,
-    },
-    hasConnection: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data: function () {
-    return {
-      tooltipId: undefined,
-    };
-  },
-  methods: {
-    shadowDisplay: function (value) {
-      return this.tooltipId === value ? "always" : "hover";
-    },
-    capitalise: function (label) {
-      return label[0].toUpperCase() + label.slice(1);
-    },
-    handleTooltip: function (value) {
-      this.tooltipId = this.tooltipId === value ? undefined : value;
-      this.$emit("featureTooltip", this.tooltipId);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.dialog-container {
-  width: 200px;
-  height: fit-content;
-  text-align: justify;
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  pointer-events: auto;
-  background: #fff;
-  border: 1px solid $app-primary-color;
-  display: flex;
-  flex-direction: column;
-  padding: 0.8em;
-}
-
-.dialog-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: rgb(131, 0, 191);
-}
-
-.dialog-subtitle {
-  margin-top: 5px;
-  font-size: 15px;
-  color: rgb(131, 0, 191);
-}
-
-.el-button {
-  margin: 5px 0px;
-}
-
-:deep(.el-card) {
-  width: 100%;
-  --el-card-padding: 8px;
-  border: 0;
-  cursor: pointer;
-}
-</style>
+<template>
+  <div class="dialog-container">
+    <el-row>
+      <el-col>
+        <span class="dialog-title">Visualise connection</span>
+        <el-row v-if="inDrawing">
+          <span class="dialog-subtitle">Finalise drawing</span>
+          <el-button-group>
+            <el-button
+              type="primary"
+              plain
+              @click="$emit('confirmDrawn', true)"
+            >
+              Confirm
+            </el-button>
+            <el-button type="primary" plain @click="$emit('cancelDrawn', true)">
+              Cancel
+            </el-button>
+          </el-button-group>
+        </el-row>
+        <el-row v-else>
+          <el-button
+            type="primary"
+            plain
+            @click="$emit('dialogDisplay', false)"
+          >
+            Close
+          </el-button>
+        </el-row>
+      </el-col>
+    </el-row>
+    <el-row v-if="hasConnection">
+      <el-col>
+        <b><span>Related Features</span></b>
+        <el-row v-for="(value, key) in connectionEntry" :key="key">
+          <el-card :shadow="shadowDisplay(key)" @click="handleTooltip(key)">
+            <span>{{ capitalise(value.label) }}</span>
+          </el-card>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import {
+  ElRow as Row,
+  ElCol as Col,
+  ElCard as Card,
+  ElButton as Button,
+  ElButtonGroup as ButtonGroup,
+} from "element-plus";
+
+export default {
+  name: "ConnectionDialog",
+  components: {
+    Row,
+    Col,
+    ButtonGroup,
+    Button,
+    Card,
+  },
+  props: {
+    connectionEntry: {
+      type: Object,
+    },
+    inDrawing: {
+      type: Boolean,
+      default: false,
+    },
+    hasConnection: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: function () {
+    return {
+      tooltipId: undefined,
+    };
+  },
+  methods: {
+    shadowDisplay: function (value) {
+      return this.tooltipId === value ? "always" : "hover";
+    },
+    capitalise: function (label) {
+      return label[0].toUpperCase() + label.slice(1);
+    },
+    handleTooltip: function (value) {
+      this.tooltipId = this.tooltipId === value ? undefined : value;
+      this.$emit("featureTooltip", this.tooltipId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-container {
+  width: 200px;
+  height: fit-content;
+  text-align: justify;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  pointer-events: auto;
+  background: #fff;
+  border: 1px solid $app-primary-color;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8em;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: rgb(131, 0, 191);
+}
+
+.dialog-subtitle {
+  margin-top: 5px;
+  font-size: 15px;
+  color: rgb(131, 0, 191);
+}
+
+.el-button {
+  margin: 5px 0px;
+}
+
+:deep(.el-card) {
+  width: 100%;
+  --el-card-padding: 8px;
+  border: 0;
+  cursor: pointer;
+}
+</style>