diff --git a/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts b/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts deleted file mode 100644 index 32097a9..0000000 --- a/src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type { VNodeChild } from "vue"; - -export type EliCelulaTextoSimples = { tipo: "texto-simples"; texto: string }; - -export const renderEliCelulaTextoSimples = ( - celula: EliCelulaTextoSimples -): VNodeChild => celula.texto; diff --git a/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue b/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue new file mode 100644 index 0000000..6cd0d94 --- /dev/null +++ b/src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue b/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue new file mode 100644 index 0000000..8b2c75b --- /dev/null +++ b/src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts b/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts new file mode 100644 index 0000000..9db9fe4 --- /dev/null +++ b/src/components/eli/EliTabela/celulas/tiposTabelaCelulas.ts @@ -0,0 +1,15 @@ +/** + * Tipagem dos dados de entrada dos componentes de celulas + */ + +export type tiposTabelaCelulas = { + "textoSimples": { + texto: string, + acao?: ()=>{} + } + + "numero": { + numero: number, + acao?: ()=>{} + } +} \ No newline at end of file diff --git a/src/components/eli/EliTabela/types-eli-tabela.ts b/src/components/eli/EliTabela/types-eli-tabela.ts index 42b7dc6..600bc52 100644 --- a/src/components/eli/EliTabela/types-eli-tabela.ts +++ b/src/components/eli/EliTabela/types-eli-tabela.ts @@ -1,8 +1,26 @@ import type { tipoResposta } from "p-respostas"; import type { LucideIcon } from "lucide-vue-next"; -import type { VNodeChild } from "vue"; +import { tiposTabelaCelulas } from "./celulas/tiposTabelaCelulas"; + + + + + +export type ComponenteCelulaBase = + readonly [T, tiposTabelaCelulas[T]] + +export type ComponenteCelula = { + [K in keyof tiposTabelaCelulas]: ComponenteCelulaBase +}[keyof tiposTabelaCelulas] + +export const celulaTabela = ( + tipo: T, + dados: tiposTabelaCelulas[T], +): ComponenteCelulaBase => { + return [tipo, dados] as const +} + -export type ComponenteCelula = VNodeChild; export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita"; diff --git a/src/playground/tabela.playground.vue b/src/playground/tabela.playground.vue index 57c8ebb..21779d3 100644 --- a/src/playground/tabela.playground.vue +++ b/src/playground/tabela.playground.vue @@ -15,7 +15,7 @@ import { defineComponent, ref } from "vue"; import { codigosResposta } from "p-respostas"; import { Eye, Plus, Trash2 } from "lucide-vue-next"; -import { EliTabela } from "@/components/eli/EliTabela"; +import { celulaTabela, EliTabela } from "@/components/eli/EliTabela"; import type { EliTabelaConsulta } from "@/components/eli/EliTabela"; type Linha = { @@ -286,23 +286,23 @@ export default defineComponent({ colunas: [ { rotulo: "Empreendedor", - celula: (l) => l.empreendedor, + celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }), coluna_ordem: "empreendedor", }, { rotulo: "Empreendimento", - celula: (l) => l.empreendimento, + celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }), coluna_ordem: "empreendimento", }, { rotulo: "Documento", - celula: (l) => l.documento, + celula: (l) => celulaTabela('textoSimples', { texto: l.documento }), coluna_ordem: "documento", alinhamento: "direita", }, { rotulo: "E-mail", - celula: (l) => l.email, + celula: (l) => celulaTabela('textoSimples', { texto: l.email }), coluna_ordem: "email", truncar: true, largura_maxima: 260, @@ -313,7 +313,7 @@ export default defineComponent({ }, { rotulo: "Telefone", - celula: (l) => l.telefone, + celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }), coluna_ordem: "telefone", alinhamento: "direita", },