@nixweb/nixloc-ui 1.5.0 → 1.7.0

package/package.json

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

package/src/component/forms/CheckboxServer.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <div class="div-btn side-by-side">
+      <div v-if="!showSearch" class="div-btn side-by-side">
         <Button _key="btnShow" color="black" backGroundColor="#F0F0F0"
           :title="' ' + quantitySelected + ' ' + title + ' selecionado(s)'"
           classIcon="fa-sharp fa-solid fa-ballot-check" size="small" :clicked="showHide" />
@@ -18,13 +18,18 @@
         <Loading type="line" :center="false" v-show="loading" />
       </div>
       <ScrollBar :minHeight="0" :maxHeight="200">
-        <div class="div-check">
+        <div v-if="multipleSelection" class="div-check">
           <div class="div-items" v-for="item in data" :key="item.id">
             <b-form-checkbox v-model="item.selected" @change="add(item)">
               <span class="title">{{ item.content }}</span>
             </b-form-checkbox>
           </div>
         </div>
+        <div v-else class="div-check">
+          <b-form-group>
+            <b-form-radio-group v-model="selected" :options="options" :stacked="true"></b-form-radio-group>
+          </b-form-group>
+        </div>
         <div 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"
@@ -52,8 +57,17 @@ export default {
   props: {
     title: String,
     url: String,
+    multipleSelection: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
     propsParams: Object,
     value: Array,
+    changed: Function,
   },
   data() {
     return {
@@ -71,16 +85,23 @@ export default {
   },
   mounted() {
     this.getAll();
-
+    if (this.showSearch) this.showHide();
     if (this.value.length > 0) {
       this.selected = this.value;
     }
-
   },
   computed: {
     ...mapGetters("generic", ["showModal", "event"]),
     quantitySelected() {
       return this.selected.length > 0 ? this.selected.length : 0;
+    },
+    options() {
+      let final = [];
+      this.data.forEach(item => {
+        let obj = { text: item.content, value: item.id };
+        final.push(obj);
+      });
+      return final;
     }
   },
   methods: {
@@ -135,6 +156,7 @@ export default {
     selected: {
       handler(value) {
         this.$emit("input", value);
+        if (this.changed) this.changed(value);
       },
       deep: true,
     },

package/src/component/forms/DateYearMonth.vue

@@ -1,452 +1,193 @@
 <template>
-  <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>
-      </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 class="date-filter">
+    <button @click="previous" class="navigation-button" :class="[buttonClass, { 'disabled': disabled }]"
+      :disabled="disabled">
+      <i class="fa-solid fa-chevron-left"></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>
+    </button>
   </div>
 </template>
 
 <script>
-
-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"];
+import { mapMutations } from "vuex";
 
 export default {
-  name: "DateYearMonth",
-  components: {
-    DateTime
-  },
-  model: { prop: "value", event: "input" },
   props: {
-    mode: { type: String, required: true, validator: v => ["year", "month"].includes(v) },
+    mode: {
+      type: String,
+      required: true,
+      validator(value) {
+        return ['month', 'year'].includes(value);
+      }
+    },
     value: {
-      type: Object,
-      default: () => ({
-        optionSelected: "",
-        startEnd: [],
-        year: new Date().getFullYear(),
-        month: new Date().getMonth() + 1
-      })
+      type: Number,
+      required: false
     },
-    disabled: { type: Boolean, default: false }
+    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
+      currentMonth: new Date().getMonth(),
+      currentYear: new Date().getFullYear()
     };
   },
-  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";
-    }
+  created() {
+    this.resetSelection();
   },
-  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;
+  mounted() {
+    this.sendEvent();
+  },
+  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';
     }
   },
   methods: {
-    payload() {
-      return {
-        optionSelected: this.optionSelected,
-        startEnd: this.optionSelected === "periodCustom" ? this.startEnd : [],
-        year: this.year,
-        month: this.month
-      };
-    },
-    emitChanged() {
-      const p = this.payload();
-      this.$emit("input", p);
-      this.$emit("changed", p);
-    },
-    // 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();
-    },
-    incMonth() {
-      if (this.disabled || this.mode !== "month") return;
-      if (this.month === 12) { this.month = 1; this.year++; } else { this.month++; }
-      this.emitChanged();
-    },
-    // dropdown
-    toggleMenu() {
+    ...mapMutations("generic", ["addEvent"]),
+    previous() {
       if (this.disabled) return;
-      this.menuOpen = !this.menuOpen;
-      if (this.menuOpen) document.addEventListener("click", this.onClickOutside);
-    },
-    onClickOutside(e) {
-      const root = this.$refs.dd;
-      if (root && !root.contains(e.target)) {
-        this.menuOpen = false;
-        document.removeEventListener("click", this.onClickOutside);
+      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();
     },
-    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();
+    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();
     },
-    // ano custom
-    openYearPicker() {
-      this.positionPopover();
-      this.tempYear = this.year || new Date().getFullYear();
-      this.showYearPicker = true;
+    resetSelection() {
+      const now = new Date();
+      if (this.mode === 'month') {
+        this.currentMonth = now.getMonth();
+        this.currentYear = now.getFullYear();
+      } else {
+        this.currentYear = now.getFullYear();
+      }
+      this.sendEvent();
     },
-    closeYearPicker() { this.showYearPicker = false; },
-    applyYear() {
-      const y = Number(this.tempYear);
-      if (Number.isFinite(y)) {
-        this.year = y;
-        this.optionSelected = "year";
-        this.emitChanged();
+    getValue() {
+      if (this.mode === 'month') {
+        return (this.currentMonth + 1).toString();
+      } else {
+        return this.currentYear.toString();
       }
-      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();
+    sendEvent() {
+      this.addEvent({ name: "dateYearMonth", data: { mode: this.mode, value: this.getValue() } });
+      this.$emit('input', this.getValue());
+    }
+  },
+  watch: {
+    mode(newMode) {
+      this.resetSelection();
     },
-    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" };
-      });
+    value(newValue) {
+      if (this.mode === 'month') {
+        this.currentMonth = newValue - 1;
+      } else {
+        this.currentYear = newValue;
+      }
     }
-  }
+  },
 };
 </script>
 
 <style scoped>
-.date-year-month-wrap {
-  position: relative;
-  display: inline-block
-}
-
-.date-year-month-row {
+.date-filter {
   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
+  justify-content: center;
+  gap: 20px;
 }
 
-.date-year-month-sep {
-  width: 1px;
-  height: 22px;
-  background: #e5e7eb;
-  border-radius: 1px
-}
-
-.date-year-month-nav {
-  width: 32px;
-  height: 32px;
-  border-radius: 999px;
+.navigation-button {
+  color: white;
   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;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: 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;
+  justify-content: center;
+  font-size: 1.2em;
   cursor: pointer;
-  color: #6b7280;
-  display: inline-flex;
-  align-items: center
+  transition: background-color 0.3s, transform 0.2s;
 }
 
-.date-year-month-pop-enter-active,
-.date-year-month-pop-leave-active {
-  transition: all .18s ease
+.navigation-button:hover {
+  opacity: 0.8;
 }
 
-.date-year-month-pop-enter-from,
-.date-year-month-pop-leave-to {
-  opacity: 0;
-  transform: translateY(-4px)
+.navigation-button:active {
+  transform: scale(0.95);
 }
 
-.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.disabled {
+  background-color: #b0b0b0;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.date-year-month-title {
-  font-weight: 700;
-  color: #1f2937;
-  margin-bottom: 8px
+.date-display {
+  font-size: 1.5em;
+  font-weight: bold;
 }
 
-.date-year-month-year-div {
-  margin: 0px 0px 0px 100px;
+.month-mode {
+  background-color: #ffa500;
 }
 
-.date-year-month-actions-row {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 20px
+.year-mode {
+  background-color: #007bff;
 }
 
-.date-year-month-btn-ghost {
-  background: transparent;
-  border: 1px solid #e5e7eb
-}
-
-.date-year-month-btn-apply {
-  background: #0ea5e9;
-  border: 1px solid #fff;
-  color: #fff
-}
-
-.date-year-month-btn-apply:hover {
-  background: #3E90B3;
-}
-
-.date-year-month-year-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 6px 0 2px
+.date-icon {
+  cursor: pointer;
+  color: rgb(73, 72, 72);
 }
 
-.date-year-month-year-input {
-  height: 34px;
-  width: 110px;
-  text-align: center;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px
+.title-disabled {
+  color: #b0b0b0;
 }
 
-.date-year-month-year-ctrl {
-  height: 32px;
-  width: 32px;
-  border-radius: 50px;
-  border: 1px solid #3C82F6;
-  color: white;
-  background: #3C82F6;
-  cursor: pointer
+.date-icon.disabled {
+  color: #b0b0b0;
+  cursor: not-allowed;
 }
-</style>
+</style>

package/src/component/shared/DocumentPreview.vue

@@ -3,7 +3,6 @@
     <div ref='preview'>
       <v-runtime-template :template="`<div>${template}</div>`" />
     </div>
-    <div>{{ template }}</div>
   </div>
 </template>
 

package/src/store/modules/generic.js

@@ -113,7 +113,7 @@ export default {
 
             const tabelaGrupoSubGrupo = "t.produtoGrupoSubgrupo";
             const idxMarker = documentHtml.indexOf(tabelaGrupoSubGrupo);
-            const marcadorDiv = '<tabela-grupo-subgrupo></tabela-grupo-subgrupo>';
+            const marcadorDiv = `<tabela-grupo-subgrupo></tabela-grupo-subgrupo>`;
 
             if (idxMarker !== -1) {
                 tableStart = documentHtml.lastIndexOf("<table", idxMarker);
@@ -156,6 +156,7 @@ export default {
                         let isProduct = th.innerText.includes("t.produtoLocacao");
                         let isInvoice = th.innerText.includes("t.produtoFatura");
                         let isGrouped = th.innerText.includes("t.produtoAgrupado");
+                        let isGroupedSubgroup = th.innerText.includes("t.produtoGrupoSubgrupo");
                         let isMoviment = th.innerText.includes("t.produtoMovimentacao");
                         let isCustumerAddress = th.innerText.includes("t.enderecoCliente");
                         let isAddressRent = th.innerText.includes("t.saidaRetornoLocacao");
@@ -208,7 +209,10 @@ export default {
 
                             config.push(obj);
 
-                        } else if (isMoviment) {
+                        } else if (isGroupedSubgroup) {
+                            // não faz nda, quem altera essa tabela é a após retParse
+                        }
+                        else if (isMoviment) {
                             obj.vForSimple = "v-for='produto in d.itensMovimentacao'";
                             config.push(obj);
                         } else if (isCustumerAddress) {
@@ -231,16 +235,53 @@ export default {
 
                 let replace = "";
                 config.forEach(x => {
-                    if (x.nameGroup || x.vForGrouped || x.nameGroupReplace || x.vForSimple) {
-                        replace += `.replace("<tbody>${x.nameGroup}<tr>", "<tbody ${x.vForGrouped}>${x.nameGroupReplace}<tr ${x.vForSimple}>")`;
-                    }
+                    replace += `.replace("<tbody>${x.nameGroup}<tr>", "<tbody ${x.vForGrouped}>${x.nameGroupReplace}<tr ${x.vForSimple}>")`;
                 });
 
                 var retParse = ret.replaceAll("\"", "'");
                 retParse = eval(`retParse${replace}`);
 
-                if (removedTableHtml)
+                if (removedTableHtml) {
+
+                    removedTableHtml = removedTableHtml.replace("<tbody>", `<tbody v-for="(grupos, grupoMaster) in produtoGrupoSubgrupo">`);
+
+                    const inicio = removedTableHtml.indexOf("<tbody");
+                    const fim = removedTableHtml.indexOf("</tbody>", inicio) + "</tbody>".length;
+                    let tbodyHtml = removedTableHtml.substring(inicio, fim);
+                    const trs = [...tbodyHtml.matchAll(/<tr[^>]*>/g)];
+                    if (trs.length >= 3) {
+                        const grupoStart = trs[1].index;
+                        const produtoStart = trs[2].index;
+                        const produtoEnd = tbodyHtml.indexOf("</tr>", produtoStart) + "</tr>".length;
+
+                        const wrapStart = grupoStart;
+                        const wrapEnd = produtoEnd;
+
+                        let templateContent = tbodyHtml.substring(wrapStart, wrapEnd);
+
+                        const innerTrs = [...templateContent.matchAll(/<tr[^>]*>/g)];
+                        if (innerTrs.length >= 2) {
+                            const prodTag = innerTrs[1];
+                            const pStart = prodTag.index;
+                            const pEnd = pStart + prodTag[0].length;
+
+                            templateContent =
+                                templateContent.substring(0, pStart) +
+                                `<tr v-for="produto in itensLocacao">` +
+                                templateContent.substring(pEnd);
+                        }
+
+                        tbodyHtml = tbodyHtml.substring(0, wrapStart) +
+                            `<template v-for="(itensLocacao, grupo) in grupos">` +
+                            templateContent +
+                            `</template>` +
+                            tbodyHtml.substring(wrapEnd);
+
+                        removedTableHtml = removedTableHtml.substring(0, inicio) + tbodyHtml + removedTableHtml.substring(fim);
+                    }
+
                     retParse = retParse.replace(marcadorDiv, `<div>${removedTableHtml}</div>`);
+                }
 
                 var classImportant = retParse
                     .replaceAll("t.pagamentoLocacao", "")