prefixo tipo
This commit is contained in:
parent
cb81107199
commit
db7fdadc81
38 changed files with 179 additions and 179 deletions
|
|
@ -117,9 +117,9 @@ import EliTabelaMenuAcoes from "./EliTabelaMenuAcoes.vue";
|
|||
import EliTabelaPaginacao from "./EliTabelaPaginacao.vue";
|
||||
import EliTabelaModalColunas from "./EliTabelaModalColunas.vue";
|
||||
import EliTabelaModalFiltroAvancado from "./EliTabelaModalFiltroAvancado.vue";
|
||||
import type { EliColuna } from "./types-eli-tabela";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
/** Tipos da configuração/contrato da tabela */
|
||||
import type { EliTabelaConsulta } from "./types-eli-tabela";
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
import type { tipoFiltro } from "./types-eli-tabela";
|
||||
// operadores usados no tipo de configuração; o operador aplicado vem travado no filtroAvancado.
|
||||
import {
|
||||
|
|
@ -151,7 +151,7 @@ export default defineComponent({
|
|||
props: {
|
||||
/** Configuração principal da tabela (colunas, consulta e ações) */
|
||||
tabela: {
|
||||
type: Object as PropType<EliTabelaConsulta<any>>,
|
||||
type: Object as PropType<tipoEliTabelaConsulta<any>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
|
@ -256,7 +256,7 @@ export default defineComponent({
|
|||
const rotulosColunas = computed(() => props.tabela.colunas.map((c) => c.rotulo));
|
||||
|
||||
const colunasInvisiveisEfetivas = computed(() => {
|
||||
const colunas = props.tabela.colunas as Array<EliColuna<any>>;
|
||||
const colunas = props.tabela.colunas as Array<tipoEliColuna<any>>;
|
||||
|
||||
const configTemDados =
|
||||
(configColunas.value.visiveis?.length ?? 0) > 0 ||
|
||||
|
|
@ -271,12 +271,12 @@ export default defineComponent({
|
|||
|
||||
// ordenação: usa a lista (salva ou derivada do default) e adiciona novas ao final
|
||||
const ordemSalva = invisiveisBaseRotulos;
|
||||
const mapa = new Map<string, EliColuna<any>>();
|
||||
const mapa = new Map<string, tipoEliColuna<any>>();
|
||||
for (const c of base) {
|
||||
if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
|
||||
}
|
||||
|
||||
const ordenadas: Array<EliColuna<any>> = [];
|
||||
const ordenadas: Array<tipoEliColuna<any>> = [];
|
||||
for (const r of ordemSalva) {
|
||||
const c = mapa.get(r);
|
||||
if (c) ordenadas.push(c);
|
||||
|
|
@ -300,7 +300,7 @@ export default defineComponent({
|
|||
|
||||
const invisiveisBaseRotulos = configTemDados
|
||||
? configColunas.value.invisiveis ?? []
|
||||
: (props.tabela.colunas as Array<EliColuna<any>>)
|
||||
: (props.tabela.colunas as Array<tipoEliColuna<any>>)
|
||||
.filter((c) => c.visivel === false)
|
||||
.map((c) => c.rotulo);
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ import { defineComponent, PropType } from "vue";
|
|||
import { ChevronDown, ChevronRight, MoreVertical } from "lucide-vue-next";
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
|
||||
import EliTabelaDetalhesLinha from "./EliTabelaDetalhesLinha.vue";
|
||||
import type { EliColuna } from "./types-eli-tabela";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaBody",
|
||||
|
|
@ -90,11 +90,11 @@ export default defineComponent({
|
|||
},
|
||||
props: {
|
||||
colunas: {
|
||||
type: Array as PropType<Array<EliColuna<any>>>,
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
colunasInvisiveis: {
|
||||
type: Array as PropType<Array<EliColuna<any>>>,
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
temColunasInvisiveis: {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
|
||||
import type { EliColuna } from "./types-eli-tabela";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaDetalhesLinha",
|
||||
|
|
@ -23,7 +23,7 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
colunasInvisiveis: {
|
||||
type: Array as PropType<Array<EliColuna<any>>>,
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -51,14 +51,14 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import { ArrowDown, ArrowUp } from "lucide-vue-next";
|
||||
import type { EliColuna } from "./types-eli-tabela";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaHead",
|
||||
components: { ArrowUp, ArrowDown },
|
||||
props: {
|
||||
colunas: {
|
||||
type: Array as PropType<Array<EliColuna<any>>>,
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
temAcoes: {
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref } from "vue";
|
||||
import type { EliTabelaAcao } from "./types-eli-tabela";
|
||||
import type { tipoEliTabelaAcao } from "./types-eli-tabela";
|
||||
|
||||
type ItemAcao<T> = {
|
||||
acao: EliTabelaAcao<T>;
|
||||
acao: tipoEliTabelaAcao<T>;
|
||||
indice: number;
|
||||
visivel: boolean;
|
||||
};
|
||||
|
|
@ -74,7 +74,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
emits: {
|
||||
executar(payload: { acao: EliTabelaAcao<any>; linha: unknown }) {
|
||||
executar(payload: { acao: tipoEliTabelaAcao<any>; linha: unknown }) {
|
||||
return payload !== null && typeof payload === "object";
|
||||
},
|
||||
},
|
||||
|
|
@ -84,7 +84,7 @@ export default defineComponent({
|
|||
|
||||
const possuiAcoes = computed(() => props.acoes.length > 0);
|
||||
|
||||
function emitExecutar(item: { acao: EliTabelaAcao<any> }) {
|
||||
function emitExecutar(item: { acao: tipoEliTabelaAcao<any> }) {
|
||||
if (!props.linha) return;
|
||||
emit("executar", { acao: item.acao, linha: props.linha });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType, ref, watch } from "vue";
|
||||
import type { EliTabelaColunasConfig } from "./colunasStorage";
|
||||
import type { EliColuna } from "./types-eli-tabela";
|
||||
import type { tipoEliColuna } from "./types-eli-tabela";
|
||||
|
||||
type OrigemLista = "visiveis" | "invisiveis";
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ export default defineComponent({
|
|||
required: true,
|
||||
},
|
||||
colunas: {
|
||||
type: Array as PropType<Array<EliColuna<any>>>,
|
||||
type: Array as PropType<Array<tipoEliColuna<any>>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -77,9 +77,9 @@
|
|||
import { computed, defineComponent, PropType, ref, watch } from "vue";
|
||||
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora } from "../EliEntrada";
|
||||
import type { ComponenteEntrada, TipoEntrada } from "../EliEntrada/tiposEntradas";
|
||||
import type { EliTabelaConsulta } from "./types-eli-tabela";
|
||||
import type { tipoEliTabelaConsulta } from "./types-eli-tabela";
|
||||
|
||||
type FiltroBase<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||
type FiltroBase<T> = NonNullable<tipoEliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||
|
||||
type LinhaFiltro<T> = {
|
||||
coluna: keyof T;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
import type { Component } from "vue";
|
||||
import { computed, defineComponent, PropType } from "vue";
|
||||
|
||||
import type { ComponenteCelula, TipoTabelaCelula, TiposTabelaCelulas } from "../types-eli-tabela";
|
||||
import type { tipoComponenteCelula, tipoTabelaCelula, tiposTabelaCelulas } from "../types-eli-tabela";
|
||||
import { registryTabelaCelulas } from "./registryTabelaCelulas";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -19,13 +19,13 @@ export default defineComponent({
|
|||
props: {
|
||||
celula: {
|
||||
// `ComponenteCelula` é uma tupla `readonly [tipo, dados]`.
|
||||
type: Array as unknown as PropType<ComponenteCelula>,
|
||||
type: Array as unknown as PropType<tipoComponenteCelula>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const tipo = computed(() => props.celula[0] as TipoTabelaCelula);
|
||||
const dados = computed(() => props.celula[1] as TiposTabelaCelulas[TipoTabelaCelula]);
|
||||
const tipo = computed(() => props.celula[0] as tipoTabelaCelula);
|
||||
const dados = computed(() => props.celula[1] as tiposTabelaCelulas[tipoTabelaCelula]);
|
||||
|
||||
// Observação: mantemos o registry tipado, mas o TS do template não consegue
|
||||
// fazer narrowing do componente com base em `tipo`, então tipamos como `Component`.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { computed, defineComponent, PropType } from "vue";
|
|||
import dayjs from "dayjs";
|
||||
import relativeTime from "dayjs/plugin/relativeTime";
|
||||
|
||||
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
// Necessário para `fromNow()`.
|
||||
dayjs.extend(relativeTime);
|
||||
|
|
@ -25,7 +25,7 @@ export default defineComponent({
|
|||
name: "EliTabelaCelulaData",
|
||||
props: {
|
||||
dados: {
|
||||
type: Object as PropType<TiposTabelaCelulas["data"]>,
|
||||
type: Object as PropType<tiposTabelaCelulas["data"]>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from "vue"
|
||||
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaNumero",
|
||||
components: {},
|
||||
props: {
|
||||
dados: {
|
||||
type: Object as PropType<TiposTabelaCelulas["numero"]>,
|
||||
type: Object as PropType<tiposTabelaCelulas["numero"]>,
|
||||
},
|
||||
},
|
||||
setup({ dados }) {
|
||||
|
|
|
|||
|
|
@ -26,14 +26,14 @@
|
|||
import { defineComponent, PropType } from "vue";
|
||||
import { VChip } from "vuetify/components";
|
||||
|
||||
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTags",
|
||||
components: { VChip },
|
||||
props: {
|
||||
dados: {
|
||||
type: Object as PropType<TiposTabelaCelulas["tags"]>,
|
||||
type: Object as PropType<tiposTabelaCelulas["tags"]>,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue"
|
||||
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTextoSimples",
|
||||
components: {},
|
||||
props: {
|
||||
dados: {
|
||||
type: Object as PropType<TiposTabelaCelulas["textoSimples"]>,
|
||||
type: Object as PropType<tiposTabelaCelulas["textoSimples"]>,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from "vue";
|
||||
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||
|
||||
export default defineComponent({
|
||||
name: "EliTabelaCelulaTextoTruncado",
|
||||
props: {
|
||||
dados: {
|
||||
type: Object as PropType<TiposTabelaCelulas["textoTruncado"]>,
|
||||
type: Object as PropType<tiposTabelaCelulas["textoTruncado"]>,
|
||||
},
|
||||
},
|
||||
setup({ dados }) {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import EliTabelaCelulaTextoTruncado from "./EliTabelaCelulaTextoTruncado.vue";
|
|||
import EliTabelaCelulaNumero from "./EliTabelaCelulaNumero.vue";
|
||||
import EliTabelaCelulaTags from "./EliTabelaCelulaTags.vue";
|
||||
import EliTabelaCelulaData from "./EliTabelaCelulaData.vue";
|
||||
import type { TipoTabelaCelula } from "./tiposTabelaCelulas";
|
||||
import type { tipoTabelaCelula } from "./tiposTabelaCelulas";
|
||||
|
||||
export const registryTabelaCelulas = {
|
||||
textoSimples: EliTabelaCelulaTextoSimples,
|
||||
|
|
@ -13,4 +13,4 @@ export const registryTabelaCelulas = {
|
|||
numero: EliTabelaCelulaNumero,
|
||||
tags: EliTabelaCelulaTags,
|
||||
data: EliTabelaCelulaData,
|
||||
} as const satisfies Record<TipoTabelaCelula, Component>;
|
||||
} as const satisfies Record<tipoTabelaCelula, Component>;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
import type { LucideIcon } from "lucide-vue-next";
|
||||
|
||||
export type TiposTabelaCelulas = {
|
||||
export type tiposTabelaCelulas = {
|
||||
textoSimples: {
|
||||
texto: string;
|
||||
acao?: () => void;
|
||||
|
|
@ -45,5 +45,5 @@ export type TiposTabelaCelulas = {
|
|||
};
|
||||
};
|
||||
|
||||
export type TipoTabelaCelula = keyof TiposTabelaCelulas;
|
||||
export type tipoTabelaCelula = keyof tiposTabelaCelulas;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { tipoResposta } from "p-respostas";
|
||||
import type { LucideIcon } from "lucide-vue-next";
|
||||
import type { TipoTabelaCelula, TiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
|
||||
import type { tipoTabelaCelula, tiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
|
||||
import { operadores, zFiltro } from "p-comuns";
|
||||
import { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||
|
||||
|
|
@ -11,30 +11,30 @@ export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>
|
|||
|
||||
|
||||
|
||||
export type ComponenteCelulaBase<T extends TipoTabelaCelula> =
|
||||
readonly [T, TiposTabelaCelulas[T]]
|
||||
export type tipoComponenteCelulaBase<T extends tipoTabelaCelula> =
|
||||
readonly [T, tiposTabelaCelulas[T]]
|
||||
|
||||
export type ComponenteCelula = {
|
||||
[K in TipoTabelaCelula]: ComponenteCelulaBase<K>
|
||||
}[TipoTabelaCelula]
|
||||
export type tipoComponenteCelula = {
|
||||
[K in tipoTabelaCelula]: tipoComponenteCelulaBase<K>
|
||||
}[tipoTabelaCelula]
|
||||
|
||||
export const celulaTabela = <T extends TipoTabelaCelula>(
|
||||
export const celulaTabela = <T extends tipoTabelaCelula>(
|
||||
tipo: T,
|
||||
dados: TiposTabelaCelulas[T],
|
||||
): ComponenteCelulaBase<T> => {
|
||||
dados: tiposTabelaCelulas[T],
|
||||
): tipoComponenteCelulaBase<T> => {
|
||||
return [tipo, dados] as const
|
||||
}
|
||||
|
||||
export type { TipoTabelaCelula, TiposTabelaCelulas };
|
||||
export type { tipoTabelaCelula, tiposTabelaCelulas };
|
||||
|
||||
|
||||
|
||||
|
||||
export type EliColuna<T> = {
|
||||
export type tipoEliColuna<T> = {
|
||||
/** Texto exibido no cabeçalho da coluna. */
|
||||
rotulo: string;
|
||||
/** Função responsável por renderizar o conteúdo da célula. */
|
||||
celula: (linha: T) => ComponenteCelula;
|
||||
celula: (linha: T) => tipoComponenteCelula;
|
||||
/** Ação opcional disparada ao clicar na célula. */
|
||||
|
||||
/**
|
||||
|
|
@ -50,14 +50,14 @@ export type EliColuna<T> = {
|
|||
visivel: boolean
|
||||
};
|
||||
|
||||
export type EliConsultaPaginada<T> = {
|
||||
export type tipoEliConsultaPaginada<T> = {
|
||||
/** Registros retornados na consulta. */
|
||||
valores: T[];
|
||||
/** Total de registros disponíveis no backend. */
|
||||
quantidade: number;
|
||||
};
|
||||
|
||||
export type EliTabelaAcao<T> = {
|
||||
export type tipoEliTabelaAcao<T> = {
|
||||
/** Ícone (Lucide) exibido para representar a ação. */
|
||||
icone: LucideIcon;
|
||||
/** Cor aplicada ao ícone e rótulo. */
|
||||
|
|
@ -81,13 +81,13 @@ export type EliTabelaAcao<T> = {
|
|||
* - `consulta`: função que recupera os dados, com suporte a ordenação/paginação
|
||||
* - `mostrarCaixaDeBusca`: habilita um campo de busca textual no cabeçalho
|
||||
*/
|
||||
export type EliTabelaConsulta<T> = {
|
||||
export type tipoEliTabelaConsulta<T> = {
|
||||
/** nome da tabela, um identificador unico */
|
||||
nome: string
|
||||
/** Indica se a caixa de busca deve ser exibida acima da tabela. */
|
||||
mostrarCaixaDeBusca?: boolean;
|
||||
/** Lista de colunas da tabela. */
|
||||
colunas: EliColuna<T>[];
|
||||
colunas: tipoEliColuna<T>[];
|
||||
/** Quantidade de registros solicitados por consulta (padrão `10`). */
|
||||
registros_por_consulta?: number;
|
||||
/**
|
||||
|
|
@ -104,13 +104,13 @@ export type EliTabelaConsulta<T> = {
|
|||
limit?: number;
|
||||
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||
texto_busca?: string;
|
||||
}) => Promise<tipoResposta<EliConsultaPaginada<T>>>;
|
||||
}) => Promise<tipoResposta<tipoEliConsultaPaginada<T>>>;
|
||||
/** Quantidade máxima de botões exibidos na paginação (padrão `7`). */
|
||||
maximo_botoes_paginacao?: number;
|
||||
/** Mensagem exibida quando a consulta retorna ok porém sem dados. */
|
||||
mensagemVazio?: string;
|
||||
/** Ações exibidas à direita de cada linha. */
|
||||
acoesLinha?: EliTabelaAcao<T>[];
|
||||
acoesLinha?: tipoEliTabelaAcao<T>[];
|
||||
/**
|
||||
* Configurações dos botões que serão inseridos a direita da caixa de busca.
|
||||
* Seu uso mais comum será para criar novos registros, mas poderá ter outras utilidades.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue