@abi-software/map-utilities 1.2.0-beta.0 → 1.2.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/map-utilities",
-  "version": "1.2.0-beta.0",
+  "version": "1.2.0-beta.1",
   "files": [
     "dist/*",
     "src/*",

package/src/App.vue

@@ -26,7 +26,6 @@ const hoverVisibilities = [
   { value: false, refs: "toolbarPopover", ref: "polygonPopover" },
   { value: false, refs: "toolbarPopover", ref: "connectionPopover" },
 ];
-const filterText = ref("")
 const isFlatmap = ref(true);
 const appRef = ref(null);
 const newlyDrawnEntry = ref({});
@@ -468,11 +467,6 @@ function changeHover(value) {
       @annotation="commitAnnotationEvent"
       @onActionClick="onActionClick"
     />
-    <el-input
-      v-model="filterText"
-      style="width: 240px"
-      placeholder="Filter keyword"
-    />
     <TreeControls
       v-show="mapType === 'flatmap'"
       mapType="flatmap"
@@ -484,7 +478,6 @@ function changeHover(value) {
       @checkChanged="checkChanged"
       @changeActive="changeActive"
       @changeHover="changeHover"
-      :filterText="filterText"
     />
     <TreeControls
       v-show="mapType === 'scaffold'"
@@ -497,7 +490,6 @@ function changeHover(value) {
       :showColourPicker="true"
       @setColour="setColour"
       @checkChanged="checkChanged"
-      :filterText="filterText"
     />
   </div>
 </template>

package/src/components/TreeControls/TreeControls.vue

@@ -6,6 +6,15 @@
           {{ title }}
         </div>
       </el-col>
+      <el-col v-if="enableFilter" :span="12">
+        <div>
+          <el-input
+            class="tree-filter-input"
+            v-model="filterText"
+            placeholder="Filter keyword"
+          />
+        </div>
+      </el-col>
     </el-row>
     <div class="tree-container" ref="treeContainer">
       <div :class="['tree-tooltip', tooltipAtBottom ? 'bottom' : '']" >
@@ -95,10 +104,6 @@
 export default {
   name: "TreeControls",
   props: {
-    filterText: {
-      type: String,
-      default: "",
-    },
     /**
      * The type of map that the TreeControls is used. Either "flatmap" or "scaffold".
      */
@@ -143,10 +148,15 @@ export default {
       type: [String, Array],
       required: true,
     },
+    enableFilter: {
+      type: Boolean,
+      default: true,
+    }
   },
   data: function () {
     return {
       defaultExpandedKeys: ["All"],
+      filterText: "",
       myPopperClass: "hide-scaffold-colour-popup",
       tooltipVisible: false,
       tooltipLabel: "",
@@ -282,6 +292,7 @@ export default {
 }
 
 .selections-container {
+  width: 260px;
   padding-top: 5px;
 }
 
@@ -295,6 +306,15 @@ export default {
   margin-left: 8px;
 }
 
+:deep(.tree-filter-input) {
+  .el-input__inner {
+      height: 20px;
+    }
+  .el-input__wrapper.is-focus{
+    box-shadow: 0 0 0 1px $app-primary-color;
+  }
+}
+
 .tree-container {
   width: 260px;
   border: 1px solid rgb(144, 147, 153);