@nixweb/nixloc-ui 0.0.127 → 0.0.128

package/src/component/shared/QueryButton.vue

@@ -1,66 +1,66 @@
-<template>
-  <div>
-    <div class="alignment" v-for="item in items" :key="item.title">
-      <button
-        :class="{
-          'button-query': true,
-        }"
-        @click="execute(item.valor)"
-      >
-        <span class="icon"> <i :class="item.classIcon"></i></span>
-        <span class="title">{{ item.title }}</span>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: "QueryButton",
-  props: ["items", "value", "clicked"],
-  data() {
-    return {
-      currentValue: 0,
-    };
-  },
-  methods: {
-    execute(valor) {
-      this.currentValue = valor;
-      this.$emit("input", valor);
-      if (this.clicked) this.clicked();
-    },
-  },
-};
-</script>
-<style scoped>
-.button-query {
-  cursor: pointer;
-  height: 35px;
-  border: 1px solid #d5d5d5;
-  background-color: white;
-  border-radius: 3px;
-  padding-left: 10px;
-  padding-right: 7px;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  font-size: 16px;
-  font-weight: normal;
-}
-
-.button-query:hover {
-  background-color: #d98621;
-  color: white;
-  border: none;
-}
-
-.icon {
-  font-size: 13px;
-}
-
-.title {
-  font-size: 16px;
-}
-
-.alignment {
-  display: inline-block;
-}
-</style>
+<template>
+  <div>
+    <div class="alignment" v-for="item in items" :key="item.title">
+      <button
+        :class="{
+          'button-query': true,
+        }"
+        @click="execute(item.valor)"
+      >
+        <span class="icon"> <i :class="item.classIcon"></i></span>
+        <span class="title">{{ item.title }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "QueryButton",
+  props: ["items", "value", "clicked"],
+  data() {
+    return {
+      currentValue: 0,
+    };
+  },
+  methods: {
+    execute(valor) {
+      this.currentValue = valor;
+      this.$emit("input", valor);
+      if (this.clicked) this.clicked();
+    },
+  },
+};
+</script>
+<style scoped>
+.button-query {
+  cursor: pointer;
+  height: 35px;
+  border: 1px solid #d5d5d5;
+  background-color: white;
+  border-radius: 3px;
+  padding-left: 10px;
+  padding-right: 7px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: normal;
+}
+
+.button-query:hover {
+  background-color: #d98621;
+  color: white;
+  border: none;
+}
+
+.icon {
+  font-size: 13px;
+}
+
+.title {
+  font-size: 16px;
+}
+
+.alignment {
+  display: inline-block;
+}
+</style>

package/src/component/shared/{BodyReport.vue → Report.vue}

@@ -61,6 +61,9 @@
             </tr>
           </tbody>
         </table>
+        <div>
+          <TotalizationReport :totalization="totalization" :totalRecords="data.length" />
+        </div>
       </div>
     </ScrollBar>
   </div>
@@ -69,6 +72,7 @@
 <script>
 import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
 import HeaderReport from "../shared/HeaderReport.vue";
+import TotalizationReport from "../shared/TotalizationReport.vue";
 import ExportExcel from "@nixweb/nixloc-ui/src/component/shared/ExportExcel";
 import print from "vue-print-nb";
 
@@ -78,11 +82,8 @@ export default {
   directives: {
     print,
   },
-  props: {
-    header: Array,
-    data: Array,
-  },
-  components: { ScrollBar, HeaderReport, ExportExcel },
+  props: ["header", "data", "totalization"],
+  components: { ScrollBar, HeaderReport, TotalizationReport, ExportExcel },
   methods: {
     convertClass(fieldComparison, classCssBody) {
       if (Array.isArray(classCssBody)) {
@@ -108,8 +109,8 @@ table tbody tr td {
 }
 
 .table thead tr {
-  border-top: 1px solid rgb(172, 172, 172);
-  border-bottom: 1px solid rgb(172, 172, 172);
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
 }
 
 .table th,

package/src/component/shared/SaveCancel.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <FixedBar position="footer" v-show="formDirty && !modal.open">
-      <div>
+      <div class="margin">
         <Button
           _key="cancelSaveCancel"
           eventName="cancelSaveCancel"
@@ -70,3 +70,8 @@ export default {
   },
 };
 </script>
+<style scoped>
+.margin{
+  margin-left: 0px;
+}
+</style>

package/src/component/shared/Search.vue

@@ -1,154 +1,154 @@
-<template>
-  <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
-                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
-                  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>
-    </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>
-</template>
-
-<script>
-import Button from "../forms/Button";
-import SelectStatic from "../forms/SelectStatic.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  components: { Button, SelectStatic },
-  name: "Search",
-  computed: {
-    search: {
-      get() {
-        return this.$store.state.generic.search;
-      },
-      set(value) {
-        this.updateSearch(value);
-      },
-    },
-  },
-  methods: {
-    ...mapMutations("generic", [
-      "updateSearch",
-      "executedSearch",
-      "clearedSearch",
-    ]),
-    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();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.icon-search {
-  font-size: 20px;
-  color: #577696;
-  display: inline-block;
-}
-
-.input {
-  display: inline-block;
-}
-
-.margin {
-  padding-top: 28px;
-}
-
-.div-button {
-  padding-top: 33px;
-}
-
-::placeholder {
-  color: #b8c4d2;
-}
-
-.molded {
-  width: 100%;
-  height: 45px;
-  font-size: 14px;
-  padding: 5px 8px 6px 15px;
-  background-color: rgb(255, 255, 255);
-  border: 1px solid rgb(220, 221, 221);
-  border-radius: 40px;
-  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"] {
-  width: 100%;
-  height: 30px;
-  font-size: 14px;
-  border: 0px solid white;
-  background-color: rgb(255, 255, 255);
-  margin-bottom: 50px;
-}
-
-input[type="text"]:focus {
-  outline: none;
-}
-
-.div-select {
-  margin-top: -30px;
-  margin-right: 5px;
-}
-
-</style>
+<template>
+  <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
+                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
+                  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>
+    </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>
+</template>
+
+<script>
+import Button from "../forms/Button";
+import SelectStatic from "../forms/SelectStatic.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  components: { Button, SelectStatic },
+  name: "Search",
+  computed: {
+    search: {
+      get() {
+        return this.$store.state.generic.search;
+      },
+      set(value) {
+        this.updateSearch(value);
+      },
+    },
+  },
+  methods: {
+    ...mapMutations("generic", [
+      "updateSearch",
+      "executedSearch",
+      "clearedSearch",
+    ]),
+    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();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-search {
+  font-size: 20px;
+  color: #577696;
+  display: inline-block;
+}
+
+.input {
+  display: inline-block;
+}
+
+.margin {
+  padding-top: 28px;
+}
+
+.div-button {
+  padding-top: 33px;
+}
+
+::placeholder {
+  color: #b8c4d2;
+}
+
+.molded {
+  width: 100%;
+  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);
+  opacity: 1;
+  transition: background-color 0.1s ease-in 0s, border 0.1s ease-in 0s;
+}
+
+input[type="text"] {
+  width: 100%;
+  height: 30px;
+  font-size: 14px;
+  border: 0px solid white;
+  background-color: rgb(255, 255, 255);
+  margin-bottom: 50px;
+}
+
+input[type="text"]:focus {
+  outline: none;
+}
+
+.div-select {
+  margin-top: -30px;
+  margin-right: 5px;
+}
+
+</style>

package/src/component/shared/SelectOption.vue

@@ -12,13 +12,18 @@
       >
         <div class="div-content text-center">
           <span :style="'font-size:' + option.titleSize + 'px;'">
-            {{ option.title }}</span
+            <i v-if="size === 'small'" :class="option.icon"></i>
+            {{ option.title }}
+          </span>
+          <div
+            v-if="size === 'medium'"
+            class="icon"
+            :style="'font-size:' + option.iconSize + 'px;'"
           >
-          <div class="icon" :style="'font-size:' + option.iconSize + 'px;'">
             <i :class="option.icon"></i>
           </div>
         </div>
-        <div>
+        <div v-if="option.tipId">
           <i
             v-b-tooltip.hover
             :title="tip(option.tipId)"
@@ -27,7 +32,7 @@
         </div>
       </div>
     </div>
-    <div class="div-btn">
+    <div class="div-btn" v-if="showButtonNext">
       <Button
         _key="btnClickedNext"
         type="info"
@@ -55,6 +60,8 @@ export default {
     titleSize: Number,
     buttonSize: String,
     buttonClassIcon: String,
+    showButtonNext: { type: Boolean, default: true },
+    size: { type: String, default: "medium" },
     width: Number,
     height: Number,
     options: Array,
@@ -90,7 +97,7 @@ export default {
 
 .option {
   cursor: pointer;
-  border: 1px solid #dbdfe9;
+  border: 1px solid #e5e4e8;
   background-color: white;
   border-radius: 8px;
   padding-left: 10px;
@@ -99,6 +106,7 @@ export default {
   margin-bottom: 10px;
   font-size: 16px;
   font-weight: normal;
+  box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
 }
 
 .alignment {
@@ -106,7 +114,7 @@ export default {
 }
 
 .option:hover {
-  background-color: #fafafc;
+  background-color: white;
 }
 
 .div-content {
@@ -114,7 +122,8 @@ export default {
 }
 
 .selected {
-  background-color: #fafafc;
+  background-color: white;
+  border-color: #4680A5;
 }
 
 .icon {
@@ -128,10 +137,10 @@ export default {
 }
 
 .title {
-  margin-bottom: 20px;
+  margin-bottom: 10px;
 }
 
 .div-btn {
-  margin-top: 20px;
+  margin-top: 10px;
 }
 </style>