Compare commits
31 commits
8bb5aea15e
...
63d943d0df
| Author | SHA1 | Date | |
|---|---|---|---|
| 63d943d0df | |||
| a693081023 | |||
| 8c5a31ef30 | |||
| 1e3c4026e8 | |||
| e7357e064a | |||
| 0144788548 | |||
| 27c9e4d5e2 | |||
| 6aedf2469f | |||
| de7c19be24 | |||
| fa1f93aedc | |||
| 317b0b3b3e | |||
| 4fd142ee70 | |||
| 5c587c9232 | |||
| 133f32e4f7 | |||
| 51c3808a7f | |||
| 2afa99512e | |||
| 33fe5d6ecf | |||
| 81dbb48685 | |||
| d737400bad | |||
| 4cc8bb736d | |||
| 933ba17ae8 | |||
| 92662a0b13 | |||
| 67dc4c465a | |||
| 64535c51a3 | |||
| 50a971ccaf | |||
| df798df8d7 | |||
| 4414eb0be6 | |||
| e1fec007b6 | |||
| c4a0d31686 | |||
| 052337b9da | |||
| 24c07da6f8 |
123 changed files with 37314 additions and 2509 deletions
41
.agent
41
.agent
|
|
@ -23,7 +23,7 @@ Construir um Design System de componentes em **Vue 3** para reutilização em m
|
||||||
- **defineComponent** (obrigatório)
|
- **defineComponent** (obrigatório)
|
||||||
- Sem TSX (padrão: `<template>` + `<script lang="ts">`)
|
- Sem TSX (padrão: `<template>` + `<script lang="ts">`)
|
||||||
- Estilo: preferir CSS scoped por componente (se aplicável)
|
- Estilo: preferir CSS scoped por componente (se aplicável)
|
||||||
- Ícones: se usar, definir um padrão único do repositório (não inventar por componente)
|
- Ícones: caso seja necessário o uso de ícones, usar **lucide** (biblioteca `lucide-vue-next`) como padrão do repositório.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -40,6 +40,27 @@ Construir um Design System de componentes em **Vue 3** para reutilização em m
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Convenção atual de entradas (IMPORTANTE)
|
||||||
|
|
||||||
|
O componente **`EliInput` foi removido**. O padrão atual é a família **`EliEntrada*`**:
|
||||||
|
|
||||||
|
- `EliEntradaTexto`
|
||||||
|
- `EliEntradaNumero`
|
||||||
|
- `EliEntradaDataHora`
|
||||||
|
|
||||||
|
E o contrato padrão para entradas é:
|
||||||
|
- prop `value`
|
||||||
|
- evento `update:value`
|
||||||
|
- prop obrigatória `opcoes` (contém `rotulo` e outras opções)
|
||||||
|
|
||||||
|
Exemplo:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<EliEntradaTexto v-model:value="nome" :opcoes="{ rotulo: 'Nome' }" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Estrutura obrigatória do repositório
|
## Estrutura obrigatória do repositório
|
||||||
- Cada componente deve possuir **sua própria pasta** em `src/componentes/`
|
- Cada componente deve possuir **sua própria pasta** em `src/componentes/`
|
||||||
- Dentro de cada pasta do componente:
|
- Dentro de cada pasta do componente:
|
||||||
|
|
@ -162,6 +183,24 @@ Evitar comentários óbvios (“isso é um botão”).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Convenção atual de EliTabela (IMPORTANTE)
|
||||||
|
|
||||||
|
### Filtro avançado
|
||||||
|
|
||||||
|
O filtro avançado da `EliTabela` é configurado via `tabela.filtroAvancado`.
|
||||||
|
|
||||||
|
Regras:
|
||||||
|
- O **operador é travado na definição** (o usuário não escolhe operador)
|
||||||
|
- Cada filtro pode ser usado **no máximo 1 vez**
|
||||||
|
- UI: modal mostra **apenas os componentes de entrada** definidos no filtro
|
||||||
|
- Persistência: salva em `localStorage` apenas `{ coluna, valor }[]` por `tabela.nome`
|
||||||
|
|
||||||
|
Se você for evoluir isso para backend:
|
||||||
|
- usar `parametrosConsulta.filtros` (`tipoFiltro[]`) no `tabela.consulta`
|
||||||
|
- manter compatibilidade com simulação local (quando necessário)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Publicação do pacote (npm)
|
## Publicação do pacote (npm)
|
||||||
|
|
||||||
### Regra de publicação (sem usar `package.json.files`)
|
### Regra de publicação (sem usar `package.json.files`)
|
||||||
|
|
|
||||||
209
IA.md
209
IA.md
|
|
@ -61,7 +61,17 @@ createApp(App)
|
||||||
### 2) Importação direta (quando não quiser plugin)
|
### 2) Importação direta (quando não quiser plugin)
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { EliBotao, EliInput, EliBadge, EliCartao, EliDataHora } from "eli-vue";
|
import {
|
||||||
|
EliBotao,
|
||||||
|
EliBadge,
|
||||||
|
EliCartao,
|
||||||
|
EliTabela,
|
||||||
|
EliEntradaTexto,
|
||||||
|
EliEntradaNumero,
|
||||||
|
EliEntradaDataHora,
|
||||||
|
EliEntradaParagrafo,
|
||||||
|
EliEntradaSelecao,
|
||||||
|
} from "eli-vue";
|
||||||
```
|
```
|
||||||
|
|
||||||
> Observação: ainda pode ser necessário importar o CSS do pacote:
|
> Observação: ainda pode ser necessário importar o CSS do pacote:
|
||||||
|
|
@ -82,11 +92,18 @@ import "eli-vue/dist/eli-vue.css";
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Input com v-model
|
### Entradas (EliEntrada*) com v-model
|
||||||
|
|
||||||
|
O `eli-vue` usa uma família de componentes `EliEntrada*` (em vez do antigo `EliInput`).
|
||||||
|
|
||||||
|
#### Texto
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
|
<EliEntradaTexto
|
||||||
|
v-model:value="nome"
|
||||||
|
:opcoes="{ rotulo: 'Nome', placeholder: 'Digite seu nome' }"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -94,24 +111,21 @@ import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const nome = ref("");
|
const nome = ref<string | null>("");
|
||||||
function salvar() {
|
return { nome };
|
||||||
// ...
|
|
||||||
}
|
|
||||||
|
|
||||||
return { nome, salvar };
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Input de porcentagem
|
#### Parágrafo (textarea)
|
||||||
|
|
||||||
Quando precisar de um campo numérico com sufixo `%`, use `type="porcentagem"`.
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
|
<EliEntradaParagrafo
|
||||||
|
v-model:value="descricao"
|
||||||
|
:opcoes="{ rotulo: 'Descrição', placeholder: 'Digite...', linhas: 5 }"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -119,8 +133,66 @@ import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const taxa = ref("");
|
const descricao = ref<string | null>("");
|
||||||
return { taxa };
|
return { descricao };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Seleção (select)
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<EliEntradaSelecao
|
||||||
|
v-model:value="categoria"
|
||||||
|
:opcoes="{
|
||||||
|
rotulo: 'Categoria',
|
||||||
|
placeholder: 'Selecione...',
|
||||||
|
itens: async () => [
|
||||||
|
{ chave: 'a', rotulo: 'Categoria A' },
|
||||||
|
{ chave: 'b', rotulo: 'Categoria B' },
|
||||||
|
],
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const categoria = ref<string | null>(null);
|
||||||
|
return { categoria };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Texto com formato/máscara
|
||||||
|
|
||||||
|
> Regra importante: o `value` emitido é **sempre o texto formatado** (igual ao que aparece no input).
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<EliEntradaTexto
|
||||||
|
v-model:value="documento"
|
||||||
|
:opcoes="{ rotulo: 'CPF/CNPJ', formato: 'cpfCnpj' }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliEntradaTexto
|
||||||
|
v-model:value="telefone"
|
||||||
|
:opcoes="{ rotulo: 'Telefone', formato: 'telefone' }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const documento = ref<string | null>("");
|
||||||
|
const telefone = ref<string | null>("");
|
||||||
|
return { documento, telefone };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -131,10 +203,10 @@ export default defineComponent({
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<!-- Valor chega do backend em ISO 8601 (UTC/offset), e o componente exibe em horário local -->
|
<!-- Valor chega do backend em ISO 8601 (UTC/offset), e o componente exibe em horário local -->
|
||||||
<EliDataHora v-model="dataHora" rotulo="Agendamento" />
|
<EliEntradaDataHora v-model:value="dataHora" :opcoes="{ rotulo: 'Agendamento' }" />
|
||||||
|
|
||||||
<!-- Somente data -->
|
<!-- Somente data -->
|
||||||
<EliDataHora v-model="data" modo="data" rotulo="Nascimento" />
|
<EliEntradaDataHora v-model:value="data" :opcoes="{ rotulo: 'Nascimento', modo: 'data' }" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -152,6 +224,109 @@ export default defineComponent({
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## EliTabela (com filtro avançado)
|
||||||
|
|
||||||
|
O componente `EliTabela` suporta:
|
||||||
|
- ordenação
|
||||||
|
- paginação
|
||||||
|
- caixa de busca
|
||||||
|
- **filtro avançado (modal)**
|
||||||
|
|
||||||
|
### Contrato da tabela (resumo)
|
||||||
|
|
||||||
|
O tipo principal é `EliTabelaConsulta<T>` (genérico), exportado de `eli-vue`.
|
||||||
|
|
||||||
|
O `filtroAvancado` é uma lista de filtros pré-definidos (o usuário só escolhe quais usar e informa valores):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
filtroAvancado?: {
|
||||||
|
rotulo: string
|
||||||
|
coluna: keyof T
|
||||||
|
operador: string // ex.: "like", "=", ">", "in", "isNull"
|
||||||
|
entrada: ["texto" | "numero" | "dataHora", { rotulo: string; ... }]
|
||||||
|
}[]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Exemplo mínimo
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { EliTabela, celulaTabela } from "eli-vue";
|
||||||
|
import type { EliTabelaConsulta } from "eli-vue";
|
||||||
|
import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
|
||||||
|
|
||||||
|
type Linha = { nome: string; documento: string; email: string };
|
||||||
|
|
||||||
|
const tabela: EliTabelaConsulta<Linha> = {
|
||||||
|
nome: "Exemplo",
|
||||||
|
mostrarCaixaDeBusca: true,
|
||||||
|
registros_por_consulta: 10,
|
||||||
|
colunas: [
|
||||||
|
{ rotulo: "Nome", celula: (l) => celulaTabela("textoSimples", { texto: l.nome }), visivel: true },
|
||||||
|
],
|
||||||
|
filtroAvancado: [
|
||||||
|
{
|
||||||
|
rotulo: "Documento",
|
||||||
|
coluna: "documento",
|
||||||
|
operador: "like",
|
||||||
|
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as unknown as ComponenteEntrada,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
consulta: async () => ({
|
||||||
|
cod: 0,
|
||||||
|
eCerto: true,
|
||||||
|
eErro: false,
|
||||||
|
mensagem: undefined,
|
||||||
|
valor: { quantidade: 0, valores: [] },
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Células da EliTabela (celulaTabela)
|
||||||
|
|
||||||
|
O `eli-vue` expõe o helper `celulaTabela(tipo, dados)` para construir células tipadas.
|
||||||
|
|
||||||
|
Tipos disponíveis atualmente:
|
||||||
|
|
||||||
|
- `textoSimples`: `{ texto: string; acao?: () => void }`
|
||||||
|
- `textoTruncado`: `{ texto: string; acao?: () => void }`
|
||||||
|
- `numero`: `{ numero: number; prefixo?: string; sufixo?: string; acao?: () => void }`
|
||||||
|
- `tags`: `{ opcoes: { rotulo: string; cor?: string; icone?: LucideIcon; acao?: () => void }[] }`
|
||||||
|
- `data`: `{ valor: string; formato: "data" | "data_hora" | "relativo"; acao?: () => void }`
|
||||||
|
|
||||||
|
### Exemplo: célula `tags`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "eli-vue";
|
||||||
|
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||||
|
|
||||||
|
celula: (l) =>
|
||||||
|
celulaTabela("tags", {
|
||||||
|
opcoes: [
|
||||||
|
{ rotulo: "Ativo", cor: "success", icone: BadgeCheck },
|
||||||
|
{ rotulo: "Editar", cor: "primary", icone: Pencil, acao: () => editar(l) },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Exemplo: célula `data`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "eli-vue";
|
||||||
|
|
||||||
|
celula: (l) =>
|
||||||
|
celulaTabela("data", {
|
||||||
|
valor: l.criado_em, // ISO
|
||||||
|
formato: "data", // "data" | "data_hora" | "relativo"
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
> Observação: em modo simulação/local, a tabela pode buscar uma lista completa e aplicar filtro/paginação localmente.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Troubleshooting (para IAs)
|
## Troubleshooting (para IAs)
|
||||||
|
|
||||||
### 1) “Failed to resolve component”
|
### 1) “Failed to resolve component”
|
||||||
|
|
|
||||||
127
README.md
127
README.md
|
|
@ -35,21 +35,28 @@ src/
|
||||||
EliBotao.vue
|
EliBotao.vue
|
||||||
index.ts
|
index.ts
|
||||||
README.md
|
README.md
|
||||||
campo/
|
cartao/
|
||||||
EliInput.vue
|
EliCartao.vue
|
||||||
index.ts
|
index.ts
|
||||||
README.md
|
README.md
|
||||||
indicador/
|
indicador/
|
||||||
EliBadge.vue
|
EliBadge.vue
|
||||||
index.ts
|
index.ts
|
||||||
README.md
|
README.md
|
||||||
data_hora/
|
EliEntrada/
|
||||||
EliDataHora.vue
|
EliEntradaTexto.vue
|
||||||
|
EliEntradaNumero.vue
|
||||||
|
EliEntradaDataHora.vue
|
||||||
index.ts
|
index.ts
|
||||||
README.md
|
README.md
|
||||||
|
EliTabela/
|
||||||
|
EliTabela.vue
|
||||||
|
index.ts
|
||||||
|
README.md
|
||||||
|
celulas/
|
||||||
|
README.md
|
||||||
tipos/
|
tipos/
|
||||||
botao.ts
|
botao.ts
|
||||||
campo.ts
|
|
||||||
indicador.ts
|
indicador.ts
|
||||||
index.ts
|
index.ts
|
||||||
playground/
|
playground/
|
||||||
|
|
@ -60,7 +67,7 @@ src/
|
||||||
|
|
||||||
### Convenções (nomenclatura)
|
### Convenções (nomenclatura)
|
||||||
|
|
||||||
- Componentes usam **prefixo `Eli`** (ex.: `EliBotao`, `EliInput`).
|
- Componentes usam **prefixo `Eli`** (ex.: `EliBotao`, `EliEntradaTexto`).
|
||||||
- Pastas preferem **português** (ex.: `src/componentes/botao`, `src/componentes/campo`).
|
- Pastas preferem **português** (ex.: `src/componentes/botao`, `src/componentes/campo`).
|
||||||
- Tipos compartilhados ficam em `src/tipos/`.
|
- Tipos compartilhados ficam em `src/tipos/`.
|
||||||
- Sem TSX; padrão SFC: `<template>` + `<script lang="ts">` + `defineComponent`.
|
- Sem TSX; padrão SFC: `<template>` + `<script lang="ts">` + `defineComponent`.
|
||||||
|
|
@ -128,7 +135,17 @@ createApp(App)
|
||||||
### 2) Importação direta de componentes
|
### 2) Importação direta de componentes
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { EliBotao, EliInput, EliBadge, EliDataHora } from "eli-vue";
|
import {
|
||||||
|
EliBotao,
|
||||||
|
EliBadge,
|
||||||
|
EliCartao,
|
||||||
|
EliTabela,
|
||||||
|
EliEntradaTexto,
|
||||||
|
EliEntradaNumero,
|
||||||
|
EliEntradaDataHora,
|
||||||
|
EliEntradaParagrafo,
|
||||||
|
EliEntradaSelecao,
|
||||||
|
} from "eli-vue";
|
||||||
```
|
```
|
||||||
|
|
||||||
## Exemplos rápidos de uso
|
## Exemplos rápidos de uso
|
||||||
|
|
@ -141,11 +158,14 @@ import { EliBotao, EliInput, EliBadge, EliDataHora } from "eli-vue";
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
### EliInput (v-model)
|
### Entradas (EliEntrada*) com v-model
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
|
<EliEntradaTexto
|
||||||
|
v-model:value="nome"
|
||||||
|
:opcoes="{ rotulo: 'Nome', placeholder: 'Digite seu nome' }"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -153,20 +173,21 @@ import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const nome = ref("");
|
const nome = ref<string | null>("");
|
||||||
return { nome };
|
return { nome };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### EliInput (porcentagem)
|
### EliEntradaNumero (exemplo)
|
||||||
|
|
||||||
Use `type="porcentagem"` quando precisar de um campo numérico com sufixo `%` embutido.
|
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
|
<EliEntradaNumero
|
||||||
|
v-model:value="taxa"
|
||||||
|
:opcoes="{ rotulo: 'Taxa', placeholder: '0,00' }"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
|
@ -174,7 +195,7 @@ import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
setup() {
|
||||||
const taxa = ref("");
|
const taxa = ref<number | null>(null);
|
||||||
return { taxa };
|
return { taxa };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -191,7 +212,7 @@ export default defineComponent({
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
### EliDataHora
|
### EliEntradaDataHora
|
||||||
|
|
||||||
> Entrada/saída sempre em **ISO 8601**.
|
> Entrada/saída sempre em **ISO 8601**.
|
||||||
> - Aceita UTC absoluto (`Z`) ou com offset.
|
> - Aceita UTC absoluto (`Z`) ou com offset.
|
||||||
|
|
@ -199,16 +220,19 @@ export default defineComponent({
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<EliDataHora v-model="agendamento" rotulo="Agendamento" />
|
<EliEntradaDataHora v-model:value="agendamento" :opcoes="{ rotulo: 'Agendamento' }" />
|
||||||
<EliDataHora v-model="nascimento" modo="data" rotulo="Nascimento" />
|
<EliEntradaDataHora
|
||||||
|
v-model:value="nascimento"
|
||||||
|
:opcoes="{ rotulo: 'Nascimento', modo: 'data' }"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, ref } from "vue";
|
||||||
import { EliDataHora } from "eli-vue";
|
import { EliEntradaDataHora } from "eli-vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { EliDataHora },
|
components: { EliEntradaDataHora },
|
||||||
setup() {
|
setup() {
|
||||||
const agendamento = ref<string | null>("2026-01-09T16:15:00Z");
|
const agendamento = ref<string | null>("2026-01-09T16:15:00Z");
|
||||||
const nascimento = ref<string | null>("2026-01-09T00:00:00-03:00");
|
const nascimento = ref<string | null>("2026-01-09T00:00:00-03:00");
|
||||||
|
|
@ -218,6 +242,54 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### EliTabela — célula `tags`
|
||||||
|
|
||||||
|
Você pode renderizar múltiplas tags/chips numa célula usando `celulaTabela("tags", ...)`.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "eli-vue";
|
||||||
|
import { BadgeCheck, Pencil } from "lucide-vue-next";
|
||||||
|
|
||||||
|
celula: (l) =>
|
||||||
|
celulaTabela("tags", {
|
||||||
|
opcoes: [
|
||||||
|
{ rotulo: "Ativo", cor: "success", icone: BadgeCheck },
|
||||||
|
{ rotulo: "Editar", cor: "primary", icone: Pencil, acao: () => editar(l) },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### EliTabela — célula `numero` com prefixo/sufixo
|
||||||
|
|
||||||
|
Para representar **moeda** ou **unidade de medida**, a célula `numero` aceita `prefixo` e `sufixo`:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "eli-vue";
|
||||||
|
|
||||||
|
// moeda
|
||||||
|
celula: (l) => celulaTabela("numero", { numero: l.total, prefixo: "R$" })
|
||||||
|
|
||||||
|
// unidade
|
||||||
|
celula: (l) => celulaTabela("numero", { numero: l.peso, sufixo: "kg" })
|
||||||
|
```
|
||||||
|
|
||||||
|
### EliTabela — célula `data`
|
||||||
|
|
||||||
|
Para exibir datas (ISO 8601) com diferentes formatos, use a célula `data`:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "eli-vue";
|
||||||
|
|
||||||
|
// somente data
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data" })
|
||||||
|
|
||||||
|
// data e hora
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data_hora" })
|
||||||
|
|
||||||
|
// relativo (dayjs)
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.atualizado_em, formato: "relativo" })
|
||||||
|
```
|
||||||
|
|
||||||
## Troubleshooting (problemas comuns)
|
## Troubleshooting (problemas comuns)
|
||||||
|
|
||||||
### 1) "Failed to resolve component" / componente não registrado
|
### 1) "Failed to resolve component" / componente não registrado
|
||||||
|
|
@ -253,11 +325,9 @@ Exemplo: um **pipeline** em colunas (estilo Trello/Kanban) com cards de oportuni
|
||||||
<v-container class="py-6">
|
<v-container class="py-6">
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<h2 class="text-h6">Pipeline de Oportunidades</h2>
|
<h2 class="text-h6">Pipeline de Oportunidades</h2>
|
||||||
<EliInput
|
<EliEntradaTexto
|
||||||
v-model="filtro"
|
v-model:value="filtro"
|
||||||
label="Buscar"
|
:opcoes="{ rotulo: 'Buscar', placeholder: 'Cliente, proposta, valor...' }"
|
||||||
placeholder="Cliente, proposta, valor..."
|
|
||||||
density="compact"
|
|
||||||
/>
|
/>
|
||||||
<EliBotao @click="criarOportunidade">Nova oportunidade</EliBotao>
|
<EliBotao @click="criarOportunidade">Nova oportunidade</EliBotao>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -313,7 +383,7 @@ Exemplo: um **pipeline** em colunas (estilo Trello/Kanban) com cards de oportuni
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from "vue";
|
import { defineComponent, ref } from "vue";
|
||||||
import { EliBadge, EliBotao, EliInput } from "eli-vue";
|
import { EliBadge, EliBotao, EliEntradaTexto } from "eli-vue";
|
||||||
|
|
||||||
type Oportunidade = {
|
type Oportunidade = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -332,7 +402,7 @@ type Coluna = {
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "PipelineExemplo",
|
name: "PipelineExemplo",
|
||||||
components: { EliBadge, EliBotao, EliInput },
|
components: { EliBadge, EliBotao, EliEntradaTexto },
|
||||||
setup() {
|
setup() {
|
||||||
const filtro = ref("");
|
const filtro = ref("");
|
||||||
|
|
||||||
|
|
@ -467,6 +537,9 @@ pnpm run build
|
||||||
|
|
||||||
Gera `dist/` (artefatos de build) e `dist/types` (declarações `.d.ts`).
|
Gera `dist/` (artefatos de build) e `dist/types` (declarações `.d.ts`).
|
||||||
|
|
||||||
|
> Observação importante: este repositório roda `npm version patch --no-git-tag-version` no `prebuild`.
|
||||||
|
> Ou seja, ao rodar `pnpm run build` a versão do `package.json` é incrementada automaticamente.
|
||||||
|
|
||||||
## Guia rápido para IAs (antes de codar)
|
## Guia rápido para IAs (antes de codar)
|
||||||
|
|
||||||
1) **Leia** `.agent` e este README.
|
1) **Leia** `.agent` e este README.
|
||||||
|
|
|
||||||
2
dist/eli-vue.css
vendored
2
dist/eli-vue.css
vendored
File diff suppressed because one or more lines are too long
3514
dist/eli-vue.es.js
vendored
3514
dist/eli-vue.es.js
vendored
File diff suppressed because it is too large
Load diff
77
dist/eli-vue.umd.js
vendored
77
dist/eli-vue.umd.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/quero-quero.gif
vendored
Executable file
BIN
dist/quero-quero.gif
vendored
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
231
dist/types/componentes/EliEntrada/EliEntradaDataHora.vue.d.ts
vendored
Normal file
231
dist/types/componentes/EliEntrada/EliEntradaDataHora.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,231 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
type EntradaDataHora = PadroesEntradas["dataHora"];
|
||||||
|
type PropsAntigas = {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
rotulo?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
desabilitado?: boolean;
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
densidade?: CampoDensidade;
|
||||||
|
variante?: CampoVariante;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
};
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaDataHora["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaDataHora["opcoes"]>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
modo: {
|
||||||
|
type: PropType<PropsAntigas["modo"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
rotulo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
placeholder: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
desabilitado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
limpavel: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
mensagensErro: {
|
||||||
|
type: PropType<string | string[]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dica: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dicaPersistente: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
densidade: {
|
||||||
|
type: PropType<CampoDensidade>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
variante: {
|
||||||
|
type: PropType<CampoVariante>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
min: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
max: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
valor: import("vue").WritableComputedRef<string, string>;
|
||||||
|
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
||||||
|
minLocal: import("vue").ComputedRef<string | undefined>;
|
||||||
|
maxLocal: import("vue").ComputedRef<string | undefined>;
|
||||||
|
opcoesEfetivas: import("vue").ComputedRef<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
|
||||||
|
emitCompatFocus: () => void;
|
||||||
|
emitCompatBlur: () => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: string | null) => true;
|
||||||
|
input: (_v: string | null) => true;
|
||||||
|
change: (_v: string | null) => true;
|
||||||
|
"update:modelValue": (_v: string | null) => true;
|
||||||
|
alterar: (_v: string | null) => true;
|
||||||
|
foco: () => true;
|
||||||
|
desfoco: () => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaDataHora["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaDataHora["opcoes"]>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
modo: {
|
||||||
|
type: PropType<PropsAntigas["modo"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
rotulo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
placeholder: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
desabilitado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
limpavel: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
mensagensErro: {
|
||||||
|
type: PropType<string | string[]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dica: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dicaPersistente: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
densidade: {
|
||||||
|
type: PropType<CampoDensidade>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
variante: {
|
||||||
|
type: PropType<CampoVariante>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
min: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
max: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||||
|
onInput?: ((_v: string | null) => any) | undefined;
|
||||||
|
onChange?: ((_v: string | null) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||||
|
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||||
|
onFoco?: (() => any) | undefined;
|
||||||
|
onDesfoco?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
modo: "data" | "dataHora" | undefined;
|
||||||
|
limpavel: boolean;
|
||||||
|
erro: boolean;
|
||||||
|
mensagensErro: string | string[];
|
||||||
|
dica: string;
|
||||||
|
dicaPersistente: boolean;
|
||||||
|
min: string | undefined;
|
||||||
|
max: string | undefined;
|
||||||
|
densidade: CampoDensidade;
|
||||||
|
variante: CampoVariante;
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
};
|
||||||
|
value: string | null | undefined;
|
||||||
|
placeholder: string;
|
||||||
|
modelValue: string | null;
|
||||||
|
rotulo: string;
|
||||||
|
desabilitado: boolean;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
49
dist/types/componentes/EliEntrada/EliEntradaNumero.vue.d.ts
vendored
Normal file
49
dist/types/componentes/EliEntrada/EliEntradaNumero.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
type EntradaNumero = PadroesEntradas["numero"];
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaNumero["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaNumero["opcoes"]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
emit: ((event: "update:value", _v: number | null | undefined) => void) & ((event: "input", _v: number | null | undefined) => void) & ((event: "change", _v: number | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
|
||||||
|
displayValue: import("vue").Ref<string, string>;
|
||||||
|
isInteiro: import("vue").ComputedRef<boolean>;
|
||||||
|
onUpdateModelValue: (texto: string) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: EntradaNumero["value"]) => true;
|
||||||
|
/** Compat Vue2 (v-model padrão: value + input) */
|
||||||
|
input: (_v: EntradaNumero["value"]) => true;
|
||||||
|
change: (_v: EntradaNumero["value"]) => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaNumero["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaNumero["opcoes"]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onInput?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onChange?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
value: number | null | undefined;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
1642
dist/types/componentes/EliEntrada/EliEntradaParagrafo.vue.d.ts
vendored
Normal file
1642
dist/types/componentes/EliEntrada/EliEntradaParagrafo.vue.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
9858
dist/types/componentes/EliEntrada/EliEntradaSelecao.vue.d.ts
vendored
Normal file
9858
dist/types/componentes/EliEntrada/EliEntradaSelecao.vue.d.ts
vendored
Normal file
File diff suppressed because one or more lines are too long
50
dist/types/componentes/EliEntrada/EliEntradaTexto.vue.d.ts
vendored
Normal file
50
dist/types/componentes/EliEntrada/EliEntradaTexto.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
type EntradaTexto = PadroesEntradas["texto"];
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaTexto["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaTexto["opcoes"]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
emit: ((event: "update:value", _v: string | null | undefined) => void) & ((event: "input", _v: string | null | undefined) => void) & ((event: "change", _v: string | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
|
||||||
|
localValue: import("vue").WritableComputedRef<string | null | undefined, string | null | undefined>;
|
||||||
|
inputHtmlType: import("vue").ComputedRef<"text" | "email" | "url">;
|
||||||
|
inputMode: import("vue").ComputedRef<string | undefined>;
|
||||||
|
onInput: (e: Event) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: EntradaTexto["value"]) => true;
|
||||||
|
/** Compat Vue2 (v-model padrão: value + input) */
|
||||||
|
input: (_v: EntradaTexto["value"]) => true;
|
||||||
|
change: (_v: EntradaTexto["value"]) => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: PropType<EntradaTexto["value"]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<EntradaTexto["opcoes"]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onChange?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
value: string | null | undefined;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
7
dist/types/componentes/EliEntrada/index.d.ts
vendored
Normal file
7
dist/types/componentes/EliEntrada/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||||
|
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||||
|
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||||
|
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||||
|
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||||
|
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao };
|
||||||
|
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||||
11901
dist/types/componentes/EliEntrada/registryEliEntradas.d.ts
vendored
Normal file
11901
dist/types/componentes/EliEntrada/registryEliEntradas.d.ts
vendored
Normal file
File diff suppressed because one or more lines are too long
143
dist/types/componentes/EliEntrada/tiposEntradas.d.ts
vendored
Normal file
143
dist/types/componentes/EliEntrada/tiposEntradas.d.ts
vendored
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
/**
|
||||||
|
* Tipos base para componentes de entrada (EliEntrada*)
|
||||||
|
*
|
||||||
|
* Objetivo:
|
||||||
|
* - Padronizar o shape de dados de todos os componentes de entrada.
|
||||||
|
* - Cada entrada possui sempre:
|
||||||
|
* 1) `value`: o valor atual (tipado)
|
||||||
|
* 2) `opcoes`: configuração do componente (rótulo, placeholder e extras por tipo)
|
||||||
|
*
|
||||||
|
* Como usar:
|
||||||
|
* - `PadroesEntradas[tipo]` retorna a tipagem completa (value + opcoes) daquele tipo.
|
||||||
|
* - `TipoEntrada` é a união com todos os tipos suportados (ex.: "texto" | "numero").
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* Contrato padrão de uma entrada.
|
||||||
|
*
|
||||||
|
* @typeParam T - tipo do `value` (ex.: string | null | undefined)
|
||||||
|
* @typeParam Mais - campos adicionais dentro de `opcoes`, específicos do tipo de entrada
|
||||||
|
*/
|
||||||
|
export type tipoPadraoEntrada<T, Mais extends Record<string, unknown> = {}> = {
|
||||||
|
/** Valor atual do campo (pode aceitar null/undefined quando aplicável) */
|
||||||
|
value: T;
|
||||||
|
/** Configurações do componente (visuais + regras simples do tipo) */
|
||||||
|
opcoes: {
|
||||||
|
/** Rótulo exibido ao usuário */
|
||||||
|
rotulo: string;
|
||||||
|
/** Texto de ajuda dentro do input quando vazio */
|
||||||
|
placeholder?: string;
|
||||||
|
} & Mais;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Mapa de tipos de entrada suportados e suas configurações específicas.
|
||||||
|
*
|
||||||
|
* Observação importante:
|
||||||
|
* - As chaves deste objeto (ex.: "texto", "numero") viram o tipo `TipoEntrada`.
|
||||||
|
* - Cada item define:
|
||||||
|
* - `value`: tipo do valor
|
||||||
|
* - `opcoes`: opções comuns + extras específicas
|
||||||
|
*/
|
||||||
|
export type PadroesEntradas = {
|
||||||
|
texto: tipoPadraoEntrada<string | null | undefined, {
|
||||||
|
/** Limite máximo de caracteres permitidos (se definido) */
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
/**
|
||||||
|
* Formato/máscara aplicada ao texto.
|
||||||
|
* Obs: o `value` SEMPRE será o texto formatado (o que aparece no input).
|
||||||
|
*/
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||||
|
}>;
|
||||||
|
numero: tipoPadraoEntrada<number | null | undefined, {
|
||||||
|
/** Unidade de medida (ex.: "kg", "m³") */
|
||||||
|
sufixo?: string;
|
||||||
|
/** Moéda (ex.: "R$") */
|
||||||
|
prefixo?: string;
|
||||||
|
/**
|
||||||
|
* Passo/precisão do valor numérico.
|
||||||
|
* - 1 => somente inteiros
|
||||||
|
* - 0.1 => 1 casa decimal
|
||||||
|
* - 0.01 => 2 casas decimais
|
||||||
|
*
|
||||||
|
* Dica: este conceito corresponde ao atributo HTML `step`.
|
||||||
|
*/
|
||||||
|
precisao?: number;
|
||||||
|
}>;
|
||||||
|
dataHora: tipoPadraoEntrada<string | null | undefined, {
|
||||||
|
/** Define o tipo de entrada. - `dataHora`: datetime-local - `data`: date */
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean;
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean;
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string;
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
/** Valor mínimo permitido (ISO 8601 - offset ou Z). */
|
||||||
|
min?: string;
|
||||||
|
/** Valor máximo permitido (ISO 8601 - offset ou Z). */
|
||||||
|
max?: string;
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
paragrafo: tipoPadraoEntrada<string | null | undefined, {
|
||||||
|
/** Quantidade de linhas visíveis no textarea (Vuetify `rows`). */
|
||||||
|
linhas?: number;
|
||||||
|
/** Limite máximo de caracteres permitidos (se definido). */
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean;
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean;
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string;
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
selecao: tipoPadraoEntrada<string | null | undefined, {
|
||||||
|
/**
|
||||||
|
* Carrega os itens da seleção (sincrono ou async).
|
||||||
|
* - Cada item precisa ter uma chave estável (value) e um rótulo (title).
|
||||||
|
*/
|
||||||
|
itens: () => {
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[] | Promise<{
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[]>;
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean;
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean;
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string;
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* União dos tipos de entrada suportados.
|
||||||
|
* Ex.: "texto" | "numero"
|
||||||
|
*/
|
||||||
|
export type TipoEntrada = keyof PadroesEntradas;
|
||||||
|
export type PadraoComponenteEntrada<T extends TipoEntrada> = readonly [T, PadroesEntradas[T]['opcoes']];
|
||||||
|
export type ComponenteEntrada = {
|
||||||
|
[K in TipoEntrada]: PadraoComponenteEntrada<K>;
|
||||||
|
}[TipoEntrada];
|
||||||
2
dist/types/componentes/EliEntrada/utils/cep.d.ts
vendored
Normal file
2
dist/types/componentes/EliEntrada/utils/cep.d.ts
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/** Formata CEP no padrão 00000-000 */
|
||||||
|
export declare function formatarCep(valor: string): string;
|
||||||
1264
dist/types/componentes/EliTabela/EliTabela.vue.d.ts
vendored
Normal file
1264
dist/types/componentes/EliTabela/EliTabela.vue.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
186
dist/types/componentes/EliTabela/EliTabelaBody.vue.d.ts
vendored
Normal file
186
dist/types/componentes/EliTabela/EliTabelaBody.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,186 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linhasExpandidas: {
|
||||||
|
type: PropType<Record<number, boolean>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linhas: {
|
||||||
|
type: PropType<Array<unknown>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temAcoes: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
possuiAcoes: {
|
||||||
|
type: PropType<(i: number) => boolean>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
toggleMenu: {
|
||||||
|
type: PropType<(indice: number, evento: MouseEvent) => void>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
alternarLinhaExpandida: {
|
||||||
|
type: PropType<(indice: number) => void>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linhasExpandidas: {
|
||||||
|
type: PropType<Record<number, boolean>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linhas: {
|
||||||
|
type: PropType<Array<unknown>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temAcoes: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
possuiAcoes: {
|
||||||
|
type: PropType<(i: number) => boolean>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
toggleMenu: {
|
||||||
|
type: PropType<(indice: number, evento: MouseEvent) => void>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
alternarLinhaExpandida: {
|
||||||
|
type: PropType<(indice: number) => void>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {
|
||||||
|
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
Componente: import("vue").ComputedRef<import("vue").Component>;
|
||||||
|
dadosParaComponente: import("vue").ComputedRef<{
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
}>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
EliTabelaDetalhesLinha: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {
|
||||||
|
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
Componente: import("vue").ComputedRef<import("vue").Component>;
|
||||||
|
dadosParaComponente: import("vue").ComputedRef<{
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
}>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
MoreVertical: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
ChevronRight: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
ChevronDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
101
dist/types/componentes/EliTabela/EliTabelaCabecalho.vue.d.ts
vendored
Normal file
101
dist/types/componentes/EliTabela/EliTabelaCabecalho.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
exibirBusca: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
exibirBotaoColunas: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: false;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
exibirBotaoFiltroAvancado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: false;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
valorBusca: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
acoesCabecalho: {
|
||||||
|
type: PropType<Array<{
|
||||||
|
icone?: any;
|
||||||
|
cor?: string;
|
||||||
|
rotulo: string;
|
||||||
|
acao: () => void;
|
||||||
|
}>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
temAcoesCabecalho: import("vue").ComputedRef<boolean>;
|
||||||
|
emitBuscar: (texto: string) => void;
|
||||||
|
emitColunas: () => void;
|
||||||
|
emitFiltroAvancado: () => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
buscar(valor: string): boolean;
|
||||||
|
colunas(): true;
|
||||||
|
filtroAvancado(): true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
exibirBusca: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
exibirBotaoColunas: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: false;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
exibirBotaoFiltroAvancado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: false;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
valorBusca: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
acoesCabecalho: {
|
||||||
|
type: PropType<Array<{
|
||||||
|
icone?: any;
|
||||||
|
cor?: string;
|
||||||
|
rotulo: string;
|
||||||
|
acao: () => void;
|
||||||
|
}>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onBuscar?: ((valor: string) => any) | undefined;
|
||||||
|
onColunas?: (() => any) | undefined;
|
||||||
|
onFiltroAvancado?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
exibirBotaoColunas: boolean;
|
||||||
|
exibirBotaoFiltroAvancado: boolean;
|
||||||
|
}, {}, {
|
||||||
|
EliTabelaCaixaDeBusca: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
modelo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: false;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
texto: import("vue").Ref<string, string>;
|
||||||
|
emitirBusca: () => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
buscar(valor: string): boolean;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
modelo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: false;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onBuscar?: ((valor: string) => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
modelo: string;
|
||||||
|
}, {}, {
|
||||||
|
Search: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
26
dist/types/componentes/EliTabela/EliTabelaCaixaDeBusca.vue.d.ts
vendored
Normal file
26
dist/types/componentes/EliTabela/EliTabelaCaixaDeBusca.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
modelo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: false;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
texto: import("vue").Ref<string, string>;
|
||||||
|
emitirBusca: () => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
buscar(valor: string): boolean;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
modelo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
required: false;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onBuscar?: ((valor: string) => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
modelo: string;
|
||||||
|
}, {}, {
|
||||||
|
Search: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
36
dist/types/componentes/EliTabela/EliTabelaDebug.vue.d.ts
vendored
Normal file
36
dist/types/componentes/EliTabela/EliTabelaDebug.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
isDev: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuPopupPos: {
|
||||||
|
type: PropType<{
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
isDev: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
menuPopupPos: {
|
||||||
|
type: PropType<{
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
60
dist/types/componentes/EliTabela/EliTabelaDetalhesLinha.vue.d.ts
vendored
Normal file
60
dist/types/componentes/EliTabela/EliTabelaDetalhesLinha.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {
|
||||||
|
EliTabelaCelula: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
Componente: import("vue").ComputedRef<import("vue").Component>;
|
||||||
|
dadosParaComponente: import("vue").ComputedRef<{
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
}>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<import("./types-eli-tabela").ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
34
dist/types/componentes/EliTabela/EliTabelaEstados.vue.d.ts
vendored
Normal file
34
dist/types/componentes/EliTabela/EliTabelaEstados.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
carregando: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
mensagemVazio: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
carregando: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
mensagemVazio: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {
|
||||||
|
mensagemVazio: string | undefined;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
59
dist/types/componentes/EliTabela/EliTabelaHead.vue.d.ts
vendored
Normal file
59
dist/types/componentes/EliTabela/EliTabelaHead.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temAcoes: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunaOrdenacao: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
direcaoOrdenacao: {
|
||||||
|
type: PropType<"asc" | "desc">;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
isOrdenavel: (coluna: any) => boolean;
|
||||||
|
emitAlternarOrdenacao: (chave: string) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
alternarOrdenacao(chave: string): boolean;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temAcoes: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunaOrdenacao: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
direcaoOrdenacao: {
|
||||||
|
type: PropType<"asc" | "desc">;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onAlternarOrdenacao?: ((chave: string) => any) | undefined;
|
||||||
|
}>, {}, {}, {
|
||||||
|
ArrowUp: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
ArrowDown: import("vue").FunctionalComponent<import("lucide-vue-next").LucideProps, {}, any, {}>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
66
dist/types/componentes/EliTabela/EliTabelaMenuAcoes.vue.d.ts
vendored
Normal file
66
dist/types/componentes/EliTabela/EliTabelaMenuAcoes.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { EliTabelaAcao } from "./types-eli-tabela";
|
||||||
|
type ItemAcao<T> = {
|
||||||
|
acao: EliTabelaAcao<T>;
|
||||||
|
indice: number;
|
||||||
|
visivel: boolean;
|
||||||
|
};
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
posicao: {
|
||||||
|
type: PropType<{
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
acoes: {
|
||||||
|
type: PropType<Array<ItemAcao<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
menuEl: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
|
||||||
|
possuiAcoes: import("vue").ComputedRef<boolean>;
|
||||||
|
emitExecutar: (item: {
|
||||||
|
acao: EliTabelaAcao<any>;
|
||||||
|
}) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
executar(payload: {
|
||||||
|
acao: EliTabelaAcao<any>;
|
||||||
|
linha: unknown;
|
||||||
|
}): boolean;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
menuAberto: {
|
||||||
|
type: PropType<number | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
posicao: {
|
||||||
|
type: PropType<{
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
acoes: {
|
||||||
|
type: PropType<Array<ItemAcao<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
linha: {
|
||||||
|
type: PropType<unknown | null>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onExecutar?: ((payload: {
|
||||||
|
acao: EliTabelaAcao<any>;
|
||||||
|
linha: unknown;
|
||||||
|
}) => any) | undefined;
|
||||||
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
55
dist/types/componentes/EliTabela/EliTabelaModalColunas.vue.d.ts
vendored
Normal file
55
dist/types/componentes/EliTabela/EliTabelaModalColunas.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { EliTabelaColunasConfig } from "./colunasStorage";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
type OrigemLista = "visiveis" | "invisiveis";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
aberto: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
rotulosColunas: {
|
||||||
|
type: PropType<string[]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
configInicial: {
|
||||||
|
type: PropType<EliTabelaColunasConfig>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
visiveisLocal: import("vue").Ref<string[], string[]>;
|
||||||
|
invisiveisLocal: import("vue").Ref<string[], string[]>;
|
||||||
|
emitFechar: () => void;
|
||||||
|
emitSalvar: () => void;
|
||||||
|
onDragStart: (e: DragEvent, rotulo: string, origem: OrigemLista, index: number) => void;
|
||||||
|
onDropItem: (e: DragEvent, destino: OrigemLista, index: number) => void;
|
||||||
|
onDropLista: (e: DragEvent, destino: OrigemLista, _index: number | null) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
fechar(): true;
|
||||||
|
salvar(_config: EliTabelaColunasConfig): true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
aberto: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
rotulosColunas: {
|
||||||
|
type: PropType<string[]>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
configInicial: {
|
||||||
|
type: PropType<EliTabelaColunasConfig>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
colunas: {
|
||||||
|
type: PropType<Array<EliColuna<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onFechar?: (() => any) | undefined;
|
||||||
|
onSalvar?: ((_config: EliTabelaColunasConfig) => any) | undefined;
|
||||||
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
525
dist/types/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue.d.ts
vendored
Normal file
525
dist/types/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,525 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||||
|
import type { EliTabelaConsulta } from "./types-eli-tabela";
|
||||||
|
type FiltroBase<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||||
|
type LinhaFiltro<T> = {
|
||||||
|
coluna: keyof T;
|
||||||
|
entrada: ComponenteEntrada;
|
||||||
|
operador: string;
|
||||||
|
valor: any;
|
||||||
|
};
|
||||||
|
declare function rotuloDoFiltro(f: FiltroBase<any>): string;
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
aberto: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
filtrosBase: {
|
||||||
|
type: PropType<Array<FiltroBase<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
modelo: {
|
||||||
|
type: PropType<Array<any>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
linhas: import("vue").Ref<{
|
||||||
|
coluna: string | number | symbol;
|
||||||
|
entrada: readonly ["texto", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
limiteCaracteres?: number | undefined;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
|
||||||
|
}] | readonly ["dataHora", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
modo?: "data" | "dataHora" | undefined;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
min?: string | undefined;
|
||||||
|
max?: string | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}] | readonly ["numero", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
sufixo?: string | undefined;
|
||||||
|
prefixo?: string | undefined;
|
||||||
|
precisao?: number | undefined;
|
||||||
|
}] | readonly ["paragrafo", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
linhas?: number | undefined;
|
||||||
|
limiteCaracteres?: number | undefined;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}] | readonly ["selecao", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
itens: () => {
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[] | Promise<{
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[]>;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}];
|
||||||
|
operador: string;
|
||||||
|
valor: any;
|
||||||
|
}[], LinhaFiltro<any>[] | {
|
||||||
|
coluna: string | number | symbol;
|
||||||
|
entrada: readonly ["texto", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
limiteCaracteres?: number | undefined;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep" | undefined;
|
||||||
|
}] | readonly ["dataHora", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
modo?: "data" | "dataHora" | undefined;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
min?: string | undefined;
|
||||||
|
max?: string | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}] | readonly ["numero", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
sufixo?: string | undefined;
|
||||||
|
prefixo?: string | undefined;
|
||||||
|
precisao?: number | undefined;
|
||||||
|
}] | readonly ["paragrafo", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
linhas?: number | undefined;
|
||||||
|
limiteCaracteres?: number | undefined;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}] | readonly ["selecao", {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string | undefined;
|
||||||
|
itens: () => {
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[] | Promise<{
|
||||||
|
chave: string;
|
||||||
|
rotulo: string;
|
||||||
|
}[]>;
|
||||||
|
limpavel?: boolean | undefined;
|
||||||
|
erro?: boolean | undefined;
|
||||||
|
mensagensErro?: string | string[] | undefined;
|
||||||
|
dica?: string | undefined;
|
||||||
|
dicaPersistente?: boolean | undefined;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade | undefined;
|
||||||
|
variante?: import("../../tipos").CampoVariante | undefined;
|
||||||
|
}];
|
||||||
|
operador: string;
|
||||||
|
valor: any;
|
||||||
|
}[]>;
|
||||||
|
opcoesParaAdicionar: import("vue").ComputedRef<{
|
||||||
|
rotulo: string;
|
||||||
|
coluna: string | number | symbol;
|
||||||
|
operador: import("p-comuns").operadores | keyof typeof import("p-comuns").operadores;
|
||||||
|
entrada: ComponenteEntrada;
|
||||||
|
}[]>;
|
||||||
|
colunaParaAdicionar: import("vue").Ref<string, string>;
|
||||||
|
componenteEntrada: (entrada: ComponenteEntrada) => import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<string | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
emit: ((event: "update:value", _v: string | null | undefined) => void) & ((event: "input", _v: string | null | undefined) => void) & ((event: "change", _v: string | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
|
||||||
|
localValue: import("vue").WritableComputedRef<string | null | undefined, string | null | undefined>;
|
||||||
|
inputHtmlType: import("vue").ComputedRef<"text" | "email" | "url">;
|
||||||
|
inputMode: import("vue").ComputedRef<string | undefined>;
|
||||||
|
onInput: (e: Event) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: string | null | undefined) => true;
|
||||||
|
input: (_v: string | null | undefined) => true;
|
||||||
|
change: (_v: string | null | undefined) => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<string | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onChange?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
value: string | null | undefined;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<number | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
sufixo?: string;
|
||||||
|
prefixo?: string;
|
||||||
|
precisao?: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
emit: ((event: "update:value", _v: number | null | undefined) => void) & ((event: "input", _v: number | null | undefined) => void) & ((event: "change", _v: number | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
|
||||||
|
displayValue: import("vue").Ref<string, string>;
|
||||||
|
isInteiro: import("vue").ComputedRef<boolean>;
|
||||||
|
onUpdateModelValue: (texto: string) => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: number | null | undefined) => true;
|
||||||
|
input: (_v: number | null | undefined) => true;
|
||||||
|
change: (_v: number | null | undefined) => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<number | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
sufixo?: string;
|
||||||
|
prefixo?: string;
|
||||||
|
precisao?: number;
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onInput?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onChange?: ((_v: number | null | undefined) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
value: number | null | undefined;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any> | import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<string | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
modo: {
|
||||||
|
type: PropType<"data" | "dataHora" | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
rotulo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
placeholder: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
desabilitado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
limpavel: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
mensagensErro: {
|
||||||
|
type: PropType<string | string[]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dica: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dicaPersistente: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
densidade: {
|
||||||
|
type: PropType<import("../../tipos").CampoDensidade>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
variante: {
|
||||||
|
type: PropType<import("../../tipos").CampoVariante>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
min: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
max: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
attrs: {
|
||||||
|
[x: string]: unknown;
|
||||||
|
};
|
||||||
|
valor: import("vue").WritableComputedRef<string, string>;
|
||||||
|
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
||||||
|
minLocal: import("vue").ComputedRef<string | undefined>;
|
||||||
|
maxLocal: import("vue").ComputedRef<string | undefined>;
|
||||||
|
opcoesEfetivas: import("vue").ComputedRef<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
desabilitadoEfetivo: import("vue").ComputedRef<boolean>;
|
||||||
|
emitCompatFocus: () => void;
|
||||||
|
emitCompatBlur: () => void;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"update:value": (_v: string | null) => true;
|
||||||
|
input: (_v: string | null) => true;
|
||||||
|
change: (_v: string | null) => true;
|
||||||
|
"update:modelValue": (_v: string | null) => true;
|
||||||
|
alterar: (_v: string | null) => true;
|
||||||
|
foco: () => true;
|
||||||
|
desfoco: () => true;
|
||||||
|
focus: () => true;
|
||||||
|
blur: () => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: PropType<string | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
opcoes: {
|
||||||
|
type: PropType<{
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
}>;
|
||||||
|
required: false;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: PropType<string | null>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
modo: {
|
||||||
|
type: PropType<"data" | "dataHora" | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
rotulo: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
placeholder: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
desabilitado: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
limpavel: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
erro: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
mensagensErro: {
|
||||||
|
type: PropType<string | string[]>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dica: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
dicaPersistente: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
densidade: {
|
||||||
|
type: PropType<import("../../tipos").CampoDensidade>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
variante: {
|
||||||
|
type: PropType<import("../../tipos").CampoVariante>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
min: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
max: {
|
||||||
|
type: PropType<string | undefined>;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
"onUpdate:value"?: ((_v: string | null) => any) | undefined;
|
||||||
|
onInput?: ((_v: string | null) => any) | undefined;
|
||||||
|
onChange?: ((_v: string | null) => any) | undefined;
|
||||||
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((_v: string | null) => any) | undefined;
|
||||||
|
onAlterar?: ((_v: string | null) => any) | undefined;
|
||||||
|
onFoco?: (() => any) | undefined;
|
||||||
|
onDesfoco?: (() => any) | undefined;
|
||||||
|
}>, {
|
||||||
|
modo: "data" | "dataHora" | undefined;
|
||||||
|
limpavel: boolean;
|
||||||
|
erro: boolean;
|
||||||
|
mensagensErro: string | string[];
|
||||||
|
dica: string;
|
||||||
|
dicaPersistente: boolean;
|
||||||
|
min: string | undefined;
|
||||||
|
max: string | undefined;
|
||||||
|
densidade: import("../../tipos").CampoDensidade;
|
||||||
|
variante: import("../../tipos").CampoVariante;
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
densidade?: import("../../tipos").CampoDensidade;
|
||||||
|
variante?: import("../../tipos").CampoVariante;
|
||||||
|
};
|
||||||
|
value: string | null | undefined;
|
||||||
|
placeholder: string;
|
||||||
|
modelValue: string | null;
|
||||||
|
rotulo: string;
|
||||||
|
desabilitado: boolean;
|
||||||
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
opcoesEntrada: (entrada: ComponenteEntrada) => any;
|
||||||
|
adicionar: () => void;
|
||||||
|
remover: (idx: number) => void;
|
||||||
|
emitFechar: () => void;
|
||||||
|
emitSalvar: () => void;
|
||||||
|
emitLimpar: () => void;
|
||||||
|
rotuloDoFiltro: typeof rotuloDoFiltro;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
fechar: () => true;
|
||||||
|
limpar: () => true;
|
||||||
|
salvar: (_linhas: any[]) => true;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
aberto: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
filtrosBase: {
|
||||||
|
type: PropType<Array<FiltroBase<any>>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
modelo: {
|
||||||
|
type: PropType<Array<any>>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onFechar?: (() => any) | undefined;
|
||||||
|
onSalvar?: ((_linhas: any[]) => any) | undefined;
|
||||||
|
onLimpar?: (() => any) | undefined;
|
||||||
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
45
dist/types/componentes/EliTabela/EliTabelaPaginacao.vue.d.ts
vendored
Normal file
45
dist/types/componentes/EliTabela/EliTabelaPaginacao.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
pagina: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
totalPaginas: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
maximoBotoes: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
botoes: import("vue").ComputedRef<{
|
||||||
|
label: string;
|
||||||
|
pagina?: number;
|
||||||
|
ativo?: boolean;
|
||||||
|
ehEllipsis?: boolean;
|
||||||
|
}[]>;
|
||||||
|
irParaPagina: (pagina: number | undefined) => void;
|
||||||
|
anteriorDesabilitado: import("vue").ComputedRef<boolean>;
|
||||||
|
proximaDesabilitada: import("vue").ComputedRef<boolean>;
|
||||||
|
paginaAtual: import("vue").ComputedRef<number>;
|
||||||
|
totalPaginasExibidas: import("vue").ComputedRef<number>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
alterar(pagina: number): boolean;
|
||||||
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
pagina: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
totalPaginas: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
maximoBotoes: {
|
||||||
|
type: NumberConstructor;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{
|
||||||
|
onAlterar?: ((pagina: number) => any) | undefined;
|
||||||
|
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
41
dist/types/componentes/EliTabela/celulas/EliTabelaCelula.vue.d.ts
vendored
Normal file
41
dist/types/componentes/EliTabela/celulas/EliTabelaCelula.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import type { Component } from "vue";
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { ComponenteCelula } from "../types-eli-tabela";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
Componente: import("vue").ComputedRef<Component>;
|
||||||
|
dadosParaComponente: import("vue").ComputedRef<{
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
}>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
celula: {
|
||||||
|
type: PropType<ComponenteCelula>;
|
||||||
|
required: true;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
22
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaData.vue.d.ts
vendored
Normal file
22
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaData.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["data"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
textoData: import("vue").ComputedRef<string>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["data"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
21
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaNumero.vue.d.ts
vendored
Normal file
21
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaNumero.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["numero"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
textoNumero: import("vue").ComputedRef<string>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["numero"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
683
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTags.vue.d.ts
vendored
Normal file
683
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTags.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,683 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["tags"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["tags"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {
|
||||||
|
VChip: {
|
||||||
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"click:close": (e: MouseEvent) => true;
|
||||||
|
"update:modelValue": (value: boolean) => true;
|
||||||
|
"group:selected": (val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => true;
|
||||||
|
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||||
|
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}, true, {}, import("vue").SlotsType<Partial<{
|
||||||
|
default: (arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
filter: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||||
|
P: {};
|
||||||
|
B: {};
|
||||||
|
D: {};
|
||||||
|
C: {};
|
||||||
|
M: {};
|
||||||
|
Defaults: {};
|
||||||
|
}, {
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, {}, {}, {}, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}>;
|
||||||
|
__isFragment?: undefined;
|
||||||
|
__isTeleport?: undefined;
|
||||||
|
__isSuspense?: undefined;
|
||||||
|
} & import("vue").ComponentOptionsBase<{
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"click:close": (e: MouseEvent) => true;
|
||||||
|
"update:modelValue": (value: boolean) => true;
|
||||||
|
"group:selected": (val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => true;
|
||||||
|
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||||
|
}, string, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}, {}, string, import("vue").SlotsType<Partial<{
|
||||||
|
default: (arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
filter: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vuetify/lib/util/defineComponent.mjs").FilterPropsOptions<{
|
||||||
|
theme: StringConstructor;
|
||||||
|
class: PropType<any>;
|
||||||
|
style: {
|
||||||
|
type: PropType<import("vue").StyleValue>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
density: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/density.mjs").Density>;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
};
|
||||||
|
elevation: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
validator(v: any): boolean;
|
||||||
|
};
|
||||||
|
rounded: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
tile: BooleanConstructor;
|
||||||
|
tag: Omit<{
|
||||||
|
type: PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: string;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: NonNullable<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
};
|
||||||
|
color: StringConstructor;
|
||||||
|
variant: Omit<{
|
||||||
|
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
};
|
||||||
|
value: null;
|
||||||
|
disabled: BooleanConstructor;
|
||||||
|
selectedClass: StringConstructor;
|
||||||
|
size: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
href: StringConstructor;
|
||||||
|
replace: BooleanConstructor;
|
||||||
|
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||||
|
exact: BooleanConstructor;
|
||||||
|
activeClass: StringConstructor;
|
||||||
|
appendAvatar: StringConstructor;
|
||||||
|
appendIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
baseColor: StringConstructor;
|
||||||
|
closable: BooleanConstructor;
|
||||||
|
closeIcon: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
closeLabel: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
draggable: BooleanConstructor;
|
||||||
|
filter: BooleanConstructor;
|
||||||
|
filterIcon: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
label: BooleanConstructor;
|
||||||
|
link: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
pill: BooleanConstructor;
|
||||||
|
prependAvatar: StringConstructor;
|
||||||
|
prependIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
ripple: {
|
||||||
|
type: PropType<boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined>;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
text: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||||
|
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||||
|
}, import("vue").ExtractPropTypes<{
|
||||||
|
theme: StringConstructor;
|
||||||
|
class: PropType<any>;
|
||||||
|
style: {
|
||||||
|
type: PropType<import("vue").StyleValue>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
density: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/density.mjs").Density>;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
};
|
||||||
|
elevation: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
validator(v: any): boolean;
|
||||||
|
};
|
||||||
|
rounded: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
tile: BooleanConstructor;
|
||||||
|
tag: Omit<{
|
||||||
|
type: PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: string;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: NonNullable<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
};
|
||||||
|
color: StringConstructor;
|
||||||
|
variant: Omit<{
|
||||||
|
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
};
|
||||||
|
value: null;
|
||||||
|
disabled: BooleanConstructor;
|
||||||
|
selectedClass: StringConstructor;
|
||||||
|
size: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
href: StringConstructor;
|
||||||
|
replace: BooleanConstructor;
|
||||||
|
to: PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||||
|
exact: BooleanConstructor;
|
||||||
|
activeClass: StringConstructor;
|
||||||
|
appendAvatar: StringConstructor;
|
||||||
|
appendIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
baseColor: StringConstructor;
|
||||||
|
closable: BooleanConstructor;
|
||||||
|
closeIcon: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
closeLabel: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
draggable: BooleanConstructor;
|
||||||
|
filter: BooleanConstructor;
|
||||||
|
filterIcon: {
|
||||||
|
type: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
label: BooleanConstructor;
|
||||||
|
link: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
pill: BooleanConstructor;
|
||||||
|
prependAvatar: StringConstructor;
|
||||||
|
prependIcon: PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
ripple: {
|
||||||
|
type: PropType<boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined>;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
text: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
onClick: PropType<(args_0: MouseEvent) => void>;
|
||||||
|
onClickOnce: PropType<(args_0: MouseEvent) => void>;
|
||||||
|
}>>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
18
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue.d.ts
vendored
Normal file
18
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTextoSimples.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["textoSimples"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["textoSimples"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
18
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts
vendored
Normal file
18
dist/types/componentes/EliTabela/celulas/EliTabelaCelulaTextoTruncado.vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["textoTruncado"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: PropType<TiposTabelaCelulas["textoTruncado"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
declare const _default: typeof __VLS_export;
|
||||||
|
export default _default;
|
||||||
744
dist/types/componentes/EliTabela/celulas/registryTabelaCelulas.d.ts
vendored
Normal file
744
dist/types/componentes/EliTabela/celulas/registryTabelaCelulas.d.ts
vendored
Normal file
|
|
@ -0,0 +1,744 @@
|
||||||
|
export declare const registryTabelaCelulas: {
|
||||||
|
readonly textoSimples: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoSimples"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoSimples"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
readonly textoTruncado: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["textoTruncado"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
readonly numero: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["numero"]>;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
numero: number;
|
||||||
|
prefixo?: string;
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
textoNumero: import("vue").ComputedRef<string>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["numero"]>;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
readonly tags: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["tags"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
} | undefined;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["tags"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {
|
||||||
|
VChip: {
|
||||||
|
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"click:close": (e: MouseEvent) => true;
|
||||||
|
"update:modelValue": (value: boolean) => true;
|
||||||
|
"group:selected": (val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => true;
|
||||||
|
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||||
|
}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}, true, {}, import("vue").SlotsType<Partial<{
|
||||||
|
default: (arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
filter: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||||
|
P: {};
|
||||||
|
B: {};
|
||||||
|
D: {};
|
||||||
|
C: {};
|
||||||
|
M: {};
|
||||||
|
Defaults: {};
|
||||||
|
}, {
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, {}, {}, {}, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}>;
|
||||||
|
__isFragment?: undefined;
|
||||||
|
__isTeleport?: undefined;
|
||||||
|
__isSuspense?: undefined;
|
||||||
|
} & import("vue").ComponentOptionsBase<{
|
||||||
|
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
};
|
||||||
|
modelValue: boolean;
|
||||||
|
} & {
|
||||||
|
theme?: string | undefined;
|
||||||
|
class?: any;
|
||||||
|
border?: string | number | boolean | undefined;
|
||||||
|
elevation?: string | number | undefined;
|
||||||
|
rounded?: string | number | boolean | undefined;
|
||||||
|
color?: string | undefined;
|
||||||
|
value?: any;
|
||||||
|
selectedClass?: string | undefined;
|
||||||
|
href?: string | undefined;
|
||||||
|
to?: string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric | undefined;
|
||||||
|
activeClass?: string | undefined;
|
||||||
|
appendAvatar?: string | undefined;
|
||||||
|
appendIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
baseColor?: string | undefined;
|
||||||
|
link?: boolean | undefined;
|
||||||
|
prependAvatar?: string | undefined;
|
||||||
|
prependIcon?: import("vuetify/lib/composables/icons.mjs").IconValue | undefined;
|
||||||
|
text?: string | number | boolean | undefined;
|
||||||
|
onClick?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
onClickOnce?: ((args_0: MouseEvent) => void) | undefined;
|
||||||
|
} & {
|
||||||
|
$children?: {
|
||||||
|
default?: ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | {
|
||||||
|
$stable?: boolean | undefined;
|
||||||
|
} | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | import("vue").VNodeChild;
|
||||||
|
"v-slots"?: {
|
||||||
|
default?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
label?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
prepend?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
append?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
close?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
filter?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} | undefined;
|
||||||
|
} & {
|
||||||
|
"v-slot:append"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:close"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:default"?: false | ((arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:filter"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:label"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
"v-slot:prepend"?: false | (() => import("vue").VNodeChild) | undefined;
|
||||||
|
} & {
|
||||||
|
onClick?: ((e: KeyboardEvent | MouseEvent) => any) | undefined;
|
||||||
|
"onClick:close"?: ((e: MouseEvent) => any) | undefined;
|
||||||
|
"onGroup:selected"?: ((val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => any) | undefined;
|
||||||
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
||||||
|
}, () => false | JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
"click:close": (e: MouseEvent) => true;
|
||||||
|
"update:modelValue": (value: boolean) => true;
|
||||||
|
"group:selected": (val: {
|
||||||
|
value: boolean;
|
||||||
|
}) => true;
|
||||||
|
click: (e: KeyboardEvent | MouseEvent) => true;
|
||||||
|
}, string, {
|
||||||
|
style: import("vue").StyleValue;
|
||||||
|
density: import("vuetify/lib/composables/density.mjs").Density;
|
||||||
|
rounded: string | number | boolean;
|
||||||
|
tile: boolean;
|
||||||
|
tag: string | import("vuetify/lib/types.mjs").JSXComponent;
|
||||||
|
variant: "elevated" | "flat" | "outlined" | "plain" | "text" | "tonal";
|
||||||
|
disabled: boolean;
|
||||||
|
size: string | number;
|
||||||
|
replace: boolean;
|
||||||
|
exact: boolean;
|
||||||
|
closable: boolean;
|
||||||
|
closeIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
closeLabel: string;
|
||||||
|
draggable: boolean;
|
||||||
|
filter: boolean;
|
||||||
|
filterIcon: import("vuetify/lib/composables/icons.mjs").IconValue;
|
||||||
|
label: boolean;
|
||||||
|
link: boolean;
|
||||||
|
pill: boolean;
|
||||||
|
ripple: boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined;
|
||||||
|
text: string | number | boolean;
|
||||||
|
modelValue: boolean;
|
||||||
|
}, {}, string, import("vue").SlotsType<Partial<{
|
||||||
|
default: (arg: {
|
||||||
|
isSelected: boolean | undefined;
|
||||||
|
selectedClass: boolean | (string | undefined)[] | undefined;
|
||||||
|
select: ((value: boolean) => void) | undefined;
|
||||||
|
toggle: (() => void) | undefined;
|
||||||
|
value: unknown;
|
||||||
|
disabled: boolean;
|
||||||
|
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
label: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
prepend: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
append: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
close: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
filter: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||||
|
[key: string]: any;
|
||||||
|
}>[];
|
||||||
|
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vuetify/lib/util/defineComponent.mjs").FilterPropsOptions<{
|
||||||
|
theme: StringConstructor;
|
||||||
|
class: import("vue").PropType<any>;
|
||||||
|
style: {
|
||||||
|
type: import("vue").PropType<import("vue").StyleValue>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
density: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/density.mjs").Density>;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
};
|
||||||
|
elevation: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
validator(v: any): boolean;
|
||||||
|
};
|
||||||
|
rounded: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
tile: BooleanConstructor;
|
||||||
|
tag: Omit<{
|
||||||
|
type: import("vue").PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: string;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: import("vue").PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: NonNullable<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
};
|
||||||
|
color: StringConstructor;
|
||||||
|
variant: Omit<{
|
||||||
|
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
};
|
||||||
|
value: null;
|
||||||
|
disabled: BooleanConstructor;
|
||||||
|
selectedClass: StringConstructor;
|
||||||
|
size: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
href: StringConstructor;
|
||||||
|
replace: BooleanConstructor;
|
||||||
|
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||||
|
exact: BooleanConstructor;
|
||||||
|
activeClass: StringConstructor;
|
||||||
|
appendAvatar: StringConstructor;
|
||||||
|
appendIcon: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
baseColor: StringConstructor;
|
||||||
|
closable: BooleanConstructor;
|
||||||
|
closeIcon: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
closeLabel: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
draggable: BooleanConstructor;
|
||||||
|
filter: BooleanConstructor;
|
||||||
|
filterIcon: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
label: BooleanConstructor;
|
||||||
|
link: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
pill: BooleanConstructor;
|
||||||
|
prependAvatar: StringConstructor;
|
||||||
|
prependIcon: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
ripple: {
|
||||||
|
type: import("vue").PropType<boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined>;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
text: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
onClick: import("vue").PropType<(args_0: MouseEvent) => void>;
|
||||||
|
onClickOnce: import("vue").PropType<(args_0: MouseEvent) => void>;
|
||||||
|
}, import("vue").ExtractPropTypes<{
|
||||||
|
theme: StringConstructor;
|
||||||
|
class: import("vue").PropType<any>;
|
||||||
|
style: {
|
||||||
|
type: import("vue").PropType<import("vue").StyleValue>;
|
||||||
|
default: null;
|
||||||
|
};
|
||||||
|
border: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
density: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/density.mjs").Density>;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
};
|
||||||
|
elevation: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
validator(v: any): boolean;
|
||||||
|
};
|
||||||
|
rounded: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
tile: BooleanConstructor;
|
||||||
|
tag: Omit<{
|
||||||
|
type: import("vue").PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: string;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: import("vue").PropType<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
default: NonNullable<string | import("vuetify/lib/types.mjs").JSXComponent>;
|
||||||
|
};
|
||||||
|
color: StringConstructor;
|
||||||
|
variant: Omit<{
|
||||||
|
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: string;
|
||||||
|
validator: (v: any) => boolean;
|
||||||
|
}, "default" | "type"> & {
|
||||||
|
type: import("vue").PropType<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
default: NonNullable<"elevated" | "flat" | "outlined" | "plain" | "text" | "tonal">;
|
||||||
|
};
|
||||||
|
value: null;
|
||||||
|
disabled: BooleanConstructor;
|
||||||
|
selectedClass: StringConstructor;
|
||||||
|
size: {
|
||||||
|
type: (NumberConstructor | StringConstructor)[];
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
href: StringConstructor;
|
||||||
|
replace: BooleanConstructor;
|
||||||
|
to: import("vue").PropType<string | import("vue-router").RouteLocationAsPathGeneric | import("vue-router").RouteLocationAsRelativeGeneric>;
|
||||||
|
exact: BooleanConstructor;
|
||||||
|
activeClass: StringConstructor;
|
||||||
|
appendAvatar: StringConstructor;
|
||||||
|
appendIcon: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
baseColor: StringConstructor;
|
||||||
|
closable: BooleanConstructor;
|
||||||
|
closeIcon: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
closeLabel: {
|
||||||
|
type: StringConstructor;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
draggable: BooleanConstructor;
|
||||||
|
filter: BooleanConstructor;
|
||||||
|
filterIcon: {
|
||||||
|
type: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
default: string;
|
||||||
|
};
|
||||||
|
label: BooleanConstructor;
|
||||||
|
link: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
pill: BooleanConstructor;
|
||||||
|
prependAvatar: StringConstructor;
|
||||||
|
prependIcon: import("vue").PropType<import("vuetify/lib/composables/icons.mjs").IconValue>;
|
||||||
|
ripple: {
|
||||||
|
type: import("vue").PropType<boolean | {
|
||||||
|
class?: string | undefined;
|
||||||
|
keys?: string[] | undefined;
|
||||||
|
} | undefined>;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
text: {
|
||||||
|
type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
|
||||||
|
default: undefined;
|
||||||
|
};
|
||||||
|
modelValue: {
|
||||||
|
type: BooleanConstructor;
|
||||||
|
default: boolean;
|
||||||
|
};
|
||||||
|
onClick: import("vue").PropType<(args_0: MouseEvent) => void>;
|
||||||
|
onClickOnce: import("vue").PropType<(args_0: MouseEvent) => void>;
|
||||||
|
}>>;
|
||||||
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
readonly data: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["data"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>, {
|
||||||
|
dados: {
|
||||||
|
valor: string;
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
acao?: () => void;
|
||||||
|
} | undefined;
|
||||||
|
textoData: import("vue").ComputedRef<string>;
|
||||||
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
dados: {
|
||||||
|
type: import("vue").PropType<import("./tiposTabelaCelulas").TiposTabelaCelulas["data"]>;
|
||||||
|
required: false;
|
||||||
|
};
|
||||||
|
}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
|
};
|
||||||
43
dist/types/componentes/EliTabela/celulas/tiposTabelaCelulas.d.ts
vendored
Normal file
43
dist/types/componentes/EliTabela/celulas/tiposTabelaCelulas.d.ts
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
/**
|
||||||
|
* Tipagem dos dados de entrada dos componentes de celulas
|
||||||
|
*/
|
||||||
|
import type { LucideIcon } from "lucide-vue-next";
|
||||||
|
export type TiposTabelaCelulas = {
|
||||||
|
textoSimples: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
textoTruncado: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
numero: {
|
||||||
|
numero: number;
|
||||||
|
/** Texto opcional exibido antes do número (ex.: "R$", "≈"). */
|
||||||
|
prefixo?: string;
|
||||||
|
/** Texto opcional exibido depois do número (ex.: "kg", "%"). */
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
tags: {
|
||||||
|
opcoes: {
|
||||||
|
/** Texto exibido dentro da tag. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Cor do chip (segue as cores do Vuetify, ex.: "primary", "success", "error"). */
|
||||||
|
cor?: string;
|
||||||
|
/** Ícone (Lucide) opcional exibido antes do rótulo. */
|
||||||
|
icone?: LucideIcon;
|
||||||
|
/** Ação opcional da tag. Quando existir, o chip vira clicável. */
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
data: {
|
||||||
|
/** Valor em ISO 8601 (ex.: "2026-01-09T16:15:00Z"). */
|
||||||
|
valor: string;
|
||||||
|
/** Define o formato de exibição. */
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
/** Ação opcional ao clicar no valor. */
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
export type TipoTabelaCelula = keyof TiposTabelaCelulas;
|
||||||
10
dist/types/componentes/EliTabela/colunasStorage.d.ts
vendored
Normal file
10
dist/types/componentes/EliTabela/colunasStorage.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
export type EliTabelaColunasConfig = {
|
||||||
|
/** Rotulos das colunas visiveis (em ordem). */
|
||||||
|
visiveis: string[];
|
||||||
|
/** Rotulos das colunas invisiveis. */
|
||||||
|
invisiveis: string[];
|
||||||
|
};
|
||||||
|
export declare function storageKeyColunas(nomeTabela: string): string;
|
||||||
|
export declare function carregarConfigColunas(nomeTabela: string): EliTabelaColunasConfig;
|
||||||
|
export declare function salvarConfigColunas(nomeTabela: string, config: EliTabelaColunasConfig): void;
|
||||||
|
export declare function limparConfigColunas(nomeTabela: string): void;
|
||||||
7
dist/types/componentes/EliTabela/filtroAvancadoStorage.d.ts
vendored
Normal file
7
dist/types/componentes/EliTabela/filtroAvancadoStorage.d.ts
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export type EliTabelaFiltroAvancadoSalvo<T> = Array<{
|
||||||
|
coluna: keyof T;
|
||||||
|
valor: any;
|
||||||
|
}>;
|
||||||
|
export declare function carregarFiltroAvancado<T>(nomeTabela: string): EliTabelaFiltroAvancadoSalvo<T>;
|
||||||
|
export declare function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFiltroAvancadoSalvo<T>): void;
|
||||||
|
export declare function limparFiltroAvancado(nomeTabela: string): void;
|
||||||
4
dist/types/componentes/EliTabela/index.d.ts
vendored
Normal file
4
dist/types/componentes/EliTabela/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
export { default as EliTabela } from "./EliTabela.vue";
|
||||||
|
export * from "./types-eli-tabela";
|
||||||
|
export * from "./celulas/tiposTabelaCelulas";
|
||||||
|
export { celulaTabela } from "./types-eli-tabela";
|
||||||
107
dist/types/componentes/EliTabela/types-eli-tabela.d.ts
vendored
Normal file
107
dist/types/componentes/EliTabela/types-eli-tabela.d.ts
vendored
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
import type { tipoResposta } from "p-respostas";
|
||||||
|
import type { LucideIcon } from "lucide-vue-next";
|
||||||
|
import type { TipoTabelaCelula, TiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
|
||||||
|
import { operadores, zFiltro } from "p-comuns";
|
||||||
|
import { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||||
|
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>;
|
||||||
|
export type ComponenteCelulaBase<T extends TipoTabelaCelula> = readonly [T, TiposTabelaCelulas[T]];
|
||||||
|
export type ComponenteCelula = {
|
||||||
|
[K in TipoTabelaCelula]: ComponenteCelulaBase<K>;
|
||||||
|
}[TipoTabelaCelula];
|
||||||
|
export declare const celulaTabela: <T extends TipoTabelaCelula>(tipo: T, dados: TiposTabelaCelulas[T]) => ComponenteCelulaBase<T>;
|
||||||
|
export type { TipoTabelaCelula, TiposTabelaCelulas };
|
||||||
|
export type EliColuna<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;
|
||||||
|
/** Ação opcional disparada ao clicar na célula. */
|
||||||
|
/**
|
||||||
|
* Campo de ordenação associado à coluna. Caso informado, a coluna passa a
|
||||||
|
* exibir controles de ordenação e utiliza o valor como chave para o backend.
|
||||||
|
*/
|
||||||
|
coluna_ordem?: keyof T;
|
||||||
|
/**
|
||||||
|
* indica que a coluna será visivel, se false incia em detalhe
|
||||||
|
* Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
|
||||||
|
*/
|
||||||
|
visivel: boolean;
|
||||||
|
};
|
||||||
|
export type EliConsultaPaginada<T> = {
|
||||||
|
/** Registros retornados na consulta. */
|
||||||
|
valores: T[];
|
||||||
|
/** Total de registros disponíveis no backend. */
|
||||||
|
quantidade: number;
|
||||||
|
};
|
||||||
|
export type EliTabelaAcao<T> = {
|
||||||
|
/** Ícone (Lucide) exibido para representar a ação. */
|
||||||
|
icone: LucideIcon;
|
||||||
|
/** Cor aplicada ao ícone e rótulo. */
|
||||||
|
cor: string;
|
||||||
|
/** Texto descritivo da ação. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Função executada quando o usuário ativa a ação. */
|
||||||
|
acao: (linha: T) => void;
|
||||||
|
/**
|
||||||
|
* Define se a ação deve ser exibida para a linha. Pode ser um booleano fixo
|
||||||
|
* ou uma função (sincrona/assíncrona) que recebe a linha para decisão dinâmica.
|
||||||
|
*/
|
||||||
|
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean);
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* Estrutura de dados para uma tabela alimentada por uma consulta.
|
||||||
|
*
|
||||||
|
* - `colunas`: definição de colunas e como renderizar cada célula
|
||||||
|
* - `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> = {
|
||||||
|
/** 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>[];
|
||||||
|
/** Quantidade de registros solicitados por consulta (padrão `10`). */
|
||||||
|
registros_por_consulta?: number;
|
||||||
|
/**
|
||||||
|
* Função responsável por buscar os dados. Recebe parâmetros opcionais de
|
||||||
|
* ordenação (`coluna_ordem`/`direcao_ordem`) e paginação (`offSet`/`limit`).
|
||||||
|
*/
|
||||||
|
consulta: (parametrosConsulta?: {
|
||||||
|
filtros?: tipoFiltro[];
|
||||||
|
coluna_ordem?: keyof T;
|
||||||
|
direcao_ordem?: "asc" | "desc";
|
||||||
|
offSet?: number;
|
||||||
|
limit?: number;
|
||||||
|
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||||
|
texto_busca?: string;
|
||||||
|
}) => Promise<tipoResposta<EliConsultaPaginada<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>[];
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
acoesTabela?: {
|
||||||
|
/** Ícone (Lucide) exibido no botão */
|
||||||
|
icone?: LucideIcon;
|
||||||
|
/** Cor aplicada ao botão. */
|
||||||
|
cor?: string;
|
||||||
|
/** Texto descritivo da ação. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Função executada ao clicar no botão. */
|
||||||
|
acao: () => void;
|
||||||
|
}[];
|
||||||
|
/** configuração para aplicação dos filtros padrões */
|
||||||
|
filtroAvancado?: {
|
||||||
|
rotulo: string;
|
||||||
|
coluna: keyof T;
|
||||||
|
operador: operadores | keyof typeof operadores;
|
||||||
|
entrada: ComponenteEntrada;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
146
dist/types/componentes/campo/EliInput.vue.d.ts
vendored
146
dist/types/componentes/campo/EliInput.vue.d.ts
vendored
|
|
@ -1,146 +0,0 @@
|
||||||
import { PropType } from "vue";
|
|
||||||
import type { CampoDensidade, CampoOpcao, CampoOpcaoBruta, CampoTipo, CampoValor, CampoValorMultiplo, CampoVariante } from "../../tipos";
|
|
||||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
||||||
/**
|
|
||||||
* Aceita valor simples (text-like) ou lista de valores (checkbox/select multiple).
|
|
||||||
* O componente não converte tipos automaticamente: mantém o que receber.
|
|
||||||
*/
|
|
||||||
modelValue: {
|
|
||||||
type: PropType<CampoValor | CampoValorMultiplo>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
type: {
|
|
||||||
type: PropType<CampoTipo>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
label: StringConstructor;
|
|
||||||
placeholder: StringConstructor;
|
|
||||||
disabled: BooleanConstructor;
|
|
||||||
error: BooleanConstructor;
|
|
||||||
errorMessages: {
|
|
||||||
type: PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
hint: StringConstructor;
|
|
||||||
persistentHint: BooleanConstructor;
|
|
||||||
rows: {
|
|
||||||
type: NumberConstructor;
|
|
||||||
default: number;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Para select/radio/checkbox.
|
|
||||||
* Aceita lista já normalizada ({ label, value }) ou valores primitivos.
|
|
||||||
*/
|
|
||||||
options: {
|
|
||||||
type: PropType<Array<CampoOpcaoBruta>>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
clearable: BooleanConstructor;
|
|
||||||
variant: {
|
|
||||||
type: PropType<CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
density: {
|
|
||||||
type: PropType<CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
color: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
row: BooleanConstructor;
|
|
||||||
showPasswordToggle: BooleanConstructor;
|
|
||||||
multiple: BooleanConstructor;
|
|
||||||
chips: BooleanConstructor;
|
|
||||||
}>, {
|
|
||||||
attrs: {
|
|
||||||
[x: string]: unknown;
|
|
||||||
};
|
|
||||||
value: import("vue").WritableComputedRef<CampoValor | CampoValorMultiplo, CampoValor | CampoValorMultiplo>;
|
|
||||||
isTextLike: import("vue").ComputedRef<boolean>;
|
|
||||||
inputHtmlType: import("vue").ComputedRef<"text" | "password">;
|
|
||||||
inputMode: import("vue").ComputedRef<"tel" | "decimal" | "numeric" | undefined>;
|
|
||||||
internalColor: import("vue").ComputedRef<string | undefined>;
|
|
||||||
showPassword: import("vue").Ref<boolean, boolean>;
|
|
||||||
togglePassword: () => void;
|
|
||||||
onInput: (e: Event) => void;
|
|
||||||
onFocus: () => void;
|
|
||||||
onBlur: () => void;
|
|
||||||
computedItems: import("vue").ComputedRef<CampoOpcao[]>;
|
|
||||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
||||||
/**
|
|
||||||
* Aceita valor simples (text-like) ou lista de valores (checkbox/select multiple).
|
|
||||||
* O componente não converte tipos automaticamente: mantém o que receber.
|
|
||||||
*/
|
|
||||||
modelValue: {
|
|
||||||
type: PropType<CampoValor | CampoValorMultiplo>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
type: {
|
|
||||||
type: PropType<CampoTipo>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
label: StringConstructor;
|
|
||||||
placeholder: StringConstructor;
|
|
||||||
disabled: BooleanConstructor;
|
|
||||||
error: BooleanConstructor;
|
|
||||||
errorMessages: {
|
|
||||||
type: PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
hint: StringConstructor;
|
|
||||||
persistentHint: BooleanConstructor;
|
|
||||||
rows: {
|
|
||||||
type: NumberConstructor;
|
|
||||||
default: number;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Para select/radio/checkbox.
|
|
||||||
* Aceita lista já normalizada ({ label, value }) ou valores primitivos.
|
|
||||||
*/
|
|
||||||
options: {
|
|
||||||
type: PropType<Array<CampoOpcaoBruta>>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
clearable: BooleanConstructor;
|
|
||||||
variant: {
|
|
||||||
type: PropType<CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
density: {
|
|
||||||
type: PropType<CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
color: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
row: BooleanConstructor;
|
|
||||||
showPasswordToggle: BooleanConstructor;
|
|
||||||
multiple: BooleanConstructor;
|
|
||||||
chips: BooleanConstructor;
|
|
||||||
}>> & Readonly<{
|
|
||||||
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
||||||
onChange?: ((...args: any[]) => any) | undefined;
|
|
||||||
onFocus?: ((...args: any[]) => any) | undefined;
|
|
||||||
onBlur?: ((...args: any[]) => any) | undefined;
|
|
||||||
}>, {
|
|
||||||
color: string;
|
|
||||||
type: CampoTipo;
|
|
||||||
variant: CampoVariante;
|
|
||||||
disabled: boolean;
|
|
||||||
error: boolean;
|
|
||||||
persistentHint: boolean;
|
|
||||||
clearable: boolean;
|
|
||||||
row: boolean;
|
|
||||||
showPasswordToggle: boolean;
|
|
||||||
multiple: boolean;
|
|
||||||
chips: boolean;
|
|
||||||
modelValue: CampoValor | CampoValorMultiplo;
|
|
||||||
errorMessages: string | string[];
|
|
||||||
rows: number;
|
|
||||||
options: CampoOpcaoBruta[];
|
|
||||||
density: CampoDensidade;
|
|
||||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
||||||
declare const _default: typeof __VLS_export;
|
|
||||||
export default _default;
|
|
||||||
1
dist/types/componentes/campo/index.d.ts
vendored
1
dist/types/componentes/campo/index.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
export { default as EliInput } from "./EliInput.vue";
|
|
||||||
1
dist/types/componentes/campo/utils/cep.d.ts
vendored
1
dist/types/componentes/campo/utils/cep.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
export declare function formatarCep(v: string): string;
|
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
export declare function somenteNumeros(valor: string): string;
|
|
||||||
export declare function formatarDecimal(valor: string): string;
|
|
||||||
/**
|
|
||||||
* Formatação para percentual:
|
|
||||||
* - remove '%' caso venha junto (ex: colar "10%")
|
|
||||||
* - mantém apenas dígitos e vírgula (no máximo uma)
|
|
||||||
*/
|
|
||||||
export declare function formatarPorcentagem(valor: string): string;
|
|
||||||
export declare function formatarMoeda(valor: string): string;
|
|
||||||
|
|
@ -22,7 +22,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
|
||||||
};
|
};
|
||||||
}>, {
|
}>, {
|
||||||
rotuloStatus: import("vue").ComputedRef<CartaoStatus>;
|
rotuloStatus: import("vue").ComputedRef<CartaoStatus>;
|
||||||
corStatus: import("vue").ComputedRef<"primary" | "error" | "secondary" | "success">;
|
corStatus: import("vue").ComputedRef<"primary" | "secondary" | "success" | "error">;
|
||||||
classeStatus: import("vue").ComputedRef<string>;
|
classeStatus: import("vue").ComputedRef<string>;
|
||||||
onClick: () => void;
|
onClick: () => void;
|
||||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
|
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
import { PropType } from "vue";
|
|
||||||
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
|
||||||
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
||||||
/**
|
|
||||||
* Valor em ISO 8601:
|
|
||||||
* - com offset (ex.: `2026-01-09T13:15:00-03:00`)
|
|
||||||
* - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`)
|
|
||||||
*/
|
|
||||||
modelValue: {
|
|
||||||
type: PropType<string | null>;
|
|
||||||
default: null;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Define o tipo de entrada.
|
|
||||||
* - `dataHora`: usa `datetime-local`
|
|
||||||
* - `data`: usa `date`
|
|
||||||
*/
|
|
||||||
modo: {
|
|
||||||
type: PropType<"data" | "dataHora">;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Rótulo exibido no v-text-field (Vuetify). */
|
|
||||||
rotulo: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Placeholder do input. */
|
|
||||||
placeholder: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Desabilita a interação. */
|
|
||||||
desabilitado: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
|
||||||
limpavel: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Estado de erro (visual). */
|
|
||||||
erro: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Mensagens de erro. */
|
|
||||||
mensagensErro: {
|
|
||||||
type: PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
/** Texto de apoio. */
|
|
||||||
dica: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Mantém a dica sempre visível. */
|
|
||||||
dicaPersistente: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Densidade do campo (Vuetify). */
|
|
||||||
densidade: {
|
|
||||||
type: PropType<CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Variante do v-text-field (Vuetify). */
|
|
||||||
variante: {
|
|
||||||
type: PropType<CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Valor mínimo permitido.
|
|
||||||
* ISO 8601 (offset ou `Z`).
|
|
||||||
*/
|
|
||||||
min: {
|
|
||||||
type: PropType<string | undefined>;
|
|
||||||
default: undefined;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Valor máximo permitido.
|
|
||||||
* ISO 8601 (offset ou `Z`).
|
|
||||||
*/
|
|
||||||
max: {
|
|
||||||
type: PropType<string | undefined>;
|
|
||||||
default: undefined;
|
|
||||||
};
|
|
||||||
}>, {
|
|
||||||
attrs: {
|
|
||||||
[x: string]: unknown;
|
|
||||||
};
|
|
||||||
valor: import("vue").WritableComputedRef<string, string>;
|
|
||||||
emit: ((event: "update:modelValue", _valor: string | null) => void) & ((event: "alterar", _valor: string | null) => void) & ((event: "foco") => void) & ((event: "desfoco") => void);
|
|
||||||
minLocal: import("vue").ComputedRef<string | undefined>;
|
|
||||||
maxLocal: import("vue").ComputedRef<string | undefined>;
|
|
||||||
tipoInput: import("vue").ComputedRef<"date" | "datetime-local">;
|
|
||||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
||||||
/** v-model padrão. */
|
|
||||||
"update:modelValue": (_valor: string | null) => true;
|
|
||||||
/** Alias para consumidores que querem um evento semântico. */
|
|
||||||
alterar: (_valor: string | null) => true;
|
|
||||||
foco: () => true;
|
|
||||||
desfoco: () => true;
|
|
||||||
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
||||||
/**
|
|
||||||
* Valor em ISO 8601:
|
|
||||||
* - com offset (ex.: `2026-01-09T13:15:00-03:00`)
|
|
||||||
* - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`)
|
|
||||||
*/
|
|
||||||
modelValue: {
|
|
||||||
type: PropType<string | null>;
|
|
||||||
default: null;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Define o tipo de entrada.
|
|
||||||
* - `dataHora`: usa `datetime-local`
|
|
||||||
* - `data`: usa `date`
|
|
||||||
*/
|
|
||||||
modo: {
|
|
||||||
type: PropType<"data" | "dataHora">;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Rótulo exibido no v-text-field (Vuetify). */
|
|
||||||
rotulo: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Placeholder do input. */
|
|
||||||
placeholder: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Desabilita a interação. */
|
|
||||||
desabilitado: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
|
||||||
limpavel: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Estado de erro (visual). */
|
|
||||||
erro: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Mensagens de erro. */
|
|
||||||
mensagensErro: {
|
|
||||||
type: PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
/** Texto de apoio. */
|
|
||||||
dica: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Mantém a dica sempre visível. */
|
|
||||||
dicaPersistente: {
|
|
||||||
type: BooleanConstructor;
|
|
||||||
default: boolean;
|
|
||||||
};
|
|
||||||
/** Densidade do campo (Vuetify). */
|
|
||||||
densidade: {
|
|
||||||
type: PropType<CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/** Variante do v-text-field (Vuetify). */
|
|
||||||
variante: {
|
|
||||||
type: PropType<CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Valor mínimo permitido.
|
|
||||||
* ISO 8601 (offset ou `Z`).
|
|
||||||
*/
|
|
||||||
min: {
|
|
||||||
type: PropType<string | undefined>;
|
|
||||||
default: undefined;
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* Valor máximo permitido.
|
|
||||||
* ISO 8601 (offset ou `Z`).
|
|
||||||
*/
|
|
||||||
max: {
|
|
||||||
type: PropType<string | undefined>;
|
|
||||||
default: undefined;
|
|
||||||
};
|
|
||||||
}>> & Readonly<{
|
|
||||||
"onUpdate:modelValue"?: ((_valor: string | null) => any) | undefined;
|
|
||||||
onAlterar?: ((_valor: string | null) => any) | undefined;
|
|
||||||
onFoco?: (() => any) | undefined;
|
|
||||||
onDesfoco?: (() => any) | undefined;
|
|
||||||
}>, {
|
|
||||||
placeholder: string;
|
|
||||||
modelValue: string | null;
|
|
||||||
modo: "data" | "dataHora";
|
|
||||||
rotulo: string;
|
|
||||||
desabilitado: boolean;
|
|
||||||
limpavel: boolean;
|
|
||||||
erro: boolean;
|
|
||||||
mensagensErro: string | string[];
|
|
||||||
dica: string;
|
|
||||||
dicaPersistente: boolean;
|
|
||||||
densidade: CampoDensidade;
|
|
||||||
variante: CampoVariante;
|
|
||||||
min: string | undefined;
|
|
||||||
max: string | undefined;
|
|
||||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
||||||
/**
|
|
||||||
* EliDataHora
|
|
||||||
*
|
|
||||||
* Campo para entrada de data + hora.
|
|
||||||
*
|
|
||||||
* Modelo:
|
|
||||||
* - O componente **recebe** `modelValue` em ISO 8601 (UTC `Z` ou com offset)
|
|
||||||
* - Converte para horário local para exibir (`date` ou `datetime-local`)
|
|
||||||
* - Ao editar, **emite** ISO 8601 com o **offset local**
|
|
||||||
*/
|
|
||||||
declare const _default: typeof __VLS_export;
|
|
||||||
export default _default;
|
|
||||||
1
dist/types/componentes/data_hora/index.d.ts
vendored
1
dist/types/componentes/data_hora/index.d.ts
vendored
|
|
@ -1 +0,0 @@
|
||||||
export { default as EliDataHora } from "./EliDataHora.vue";
|
|
||||||
|
|
@ -1,18 +1,9 @@
|
||||||
type Habilidade = "vue" | "react";
|
|
||||||
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
||||||
nome: import("vue").Ref<string, string>;
|
nome: import("vue").Ref<string, string>;
|
||||||
email: import("vue").Ref<string, string>;
|
email: import("vue").Ref<string, string>;
|
||||||
documento: import("vue").Ref<string, string>;
|
documento: import("vue").Ref<string, string>;
|
||||||
estado: import("vue").Ref<string[], string[]>;
|
|
||||||
telefone: import("vue").Ref<string, string>;
|
telefone: import("vue").Ref<string, string>;
|
||||||
mensagem: import("vue").Ref<string, string>;
|
|
||||||
senha: import("vue").Ref<string, string>;
|
|
||||||
cor: import("vue").Ref<"azul" | "verde" | null, "azul" | "verde" | null>;
|
|
||||||
habilidades: import("vue").Ref<Habilidade[], Habilidade[]>;
|
|
||||||
idade: import("vue").Ref<string, string>;
|
|
||||||
altura: import("vue").Ref<string, string>;
|
|
||||||
cep: import("vue").Ref<string, string>;
|
cep: import("vue").Ref<string, string>;
|
||||||
valor: import("vue").Ref<string, string>;
|
|
||||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {
|
||||||
EliBotao: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
EliBotao: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
color: {
|
color: {
|
||||||
|
|
@ -144,131 +135,59 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {
|
||||||
badge: string | number | undefined;
|
badge: string | number | undefined;
|
||||||
radius: import("../../tipos/indicador.js").IndicadorPresetRaio | import("../../tipos/indicador.js").CssLength;
|
radius: import("../../tipos/indicador.js").IndicadorPresetRaio | import("../../tipos/indicador.js").CssLength;
|
||||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
EliInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
EliEntradaTexto: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
||||||
modelValue: {
|
value: {
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo>;
|
type: import("vue").PropType<string | null | undefined>;
|
||||||
default: string;
|
default: undefined;
|
||||||
};
|
};
|
||||||
type: {
|
opcoes: {
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoTipo>;
|
type: import("vue").PropType<{
|
||||||
default: string;
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
};
|
};
|
||||||
label: StringConstructor;
|
|
||||||
placeholder: StringConstructor;
|
|
||||||
disabled: BooleanConstructor;
|
|
||||||
error: BooleanConstructor;
|
|
||||||
errorMessages: {
|
|
||||||
type: import("vue").PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
hint: StringConstructor;
|
|
||||||
persistentHint: BooleanConstructor;
|
|
||||||
rows: {
|
|
||||||
type: NumberConstructor;
|
|
||||||
default: number;
|
|
||||||
};
|
|
||||||
options: {
|
|
||||||
type: import("vue").PropType<Array<import("../../tipos/campo.js").CampoOpcaoBruta>>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
clearable: BooleanConstructor;
|
|
||||||
variant: {
|
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
density: {
|
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
color: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
row: BooleanConstructor;
|
|
||||||
showPasswordToggle: BooleanConstructor;
|
|
||||||
multiple: BooleanConstructor;
|
|
||||||
chips: BooleanConstructor;
|
|
||||||
}>, {
|
}>, {
|
||||||
attrs: {
|
attrs: {
|
||||||
[x: string]: unknown;
|
[x: string]: unknown;
|
||||||
};
|
};
|
||||||
value: import("vue").WritableComputedRef<import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo, import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo>;
|
emit: ((event: "update:value", _v: string | null | undefined) => void) & ((event: "input", _v: string | null | undefined) => void) & ((event: "change", _v: string | null | undefined) => void) & ((event: "focus") => void) & ((event: "blur") => void);
|
||||||
isTextLike: import("vue").ComputedRef<boolean>;
|
localValue: import("vue").WritableComputedRef<string | null | undefined, string | null | undefined>;
|
||||||
inputHtmlType: import("vue").ComputedRef<"text" | "password">;
|
inputHtmlType: import("vue").ComputedRef<"text" | "email" | "url">;
|
||||||
inputMode: import("vue").ComputedRef<"tel" | "decimal" | "numeric" | undefined>;
|
inputMode: import("vue").ComputedRef<string | undefined>;
|
||||||
internalColor: import("vue").ComputedRef<string | undefined>;
|
|
||||||
showPassword: import("vue").Ref<boolean, boolean>;
|
|
||||||
togglePassword: () => void;
|
|
||||||
onInput: (e: Event) => void;
|
onInput: (e: Event) => void;
|
||||||
onFocus: () => void;
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
||||||
onBlur: () => void;
|
"update:value": (_v: string | null | undefined) => true;
|
||||||
computedItems: import("vue").ComputedRef<import("../../tipos/campo.js").CampoOpcao[]>;
|
input: (_v: string | null | undefined) => true;
|
||||||
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change" | "focus" | "blur")[], "update:modelValue" | "change" | "focus" | "blur", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
change: (_v: string | null | undefined) => true;
|
||||||
modelValue: {
|
focus: () => true;
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo>;
|
blur: () => true;
|
||||||
default: string;
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
||||||
|
value: {
|
||||||
|
type: import("vue").PropType<string | null | undefined>;
|
||||||
|
default: undefined;
|
||||||
};
|
};
|
||||||
type: {
|
opcoes: {
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoTipo>;
|
type: import("vue").PropType<{
|
||||||
default: string;
|
rotulo: string;
|
||||||
|
placeholder?: string;
|
||||||
|
} & {
|
||||||
|
limiteCaracteres?: number;
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep";
|
||||||
|
}>;
|
||||||
|
required: true;
|
||||||
};
|
};
|
||||||
label: StringConstructor;
|
|
||||||
placeholder: StringConstructor;
|
|
||||||
disabled: BooleanConstructor;
|
|
||||||
error: BooleanConstructor;
|
|
||||||
errorMessages: {
|
|
||||||
type: import("vue").PropType<string | string[]>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
hint: StringConstructor;
|
|
||||||
persistentHint: BooleanConstructor;
|
|
||||||
rows: {
|
|
||||||
type: NumberConstructor;
|
|
||||||
default: number;
|
|
||||||
};
|
|
||||||
options: {
|
|
||||||
type: import("vue").PropType<Array<import("../../tipos/campo.js").CampoOpcaoBruta>>;
|
|
||||||
default: () => never[];
|
|
||||||
};
|
|
||||||
clearable: BooleanConstructor;
|
|
||||||
variant: {
|
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoVariante>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
density: {
|
|
||||||
type: import("vue").PropType<import("../../tipos/campo.js").CampoDensidade>;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
color: {
|
|
||||||
type: StringConstructor;
|
|
||||||
default: string;
|
|
||||||
};
|
|
||||||
row: BooleanConstructor;
|
|
||||||
showPasswordToggle: BooleanConstructor;
|
|
||||||
multiple: BooleanConstructor;
|
|
||||||
chips: BooleanConstructor;
|
|
||||||
}>> & Readonly<{
|
}>> & Readonly<{
|
||||||
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
"onUpdate:value"?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
onChange?: ((...args: any[]) => any) | undefined;
|
onInput?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
onFocus?: ((...args: any[]) => any) | undefined;
|
onChange?: ((_v: string | null | undefined) => any) | undefined;
|
||||||
onBlur?: ((...args: any[]) => any) | undefined;
|
onFocus?: (() => any) | undefined;
|
||||||
|
onBlur?: (() => any) | undefined;
|
||||||
}>, {
|
}>, {
|
||||||
color: string;
|
value: string | null | undefined;
|
||||||
type: import("../../tipos/campo.js").CampoTipo;
|
|
||||||
variant: import("../../tipos/campo.js").CampoVariante;
|
|
||||||
disabled: boolean;
|
|
||||||
error: boolean;
|
|
||||||
persistentHint: boolean;
|
|
||||||
clearable: boolean;
|
|
||||||
row: boolean;
|
|
||||||
showPasswordToggle: boolean;
|
|
||||||
multiple: boolean;
|
|
||||||
chips: boolean;
|
|
||||||
modelValue: import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo;
|
|
||||||
errorMessages: string | string[];
|
|
||||||
rows: number;
|
|
||||||
options: import("../../tipos/campo.js").CampoOpcaoBruta[];
|
|
||||||
density: import("../../tipos/campo.js").CampoDensidade;
|
|
||||||
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
||||||
declare const _default: typeof __VLS_export;
|
declare const _default: typeof __VLS_export;
|
||||||
|
|
|
||||||
1
dist/types/constantes.d.ts
vendored
Normal file
1
dist/types/constantes.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export declare const gif_quero_quero = "https://paiol.idz.one/estaticos/quero-quero.gif";
|
||||||
9
dist/types/index.d.ts
vendored
9
dist/types/index.d.ts
vendored
|
|
@ -1,15 +1,16 @@
|
||||||
import type { Plugin } from "vue";
|
import type { Plugin } from "vue";
|
||||||
|
import "./styles/eli-vue-fonts.css";
|
||||||
import { EliOlaMundo } from "./componentes/ola_mundo";
|
import { EliOlaMundo } from "./componentes/ola_mundo";
|
||||||
import { EliBotao } from "./componentes/botao";
|
import { EliBotao } from "./componentes/botao";
|
||||||
import { EliBadge } from "./componentes/indicador";
|
import { EliBadge } from "./componentes/indicador";
|
||||||
import { EliInput } from "./componentes/campo";
|
|
||||||
import { EliCartao } from "./componentes/cartao";
|
import { EliCartao } from "./componentes/cartao";
|
||||||
import { EliDataHora } from "./componentes/data_hora";
|
import { EliTabela } from "./componentes/EliTabela";
|
||||||
|
import { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao } from "./componentes/EliEntrada";
|
||||||
export { EliOlaMundo };
|
export { EliOlaMundo };
|
||||||
export { EliBotao };
|
export { EliBotao };
|
||||||
export { EliBadge };
|
export { EliBadge };
|
||||||
export { EliInput };
|
|
||||||
export { EliCartao };
|
export { EliCartao };
|
||||||
export { EliDataHora };
|
export { EliTabela };
|
||||||
|
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao };
|
||||||
declare const EliVue: Plugin;
|
declare const EliVue: Plugin;
|
||||||
export default EliVue;
|
export default EliVue;
|
||||||
|
|
|
||||||
19
dist/types/tipos/campo.d.ts
vendored
19
dist/types/tipos/campo.d.ts
vendored
|
|
@ -1,19 +0,0 @@
|
||||||
/**
|
|
||||||
* Tipos do componente EliInput (campo).
|
|
||||||
*/
|
|
||||||
export type CampoValor = string | number | boolean | null;
|
|
||||||
export type CampoValorMultiplo = CampoValor[];
|
|
||||||
export type CampoOpcao<TValor extends CampoValor = CampoValor> = {
|
|
||||||
label: string;
|
|
||||||
value: TValor;
|
|
||||||
disabled?: boolean;
|
|
||||||
};
|
|
||||||
export type CampoOpcaoBruta<TValor extends CampoValor = CampoValor> = TValor | {
|
|
||||||
label?: string;
|
|
||||||
value: TValor;
|
|
||||||
disabled?: boolean;
|
|
||||||
};
|
|
||||||
export type CampoVariante = "outlined" | "filled" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
|
||||||
export type CampoDensidade = "default" | "comfortable" | "compact";
|
|
||||||
export type CampoTipoNumerico = "numericoInteiro" | "numericoDecimal" | "numericoMoeda" | "porcentagem";
|
|
||||||
export type CampoTipo = "text" | "password" | "email" | "search" | "url" | "textarea" | "radio" | "checkbox" | "telefone" | "cpfCnpj" | "cep" | "select" | CampoTipoNumerico;
|
|
||||||
9
dist/types/tipos/entrada.d.ts
vendored
Normal file
9
dist/types/tipos/entrada.d.ts
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
/**
|
||||||
|
* Tipos compartilhados para componentes de entrada (EliEntrada*).
|
||||||
|
*
|
||||||
|
* OBS: Estes tipos existiam anteriormente em `tipos/campo.ts` junto do componente
|
||||||
|
* `EliInput`. Como o `EliInput` foi removido, mantemos aqui apenas o que ainda
|
||||||
|
* é relevante para padronização visual/props do Vuetify.
|
||||||
|
*/
|
||||||
|
export type CampoVariante = "outlined" | "filled" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
|
||||||
|
export type CampoDensidade = "default" | "comfortable" | "compact";
|
||||||
2
dist/types/tipos/index.d.ts
vendored
2
dist/types/tipos/index.d.ts
vendored
|
|
@ -1,4 +1,4 @@
|
||||||
export * from "./botao";
|
export * from "./botao";
|
||||||
export * from "./cartao";
|
export * from "./cartao";
|
||||||
export * from "./campo";
|
export * from "./entrada";
|
||||||
export * from "./indicador";
|
export * from "./indicador";
|
||||||
|
|
|
||||||
10
package.json
10
package.json
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "eli-vue",
|
"name": "eli-vue",
|
||||||
"version": "0.1.19",
|
"version": "0.1.82",
|
||||||
"private": false,
|
"private": false,
|
||||||
"main": "./dist/eli-vue.umd.js",
|
"main": "./dist/eli-vue.umd.js",
|
||||||
"module": "./dist/eli-vue.es.js",
|
"module": "./dist/eli-vue.es.js",
|
||||||
|
|
@ -35,6 +35,12 @@
|
||||||
"vuetify": "^3.11.2"
|
"vuetify": "^3.11.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dayjs": "^1.11.19"
|
"cross-fetch": "^4.1.0",
|
||||||
|
"dayjs": "^1.11.19",
|
||||||
|
"lucide-vue-next": "^0.563.0",
|
||||||
|
"p-comuns": "git+https://git2.idz.one/publico/_comuns.git",
|
||||||
|
"p-respostas": "git+https://git2.idz.one/publico/_respostas.git",
|
||||||
|
"uuid": "^13.0.0",
|
||||||
|
"zod": "^4.3.6"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
120
pnpm-lock.yaml
generated
120
pnpm-lock.yaml
generated
|
|
@ -8,9 +8,27 @@ importers:
|
||||||
|
|
||||||
.:
|
.:
|
||||||
dependencies:
|
dependencies:
|
||||||
|
cross-fetch:
|
||||||
|
specifier: ^4.1.0
|
||||||
|
version: 4.1.0
|
||||||
dayjs:
|
dayjs:
|
||||||
specifier: ^1.11.19
|
specifier: ^1.11.19
|
||||||
version: 1.11.19
|
version: 1.11.19
|
||||||
|
lucide-vue-next:
|
||||||
|
specifier: ^0.563.0
|
||||||
|
version: 0.563.0(vue@3.5.25(typescript@5.9.3))
|
||||||
|
p-comuns:
|
||||||
|
specifier: git+https://git2.idz.one/publico/_comuns.git
|
||||||
|
version: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.3.6)
|
||||||
|
p-respostas:
|
||||||
|
specifier: git+https://git2.idz.one/publico/_respostas.git
|
||||||
|
version: git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)
|
||||||
|
uuid:
|
||||||
|
specifier: ^13.0.0
|
||||||
|
version: 13.0.0
|
||||||
|
zod:
|
||||||
|
specifier: ^4.3.6
|
||||||
|
version: 4.3.6
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@mdi/font':
|
'@mdi/font':
|
||||||
specifier: ^7.4.47
|
specifier: ^7.4.47
|
||||||
|
|
@ -489,6 +507,9 @@ packages:
|
||||||
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
|
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
|
||||||
engines: {node: '>= 14.16.0'}
|
engines: {node: '>= 14.16.0'}
|
||||||
|
|
||||||
|
cross-fetch@4.1.0:
|
||||||
|
resolution: {integrity: sha512-uKm5PU+MHTootlWEY+mZ4vvXoCn4fLQxT9dSc1sXVMSFkINTJVN8cAQROpwcKm8bJ/c7rgZVIBWzH5T78sNZZw==}
|
||||||
|
|
||||||
csstype@3.2.3:
|
csstype@3.2.3:
|
||||||
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
|
||||||
|
|
||||||
|
|
@ -554,6 +575,11 @@ packages:
|
||||||
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
|
||||||
engines: {node: '>=0.12.0'}
|
engines: {node: '>=0.12.0'}
|
||||||
|
|
||||||
|
lucide-vue-next@0.563.0:
|
||||||
|
resolution: {integrity: sha512-zsE/lCKtmaa7bGfhSpN84br1K9YoQ5pCN+2oKWjQQG3Lo6ufUUKBuHSjNFI6RvUevxaajNXb8XwFUKeTXG3sIA==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: '>=3.0.1'
|
||||||
|
|
||||||
magic-string@0.30.21:
|
magic-string@0.30.21:
|
||||||
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
|
resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
|
||||||
|
|
||||||
|
|
@ -575,6 +601,29 @@ packages:
|
||||||
node-addon-api@7.1.1:
|
node-addon-api@7.1.1:
|
||||||
resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
|
resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
|
||||||
|
|
||||||
|
node-fetch@2.7.0:
|
||||||
|
resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
|
||||||
|
engines: {node: 4.x || >=6.0.0}
|
||||||
|
peerDependencies:
|
||||||
|
encoding: ^0.1.0
|
||||||
|
peerDependenciesMeta:
|
||||||
|
encoding:
|
||||||
|
optional: true
|
||||||
|
|
||||||
|
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc:
|
||||||
|
resolution: {commit: d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc, repo: https://git2.idz.one/publico/_comuns.git, type: git}
|
||||||
|
version: 0.298.0
|
||||||
|
peerDependencies:
|
||||||
|
cross-fetch: 4.1.0
|
||||||
|
dayjs: ^1.11.18
|
||||||
|
uuid: ^11.1.0
|
||||||
|
zod: 4.1.4
|
||||||
|
|
||||||
|
p-respostas@git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843:
|
||||||
|
resolution: {commit: 8c24d790ace7255404745dcbdf12c5396e8b9843, repo: https://git2.idz.one/publico/_respostas.git, type: git}
|
||||||
|
version: 0.56.0
|
||||||
|
engines: {node: '>=20'}
|
||||||
|
|
||||||
path-browserify@1.0.1:
|
path-browserify@1.0.1:
|
||||||
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
|
||||||
|
|
||||||
|
|
@ -619,6 +668,9 @@ packages:
|
||||||
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
|
||||||
engines: {node: '>=8.0'}
|
engines: {node: '>=8.0'}
|
||||||
|
|
||||||
|
tr46@0.0.3:
|
||||||
|
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
|
||||||
|
|
||||||
typescript@5.9.3:
|
typescript@5.9.3:
|
||||||
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
|
||||||
engines: {node: '>=14.17'}
|
engines: {node: '>=14.17'}
|
||||||
|
|
@ -631,6 +683,10 @@ packages:
|
||||||
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
|
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
|
||||||
engines: {node: '>=4'}
|
engines: {node: '>=4'}
|
||||||
|
|
||||||
|
uuid@13.0.0:
|
||||||
|
resolution: {integrity: sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==}
|
||||||
|
hasBin: true
|
||||||
|
|
||||||
vite-plugin-vuetify@2.1.2:
|
vite-plugin-vuetify@2.1.2:
|
||||||
resolution: {integrity: sha512-I/wd6QS+DO6lHmuGoi1UTyvvBTQ2KDzQZ9oowJQEJ6OcjWfJnscYXx2ptm6S7fJSASuZT8jGRBL3LV4oS3LpaA==}
|
resolution: {integrity: sha512-I/wd6QS+DO6lHmuGoi1UTyvvBTQ2KDzQZ9oowJQEJ6OcjWfJnscYXx2ptm6S7fJSASuZT8jGRBL3LV4oS3LpaA==}
|
||||||
engines: {node: ^18.0.0 || >=20.0.0}
|
engines: {node: ^18.0.0 || >=20.0.0}
|
||||||
|
|
@ -711,6 +767,18 @@ packages:
|
||||||
webpack-plugin-vuetify:
|
webpack-plugin-vuetify:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
webidl-conversions@3.0.1:
|
||||||
|
resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
|
||||||
|
|
||||||
|
whatwg-url@5.0.0:
|
||||||
|
resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
|
||||||
|
|
||||||
|
zod@4.1.4:
|
||||||
|
resolution: {integrity: sha512-2YqJuWkU6IIK9qcE4k1lLLhyZ6zFw7XVRdQGpV97jEIZwTrscUw+DY31Xczd8nwaoksyJUIxCojZXwckJovWxA==}
|
||||||
|
|
||||||
|
zod@4.3.6:
|
||||||
|
resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
|
||||||
|
|
||||||
snapshots:
|
snapshots:
|
||||||
|
|
||||||
'@babel/helper-string-parser@7.27.1': {}
|
'@babel/helper-string-parser@7.27.1': {}
|
||||||
|
|
@ -1042,6 +1110,12 @@ snapshots:
|
||||||
dependencies:
|
dependencies:
|
||||||
readdirp: 4.1.2
|
readdirp: 4.1.2
|
||||||
|
|
||||||
|
cross-fetch@4.1.0:
|
||||||
|
dependencies:
|
||||||
|
node-fetch: 2.7.0
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- encoding
|
||||||
|
|
||||||
csstype@3.2.3: {}
|
csstype@3.2.3: {}
|
||||||
|
|
||||||
dayjs@1.11.19: {}
|
dayjs@1.11.19: {}
|
||||||
|
|
@ -1111,6 +1185,10 @@ snapshots:
|
||||||
is-number@7.0.0:
|
is-number@7.0.0:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
lucide-vue-next@0.563.0(vue@3.5.25(typescript@5.9.3)):
|
||||||
|
dependencies:
|
||||||
|
vue: 3.5.25(typescript@5.9.3)
|
||||||
|
|
||||||
magic-string@0.30.21:
|
magic-string@0.30.21:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@jridgewell/sourcemap-codec': 1.5.5
|
'@jridgewell/sourcemap-codec': 1.5.5
|
||||||
|
|
@ -1130,6 +1208,33 @@ snapshots:
|
||||||
node-addon-api@7.1.1:
|
node-addon-api@7.1.1:
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
node-fetch@2.7.0:
|
||||||
|
dependencies:
|
||||||
|
whatwg-url: 5.0.0
|
||||||
|
|
||||||
|
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.1.4):
|
||||||
|
dependencies:
|
||||||
|
cross-fetch: 4.1.0
|
||||||
|
dayjs: 1.11.19
|
||||||
|
uuid: 13.0.0
|
||||||
|
zod: 4.1.4
|
||||||
|
|
||||||
|
p-comuns@git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.3.6):
|
||||||
|
dependencies:
|
||||||
|
cross-fetch: 4.1.0
|
||||||
|
dayjs: 1.11.19
|
||||||
|
uuid: 13.0.0
|
||||||
|
zod: 4.3.6
|
||||||
|
|
||||||
|
p-respostas@git+https://git2.idz.one/publico/_respostas.git#8c24d790ace7255404745dcbdf12c5396e8b9843(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0):
|
||||||
|
dependencies:
|
||||||
|
p-comuns: git+https://git2.idz.one/publico/_comuns.git#d783fa12940a5b1bcafa5038bd1c49c3f5f9b7fc(cross-fetch@4.1.0)(dayjs@1.11.19)(uuid@13.0.0)(zod@4.1.4)
|
||||||
|
zod: 4.1.4
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- cross-fetch
|
||||||
|
- dayjs
|
||||||
|
- uuid
|
||||||
|
|
||||||
path-browserify@1.0.1: {}
|
path-browserify@1.0.1: {}
|
||||||
|
|
||||||
picocolors@1.1.1: {}
|
picocolors@1.1.1: {}
|
||||||
|
|
@ -1195,6 +1300,8 @@ snapshots:
|
||||||
is-number: 7.0.0
|
is-number: 7.0.0
|
||||||
optional: true
|
optional: true
|
||||||
|
|
||||||
|
tr46@0.0.3: {}
|
||||||
|
|
||||||
typescript@5.9.3: {}
|
typescript@5.9.3: {}
|
||||||
|
|
||||||
undici-types@7.16.0:
|
undici-types@7.16.0:
|
||||||
|
|
@ -1202,6 +1309,8 @@ snapshots:
|
||||||
|
|
||||||
upath@2.0.1: {}
|
upath@2.0.1: {}
|
||||||
|
|
||||||
|
uuid@13.0.0: {}
|
||||||
|
|
||||||
vite-plugin-vuetify@2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2):
|
vite-plugin-vuetify@2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2):
|
||||||
dependencies:
|
dependencies:
|
||||||
'@vuetify/loader-shared': 2.1.1(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)
|
'@vuetify/loader-shared': 2.1.1(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)
|
||||||
|
|
@ -1250,3 +1359,14 @@ snapshots:
|
||||||
optionalDependencies:
|
optionalDependencies:
|
||||||
typescript: 5.9.3
|
typescript: 5.9.3
|
||||||
vite-plugin-vuetify: 2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)
|
vite-plugin-vuetify: 2.1.2(vite@6.4.1(@types/node@24.10.1)(sass@1.94.2))(vue@3.5.25(typescript@5.9.3))(vuetify@3.11.2)
|
||||||
|
|
||||||
|
webidl-conversions@3.0.1: {}
|
||||||
|
|
||||||
|
whatwg-url@5.0.0:
|
||||||
|
dependencies:
|
||||||
|
tr46: 0.0.3
|
||||||
|
webidl-conversions: 3.0.1
|
||||||
|
|
||||||
|
zod@4.1.4: {}
|
||||||
|
|
||||||
|
zod@4.3.6: {}
|
||||||
|
|
|
||||||
BIN
public/quero-quero.gif
Executable file
BIN
public/quero-quero.gif
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
220
src/componentes/EliEntrada/EliEntradaDataHora.vue
Normal file
220
src/componentes/EliEntrada/EliEntradaDataHora.vue
Normal file
|
|
@ -0,0 +1,220 @@
|
||||||
|
<template>
|
||||||
|
<div class="eli-data-hora">
|
||||||
|
<v-text-field
|
||||||
|
v-model="valor"
|
||||||
|
:type="tipoInput"
|
||||||
|
:label="opcoesEfetivas.rotulo"
|
||||||
|
:placeholder="opcoesEfetivas.placeholder"
|
||||||
|
:disabled="desabilitadoEfetivo"
|
||||||
|
:clearable="Boolean(opcoesEfetivas.limpavel)"
|
||||||
|
:error="Boolean(opcoesEfetivas.erro)"
|
||||||
|
:error-messages="opcoesEfetivas.mensagensErro"
|
||||||
|
:hint="opcoesEfetivas.dica"
|
||||||
|
:persistent-hint="Boolean(opcoesEfetivas.dicaPersistente)"
|
||||||
|
:density="opcoesEfetivas.densidade ?? 'comfortable'"
|
||||||
|
:variant="opcoesEfetivas.variante ?? 'outlined'"
|
||||||
|
:min="minLocal"
|
||||||
|
:max="maxLocal"
|
||||||
|
v-bind="attrs"
|
||||||
|
@focus="emitCompatFocus"
|
||||||
|
@blur="emitCompatBlur"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType } from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import type { CampoDensidade, CampoVariante } from "../../tipos";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
|
||||||
|
type EntradaDataHora = PadroesEntradas["dataHora"];
|
||||||
|
|
||||||
|
type PropsAntigas = {
|
||||||
|
modo?: "data" | "dataHora";
|
||||||
|
rotulo?: string;
|
||||||
|
placeholder?: string;
|
||||||
|
desabilitado?: boolean;
|
||||||
|
limpavel?: boolean;
|
||||||
|
erro?: boolean;
|
||||||
|
mensagensErro?: string | string[];
|
||||||
|
dica?: string;
|
||||||
|
dicaPersistente?: boolean;
|
||||||
|
densidade?: CampoDensidade;
|
||||||
|
variante?: CampoVariante;
|
||||||
|
min?: string;
|
||||||
|
max?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliEntradaDataHora",
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
// --- Novo padrão EliEntrada ---
|
||||||
|
value: {
|
||||||
|
type: String as PropType<EntradaDataHora["value"]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
opcoes: {
|
||||||
|
type: Object as PropType<EntradaDataHora["opcoes"]>,
|
||||||
|
required: false,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
|
||||||
|
// --- Compatibilidade com componente antigo EliDataHora ---
|
||||||
|
modelValue: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
modo: { type: String as PropType<PropsAntigas["modo"]>, default: undefined },
|
||||||
|
rotulo: { type: String, default: undefined },
|
||||||
|
placeholder: { type: String, default: undefined },
|
||||||
|
desabilitado: { type: Boolean, default: undefined },
|
||||||
|
limpavel: { type: Boolean, default: undefined },
|
||||||
|
erro: { type: Boolean, default: undefined },
|
||||||
|
mensagensErro: {
|
||||||
|
type: [String, Array] as PropType<string | string[]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
dica: { type: String, default: undefined },
|
||||||
|
dicaPersistente: { type: Boolean, default: undefined },
|
||||||
|
densidade: { type: String as PropType<CampoDensidade>, default: undefined },
|
||||||
|
variante: { type: String as PropType<CampoVariante>, default: undefined },
|
||||||
|
min: { type: String as PropType<string | undefined>, default: undefined },
|
||||||
|
max: { type: String as PropType<string | undefined>, default: undefined },
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
// Novo padrão
|
||||||
|
"update:value": (_v: string | null) => true,
|
||||||
|
input: (_v: string | null) => true, // compat Vue2
|
||||||
|
change: (_v: string | null) => true,
|
||||||
|
|
||||||
|
// Compat antigo
|
||||||
|
"update:modelValue": (_v: string | null) => true,
|
||||||
|
alterar: (_v: string | null) => true,
|
||||||
|
foco: () => true,
|
||||||
|
desfoco: () => true,
|
||||||
|
focus: () => true,
|
||||||
|
blur: () => true,
|
||||||
|
},
|
||||||
|
setup(props, { emit, attrs }) {
|
||||||
|
const opcoesEfetivas = computed<EntradaDataHora["opcoes"]>(() => {
|
||||||
|
// 1) se veio `opcoes` (novo), usa
|
||||||
|
if (props.opcoes) return props.opcoes;
|
||||||
|
|
||||||
|
// 2) fallback: constrói a partir das props antigas
|
||||||
|
return {
|
||||||
|
rotulo: props.rotulo ?? "Data e hora",
|
||||||
|
placeholder: props.placeholder ?? "",
|
||||||
|
modo: props.modo ?? "dataHora",
|
||||||
|
limpavel: props.limpavel,
|
||||||
|
erro: props.erro,
|
||||||
|
mensagensErro: props.mensagensErro,
|
||||||
|
dica: props.dica,
|
||||||
|
dicaPersistente: props.dicaPersistente,
|
||||||
|
densidade: props.densidade,
|
||||||
|
variante: props.variante,
|
||||||
|
min: props.min,
|
||||||
|
max: props.max,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const modoEfetivo = computed<"data" | "dataHora">(
|
||||||
|
() => opcoesEfetivas.value.modo ?? "dataHora"
|
||||||
|
);
|
||||||
|
|
||||||
|
const desabilitadoEfetivo = computed<boolean>(() => Boolean(props.desabilitado));
|
||||||
|
|
||||||
|
const tipoInput = computed<"date" | "datetime-local">(() =>
|
||||||
|
modoEfetivo.value === "data" ? "date" : "datetime-local"
|
||||||
|
);
|
||||||
|
|
||||||
|
function isoParaInputDatetime(valorIso: string): string {
|
||||||
|
if (modoEfetivo.value === "data") {
|
||||||
|
return dayjs(valorIso).format("YYYY-MM-DD");
|
||||||
|
}
|
||||||
|
return dayjs(valorIso).format("YYYY-MM-DDTHH:mm");
|
||||||
|
}
|
||||||
|
|
||||||
|
function inputDatetimeParaIsoLocal(valorInput: string): string {
|
||||||
|
if (modoEfetivo.value === "data") {
|
||||||
|
return dayjs(`${valorInput}T00:00`).format();
|
||||||
|
}
|
||||||
|
return dayjs(valorInput).format();
|
||||||
|
}
|
||||||
|
|
||||||
|
const effectiveModelValue = computed<string | null>(() => {
|
||||||
|
// Prioridade: value (novo) se vier definido; senão usa modelValue (antigo)
|
||||||
|
return props.value !== undefined ? (props.value ?? null) : props.modelValue;
|
||||||
|
});
|
||||||
|
|
||||||
|
const valor = computed<string>({
|
||||||
|
get: () => {
|
||||||
|
if (!effectiveModelValue.value) return "";
|
||||||
|
return isoParaInputDatetime(effectiveModelValue.value);
|
||||||
|
},
|
||||||
|
set: (v) => {
|
||||||
|
const normalizado = v && v.length > 0 ? v : null;
|
||||||
|
if (!normalizado) {
|
||||||
|
emit("update:value", null);
|
||||||
|
emit("input", null);
|
||||||
|
emit("change", null);
|
||||||
|
|
||||||
|
emit("update:modelValue", null);
|
||||||
|
emit("alterar", null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const valorEmitido = inputDatetimeParaIsoLocal(normalizado);
|
||||||
|
|
||||||
|
emit("update:value", valorEmitido);
|
||||||
|
emit("input", valorEmitido);
|
||||||
|
emit("change", valorEmitido);
|
||||||
|
|
||||||
|
emit("update:modelValue", valorEmitido);
|
||||||
|
emit("alterar", valorEmitido);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const minLocal = computed<string | undefined>(() => {
|
||||||
|
const min = opcoesEfetivas.value.min;
|
||||||
|
if (!min) return undefined;
|
||||||
|
return isoParaInputDatetime(min);
|
||||||
|
});
|
||||||
|
|
||||||
|
const maxLocal = computed<string | undefined>(() => {
|
||||||
|
const max = opcoesEfetivas.value.max;
|
||||||
|
if (!max) return undefined;
|
||||||
|
return isoParaInputDatetime(max);
|
||||||
|
});
|
||||||
|
|
||||||
|
function emitCompatFocus() {
|
||||||
|
emit("foco");
|
||||||
|
emit("focus");
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitCompatBlur() {
|
||||||
|
emit("desfoco");
|
||||||
|
emit("blur");
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
attrs,
|
||||||
|
valor,
|
||||||
|
tipoInput,
|
||||||
|
minLocal,
|
||||||
|
maxLocal,
|
||||||
|
opcoesEfetivas,
|
||||||
|
desabilitadoEfetivo,
|
||||||
|
emitCompatFocus,
|
||||||
|
emitCompatBlur,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-data-hora {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
236
src/componentes/EliEntrada/EliEntradaNumero.vue
Normal file
236
src/componentes/EliEntrada/EliEntradaNumero.vue
Normal file
|
|
@ -0,0 +1,236 @@
|
||||||
|
<template>
|
||||||
|
<v-text-field
|
||||||
|
:model-value="displayValue"
|
||||||
|
:label="opcoes?.rotulo"
|
||||||
|
:placeholder="opcoes?.placeholder"
|
||||||
|
:type="isInteiro ? 'number' : 'text'"
|
||||||
|
:inputmode="isInteiro ? 'numeric' : 'decimal'"
|
||||||
|
:pattern="isInteiro ? '[0-9]*' : '[0-9.,]*'"
|
||||||
|
v-bind="attrs"
|
||||||
|
@update:model-value="onUpdateModelValue"
|
||||||
|
@focus="() => emit('focus')"
|
||||||
|
@blur="() => emit('blur')"
|
||||||
|
>
|
||||||
|
<!--
|
||||||
|
Em alguns cenários (ex.: type="number"), o prop `suffix` do Vuetify pode não aparecer.
|
||||||
|
Usamos slots para garantir exibição consistente de prefixo/sufixo.
|
||||||
|
-->
|
||||||
|
<template v-if="opcoes?.prefixo" #prepend-inner>
|
||||||
|
<span class="eli-entrada__prefixo">{{ opcoes.prefixo }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-if="opcoes?.sufixo" #append-inner>
|
||||||
|
<span class="eli-entrada__sufixo">{{ opcoes.sufixo }}</span>
|
||||||
|
</template>
|
||||||
|
</v-text-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType, ref, watch } from "vue";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
|
||||||
|
type EntradaNumero = PadroesEntradas["numero"];
|
||||||
|
|
||||||
|
function casasDecimaisFromPrecisao(precisao: number): number {
|
||||||
|
if (!Number.isFinite(precisao) || precisao <= 0) return 0;
|
||||||
|
if (precisao >= 1) return 0;
|
||||||
|
|
||||||
|
// Preferência por contar casas decimais na representação (ex.: 0.01 -> 2)
|
||||||
|
const texto = precisao.toString();
|
||||||
|
if (texto.includes("e-")) {
|
||||||
|
const [, exp] = texto.split("e-");
|
||||||
|
const n = Number(exp);
|
||||||
|
return Number.isFinite(n) ? n : 0;
|
||||||
|
}
|
||||||
|
const idx = texto.indexOf(".");
|
||||||
|
if (idx === -1) return 0;
|
||||||
|
const dec = texto.slice(idx + 1).replace(/0+$/, "");
|
||||||
|
return dec.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseNumero(texto: string): number | null {
|
||||||
|
const normalizado = (texto ?? "").trim().replace(/,/g, ".");
|
||||||
|
if (!normalizado) return null;
|
||||||
|
const n = Number(normalizado);
|
||||||
|
if (Number.isNaN(n)) return null;
|
||||||
|
return n;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatarNumero(value: number | null | undefined, casas: number | null) {
|
||||||
|
if (value === null || value === undefined) return "";
|
||||||
|
if (casas === null) return String(value);
|
||||||
|
|
||||||
|
// Garantimos que o texto visual corresponda ao value (fixed).
|
||||||
|
const fixed = Number(value).toFixed(Math.max(0, casas));
|
||||||
|
// Exibe com vírgula (pt-BR)
|
||||||
|
return fixed.replace(/\./g, ",");
|
||||||
|
}
|
||||||
|
|
||||||
|
function somenteNumeros(texto: string) {
|
||||||
|
return (texto ?? "").replace(/\D+/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function somenteNumerosESeparadorDecimal(texto: string) {
|
||||||
|
// Mantém apenas números e UM separador decimal ("," ou "."), sem sinais.
|
||||||
|
// Implementação baseada em regex + colapso de separadores.
|
||||||
|
const limpo = (texto ?? "").replace(/[^0-9.,]+/g, "");
|
||||||
|
const matchSep = limpo.match(/[.,]/);
|
||||||
|
if (!matchSep) return limpo;
|
||||||
|
|
||||||
|
const sep = matchSep[0];
|
||||||
|
const idx = limpo.indexOf(sep);
|
||||||
|
const antesRaw = limpo.slice(0, idx).replace(/[.,]/g, "");
|
||||||
|
const depois = limpo.slice(idx + 1).replace(/[.,]/g, "");
|
||||||
|
|
||||||
|
// Se o usuário começa pelo separador (",4"), normalizamos para "0,4".
|
||||||
|
const antes = antesRaw.length ? antesRaw : "0";
|
||||||
|
return `${antes}${sep}${depois}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function limitarCasasDecimais(texto: string, casas: number | null) {
|
||||||
|
if (casas === null) return texto;
|
||||||
|
if (casas <= 0) return texto.replace(/[.,]/g, "");
|
||||||
|
|
||||||
|
const matchSep = texto.match(/[.,]/);
|
||||||
|
if (!matchSep) return texto;
|
||||||
|
const sep = matchSep[0];
|
||||||
|
const idx = texto.indexOf(sep);
|
||||||
|
|
||||||
|
const inteiro = texto.slice(0, idx);
|
||||||
|
const frac = texto.slice(idx + 1);
|
||||||
|
return `${inteiro}${sep}${frac.slice(0, casas)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function valorParcialDecimal(texto: string): number | null {
|
||||||
|
// Regra (B): se o usuário digitou "1," ou "1." emite 1.
|
||||||
|
const m = texto.match(/^(\d+)[.,]$/);
|
||||||
|
if (!m) return null;
|
||||||
|
const n = Number(m[1]);
|
||||||
|
return Number.isNaN(n) ? null : n;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliEntradaNumero",
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: [Number, null] as unknown as PropType<EntradaNumero["value"]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
opcoes: {
|
||||||
|
type: Object as PropType<EntradaNumero["opcoes"]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
"update:value": (_v: EntradaNumero["value"]) => true,
|
||||||
|
/** Compat Vue2 (v-model padrão: value + input) */
|
||||||
|
input: (_v: EntradaNumero["value"]) => true,
|
||||||
|
change: (_v: EntradaNumero["value"]) => true,
|
||||||
|
focus: () => true,
|
||||||
|
blur: () => true,
|
||||||
|
},
|
||||||
|
setup(props, { attrs, emit }) {
|
||||||
|
// Se `precisao` não existir => não limitamos casas (mas ainda bloqueamos caracteres inválidos).
|
||||||
|
const casasDecimais = computed<number | null>(() => {
|
||||||
|
const p = props.opcoes?.precisao;
|
||||||
|
if (p === undefined || p === null) return null;
|
||||||
|
return casasDecimaisFromPrecisao(p);
|
||||||
|
});
|
||||||
|
|
||||||
|
const isInteiro = computed(() => {
|
||||||
|
// quando não existe precisão, tratamos como decimal livre
|
||||||
|
return casasDecimais.value === 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isFixedPoint = computed(() => {
|
||||||
|
// Quando precisao existe e é < 1, controlamos a vírgula automaticamente.
|
||||||
|
const casas = casasDecimais.value;
|
||||||
|
return casas !== null && casas > 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Controle do texto exibido: impede o campo de ficar com caracteres inválidos.
|
||||||
|
const displayValue = ref<string>("");
|
||||||
|
const ultimoEmitido = ref<EntradaNumero["value"] | undefined>(undefined);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.value,
|
||||||
|
(v) => {
|
||||||
|
// Se foi uma atualização resultante do que acabamos de emitir, não sobrescreve.
|
||||||
|
// Isso evita o efeito de "apagar" o texto ao digitar algo parcial (ex.: "1,")
|
||||||
|
// quando o valor emitido é `1` ou `null`.
|
||||||
|
if (v === ultimoEmitido.value) return;
|
||||||
|
|
||||||
|
displayValue.value = formatarNumero(v as any, casasDecimais.value);
|
||||||
|
ultimoEmitido.value = v;
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
function onUpdateModelValue(texto: string) {
|
||||||
|
// Modo fixed-point: usuário digita números continuamente e a vírgula é inserida automaticamente.
|
||||||
|
if (isFixedPoint.value) {
|
||||||
|
const casas = casasDecimais.value ?? 0;
|
||||||
|
const digitos = somenteNumeros(texto);
|
||||||
|
// ex.: casas=2, "1" => 0.01 ; "123" => 1.23
|
||||||
|
const baseInt = digitos ? Number(digitos) : 0;
|
||||||
|
const divisor = Math.pow(10, casas);
|
||||||
|
const n = digitos ? baseInt / divisor : null;
|
||||||
|
|
||||||
|
const out = (n === null ? null : n) as EntradaNumero["value"];
|
||||||
|
ultimoEmitido.value = out;
|
||||||
|
emit("update:value", out);
|
||||||
|
emit("input", out);
|
||||||
|
emit("change", out);
|
||||||
|
|
||||||
|
// display deve ser sempre o reflexo do value
|
||||||
|
displayValue.value = formatarNumero(out as any, casas);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Modo livre (sem precisao) ou inteiro: aceita números e 1 separador (no caso livre)
|
||||||
|
const base = isInteiro.value ? somenteNumeros(texto) : somenteNumerosESeparadorDecimal(texto);
|
||||||
|
const textoFiltrado = isInteiro.value ? base : limitarCasasDecimais(base, casasDecimais.value);
|
||||||
|
|
||||||
|
// Emissão:
|
||||||
|
// - vazio => null
|
||||||
|
// - decimal parcial ("1,") => 1 (regra B)
|
||||||
|
// - caso geral => parse normal
|
||||||
|
let out: EntradaNumero["value"] = null;
|
||||||
|
if (textoFiltrado) {
|
||||||
|
const parcial = isInteiro.value ? null : valorParcialDecimal(textoFiltrado);
|
||||||
|
const n = parcial ?? parseNumero(textoFiltrado);
|
||||||
|
out = (n === null ? null : n) as EntradaNumero["value"];
|
||||||
|
}
|
||||||
|
|
||||||
|
ultimoEmitido.value = out;
|
||||||
|
|
||||||
|
emit("update:value", out);
|
||||||
|
emit("input", out);
|
||||||
|
emit("change", out);
|
||||||
|
|
||||||
|
// display deve sempre corresponder ao value final
|
||||||
|
displayValue.value = formatarNumero(out as any, casasDecimais.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return { attrs, emit, displayValue, isInteiro, onUpdateModelValue };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-entrada__prefixo,
|
||||||
|
.eli-entrada__sufixo {
|
||||||
|
opacity: 0.75;
|
||||||
|
font-size: 0.9em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-entrada__prefixo {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-entrada__sufixo {
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
66
src/componentes/EliEntrada/EliEntradaParagrafo.vue
Normal file
66
src/componentes/EliEntrada/EliEntradaParagrafo.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<template>
|
||||||
|
<v-textarea
|
||||||
|
v-model="localValue"
|
||||||
|
:label="opcoes?.rotulo"
|
||||||
|
:placeholder="opcoes?.placeholder"
|
||||||
|
:rows="opcoes?.linhas ?? 4"
|
||||||
|
:counter="opcoes?.limiteCaracteres"
|
||||||
|
:maxlength="opcoes?.limiteCaracteres"
|
||||||
|
:clearable="Boolean(opcoes?.limpavel)"
|
||||||
|
:error="Boolean(opcoes?.erro)"
|
||||||
|
:error-messages="opcoes?.mensagensErro"
|
||||||
|
:hint="opcoes?.dica"
|
||||||
|
:persistent-hint="Boolean(opcoes?.dicaPersistente)"
|
||||||
|
:density="opcoes?.densidade ?? 'comfortable'"
|
||||||
|
:variant="opcoes?.variante ?? 'outlined'"
|
||||||
|
auto-grow
|
||||||
|
v-bind="attrs"
|
||||||
|
@focus="() => emit('focus')"
|
||||||
|
@blur="() => emit('blur')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType } from "vue";
|
||||||
|
import { VTextarea } from "vuetify/components";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
|
||||||
|
type EntradaParagrafo = PadroesEntradas["paragrafo"];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliEntradaParagrafo",
|
||||||
|
components: { VTextarea },
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, null] as unknown as PropType<EntradaParagrafo["value"]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
opcoes: {
|
||||||
|
type: Object as PropType<EntradaParagrafo["opcoes"]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
"update:value": (_v: EntradaParagrafo["value"]) => true,
|
||||||
|
input: (_v: EntradaParagrafo["value"]) => true,
|
||||||
|
change: (_v: EntradaParagrafo["value"]) => true,
|
||||||
|
focus: () => true,
|
||||||
|
blur: () => true,
|
||||||
|
},
|
||||||
|
setup(props, { attrs, emit }) {
|
||||||
|
const localValue = computed<EntradaParagrafo["value"]>({
|
||||||
|
get: () => props.value,
|
||||||
|
set: (v) => {
|
||||||
|
emit("update:value", v);
|
||||||
|
emit("input", v);
|
||||||
|
emit("change", v);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return { attrs, emit, localValue, opcoes: props.opcoes };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
108
src/componentes/EliEntrada/EliEntradaSelecao.vue
Normal file
108
src/componentes/EliEntrada/EliEntradaSelecao.vue
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
<template>
|
||||||
|
<v-select
|
||||||
|
v-model="localValue"
|
||||||
|
:label="opcoes?.rotulo"
|
||||||
|
:placeholder="opcoes?.placeholder"
|
||||||
|
:items="itens"
|
||||||
|
item-title="rotulo"
|
||||||
|
item-value="chave"
|
||||||
|
:loading="carregando"
|
||||||
|
:disabled="carregando"
|
||||||
|
:menu-props="{ maxHeight: 320 }"
|
||||||
|
:clearable="Boolean(opcoes?.limpavel)"
|
||||||
|
:error="Boolean(opcoes?.erro)"
|
||||||
|
:error-messages="opcoes?.mensagensErro"
|
||||||
|
:hint="opcoes?.dica"
|
||||||
|
:persistent-hint="Boolean(opcoes?.dicaPersistente)"
|
||||||
|
:density="opcoes?.densidade ?? 'comfortable'"
|
||||||
|
:variant="opcoes?.variante ?? 'outlined'"
|
||||||
|
v-bind="attrs"
|
||||||
|
@focus="() => emit('focus')"
|
||||||
|
@blur="() => emit('blur')"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
|
||||||
|
import { VSelect } from "vuetify/components";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
|
||||||
|
type EntradaSelecao = PadroesEntradas["selecao"];
|
||||||
|
type ItemSelecao = { chave: string; rotulo: string };
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliEntradaSelecao",
|
||||||
|
components: { VSelect },
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, null] as unknown as PropType<EntradaSelecao["value"]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
opcoes: {
|
||||||
|
type: Object as PropType<EntradaSelecao["opcoes"]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
"update:value": (_v: EntradaSelecao["value"]) => true,
|
||||||
|
input: (_v: EntradaSelecao["value"]) => true,
|
||||||
|
change: (_v: EntradaSelecao["value"]) => true,
|
||||||
|
focus: () => true,
|
||||||
|
blur: () => true,
|
||||||
|
},
|
||||||
|
setup(props, { attrs, emit }) {
|
||||||
|
const itens = ref<ItemSelecao[]>([]);
|
||||||
|
const carregando = ref(false);
|
||||||
|
|
||||||
|
const localValue = computed<EntradaSelecao["value"]>({
|
||||||
|
get: () => props.value,
|
||||||
|
set: (v) => {
|
||||||
|
emit("update:value", v);
|
||||||
|
emit("input", v);
|
||||||
|
emit("change", v);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function carregarItens() {
|
||||||
|
carregando.value = true;
|
||||||
|
try {
|
||||||
|
const resultado = await props.opcoes.itens();
|
||||||
|
const lista = Array.isArray(resultado) ? resultado : [];
|
||||||
|
|
||||||
|
// Força reatividade mesmo quando Vuetify mantém cache interno.
|
||||||
|
// (garante que `items` mude de referência)
|
||||||
|
itens.value = [...lista];
|
||||||
|
} finally {
|
||||||
|
carregando.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Recarrega quando muda a função (caso o consumidor troque dinamicamente).
|
||||||
|
watch(
|
||||||
|
() => props.opcoes.itens,
|
||||||
|
() => {
|
||||||
|
void carregarItens();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
void carregarItens();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Debug (playground): ajuda a identificar se os itens chegaram.
|
||||||
|
watch(
|
||||||
|
itens,
|
||||||
|
(v) => {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.debug("[EliEntradaSelecao] itens:", v);
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
return { attrs, emit, localValue, opcoes: props.opcoes, itens, carregando };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
101
src/componentes/EliEntrada/EliEntradaTexto.vue
Normal file
101
src/componentes/EliEntrada/EliEntradaTexto.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<v-text-field
|
||||||
|
v-model="localValue"
|
||||||
|
:type="inputHtmlType"
|
||||||
|
:inputmode="inputMode"
|
||||||
|
:label="opcoes?.rotulo"
|
||||||
|
:placeholder="opcoes?.placeholder"
|
||||||
|
:counter="opcoes?.limiteCaracteres"
|
||||||
|
:maxlength="opcoes?.limiteCaracteres"
|
||||||
|
v-bind="attrs"
|
||||||
|
@focus="() => emit('focus')"
|
||||||
|
@blur="() => emit('blur')"
|
||||||
|
@input="onInput"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType } from "vue";
|
||||||
|
import type { PadroesEntradas } from "./tiposEntradas";
|
||||||
|
import { formatarCpfCnpj } from "./utils/cpfCnpj";
|
||||||
|
import { formatTelefone } from "./utils/telefone";
|
||||||
|
import { formatarCep } from "./utils/cep";
|
||||||
|
|
||||||
|
type EntradaTexto = PadroesEntradas["texto"];
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliEntradaTexto",
|
||||||
|
inheritAttrs: false,
|
||||||
|
props: {
|
||||||
|
/** Interface padrão (EliEntrada): value + opcoes. */
|
||||||
|
value: {
|
||||||
|
type: [String, null] as unknown as PropType<EntradaTexto["value"]>,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
opcoes: {
|
||||||
|
type: Object as PropType<EntradaTexto["opcoes"]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
"update:value": (_v: EntradaTexto["value"]) => true,
|
||||||
|
/** Compat Vue2 (v-model padrão: value + input) */
|
||||||
|
input: (_v: EntradaTexto["value"]) => true,
|
||||||
|
change: (_v: EntradaTexto["value"]) => true,
|
||||||
|
focus: () => true,
|
||||||
|
blur: () => true,
|
||||||
|
},
|
||||||
|
setup(props, { attrs, emit }) {
|
||||||
|
const formato = computed(() => props.opcoes?.formato ?? "texto");
|
||||||
|
|
||||||
|
const localValue = computed<EntradaTexto["value"]>({
|
||||||
|
get: () => props.value,
|
||||||
|
set: (v) => {
|
||||||
|
emit("update:value", v);
|
||||||
|
emit("input", v);
|
||||||
|
emit("change", v);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputHtmlType = computed(() => {
|
||||||
|
if (formato.value === "email") return "email";
|
||||||
|
if (formato.value === "url") return "url";
|
||||||
|
return "text";
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputMode = computed<string | undefined>(() => {
|
||||||
|
if (formato.value === "telefone") return "tel";
|
||||||
|
if (formato.value === "cpfCnpj" || formato.value === "cep") return "numeric";
|
||||||
|
return undefined;
|
||||||
|
});
|
||||||
|
|
||||||
|
function aplicarFormato(valor: string) {
|
||||||
|
switch (formato.value) {
|
||||||
|
case "telefone":
|
||||||
|
return formatTelefone(valor);
|
||||||
|
case "cpfCnpj":
|
||||||
|
return formatarCpfCnpj(valor);
|
||||||
|
case "cep":
|
||||||
|
return formatarCep(valor);
|
||||||
|
default:
|
||||||
|
return valor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onInput(e: Event) {
|
||||||
|
const target = e.target as HTMLInputElement;
|
||||||
|
const resultado = aplicarFormato(target.value);
|
||||||
|
|
||||||
|
// garante que o input mostre o valor formatado
|
||||||
|
target.value = resultado;
|
||||||
|
|
||||||
|
// regra do projeto: value sempre igual ao que aparece
|
||||||
|
localValue.value = resultado;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { attrs, emit, localValue, inputHtmlType, inputMode, onInput };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
254
src/componentes/EliEntrada/README.md
Normal file
254
src/componentes/EliEntrada/README.md
Normal file
|
|
@ -0,0 +1,254 @@
|
||||||
|
# EliEntrada (Padrão de Entradas)
|
||||||
|
|
||||||
|
Esta pasta define o **padrão EliEntrada**: um conjunto de componentes de entrada (inputs) com uma **API uniforme**.
|
||||||
|
|
||||||
|
> TL;DR
|
||||||
|
> - Toda entrada recebe **`value`** (estado) e **`opcoes`** (configuração).
|
||||||
|
> - O padrão de uso é **`v-model:value`**.
|
||||||
|
> - Mantemos compatibilidade com Vue 2 via evento **`input`**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Para humanos (uso no dia-a-dia)
|
||||||
|
|
||||||
|
### Conceito
|
||||||
|
|
||||||
|
Um componente **EliEntrada** recebe **duas propriedades**:
|
||||||
|
|
||||||
|
- `value`: o valor atual do campo (entrada e saída)
|
||||||
|
- `opcoes`: um objeto que configura o componente (rótulo, placeholder e opções específicas do tipo)
|
||||||
|
|
||||||
|
Essa padronização facilita:
|
||||||
|
- gerar formulários dinamicamente
|
||||||
|
- trocar tipos de entrada com o mínimo de refactor
|
||||||
|
- documentar e tipar de forma previsível
|
||||||
|
|
||||||
|
### Tipos e contratos
|
||||||
|
|
||||||
|
Os contratos ficam em: [`tiposEntradas.ts`](./tiposEntradas.ts)
|
||||||
|
|
||||||
|
- `PadroesEntradas`: mapa de tipos suportados (ex.: `texto`, `numero`, `dataHora`)
|
||||||
|
- `TipoEntrada`: união das chaves do mapa (ex.: `"texto" | "numero" | "dataHora"`)
|
||||||
|
|
||||||
|
### Componentes disponíveis
|
||||||
|
|
||||||
|
#### 1) `EliEntradaTexto`
|
||||||
|
|
||||||
|
**Value**: `string | null | undefined`
|
||||||
|
|
||||||
|
**Opções** (além de `rotulo`/`placeholder`):
|
||||||
|
- `limiteCaracteres?: number`
|
||||||
|
|
||||||
|
Exemplo:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<EliEntradaTexto
|
||||||
|
v-model:value="nome"
|
||||||
|
:opcoes="{ rotulo: 'Nome', placeholder: 'Digite seu nome', limiteCaracteres: 50 }"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { EliEntradaTexto } from '@/index'
|
||||||
|
|
||||||
|
const nome = ref<string | null>(null)
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2) `EliEntradaNumero`
|
||||||
|
|
||||||
|
**Value**: `number | null | undefined`
|
||||||
|
|
||||||
|
**Opções**:
|
||||||
|
- `precisao?: number`
|
||||||
|
- `1` => inteiro
|
||||||
|
- `0.1` => 1 casa decimal
|
||||||
|
- `0.01` => 2 casas decimais
|
||||||
|
- `prefixo?: string` (ex.: `"R$"`)
|
||||||
|
- `sufixo?: string` (ex.: `"kg"`)
|
||||||
|
|
||||||
|
Comportamento:
|
||||||
|
- Quando `precisao < 1` o componente entra em modo **fixed-point**: você digita números continuamente e ele insere a vírgula automaticamente.
|
||||||
|
- O que é exibido sempre corresponde ao `value` emitido.
|
||||||
|
|
||||||
|
Exemplos:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<EliEntradaNumero
|
||||||
|
v-model:value="quantidade"
|
||||||
|
:opcoes="{ rotulo: 'Quantidade', placeholder: 'Ex: 10', precisao: 1, sufixo: 'kg' }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliEntradaNumero
|
||||||
|
v-model:value="preco"
|
||||||
|
:opcoes="{ rotulo: 'Preço', placeholder: 'Digite', precisao: 0.01, prefixo: 'R$' }"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 3) `EliEntradaDataHora`
|
||||||
|
|
||||||
|
**Value**: `string | null | undefined` (ISO 8601 com offset ou `Z`)
|
||||||
|
|
||||||
|
**Opções**:
|
||||||
|
- `modo?: "data" | "dataHora"` (default: `dataHora`)
|
||||||
|
- `min?: string` (ISO)
|
||||||
|
- `max?: string` (ISO)
|
||||||
|
- `limpavel?: boolean`
|
||||||
|
- `erro?: boolean`
|
||||||
|
- `mensagensErro?: string | string[]`
|
||||||
|
- `dica?: string`
|
||||||
|
- `dicaPersistente?: boolean`
|
||||||
|
- `densidade?: CampoDensidade`
|
||||||
|
- `variante?: CampoVariante`
|
||||||
|
|
||||||
|
Importante:
|
||||||
|
- O input nativo `datetime-local` não carrega timezone.
|
||||||
|
- O componente converte ISO (Z/offset) para **local** para exibir.
|
||||||
|
- Ao alterar, emite ISO 8601 com o **offset local**.
|
||||||
|
|
||||||
|
Exemplo:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<EliEntradaDataHora
|
||||||
|
v-model:value="agendamento"
|
||||||
|
:opcoes="{ rotulo: 'Agendar', modo: 'dataHora', min, max, limpavel: true }"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 4) `EliEntradaParagrafo`
|
||||||
|
|
||||||
|
Entrada de texto multi-linha (equivalente a um **textarea**).
|
||||||
|
|
||||||
|
**Value**: `string | null | undefined`
|
||||||
|
|
||||||
|
**Opções** (além de `rotulo`/`placeholder`):
|
||||||
|
|
||||||
|
- `linhas?: number` (default: `4`)
|
||||||
|
- `limiteCaracteres?: number`
|
||||||
|
- `limpavel?: boolean`
|
||||||
|
- `erro?: boolean`
|
||||||
|
- `mensagensErro?: string | string[]`
|
||||||
|
- `dica?: string`
|
||||||
|
- `dicaPersistente?: boolean`
|
||||||
|
- `densidade?: CampoDensidade`
|
||||||
|
- `variante?: CampoVariante`
|
||||||
|
|
||||||
|
Exemplo:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<EliEntradaParagrafo
|
||||||
|
v-model:value="descricao"
|
||||||
|
:opcoes="{
|
||||||
|
rotulo: 'Descrição',
|
||||||
|
placeholder: 'Digite uma descrição mais longa...',
|
||||||
|
linhas: 5,
|
||||||
|
limiteCaracteres: 300,
|
||||||
|
limpavel: true,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 5) `EliEntradaSelecao`
|
||||||
|
|
||||||
|
Entrada de seleção (select) com carregamento de itens via função.
|
||||||
|
|
||||||
|
**Value**: `string | null | undefined` (chave do item selecionado)
|
||||||
|
|
||||||
|
**Opções** (além de `rotulo`/`placeholder`):
|
||||||
|
|
||||||
|
- `itens: () => {chave: string; rotulo: string}[] | Promise<{chave: string; rotulo: string}[]>`
|
||||||
|
- `limpavel?: boolean`
|
||||||
|
- `erro?: boolean`
|
||||||
|
- `mensagensErro?: string | string[]`
|
||||||
|
- `dica?: string`
|
||||||
|
- `dicaPersistente?: boolean`
|
||||||
|
- `densidade?: CampoDensidade`
|
||||||
|
- `variante?: CampoVariante`
|
||||||
|
|
||||||
|
Comportamento:
|
||||||
|
- Ao montar, o componente chama `opcoes.itens()`.
|
||||||
|
- Enquanto carrega, o select fica em `loading` e desabilitado.
|
||||||
|
|
||||||
|
Exemplo:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<EliEntradaSelecao
|
||||||
|
v-model:value="categoria"
|
||||||
|
:opcoes="{
|
||||||
|
rotulo: 'Categoria',
|
||||||
|
placeholder: 'Selecione...',
|
||||||
|
limpavel: true,
|
||||||
|
itens: async () => {
|
||||||
|
await new Promise((r) => setTimeout(r, 300));
|
||||||
|
return [
|
||||||
|
{ chave: 'a', rotulo: 'Categoria A' },
|
||||||
|
{ chave: 'b', rotulo: 'Categoria B' },
|
||||||
|
];
|
||||||
|
},
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compatibilidade Vue 2 / Vue 3
|
||||||
|
|
||||||
|
Padrão recomendado (Vue 3):
|
||||||
|
- `v-model:value`
|
||||||
|
|
||||||
|
Compat Vue 2:
|
||||||
|
- todos os EliEntradas também emitem `input`.
|
||||||
|
- isso permite consumir com o padrão `value + input` quando necessário.
|
||||||
|
|
||||||
|
### Playground
|
||||||
|
|
||||||
|
- Entradas: `src/playground/entradas.playground.vue`
|
||||||
|
- Data/hora: `src/playground/data_hora.playground.vue`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Para IA (contratos, invariantes e padrões de evolução)
|
||||||
|
|
||||||
|
### Contratos (não quebrar)
|
||||||
|
|
||||||
|
1) **Todo EliEntrada tem**:
|
||||||
|
- prop `value`
|
||||||
|
- prop `opcoes`
|
||||||
|
- evento `update:value`
|
||||||
|
|
||||||
|
2) **Compatibilidade**:
|
||||||
|
- emitir `input` (compat Vue 2) é obrigatório
|
||||||
|
|
||||||
|
3) **Tipagem**:
|
||||||
|
- `PadroesEntradas` é a fonte única do contrato (value/opcoes)
|
||||||
|
- `TipoEntrada = keyof PadroesEntradas`
|
||||||
|
|
||||||
|
4) **Sanitização/Normalização**:
|
||||||
|
- `EliEntradaNumero` deve bloquear caracteres inválidos e manter display coerente com `value`
|
||||||
|
- `EliEntradaDataHora` deve receber/emitir ISO e converter para local apenas para exibição
|
||||||
|
|
||||||
|
### Como adicionar uma nova entrada (checklist)
|
||||||
|
|
||||||
|
1) Adicionar chave em `PadroesEntradas` em `tiposEntradas.ts`
|
||||||
|
2) Criar `EliEntradaX.vue` seguindo o padrão:
|
||||||
|
- `value` + `opcoes`
|
||||||
|
- emite `update:value`, `input`, `change`
|
||||||
|
3) Exportar no `src/componentes/EliEntrada/index.ts`
|
||||||
|
4) Registrar no `src/componentes/EliEntrada/registryEliEntradas.ts`
|
||||||
|
5) Criar/atualizar playground (`src/playground/*.playground.vue`)
|
||||||
|
6) Validar `pnpm -s run build:types` e `pnpm -s run build`
|
||||||
|
|
||||||
|
### Padrões de mudança (refactors seguros)
|
||||||
|
|
||||||
|
- Se precisar mudar o contrato, faça **migração incremental**:
|
||||||
|
- manter props/eventos antigos como fallback temporário
|
||||||
|
- atualizar playground e exemplos
|
||||||
|
- rodar `build:types` para garantir geração de `.d.ts`
|
||||||
8
src/componentes/EliEntrada/index.ts
Normal file
8
src/componentes/EliEntrada/index.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||||
|
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||||
|
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||||
|
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||||
|
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||||
|
|
||||||
|
export { EliEntradaTexto, EliEntradaNumero, EliEntradaDataHora, EliEntradaParagrafo, EliEntradaSelecao };
|
||||||
|
export type { PadroesEntradas, TipoEntrada } from "./tiposEntradas";
|
||||||
17
src/componentes/EliEntrada/registryEliEntradas.ts
Normal file
17
src/componentes/EliEntrada/registryEliEntradas.ts
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
import type { Component } from "vue";
|
||||||
|
|
||||||
|
import EliEntradaTexto from "./EliEntradaTexto.vue";
|
||||||
|
import EliEntradaNumero from "./EliEntradaNumero.vue";
|
||||||
|
import EliEntradaDataHora from "./EliEntradaDataHora.vue";
|
||||||
|
import EliEntradaParagrafo from "./EliEntradaParagrafo.vue";
|
||||||
|
import EliEntradaSelecao from "./EliEntradaSelecao.vue";
|
||||||
|
|
||||||
|
import type { TipoEntrada } from "./tiposEntradas";
|
||||||
|
|
||||||
|
export const registryTabelaCelulas = {
|
||||||
|
texto: EliEntradaTexto,
|
||||||
|
numero: EliEntradaNumero,
|
||||||
|
dataHora: EliEntradaDataHora,
|
||||||
|
paragrafo: EliEntradaParagrafo,
|
||||||
|
selecao: EliEntradaSelecao,
|
||||||
|
} as const satisfies Record<TipoEntrada, Component>;
|
||||||
198
src/componentes/EliEntrada/tiposEntradas.ts
Normal file
198
src/componentes/EliEntrada/tiposEntradas.ts
Normal file
|
|
@ -0,0 +1,198 @@
|
||||||
|
/**
|
||||||
|
* Tipos base para componentes de entrada (EliEntrada*)
|
||||||
|
*
|
||||||
|
* Objetivo:
|
||||||
|
* - Padronizar o shape de dados de todos os componentes de entrada.
|
||||||
|
* - Cada entrada possui sempre:
|
||||||
|
* 1) `value`: o valor atual (tipado)
|
||||||
|
* 2) `opcoes`: configuração do componente (rótulo, placeholder e extras por tipo)
|
||||||
|
*
|
||||||
|
* Como usar:
|
||||||
|
* - `PadroesEntradas[tipo]` retorna a tipagem completa (value + opcoes) daquele tipo.
|
||||||
|
* - `TipoEntrada` é a união com todos os tipos suportados (ex.: "texto" | "numero").
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contrato padrão de uma entrada.
|
||||||
|
*
|
||||||
|
* @typeParam T - tipo do `value` (ex.: string | null | undefined)
|
||||||
|
* @typeParam Mais - campos adicionais dentro de `opcoes`, específicos do tipo de entrada
|
||||||
|
*/
|
||||||
|
export type tipoPadraoEntrada<T, Mais extends Record<string, unknown> = {}> = {
|
||||||
|
/** Valor atual do campo (pode aceitar null/undefined quando aplicável) */
|
||||||
|
value: T
|
||||||
|
|
||||||
|
/** Configurações do componente (visuais + regras simples do tipo) */
|
||||||
|
opcoes: {
|
||||||
|
/** Rótulo exibido ao usuário */
|
||||||
|
rotulo: string
|
||||||
|
|
||||||
|
/** Texto de ajuda dentro do input quando vazio */
|
||||||
|
placeholder?: string
|
||||||
|
} & Mais
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mapa de tipos de entrada suportados e suas configurações específicas.
|
||||||
|
*
|
||||||
|
* Observação importante:
|
||||||
|
* - As chaves deste objeto (ex.: "texto", "numero") viram o tipo `TipoEntrada`.
|
||||||
|
* - Cada item define:
|
||||||
|
* - `value`: tipo do valor
|
||||||
|
* - `opcoes`: opções comuns + extras específicas
|
||||||
|
*/
|
||||||
|
export type PadroesEntradas = {
|
||||||
|
texto: tipoPadraoEntrada<
|
||||||
|
string | null | undefined,
|
||||||
|
{
|
||||||
|
/** Limite máximo de caracteres permitidos (se definido) */
|
||||||
|
limiteCaracteres?: number
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formato/máscara aplicada ao texto.
|
||||||
|
* Obs: o `value` SEMPRE será o texto formatado (o que aparece no input).
|
||||||
|
*/
|
||||||
|
formato?: "texto" | "email" | "url" | "telefone" | "cpfCnpj" | "cep"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
numero: tipoPadraoEntrada<
|
||||||
|
number | null | undefined,
|
||||||
|
{
|
||||||
|
|
||||||
|
|
||||||
|
/** Unidade de medida (ex.: "kg", "m³") */
|
||||||
|
sufixo?: string
|
||||||
|
|
||||||
|
/** Moéda (ex.: "R$") */
|
||||||
|
prefixo?: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Passo/precisão do valor numérico.
|
||||||
|
* - 1 => somente inteiros
|
||||||
|
* - 0.1 => 1 casa decimal
|
||||||
|
* - 0.01 => 2 casas decimais
|
||||||
|
*
|
||||||
|
* Dica: este conceito corresponde ao atributo HTML `step`.
|
||||||
|
*/
|
||||||
|
precisao?: number
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
dataHora: tipoPadraoEntrada<
|
||||||
|
string | null | undefined,
|
||||||
|
{
|
||||||
|
/** Define o tipo de entrada. - `dataHora`: datetime-local - `data`: date */
|
||||||
|
modo?: "data" | "dataHora"
|
||||||
|
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean
|
||||||
|
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean
|
||||||
|
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[]
|
||||||
|
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string
|
||||||
|
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean
|
||||||
|
|
||||||
|
/** Valor mínimo permitido (ISO 8601 - offset ou Z). */
|
||||||
|
min?: string
|
||||||
|
|
||||||
|
/** Valor máximo permitido (ISO 8601 - offset ou Z). */
|
||||||
|
max?: string
|
||||||
|
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade
|
||||||
|
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
paragrafo: tipoPadraoEntrada<
|
||||||
|
string | null | undefined,
|
||||||
|
{
|
||||||
|
/** Quantidade de linhas visíveis no textarea (Vuetify `rows`). */
|
||||||
|
linhas?: number
|
||||||
|
|
||||||
|
/** Limite máximo de caracteres permitidos (se definido). */
|
||||||
|
limiteCaracteres?: number
|
||||||
|
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean
|
||||||
|
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean
|
||||||
|
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[]
|
||||||
|
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string
|
||||||
|
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean
|
||||||
|
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade
|
||||||
|
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
selecao: tipoPadraoEntrada<
|
||||||
|
string | null | undefined,
|
||||||
|
{
|
||||||
|
/**
|
||||||
|
* Carrega os itens da seleção (sincrono ou async).
|
||||||
|
* - Cada item precisa ter uma chave estável (value) e um rótulo (title).
|
||||||
|
*/
|
||||||
|
itens: () =>
|
||||||
|
| { chave: string; rotulo: string }[]
|
||||||
|
| Promise<{ chave: string; rotulo: string }[]>
|
||||||
|
|
||||||
|
/** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
|
||||||
|
limpavel?: boolean
|
||||||
|
|
||||||
|
/** Estado de erro (visual). */
|
||||||
|
erro?: boolean
|
||||||
|
|
||||||
|
/** Mensagens de erro. */
|
||||||
|
mensagensErro?: string | string[]
|
||||||
|
|
||||||
|
/** Texto de apoio. */
|
||||||
|
dica?: string
|
||||||
|
|
||||||
|
/** Mantém a dica sempre visível. */
|
||||||
|
dicaPersistente?: boolean
|
||||||
|
|
||||||
|
/** Densidade do campo (Vuetify). */
|
||||||
|
densidade?: import("../../tipos").CampoDensidade
|
||||||
|
|
||||||
|
/** Variante do v-text-field (Vuetify). */
|
||||||
|
variante?: import("../../tipos").CampoVariante
|
||||||
|
}
|
||||||
|
>
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* União dos tipos de entrada suportados.
|
||||||
|
* Ex.: "texto" | "numero"
|
||||||
|
*/
|
||||||
|
export type TipoEntrada = keyof PadroesEntradas
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export type PadraoComponenteEntrada<T extends TipoEntrada> =
|
||||||
|
readonly [T, PadroesEntradas[T]['opcoes']]
|
||||||
|
|
||||||
|
export type ComponenteEntrada = {
|
||||||
|
[K in TipoEntrada]: PadraoComponenteEntrada<K>
|
||||||
|
}[TipoEntrada]
|
||||||
10
src/componentes/EliEntrada/utils/cep.ts
Normal file
10
src/componentes/EliEntrada/utils/cep.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
function somenteNumeros(valor: string) {
|
||||||
|
return valor.replace(/\D+/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Formata CEP no padrão 00000-000 */
|
||||||
|
export function formatarCep(valor: string) {
|
||||||
|
const digitos = somenteNumeros(valor);
|
||||||
|
if (!digitos) return "";
|
||||||
|
return digitos.replace(/^(\d{5})(\d)/, "$1-$2").slice(0, 9);
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,3 @@
|
||||||
// utils/telefone.ts
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove tudo que não é número
|
* Remove tudo que não é número
|
||||||
*/
|
*/
|
||||||
372
src/componentes/EliTabela/EliTabela.css
Normal file
372
src/componentes/EliTabela/EliTabela.css
Normal file
|
|
@ -0,0 +1,372 @@
|
||||||
|
.eli-tabela {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: separate;
|
||||||
|
border-spacing: 0;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__tbody {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__tbody .eli-tabela__tr--zebra .eli-tabela__td {
|
||||||
|
background: rgba(15, 23, 42, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th,
|
||||||
|
.eli-tabela__td {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th {
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th--ordenavel {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th--ordenavel .eli-tabela__th-botao {
|
||||||
|
padding: 10px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-botao {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
font: inherit;
|
||||||
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
transition: color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-botao:hover,
|
||||||
|
.eli-tabela__th-botao:focus-visible {
|
||||||
|
color: rgba(15, 23, 42, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-botao:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-botao--ativo {
|
||||||
|
color: rgba(37, 99, 235, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-texto {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-icone {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th-icone--oculto {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__tr:last-child .eli-tabela__td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__td--clicavel {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__td--clicavel:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.eli-tabela--erro {
|
||||||
|
border: 1px solid rgba(220, 53, 69, 0.35);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela--carregando {
|
||||||
|
border: 1px dashed rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__erro-titulo {
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__erro-mensagem {
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela--vazio {
|
||||||
|
border: 1px dashed rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__th--acoes {
|
||||||
|
text-align: right;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__td--acoes {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-container--aberto {
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__cabecalho {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
/* Altura padrão para controles do cabeçalho (busca e botões)
|
||||||
|
* - Mantém alinhamento visual entre input de busca e ações
|
||||||
|
* - Pode ser sobrescrita via CSS no consumidor, se necessário
|
||||||
|
*/
|
||||||
|
--eli-tabela-cabecalho-controle-altura: 34px;
|
||||||
|
|
||||||
|
/* Borda dos controles do cabeçalho: menos "pílula", mais quadrado.
|
||||||
|
* Ajuste fino via CSS no consumidor, se necessário.
|
||||||
|
*/
|
||||||
|
--eli-tabela-cabecalho-controle-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho {
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho-botao {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
height: var(--eli-tabela-cabecalho-controle-altura);
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: var(--eli-tabela-cabecalho-controle-radius);
|
||||||
|
border: none;
|
||||||
|
background: rgba(37, 99, 235, 0.12);
|
||||||
|
color: rgba(37, 99, 235, 0.95);
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho-botao:hover,
|
||||||
|
.eli-tabela__acoes-cabecalho-botao:focus-visible {
|
||||||
|
background: rgba(37, 99, 235, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho-botao:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.35);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho-icone {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-cabecalho-rotulo {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-toggle {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(15, 23, 42, 0.72);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-toggle-icone {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-toggle:hover,
|
||||||
|
.eli-tabela__acoes-toggle:focus-visible {
|
||||||
|
background-color: rgba(15, 23, 42, 0.08);
|
||||||
|
color: rgba(15, 23, 42, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-toggle:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-toggle:disabled {
|
||||||
|
cursor: default;
|
||||||
|
color: rgba(148, 163, 184, 0.8);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-menu {
|
||||||
|
min-width: 180px;
|
||||||
|
padding: 6px 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item-botao {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item-botao:hover,
|
||||||
|
.eli-tabela__acoes-item-botao:focus-visible {
|
||||||
|
background-color: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item-botao:focus-visible {
|
||||||
|
outline: 2px solid currentColor;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item-icone {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__acoes-item-texto {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* =========================
|
||||||
|
* Expander (colunas invisíveis)
|
||||||
|
* ========================= */
|
||||||
|
|
||||||
|
.eli-tabela__th--expander,
|
||||||
|
.eli-tabela__td--expander {
|
||||||
|
width: 42px;
|
||||||
|
padding: 6px 8px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__expander-botao {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: rgba(15, 23, 42, 0.72);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__expander-botao:hover,
|
||||||
|
.eli-tabela__expander-botao:focus-visible {
|
||||||
|
background-color: rgba(15, 23, 42, 0.08);
|
||||||
|
color: rgba(15, 23, 42, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__expander-botao:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__expander-botao--ativo {
|
||||||
|
background-color: rgba(15, 23, 42, 0.06);
|
||||||
|
color: rgba(15, 23, 42, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__td--detalhes {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__tr--detalhes .eli-tabela__td {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__detalhes {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__detalhe {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 180px 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__detalhe-rotulo {
|
||||||
|
font-weight: 600;
|
||||||
|
color: rgba(15, 23, 42, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__detalhe-valor {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.eli-tabela__detalhe {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
830
src/componentes/EliTabela/EliTabela.vue
Normal file
830
src/componentes/EliTabela/EliTabela.vue
Normal file
|
|
@ -0,0 +1,830 @@
|
||||||
|
<template>
|
||||||
|
<div class="eli-tabela">
|
||||||
|
<EliTabelaDebug :isDev="isDev" :menuAberto="menuAberto" :menuPopupPos="menuPopupPos" />
|
||||||
|
|
||||||
|
<EliTabelaEstados
|
||||||
|
v-if="carregando || Boolean(erro) || !linhas.length"
|
||||||
|
:carregando="carregando"
|
||||||
|
:erro="erro"
|
||||||
|
:mensagemVazio="tabela.mensagemVazio"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<EliTabelaCabecalho
|
||||||
|
v-if="exibirBusca || temAcoesCabecalho"
|
||||||
|
:exibirBusca="exibirBusca"
|
||||||
|
:exibirBotaoFiltroAvancado="exibirFiltroAvancado"
|
||||||
|
:valorBusca="valorBusca"
|
||||||
|
:acoesCabecalho="acoesCabecalho"
|
||||||
|
@buscar="atualizarBusca"
|
||||||
|
@colunas="abrirModalColunas"
|
||||||
|
@filtroAvancado="abrirModalFiltro"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliTabelaModalColunas
|
||||||
|
:aberto="modalColunasAberto"
|
||||||
|
:rotulosColunas="rotulosColunas"
|
||||||
|
:configInicial="configColunas"
|
||||||
|
:colunas="tabela.colunas"
|
||||||
|
@fechar="fecharModalColunas"
|
||||||
|
@salvar="salvarModalColunas"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliTabelaModalFiltroAvancado
|
||||||
|
:aberto="modalFiltroAberto"
|
||||||
|
:filtrosBase="tabela.filtroAvancado ?? []"
|
||||||
|
:modelo="filtrosUi"
|
||||||
|
@fechar="fecharModalFiltro"
|
||||||
|
@limpar="limparFiltrosAvancados"
|
||||||
|
@salvar="salvarFiltrosAvancados"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<table class="eli-tabela__table">
|
||||||
|
<EliTabelaHead
|
||||||
|
:colunas="colunasEfetivas"
|
||||||
|
:temAcoes="temAcoes"
|
||||||
|
:temColunasInvisiveis="temColunasInvisiveis"
|
||||||
|
:colunaOrdenacao="colunaOrdenacao"
|
||||||
|
:direcaoOrdenacao="direcaoOrdenacao"
|
||||||
|
@alternar-ordenacao="alternarOrdenacao"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliTabelaBody
|
||||||
|
:colunas="colunasEfetivas"
|
||||||
|
:colunasInvisiveis="colunasInvisiveisEfetivas"
|
||||||
|
:temColunasInvisiveis="temColunasInvisiveis"
|
||||||
|
:linhasExpandidas="linhasExpandidas"
|
||||||
|
:linhas="linhasPaginadas"
|
||||||
|
:temAcoes="temAcoes"
|
||||||
|
:menuAberto="menuAberto"
|
||||||
|
:possuiAcoes="possuiAcoes"
|
||||||
|
:toggleMenu="toggleMenu"
|
||||||
|
:alternarLinhaExpandida="alternarLinhaExpandida"
|
||||||
|
/>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<EliTabelaMenuAcoes
|
||||||
|
ref="menuPopup"
|
||||||
|
:menuAberto="menuAberto"
|
||||||
|
:posicao="menuPopupPos"
|
||||||
|
:acoes="menuAberto === null ? [] : acoesDisponiveisPorLinha(menuAberto)"
|
||||||
|
:linha="menuAberto === null ? null : linhasPaginadas[menuAberto]"
|
||||||
|
@executar="({ acao, linha }) => { menuAberto = null; acao.acao(linha as never); }"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EliTabelaPaginacao
|
||||||
|
v-if="totalPaginas > 1 && quantidadeFiltrada > 0"
|
||||||
|
:pagina="paginaAtual"
|
||||||
|
:totalPaginas="totalPaginas"
|
||||||
|
:maximoBotoes="tabela.maximo_botoes_paginacao"
|
||||||
|
@alterar="irParaPagina"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* EliTabela
|
||||||
|
* Componente de tabela consultável com busca, paginação, ordenação e ações por linha.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** Dependências do Vue (Composition API) */
|
||||||
|
import {
|
||||||
|
computed,
|
||||||
|
defineComponent,
|
||||||
|
onBeforeUnmount,
|
||||||
|
onMounted,
|
||||||
|
PropType,
|
||||||
|
ref,
|
||||||
|
watch,
|
||||||
|
} from "vue";
|
||||||
|
/** Enum de códigos de resposta utilizado na consulta */
|
||||||
|
import { codigosResposta } from "p-respostas";
|
||||||
|
/** Componentes auxiliares */
|
||||||
|
import EliTabelaCabecalho from "./EliTabelaCabecalho.vue";
|
||||||
|
import EliTabelaEstados from "./EliTabelaEstados.vue";
|
||||||
|
import EliTabelaDebug from "./EliTabelaDebug.vue";
|
||||||
|
import EliTabelaHead from "./EliTabelaHead.vue";
|
||||||
|
import EliTabelaBody from "./EliTabelaBody.vue";
|
||||||
|
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";
|
||||||
|
/** Tipos da configuração/contrato da tabela */
|
||||||
|
import type { EliTabelaConsulta } 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 {
|
||||||
|
carregarConfigColunas,
|
||||||
|
salvarConfigColunas,
|
||||||
|
type EliTabelaColunasConfig,
|
||||||
|
} from "./colunasStorage";
|
||||||
|
|
||||||
|
import {
|
||||||
|
carregarFiltroAvancado,
|
||||||
|
salvarFiltroAvancado,
|
||||||
|
limparFiltroAvancado,
|
||||||
|
} from "./filtroAvancadoStorage";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabela",
|
||||||
|
inheritAttrs: false,
|
||||||
|
components: {
|
||||||
|
EliTabelaCabecalho,
|
||||||
|
EliTabelaEstados,
|
||||||
|
EliTabelaDebug,
|
||||||
|
EliTabelaHead,
|
||||||
|
EliTabelaBody,
|
||||||
|
EliTabelaMenuAcoes,
|
||||||
|
EliTabelaPaginacao,
|
||||||
|
EliTabelaModalColunas,
|
||||||
|
EliTabelaModalFiltroAvancado,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
/** Configuração principal da tabela (colunas, consulta e ações) */
|
||||||
|
tabela: {
|
||||||
|
type: Object as PropType<EliTabelaConsulta<any>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
/** Flag para habilitar elementos de debug */
|
||||||
|
const isDev = import.meta.env.DEV;
|
||||||
|
/** Estados de carregamento/erro e dados retornados */
|
||||||
|
const carregando = ref(false);
|
||||||
|
const erro = ref<string | null>(null);
|
||||||
|
const linhas = ref<unknown[]>([]);
|
||||||
|
const quantidade = ref<number>(0);
|
||||||
|
|
||||||
|
/** Controle de visibilidade das ações por linha */
|
||||||
|
const acoesVisiveis = ref<boolean[][]>([]);
|
||||||
|
/** Estado do menu de ações (aberto, elemento e posição) */
|
||||||
|
const menuAberto = ref<number | null>(null);
|
||||||
|
// O componente EliTabelaMenuAcoes expõe `menuEl` (ref do elemento <ul>)
|
||||||
|
const menuPopup = ref<{ menuEl: { value: HTMLElement | null } } | null>(null);
|
||||||
|
const menuPopupPos = ref({ top: 0, left: 0 });
|
||||||
|
|
||||||
|
/** Filtros e ordenação */
|
||||||
|
const valorBusca = ref<string>("");
|
||||||
|
const paginaAtual = ref(1);
|
||||||
|
const colunaOrdenacao = ref<string | null>(null);
|
||||||
|
const direcaoOrdenacao = ref<"asc" | "desc">("asc");
|
||||||
|
|
||||||
|
/** Filtro avançado (config + estado modal) */
|
||||||
|
const modalFiltroAberto = ref(false);
|
||||||
|
type LinhaFiltroUI<T> = {
|
||||||
|
coluna: keyof T;
|
||||||
|
valor: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
const filtrosUi = ref<Array<LinhaFiltroUI<any>>>(carregarFiltroAvancado<any>(props.tabela.nome) as any);
|
||||||
|
|
||||||
|
function abrirModalFiltro() {
|
||||||
|
modalFiltroAberto.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fecharModalFiltro() {
|
||||||
|
modalFiltroAberto.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function limparFiltrosAvancados() {
|
||||||
|
filtrosUi.value = [];
|
||||||
|
limparFiltroAvancado(props.tabela.nome);
|
||||||
|
modalFiltroAberto.value = false;
|
||||||
|
if (paginaAtual.value !== 1) paginaAtual.value = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function salvarFiltrosAvancados(novo: any[]) {
|
||||||
|
filtrosUi.value = (novo ?? []) as any;
|
||||||
|
salvarFiltroAvancado(props.tabela.nome, (novo ?? []) as any);
|
||||||
|
modalFiltroAberto.value = false;
|
||||||
|
if (paginaAtual.value !== 1) paginaAtual.value = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const filtrosAvancadosAtivos = computed<tipoFiltro[]>(() => {
|
||||||
|
// Operador vem travado na definição (`tabela.filtroAvancado`).
|
||||||
|
const base = (props.tabela.filtroAvancado ?? []) as Array<{ coluna: string; operador: any }>;
|
||||||
|
|
||||||
|
return (filtrosUi.value ?? [])
|
||||||
|
.filter((f) => f && f.coluna !== undefined)
|
||||||
|
.map((f) => {
|
||||||
|
const b = base.find((x) => String(x.coluna) === String(f.coluna));
|
||||||
|
if (!b) return null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
coluna: String(b.coluna),
|
||||||
|
operador: b.operador as any,
|
||||||
|
valor: (f as any).valor,
|
||||||
|
} as tipoFiltro;
|
||||||
|
})
|
||||||
|
.filter(Boolean) as tipoFiltro[];
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Alias reativo da prop tabela */
|
||||||
|
const tabela = computed(() => props.tabela);
|
||||||
|
|
||||||
|
/** Exibição da busca e ações do cabeçalho */
|
||||||
|
const exibirBusca = computed(() => Boolean(props.tabela.mostrarCaixaDeBusca));
|
||||||
|
const acoesCabecalho = computed(() => props.tabela.acoesTabela ?? []);
|
||||||
|
const temAcoesCabecalho = computed(() => acoesCabecalho.value.length > 0);
|
||||||
|
|
||||||
|
/** Colunas: visibilidade/ordem com persistência */
|
||||||
|
const modalColunasAberto = ref(false);
|
||||||
|
const configColunas = ref<EliTabelaColunasConfig>(
|
||||||
|
carregarConfigColunas(props.tabela.nome)
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Linhas expandidas (para exibir colunas invisíveis) */
|
||||||
|
const linhasExpandidas = ref<Record<number, boolean>>({});
|
||||||
|
|
||||||
|
const rotulosColunas = computed(() => props.tabela.colunas.map((c) => c.rotulo));
|
||||||
|
|
||||||
|
const colunasInvisiveisEfetivas = computed(() => {
|
||||||
|
const colunas = props.tabela.colunas as Array<EliColuna<any>>;
|
||||||
|
|
||||||
|
const configTemDados =
|
||||||
|
(configColunas.value.visiveis?.length ?? 0) > 0 ||
|
||||||
|
(configColunas.value.invisiveis?.length ?? 0) > 0;
|
||||||
|
|
||||||
|
const invisiveisBaseRotulos = configTemDados
|
||||||
|
? configColunas.value.invisiveis ?? []
|
||||||
|
: colunas.filter((c) => c.visivel === false).map((c) => c.rotulo);
|
||||||
|
|
||||||
|
const invisiveisSet = new Set(invisiveisBaseRotulos);
|
||||||
|
const base = colunas.filter((c) => invisiveisSet.has(c.rotulo));
|
||||||
|
|
||||||
|
// 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>>();
|
||||||
|
for (const c of base) {
|
||||||
|
if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
|
||||||
|
}
|
||||||
|
|
||||||
|
const ordenadas: Array<EliColuna<any>> = [];
|
||||||
|
for (const r of ordemSalva) {
|
||||||
|
const c = mapa.get(r);
|
||||||
|
if (c) ordenadas.push(c);
|
||||||
|
}
|
||||||
|
for (const c of base) {
|
||||||
|
if (!ordenadas.includes(c)) ordenadas.push(c);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ordenadas;
|
||||||
|
});
|
||||||
|
|
||||||
|
const temColunasInvisiveis = computed(() => colunasInvisiveisEfetivas.value.length > 0);
|
||||||
|
|
||||||
|
const colunasEfetivas = computed(() => {
|
||||||
|
const colunas = props.tabela.colunas;
|
||||||
|
const todosRotulos = rotulosColunas.value;
|
||||||
|
|
||||||
|
const configTemDados =
|
||||||
|
(configColunas.value.visiveis?.length ?? 0) > 0 ||
|
||||||
|
(configColunas.value.invisiveis?.length ?? 0) > 0;
|
||||||
|
|
||||||
|
const invisiveisBaseRotulos = configTemDados
|
||||||
|
? configColunas.value.invisiveis ?? []
|
||||||
|
: (props.tabela.colunas as Array<EliColuna<any>>)
|
||||||
|
.filter((c) => c.visivel === false)
|
||||||
|
.map((c) => c.rotulo);
|
||||||
|
|
||||||
|
const invisiveisSet = new Set(invisiveisBaseRotulos);
|
||||||
|
|
||||||
|
// base visiveis: remove invisiveis
|
||||||
|
const visiveisBaseRotulos = todosRotulos.filter((r) => !invisiveisSet.has(r));
|
||||||
|
const visiveisSet = new Set(visiveisBaseRotulos);
|
||||||
|
|
||||||
|
// aplica ordem salva; novas (sem definicao) entram no fim, respeitando ordem original
|
||||||
|
const ordemSalva = configTemDados ? configColunas.value.visiveis ?? [] : [];
|
||||||
|
const ordemFinal: string[] = [];
|
||||||
|
|
||||||
|
for (const r of ordemSalva) {
|
||||||
|
if (visiveisSet.has(r)) ordemFinal.push(r);
|
||||||
|
}
|
||||||
|
for (const r of visiveisBaseRotulos) {
|
||||||
|
if (!ordemFinal.includes(r)) ordemFinal.push(r);
|
||||||
|
}
|
||||||
|
|
||||||
|
// mapeia rótulo -> coluna, preservando duplicatas (se existirem) pelo primeiro match.
|
||||||
|
// OBS: pressupoe rotulo unico; se repetir, comportamento fica indefinido.
|
||||||
|
const mapa = new Map<string, any>();
|
||||||
|
for (const c of colunas) {
|
||||||
|
if (!mapa.has(c.rotulo)) mapa.set(c.rotulo, c);
|
||||||
|
}
|
||||||
|
|
||||||
|
return ordemFinal.map((r) => mapa.get(r)).filter(Boolean);
|
||||||
|
});
|
||||||
|
|
||||||
|
function abrirModalColunas() {
|
||||||
|
modalColunasAberto.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fecharModalColunas() {
|
||||||
|
modalColunasAberto.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function salvarModalColunas(cfg: EliTabelaColunasConfig) {
|
||||||
|
configColunas.value = cfg;
|
||||||
|
salvarConfigColunas(props.tabela.nome, cfg);
|
||||||
|
modalColunasAberto.value = false;
|
||||||
|
|
||||||
|
// ao mudar colunas, fecha detalhes expandidos
|
||||||
|
linhasExpandidas.value = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
function alternarLinhaExpandida(indice: number) {
|
||||||
|
const atual = Boolean(linhasExpandidas.value[indice]);
|
||||||
|
linhasExpandidas.value = {
|
||||||
|
...linhasExpandidas.value,
|
||||||
|
[indice]: !atual,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Registros por consulta (normaliza para inteiro positivo) */
|
||||||
|
const registrosPorConsulta = computed(() => {
|
||||||
|
const valor = props.tabela.registros_por_consulta;
|
||||||
|
if (typeof valor === "number" && valor > 0) {
|
||||||
|
return Math.floor(valor);
|
||||||
|
}
|
||||||
|
return 10;
|
||||||
|
});
|
||||||
|
|
||||||
|
function aplicarFiltroTexto(linhasIn: unknown[]) {
|
||||||
|
const q = (valorBusca.value ?? "").trim().toLowerCase();
|
||||||
|
if (!q) return linhasIn;
|
||||||
|
// filtro simples: stringifica o objeto
|
||||||
|
return linhasIn.filter((l) => JSON.stringify(l).toLowerCase().includes(q));
|
||||||
|
}
|
||||||
|
|
||||||
|
function compararOperador(operador: string, valorLinha: any, valorFiltro: any): boolean {
|
||||||
|
switch (operador) {
|
||||||
|
case "=":
|
||||||
|
return valorLinha == valorFiltro;
|
||||||
|
case "!=":
|
||||||
|
return valorLinha != valorFiltro;
|
||||||
|
case ">":
|
||||||
|
return Number(valorLinha) > Number(valorFiltro);
|
||||||
|
case ">=":
|
||||||
|
return Number(valorLinha) >= Number(valorFiltro);
|
||||||
|
case "<":
|
||||||
|
return Number(valorLinha) < Number(valorFiltro);
|
||||||
|
case "<=":
|
||||||
|
return Number(valorLinha) <= Number(valorFiltro);
|
||||||
|
case "like": {
|
||||||
|
const a = String(valorLinha ?? "").toLowerCase();
|
||||||
|
const b = String(valorFiltro ?? "").toLowerCase();
|
||||||
|
return a.includes(b);
|
||||||
|
}
|
||||||
|
case "in": {
|
||||||
|
// aceita "a,b,c" ou array
|
||||||
|
const arr = Array.isArray(valorFiltro)
|
||||||
|
? valorFiltro
|
||||||
|
: String(valorFiltro ?? "")
|
||||||
|
.split(",")
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
return arr.includes(String(valorLinha));
|
||||||
|
}
|
||||||
|
case "isNull":
|
||||||
|
return valorLinha === null || valorLinha === undefined || valorLinha === "";
|
||||||
|
default:
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function aplicarFiltroAvancado(linhasIn: unknown[]) {
|
||||||
|
const filtros = filtrosAvancadosAtivos.value;
|
||||||
|
if (!filtros.length) return linhasIn;
|
||||||
|
|
||||||
|
return linhasIn.filter((l: any) => {
|
||||||
|
return filtros.every((f) => {
|
||||||
|
const vLinha = l?.[f.coluna as any];
|
||||||
|
return compararOperador(String(f.operador), vLinha, (f as any).valor);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const linhasFiltradas = computed(() => {
|
||||||
|
const base = linhas.value ?? [];
|
||||||
|
return aplicarFiltroAvancado(aplicarFiltroTexto(base));
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Quantidade agora segue a filtragem local */
|
||||||
|
const quantidadeFiltrada = computed(() => linhasFiltradas.value.length);
|
||||||
|
|
||||||
|
/** Total de páginas calculado com base no filtrado */
|
||||||
|
const totalPaginas = computed(() => {
|
||||||
|
const limite = registrosPorConsulta.value;
|
||||||
|
if (!limite || limite <= 0) return 1;
|
||||||
|
|
||||||
|
const total = quantidadeFiltrada.value;
|
||||||
|
if (!total) return 1;
|
||||||
|
|
||||||
|
return Math.max(1, Math.ceil(total / limite));
|
||||||
|
});
|
||||||
|
|
||||||
|
const linhasPaginadas = computed(() => {
|
||||||
|
const limite = Math.max(1, registrosPorConsulta.value);
|
||||||
|
const offset = (paginaAtual.value - 1) * limite;
|
||||||
|
return linhasFiltradas.value.slice(offset, offset + limite);
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Indica se existem ações por linha */
|
||||||
|
const temAcoes = computed(() => (props.tabela.acoesLinha ?? []).length > 0);
|
||||||
|
|
||||||
|
const exibirFiltroAvancado = computed(() => (props.tabela.filtroAvancado ?? []).length > 0);
|
||||||
|
|
||||||
|
/** Sequencial para evitar race conditions entre consultas */
|
||||||
|
let carregamentoSequencial = 0;
|
||||||
|
|
||||||
|
/** Calcula a posição do menu de ações na viewport */
|
||||||
|
function atualizarPosicaoMenu(anchor: HTMLElement) {
|
||||||
|
const rect = anchor.getBoundingClientRect();
|
||||||
|
const gap = 8;
|
||||||
|
|
||||||
|
// Alinha no canto inferior direito do botão.
|
||||||
|
// Se estourar a tela para baixo, abre para cima.
|
||||||
|
const alturaMenu = menuPopup.value?.menuEl?.value?.offsetHeight ?? 0;
|
||||||
|
const larguraMenu = menuPopup.value?.menuEl?.value?.offsetWidth ?? 180;
|
||||||
|
|
||||||
|
let top = rect.bottom + gap;
|
||||||
|
const left = rect.right - larguraMenu;
|
||||||
|
|
||||||
|
if (alturaMenu && top + alturaMenu > window.innerHeight - gap) {
|
||||||
|
top = rect.top - gap - alturaMenu;
|
||||||
|
}
|
||||||
|
|
||||||
|
menuPopupPos.value = {
|
||||||
|
top: Math.max(gap, Math.round(top)),
|
||||||
|
left: Math.max(gap, Math.round(left)),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fecha o menu quando ocorre clique fora */
|
||||||
|
function handleClickFora(evento: MouseEvent) {
|
||||||
|
if (menuAberto.value === null) return;
|
||||||
|
|
||||||
|
const alvo = evento.target as Node;
|
||||||
|
if (menuPopup.value?.menuEl?.value && menuPopup.value.menuEl.value.contains(alvo)) return;
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log("[EliTabela] click fora => fechar menu", { menuAberto: menuAberto.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
menuAberto.value = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Alterna ordenação e recarrega os dados */
|
||||||
|
function alternarOrdenacao(chave?: string) {
|
||||||
|
if (!chave) return;
|
||||||
|
|
||||||
|
if (colunaOrdenacao.value === chave) {
|
||||||
|
direcaoOrdenacao.value = direcaoOrdenacao.value === "asc" ? "desc" : "asc";
|
||||||
|
void carregar();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
colunaOrdenacao.value = chave;
|
||||||
|
direcaoOrdenacao.value = "asc";
|
||||||
|
if (paginaAtual.value !== 1) {
|
||||||
|
paginaAtual.value = 1;
|
||||||
|
} else {
|
||||||
|
void carregar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Atualiza a busca e reinicia paginação, se necessário */
|
||||||
|
function atualizarBusca(texto: string) {
|
||||||
|
if (valorBusca.value === texto) return;
|
||||||
|
|
||||||
|
valorBusca.value = texto;
|
||||||
|
if (paginaAtual.value !== 1) {
|
||||||
|
paginaAtual.value = 1;
|
||||||
|
} else {
|
||||||
|
void carregar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Navega para a página solicitada com limites */
|
||||||
|
function irParaPagina(pagina: number) {
|
||||||
|
const alvo = Math.min(Math.max(1, pagina), totalPaginas.value);
|
||||||
|
if (alvo !== paginaAtual.value) {
|
||||||
|
paginaAtual.value = alvo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lista ações visíveis por linha, respeitando regras sync/async de `exibir`.
|
||||||
|
*/
|
||||||
|
function acoesDisponiveisPorLinha(i: number) {
|
||||||
|
const acoesLinha = props.tabela.acoesLinha ?? [];
|
||||||
|
const visibilidade = acoesVisiveis.value[i] ?? [];
|
||||||
|
|
||||||
|
return acoesLinha
|
||||||
|
.map((acao, indice) => {
|
||||||
|
const fallbackVisivel =
|
||||||
|
acao.exibir === undefined
|
||||||
|
? true
|
||||||
|
: typeof acao.exibir === "boolean"
|
||||||
|
? acao.exibir
|
||||||
|
: false;
|
||||||
|
|
||||||
|
return {
|
||||||
|
acao,
|
||||||
|
indice,
|
||||||
|
visivel: visibilidade[indice] ?? fallbackVisivel,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter((item) => item.visivel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Informa se a linha possui ações disponíveis */
|
||||||
|
function possuiAcoes(i: number) {
|
||||||
|
return acoesDisponiveisPorLinha(i).length > 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Abre/fecha o menu de ações da linha e posiciona o popup */
|
||||||
|
function toggleMenu(i: number, evento?: MouseEvent) {
|
||||||
|
if (!possuiAcoes(i)) return;
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log("[EliTabela] toggleMenu (antes)", { i, atual: menuAberto.value });
|
||||||
|
}
|
||||||
|
|
||||||
|
if (menuAberto.value === i) {
|
||||||
|
menuAberto.value = null;
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log("[EliTabela] toggleMenu => fechou", { i });
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
menuAberto.value = i;
|
||||||
|
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
|
console.log("[EliTabela] toggleMenu => abriu", { i });
|
||||||
|
}
|
||||||
|
|
||||||
|
// posiciona assim que abrir
|
||||||
|
const anchor = (evento?.currentTarget as HTMLElement | null) ?? null;
|
||||||
|
if (anchor) {
|
||||||
|
// primeiro posicionamento (antes do menu medir)
|
||||||
|
atualizarPosicaoMenu(anchor);
|
||||||
|
// reposiciona no próximo frame para pegar altura real
|
||||||
|
requestAnimationFrame(() => atualizarPosicaoMenu(anchor));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Executa consulta, aplica filtros e resolve visibilidade de ações.
|
||||||
|
* Usa o contador sequencial para ignorar respostas antigas.
|
||||||
|
*/
|
||||||
|
async function carregar() {
|
||||||
|
const idCarregamento = ++carregamentoSequencial;
|
||||||
|
carregando.value = true;
|
||||||
|
erro.value = null;
|
||||||
|
acoesVisiveis.value = [];
|
||||||
|
menuAberto.value = null;
|
||||||
|
linhasExpandidas.value = {};
|
||||||
|
|
||||||
|
// Em modo simulação (filtro local), sempre buscamos a lista completa.
|
||||||
|
// A paginação é aplicada APÓS a filtragem.
|
||||||
|
const limite = Math.max(1, registrosPorConsulta.value);
|
||||||
|
const offset = 0;
|
||||||
|
|
||||||
|
const parametrosConsulta: {
|
||||||
|
coluna_ordem?: never;
|
||||||
|
direcao_ordem?: "asc" | "desc";
|
||||||
|
offSet: number;
|
||||||
|
limit: number;
|
||||||
|
texto_busca?: string;
|
||||||
|
} = {
|
||||||
|
offSet: offset,
|
||||||
|
limit: 999999,
|
||||||
|
};
|
||||||
|
|
||||||
|
// texto_busca ficará somente para filtragem local.
|
||||||
|
|
||||||
|
if (colunaOrdenacao.value) {
|
||||||
|
parametrosConsulta.coluna_ordem = colunaOrdenacao.value as never;
|
||||||
|
parametrosConsulta.direcao_ordem = direcaoOrdenacao.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const tabelaConfig = props.tabela;
|
||||||
|
const res = await tabelaConfig.consulta(parametrosConsulta);
|
||||||
|
|
||||||
|
if (idCarregamento !== carregamentoSequencial) return;
|
||||||
|
|
||||||
|
if (res.cod !== codigosResposta.sucesso) {
|
||||||
|
linhas.value = [];
|
||||||
|
quantidade.value = 0;
|
||||||
|
erro.value = res.mensagem;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const valores = res.valor?.valores ?? [];
|
||||||
|
const total = valores.length;
|
||||||
|
|
||||||
|
linhas.value = valores;
|
||||||
|
quantidade.value = total;
|
||||||
|
|
||||||
|
const totalPaginasRecalculado = Math.max(1, Math.ceil((quantidadeFiltrada.value || 0) / limite));
|
||||||
|
if (paginaAtual.value > totalPaginasRecalculado) {
|
||||||
|
paginaAtual.value = totalPaginasRecalculado;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const acoesLinhaConfiguradas = tabelaConfig.acoesLinha ?? [];
|
||||||
|
if (!acoesLinhaConfiguradas.length) {
|
||||||
|
acoesVisiveis.value = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const preResultado = valores.map(() =>
|
||||||
|
acoesLinhaConfiguradas.map((acao) => {
|
||||||
|
if (acao.exibir === undefined) return true;
|
||||||
|
if (typeof acao.exibir === "boolean") return acao.exibir;
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
acoesVisiveis.value = preResultado;
|
||||||
|
|
||||||
|
const visibilidade = await Promise.all(
|
||||||
|
valores.map(async (linha) =>
|
||||||
|
Promise.all(
|
||||||
|
acoesLinhaConfiguradas.map(async (acao) => {
|
||||||
|
if (acao.exibir === undefined) return true;
|
||||||
|
if (typeof acao.exibir === "boolean") return acao.exibir;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resultado = acao.exibir(linha as never);
|
||||||
|
return Boolean(await Promise.resolve(resultado));
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (idCarregamento === carregamentoSequencial) {
|
||||||
|
acoesVisiveis.value = visibilidade;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
if (idCarregamento !== carregamentoSequencial) return;
|
||||||
|
|
||||||
|
linhas.value = [];
|
||||||
|
quantidade.value = 0;
|
||||||
|
erro.value = e instanceof Error ? e.message : "Erro ao carregar dados.";
|
||||||
|
} finally {
|
||||||
|
if (idCarregamento === carregamentoSequencial) {
|
||||||
|
carregando.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Ciclo de vida: registra listener global e carrega dados iniciais */
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener("click", handleClickFora);
|
||||||
|
void carregar();
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Ciclo de vida: remove listener global */
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener("click", handleClickFora);
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Watch: ao desabilitar busca, limpa termo e recarrega */
|
||||||
|
watch(
|
||||||
|
() => props.tabela.mostrarCaixaDeBusca,
|
||||||
|
(mostrar) => {
|
||||||
|
if (!mostrar && valorBusca.value) {
|
||||||
|
valorBusca.value = "";
|
||||||
|
if (paginaAtual.value !== 1) {
|
||||||
|
paginaAtual.value = 1;
|
||||||
|
} else {
|
||||||
|
void carregar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Watch: mudança de página dispara nova consulta */
|
||||||
|
watch(paginaAtual, (nova, antiga) => {
|
||||||
|
// paginação local não precisa recarregar
|
||||||
|
if (nova !== antiga) {
|
||||||
|
// noop
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Watch: troca de configuração reseta estados e recarrega */
|
||||||
|
watch(
|
||||||
|
() => props.tabela,
|
||||||
|
() => {
|
||||||
|
menuAberto.value = null;
|
||||||
|
colunaOrdenacao.value = null;
|
||||||
|
direcaoOrdenacao.value = "asc";
|
||||||
|
valorBusca.value = "";
|
||||||
|
modalColunasAberto.value = false;
|
||||||
|
modalFiltroAberto.value = false;
|
||||||
|
configColunas.value = carregarConfigColunas(props.tabela.nome);
|
||||||
|
filtrosUi.value = carregarFiltroAvancado<any>(props.tabela.nome) as any;
|
||||||
|
linhasExpandidas.value = {};
|
||||||
|
if (paginaAtual.value !== 1) {
|
||||||
|
paginaAtual.value = 1;
|
||||||
|
} else {
|
||||||
|
void carregar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Watch: alteração do limite de registros reinicia paginação */
|
||||||
|
watch(
|
||||||
|
() => props.tabela.registros_por_consulta,
|
||||||
|
() => {
|
||||||
|
if (paginaAtual.value !== 1) {
|
||||||
|
paginaAtual.value = 1;
|
||||||
|
} else {
|
||||||
|
void carregar();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Watch: mudança nas linhas fecha o menu aberto */
|
||||||
|
watch(linhas, () => {
|
||||||
|
menuAberto.value = null;
|
||||||
|
linhasExpandidas.value = {};
|
||||||
|
});
|
||||||
|
|
||||||
|
/** Exposição para o template (state, computed, helpers e actions) */
|
||||||
|
return {
|
||||||
|
// state
|
||||||
|
isDev,
|
||||||
|
tabela,
|
||||||
|
carregando,
|
||||||
|
erro,
|
||||||
|
linhas,
|
||||||
|
linhasPaginadas,
|
||||||
|
quantidadeFiltrada,
|
||||||
|
quantidade,
|
||||||
|
menuAberto,
|
||||||
|
valorBusca,
|
||||||
|
paginaAtual,
|
||||||
|
colunaOrdenacao,
|
||||||
|
direcaoOrdenacao,
|
||||||
|
totalPaginas,
|
||||||
|
|
||||||
|
// computed
|
||||||
|
exibirBusca,
|
||||||
|
exibirFiltroAvancado,
|
||||||
|
acoesCabecalho,
|
||||||
|
temAcoesCabecalho,
|
||||||
|
temAcoes,
|
||||||
|
colunasEfetivas,
|
||||||
|
rotulosColunas,
|
||||||
|
modalColunasAberto,
|
||||||
|
configColunas,
|
||||||
|
|
||||||
|
temColunasInvisiveis,
|
||||||
|
colunasInvisiveisEfetivas,
|
||||||
|
linhasExpandidas,
|
||||||
|
|
||||||
|
abrirModalColunas,
|
||||||
|
abrirModalFiltro,
|
||||||
|
fecharModalColunas,
|
||||||
|
salvarModalColunas,
|
||||||
|
|
||||||
|
modalFiltroAberto,
|
||||||
|
filtrosUi,
|
||||||
|
salvarFiltrosAvancados,
|
||||||
|
limparFiltrosAvancados,
|
||||||
|
fecharModalFiltro,
|
||||||
|
|
||||||
|
alternarLinhaExpandida,
|
||||||
|
|
||||||
|
// actions
|
||||||
|
alternarOrdenacao,
|
||||||
|
atualizarBusca,
|
||||||
|
irParaPagina,
|
||||||
|
acoesDisponiveisPorLinha,
|
||||||
|
possuiAcoes,
|
||||||
|
toggleMenu,
|
||||||
|
|
||||||
|
// popup
|
||||||
|
menuPopup,
|
||||||
|
menuPopupPos,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style src="./EliTabela.css"></style>
|
||||||
140
src/componentes/EliTabela/EliTabelaBody.vue
Normal file
140
src/componentes/EliTabela/EliTabelaBody.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
<template>
|
||||||
|
<tbody class="eli-tabela__tbody">
|
||||||
|
<template v-for="(linha, i) in linhas" :key="`grp-${i}`">
|
||||||
|
<tr
|
||||||
|
class="eli-tabela__tr"
|
||||||
|
:class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
|
||||||
|
>
|
||||||
|
<td v-if="temColunasInvisiveis" class="eli-tabela__td eli-tabela__td--expander" :key="`td-${i}-exp`">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__expander-botao"
|
||||||
|
:class="[linhasExpandidas?.[i] ? 'eli-tabela__expander-botao--ativo' : undefined]"
|
||||||
|
:aria-expanded="linhasExpandidas?.[i] ? 'true' : 'false'"
|
||||||
|
:aria-label="linhasExpandidas?.[i] ? 'Ocultar colunas ocultas' : 'Mostrar colunas ocultas'"
|
||||||
|
:title="linhasExpandidas?.[i] ? 'Ocultar detalhes' : 'Mostrar detalhes'"
|
||||||
|
@click.stop="alternarLinhaExpandida(i)"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="linhasExpandidas?.[i] ? ChevronDown : ChevronRight"
|
||||||
|
class="eli-tabela__expander-icone"
|
||||||
|
:size="16"
|
||||||
|
:stroke-width="2"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td
|
||||||
|
v-for="(coluna, j) in colunas"
|
||||||
|
:key="`td-${i}-${j}`"
|
||||||
|
class="eli-tabela__td"
|
||||||
|
>
|
||||||
|
<EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td v-if="temAcoes" class="eli-tabela__td eli-tabela__td--acoes" :key="`td-${i}-acoes`">
|
||||||
|
<div
|
||||||
|
class="eli-tabela__acoes-container"
|
||||||
|
:class="[menuAberto === i ? 'eli-tabela__acoes-container--aberto' : undefined]"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="eli-tabela__acoes-toggle"
|
||||||
|
type="button"
|
||||||
|
:id="`eli-tabela-acoes-toggle-${i}`"
|
||||||
|
:disabled="!possuiAcoes(i)"
|
||||||
|
:aria-haspopup="'menu'"
|
||||||
|
:aria-expanded="menuAberto === i ? 'true' : 'false'"
|
||||||
|
:aria-controls="possuiAcoes(i) ? `eli-tabela-acoes-menu-${i}` : undefined"
|
||||||
|
:aria-label="possuiAcoes(i) ? 'Ações da linha' : 'Nenhuma ação disponível'"
|
||||||
|
:title="possuiAcoes(i) ? 'Ações' : 'Nenhuma ação disponível'"
|
||||||
|
@click.stop="toggleMenu(i, $event)"
|
||||||
|
>
|
||||||
|
<MoreVertical class="eli-tabela__acoes-toggle-icone" :size="18" :stroke-width="2" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr
|
||||||
|
v-if="temColunasInvisiveis && Boolean(linhasExpandidas?.[i])"
|
||||||
|
class="eli-tabela__tr eli-tabela__tr--detalhes"
|
||||||
|
:class="[i % 2 === 1 ? 'eli-tabela__tr--zebra' : undefined]"
|
||||||
|
>
|
||||||
|
<td
|
||||||
|
class="eli-tabela__td eli-tabela__td--detalhes"
|
||||||
|
:colspan="(temColunasInvisiveis ? 1 : 0) + colunas.length + (temAcoes ? 1 : 0)"
|
||||||
|
>
|
||||||
|
<EliTabelaDetalhesLinha :linha="linha" :colunasInvisiveis="colunasInvisiveis" />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</tbody>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
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";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaBody",
|
||||||
|
components: {
|
||||||
|
EliTabelaCelula,
|
||||||
|
EliTabelaDetalhesLinha,
|
||||||
|
MoreVertical,
|
||||||
|
ChevronRight,
|
||||||
|
ChevronDown,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
colunas: {
|
||||||
|
type: Array as PropType<Array<EliColuna<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: Array as PropType<Array<EliColuna<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
linhasExpandidas: {
|
||||||
|
type: Object as PropType<Record<number, boolean>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
linhas: {
|
||||||
|
type: Array as PropType<Array<unknown>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
temAcoes: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
menuAberto: {
|
||||||
|
type: Number as PropType<number | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
possuiAcoes: {
|
||||||
|
type: Function as PropType<(i: number) => boolean>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
toggleMenu: {
|
||||||
|
type: Function as PropType<(indice: number, evento: MouseEvent) => void>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
alternarLinhaExpandida: {
|
||||||
|
type: Function as PropType<(indice: number) => void>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
ChevronRight,
|
||||||
|
ChevronDown,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
124
src/componentes/EliTabela/EliTabelaCabecalho.vue
Normal file
124
src/componentes/EliTabela/EliTabelaCabecalho.vue
Normal file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<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>
|
||||||
137
src/componentes/EliTabela/EliTabelaCaixaDeBusca.vue
Normal file
137
src/componentes/EliTabela/EliTabelaCaixaDeBusca.vue
Normal file
|
|
@ -0,0 +1,137 @@
|
||||||
|
<template>
|
||||||
|
<div class="eli-tabela__busca">
|
||||||
|
<div class="eli-tabela__busca-input-wrapper">
|
||||||
|
<input
|
||||||
|
id="eli-tabela-busca"
|
||||||
|
v-model="texto"
|
||||||
|
type="search"
|
||||||
|
class="eli-tabela__busca-input"
|
||||||
|
placeholder="Digite termos para filtrar"
|
||||||
|
@keyup.enter="emitirBusca"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__busca-botao"
|
||||||
|
aria-label="Buscar"
|
||||||
|
title="Buscar"
|
||||||
|
@click="emitirBusca"
|
||||||
|
>
|
||||||
|
<Search class="eli-tabela__busca-botao-icone" :size="16" :stroke-width="2" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, watch } from "vue";
|
||||||
|
import { Search } from "lucide-vue-next";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCaixaDeBusca",
|
||||||
|
components: { Search },
|
||||||
|
props: {
|
||||||
|
modelo: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
buscar(valor: string) {
|
||||||
|
return typeof valor === "string";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
/**
|
||||||
|
* Estado local da entrada para que o usuário possa digitar livremente antes
|
||||||
|
* de disparar uma nova consulta.
|
||||||
|
*/
|
||||||
|
const texto = ref(props.modelo ?? "");
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelo,
|
||||||
|
(novo) => {
|
||||||
|
if (novo !== undefined && novo !== texto.value) {
|
||||||
|
texto.value = novo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
function emitirBusca() {
|
||||||
|
emit("buscar", texto.value.trim());
|
||||||
|
}
|
||||||
|
|
||||||
|
return { texto, emitirBusca };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__busca {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.eli-tabela__busca-input-wrapper {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: stretch;
|
||||||
|
border-radius: var(--eli-tabela-cabecalho-controle-radius, 8px);
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.15);
|
||||||
|
overflow: hidden;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
/* Herda do container do cabeçalho (.eli-tabela__cabecalho) quando presente. */
|
||||||
|
height: var(--eli-tabela-cabecalho-controle-altura, 34px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-input {
|
||||||
|
/* Mantém o input com a mesma altura do botão e dos botões de ação do cabeçalho. */
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 12px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: rgba(15, 23, 42, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-input::-webkit-search-cancel-button,
|
||||||
|
.eli-tabela__busca-input::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-input::placeholder {
|
||||||
|
color: rgba(107, 114, 128, 0.85);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-botao {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: none;
|
||||||
|
background: rgba(37, 99, 235, 0.12);
|
||||||
|
color: rgba(37, 99, 235, 0.95);
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-botao-icone {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-botao:hover,
|
||||||
|
.eli-tabela__busca-botao:focus-visible {
|
||||||
|
background: rgba(37, 99, 235, 0.2);
|
||||||
|
color: rgba(37, 99, 235, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__busca-botao:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.35);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
33
src/componentes/EliTabela/EliTabelaDebug.vue
Normal file
33
src/componentes/EliTabela/EliTabelaDebug.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<!-- Debug visual (somente DEV): expõe estados internos úteis para testes e diagnóstico -->
|
||||||
|
<div
|
||||||
|
v-if="isDev"
|
||||||
|
style="position: fixed; left: 8px; bottom: 8px; z-index: 999999; background: rgba(185,28,28,0.9); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; max-width: 500px;"
|
||||||
|
>
|
||||||
|
<div><b>EliTabela debug</b></div>
|
||||||
|
<div>menuAberto: {{ menuAberto }}</div>
|
||||||
|
<div>menuPos: top={{ menuPopupPos.top }}, left={{ menuPopupPos.left }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaDebug",
|
||||||
|
props: {
|
||||||
|
isDev: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
menuAberto: {
|
||||||
|
type: Number as PropType<number | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
menuPopupPos: {
|
||||||
|
type: Object as PropType<{ top: number; left: number }>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
35
src/componentes/EliTabela/EliTabelaDetalhesLinha.vue
Normal file
35
src/componentes/EliTabela/EliTabelaDetalhesLinha.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
<template>
|
||||||
|
<div class="eli-tabela__detalhes">
|
||||||
|
<div v-for="(coluna, idx) in colunasInvisiveis" :key="`det-${idx}-${coluna.rotulo}`" class="eli-tabela__detalhe">
|
||||||
|
<div class="eli-tabela__detalhe-rotulo">{{ coluna.rotulo }}</div>
|
||||||
|
<div class="eli-tabela__detalhe-valor">
|
||||||
|
<EliTabelaCelula :celula="(coluna.celula(linha as never) as never)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
import EliTabelaCelula from "./celulas/EliTabelaCelula.vue";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaDetalhesLinha",
|
||||||
|
components: { EliTabelaCelula },
|
||||||
|
props: {
|
||||||
|
linha: {
|
||||||
|
type: null as unknown as PropType<unknown>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colunasInvisiveis: {
|
||||||
|
type: Array as PropType<Array<EliColuna<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* estilos base ficam no EliTabela.css (global do componente) */
|
||||||
|
</style>
|
||||||
40
src/componentes/EliTabela/EliTabelaEstados.vue
Normal file
40
src/componentes/EliTabela/EliTabelaEstados.vue
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<!-- Estado de carregamento: consulta em andamento -->
|
||||||
|
<div v-if="carregando" class="eli-tabela eli-tabela--carregando" aria-busy="true">
|
||||||
|
Carregando...
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado de erro: mostra mensagem retornada pela consulta -->
|
||||||
|
<div v-else-if="erro" class="eli-tabela eli-tabela--erro" role="alert">
|
||||||
|
<div class="eli-tabela__erro-titulo">Erro</div>
|
||||||
|
<div class="eli-tabela__erro-mensagem">{{ erro }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Estado vazio: consulta sem registros -->
|
||||||
|
<div v-else class="eli-tabela eli-tabela--vazio">
|
||||||
|
{{ mensagemVazio ?? "Nenhum registro encontrado." }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaEstados",
|
||||||
|
props: {
|
||||||
|
carregando: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
erro: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
mensagemVazio: {
|
||||||
|
type: String as PropType<string | undefined>,
|
||||||
|
required: false,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
103
src/componentes/EliTabela/EliTabelaHead.vue
Normal file
103
src/componentes/EliTabela/EliTabelaHead.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<thead class="eli-tabela__thead">
|
||||||
|
<tr class="eli-tabela__tr eli-tabela__tr--header">
|
||||||
|
<th v-if="temColunasInvisiveis" class="eli-tabela__th eli-tabela__th--expander" scope="col"></th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
v-for="(coluna, idx) in colunas"
|
||||||
|
:key="`th-${idx}`"
|
||||||
|
class="eli-tabela__th"
|
||||||
|
:class="[isOrdenavel(coluna) ? 'eli-tabela__th--ordenavel' : undefined]"
|
||||||
|
scope="col"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-if="isOrdenavel(coluna)"
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__th-botao"
|
||||||
|
:class="[
|
||||||
|
colunaOrdenacao === String(coluna.coluna_ordem) ? 'eli-tabela__th-botao--ativo' : undefined,
|
||||||
|
]"
|
||||||
|
@click="emitAlternarOrdenacao(String(coluna.coluna_ordem))"
|
||||||
|
>
|
||||||
|
<span class="eli-tabela__th-texto">{{ coluna.rotulo }}</span>
|
||||||
|
|
||||||
|
<component
|
||||||
|
v-if="colunaOrdenacao === String(coluna.coluna_ordem)"
|
||||||
|
:is="direcaoOrdenacao === 'asc' ? ArrowUp : ArrowDown"
|
||||||
|
class="eli-tabela__th-icone"
|
||||||
|
:size="16"
|
||||||
|
:stroke-width="2"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<ArrowUp
|
||||||
|
v-else
|
||||||
|
class="eli-tabela__th-icone eli-tabela__th-icone--oculto"
|
||||||
|
:size="16"
|
||||||
|
:stroke-width="2"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span v-else class="eli-tabela__th-label">{{ coluna.rotulo }}</span>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th v-if="temAcoes" class="eli-tabela__th eli-tabela__th--acoes" scope="col">
|
||||||
|
Ações
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
import { ArrowDown, ArrowUp } from "lucide-vue-next";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaHead",
|
||||||
|
components: { ArrowUp, ArrowDown },
|
||||||
|
props: {
|
||||||
|
colunas: {
|
||||||
|
type: Array as PropType<Array<EliColuna<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
temAcoes: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
temColunasInvisiveis: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colunaOrdenacao: {
|
||||||
|
type: String as PropType<string | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
direcaoOrdenacao: {
|
||||||
|
type: String as PropType<"asc" | "desc">,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
alternarOrdenacao(chave: string) {
|
||||||
|
return typeof chave === "string" && chave.length > 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(_props, { emit }) {
|
||||||
|
function isOrdenavel(coluna: any) {
|
||||||
|
return coluna?.coluna_ordem !== undefined && coluna?.coluna_ordem !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitAlternarOrdenacao(chave: string) {
|
||||||
|
emit("alternarOrdenacao", chave);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
ArrowUp,
|
||||||
|
ArrowDown,
|
||||||
|
isOrdenavel,
|
||||||
|
emitAlternarOrdenacao,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
95
src/componentes/EliTabela/EliTabelaMenuAcoes.vue
Normal file
95
src/componentes/EliTabela/EliTabelaMenuAcoes.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<ul
|
||||||
|
v-if="menuAberto !== null && possuiAcoes"
|
||||||
|
:id="`eli-tabela-acoes-menu-${menuAberto}`"
|
||||||
|
ref="menuEl"
|
||||||
|
class="eli-tabela__acoes-menu"
|
||||||
|
role="menu"
|
||||||
|
:aria-labelledby="`eli-tabela-acoes-toggle-${menuAberto}`"
|
||||||
|
:style="{
|
||||||
|
position: 'fixed',
|
||||||
|
top: `${posicao.top}px`,
|
||||||
|
left: `${posicao.left}px`,
|
||||||
|
zIndex: 999999,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
v-for="item in acoes"
|
||||||
|
:key="`acao-${menuAberto}-${item.indice}`"
|
||||||
|
class="eli-tabela__acoes-item"
|
||||||
|
role="none"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__acoes-item-botao"
|
||||||
|
:style="{ color: item.acao.cor }"
|
||||||
|
role="menuitem"
|
||||||
|
:aria-label="item.acao.rotulo"
|
||||||
|
:title="item.acao.rotulo"
|
||||||
|
@click.stop="emitExecutar(item)"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="item.acao.icone"
|
||||||
|
class="eli-tabela__acoes-item-icone"
|
||||||
|
:size="16"
|
||||||
|
:stroke-width="2"
|
||||||
|
/>
|
||||||
|
<span class="eli-tabela__acoes-item-texto">{{ item.acao.rotulo }}</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType, ref } from "vue";
|
||||||
|
import type { EliTabelaAcao } from "./types-eli-tabela";
|
||||||
|
|
||||||
|
type ItemAcao<T> = {
|
||||||
|
acao: EliTabelaAcao<T>;
|
||||||
|
indice: number;
|
||||||
|
visivel: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaMenuAcoes",
|
||||||
|
props: {
|
||||||
|
menuAberto: {
|
||||||
|
type: Number as PropType<number | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
posicao: {
|
||||||
|
type: Object as PropType<{ top: number; left: number }>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
acoes: {
|
||||||
|
type: Array as PropType<Array<ItemAcao<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
linha: {
|
||||||
|
// Aceita qualquer tipo de linha (objeto, string, etc.) sem validação runtime.
|
||||||
|
type: null as unknown as PropType<unknown | null>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
executar(payload: { acao: EliTabelaAcao<any>; linha: unknown }) {
|
||||||
|
return payload !== null && typeof payload === "object";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, { emit, expose }) {
|
||||||
|
const menuEl = ref<HTMLElement | null>(null);
|
||||||
|
expose({ menuEl });
|
||||||
|
|
||||||
|
const possuiAcoes = computed(() => props.acoes.length > 0);
|
||||||
|
|
||||||
|
function emitExecutar(item: { acao: EliTabelaAcao<any> }) {
|
||||||
|
if (!props.linha) return;
|
||||||
|
emit("executar", { acao: item.acao, linha: props.linha });
|
||||||
|
}
|
||||||
|
|
||||||
|
return { menuEl, possuiAcoes, emitExecutar };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
408
src/componentes/EliTabela/EliTabelaModalColunas.vue
Normal file
408
src/componentes/EliTabela/EliTabelaModalColunas.vue
Normal file
|
|
@ -0,0 +1,408 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="aberto" class="eli-tabela-modal-colunas__overlay" role="presentation" @click.self="emitFechar">
|
||||||
|
<div
|
||||||
|
class="eli-tabela-modal-colunas__modal"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-label="Configurar colunas"
|
||||||
|
>
|
||||||
|
<header class="eli-tabela-modal-colunas__header">
|
||||||
|
<h3 class="eli-tabela-modal-colunas__titulo">Colunas</h3>
|
||||||
|
<button type="button" class="eli-tabela-modal-colunas__fechar" aria-label="Fechar" @click="emitFechar">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="eli-tabela-modal-colunas__conteudo">
|
||||||
|
<div class="eli-tabela-modal-colunas__coluna">
|
||||||
|
<div class="eli-tabela-modal-colunas__coluna-titulo">Visíveis</div>
|
||||||
|
<div
|
||||||
|
class="eli-tabela-modal-colunas__lista"
|
||||||
|
@dragover.prevent
|
||||||
|
@drop="(e) => onDropLista(e, 'visiveis', null)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(rotulo, idx) in visiveisLocal"
|
||||||
|
:key="`vis-${rotulo}`"
|
||||||
|
class="eli-tabela-modal-colunas__item"
|
||||||
|
draggable="true"
|
||||||
|
@dragstart="(e) => onDragStart(e, rotulo, 'visiveis', idx)"
|
||||||
|
@dragover.prevent
|
||||||
|
@drop="(e) => onDropItem(e, 'visiveis', idx)"
|
||||||
|
>
|
||||||
|
<span class="eli-tabela-modal-colunas__item-handle" aria-hidden="true">⋮⋮</span>
|
||||||
|
<span class="eli-tabela-modal-colunas__item-texto">{{ rotulo }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eli-tabela-modal-colunas__coluna">
|
||||||
|
<div class="eli-tabela-modal-colunas__coluna-titulo">Invisíveis</div>
|
||||||
|
<div
|
||||||
|
class="eli-tabela-modal-colunas__lista"
|
||||||
|
@dragover.prevent
|
||||||
|
@drop="(e) => onDropLista(e, 'invisiveis', null)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(rotulo, idx) in invisiveisLocal"
|
||||||
|
:key="`inv-${rotulo}`"
|
||||||
|
class="eli-tabela-modal-colunas__item"
|
||||||
|
draggable="true"
|
||||||
|
@dragstart="(e) => onDragStart(e, rotulo, 'invisiveis', idx)"
|
||||||
|
@dragover.prevent
|
||||||
|
@drop="(e) => onDropItem(e, 'invisiveis', idx)"
|
||||||
|
>
|
||||||
|
<span class="eli-tabela-modal-colunas__item-handle" aria-hidden="true">⋮⋮</span>
|
||||||
|
<span class="eli-tabela-modal-colunas__item-texto">{{ rotulo }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="eli-tabela-modal-colunas__footer">
|
||||||
|
<button type="button" class="eli-tabela-modal-colunas__botao eli-tabela-modal-colunas__botao--sec" @click="emitFechar">
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
<button type="button" class="eli-tabela-modal-colunas__botao eli-tabela-modal-colunas__botao--prim" @click="emitSalvar">
|
||||||
|
Salvar
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType, ref, watch } from "vue";
|
||||||
|
import type { EliTabelaColunasConfig } from "./colunasStorage";
|
||||||
|
import type { EliColuna } from "./types-eli-tabela";
|
||||||
|
|
||||||
|
type OrigemLista = "visiveis" | "invisiveis";
|
||||||
|
|
||||||
|
type DragPayload = {
|
||||||
|
rotulo: string;
|
||||||
|
origem: OrigemLista;
|
||||||
|
index: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DRAG_MIME = "application/x-eli-tabela-coluna";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaModalColunas",
|
||||||
|
props: {
|
||||||
|
aberto: {
|
||||||
|
type: Boolean,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
rotulosColunas: {
|
||||||
|
type: Array as PropType<string[]>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
configInicial: {
|
||||||
|
type: Object as PropType<EliTabelaColunasConfig>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
colunas: {
|
||||||
|
type: Array as PropType<Array<EliColuna<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
fechar() {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
salvar(_config: EliTabelaColunasConfig) {
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const visiveisLocal = ref<string[]>([]);
|
||||||
|
const invisiveisLocal = ref<string[]>([]);
|
||||||
|
|
||||||
|
function sincronizarEstado() {
|
||||||
|
const todos = props.rotulosColunas;
|
||||||
|
const configTemDados =
|
||||||
|
(props.configInicial.visiveis?.length ?? 0) > 0 ||
|
||||||
|
(props.configInicial.invisiveis?.length ?? 0) > 0;
|
||||||
|
|
||||||
|
const invisiveisPadraoSet = new Set(
|
||||||
|
props.colunas.filter((c) => c.visivel === false).map((c) => c.rotulo)
|
||||||
|
);
|
||||||
|
|
||||||
|
const invisiveisSet = configTemDados
|
||||||
|
? new Set(props.configInicial.invisiveis ?? [])
|
||||||
|
: invisiveisPadraoSet;
|
||||||
|
|
||||||
|
const baseVisiveis = todos.filter((r) => !invisiveisSet.has(r));
|
||||||
|
|
||||||
|
// ordenação: aplica ordem salva (visiveis) e adiciona novas ao final
|
||||||
|
const ordemSalva = props.configInicial.visiveis ?? [];
|
||||||
|
const setVis = new Set(baseVisiveis);
|
||||||
|
const ordenadas: string[] = [];
|
||||||
|
|
||||||
|
for (const r of ordemSalva) {
|
||||||
|
if (setVis.has(r)) ordenadas.push(r);
|
||||||
|
}
|
||||||
|
for (const r of baseVisiveis) {
|
||||||
|
if (!ordenadas.includes(r)) ordenadas.push(r);
|
||||||
|
}
|
||||||
|
|
||||||
|
visiveisLocal.value = ordenadas;
|
||||||
|
|
||||||
|
// invisíveis: somente as que existem na tabela
|
||||||
|
invisiveisLocal.value = todos.filter((r) => invisiveisSet.has(r));
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.aberto, props.rotulosColunas, props.configInicial, props.colunas] as const,
|
||||||
|
() => {
|
||||||
|
if (props.aberto) sincronizarEstado();
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
function emitFechar() {
|
||||||
|
emit("fechar");
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitSalvar() {
|
||||||
|
emit("salvar", {
|
||||||
|
visiveis: [...visiveisLocal.value],
|
||||||
|
invisiveis: [...invisiveisLocal.value],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeDragData(e: DragEvent, payload: DragPayload) {
|
||||||
|
try {
|
||||||
|
e.dataTransfer?.setData(DRAG_MIME, JSON.stringify(payload));
|
||||||
|
e.dataTransfer?.setData("text/plain", payload.rotulo);
|
||||||
|
e.dataTransfer!.effectAllowed = "move";
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function readDragData(e: DragEvent): DragPayload | null {
|
||||||
|
try {
|
||||||
|
const raw = e.dataTransfer?.getData(DRAG_MIME);
|
||||||
|
if (!raw) return null;
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
if (!parsed || typeof parsed.rotulo !== "string" || (parsed.origem !== "visiveis" && parsed.origem !== "invisiveis")) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return parsed as DragPayload;
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function removerDaOrigem(payload: DragPayload) {
|
||||||
|
const origemArr = payload.origem === "visiveis" ? visiveisLocal.value : invisiveisLocal.value;
|
||||||
|
const idx = origemArr.indexOf(payload.rotulo);
|
||||||
|
if (idx >= 0) origemArr.splice(idx, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function inserirNoDestino(destino: OrigemLista, rotulo: string, index: number | null) {
|
||||||
|
const arr = destino === "visiveis" ? visiveisLocal.value : invisiveisLocal.value;
|
||||||
|
// remove duplicatas
|
||||||
|
const existing = arr.indexOf(rotulo);
|
||||||
|
if (existing >= 0) arr.splice(existing, 1);
|
||||||
|
|
||||||
|
if (index === null || index < 0 || index > arr.length) {
|
||||||
|
arr.push(rotulo);
|
||||||
|
} else {
|
||||||
|
arr.splice(index, 0, rotulo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDragStart(e: DragEvent, rotulo: string, origem: OrigemLista, index: number) {
|
||||||
|
writeDragData(e, { rotulo, origem, index });
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDropItem(e: DragEvent, destino: OrigemLista, index: number) {
|
||||||
|
const payload = readDragData(e);
|
||||||
|
if (!payload) return;
|
||||||
|
|
||||||
|
// remove da origem e insere no destino na posição do item
|
||||||
|
removerDaOrigem(payload);
|
||||||
|
inserirNoDestino(destino, payload.rotulo, index);
|
||||||
|
|
||||||
|
// garante que uma coluna não fique nos 2 lados
|
||||||
|
if (destino === "visiveis") {
|
||||||
|
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo);
|
||||||
|
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1);
|
||||||
|
} else {
|
||||||
|
const idxVis = visiveisLocal.value.indexOf(payload.rotulo);
|
||||||
|
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDropLista(e: DragEvent, destino: OrigemLista, _index: number | null) {
|
||||||
|
const payload = readDragData(e);
|
||||||
|
if (!payload) return;
|
||||||
|
|
||||||
|
removerDaOrigem(payload);
|
||||||
|
inserirNoDestino(destino, payload.rotulo, null);
|
||||||
|
|
||||||
|
if (destino === "visiveis") {
|
||||||
|
const idxInv = invisiveisLocal.value.indexOf(payload.rotulo);
|
||||||
|
if (idxInv >= 0) invisiveisLocal.value.splice(idxInv, 1);
|
||||||
|
} else {
|
||||||
|
const idxVis = visiveisLocal.value.indexOf(payload.rotulo);
|
||||||
|
if (idxVis >= 0) visiveisLocal.value.splice(idxVis, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
visiveisLocal,
|
||||||
|
invisiveisLocal,
|
||||||
|
emitFechar,
|
||||||
|
emitSalvar,
|
||||||
|
onDragStart,
|
||||||
|
onDropItem,
|
||||||
|
onDropLista,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela-modal-colunas__overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.35);
|
||||||
|
z-index: 4000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__modal {
|
||||||
|
width: min(860px, 100%);
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.1);
|
||||||
|
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__titulo {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__fechar {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(15, 23, 42, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__fechar:hover,
|
||||||
|
.eli-tabela-modal-colunas__fechar:focus-visible {
|
||||||
|
background: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__conteudo {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__coluna-titulo {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__lista {
|
||||||
|
min-height: 260px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(15, 23, 42, 0.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
background: #fff;
|
||||||
|
cursor: grab;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__item + .eli-tabela-modal-colunas__item {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__item:active {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__item-handle {
|
||||||
|
color: rgba(15, 23, 42, 0.55);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__item-texto {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-top: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__botao {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
background: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__botao--sec:hover,
|
||||||
|
.eli-tabela-modal-colunas__botao--sec:focus-visible {
|
||||||
|
background: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__botao--prim {
|
||||||
|
border: none;
|
||||||
|
background: rgba(37, 99, 235, 0.95);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-colunas__botao--prim:hover,
|
||||||
|
.eli-tabela-modal-colunas__botao--prim:focus-visible {
|
||||||
|
background: rgba(37, 99, 235, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.eli-tabela-modal-colunas__conteudo {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
391
src/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue
Normal file
391
src/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue
Normal file
|
|
@ -0,0 +1,391 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="aberto" class="eli-tabela-modal-filtro__overlay" role="presentation" @click.self="emitFechar">
|
||||||
|
<div class="eli-tabela-modal-filtro__modal" role="dialog" aria-modal="true" aria-label="Filtro avançado">
|
||||||
|
<header class="eli-tabela-modal-filtro__header">
|
||||||
|
<h3 class="eli-tabela-modal-filtro__titulo">Filtro avançado</h3>
|
||||||
|
<button type="button" class="eli-tabela-modal-filtro__fechar" aria-label="Fechar" @click="emitFechar">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="eli-tabela-modal-filtro__conteudo">
|
||||||
|
<div v-if="!filtrosBase.length" class="eli-tabela-modal-filtro__vazio">
|
||||||
|
Nenhum filtro configurado na tabela.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="eli-tabela-modal-filtro__lista">
|
||||||
|
<div v-for="(linha, idx) in linhas" :key="String(linha.coluna)" class="eli-tabela-modal-filtro__linha">
|
||||||
|
<div class="eli-tabela-modal-filtro__entrada">
|
||||||
|
<component
|
||||||
|
:is="componenteEntrada(linha.entrada)"
|
||||||
|
v-model:value="linha.valor"
|
||||||
|
:opcoes="opcoesEntrada(linha.entrada)"
|
||||||
|
density="compact"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela-modal-filtro__remover"
|
||||||
|
title="Remover"
|
||||||
|
aria-label="Remover"
|
||||||
|
@click="remover(idx)"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eli-tabela-modal-filtro__acoes">
|
||||||
|
<select v-model="colunaParaAdicionar" class="eli-tabela-modal-filtro__select" :disabled="!opcoesParaAdicionar.length">
|
||||||
|
<option disabled value="">Selecione um filtro…</option>
|
||||||
|
<option v-for="o in opcoesParaAdicionar" :key="String(o.coluna)" :value="String(o.coluna)">
|
||||||
|
{{ rotuloDoFiltro(o) }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela-modal-filtro__botao"
|
||||||
|
@click="adicionar"
|
||||||
|
:disabled="!colunaParaAdicionar"
|
||||||
|
>
|
||||||
|
Adicionar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="eli-tabela-modal-filtro__footer">
|
||||||
|
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--sec" @click="emitLimpar">
|
||||||
|
Limpar
|
||||||
|
</button>
|
||||||
|
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--sec" @click="emitFechar">
|
||||||
|
Cancelar
|
||||||
|
</button>
|
||||||
|
<button type="button" class="eli-tabela-modal-filtro__botao eli-tabela-modal-filtro__botao--prim" @click="emitSalvar">
|
||||||
|
Aplicar
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
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";
|
||||||
|
|
||||||
|
type FiltroBase<T> = NonNullable<EliTabelaConsulta<T>["filtroAvancado"]>[number];
|
||||||
|
|
||||||
|
type LinhaFiltro<T> = {
|
||||||
|
coluna: keyof T;
|
||||||
|
entrada: ComponenteEntrada;
|
||||||
|
operador: string;
|
||||||
|
valor: any;
|
||||||
|
};
|
||||||
|
|
||||||
|
function isTipoEntrada(v: unknown): v is TipoEntrada {
|
||||||
|
return v === "texto" || v === "numero" || v === "dataHora";
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotuloDoFiltro(f: FiltroBase<any>) {
|
||||||
|
const rotulo = (f?.entrada?.[1] as any)?.rotulo;
|
||||||
|
return rotulo ? String(rotulo) : String(f?.coluna ?? "Filtro");
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaModalFiltroAvancado",
|
||||||
|
props: {
|
||||||
|
aberto: { type: Boolean, required: true },
|
||||||
|
filtrosBase: {
|
||||||
|
type: Array as PropType<Array<FiltroBase<any>>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
modelo: {
|
||||||
|
type: Array as PropType<Array<any>>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
fechar: () => true,
|
||||||
|
limpar: () => true,
|
||||||
|
salvar: (_linhas: any[]) => true,
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const linhas = ref<Array<LinhaFiltro<any>>>([]);
|
||||||
|
|
||||||
|
const colunaParaAdicionar = ref<string>("");
|
||||||
|
|
||||||
|
const colunasDisponiveis = computed(() => (props.filtrosBase ?? []).map((b) => String(b.coluna)));
|
||||||
|
|
||||||
|
const opcoesParaAdicionar = computed(() => {
|
||||||
|
const usadas = new Set(linhas.value.map((l) => String(l.coluna)));
|
||||||
|
return (props.filtrosBase ?? []).filter((b) => !usadas.has(String(b.coluna)));
|
||||||
|
});
|
||||||
|
|
||||||
|
function componenteEntrada(entrada: ComponenteEntrada) {
|
||||||
|
const tipo = entrada?.[0];
|
||||||
|
if (tipo === "numero") return EliEntradaNumero;
|
||||||
|
if (tipo === "dataHora") return EliEntradaDataHora;
|
||||||
|
return EliEntradaTexto;
|
||||||
|
}
|
||||||
|
|
||||||
|
function opcoesEntrada(entrada: ComponenteEntrada) {
|
||||||
|
// o rótulo vem do próprio componente (entrada[1].rotulo)
|
||||||
|
return (entrada?.[1] as any) ?? { rotulo: "" };
|
||||||
|
}
|
||||||
|
|
||||||
|
function valorInicialPorEntrada(entrada: ComponenteEntrada) {
|
||||||
|
const tipo = entrada?.[0];
|
||||||
|
if (tipo === "numero") return null;
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizarModelo() {
|
||||||
|
const base = props.filtrosBase ?? [];
|
||||||
|
const modelo = Array.isArray(props.modelo) ? props.modelo : [];
|
||||||
|
linhas.value = modelo.map((m: any) => {
|
||||||
|
// operador vem travado no base
|
||||||
|
const baseItem = base.find((b) => String(b.coluna) === String(m.coluna)) ?? base[0];
|
||||||
|
const entrada = (baseItem?.entrada ?? m.entrada) as ComponenteEntrada;
|
||||||
|
const col = (baseItem?.coluna ?? m.coluna) as any;
|
||||||
|
const op = String(baseItem?.operador ?? "=");
|
||||||
|
const val = m.valor ?? valorInicialPorEntrada(entrada);
|
||||||
|
|
||||||
|
return {
|
||||||
|
coluna: col,
|
||||||
|
operador: op,
|
||||||
|
entrada,
|
||||||
|
valor: val,
|
||||||
|
} as LinhaFiltro<any>;
|
||||||
|
});
|
||||||
|
|
||||||
|
// se vazio e existe base, adiciona 1 linha default
|
||||||
|
// não auto-adiciona; usuário escolhe quais filtros quer usar
|
||||||
|
|
||||||
|
// se algum filtro mudou a coluna para valor inválido, ajusta
|
||||||
|
for (const l of linhas.value) {
|
||||||
|
if (!colunasDisponiveis.value.includes(String(l.coluna))) continue;
|
||||||
|
l.operador = String((base.find((b) => String(b.coluna) === String(l.coluna))?.operador ?? "="));
|
||||||
|
// sanity
|
||||||
|
if (l.entrada && !isTipoEntrada(l.entrada[0])) {
|
||||||
|
l.entrada = ["texto", { rotulo: "Valor" }] as any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [props.aberto, props.filtrosBase, props.modelo] as const,
|
||||||
|
() => {
|
||||||
|
if (props.aberto) normalizarModelo();
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
function adicionar() {
|
||||||
|
if (!colunaParaAdicionar.value) return;
|
||||||
|
const b0 = (props.filtrosBase ?? []).find((b) => String(b.coluna) === String(colunaParaAdicionar.value));
|
||||||
|
if (!b0) return;
|
||||||
|
// evita repetição
|
||||||
|
if (linhas.value.some((l) => String(l.coluna) === String(b0.coluna))) return;
|
||||||
|
|
||||||
|
linhas.value.push({
|
||||||
|
coluna: b0.coluna as any,
|
||||||
|
entrada: b0.entrada,
|
||||||
|
operador: String(b0.operador ?? "="),
|
||||||
|
valor: valorInicialPorEntrada(b0.entrada),
|
||||||
|
});
|
||||||
|
|
||||||
|
colunaParaAdicionar.value = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
function remover(idx: number) {
|
||||||
|
linhas.value.splice(idx, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitFechar() {
|
||||||
|
emit("fechar");
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitLimpar() {
|
||||||
|
emit("limpar");
|
||||||
|
}
|
||||||
|
|
||||||
|
function emitSalvar() {
|
||||||
|
emit(
|
||||||
|
"salvar",
|
||||||
|
linhas.value.map((l) => ({
|
||||||
|
coluna: l.coluna,
|
||||||
|
valor: l.valor,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
linhas,
|
||||||
|
opcoesParaAdicionar,
|
||||||
|
colunaParaAdicionar,
|
||||||
|
componenteEntrada,
|
||||||
|
opcoesEntrada,
|
||||||
|
adicionar,
|
||||||
|
remover,
|
||||||
|
// exibimos operador fixo só como texto
|
||||||
|
emitFechar,
|
||||||
|
emitSalvar,
|
||||||
|
emitLimpar,
|
||||||
|
rotuloDoFiltro,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela-modal-filtro__overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(15, 23, 42, 0.35);
|
||||||
|
z-index: 4000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__modal {
|
||||||
|
width: min(980px, 100%);
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 14px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.1);
|
||||||
|
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.25);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__titulo {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__fechar {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(15, 23, 42, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__fechar:hover,
|
||||||
|
.eli-tabela-modal-filtro__fechar:focus-visible {
|
||||||
|
background: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__conteudo {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__vazio {
|
||||||
|
opacity: 0.75;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__lista {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__linha {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 34px;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__select {
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__entrada {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__remover {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
background: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1;
|
||||||
|
color: rgba(15, 23, 42, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__remover:hover,
|
||||||
|
.eli-tabela-modal-filtro__remover:focus-visible {
|
||||||
|
background: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__acoes {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 14px 16px;
|
||||||
|
border-top: 1px solid rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__botao {
|
||||||
|
height: 34px;
|
||||||
|
padding: 0 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
background: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__botao:disabled {
|
||||||
|
opacity: 0.55;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__botao--sec:hover,
|
||||||
|
.eli-tabela-modal-filtro__botao--sec:focus-visible {
|
||||||
|
background: rgba(15, 23, 42, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__botao--prim {
|
||||||
|
border: none;
|
||||||
|
background: rgba(37, 99, 235, 0.95);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela-modal-filtro__botao--prim:hover,
|
||||||
|
.eli-tabela-modal-filtro__botao--prim:focus-visible {
|
||||||
|
background: rgba(37, 99, 235, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
.eli-tabela-modal-filtro__linha {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
244
src/componentes/EliTabela/EliTabelaPaginacao.vue
Normal file
244
src/componentes/EliTabela/EliTabelaPaginacao.vue
Normal file
|
|
@ -0,0 +1,244 @@
|
||||||
|
<template>
|
||||||
|
<nav
|
||||||
|
v-if="totalPaginasExibidas > 1"
|
||||||
|
class="eli-tabela__paginacao"
|
||||||
|
role="navigation"
|
||||||
|
aria-label="Paginação de resultados"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__pagina-botao"
|
||||||
|
:disabled="anteriorDesabilitado"
|
||||||
|
aria-label="Página anterior"
|
||||||
|
@click="irParaPagina(paginaAtual - 1)"
|
||||||
|
>
|
||||||
|
<<
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<template v-for="(item, index) in botoes" :key="`${item.label}-${index}`">
|
||||||
|
<span
|
||||||
|
v-if="item.ehEllipsis"
|
||||||
|
class="eli-tabela__pagina-ellipsis"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
v-else
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__pagina-botao"
|
||||||
|
:class="item.ativo ? 'eli-tabela__pagina-botao--ativo' : undefined"
|
||||||
|
:disabled="item.ativo"
|
||||||
|
:aria-current="item.ativo ? 'page' : undefined"
|
||||||
|
:aria-label="`Ir para página ${item.label}`"
|
||||||
|
@click="irParaPagina(item.pagina)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__pagina-botao"
|
||||||
|
:disabled="proximaDesabilitada"
|
||||||
|
aria-label="Próxima página"
|
||||||
|
@click="irParaPagina(paginaAtual + 1)"
|
||||||
|
>
|
||||||
|
>>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaPaginacao",
|
||||||
|
props: {
|
||||||
|
pagina: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
totalPaginas: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
maximoBotoes: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emits: {
|
||||||
|
alterar(pagina: number) {
|
||||||
|
return Number.isFinite(pagina);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, { emit }) {
|
||||||
|
/**
|
||||||
|
* Define o limite de botões visíveis. Mantemos um mínimo de 7 para garantir
|
||||||
|
* uma navegação confortável, mesmo quando o consumidor não informa o valor.
|
||||||
|
*/
|
||||||
|
const maximoBotoesVisiveis = computed(() => {
|
||||||
|
const valor = props.maximoBotoes;
|
||||||
|
if (typeof valor === "number" && valor >= 5) {
|
||||||
|
return Math.floor(valor);
|
||||||
|
}
|
||||||
|
return 7;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constrói a lista de botões/reticências que serão exibidos na paginação.
|
||||||
|
* Mantemos sempre a primeira e a última página visíveis, posicionando as
|
||||||
|
* demais de forma dinâmica ao redor da página atual.
|
||||||
|
*/
|
||||||
|
const botoes = computed(() => {
|
||||||
|
const total = props.totalPaginas;
|
||||||
|
const atual = props.pagina;
|
||||||
|
const limite = maximoBotoesVisiveis.value;
|
||||||
|
const resultado: Array<{
|
||||||
|
label: string;
|
||||||
|
pagina?: number;
|
||||||
|
ativo?: boolean;
|
||||||
|
ehEllipsis?: boolean;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
const adicionarPagina = (pagina: number) => {
|
||||||
|
resultado.push({
|
||||||
|
label: String(pagina),
|
||||||
|
pagina,
|
||||||
|
ativo: pagina === atual,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const adicionarReticencias = () => {
|
||||||
|
resultado.push({ label: "…", ehEllipsis: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
if (total <= limite) {
|
||||||
|
for (let pagina = 1; pagina <= total; pagina += 1) {
|
||||||
|
adicionarPagina(pagina);
|
||||||
|
}
|
||||||
|
return resultado;
|
||||||
|
}
|
||||||
|
|
||||||
|
const visiveisCentrais = Math.max(3, limite - 2);
|
||||||
|
let inicio = Math.max(2, atual - Math.floor(visiveisCentrais / 2));
|
||||||
|
let fim = inicio + visiveisCentrais - 1;
|
||||||
|
|
||||||
|
if (fim >= total) {
|
||||||
|
fim = total - 1;
|
||||||
|
inicio = fim - visiveisCentrais + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
adicionarPagina(1);
|
||||||
|
|
||||||
|
if (inicio > 2) {
|
||||||
|
adicionarReticencias();
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let pagina = inicio; pagina <= fim; pagina += 1) {
|
||||||
|
adicionarPagina(pagina);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (fim < total - 1) {
|
||||||
|
adicionarReticencias();
|
||||||
|
}
|
||||||
|
|
||||||
|
adicionarPagina(total);
|
||||||
|
|
||||||
|
return resultado;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Emite a requisição de mudança de página garantindo que o valor esteja
|
||||||
|
* dentro dos limites válidos informados pelo componente pai.
|
||||||
|
*/
|
||||||
|
function irParaPagina(pagina: number | undefined) {
|
||||||
|
if (!pagina) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const alvo = Math.min(Math.max(1, pagina), props.totalPaginas);
|
||||||
|
if (alvo !== props.pagina) {
|
||||||
|
emit("alterar", alvo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const anteriorDesabilitado = computed(() => props.pagina <= 1);
|
||||||
|
const proximaDesabilitada = computed(() => props.pagina >= props.totalPaginas);
|
||||||
|
const paginaAtual = computed(() => props.pagina);
|
||||||
|
const totalPaginasExibidas = computed(() => props.totalPaginas);
|
||||||
|
|
||||||
|
return {
|
||||||
|
botoes,
|
||||||
|
irParaPagina,
|
||||||
|
anteriorDesabilitado,
|
||||||
|
proximaDesabilitada,
|
||||||
|
paginaAtual,
|
||||||
|
totalPaginasExibidas,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__paginacao {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
margin-top: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-botao {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 6px 14px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||||
|
background: #ffffff;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: rgba(15, 23, 42, 0.82);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.2s ease, border-color 0.2s ease,
|
||||||
|
color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-botao:hover,
|
||||||
|
.eli-tabela__pagina-botao:focus-visible {
|
||||||
|
background-color: rgba(37, 99, 235, 0.08);
|
||||||
|
border-color: rgba(37, 99, 235, 0.4);
|
||||||
|
color: rgba(37, 99, 235, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-botao:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-botao:disabled {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: rgba(148, 163, 184, 0.08);
|
||||||
|
border-color: rgba(148, 163, 184, 0.18);
|
||||||
|
color: rgba(71, 85, 105, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-botao--ativo {
|
||||||
|
background: rgba(37, 99, 235, 0.12);
|
||||||
|
border-color: rgba(37, 99, 235, 0.4);
|
||||||
|
color: rgba(37, 99, 235, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__pagina-ellipsis {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 32px;
|
||||||
|
color: rgba(107, 114, 128, 0.85);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
39
src/componentes/EliTabela/celulas/EliTabelaCelula.vue
Normal file
39
src/componentes/EliTabela/celulas/EliTabelaCelula.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<!--
|
||||||
|
Os componentes de célula possuem props tipadas por `tipo`.
|
||||||
|
Aqui o TS do template não consegue inferir o narrowing do union do `dados`,
|
||||||
|
então normalizamos para `unknown` e deixamos a validação de runtime do Vue.
|
||||||
|
-->
|
||||||
|
<component :is="Componente" :dados="dadosParaComponente" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Component } from "vue";
|
||||||
|
import { computed, defineComponent, PropType } from "vue";
|
||||||
|
|
||||||
|
import type { ComponenteCelula, TipoTabelaCelula, TiposTabelaCelulas } from "../types-eli-tabela";
|
||||||
|
import { registryTabelaCelulas } from "./registryTabelaCelulas";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCelula",
|
||||||
|
props: {
|
||||||
|
celula: {
|
||||||
|
// `ComponenteCelula` é uma tupla `readonly [tipo, dados]`.
|
||||||
|
type: Array as unknown as PropType<ComponenteCelula>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
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`.
|
||||||
|
const Componente = computed(() => registryTabelaCelulas[tipo.value] as unknown as Component);
|
||||||
|
|
||||||
|
const dadosParaComponente = computed(() => dados.value);
|
||||||
|
|
||||||
|
return { Componente, dadosParaComponente };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
78
src/componentes/EliTabela/celulas/EliTabelaCelulaData.vue
Normal file
78
src/componentes/EliTabela/celulas/EliTabelaCelulaData.vue
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
v-if="dados?.acao"
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__celula-link"
|
||||||
|
@click.stop.prevent="dados.acao()"
|
||||||
|
>
|
||||||
|
{{ textoData }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<span v-else>{{ textoData }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType } from "vue";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import relativeTime from "dayjs/plugin/relativeTime";
|
||||||
|
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
|
||||||
|
// Necessário para `fromNow()`.
|
||||||
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCelulaData",
|
||||||
|
props: {
|
||||||
|
dados: {
|
||||||
|
type: Object as PropType<TiposTabelaCelulas["data"]>,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup({ dados }) {
|
||||||
|
const textoData = computed(() => {
|
||||||
|
const valorIso = dados?.valor;
|
||||||
|
if (!valorIso) return "";
|
||||||
|
|
||||||
|
const formato = dados?.formato ?? "data";
|
||||||
|
|
||||||
|
if (formato === "relativo") {
|
||||||
|
return dayjs(valorIso).fromNow();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formato === "data_hora") {
|
||||||
|
// Padrão pt-BR simples (sem depender de locale do dayjs)
|
||||||
|
return dayjs(valorIso).format("DD/MM/YYYY HH:mm");
|
||||||
|
}
|
||||||
|
|
||||||
|
// formato === "data"
|
||||||
|
return dayjs(valorIso).format("DD/MM/YYYY");
|
||||||
|
});
|
||||||
|
|
||||||
|
return { dados, textoData };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__celula-link {
|
||||||
|
all: unset;
|
||||||
|
display: inline;
|
||||||
|
color: #2563eb;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(37, 99, 235, 0.55);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
text-decoration-color: rgba(29, 78, 216, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
src/componentes/EliTabela/celulas/EliTabelaCelulaNumero.vue
Normal file
64
src/componentes/EliTabela/celulas/EliTabelaCelulaNumero.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
v-if="dados?.acao"
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__celula-link"
|
||||||
|
@click.stop.prevent="dados.acao()"
|
||||||
|
>
|
||||||
|
{{ textoNumero }}
|
||||||
|
</button>
|
||||||
|
<span v-else>{{ textoNumero }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { computed, defineComponent, PropType } from "vue"
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCelulaNumero",
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
dados: {
|
||||||
|
type: Object as PropType<TiposTabelaCelulas["numero"]>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup({ dados }) {
|
||||||
|
const textoNumero = computed(() => {
|
||||||
|
// Mantemos o comportamento anterior (trocar "." por ","), mas agora suportamos prefixo/sufixo.
|
||||||
|
const numero = String(dados?.numero).replace(".", ",");
|
||||||
|
const prefixo = dados?.prefixo?.trim();
|
||||||
|
const sufixo = dados?.sufixo?.trim();
|
||||||
|
|
||||||
|
const inicio = prefixo ? `${prefixo} ` : "";
|
||||||
|
const fim = sufixo ? ` ${sufixo}` : "";
|
||||||
|
|
||||||
|
return `${inicio}${numero}${fim}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { dados, textoNumero }
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__celula-link {
|
||||||
|
all: unset;
|
||||||
|
display: inline;
|
||||||
|
color: #2563eb;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(37, 99, 235, 0.55);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
text-decoration-color: rgba(29, 78, 216, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
61
src/componentes/EliTabela/celulas/EliTabelaCelulaTags.vue
Normal file
61
src/componentes/EliTabela/celulas/EliTabelaCelulaTags.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
||||||
|
<template>
|
||||||
|
<div class="eli-tabela__celula-tags">
|
||||||
|
<v-chip
|
||||||
|
v-for="(tag, idx) in dados?.opcoes ?? []"
|
||||||
|
:key="idx"
|
||||||
|
class="eli-tabela__celula-tag"
|
||||||
|
size="small"
|
||||||
|
variant="tonal"
|
||||||
|
:color="tag.cor"
|
||||||
|
:clickable="Boolean(tag.acao)"
|
||||||
|
@click.stop.prevent="tag.acao?.()"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="tag.icone"
|
||||||
|
v-if="tag.icone"
|
||||||
|
class="eli-tabela__celula-tag-icone"
|
||||||
|
:size="14"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span>{{ tag.rotulo }}</span>
|
||||||
|
</v-chip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
import { VChip } from "vuetify/components";
|
||||||
|
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCelulaTags",
|
||||||
|
components: { VChip },
|
||||||
|
props: {
|
||||||
|
dados: {
|
||||||
|
type: Object as PropType<TiposTabelaCelulas["tags"]>,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup({ dados }) {
|
||||||
|
return { dados };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__celula-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-tag {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-tag-icone {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<template>
|
||||||
|
<button
|
||||||
|
v-if="dados?.acao"
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__celula-link"
|
||||||
|
@click.stop.prevent="dados.acao()"
|
||||||
|
>
|
||||||
|
{{ dados?.texto }}
|
||||||
|
</button>
|
||||||
|
<span v-else>{{ dados?.texto }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue"
|
||||||
|
import type { 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>
|
||||||
|
.eli-tabela__celula-link {
|
||||||
|
all: unset;
|
||||||
|
display: inline;
|
||||||
|
color: #2563eb;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(37, 99, 235, 0.55);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
text-decoration-color: rgba(29, 78, 216, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
|
||||||
|
<!-- TODO: Validar de ação está cehgando aqui-->
|
||||||
|
<button
|
||||||
|
v-if="dados?.acao"
|
||||||
|
type="button"
|
||||||
|
class="eli-tabela__texto-truncado eli-tabela__celula-link"
|
||||||
|
:title="dados?.texto"
|
||||||
|
@click.stop.prevent="dados.acao()"
|
||||||
|
>
|
||||||
|
{{ dados?.texto }}
|
||||||
|
</button>
|
||||||
|
<span v-else class="eli-tabela__texto-truncado" :title="dados?.texto">{{ dados?.texto }}</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType } from "vue";
|
||||||
|
import type { TiposTabelaCelulas } from "./tiposTabelaCelulas";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "EliTabelaCelulaTextoTruncado",
|
||||||
|
props: {
|
||||||
|
dados: {
|
||||||
|
type: Object as PropType<TiposTabelaCelulas["textoTruncado"]>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup({ dados }) {
|
||||||
|
return { dados };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.eli-tabela__texto-truncado {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 260px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link {
|
||||||
|
all: unset;
|
||||||
|
display: inline;
|
||||||
|
color: #2563eb;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: rgba(37, 99, 235, 0.55);
|
||||||
|
text-underline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:hover {
|
||||||
|
color: #1d4ed8;
|
||||||
|
text-decoration-color: rgba(29, 78, 216, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eli-tabela__celula-link:focus-visible {
|
||||||
|
outline: 2px solid rgba(37, 99, 235, 0.45);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
81
src/componentes/EliTabela/celulas/README.md
Normal file
81
src/componentes/EliTabela/celulas/README.md
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
# Células da EliTabela
|
||||||
|
|
||||||
|
Este diretório contém os componentes de **célula** usados pela `EliTabela`.
|
||||||
|
|
||||||
|
## Como funcionam as células
|
||||||
|
|
||||||
|
A `EliTabela` não renderiza o conteúdo direto: cada coluna retorna uma tupla tipada via helper:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { celulaTabela } from "@/componentes/EliTabela";
|
||||||
|
|
||||||
|
celula: (linha) => celulaTabela("textoSimples", { texto: linha.nome })
|
||||||
|
```
|
||||||
|
|
||||||
|
O `tipo` seleciona qual componente de célula será usado (via registry) e o `dados` define o payload tipado.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tipos disponíveis
|
||||||
|
|
||||||
|
### 1) `textoSimples`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{ texto: string; acao?: () => void }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2) `textoTruncado`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{ texto: string; acao?: () => void }
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3) `numero`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{ numero: number; prefixo?: string; sufixo?: string; acao?: () => void }
|
||||||
|
```
|
||||||
|
|
||||||
|
Exemplos:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// moeda
|
||||||
|
celula: (l) => celulaTabela("numero", { numero: l.total, prefixo: "R$" })
|
||||||
|
|
||||||
|
// unidade de medida
|
||||||
|
celula: (l) => celulaTabela("numero", { numero: l.peso, sufixo: "kg" })
|
||||||
|
```
|
||||||
|
|
||||||
|
### 4) `tags`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
opcoes: {
|
||||||
|
rotulo: string;
|
||||||
|
cor?: string;
|
||||||
|
icone?: import("lucide-vue-next").LucideIcon;
|
||||||
|
acao?: () => void;
|
||||||
|
}[]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 5) `data`
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{ valor: string; formato: "data" | "data_hora" | "relativo"; acao?: () => void }
|
||||||
|
```
|
||||||
|
|
||||||
|
Exemplos:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data" })
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.criado_em, formato: "data_hora" })
|
||||||
|
celula: (l) => celulaTabela("data", { valor: l.atualizado_em, formato: "relativo" })
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Onde ficam os tipos e o registry
|
||||||
|
|
||||||
|
- Tipos: `src/componentes/EliTabela/celulas/tiposTabelaCelulas.ts`
|
||||||
|
- Registry: `src/componentes/EliTabela/celulas/registryTabelaCelulas.ts`
|
||||||
16
src/componentes/EliTabela/celulas/registryTabelaCelulas.ts
Normal file
16
src/componentes/EliTabela/celulas/registryTabelaCelulas.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import type { Component } from "vue";
|
||||||
|
|
||||||
|
import EliTabelaCelulaTextoSimples from "./EliTabelaCelulaTextoSimples.vue";
|
||||||
|
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";
|
||||||
|
|
||||||
|
export const registryTabelaCelulas = {
|
||||||
|
textoSimples: EliTabelaCelulaTextoSimples,
|
||||||
|
textoTruncado: EliTabelaCelulaTextoTruncado,
|
||||||
|
numero: EliTabelaCelulaNumero,
|
||||||
|
tags: EliTabelaCelulaTags,
|
||||||
|
data: EliTabelaCelulaData,
|
||||||
|
} as const satisfies Record<TipoTabelaCelula, Component>;
|
||||||
49
src/componentes/EliTabela/celulas/tiposTabelaCelulas.ts
Normal file
49
src/componentes/EliTabela/celulas/tiposTabelaCelulas.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* Tipagem dos dados de entrada dos componentes de celulas
|
||||||
|
*/
|
||||||
|
|
||||||
|
import type { LucideIcon } from "lucide-vue-next";
|
||||||
|
|
||||||
|
export type TiposTabelaCelulas = {
|
||||||
|
textoSimples: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
textoTruncado: {
|
||||||
|
texto: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
numero: {
|
||||||
|
numero: number;
|
||||||
|
/** Texto opcional exibido antes do número (ex.: "R$", "≈"). */
|
||||||
|
prefixo?: string;
|
||||||
|
/** Texto opcional exibido depois do número (ex.: "kg", "%"). */
|
||||||
|
sufixo?: string;
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
tags: {
|
||||||
|
opcoes: {
|
||||||
|
/** Texto exibido dentro da tag. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Cor do chip (segue as cores do Vuetify, ex.: "primary", "success", "error"). */
|
||||||
|
cor?: string;
|
||||||
|
/** Ícone (Lucide) opcional exibido antes do rótulo. */
|
||||||
|
icone?: LucideIcon;
|
||||||
|
/** Ação opcional da tag. Quando existir, o chip vira clicável. */
|
||||||
|
acao?: () => void;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
|
||||||
|
data: {
|
||||||
|
/** Valor em ISO 8601 (ex.: "2026-01-09T16:15:00Z"). */
|
||||||
|
valor: string;
|
||||||
|
/** Define o formato de exibição. */
|
||||||
|
formato: "data" | "data_hora" | "relativo";
|
||||||
|
/** Ação opcional ao clicar no valor. */
|
||||||
|
acao?: () => void;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TipoTabelaCelula = keyof TiposTabelaCelulas;
|
||||||
|
|
||||||
49
src/componentes/EliTabela/colunasStorage.ts
Normal file
49
src/componentes/EliTabela/colunasStorage.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
export type EliTabelaColunasConfig = {
|
||||||
|
/** Rotulos das colunas visiveis (em ordem). */
|
||||||
|
visiveis: string[];
|
||||||
|
/** Rotulos das colunas invisiveis. */
|
||||||
|
invisiveis: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
const STORAGE_PREFIX = "eli:tabela";
|
||||||
|
|
||||||
|
export function storageKeyColunas(nomeTabela: string) {
|
||||||
|
return `${STORAGE_PREFIX}:${nomeTabela}:colunas`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizarConfig(valor: unknown): EliTabelaColunasConfig {
|
||||||
|
if (!valor || typeof valor !== "object") {
|
||||||
|
return { visiveis: [], invisiveis: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
const v = valor as any;
|
||||||
|
const visiveis = Array.isArray(v.visiveis) ? v.visiveis.filter((x: any) => typeof x === "string") : [];
|
||||||
|
const invisiveis = Array.isArray(v.invisiveis) ? v.invisiveis.filter((x: any) => typeof x === "string") : [];
|
||||||
|
return { visiveis, invisiveis };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function carregarConfigColunas(nomeTabela: string): EliTabelaColunasConfig {
|
||||||
|
try {
|
||||||
|
const raw = window.localStorage.getItem(storageKeyColunas(nomeTabela));
|
||||||
|
if (!raw) return { visiveis: [], invisiveis: [] };
|
||||||
|
return normalizarConfig(JSON.parse(raw));
|
||||||
|
} catch {
|
||||||
|
return { visiveis: [], invisiveis: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function salvarConfigColunas(nomeTabela: string, config: EliTabelaColunasConfig) {
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(storageKeyColunas(nomeTabela), JSON.stringify(normalizarConfig(config)));
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function limparConfigColunas(nomeTabela: string) {
|
||||||
|
try {
|
||||||
|
window.localStorage.removeItem(storageKeyColunas(nomeTabela));
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
35
src/componentes/EliTabela/filtroAvancadoStorage.ts
Normal file
35
src/componentes/EliTabela/filtroAvancadoStorage.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
export type EliTabelaFiltroAvancadoSalvo<T> = Array<{
|
||||||
|
coluna: keyof T
|
||||||
|
valor: any
|
||||||
|
}>;
|
||||||
|
|
||||||
|
function key(nomeTabela: string) {
|
||||||
|
return `eli_tabela:${nomeTabela}:filtro_avancado`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function carregarFiltroAvancado<T>(nomeTabela: string): EliTabelaFiltroAvancadoSalvo<T> {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(key(nomeTabela));
|
||||||
|
if (!raw) return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>;
|
||||||
|
const parsed = JSON.parse(raw);
|
||||||
|
return Array.isArray(parsed) ? (parsed as EliTabelaFiltroAvancadoSalvo<T>) : ([] as any);
|
||||||
|
} catch {
|
||||||
|
return [] as unknown as EliTabelaFiltroAvancadoSalvo<T>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function salvarFiltroAvancado<T>(nomeTabela: string, filtros: EliTabelaFiltroAvancadoSalvo<T>) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(key(nomeTabela), JSON.stringify(filtros ?? []));
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function limparFiltroAvancado(nomeTabela: string) {
|
||||||
|
try {
|
||||||
|
localStorage.removeItem(key(nomeTabela));
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
}
|
||||||
7
src/componentes/EliTabela/index.ts
Normal file
7
src/componentes/EliTabela/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
export { default as EliTabela } from "./EliTabela.vue";
|
||||||
|
|
||||||
|
export * from "./types-eli-tabela";
|
||||||
|
export * from "./celulas/tiposTabelaCelulas";
|
||||||
|
|
||||||
|
// Helper para construção de células tipadas.
|
||||||
|
export { celulaTabela } from "./types-eli-tabela";
|
||||||
143
src/componentes/EliTabela/types-eli-tabela.ts
Normal file
143
src/componentes/EliTabela/types-eli-tabela.ts
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
import type { tipoResposta } from "p-respostas";
|
||||||
|
import type { LucideIcon } from "lucide-vue-next";
|
||||||
|
import type { TipoTabelaCelula, TiposTabelaCelulas } from "./celulas/tiposTabelaCelulas";
|
||||||
|
import { operadores, zFiltro } from "p-comuns";
|
||||||
|
import { ComponenteEntrada } from "../EliEntrada/tiposEntradas";
|
||||||
|
|
||||||
|
// `p-comuns` expõe `zFiltro` (schema). Inferimos o tipo a partir do `parse`.
|
||||||
|
export type tipoFiltro = ReturnType<(typeof zFiltro)["parse"]>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export type ComponenteCelulaBase<T extends TipoTabelaCelula> =
|
||||||
|
readonly [T, TiposTabelaCelulas[T]]
|
||||||
|
|
||||||
|
export type ComponenteCelula = {
|
||||||
|
[K in TipoTabelaCelula]: ComponenteCelulaBase<K>
|
||||||
|
}[TipoTabelaCelula]
|
||||||
|
|
||||||
|
export const celulaTabela = <T extends TipoTabelaCelula>(
|
||||||
|
tipo: T,
|
||||||
|
dados: TiposTabelaCelulas[T],
|
||||||
|
): ComponenteCelulaBase<T> => {
|
||||||
|
return [tipo, dados] as const
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { TipoTabelaCelula, TiposTabelaCelulas };
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export type EliColuna<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;
|
||||||
|
/** Ação opcional disparada ao clicar na célula. */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Campo de ordenação associado à coluna. Caso informado, a coluna passa a
|
||||||
|
* exibir controles de ordenação e utiliza o valor como chave para o backend.
|
||||||
|
*/
|
||||||
|
coluna_ordem?: keyof T;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* indica que a coluna será visivel, se false incia em detalhe
|
||||||
|
* Caso já tenha salvo a propriedade de visibilidade será adotado a propriedade salva
|
||||||
|
*/
|
||||||
|
visivel: boolean
|
||||||
|
};
|
||||||
|
|
||||||
|
export type EliConsultaPaginada<T> = {
|
||||||
|
/** Registros retornados na consulta. */
|
||||||
|
valores: T[];
|
||||||
|
/** Total de registros disponíveis no backend. */
|
||||||
|
quantidade: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type EliTabelaAcao<T> = {
|
||||||
|
/** Ícone (Lucide) exibido para representar a ação. */
|
||||||
|
icone: LucideIcon;
|
||||||
|
/** Cor aplicada ao ícone e rótulo. */
|
||||||
|
cor: string;
|
||||||
|
/** Texto descritivo da ação. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Função executada quando o usuário ativa a ação. */
|
||||||
|
acao: (linha: T) => void;
|
||||||
|
/**
|
||||||
|
* Define se a ação deve ser exibida para a linha. Pode ser um booleano fixo
|
||||||
|
* ou uma função (sincrona/assíncrona) que recebe a linha para decisão dinâmica.
|
||||||
|
*/
|
||||||
|
exibir?: boolean | ((linha: T) => Promise<boolean> | boolean);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Estrutura de dados para uma tabela alimentada por uma consulta.
|
||||||
|
*
|
||||||
|
* - `colunas`: definição de colunas e como renderizar cada célula
|
||||||
|
* - `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> = {
|
||||||
|
/** 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>[];
|
||||||
|
/** Quantidade de registros solicitados por consulta (padrão `10`). */
|
||||||
|
registros_por_consulta?: number;
|
||||||
|
/**
|
||||||
|
* Função responsável por buscar os dados. Recebe parâmetros opcionais de
|
||||||
|
* ordenação (`coluna_ordem`/`direcao_ordem`) e paginação (`offSet`/`limit`).
|
||||||
|
*/
|
||||||
|
consulta: (parametrosConsulta?: {
|
||||||
|
|
||||||
|
//Todo: Esse filtros são recebido do processamento de filtro avandado
|
||||||
|
|
||||||
|
filtros?: tipoFiltro[]
|
||||||
|
coluna_ordem?: keyof T;
|
||||||
|
direcao_ordem?: "asc" | "desc";
|
||||||
|
offSet?: number;
|
||||||
|
limit?: number;
|
||||||
|
/** Texto digitado na caixa de busca, quando habilitada. */
|
||||||
|
texto_busca?: string;
|
||||||
|
}) => Promise<tipoResposta<EliConsultaPaginada<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>[];
|
||||||
|
/**
|
||||||
|
* 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.
|
||||||
|
*/
|
||||||
|
acoesTabela?: {
|
||||||
|
/** Ícone (Lucide) exibido no botão */
|
||||||
|
icone?: LucideIcon;
|
||||||
|
/** Cor aplicada ao botão. */
|
||||||
|
cor?: string;
|
||||||
|
/** Texto descritivo da ação. */
|
||||||
|
rotulo: string;
|
||||||
|
/** Função executada ao clicar no botão. */
|
||||||
|
acao: () => void;
|
||||||
|
}[];
|
||||||
|
|
||||||
|
/** configuração para aplicação dos filtros padrões */
|
||||||
|
|
||||||
|
// Todo: quando exite aparace ap lado do obtão coluna o potão filtro avançado, onde abre um modal com dua colunas de compoentes que são contruidas conforme esse padrão
|
||||||
|
// todo: Os filtros criados deverão ser salvo em local storagem como um objeto tipofiltro[]
|
||||||
|
filtroAvancado?: {
|
||||||
|
rotulo: string,
|
||||||
|
coluna: keyof T,
|
||||||
|
operador: operadores | keyof typeof operadores,
|
||||||
|
entrada: ComponenteEntrada
|
||||||
|
}[]
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
class="text-none pt-1"
|
class="eli-botao text-none pt-1"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
|
||||||
|
|
@ -1,304 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="eli-input">
|
|
||||||
<!-- TEXT LIKE INPUTS -->
|
|
||||||
<v-text-field
|
|
||||||
v-if="isTextLike"
|
|
||||||
v-model="value"
|
|
||||||
:type="inputHtmlType"
|
|
||||||
:label="label"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:disabled="disabled"
|
|
||||||
:clearable="clearable && type !== 'password'"
|
|
||||||
:error="error"
|
|
||||||
:error-messages="errorMessages"
|
|
||||||
:hint="hint"
|
|
||||||
:persistent-hint="persistentHint"
|
|
||||||
:density="density"
|
|
||||||
:variant="variant"
|
|
||||||
:color="internalColor"
|
|
||||||
:inputmode="inputMode"
|
|
||||||
:suffix="type === 'porcentagem' ? '%' : undefined"
|
|
||||||
v-bind="attrs"
|
|
||||||
@focus="onFocus"
|
|
||||||
@blur="onBlur"
|
|
||||||
@input="onInput"
|
|
||||||
>
|
|
||||||
<!-- PASSWORD TOGGLE -->
|
|
||||||
<template
|
|
||||||
v-if="type === 'password' && showPasswordToggle"
|
|
||||||
#append-inner
|
|
||||||
>
|
|
||||||
<v-icon
|
|
||||||
class="cursor-pointer"
|
|
||||||
@click="togglePassword"
|
|
||||||
>
|
|
||||||
{{ showPassword ? "mdi-eye-off" : "mdi-eye" }}
|
|
||||||
</v-icon>
|
|
||||||
</template>
|
|
||||||
</v-text-field>
|
|
||||||
|
|
||||||
<!-- TEXTAREA -->
|
|
||||||
<v-textarea
|
|
||||||
v-else-if="type === 'textarea'"
|
|
||||||
v-model="value"
|
|
||||||
:label="label"
|
|
||||||
:rows="rows"
|
|
||||||
:density="density"
|
|
||||||
:variant="variant"
|
|
||||||
v-bind="attrs"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- SELECT -->
|
|
||||||
<v-select
|
|
||||||
v-else-if="type === 'select'"
|
|
||||||
v-model="value"
|
|
||||||
:items="computedItems"
|
|
||||||
:label="label"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
:multiple="multiple"
|
|
||||||
:chips="chips"
|
|
||||||
:clearable="clearable"
|
|
||||||
:disabled="disabled"
|
|
||||||
:density="density"
|
|
||||||
:variant="variant"
|
|
||||||
item-title="label"
|
|
||||||
item-value="value"
|
|
||||||
:error="error"
|
|
||||||
:error-messages="errorMessages"
|
|
||||||
v-bind="attrs"
|
|
||||||
@focus="onFocus"
|
|
||||||
@blur="onBlur"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- RADIO -->
|
|
||||||
<v-radio-group
|
|
||||||
v-else-if="type === 'radio'"
|
|
||||||
v-model="value"
|
|
||||||
:row="row"
|
|
||||||
>
|
|
||||||
<v-radio
|
|
||||||
v-for="opt in computedItems"
|
|
||||||
:key="String(opt.value)"
|
|
||||||
:label="opt.label"
|
|
||||||
:value="opt.value"
|
|
||||||
/>
|
|
||||||
</v-radio-group>
|
|
||||||
|
|
||||||
<!-- CHECKBOX -->
|
|
||||||
<div v-else-if="type === 'checkbox'" class="checkbox-group">
|
|
||||||
<v-checkbox
|
|
||||||
v-for="opt in computedItems"
|
|
||||||
:key="String(opt.value)"
|
|
||||||
v-model="value"
|
|
||||||
:label="opt.label"
|
|
||||||
:value="opt.value"
|
|
||||||
:density="density"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, computed, PropType } from "vue";
|
|
||||||
import type {
|
|
||||||
CampoDensidade,
|
|
||||||
CampoOpcao,
|
|
||||||
CampoOpcaoBruta,
|
|
||||||
CampoTipo,
|
|
||||||
CampoValor,
|
|
||||||
CampoValorMultiplo,
|
|
||||||
CampoVariante,
|
|
||||||
} from "../../tipos";
|
|
||||||
import { formatarCpfCnpj } from "./utils/cpfCnpj";
|
|
||||||
import { formatTelefone } from "./utils/telefone";
|
|
||||||
import { formatarDecimal, formatarMoeda, formatarPorcentagem, somenteNumeros } from "./utils/numerico"
|
|
||||||
import { formatarCep } from "./utils/cep";
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: "EliInput",
|
|
||||||
inheritAttrs: false,
|
|
||||||
|
|
||||||
props: {
|
|
||||||
/**
|
|
||||||
* Aceita valor simples (text-like) ou lista de valores (checkbox/select multiple).
|
|
||||||
* O componente não converte tipos automaticamente: mantém o que receber.
|
|
||||||
*/
|
|
||||||
modelValue: {
|
|
||||||
type: [String, Number, Boolean, Array] as PropType<CampoValor | CampoValorMultiplo>,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
type: { type: String as PropType<CampoTipo>, default: "text" },
|
|
||||||
label: String,
|
|
||||||
placeholder: String,
|
|
||||||
disabled: Boolean,
|
|
||||||
error: Boolean,
|
|
||||||
errorMessages: {
|
|
||||||
type: [String, Array] as PropType<string | string[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
hint: String,
|
|
||||||
persistentHint: Boolean,
|
|
||||||
rows: { type: Number, default: 4 },
|
|
||||||
/**
|
|
||||||
* Para select/radio/checkbox.
|
|
||||||
* Aceita lista já normalizada ({ label, value }) ou valores primitivos.
|
|
||||||
*/
|
|
||||||
options: {
|
|
||||||
type: Array as PropType<Array<CampoOpcaoBruta>>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
clearable: Boolean,
|
|
||||||
variant: { type: String as PropType<CampoVariante>, default: "outlined" },
|
|
||||||
density: { type: String as PropType<CampoDensidade>, default: "comfortable" },
|
|
||||||
color: { type: String, default: "primary" },
|
|
||||||
row: Boolean,
|
|
||||||
showPasswordToggle: Boolean,
|
|
||||||
multiple: Boolean,
|
|
||||||
chips: Boolean,
|
|
||||||
},
|
|
||||||
|
|
||||||
emits: ["update:modelValue", "change", "focus", "blur"],
|
|
||||||
|
|
||||||
setup(props, { emit, attrs }) {
|
|
||||||
const focused = ref(false);
|
|
||||||
const showPassword = ref(false);
|
|
||||||
|
|
||||||
const value = computed({
|
|
||||||
get: () => props.modelValue,
|
|
||||||
set: (v: CampoValor | CampoValorMultiplo) => {
|
|
||||||
emit("update:modelValue", v);
|
|
||||||
emit("change", v);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const isTextLike = computed(() =>
|
|
||||||
[
|
|
||||||
"text",
|
|
||||||
"password",
|
|
||||||
"email",
|
|
||||||
"search",
|
|
||||||
"url",
|
|
||||||
"telefone",
|
|
||||||
"cpfCnpj",
|
|
||||||
"numericoInteiro",
|
|
||||||
"numericoDecimal",
|
|
||||||
"numericoMoeda",
|
|
||||||
"porcentagem",
|
|
||||||
"cep",
|
|
||||||
].includes(props.type)
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputHtmlType = computed(() =>
|
|
||||||
props.type === "password"
|
|
||||||
? showPassword.value
|
|
||||||
? "text"
|
|
||||||
: "password"
|
|
||||||
: "text"
|
|
||||||
);
|
|
||||||
|
|
||||||
const inputMode = computed(() => {
|
|
||||||
if (props.type === "telefone") return "tel";
|
|
||||||
if (props.type === "porcentagem") return "decimal";
|
|
||||||
if (props.type.startsWith("numerico")) return "numeric";
|
|
||||||
return undefined;
|
|
||||||
});
|
|
||||||
|
|
||||||
const internalColor = computed(() =>
|
|
||||||
props.error ? "error" : focused.value ? props.color : undefined
|
|
||||||
);
|
|
||||||
|
|
||||||
function onInput(e: Event) {
|
|
||||||
const target = e.target as HTMLInputElement;
|
|
||||||
let resultado = target.value;
|
|
||||||
|
|
||||||
switch (props.type) {
|
|
||||||
case "numericoInteiro":
|
|
||||||
resultado = somenteNumeros(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "numericoDecimal":
|
|
||||||
resultado = formatarDecimal(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "numericoMoeda":
|
|
||||||
resultado = formatarMoeda(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "porcentagem":
|
|
||||||
resultado = formatarPorcentagem(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "telefone":
|
|
||||||
resultado = formatTelefone(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "cpfCnpj":
|
|
||||||
resultado = formatarCpfCnpj(resultado);
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "cep":
|
|
||||||
resultado = formatarCep(resultado);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
target.value = resultado;
|
|
||||||
emit("update:modelValue", resultado);
|
|
||||||
emit("change", resultado);
|
|
||||||
}
|
|
||||||
|
|
||||||
function togglePassword() {
|
|
||||||
showPassword.value = !showPassword.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Helpers para select / radio / checkbox (aceita objetos ou primitivos) ---
|
|
||||||
const computedItems = computed<Array<CampoOpcao>>(() => {
|
|
||||||
// Normaliza options para [{ label, value, disabled? }]
|
|
||||||
return (props.options || []).map((o) => {
|
|
||||||
if (o && typeof o === "object" && "value" in o) {
|
|
||||||
const valor = o.value as CampoValor;
|
|
||||||
return {
|
|
||||||
label: o.label ?? String(valor),
|
|
||||||
value: valor,
|
|
||||||
disabled: o.disabled,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const valor = o as CampoValor;
|
|
||||||
return { label: String(valor), value: valor };
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
return {
|
|
||||||
attrs,
|
|
||||||
value,
|
|
||||||
isTextLike,
|
|
||||||
inputHtmlType,
|
|
||||||
inputMode,
|
|
||||||
internalColor,
|
|
||||||
showPassword,
|
|
||||||
togglePassword,
|
|
||||||
onInput,
|
|
||||||
onFocus: () => emit("focus"),
|
|
||||||
onBlur: () => emit("blur"),
|
|
||||||
computedItems,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.eli-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-group {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor-pointer {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
# EliInput
|
|
||||||
|
|
||||||
**Componente base de input do design system**
|
|
||||||
|
|
||||||
O EliInput unifica vários tipos de campo (v-text-field, v-textarea, v-select, v-radio-group, v-checkbox) em uma única API consistente. Ele encapsula comportamentos, máscaras e regras comuns (CPF/CNPJ, telefone, CEP, numéricos, formatação de moeda etc.) para manter coerência visual e de lógica em toda a aplicação.
|
|
||||||
|
|
||||||
> ⚠️ Nunca use os componentes Vuetify diretamente fora do design system para esses casos.
|
|
||||||
> Utilize sempre EliInput para garantir formatação, tipagem e repasse de atributos padronizados.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Visão geral
|
|
||||||
|
|
||||||
EliInput foi projetado para:
|
|
||||||
|
|
||||||
* Centralizar formatação (máscaras) para tipos de entrada comuns (telefone, CPF/CNPJ, CEP, numéricos).
|
|
||||||
* Fornecer uma API única (type) que representa diferentes controles (text, textarea, select, radio, checkbox, etc.).
|
|
||||||
* Repassar atributos/props do pai para o componente Vuetify interno (v-bind="$attrs") mantendo inheritAttrs: false.
|
|
||||||
* Emitir eventos padronizados: update:modelValue, change, focus, blur.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Principais decisões de implementação
|
|
||||||
|
|
||||||
* inheritAttrs: false — o componente controla explicitamente para onde os atributos são passados (v-bind="attrs" no elemento interno).
|
|
||||||
* Uso de um computed value que faz emit("update:modelValue", v) e emit("change", v) — assim qualquer v-model no pai funciona como esperado.
|
|
||||||
* Normalização de props.options para aceitar objetos { label, value, disabled } ou primitivos ('A', 1).
|
|
||||||
* Separação clara entre lógica de formatação (aplicada em onInput) e componentes que não devem ser formatados (ex.: v-select).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Tipagem (TypeScript)
|
|
||||||
|
|
||||||
```ts
|
|
||||||
type ValorCampo = string | number | boolean | null;
|
|
||||||
type Option = { label: string; value: ValorCampo; disabled?: boolean };
|
|
||||||
|
|
||||||
type InputVariant = 'outlined' | 'filled' | 'plain' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined';
|
|
||||||
type Density = 'default' | 'comfortable' | 'compact';
|
|
||||||
type TipoNumerico = 'numericoInteiro' | 'numericoDecimal' | 'numericoMoeda' | 'porcentagem';
|
|
||||||
|
|
||||||
type InputType =
|
|
||||||
| 'text' | 'password' | 'email' | 'search' | 'url' | 'textarea'
|
|
||||||
| 'radio' | 'checkbox' | 'telefone' | 'cpfCnpj' | 'cep' | 'select'
|
|
||||||
| TipoNumerico;
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
| Prop | Tipo | Default | Descrição |
|
|
||||||
| ---------------- | --------------------------- | --------------- | ------------------------------------------------------ |
|
|
||||||
| `modelValue` | `string \| number \| boolean \| (string \| number \| boolean \| null)[]` | `""` | Valor controlado (use com `v-model`). |
|
|
||||||
| `type` | `InputType` | `"text"` | Tipo do controle (ver `InputType`). |
|
|
||||||
| `label` | `string` | `-` | Rótulo do campo. |
|
|
||||||
| `placeholder` | `string` | `-` | Texto exibido quando o campo está vazio. |
|
|
||||||
| `disabled` | `boolean` | `false` | Desabilita o campo. |
|
|
||||||
| `error` | `boolean` | `false` | Força estado visual de erro. |
|
|
||||||
| `errorMessages` | `string \| string[]` | `[]` | Mensagem ou lista de mensagens de erro. |
|
|
||||||
| `hint` | `string` | `-` | Texto de ajuda exibido abaixo do campo. |
|
|
||||||
| `persistentHint` | `boolean` | `false` | Mantém o hint sempre visível. |
|
|
||||||
| `variant` | `InputVariant` | `"outlined"` | Variante visual do Vuetify. |
|
|
||||||
| `density` | `Density` | `"comfortable"` | Densidade visual do campo. |
|
|
||||||
| `color` | `string` | `"primary"` | Cor do campo quando focado (ou `error`, se aplicável). |
|
|
||||||
| `clearable` | `boolean` | `false` | Permite limpar o valor do campo. |
|
|
||||||
|
|
||||||
|
|
||||||
## Notas sobre props
|
|
||||||
|
|
||||||
* options: aceita arrays como ['Frontend','Backend'] ou { label:'São Paulo', value:'SP' }. O componente normaliza para { label, value, disabled? }.
|
|
||||||
* type determina quais comportamentos internos são aplicados. Tipos numéricos e máscara (telefone, cpfCnpj, cep) passam por formatação em onInput.
|
|
||||||
* multiple/chips: úteis para type="select". O v-select interno recebe item-title="label" e item-value="value" para compatibilidade com objetos.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Emissões (events)
|
|
||||||
|
|
||||||
* update:modelValue — padrão v-model.
|
|
||||||
* change — emitido sempre que o valor muda (alinha com update:modelValue).
|
|
||||||
* focus — quando o campo interno recebe foco.
|
|
||||||
* blur — quando perde o foco.
|
|
||||||
* Observação: como value é um computed com getter/setter que emite ambos, v-model e listeners de mudança no pai funcionarão normalmente.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Repasso de atributos e listeners
|
|
||||||
|
|
||||||
* O componente define inheritAttrs: false e usa v-bind="attrs" nos componentes internos (v-text-field, v-select, etc.). Isso implica que:
|
|
||||||
* Atributos HTML (ex.: type, aria-label, class, style) passados para <EliInput> são aplicados ao componente Vuetify interno apropriado.
|
|
||||||
* Listeners (ex.: @click, @keydown) também fazem parte de $attrs e serão repassados para o componente interno — use o EliInput como se estivesse ouvindo eventos diretamente no input.
|
|
||||||
|
|
||||||
## Exemplo:
|
|
||||||
|
|
||||||
```vue
|
|
||||||
<EliInput type="text" v-model="nome" aria-label="Nome completo" @keydown.enter="enviar" />
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Comportamentos de formatação importantes
|
|
||||||
|
|
||||||
* numericoInteiro — remove tudo que não for dígito.
|
|
||||||
* numericoDecimal — mantém separador decimal (aplica formatarDecimal).
|
|
||||||
* numericoMoeda — formata para moeda conforme util (formatarMoeda).
|
|
||||||
* porcentagem — aplica formatação decimal e exibe sufixo `%` automaticamente.
|
|
||||||
* telefone — aplica máscara/format formatTelefone.
|
|
||||||
* cpfCnpj — aplica formatarCpfCnpj.
|
|
||||||
* cep — aplica formatarCep.
|
|
||||||
|
|
||||||
**Importante: a formatação ocorre no onInput (campos text-like). O v-select não passa por onInput — ele usa v-model="value" e o computed que emite o update. Se desejar formatação específica para itens do select (por exemplo, mostrar label formatado), trate nos options antes de passar.**
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Slot
|
|
||||||
|
|
||||||
* O componente não expõe slots customizados diretamente. Ele controla internamente o append para toggle de senha quando type === 'password' && showPasswordToggle (ícone de olho).
|
|
||||||
* Se você precisa de slots específicos do v-text-field/v-select, considere estender o componente ou criar uma variação que exponha os slots desejados.
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { default as EliInput } from "./EliInput.vue";
|
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue