refatoração

src/componentes/EliTabela/EliTabelaMenuAcoes.vue

@@ -1,45 +1,47 @@
 <template>
-  <Teleport to="body">
-    <ul
-      v-if="menuAberto !== null && possuiAcoes"
-      :id="`eli-tabela-acoes-menu-${menuAberto}`"
-      ref="menuEl"
-      class="eli-tabela__acoes-menu"
-      role="menu"
-      :aria-labelledby="`eli-tabela-acoes-toggle-${menuAberto}`"
-      :style="{
-        position: 'fixed',
-        top: `${posicao.top}px`,
-        left: `${posicao.left}px`,
-        zIndex: 999999,
-      }"
-    >
-      <li
-        v-for="item in acoes"
-        :key="`acao-${menuAberto}-${item.indice}`"
-        class="eli-tabela__acoes-item"
-        role="none"
+  <div class="eli-teleport-container">
+    <Teleport to="body">
+      <ul
+        v-if="menuAberto !== null && possuiAcoes"
+        :id="`eli-tabela-acoes-menu-${menuAberto}`"
+        ref="menuEl"
+        class="eli-tabela__acoes-menu"
+        role="menu"
+        :aria-labelledby="`eli-tabela-acoes-toggle-${menuAberto}`"
+        :style="{
+          position: 'fixed',
+          top: `${posicao.top}px`,
+          left: `${posicao.left}px`,
+          zIndex: 999999,
+        }"
       >
-        <button
-          type="button"
-          class="eli-tabela__acoes-item-botao"
-          :style="{ color: item.acao.cor }"
-          role="menuitem"
-          :aria-label="item.acao.rotulo"
-          :title="item.acao.rotulo"
-          @click.stop="emitExecutar(item)"
+        <li
+          v-for="item in acoes"
+          :key="`acao-${menuAberto}-${item.indice}`"
+          class="eli-tabela__acoes-item"
+          role="none"
         >
-          <component
-            :is="item.acao.icone"
-            class="eli-tabela__acoes-item-icone"
-            :size="16"
-            :stroke-width="2"
-          />
-          <span class="eli-tabela__acoes-item-texto">{{ item.acao.rotulo }}</span>
-        </button>
-      </li>
-    </ul>
-  </Teleport>
+          <button
+            type="button"
+            class="eli-tabela__acoes-item-botao"
+            :style="{ color: item.acao.cor }"
+            role="menuitem"
+            :aria-label="item.acao.rotulo"
+            :title="item.acao.rotulo"
+            @click.stop="emitExecutar(item)"
+          >
+            <component
+              :is="item.acao.icone"
+              class="eli-tabela__acoes-item-icone"
+              :size="16"
+              :stroke-width="2"
+            />
+            <span class="eli-tabela__acoes-item-texto">{{ item.acao.rotulo }}</span>
+          </button>
+        </li>
+      </ul>
+    </Teleport>
+  </div>
 </template>
 
 <script lang="ts">
@@ -56,8 +58,8 @@ export default defineComponent({
   name: "EliTabelaMenuAcoes",
   props: {
     menuAberto: {
-      type: Number as PropType<number | null>,
-      required: true,
+      type: [Number, Object] as PropType<number | null>,
+      default: null,
     },
     posicao: {
       type: Object as PropType<{ top: number; left: number }>,
@@ -70,7 +72,7 @@ export default defineComponent({
     },
     linha: {
       // Aceita qualquer tipo de linha (objeto, string, etc.) sem validação runtime.
-      type: null as unknown as PropType<unknown | null>,
+      type: [Object, String, Number, Array] as PropType<unknown | null>,
       required: true,
     },
   },