PATCH: feat(components): add autoclear prop to search-autocomplete (#224

) * feat(components): add autoclear prop to search-autocomplete * fix(components): set search-autocomplete autoclear prop default to true Co-authored-by: NicolasRichel <nicolas@bimdata.io>
bimdata · Jul 28, 2022 · 5e1dc40 · 5e1dc40
1 parent d4f0c38
commit 5e1dc40
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue b/src/BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue
@@ -111,6 +111,10 @@ export default {
       type: String,
       default: "",
     },
+    autoclear: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -155,22 +159,28 @@ export default {
     },
     onElementClick(result) {
       this.$emit("item-click", result);
-      this.search = "";
       this.isOpen = false;
+      if (this.autoclear) {
+        this.search = "";
+      }
     },
     onAllResultatsBtnClick() {
       this.$emit("all-results-click", {
         results: this.results,
         search: this.search,
       });
-      this.search = "";
       this.isOpen = false;
+      if (this.autoclear) {
+        this.search = "";
+      }
     },
     onEnter() {
       this.$emit("enter", this.results[this.current].id);
-      this.search = "";
       this.isOpen = false;
       this.current = -1;
+      if (this.autoclear) {
+        this.search = "";
+      }
     },
     onArrowUp() {
       if (this.current >= 1) {

diff --git a/src/BIMDataComponents/BIMDataSearchAutocomplete/_BIMDataSearchAutocomplete.scss b/src/BIMDataComponents/BIMDataSearchAutocomplete/_BIMDataSearchAutocomplete.scss
@@ -1,6 +1,8 @@
 .bimdata-search-autocomplete {
-  width: 350px;
   position: relative;
+  display: inline-block;
+  width: 350px;
+
   &__input {
     position: relative;
     .bimdata-search-icon {

diff --git a/src/web/views/Components/SearchAutocomplete/SearchAutocomplete.vue b/src/web/views/Components/SearchAutocomplete/SearchAutocomplete.vue
@@ -7,24 +7,41 @@
 
       <ComponentCode :componentTitle="$route.name" language="javascript">
         <template #module>
-          <BIMDataSearchAutocomplete
-            placeholder="Search"
-            :items="apps"
-            @item-click="onItemClick"
-            @all-results-click="onAllResultsClick"
-            :loading="isLoading"
-            class="m-t-24"
-          >
-            <template #logoPlaceholder>
-              <span>I lost my LOGO :'(</span>
-            </template>
-          </BIMDataSearchAutocomplete>
+          <div>
+            <BIMDataSearchAutocomplete
+              class="m-t-24"
+              placeholder="Search"
+              :items="apps"
+              :loading="isLoading"
+              :autoclear="isAutoclear"
+              @item-click="selectedApp = $event"
+              @all-results-click="onAllResultsClick"
+            >
+              <template #logoPlaceholder>
+                <span>I lost my LOGO :'(</span>
+              </template>
+            </BIMDataSearchAutocomplete>
+            <BIMDataButton
+              style="display: inline-flex; margin-left: 12px"
+              fill
+              radius
+              @click="selectedApp = null"
+            >
+              Reset
+            </BIMDataButton>
+          </div>
+          <div class="m-t-24">
+            {{ selectedApp ? JSON.stringify(selectedApp) : "" }}
+          </div>
         </template>
 
         <template #parameters>
           <div class="m-t-12">
             <BIMDataCheckbox text="Loading" v-model="isLoading" />
           </div>
+          <div class="m-t-12">
+            <BIMDataCheckbox text="Autoclear" v-model="isAutoclear" />
+          </div>
         </template>
 
         <template #import>
@@ -36,8 +53,9 @@
           <pre>
             &lt;BIMDataSearchAutocomplete
               placeholder="Search"
-              {{ isLoadingChecked() }}
               :items="apps"
+              {{ isLoading ? ':loading="true"' : "" }}
+              {{ isAutoclear ? ':autoclear="true"' : "" }}
               @item-click="onItemClick"
               @all-results-click="onAllResultsClick"
             /&gt;
@@ -68,6 +86,7 @@ import slotsData from "./slots-data.js";
 
 import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
 
+import BIMDataButton from "../../../../BIMDataComponents/BIMDataButton/BIMDataButton.vue";
 import BIMDataCheckbox from "../../../../BIMDataComponents/BIMDataCheckbox/BIMDataCheckbox.vue";
 import BIMDataSearchAutocomplete from "../../../../BIMDataComponents/BIMDataSearchAutocomplete/BIMDataSearchAutocomplete.vue";
 import BIMDataText from "../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
@@ -76,16 +95,19 @@ import BIMDataTable from "../../../../BIMDataComponents/BIMDataTable/BIMDataTabl
 export default {
   components: {
     ComponentCode,
+    BIMDataButton,
     BIMDataCheckbox,
-    BIMDataText,
     BIMDataSearchAutocomplete,
+    BIMDataText,
     BIMDataTable,
   },
   data: function () {
     return {
       propsData,
       slotsData,
       isLoading: false,
+      isAutoclear: true,
+      selectedApp: null,
       apps: [
         {
           title: "App 01",
@@ -110,21 +132,9 @@ export default {
     };
   },
   methods: {
-    onItemClick($event) {
-      console.log($event);
-    },
     onAllResultsClick($event) {
       console.log($event);
     },
-    isLoadingChecked() {
-      if (this.isLoading) {
-        return ":loading='true'";
-      }
-    },
   },
 };
 </script>
-
-<style lang="scss" scoped>
-// @import "./_YourFileStyle.scss";
-</style>
diff --git a/src/web/views/Components/SearchAutocomplete/props-data.js b/src/web/views/Components/SearchAutocomplete/props-data.js
@@ -31,4 +31,10 @@ export default [
     "false",
     "",
   ],
+  [
+    "autoclear",
+    "Boolean",
+    "true",
+    "If true (default), automatically clear search text when an item is selected",
+  ],
 ];