@nixweb/nixloc-ui 0.0.255 → 0.0.257

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "0.0.255",
+  "version": "0.0.257",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/shared/Search.vue

@@ -6,7 +6,6 @@
           <div class="molded">
             <b-row>
               <b-col sm="9">
-
                 <input class="input-search" type="text" name="search" placeholder="Pesquisar ..."
                   @keyup="verifyCleanSearch()" @keyup.enter.prevent="executeSearch()" v-model="search.content" />
               </b-col>
@@ -28,8 +27,10 @@
                     || getFilterStorage($route.name).baseParams.search !== ''
                     || getFilterStorage($route.name).baseParams.currentPage !== 1">
             <div class="div-filter">
-              <i class="fa-solid fa-filter"></i>
               Filtro Ativo
+              <span class="icon-close" @click="removeFilter()">
+                <i class="icon-tag fas fa-times-circle"></i>
+              </span>
             </div>
           </div>
         </div>
@@ -77,6 +78,7 @@ export default {
       "updateSearch",
       "executedSearch",
       "clearedSearch",
+      "addEvent"
     ]),
     executeSearch() {
       this.executedSearch();
@@ -89,6 +91,9 @@ export default {
     verifyCleanSearch() {
       if (this.search.content.length == 0) this.clearedSearch();
     },
+    removeFilter() {
+      this.addEvent({ name: "filterStorageRemoved" });
+    }
   },
 };
 </script>
@@ -107,7 +112,7 @@ export default {
 }
 
 .molded {
-  width: 100%;
+
   height: 45px;
   font-size: 14px;
   padding: 5px 8px 6px 15px;
@@ -117,8 +122,6 @@ export default {
   box-sizing: border-box;
   box-shadow: none;
   color: rgb(38, 41, 44);
-  opacity: 1;
-  transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
 }
 
 input[type="text"] {
@@ -127,7 +130,6 @@ input[type="text"] {
   font-size: 14px;
   border: 0px solid white;
   background-color: rgb(255, 255, 255);
-  margin-bottom: 50px;
 }
 
 input[type="text"]:focus {
@@ -147,13 +149,19 @@ input[type="text"]:focus {
 
 .div-filter {
   margin-left: 13px;
-  font-size: 11px;
+  font-size: 12px;
   background-color: #F1BC31;
   color: white;
   margin-top: 5px;
   padding-left: 7px;
   padding-right: 5px;
-  border-radius: 10px;
-  width: 100px;
+  border-radius: 15px;
+  width: 110px;
+  cursor: pointer !important;
+}
+
+.icon-close {
+  font-size: 15px;
+  cursor: pointer !important;
 }
 </style>

package/src/component/shared/SelectOption.vue

@@ -21,8 +21,8 @@
       </div>
     </div>
     <div class="div-btn" v-if="showButtonNext">
-      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null" :classIcon="buttonClassIcon"
-        :size="buttonSize" :clicked="execute" />
+      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null"
+        :classIcon="buttonClassIcon" :size="buttonSize" :clicked="execute" />
     </div>
   </div>
 </template>
@@ -87,6 +87,14 @@ export default {
   computed: {
     ...mapGetters("generic", ["tip"]),
   },
+  watch: {
+    value: {
+      handler(value) {
+        this.selected = value;
+      },
+      deep: true,
+    },
+  }
 };
 </script>
 <style scoped>

package/src/component/template/ListViewWithDataHandler.vue

@@ -92,6 +92,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    isFilterStorage: {
+      type: Boolean,
+      default: false
+    }
   },
   components: {
     HorizontalFilter,
@@ -196,7 +200,6 @@ export default {
         };
 
         let params = { url: self.templateList.urlGetApi, obj: obj };
-        console.log(params);
         self.getApi(params).then((response) => {
           self.content = response.content;
           setTimeout(function () {
@@ -299,7 +302,9 @@ export default {
         propsParam: this.propsParam,
         paramsFilter: this.paramsFilter
       };
-      this.addFilterStorage(obj);
+
+      if (this.isFilterStorage)
+        this.addFilterStorage(obj);
     }
   },
   watch: {
@@ -317,6 +322,31 @@ export default {
           this.addStorage();
           this.getAll();
         }
+
+        if (event.name == "filterStorageRemoved") {
+
+          let self = this;
+          this.tags.forEach(tag => {
+            self.removeTag(tag.key);
+            self.addEvent({ name: "tagRemoved", data: tag.key });
+          });
+
+          this.paramsFilter = [];
+
+          this.baseParams.search = "";
+          this.baseParams.filter = "contains";
+          this.baseParams.currentPage = 1;
+          this.baseParams.totalPerPage = 10;
+          this.propsParam = {};
+
+
+
+          this.addStorage();
+          this.getAll();
+        }
+
+
+
         if (event.name == "getAllListViewWithDataHandler") {
           this.addSelected([]);
           this.getAll();

package/src/component/template/ViewTemplateWithTable.vue

@@ -16,7 +16,8 @@
           </div>
         </div>
         <Molded>
-          <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :buttonRemove="buttonRemove">
+          <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :isFilterStorage="true"
+            :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
               <slot name="content-buttons-table-header"></slot>
             </div>