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

package/src/components/ResizeSensor.vue

@@ -1,47 +1,47 @@
-<template>
-  <div
-    style="height: 100%; width: 100%; position:absolute"
-    ref="display"
-  />
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import ResizeSensor from "css-element-queries/src/ResizeSensor";
-
-export default {
-  name: "ResizeSensor",
-  methods: {
-    activate: function() {
-      if (!this._sensor) {
-        this._sensor = new ResizeSensor(this.$refs.display, this.displayResize);
-        this.displayResize();
-      }
-    },
-    deactivate: function() {
-      if (this._sensor) {
-        this._sensor.detach(this.$refs.display, this.displayResize);
-        delete this._sensor;
-        this._sensor = undefined;
-        this.displayResize();
-      }
-    },
-    displayResize: function() {
-      this.$emit("resize");
-    },
-  },
-  unmounted() {
-    this.deactivate();
-  },
-  activated() {
-    this.activate();
-  },
-  deactivated() {
-    this.deactivate();
-  },
-  mounted: function () {
-    this.activate();
-  }
-};
-</script>
-
+<template>
+  <div
+    style="height: 100%; width: 100%; position:absolute"
+    ref="display"
+  />
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import ResizeSensor from "css-element-queries/src/ResizeSensor";
+
+export default {
+  name: "ResizeSensor",
+  methods: {
+    activate: function() {
+      if (!this._sensor) {
+        this._sensor = new ResizeSensor(this.$refs.display, this.displayResize);
+        this.displayResize();
+      }
+    },
+    deactivate: function() {
+      if (this._sensor) {
+        this._sensor.detach(this.$refs.display, this.displayResize);
+        delete this._sensor;
+        this._sensor = undefined;
+        this.displayResize();
+      }
+    },
+    displayResize: function() {
+      this.$emit("resize");
+    },
+  },
+  unmounted() {
+    this.deactivate();
+  },
+  activated() {
+    this.activate();
+  },
+  deactivated() {
+    this.deactivate();
+  },
+  mounted: function () {
+    this.activate();
+  }
+};
+</script>
+

package/src/components/SearchControls.vue

@@ -1,115 +1,115 @@
-<template>
-  <div class="search-container">
-    <div class="text search-text">
-      Search within display
-    </div>
-    <el-autocomplete class="search-box" placeholder="Search"
-      v-model="searchText"
-      :fetch-suggestions="fetchSuggestions"
-      @keyup.enter="$emit('search', searchText)"
-      @select="$emit('search', $event.value)"
-      :teleported=false
-      popper-class="autocomplete-popper">
-    </el-autocomplete>
-    <map-svg-icon icon="magnifyingGlass" class="magnify"
-      @click="$emit('search', searchText)"/>
-    <div v-if="failedSearch" class="text not-found-text">
-      '{{failedSearch}}' not found
-    </div>
-  </div>
-</template>
-
-<script>
-/* eslint-disable no-alert, no-console */
-import { MapSvgIcon } from '@abi-software/svg-sprite';
-import {
-  ElAutocomplete as Autocomplete
-} from "element-plus";
-
-export default {
-  name: "SearchControls",
-  props: {
-    failedSearch: undefined,
-  },
-  components: {
-    Autocomplete,
-    MapSvgIcon,
-  },
-  methods: {
-    fetchSuggestions: function(term, cb) {
-      if (term === "") {
-        cb([]);
-      } else {
-        this.$emit('fetch-suggestions', { term, cb });
-      }
-    },
-  },
-  data: function () {
-    return {
-      searchText: "",
-    };
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-.search-container {
-  display:flex;
-  flex-direction: row;
-
-  .text {
-    margin-left: 8px;
-    margin-top: 7px;
-    font-weight: 500;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    line-height:18px;
-  }
-  .search-text {
-    margin-top: 8px;
-    color: $grey;
-    font-size: 14px;
-    margin-left: 1rem;
-  }
-  .not-found-text {
-    margin-top: 8px;
-    color: $warning;
-    font-size: 0.8rem;
-    margin-left: 0.5rem;
-  }
-  :deep(.search-box) {
-    margin-top: 2px;
-    margin-left:0.5rem;
-    height:28px;
-    width:137px;
-    .el-input__inner {
-      height:26px;
-      line-height:28px;
-      border-radius: 4px;
-      &:focus {
-        border-color: $app-primary-color;
-      }
-    }
-  }
-  .magnify {
-    margin-top: 2px;
-    margin-left:0.5rem;
-    background: $app-primary-color;
-    border-radius: 4px;
-    height:28px;
-    width:28px;
-    cursor: pointer;
-    &:hover {
-      box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.25);
-    }
-  }
-  :deep(.autocomplete-popper) {
-    min-width:137px!important;
-    width: auto!important;
-  }
-}
-
-</style>
+<template>
+  <div class="search-container">
+    <div class="text search-text">
+      Search within display
+    </div>
+    <el-autocomplete class="search-box" placeholder="Search"
+      v-model="searchText"
+      :fetch-suggestions="fetchSuggestions"
+      @keyup.enter="$emit('search', searchText)"
+      @select="$emit('search', $event.value)"
+      :teleported=false
+      popper-class="autocomplete-popper">
+    </el-autocomplete>
+    <map-svg-icon icon="magnifyingGlass" class="magnify"
+      @click="$emit('search', searchText)"/>
+    <div v-if="failedSearch" class="text not-found-text">
+      '{{failedSearch}}' not found
+    </div>
+  </div>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { MapSvgIcon } from '@abi-software/svg-sprite';
+import {
+  ElAutocomplete as Autocomplete
+} from "element-plus";
+
+export default {
+  name: "SearchControls",
+  props: {
+    failedSearch: undefined,
+  },
+  components: {
+    Autocomplete,
+    MapSvgIcon,
+  },
+  methods: {
+    fetchSuggestions: function(term, cb) {
+      if (term === "") {
+        cb([]);
+      } else {
+        this.$emit('fetch-suggestions', { term, cb });
+      }
+    },
+  },
+  data: function () {
+    return {
+      searchText: "",
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.search-container {
+  display:flex;
+  flex-direction: row;
+
+  .text {
+    margin-left: 8px;
+    margin-top: 7px;
+    font-weight: 500;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    line-height:18px;
+  }
+  .search-text {
+    margin-top: 8px;
+    color: $grey;
+    font-size: 14px;
+    margin-left: 1rem;
+  }
+  .not-found-text {
+    margin-top: 8px;
+    color: $warning;
+    font-size: 0.8rem;
+    margin-left: 0.5rem;
+  }
+  :deep(.search-box) {
+    margin-top: 2px;
+    margin-left:0.5rem;
+    height:28px;
+    width:137px;
+    .el-input__inner {
+      height:26px;
+      line-height:28px;
+      border-radius: 4px;
+      &:focus {
+        border-color: $app-primary-color;
+      }
+    }
+  }
+  .magnify {
+    margin-top: 2px;
+    margin-left:0.5rem;
+    background: $app-primary-color;
+    border-radius: 4px;
+    height:28px;
+    width:28px;
+    cursor: pointer;
+    &:hover {
+      box-shadow: -3px 2px 4px 0 rgba(0,0,0,0.25);
+    }
+  }
+  :deep(.autocomplete-popper) {
+    min-width:137px!important;
+    width: auto!important;
+  }
+}
+
+</style>