@nixweb/nixloc-ui 1.2.0 → 1.4.0

package/package.json

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

package/src/component/forms/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="c-div-button" v-b-tooltip.hover :title="tooltip">
-    <button :style="'background-color:' + backGroundColor + ';color:' + color" class="button" :class="{
+    <button :id="_key" :style="'background-color:' + backGroundColor + ';color:' + color" class="button" :class="{
       small: size === 'small',
       medium: size === 'medium',
       large: size === 'large',

package/src/component/forms/ButtonFilter.vue

@@ -1,49 +1,77 @@
 <template>
   <div>
     <div class="btn-container side-by-side text-center">
-      <div v-for="option in options" class="btn-item-button-filter side-by-side"
-        :class="{ 'selected-button-filter': option.value == selected }" @click="execute(option)" :key="option.title">
+      <div v-for="option in options" :key="option.value || option.title" class="btn-item-button-filter side-by-side"
+        :class="{ 'selected-button-filter': option.value === selected }" @click="execute(option)">
         <i :class="option.classIcon"></i>
         <span class="btn-title">{{ option.title }}</span>
       </div>
     </div>
   </div>
 </template>
+
 <script>
 import { mapMutations } from "vuex";
 
 export default {
   name: "ButtonFilter",
-  props: {
-    initialOption: String,
-    options: {
-      type: Array,
-      default: [],
-    },
-    value: String,
-    params: Object,
-    clicked: Function,
-  },
+  props: ["initialOption", "options", "value", "params", "clicked"],
   data() {
     return {
-      selected: "",
+      selected: null,
     };
   },
   created() {
-    if (this.initialOption) this.selected = this.initialOption;
+    this.setSelectedFromProps();
+  },
+  watch: {
+    // se o pai atualizar o v-model (prop value), sincroniza
+    value() {
+      this.setSelectedFromProps();
+    },
+    // se o pai trocar a initialOption depois, sincroniza também
+    initialOption() {
+      this.setSelectedFromProps();
+    },
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
+
+    setSelectedFromProps() {
+      // prioridade para v-model (value)
+      if (this.value !== undefined) {
+        this.selected = this.value;
+        return;
+      }
+
+      // aceita initialOption como valor (0, "", "x", etc.) ou como objeto { value: ... }
+      if (this.initialOption !== undefined && this.initialOption !== null) {
+        this.selected =
+          typeof this.initialOption === "object"
+            ? this.initialOption.value
+            : this.initialOption;
+      }
+    },
+
     execute(option) {
-      if (this.initialOption) this.selected = option.value;
-      this.addEvent({ name: option.eventName, data: option });
+      // SEMPRE atualiza o selecionado
+      this.selected = option.value;
+
+      // eventos
+      if (option.eventName) {
+        this.addEvent({ name: option.eventName, data: option });
+      }
+
+      // emite para v-model do pai
       this.$emit("input", option.value);
+
+      // callback opcional
       if (this.clicked) this.clicked(this.params);
     },
   },
-
 };
 </script>
+
 <style scoped>
 .btn-container {
   margin-left: 10px;
@@ -67,10 +95,10 @@ export default {
 }
 
 .selected-button-filter {
-  background-color: #4BB4E2;
-  color: white;
+  background-color: #4bb4e2;
+  color: #fff;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;
 }
-</style>
+</style>

package/src/component/forms/ButtonGroupInline.vue

@@ -0,0 +1,210 @@
+<template>
+    <div class="button-inline-group" ref="wrap">
+        <button class="button-inline-trigger" title="Mais opções" @click.stop="toggleMenu" ref="triggerBtn">
+            <i class="fa-solid fa-ellipsis-vertical"></i>
+        </button>
+
+        <transition name="button-inline-fade">
+            <div v-if="showMenu" class="button-inline-popover-fixed" :style="popoverStyle" ref="popover" role="menu">
+                <div class="button-inline-popover-inner">
+                    <div class="button-inline-buttons">
+                        <button v-for="(btn, i) in buttons" :key="btn.id || i" class="button-inline-btn"
+                            :title="btn.title" :style="buttonStyle(btn, i)" @click="onAction(btn)">
+                            <i :class="btn.icon"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+
+import { mapMutations } from "vuex";
+
+export default {
+    name: "ButtonGroupInline",
+    props: {
+        buttons: { type: Array, required: true },
+        defaultSize: { type: Number, default: 35 }
+    },
+    data() {
+        return {
+            showMenu: false,
+            popoverStyle: {
+                position: "fixed",
+                top: "0px",
+                left: "0px",
+                transform: "translateX(-50%)",
+                zIndex: 9999
+            }
+        };
+    },
+    methods: {
+        ...mapMutations("generic", ["addEvent"]),
+        toggleMenu() {
+            this.showMenu = !this.showMenu;
+            if (this.showMenu) {
+                this.$nextTick(() => {
+                    this.positionPopover();
+                    window.addEventListener("scroll", this.positionPopover, true);
+                    window.addEventListener("resize", this.positionPopover, true);
+                    document.addEventListener("click", this.onOutsideClick, true);
+                    document.addEventListener("keydown", this.onKeydown, true);
+                });
+            } else {
+                this.unbindGlobal();
+            }
+        },
+        positionPopover() {
+            const trigger = this.$refs.triggerBtn;
+            const pop = this.$refs.popover;
+            if (!trigger || !pop) return;
+
+            const rect = trigger.getBoundingClientRect();
+            let top = rect.bottom + 6;
+            let center = rect.left + rect.width / 2;
+
+            const popWidth = pop.offsetWidth || 0;
+            const vw = window.innerWidth || document.documentElement.clientWidth;
+            const margin = 8;
+
+            const minCenter = margin + popWidth / 2;
+            const maxCenter = vw - margin - popWidth / 2;
+            center = Math.max(minCenter, Math.min(maxCenter, center));
+
+            const popHeight = pop.offsetHeight || 0;
+            const vh = window.innerHeight || document.documentElement.clientHeight;
+            const spaceBelow = vh - rect.bottom;
+            const spaceAbove = rect.top;
+
+            if (spaceBelow < popHeight + 12 && spaceAbove > popHeight + 12) {
+                top = rect.top - 6 - popHeight;
+            }
+
+            this.popoverStyle = {
+                position: "fixed",
+                top: `${Math.round(top)}px`,
+                left: `${Math.round(center)}px`,
+                transform: "translateX(-50%)",
+                zIndex: 9999
+            };
+        },
+        onOutsideClick(e) {
+            const wrap = this.$refs.wrap;
+            const pop = this.$refs.popover;
+            if ((wrap && wrap.contains(e.target)) || (pop && pop.contains(e.target))) return;
+            this.showMenu = false;
+            this.unbindGlobal();
+
+        },
+        onKeydown(e) {
+            if (e.key === "Escape") {
+                this.showMenu = false;
+                this.unbindGlobal();
+            }
+        },
+        unbindGlobal() {
+            window.removeEventListener("scroll", this.positionPopover, true);
+            window.removeEventListener("resize", this.positionPopover, true);
+            document.removeEventListener("click", this.onOutsideClick, true);
+            document.removeEventListener("keydown", this.onKeydown, true);
+        },
+        onAction(btn) {
+            this.$emit("action", btn);
+            this.showMenu = false;
+            this.unbindGlobal();
+            this.addEvent({ name: btn.eventName, data: btn.eventData });
+        },
+        buttonStyle(btn, i) {
+            const size = btn.size || this.defaultSize;
+            return {
+                backgroundColor: btn.color || "#577696",
+                width: size + "px",
+                height: size + "px",
+                transitionDelay: `${i * 45}ms`
+            };
+        }
+    },
+    beforeDestroy() {
+        this.unbindGlobal();
+    }
+};
+</script>
+
+<style scoped>
+.button-inline-group {
+    position: relative;
+    display: inline-block;
+}
+
+.button-inline-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    color: #9b9ea3;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.button-inline-trigger:hover {
+    background: #f3f4f6;
+    color: #111827;
+}
+
+.button-inline-popover-fixed {
+    position: fixed;
+    pointer-events: auto;
+}
+
+.button-inline-popover-inner {
+    background: #ffffff;
+    border: 1px solid #e6ebf2;
+    border-radius: 50px;
+    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
+    padding: 2px;
+}
+
+.button-inline-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    padding: 4px;
+}
+
+.button-inline-btn {
+    border-radius: 50%;
+    border: none;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    cursor: pointer;
+    transition: all 0.18s ease;
+}
+
+.button-inline-btn:hover {
+    filter: brightness(0.9);
+    transform: translateY(-2px);
+}
+
+/* Fade animado */
+.button-inline-fade-enter-active,
+.button-inline-fade-leave-active {
+    transition: opacity 0.25s ease;
+}
+
+.button-inline-fade-enter,
+.button-inline-fade-leave-to {
+    opacity: 0;
+}
+</style>

package/src/component/forms/DateTime.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-group">
-    <label>
+    <label v-if="title">
       <span class="title">{{ title }} </span>
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />

package/src/component/forms/DateYearMonth.vue

@@ -1,193 +1,452 @@
 <template>
-    <div class="date-filter">
-        <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-            :disabled="disabled">
-            <i class="fa-solid fa-chevron-left"></i>
+  <div class="date-year-month-wrap">
+    <div v-if="hasSelection" class="date-year-month-row">
+      <div class="date-year-month-chip">
+        <i class="fa-regular fa-calendar"></i>
+        <span>{{ badgeLabel }}</span>
+        <button class="date-year-month-chip-close" @click="clearSelection" :disabled="disabled">
+          <i class="fa-solid fa-xmark"></i>
         </button>
-        <span class="date-display" :class="{ 'title-disabled': disabled }">{{ displayValue }} </span>
-        <span class="date-icon" @click="resetSelection()" :class="{ 'disabled': disabled }">
-            <i class="fa-solid fa-calendar-week"></i>
-        </span>
-        <button @click="next" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
-            :disabled="disabled">
-            <i class="fa-solid fa-chevron-right"></i>
+      </div>
+    </div>
+
+    <div v-else class="date-year-month-row" ref="anchor">
+      <div class="date-year-month-group">
+        <button class="date-year-month-nav date-year-month-year" @click="decYear" :disabled="disabled">
+          <i class="fa-solid fa-angle-left"></i>
+        </button>
+        <span class="date-year-month-label" :class="{ 'date-year-month-muted': disabled }">{{ year }}</span>
+        <button class="date-year-month-nav date-year-month-year" @click="incYear" :disabled="disabled">
+          <i class="fa-solid fa-angle-right"></i>
+        </button>
+      </div>
+
+      <div class="date-year-month-sep" v-if="mode === 'month'"></div>
+
+      <div class="date-year-month-group" v-if="mode === 'month'">
+        <button class="date-year-month-nav date-year-month-month" @click="decMonth" :disabled="disabled">
+          <i class="fa-solid fa-angle-left"></i>
+        </button>
+        <span class="date-year-month-label" :class="{ 'date-year-month-muted': disabled }">{{ monthName }}</span>
+        <button class="date-year-month-nav date-year-month-month" @click="incMonth" :disabled="disabled">
+          <i class="fa-solid fa-angle-right"></i>
         </button>
+      </div>
+
+      <div class="date-year-month-actions">
+        <div class="date-year-month-dropdown" ref="dd">
+          <button class="date-year-month-btn" @click="toggleMenu" :disabled="disabled">
+            <i class="fa-solid fa-filters"></i>
+            <span>{{ currentOptionLabel }}</span>
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+          <ul v-if="menuOpen" class="date-year-month-menu">
+            <li class="date-year-month-option" @click="selectOption('today')">Hoje</li>
+            <li class="date-year-month-option" @click="selectOption('year')">Ano</li>
+            <li class="date-year-month-option" @click="selectOption('all')">Todos</li>
+            <li class="date-year-month-option" @click="selectOption('periodCustom')">Vencimento</li>
+          </ul>
+        </div>
+      </div>
     </div>
+
+    <transition name="date-year-month-pop">
+      <div v-if="showRange && !disabled" class="date-year-month-popover" :style="popoverStyle">
+        <div class="date-year-month-title">Período</div>
+        <DateTime :confirm="true" :range="true" field="dueDate" format="DD/MM/YYYY" type="date" placeholder
+          :required="false" v-model="startEnd" />
+        <div class="date-year-month-actions-row">
+          <button class="date-year-month-btn date-year-month-btn-ghost" @click="closeRange">Cancelar</button>
+          <button class="date-year-month-btn date-year-month-btn-apply" :disabled="!startEnd.length"
+            @click="applyStaticRange">Aplicar</button>
+        </div>
+      </div>
+    </transition>
+
+    <transition name="date-year-month-pop">
+      <div v-if="showYearPicker && !disabled" class="date-year-month-popover" :style="popoverStyle">
+        <div class="date-year-month-title">Ano</div>
+        <div class="date-year-month-year-div">
+          <div class="date-year-month-year-row">
+            <button class="date-year-month-year-ctrl" @click="tempYear--" :disabled="tempYear <= 0"><i
+                class="fa-solid fa-minus"></i></button>
+            <input class="date-year-month-year-input" type="number" v-model.number="tempYear" />
+            <button class="date-year-month-year-ctrl" @click="tempYear++"><i class="fa-solid fa-plus"></i></button>
+          </div>
+          <div class="date-year-month-actions-row">
+            <button class="date-year-month-btn date-year-month-btn-ghost" @click="closeYearPicker">Cancelar</button>
+            <button class="date-year-month-btn date-year-month-btn-apply" @click="applyYear">Aplicar</button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+
+import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
+
+const PT_BR_MONTHS = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
 
 export default {
-    props: {
-        mode: {
-            type: String,
-            required: true,
-            validator(value) {
-                return ['month', 'year'].includes(value);
-            }
-        },
-        value: {
-            type: Number,
-            required: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        }
+  name: "DateYearMonth",
+  components: {
+    DateTime
+  },
+  model: { prop: "value", event: "input" },
+  props: {
+    mode: { type: String, required: true, validator: v => ["year", "month"].includes(v) },
+    value: {
+      type: Object,
+      default: () => ({
+        optionSelected: "",
+        startEnd: [],
+        year: new Date().getFullYear(),
+        month: new Date().getMonth() + 1
+      })
+    },
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    const v = this.value || {};
+    return {
+      optionSelected: v.optionSelected || "",
+      startEnd: Array.isArray(v.startEnd) ? v.startEnd : [],
+      year: Number.isFinite(v.year) ? v.year : new Date().getFullYear(),
+      month: Number.isFinite(v.month) ? v.month : (new Date().getMonth() + 1),
+      showRange: false,
+      showYearPicker: false,
+      tempYear: Number.isFinite(v.year) ? v.year : new Date().getFullYear(),
+      popoverStyle: {},
+      menuOpen: false
+    };
+  },
+  created() { this.emitChanged(); },
+  computed: {
+    monthName() { return PT_BR_MONTHS[(this.month - 1 + 12) % 12]; },
+    hasSelection() { return ["all", "today", "periodCustom", "year"].includes(this.optionSelected); },
+    badgeLabel() {
+      if (this.optionSelected === "all") return "Todos";
+      if (this.optionSelected === "today") return "Hoje";
+      if (this.optionSelected === "year") return `Ano ${this.year}`;
+      if (this.optionSelected === "periodCustom") return `${this.startEnd[0]} — ${this.startEnd[1]}`;
+      return "";
+    },
+    currentOptionLabel() {
+      if (this.optionSelected === "all") return "Todos";
+      if (this.optionSelected === "today") return "Hoje";
+      if (this.optionSelected === "year") return "Ano";
+      if (this.optionSelected === "periodCustom") return "Personalizado";
+      return "Mais";
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler(v) {
+        if (!v) return;
+        this.optionSelected = v.optionSelected || "";
+        this.startEnd = Array.isArray(v.startEnd) ? v.startEnd : [];
+        if (Number.isFinite(v.year)) { this.year = v.year; this.tempYear = v.year; }
+        if (Number.isFinite(v.month)) this.month = v.month;
+      }
+    }
+  },
+  methods: {
+    payload() {
+      return {
+        optionSelected: this.optionSelected,
+        startEnd: this.optionSelected === "periodCustom" ? this.startEnd : [],
+        year: this.year,
+        month: this.month
+      };
     },
-    data() {
-        return {
-            currentMonth: new Date().getMonth(),
-            currentYear: new Date().getFullYear()
-        };
+    emitChanged() {
+      const p = this.payload();
+      this.$emit("input", p);
+      this.$emit("changed", p);
     },
-    created() {
-        this.resetSelection();
+    // navegação padrão
+    decYear() { if (this.disabled) return; this.year--; this.emitChanged(); },
+    incYear() { if (this.disabled) return; this.year++; this.emitChanged(); },
+    decMonth() {
+      if (this.disabled || this.mode !== "month") return;
+      if (this.month === 1) { this.month = 12; this.year--; } else { this.month--; }
+      this.emitChanged();
     },
-    mounted() {
-        this.sendEvent();
+    incMonth() {
+      if (this.disabled || this.mode !== "month") return;
+      if (this.month === 12) { this.month = 1; this.year++; } else { this.month++; }
+      this.emitChanged();
     },
-    computed: {
-        displayValue() {
-            if (this.mode === 'month') {
-                return this.monthNames[this.currentMonth];
-            } else {
-                return this.currentYear;
-            }
-        },
-        monthNames() {
-            return ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
-        },
-        buttonClass() {
-            return this.mode === 'month' ? 'month-mode' : 'year-mode';
-        }
+    // dropdown
+    toggleMenu() {
+      if (this.disabled) return;
+      this.menuOpen = !this.menuOpen;
+      if (this.menuOpen) document.addEventListener("click", this.onClickOutside);
     },
-    methods: {
-        ...mapMutations("generic", ["addEvent"]),
-        previous() {
-            if (this.disabled) return;
-            if (this.mode === 'month') {
-                this.currentMonth = (this.currentMonth + 11) % 12;
-                if (this.currentMonth === 11) {
-                    this.currentYear--;
-                }
-            } else {
-                this.currentYear--;
-            }
-            this.$emit('input', this.getValue());
-            this.sendEvent();
-        },
-        next() {
-            if (this.disabled) return;
-            if (this.mode === 'month') {
-                this.currentMonth = (this.currentMonth + 1) % 12;
-                if (this.currentMonth === 0) {
-                    this.currentYear++;
-                }
-            } else {
-                this.currentYear++;
-            }
-            this.$emit('input', this.getValue());
-            this.sendEvent();
-        },
-        resetSelection() {
-            const now = new Date();
-            if (this.mode === 'month') {
-                this.currentMonth = now.getMonth();
-                this.currentYear = now.getFullYear();
-            } else {
-                this.currentYear = now.getFullYear();
-            }
-            this.sendEvent();
-        },
-        getValue() {
-            if (this.mode === 'month') {
-                return (this.currentMonth + 1).toString();
-            } else {
-                return this.currentYear.toString();
-            }
-        },
-        sendEvent() {
-            this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
-            this.$emit('input', this.getValue());
-        }
+    onClickOutside(e) {
+      const root = this.$refs.dd;
+      if (root && !root.contains(e.target)) {
+        this.menuOpen = false;
+        document.removeEventListener("click", this.onClickOutside);
+      }
     },
-    watch: {
-        mode(newMode) {
-            this.resetSelection();
-        },
-        value(newValue) {
-            if (this.mode === 'month') {
-                this.currentMonth = newValue - 1;
-            } else {
-                this.currentYear = newValue;
-            }
-        }
+    selectOption(opt) {
+      this.menuOpen = false;
+      if (opt === "all") { this.optionSelected = "all"; this.startEnd = []; this.emitChanged(); return; }
+      if (opt === "today") { this.optionSelected = "today"; this.startEnd = []; this.emitChanged(); return; }
+      if (opt === "year") { this.openYearPicker(); return; }
+      this.openCustom();
     },
+    // período custom (estático)
+    openCustom() { this.positionPopover(); this.showRange = true; },
+    closeRange() { this.showRange = false; },
+    applyStaticRange() {
+      this.optionSelected = "periodCustom";
+      this.showRange = false;
+      this.emitChanged();
+    },
+    // ano custom
+    openYearPicker() {
+      this.positionPopover();
+      this.tempYear = this.year || new Date().getFullYear();
+      this.showYearPicker = true;
+    },
+    closeYearPicker() { this.showYearPicker = false; },
+    applyYear() {
+      const y = Number(this.tempYear);
+      if (Number.isFinite(y)) {
+        this.year = y;
+        this.optionSelected = "year";
+        this.emitChanged();
+      }
+      this.showYearPicker = false;
+    },
+    // limpar seleção volta pro padrão (mês/ano atual)
+    clearSelection() {
+      this.optionSelected = "";
+      this.startEnd = [];
+      const now = new Date();
+      this.year = now.getFullYear();
+      this.month = now.getMonth() + 1;
+      this.showRange = false;
+      this.showYearPicker = false;
+      this.emitChanged();
+    },
+    positionPopover() {
+      this.$nextTick(() => {
+        const el = this.$refs.anchor; if (!el) return;
+        const r = el.getBoundingClientRect();
+        this.popoverStyle = { left: r.left + "px", top: (r.bottom + 8) + "px", minWidth: r.width + "px", position: "fixed" };
+      });
+    }
+  }
 };
 </script>
 
 <style scoped>
-.date-filter {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
+.date-year-month-wrap {
+  position: relative;
+  display: inline-block
+}
+
+.date-year-month-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: flex-start
+}
+
+.date-year-month-actions {
+  margin-left: auto;
+  position: relative
+}
+
+.date-year-month-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 999px;
+  background: #F0F0F0;
+  border: 1px solid #e5e7eb;
+  font-size: 13px;
+  letter-spacing: 1px;
+  cursor: pointer
+}
+
+.date-year-month-dropdown {
+  position: relative
+}
+
+.date-year-month-menu {
+  position: absolute;
+  top: 38px;
+  right: 0;
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  min-width: 150px;
+  box-shadow: 0 10px 24px rgba(16, 24, 40, .12);
+  z-index: 1001
+}
+
+.date-year-month-menu li {
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  color: #374151
+}
+
+.date-year-month-menu li:hover {
+  background: #f3f4f6
+}
+
+.date-year-month-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px
+}
+
+.date-year-month-label {
+  font-weight: 700;
+  color: #1f2937
+}
+
+.date-year-month-muted {
+  color: #9ca3af
+}
+
+.date-year-month-sep {
+  width: 1px;
+  height: 22px;
+  background: #e5e7eb;
+  border-radius: 1px
+}
+
+.date-year-month-nav {
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  border: none;
+  cursor: pointer;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center
+}
+
+.date-year-month-year {
+  background: #3b82f6
+}
+
+.date-year-month-month {
+  background: #f59e0b
+}
+
+.date-year-month-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  border: 1px solid #e5e7eb;
+  font-weight: 600;
+  color: #111827
+}
+
+.date-year-month-chip-close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #6b7280;
+  display: inline-flex;
+  align-items: center
+}
+
+.date-year-month-pop-enter-active,
+.date-year-month-pop-leave-active {
+  transition: all .18s ease
+}
+
+.date-year-month-pop-enter-from,
+.date-year-month-pop-leave-to {
+  opacity: 0;
+  transform: translateY(-4px)
 }
 
-.navigation-button {
-    color: white;
-    border: none;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.2em;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.2s;
+.date-year-month-popover {
+  z-index: 1000;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 10px 24px rgba(16, 24, 40, .12)
 }
 
-.navigation-button:hover {
-    opacity: 0.8;
+.date-year-month-title {
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 8px
 }
 
-.navigation-button:active {
-    transform: scale(0.95);
+.date-year-month-year-div {
+  margin: 0px 0px 0px 100px;
 }
 
-.navigation-button.disabled {
-    background-color: #b0b0b0;
-    opacity: 0.5;
-    cursor: not-allowed;
+.date-year-month-actions-row {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 20px
 }
 
-.date-display {
-    font-size: 1.5em;
-    font-weight: bold;
+.date-year-month-btn-ghost {
+  background: transparent;
+  border: 1px solid #e5e7eb
 }
 
-.month-mode {
-    background-color: #ffa500;
+.date-year-month-btn-apply {
+  background: #0ea5e9;
+  border: 1px solid #fff;
+  color: #fff
 }
 
-.year-mode {
-    background-color: #007bff;
+.date-year-month-btn-apply:hover {
+  background: #3E90B3;
 }
 
-.date-icon {
-    cursor: pointer;
-    color: rgb(73, 72, 72);
+.date-year-month-year-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 2px
 }
 
-.title-disabled {
-    color: #b0b0b0;
+.date-year-month-year-input {
+  height: 34px;
+  width: 110px;
+  text-align: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px
 }
 
-.date-icon.disabled {
-    color: #b0b0b0;
-    cursor: not-allowed;
+.date-year-month-year-ctrl {
+  height: 32px;
+  width: 32px;
+  border-radius: 50px;
+  border: 1px solid #3C82F6;
+  color: white;
+  background: #3C82F6;
+  cursor: pointer
 }
 </style>

package/src/component/forms/Modal.vue

@@ -4,9 +4,14 @@
       :closeButton="closeButton" :closeOnClickMask="false">
       <div class="d-block text-left">
         <Messages v-if="!vodal.open && showValidation" />
-        <div class="title">{{ title }}</div>
-        <hr class="hr" />
-        <slot></slot>
+        <div class="modal-title title">
+          <h5>
+            {{ title }}
+          </h5>
+        </div>
+        <div class="modal-body">
+          <slot></slot>
+        </div>
       </div>
       <div slot="modal-footer"></div>
     </vodal>
@@ -58,4 +63,17 @@ export default {
   font-size: 18px;
   margin-bottom: 5px;
 }
+
+.modal-body {
+  margin-bottom: 0px;
+  border: 0px solid #f1f5f9;
+  border-radius: 0px 0px 10px 10px;
+}
+
+.modal-title {
+  padding: 15px;
+  margin: 0;
+  font-size: 16px;
+}
+
 </style>

package/src/component/forms/RadioGroup.vue

@@ -78,13 +78,6 @@ export default {
 };
 </script>
 <style>
-.custom-control-label {
-  font-size: 13px !important;
-  font-weight: 400 !important;
-  text-transform: uppercase;
-  color: #778498;
-}
-
 .options {
   margin-top: 5px;
 }

package/src/component/forms/Select.vue

@@ -5,69 +5,27 @@
       <span class="required" v-if="required">*</span>
       <Tip :field="field" :formName="formName" />
     </label>
-    <div
-      class="select"
-      :class="{
-        'select-invalid': notifications.length > 0 && formDirty,
-        border: showBorder,
-      }"
-    >
-      <multiselect
-        @open="onOpen"
-        @select="onSelected"
-        @search-change="onSearch"
-        :options="data"
-        v-model.trim="currentValue"
-        :custom-label="label"
-        placeholder
-        :disabled="disabled"
-        :showLabels="true"
-        :noResult="false"
-        :maxHeight="250"
-        ref="multiselect"
-        selectLabel
-        deselectLabel
-        selectedLabel
-      >
+    <div class="select" :class="{
+      'select-invalid': notifications.length > 0 && formDirty,
+      border: showBorder,
+    }">
+      <multiselect @open="onOpen" @select="onSelected" @search-change="onSearch" :options="data"
+        v-model.trim="currentValue" :custom-label="label" placeholder :disabled="disabled" :showLabels="true"
+        :noResult="false" :maxHeight="250" ref="multiselect" selectLabel deselectLabel selectedLabel>
         <div slot="beforeList">
-          <vue-loading
-            v-if="loading"
-            type="bubbles"
-            color="#577696"
-            :size="{ width: '40px', height: '40px' }"
-          ></vue-loading>
+          <vue-loading v-if="loading" type="bubbles" color="#577696"
+            :size="{ width: '40px', height: '40px' }"></vue-loading>
           <div class="before-list" v-if="!loading">
-            <Button
-              v-if="showNewRegister"
-              key="addNewRegister"
-              type="primary"
-              title="Novo"
-              size="small"
-              :clicked="addNewRegister"
-            />
-            <Button
-              key="cleanSelect"
-              title="Limpar"
-              type="warning"
-              classIcon="fas fa-broom"
-              size="small"
-              :clicked="cleanSelect"
-            />
+            <Button v-if="showNewRegister" key="addNewRegister" type="primary" title="Novo" size="small"
+              :clicked="addNewRegister" />
+            <Button key="cleanSelect" title="Limpar" type="warning" classIcon="fas fa-broom" size="small"
+              :clicked="cleanSelect" />
           </div>
         </div>
-        <div
-          slot="afterList"
-          v-if="totalRecords > 20 && data.length < totalRecords"
-        >
+        <div slot="afterList" v-if="totalRecords > 20 && data.length < totalRecords">
           <div class="after-list text-center">
-            <Button
-              key="loadingMore"
-              type="info"
-              title="Carregar mais..."
-              classIcon="fas fa-redo-alt"
-              size="small"
-              :clicked="loadingMore"
-            />
+            <Button key="loadingMore" type="info" title="Carregar mais..." classIcon="fas fa-redo-alt" size="small"
+              :clicked="loadingMore" />
           </div>
         </div>
         <div slot="noOptions">Lista está vazia</div>
@@ -80,20 +38,13 @@
       </div>
     </div>
 
-    <vodal
-      v-if="nameNewRegister"
-      :duration="50"
-      :show="showVodal(nameNewRegister)"
-      @hide="hide()"
-      :width="widthNewRegister"
-      :height="heightNewRegister"
-      :closeOnEsc="true"
-      :closeButton="true"
-    >
+    <vodal v-if="nameNewRegister" :duration="50" :show="showVodal(nameNewRegister)" @hide="hide()"
+      :width="widthNewRegister" :height="heightNewRegister" :closeOnEsc="true" :closeButton="true">
       <Messages v-if="vodal.open" />
-      <div class="title-new-form">{{ titleNewRegister }}</div>
-      <hr class="hr" />
-      <slot></slot>
+      <div class="select-vodal">
+        <div class="title-new-form">{{ titleNewRegister }}</div>
+        <slot></slot>
+      </div>
     </vodal>
   </div>
 </template>
@@ -375,4 +326,8 @@ div.after-list {
   border-radius: 5px !important;
   height: 38px !important;
 }
+
+.select-vodal {
+  padding: 10px;
+}
 </style>

package/src/component/layout/Alert.vue

@@ -35,7 +35,7 @@ export default {
   box-sizing: border-box;
   margin-bottom: 10px;
   color: rgba(0, 0, 0, 0.65);
-  font-size: 14px;
+  font-size: 13.5px;
   font-variant: tabular-nums;
   line-height: 1.5;
   list-style: none;
@@ -43,7 +43,7 @@ export default {
   position: relative;
   padding: 8px 15px 8px 10px;
   word-wrap: break-word;
-  border-radius: 4px;
+  border-radius: 10px;
 }
 
 .message {

package/src/component/layout/BottomActionsBar.vue

@@ -94,7 +94,7 @@ export default {
     width: 38px;
     height: 38px;
     border-radius: 50%;
-    background: #007bff;
+    background: #D98621;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -110,7 +110,7 @@ export default {
     top: -5px;
     right: -5px;
     background: #fff;
-    color: #007bff;
+    color: #D98621;
     font-size: 11px;
     font-weight: bold;
     border-radius: 50%;
@@ -119,7 +119,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid #007bff;
+    border: 2px solid #D98621;
 }
 
 .bab-title {

package/src/component/shared/Table.vue

@@ -152,7 +152,7 @@ table tbody tr td {
 }
 
 .td-checkbox {
-  width: 30px;
+  width: 0px;
 }
 
 tr:hover {
@@ -226,7 +226,7 @@ tr:hover {
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 12px;
-  width: 150px;
+  min-width: 150px;
   margin-bottom: 10px;
 }
 </style>

package/src/component/shared/TableItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="item-main">
     <div v-if="obj.type === 'period-rent'" class="period-rent" @click="navegateTo(obj, row)" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
@@ -18,7 +18,7 @@
         {{ row[obj.field] }}
       </div>
     </div>
-    <div v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
+    <div class="item-align-center" v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
       <div v-else v-html="obj.html"></div>
@@ -149,6 +149,7 @@ export default {
 <style scoped>
 .field-second {
   color: rgb(83, 82, 82);
+  font-size: 13px;
 }
 
 .table-currency {
@@ -213,4 +214,15 @@ export default {
   margin-top: 11px;
   width: 200px;
 }
+
+.item-main {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.item-main>* {
+  display: table-cell;
+  vertical-align: middle;
+}
 </style>

package/src/component/shared/actions/ActionErrorContent.vue

@@ -23,8 +23,8 @@
         </ScrollBar>
 
         <div class="text-center">
-            <Button key="closeErrors" title="Fechar" color="white" backGroundColor="#6B7280" size="small"
-                :clicked="() => $emit('close')" />
+            <Button key="closeErrors" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white"
+                backGroundColor="#6D757B" size="small" :clicked="() => $emit('close')" />
         </div>
     </div>
 </template>
@@ -63,8 +63,8 @@ export default {
 }
 
 .error-details-title {
-    font-weight: 600;
-    color: #111827;
+    font-weight: 500;
+    color: #6b7280;
 }
 
 .error-details-sub {

package/src/component/shared/actions/ActionFooter.vue

@@ -10,7 +10,7 @@
         </div>
 
         <div v-else class="text-center">
-            <Button key="finish" title="Fechar" classIcon="fa-solid fa-xmark" color="white" backGroundColor="#6D757B" size="medium"
+            <Button key="finish" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white" backGroundColor="#6D757B" size="medium"
                 :clicked="finished" />
         </div>
     </div>

package/src/store/modules/generic.js

@@ -452,12 +452,13 @@ export default {
                     } else {
 
                         context.commit('addNotifications', response.data.notifications)
-                        context.commit('addToast', 'messageError');
+
+                        if (!params.notNotifyToast)
+                            context.commit('addToast', 'messageError');
 
                         return response.data;
                     }
                 }, (err) => {
-                    console.log(err);
                     if (err.response)
                         if (err.response.status === 403) {
                             context.commit('addNotifications', [{ message: "Usuário sem permissão para executar esta ação!" }])