@nixweb/nixloc-ui 1.14.0 → 1.16.0

package/src/component/shared/TableTotalPerPage.vue

@@ -1,114 +0,0 @@
-<template>
-    <div v-if="showTotalPerPage && totalRecords > 0" class="pagination-wrapper">
-        <ul class="pagination-list">
-            <li v-for="opt in filteredOptions" :key="opt">
-                <button class="pagination-pill" :class="{ 'is-selected': value === opt }" type="button"
-                    @click="select(opt)">
-                    {{ opt }}
-                </button>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from "vuex";
-
-export default {
-    name: "PaginationPerPage",
-    props: {
-        totalRecords: { type: Number, default: 0 },
-        showTotalPerPage: { type: Boolean, default: true },
-    },
-    data() {
-        return {
-            value: 10,
-            options: [10, 20, 50, 100],
-        };
-    },
-    computed: {
-        ...mapState("generic", ["paginations"]),
-        filteredOptions() {
-            const total = this.totalRecords;
-
-            if (total <= 10) return [10];
-            if (total <= 20) return [10, 20];
-            if (total <= 50) return [10, 20, 50];
-            if (total <= 100) return [10, 20, 50, 100];
-            return this.options;
-        },
-    },
-    created() {
-        const fromStore = Number(this.paginations?.totalPerPage);
-        if (Number.isFinite(fromStore)) {
-            this.value = fromStore;
-        }
-        this.updateTotalPerPage({ content: String(this.value), id: this.value });
-    },
-    methods: {
-        ...mapMutations("generic", ["executedSearch", "updateTotalPerPage"]),
-        select(opt) {
-            if (this.value === opt) return;
-            this.value = opt;
-            this.updateTotalPerPage({ content: String(opt), id: opt });
-            this.executedSearch();
-        },
-    },
-    watch: {
-        totalRecords() {
-            if (this.totalRecords <= 0) return;
-            if (!this.filteredOptions.includes(this.value)) {
-                const next = this.filteredOptions[this.filteredOptions.length - 1];
-                this.value = next;
-                this.updateTotalPerPage({ content: String(next), id: next });
-            }
-        },
-    },
-};
-</script>
-
-<style scoped>
-.pagination-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 8px;
-    width: 100%;
-    font-family: inherit;
-}
-
-.pagination-list {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.pagination-pill {
-    width: 31px;
-    height: 31px;
-    border-radius: 50%;
-    background: #f5f5f5;
-    border: none;
-    color: #444;
-    font-size: 13px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.2s, color 0.2s, transform 0.1s;
-}
-
-.pagination-pill:hover {
-    background: #e0e0e0;
-}
-
-.pagination-pill.is-selected {
-    background: #D98621;
-    color: #fff;
-}
-
-.pagination-pill:active {
-    transform: scale(0.95);
-}
-</style>

package/src/component/shared/TableTotalRecords.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="row c-div-total">
-    <div class="col-sm-12 text-right">
-      <span class="c-title">
-        Total de
-        <div class="badge">
-          <span class="total-records">{{ totalRecords }}</span>
-        </div>
-        <span class="records">registro(s)</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TableTotalRecords",
-  props: {
-    totalRecords: {
-      type: Number,
-      default: 0,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.c-div-total {
-  padding-bottom: 10px;
-}
-
-.c-title {
-  font-size: 14px;
-}
-
-.total-records {
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.records {
-  margin-left: 5px;
-}
-</style>

package/src/component/shared/TableTotalization.vue

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <div class="badge-side-by-side text-center" v-for="item in totalization" :key="item.title">
-      <div class="badge-totalization" :class="item.classCss">
-        <i :class="item.classIcon"></i>
-        <span class="title-totalization"> {{ item.title }} </span>
-        <span>{{ item.value | currency }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TableTotalization",
-  props: {
-    totalization: Array,
-  },
-};
-</script>
-
-<style scoped>
-.badge-side-by-side {
-  display: inline-block;
-  margin-right: 8px;
-  margin-bottom: 10px;
-}
-
-.badge-totalization {
-  border: 1px solid #e6e7eb;
-  padding: 3px 8px 3px 8px;
-  border-radius: 30px;
-  font-size: 13px;
-}
-
-.title-totalization{
-  margin-left: 1px;
-}
-
-.revenue {
-  color: darkblue;
-}
-
-.expense {
-  color: red;
-}
-</style>

package/src/component/shared/TimeLine.vue

@@ -1,42 +0,0 @@
-<template>
-  <div>
-    <Loading :center="false" v-if="loading" />
-    <div v-else>
-      <ScrollBar :minHeight="200" :maxHeight="300">
-        <Timeline dateLocale="pt-BR" order="desc" :uniqueTimeline="true" :timeline-items="timelineItems"
-          message-when-no-items="Nenhum registro encontrado!" />
-      </ScrollBar>
-    </div>
-  </div>
-</template>
-<script>
-import Loading from "@nixweb/nixloc-ui/src/component/shared/Loading.vue";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-import Timeline from "timeline-vuejs";
-
-import { mapGetters, mapActions } from "vuex";
-
-export default {
-  name: "TimeLine",
-  props: {
-    loading: Boolean,
-    timelineItems: Array,
-  },
-  components: {
-    Loading,
-    Timeline,
-    ScrollBar,
-  },
-};
-</script>
-<style>
-.timeline {
-  max-width: 1000px !important;
-}
-
-.timeline-item .date-item {
-  font-size: 14px !important;
-  letter-spacing: 1px !important;
-  font-weight: normal !important;
-}
-</style>

package/src/component/shared/Timer.vue

@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <span v-if="play" class="pause" @click="play = false">
-      <i class="fa-solid fa-pause"></i>
-    </span>
-    <span v-else class="play" @click="play = true">
-      <i class="fa-solid fa-play"></i>
-    </span>
-    <span class="title"> {{ title }}</span>
-    <span class="title timer">
-      {{ time }}
-    </span>
-    <span class="title"> segundos...</span>
-  </div>
-</template>
-<script>
-export default {
-  name: "Timer",
-  props: {
-    initialTimer: {
-      type: Number,
-      default: 10,
-    },
-    title: {
-      type: String,
-      default: "Atualizado em",
-    },
-    endTime: Function,
-  },
-  data() {
-    return {
-      time: 10,
-      play: true,
-    };
-  },
-  created() {
-    this.time = this.initialTimer;
-    this.start();
-  },
-  methods: {
-    start() {
-      this.$options.interval = setInterval(this.decrement, 1000);
-    },
-    stop() {
-      clearInterval(this.$options.interval);
-    },
-    decrement() {
-      if (this.play) this.time--;
-    },
-  },
-  watch: {
-    time() {
-      if (this.time == 0) {
-        this.time = this.initialTimer;
-        clearInterval(this.$options.interval);
-        if (this.endTime) this.endTime();
-        this.start();
-      }
-    },
-  },
-};
-</script>
-<style scoped>
-.timer {
-  font-size: 15px;
-  font-weight: bold;
-}
-
-.play {
-  color: darkblue;
-  cursor: pointer;
-}
-
-.pause {
-  color: red;
-  cursor: pointer;
-}
-</style>

package/src/component/shared/Tip.vue

@@ -1,42 +0,0 @@
-<template>
-  <span class="tip" v-if="title">
-    <i
-      class="fal fa-exclamation-circle"
-      :title="title"
-      v-b-popover.hover.top="description"
-    ></i>
-  </span>
-</template>
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  name: "Tip",
-  props: {
-    field: String,
-    formName: String,
-  },
-  data() {
-    return {
-      title: "",
-      description: "",
-    };
-  },
-  mounted() {
-    let tip = this.tip({ field: this.field, formName: this.formName });
-    if (tip) {
-      this.title = tip.title;
-      this.description = tip.description;
-    }
-  },
-  computed: {
-    ...mapGetters("generic", ["tip"]),
-  },
-};
-</script>
-
-<style scoped>
-.tip {
-  cursor: pointer;
-}
-</style>

package/src/component/shared/Toast.vue

@@ -1,69 +0,0 @@
-<template></template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "Notificacao",
-  computed: {
-    ...mapState("generic", ["toast"]),
-  },
-  watch: {
-    toast: {
-      handler(value) {
-        this.notifica(value);
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    notifica(value) {
-      if (value.type == "postApi" || value.type == "putApi")
-        this.$toasted.show("Salvo com sucesso", {
-          type: "success",
-        });
-      if (value.type == "postApiError" || value.type == "putApiErro") {
-        this.$toasted.show("Não foi possível adicionar/modificar", {
-          type: "error",
-        });
-        this.voltarParaTopo();
-      }
-
-      if (value.type == "removerTodosApiSucesso")
-        this.$toasted.show("Removido com sucesso", {
-          type: "success",
-        });
-      if (value.type == "removerTodosApiErro") {
-        this.$toasted.show("Não foi possível remover", {
-          type: "error",
-        });
-        this.voltarParaTopo();
-      }
-
-      if (value.type == "noPermission") {
-        this.$toasted.show("Usuário sem permissão", {
-          type: "error",
-        });
-        this.voltarParaTopo();
-      }
-
-      if (value.type == "falhaGenerica") {
-        this.$toasted.show("Ops! Falha de servidor", {
-          type: "error",
-        });
-        this.voltarParaTopo();
-      }
-
-      if (value.type == "messageError") {
-        this.$toasted.show("Ops! Algo deu errado", {
-          type: "error",
-        });
-        this.voltarParaTopo();
-      }
-    },
-    voltarParaTopo() {
-      window.scrollTo(0, 0);
-    },
-  },
-};
-</script>

package/src/component/shared/ToggleTheme.vue

@@ -1,128 +0,0 @@
-<template>
-    <div class="toggle-container">
-        <label class="switch">
-            <input type="checkbox" v-model="isDarkMode" @change="toggleTheme">
-            <span class="slider round">
-                <div class="icon-theme-light" v-if="themeLabel == 'Dark'">
-                    <i class="fa-solid fa-sun"></i>
-                </div>
-                <div class="icon-theme-dark" v-if="themeLabel == 'Light'">
-                    <i class="fa-solid fa-moon"></i>
-                </div>
-            </span>
-        </label>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            isDarkMode: false,
-        };
-    },
-    computed: {
-        themeLabel() {
-            return this.isDarkMode ? 'Dark' : 'Light';
-        }
-    },
-    methods: {
-        toggleTheme() {
-            if (this.isDarkMode) {
-                document.body.classList.add('dark-theme');
-                document.body.classList.remove('light-theme');
-            } else {
-                document.body.classList.add('light-theme');
-                document.body.classList.remove('dark-theme');
-            }
-        },
-    },
-    mounted() {
-        if (localStorage.getItem('theme') === 'dark') {
-            this.isDarkMode = true;
-            document.body.classList.add('dark-theme');
-            document.body.classList.remove('light-theme');
-        } else {
-            this.isDarkMode = false;
-            document.body.classList.add('light-theme');
-            document.body.classList.remove('dark-theme');
-        }
-    },
-    watch: {
-        isDarkMode(newVal) {
-            localStorage.setItem('theme', newVal ? 'dark' : 'light');
-        }
-    }
-};
-</script>
-
-<style scoped>
-.icon-theme-dark {
-    margin-left: 26px;
-    margin-top: -2px;
-}
-
-.icon-theme-light {
-    margin-left: 6px;
-    margin-top: -3px;
-    color: white;
-}
-
-
-.toggle-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 45px;
-    height: 22px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    transition: 0.4s;
-    border-radius: 34px;
-}
-
-.slider:before {
-    position: absolute;
-    content: "";
-    height: 14px;
-    width: 14px;
-    border-radius: 50%;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    transition: 0.4s;
-}
-
-input:checked+.slider {
-    background-color: #ccc;
-}
-
-input:checked+.slider:before {
-    transform: translateX(20px);
-}
-
-.theme-indicator {
-    font-size: 12px;
-    font-weight: bold;
-    color: #333;
-}
-</style>

package/src/component/shared/TotalizationReport.vue

@@ -1,86 +0,0 @@
-<template>
-  <div>
-    <hr class="hr-report" />
-    <div class="text-right">
-      <b-row>
-        <b-col sm="9">
-          <span class="title-report-header"> Total de Registros .................. </span>
-        </b-col>
-        <b-col sm="3">
-          <span class="title-report-header value-report-header"> {{ totalRecords }} </span>
-        </b-col>
-      </b-row>
-      <!-- Utilizado para calculo do subReport -->
-      <b-row v-if="totalizationCustom">
-        <b-col sm="9">
-          <span class="title-report-header"> {{ totalizationCustom[0].title }} .................. </span>
-        </b-col>
-        <b-col sm="3">
-          <span class="title-report-header value-report-header"> {{ totalizationCustom[0].value | currency }} </span>
-        </b-col>
-      </b-row>
-    </div>
-    <div class="text-right" v-for="item in totalization" :key="item.title">
-      <b-row>
-        <b-col sm="10">
-          <span v-if="convertName(item[0]).type == 'currency'">
-            <span class="title-report-header">
-              {{ convertName(item[0]).title }} ..................
-            </span>
-          </span>
-        </b-col>
-        <b-col sm="2">
-          <span v-if="convertName(item[0]).type == 'currency'">
-            {{ item[1] | currency }}
-          </span>
-          <span v-if="convertName(item[0]).type == 'numeric'">
-            {{ Math.round(item[1]) }}
-          </span>
-        </b-col>
-      </b-row>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "TotalizationReport",
-  props: ["totalization", "totalizationCustom", "totalRecords"],
-  computed: {
-    ...mapState("report", ["finalQueryFormatOData"]),
-  },
-  methods: {
-    convertName(value) {
-      var filter = this.finalQueryFormatOData.totalization.filter((item) => {
-        return item.value == value;
-      });
-      return Object.assign(filter[0]);
-    },
-  },
-};
-</script>
-
-<style scoped>
-.title-report-header {
-  font-size: 15px;
-  font-weight: 400;
-}
-
-.value-report-header {
-  margin-left: 50px;
-}
-
-.hr-report {
-  background: black !important;
-  height: 0px !important;
-}
-
-.receipt {
-  color: darkblue;
-}
-
-.div-title {
-  margin-right: 0px;
-}
-</style>