124 lines
3 KiB
Vue
124 lines
3 KiB
Vue
<template>
|
|
<div class="eli-tabela__cabecalho">
|
|
<!-- Grupo de busca: botão de colunas (à esquerda) + input de busca -->
|
|
<div v-if="exibirBusca" class="eli-tabela__busca-grupo">
|
|
<button
|
|
v-if="exibirBotaoColunas"
|
|
type="button"
|
|
class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--colunas"
|
|
@click="emitColunas"
|
|
>
|
|
Colunas
|
|
</button>
|
|
|
|
<button
|
|
v-if="exibirBotaoFiltroAvancado"
|
|
type="button"
|
|
class="eli-tabela__acoes-cabecalho-botao eli-tabela__acoes-cabecalho-botao--filtro"
|
|
@click="emitFiltroAvancado"
|
|
>
|
|
Filtro
|
|
</button>
|
|
<EliTabelaCaixaDeBusca :modelo="valorBusca" @buscar="emitBuscar" />
|
|
</div>
|
|
|
|
<!-- 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,
|
|
},
|
|
exibirBotaoColunas: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true,
|
|
},
|
|
exibirBotaoFiltroAvancado: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false,
|
|
},
|
|
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";
|
|
},
|
|
colunas() {
|
|
return true;
|
|
},
|
|
filtroAvancado() {
|
|
return true;
|
|
},
|
|
},
|
|
setup(props, { emit }) {
|
|
const temAcoesCabecalho = computed(() => props.acoesCabecalho.length > 0);
|
|
|
|
function emitBuscar(texto: string) {
|
|
emit("buscar", texto);
|
|
}
|
|
|
|
function emitColunas() {
|
|
emit("colunas");
|
|
}
|
|
|
|
function emitFiltroAvancado() {
|
|
emit("filtroAvancado");
|
|
}
|
|
|
|
return { temAcoesCabecalho, emitBuscar, emitColunas, emitFiltroAvancado };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.eli-tabela__busca-grupo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
</style>
|