@nixweb/nixloc-ui 1.9.0 → 1.11.0

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

@@ -1,108 +1,108 @@
-<template>
-  <div>
-    <div class="pagination">
-      <button class="btn-pagination" @click="previousPage" :disabled="currentPage === 1 || currentPage > totalPages">
-        <i class="fa-solid fa-chevron-left"></i>
-      </button>
-      <div class="div-pagination text-center">
-        <span v-if="isLoading('loadingLine')">
-          <vue-loading type="bubbles" color="#FCA944" :size="{ width: '26px', height: '26px' }"></vue-loading>
-        </span>
-        <span v-else>
-          <div>
-            <span class="title">
-              <span v-if="totalPages == 0">0</span>
-              <span v-else>{{ currentPage }}</span> de {{ totalPages }}</span>
-          </div>
-        </span>
-      </div>
-      <button class="btn-pagination" @click="nextPage"
-        :disabled="currentPage === totalPages || currentPage > totalPages">
-        <i class="fa-solid fa-chevron-right"></i>
-      </button>
-    </div>
-  </div>
-</template>
-<script>
-
-import { mapGetters, mapMutations, mapState } from "vuex";
-
-export default {
-  props: {
-    totalRecords: Number,
-  },
-  data() {
-    return {
-      currentPage: 1,
-      totalPerPage: 10 // Substitua pelo número de registros por página desejado
-    };
-  },
-  created() {
-    var filter = this.getFilterStorage(this.$route.name);
-    if (filter)
-      this.currentPage = filter.baseParams.currentPage;
-  },
-  computed: {
-    ...mapState("generic", ["paginations"]),
-    ...mapGetters("generic", ["isLoading", "getFilterStorage"]),
-    totalPages() {
-      return Math.ceil(this.totalRecords / this.paginations.totalPerPage);
-    },
-    paginatedData() {
-      const startIndex = (this.currentPage - 1) * this.paginations.totalPerPage;
-      const endIndex = Math.min(startIndex + this.paginations.totalPerPage, this.totalRecords);
-      return Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex + 1);
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["addEvent"]),
-    nextPage() {
-      if (this.currentPage < this.totalPages) {
-        this.currentPage++;
-      }
-      this.addEvent({ name: "page-click", data: this.currentPage });
-    },
-    previousPage() {
-      if (this.currentPage > 1) {
-        this.currentPage--;
-      }
-      this.addEvent({ name: "page-click", data: this.currentPage });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.div-pagination {
-  width: 100px;
-}
-
-.btn-pagination {
-  padding: 5px;
-  cursor: pointer;
-  border: none;
-  min-width: 35px;
-  border-radius: 30px !important;
-  font-size: 13px !important;
-  font-weight: 400;
-  letter-spacing: 1px !important;
-}
-
-
-.pagination {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  margin-right: 10px;
-  margin-bottom: 10px;
-}
-
-.pagination-button:hover {
-  background-color: #ccc;
-}
-
-.pagination-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-</style>
+<template>
+  <div>
+    <div class="pagination">
+      <button class="btn-pagination" @click="previousPage" :disabled="currentPage === 1 || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
+      <div class="div-pagination text-center">
+        <span v-if="isLoading('loadingLine')">
+          <vue-loading type="bubbles" color="#FCA944" :size="{ width: '26px', height: '26px' }"></vue-loading>
+        </span>
+        <span v-else>
+          <div>
+            <span class="title">
+              <span v-if="totalPages == 0">0</span>
+              <span v-else>{{ currentPage }}</span> de {{ totalPages }}</span>
+          </div>
+        </span>
+      </div>
+      <button class="btn-pagination" @click="nextPage"
+        :disabled="currentPage === totalPages || currentPage > totalPages">
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+
+import { mapGetters, mapMutations, mapState } from "vuex";
+
+export default {
+  props: {
+    totalRecords: Number,
+  },
+  data() {
+    return {
+      currentPage: 1,
+      totalPerPage: 10 // Substitua pelo número de registros por página desejado
+    };
+  },
+  created() {
+    var filter = this.getFilterStorage(this.$route.name);
+    if (filter)
+      this.currentPage = filter.baseParams.currentPage;
+  },
+  computed: {
+    ...mapState("generic", ["paginations"]),
+    ...mapGetters("generic", ["isLoading", "getFilterStorage"]),
+    totalPages() {
+      return Math.ceil(this.totalRecords / this.paginations.totalPerPage);
+    },
+    paginatedData() {
+      const startIndex = (this.currentPage - 1) * this.paginations.totalPerPage;
+      const endIndex = Math.min(startIndex + this.paginations.totalPerPage, this.totalRecords);
+      return Array.from({ length: endIndex - startIndex }, (_, index) => index + startIndex + 1);
+    }
+  },
+  methods: {
+    ...mapMutations("generic", ["addEvent"]),
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.currentPage++;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    },
+    previousPage() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+      }
+      this.addEvent({ name: "page-click", data: this.currentPage });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.div-pagination {
+  width: 100px;
+}
+
+.btn-pagination {
+  padding: 5px;
+  cursor: pointer;
+  border: none;
+  min-width: 35px;
+  border-radius: 30px !important;
+  font-size: 13px !important;
+  font-weight: 400;
+  letter-spacing: 1px !important;
+}
+
+
+.pagination {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-right: 10px;
+  margin-bottom: 10px;
+}
+
+.pagination-button:hover {
+  background-color: #ccc;
+}
+
+.pagination-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

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

@@ -1,25 +1,25 @@
-<template>
-  <div>
-    <progress-bar :bg-color="bColor" :bar-color="bgColor" :size="size" :text="text" :val="value" :max="max"
-      bar-border-radius="10"></progress-bar>
-  </div>
-</template>
-<script>
-import ProgressBar from "vue-simple-progress";
-
-// não mudar o nome Progress para ProgressBar
-export default {
-  name: "Progress",
-  components: {
-    ProgressBar,
-  },
-  props: {
-    bgColor: String,
-    bColor: String,
-    text: String,
-    value: Number,
-    max: Number,
-    size: String,
-  },
-};
-</script>
+<template>
+  <div>
+    <progress-bar :bg-color="bColor" :bar-color="bgColor" :size="size" :text="text" :val="value" :max="max"
+      bar-border-radius="10"></progress-bar>
+  </div>
+</template>
+<script>
+import ProgressBar from "vue-simple-progress";
+
+// não mudar o nome Progress para ProgressBar
+export default {
+  name: "Progress",
+  components: {
+    ProgressBar,
+  },
+  props: {
+    bgColor: String,
+    bColor: String,
+    text: String,
+    value: Number,
+    max: Number,
+    size: String,
+  },
+};
+</script>

package/@nixweb/nixloc-ui/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>