bkp

src/components/eli/EliTabela/EliTabelaCabecalho.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="eli-tabela__cabecalho">
+    <!-- Caixa de busca: emite @buscar com o termo digitado -->
+    <EliTabelaCaixaDeBusca v-if="exibirBusca" :modelo="valorBusca" @buscar="emitBuscar" />
+
+    <!-- Ações do cabeçalho: ações globais da tabela -->
+    <div v-if="temAcoesCabecalho" class="eli-tabela__acoes-cabecalho">
+      <button
+        v-for="(botao, indice) in acoesCabecalho"
+        :key="`${botao.rotulo}-${indice}`"
+        type="button"
+        class="eli-tabela__acoes-cabecalho-botao"
+        :style="botao.cor ? { backgroundColor: botao.cor, color: '#fff' } : undefined"
+        @click="botao.acao"
+      >
+        <component
+          v-if="botao.icone"
+          :is="botao.icone"
+          class="eli-tabela__acoes-cabecalho-icone"
+          :size="16"
+          :stroke-width="2"
+        />
+        <span class="eli-tabela__acoes-cabecalho-rotulo">{{ botao.rotulo }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from "vue";
+import EliTabelaCaixaDeBusca from "./EliTabelaCaixaDeBusca.vue";
+
+export default defineComponent({
+  name: "EliTabelaCabecalho",
+  components: { EliTabelaCaixaDeBusca },
+  props: {
+    exibirBusca: {
+      type: Boolean,
+      required: true,
+    },
+    valorBusca: {
+      type: String,
+      required: true,
+    },
+    acoesCabecalho: {
+      type: Array as PropType<
+        Array<{
+          icone?: any;
+          cor?: string;
+          rotulo: string;
+          acao: () => void;
+        }>
+      >,
+      required: true,
+    },
+  },
+  emits: {
+    buscar(valor: string) {
+      return typeof valor === "string";
+    },
+  },
+  setup(props, { emit }) {
+    const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);
+
+    function emitBuscar(texto: string) {
+      emit("buscar", texto);
+    }
+
+    return { temAcoesCabecalho, emitBuscar };
+  },
+});
+</script>