@nixweb/nixloc-ui 1.3.0 → 1.5.0

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>