@nixweb/nixloc-ui 1.9.0 → 1.11.0

package/@nixweb/nixloc-ui/src/component/shared/Search.vue

@@ -1,174 +1,174 @@
-<template>
-  <div>
-    <b-row>
-      <b-col xs="12" sm="12" md="12" lg="7" xl="6">
-        <div class="margin">
-          <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>
-              <b-col sm="3">
-                <div class="div-select">
-                  <SelectStatic classCss="select-search" fieldTarget="filter" :onlyQuery="true"
-                    :initialValue="{ content: 'Contém', id: 'contains' }" v-model="search.filter" :showBorder="false"
-                    :data="[
-                      { content: 'Contém', id: 'contains' },
-                      { content: 'Igual', id: 'equal' },
-                    ]" />
-                </div>
-              </b-col>
-            </b-row>
-          </div>
-        </div>
-        <div v-if="hasActiveFilter">
-          <div>
-            <div class="div-filter">
-              Filtro Ativo
-              <span class="icon-close" @click="removeFilter()">
-                <i class="icon-tag fas fa-times-circle"></i>
-              </span>
-            </div>
-          </div>
-        </div>
-      </b-col>
-      <b-col xs="4" sm="4" md="4" lg="4" xl="4">
-        <div class="div-button">
-          <Button _key="btnSearch" type="info" title="Buscar" classIcon="fas fa-search" size="small"
-            :clicked="executeSearch" />
-          <Button _key="btnClean" type="info" title="Limpar" classIcon="fas fa-broom" size="small"
-            :clicked="executeClean" />
-        </div>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-import Button from "../forms/Button";
-import SelectStatic from "../forms/SelectStatic.vue";
-
-import { mapMutations, mapGetters, mapState } from "vuex";
-
-export default {
-  components: { Button, SelectStatic },
-  name: "Search",
-  data() {
-    return {
-      showFilterStorage: false,
-    }
-  },
-  computed: {
-    ...mapState("generic", ["queryTags"]),
-    ...mapGetters("generic", ["getFilterStorage"]),
-    search: {
-      get() {
-        return this.$store.state.generic.search;
-      },
-      set(value) {
-        this.updateSearch(value);
-      },
-    },
-    hasActiveFilter() {
-      const filterStorage = this.getFilterStorage(this.$route.name);
-      return filterStorage && (
-        filterStorage.baseParams.search !== '' ||
-        filterStorage.baseParams.currentPage !== 1 ||
-        this.queryTags.length > 0
-      );
-    },
-  },
-  methods: {
-    ...mapMutations("generic", [
-      "updateSearch",
-      "executedSearch",
-      "clearedSearch",
-      "addEvent"
-    ]),
-    executeSearch() {
-      this.executedSearch();
-    },
-    executeClean() {
-      this.clearedSearch();
-      let search = { content: "", filter: { content: "Contém", id: "contains" } };
-      this.updateSearch(search);
-    },
-    verifyCleanSearch() {
-      if (this.search.content.length == 0) this.clearedSearch();
-    },
-    removeFilter() {
-      this.addEvent({ name: "filterStorageRemoved" });
-      this.executeClean();
-    }
-  },
-};
-</script>
-
-<style scoped>
-.margin {
-  padding-top: 28px;
-}
-
-.div-button {
-  padding-top: 33px;
-}
-
-::placeholder {
-  color: #b8c4d2;
-}
-
-.molded {
-
-  height: 45px;
-  font-size: 14px;
-  padding: 5px 8px 6px 15px;
-  background-color: rgb(255, 255, 255);
-  border: 1px solid #E5E4E8;
-  border-radius: 40px;
-  box-sizing: border-box;
-  box-shadow: none;
-  color: rgb(38, 41, 44);
-}
-
-input[type="text"] {
-  width: 100%;
-  height: 30px;
-  font-size: 14px;
-  border: 0px solid white;
-  background-color: rgb(255, 255, 255);
-}
-
-input[type="text"]:focus {
-  outline: none;
-}
-
-.div-select {
-  margin-top: -30px;
-  margin-right: 5px;
-}
-
-.filter-active {
-  margin-right: 13px;
-  margin-left: -10px;
-  color: #F1BC31;
-}
-
-.div-filter {
-  margin-left: 13px;
-  font-size: 12px;
-  background-color: #F1BC31;
-  color: white;
-  margin-top: 5px;
-  padding-left: 7px;
-  padding-right: 5px;
-  border-radius: 15px;
-  width: 110px;
-  cursor: pointer !important;
-}
-
-.icon-close {
-  font-size: 15px;
-  cursor: pointer !important;
-}
-</style>
+<template>
+  <div>
+    <b-row>
+      <b-col xs="12" sm="12" md="12" lg="7" xl="6">
+        <div class="margin">
+          <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>
+              <b-col sm="3">
+                <div class="div-select">
+                  <SelectStatic classCss="select-search" fieldTarget="filter" :onlyQuery="true"
+                    :initialValue="{ content: 'Contém', id: 'contains' }" v-model="search.filter" :showBorder="false"
+                    :data="[
+                      { content: 'Contém', id: 'contains' },
+                      { content: 'Igual', id: 'equal' },
+                    ]" />
+                </div>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
+        <div v-if="hasActiveFilter">
+          <div>
+            <div class="div-filter">
+              Filtro Ativo
+              <span class="icon-close" @click="removeFilter()">
+                <i class="icon-tag fas fa-times-circle"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </b-col>
+      <b-col xs="4" sm="4" md="4" lg="4" xl="4">
+        <div class="div-button">
+          <Button _key="btnSearch" type="info" title="Buscar" classIcon="fas fa-search" size="small"
+            :clicked="executeSearch" />
+          <Button _key="btnClean" type="info" title="Limpar" classIcon="fas fa-broom" size="small"
+            :clicked="executeClean" />
+        </div>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+import Button from "../forms/Button";
+import SelectStatic from "../forms/SelectStatic.vue";
+
+import { mapMutations, mapGetters, mapState } from "vuex";
+
+export default {
+  components: { Button, SelectStatic },
+  name: "Search",
+  data() {
+    return {
+      showFilterStorage: false,
+    }
+  },
+  computed: {
+    ...mapState("generic", ["queryTags"]),
+    ...mapGetters("generic", ["getFilterStorage"]),
+    search: {
+      get() {
+        return this.$store.state.generic.search;
+      },
+      set(value) {
+        this.updateSearch(value);
+      },
+    },
+    hasActiveFilter() {
+      const filterStorage = this.getFilterStorage(this.$route.name);
+      return filterStorage && (
+        filterStorage.baseParams.search !== '' ||
+        filterStorage.baseParams.currentPage !== 1 ||
+        this.queryTags.length > 0
+      );
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateSearch",
+      "executedSearch",
+      "clearedSearch",
+      "addEvent"
+    ]),
+    executeSearch() {
+      this.executedSearch();
+    },
+    executeClean() {
+      this.clearedSearch();
+      let search = { content: "", filter: { content: "Contém", id: "contains" } };
+      this.updateSearch(search);
+    },
+    verifyCleanSearch() {
+      if (this.search.content.length == 0) this.clearedSearch();
+    },
+    removeFilter() {
+      this.addEvent({ name: "filterStorageRemoved" });
+      this.executeClean();
+    }
+  },
+};
+</script>
+
+<style scoped>
+.margin {
+  padding-top: 28px;
+}
+
+.div-button {
+  padding-top: 33px;
+}
+
+::placeholder {
+  color: #b8c4d2;
+}
+
+.molded {
+
+  height: 45px;
+  font-size: 14px;
+  padding: 5px 8px 6px 15px;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid #E5E4E8;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: none;
+  color: rgb(38, 41, 44);
+}
+
+input[type="text"] {
+  width: 100%;
+  height: 30px;
+  font-size: 14px;
+  border: 0px solid white;
+  background-color: rgb(255, 255, 255);
+}
+
+input[type="text"]:focus {
+  outline: none;
+}
+
+.div-select {
+  margin-top: -30px;
+  margin-right: 5px;
+}
+
+.filter-active {
+  margin-right: 13px;
+  margin-left: -10px;
+  color: #F1BC31;
+}
+
+.div-filter {
+  margin-left: 13px;
+  font-size: 12px;
+  background-color: #F1BC31;
+  color: white;
+  margin-top: 5px;
+  padding-left: 7px;
+  padding-right: 5px;
+  border-radius: 15px;
+  width: 110px;
+  cursor: pointer !important;
+}
+
+.icon-close {
+  font-size: 15px;
+  cursor: pointer !important;
+}
+</style>