bkp

src/components/eli/EliTabela/celulas/EliCelulaTextoSimples.ts

@@ -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;

src/components/eli/EliTabela/celulas/EliTabelaCelulaNumero.vue

@@ -0,0 +1,30 @@
+<template>
+{{ String(dados?.numero).replace('.', ',') }}
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { tiposTabelaCelulas } from "./tiposTabelaCelulas";
+
+export default defineComponent({
+  name: "EliTabelaCelulaNumero",
+  components: {},
+  props: {
+    dados: {
+      type: Object as PropType<tiposTabelaCelulas['numero']>,
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+
+  },
+  setup({ dados }) {
+    return { dados }
+  },
+})
+</script>
+
+<style scoped></style>

src/components/eli/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue

@@ -0,0 +1,30 @@
+<template>
+{{ dados?.texto }}
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+import { tiposTabelaCelulas } from "./tiposTabelaCelulas";
+
+export default defineComponent({
+  name: "EliTabelaCelulaTextoSimples",
+  components: {},
+  props: {
+    dados: {
+      type: Object as PropType<tiposTabelaCelulas['textoSimples']>,
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+
+  },
+  setup({ dados }) {
+    return { dados }
+  },
+})
+</script>
+
+<style scoped></style>

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?: ()=>{}
+    }
+}

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<T extends keyof tiposTabelaCelulas> =
+  readonly [T, tiposTabelaCelulas[T]]
+
+export type ComponenteCelula = {
+  [K in keyof tiposTabelaCelulas]: ComponenteCelulaBase<K>
+}[keyof tiposTabelaCelulas]
+
+export const celulaTabela = <T extends keyof tiposTabelaCelulas>(
+  tipo: T,
+  dados: tiposTabelaCelulas[T],
+): ComponenteCelulaBase<T> => {
+  return [tipo, dados] as const
+}
+
 
-export type ComponenteCelula = VNodeChild;
 
 export type EliAlinhamentoColuna = "esquerda" | "centro" | "direita";
 

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",
         },