publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.implementado itens desativados nos selects

Browse source
This commit is contained in:
Luiz Silva 2026-06-16 18:14:15 -03:00
parent 900a5f3c5c
commit 84383c3bbf
18 changed files with 1645 additions and 1567 deletions
Download patch file Download diff file Expand all files Collapse all files

45
README.md
View file

@ -297,13 +297,56 @@ opcoes: {
```typescript
opcoes: {
rotulo: string;
// Função que retorna itens ou promise de itens.
// Função que retorna itens ou promise de itens.
// IMPORTANTE: Itens devem ser objetos { chave: string, rotulo: string }
itens: () => Array<{ chave: string; rotulo: string }> | Promise<Array<{ chave: string; rotulo: string }>>;
// Lista de chaves que devem aparecer desativadas no menu.
// Os itens ficam visíveis mas não podem ser selecionados.
desativado?: string[];
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
densidade?: "default" | "comfortable" | "compact";
variante?: "outlined" | "filled" | "underlined" | "solo" | "plain";
}
```
**EliEntradaSelecaoMultipla**
```typescript
// value: string[] | null | undefined
opcoes: {
rotulo: string;
// Mesma API de itens que EliEntradaSelecao
itens: () => Array<{ chave: string; rotulo: string }> | Promise<Array<{ chave: string; rotulo: string }>>;
// Lista de chaves que devem aparecer desativadas no menu.
desativado?: string[];
limpavel?: boolean;
erro?: boolean;
mensagensErro?: string | string[];
dica?: string;
dicaPersistente?: boolean;
densidade?: "default" | "comfortable" | "compact";
variante?: "outlined" | "filled" | "underlined" | "solo" | "plain";
}
```
> **Itens desativados**: a prop `desativado` recebe um array de `chave`s. Os itens correspondentes aparecem no menu mas não podem ser clicados (estilo esmaecido do Vuetify).
>
> ```typescript
> // Exemplo: desativar opções específicas dinamicamente
> opcoes: {
> rotulo: "Status",
> itens: async () => [
> { chave: "ativo", rotulo: "Ativo" },
> { chave: "inativo", rotulo: "Inativo" },
> { chave: "suspenso", rotulo: "Suspenso" },
> ],
> desativado: ["suspenso"], // "Suspenso" aparece mas não é selecionável
> }
> ```
**EliEntradaCoordenadas**
```typescript
// value: { formato: "decimal", datum: "EPSG:4326", latitude: number, longitude: number }

2648
dist/eli-vue.es.js vendored
View file

File diff suppressed because one or more lines are too long

16
dist/eli-vue.umd.js vendored
View file

File diff suppressed because one or more lines are too long

3
dist/types/componentes/EliEntrada/EliEntradaSelecao.vue.d.ts vendored
View file

@ -28,6 +28,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
}[]>;
carregando: import("vue").Ref<boolean, boolean>;
itemProps: import("vue").ComputedRef<((item: ItemSelecao) => {
disabled: boolean;
}) | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: EntradaSelecao["value"]) => true;
input: (_v: EntradaSelecao["value"]) => true;

3
dist/types/componentes/EliEntrada/EliEntradaSelecaoMultipla.vue.d.ts vendored
View file

@ -28,6 +28,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
}[]>;
carregando: import("vue").Ref<boolean, boolean>;
itemProps: import("vue").ComputedRef<((item: ItemSelecao) => {
disabled: boolean;
}) | undefined>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
"update:value": (_v: EntradaSelecaoMultipla["value"]) => true;
input: (_v: EntradaSelecaoMultipla["value"]) => true;

59
dist/types/componentes/EliEntrada/tiposEntradas.d.ts vendored
View file

@ -5,6 +5,7 @@
*/
import type { zCoordenadas } from "p-comuns";
import type z from "zod";
import type { OpcoesSelecaoBase } from "./tiposSelecao";
/**
* Contrato padrão de uma entrada.
*
@ -100,60 +101,10 @@ export type PadroesEntradas = {
/** 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;
}>;
selecaoMultipla: 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;
}>;
/** Seleção simples — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
selecao: tipoPadraoEntrada<string | null | undefined, OpcoesSelecaoBase>;
/** Seleção múltipla — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
selecaoMultipla: tipoPadraoEntrada<string[] | null | undefined, OpcoesSelecaoBase>;
confirmacao: tipoPadraoEntrada<boolean, {
/** Cor do switch quando ativo (Vuetify color). */
cor?: string;

39
dist/types/componentes/EliEntrada/tiposSelecao.d.ts vendored Normal file
View file

@ -0,0 +1,39 @@
/**
* Tipos específicos dos componentes de seleção (simples e múltipla).
* Extraído de tiposEntradas.ts para respeitar o limite de 250 linhas.
*/
import type { CampoDensidade, CampoVariante } from "../../tipos";
/** Item padrão dos componentes de seleção. */
export type ItemSelecaoOpcoes = {
chave: string;
rotulo: string;
};
/** Carregador de itens (síncrono ou async). */
export type CarregadorItens = () => ItemSelecaoOpcoes[] | Promise<ItemSelecaoOpcoes[]>;
/** Opções compartilhadas entre seleção simples e múltipla. */
export type OpcoesSelecaoBase = {
/**
* Carrega os itens da seleção (sincrono ou async).
* - Cada item precisa ter uma chave estável (value) e um rótulo (title).
*/
itens: CarregadorItens;
/**
* Lista de chaves (valores de `chave`) que devem aparecer desativadas.
* Os itens aparecerão visíveis no menu, mas não poderão ser selecionados.
*/
desativado?: 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?: CampoDensidade;
/** Variante do v-text-field (Vuetify). */
variante?: CampoVariante;
};

36
dist/types/componentes/EliTabela/EliTabela.vue.d.ts vendored
View file

@ -1023,13 +1023,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -1041,13 +1036,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -1122,13 +1112,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -1140,13 +1125,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;

36
dist/types/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue.d.ts vendored
View file

@ -72,13 +72,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -90,13 +85,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -171,13 +161,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -189,13 +174,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;

36
dist/types/componentes/EliTabela/useFiltroAvancado.d.ts vendored
View file

@ -103,13 +103,8 @@ export declare function useFiltroAvancado({ aberto, filtrosBase, modelo, modeloF
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -121,13 +116,8 @@ export declare function useFiltroAvancado({ aberto, filtrosBase, modelo, modeloF
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -202,13 +192,8 @@ export declare function useFiltroAvancado({ aberto, filtrosBase, modelo, modeloF
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;
@ -220,13 +205,8 @@ export declare function useFiltroAvancado({ aberto, filtrosBase, modelo, modeloF
rotulo: string;
placeholder?: string | undefined;
apenasLeitura?: boolean | undefined;
itens: () => {
chave: string;
rotulo: string;
}[] | Promise<{
chave: string;
rotulo: string;
}[]>;
itens: import("../EliEntrada/tiposSelecao").CarregadorItens;
desativado?: string[] | undefined;
limpavel?: boolean | undefined;
erro?: boolean | undefined;
mensagensErro?: string | string[] | undefined;

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "eli-vue",
"version": "0.1.216",
"version": "0.1.217",
"private": false,
"main": "./dist/eli-vue.umd.js",
"module": "./dist/eli-vue.es.js",

10
src/componentes/EliEntrada/EliEntradaSelecao.vue
View file

@ -6,6 +6,7 @@
:items="itens"
item-title="rotulo"
item-value="chave"
:item-props="itemProps"
:loading="carregando"
:disabled="carregando"
:menu-props="{ maxHeight: 320, zIndex: 99999 }"
@ -101,7 +102,14 @@ export default defineComponent({
{ deep: true },
)
return { attrs, emit, localValue, itens, carregando }
// Deriva item-props para desativar itens cujas chaves estejam em opcoes.desativado
const itemProps = computed(() => {
const desativados = props.opcoes?.desativado
if (!desativados || desativados.length === 0) return undefined
return (item: ItemSelecao) => ({ disabled: desativados.includes(item.chave) })
})
return { attrs, emit, localValue, itens, carregando, itemProps }
},
})
</script>

10
src/componentes/EliEntrada/EliEntradaSelecaoMultipla.vue
View file

@ -6,6 +6,7 @@
:items="itens"
item-title="rotulo"
item-value="chave"
:item-props="itemProps"
:loading="carregando"
:disabled="carregando"
:menu-props="{ maxHeight: 320, zIndex: 99999 }"
@ -90,7 +91,14 @@ export default defineComponent({
void carregarItens()
})
return { attrs, emit, localValue, itens, carregando }
// Deriva item-props para desativar itens cujas chaves estejam em opcoes.desativado
const itemProps = computed(() => {
const desativados = props.opcoes?.desativado
if (!desativados || desativados.length === 0) return undefined
return (item: ItemSelecao) => ({ disabled: desativados.includes(item.chave) })
})
return { attrs, emit, localValue, itens, carregando, itemProps }
},
})
</script>

71
src/componentes/EliEntrada/tiposEntradas.ts
View file

@ -6,6 +6,7 @@
import type { zCoordenadas } from "p-comuns"
import type z from "zod"
import type { OpcoesSelecaoBase } from "./tiposSelecao"
/**
* Contrato padrão de uma entrada.
@ -124,73 +125,11 @@ export type PadroesEntradas = {
}
>
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 }[]>
/** Seleção simples — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
selecao: tipoPadraoEntrada<string | null | undefined, OpcoesSelecaoBase>
/** 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
}
>
selecaoMultipla: 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
}
>
/** Seleção múltipla — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
selecaoMultipla: tipoPadraoEntrada<string[] | null | undefined, OpcoesSelecaoBase>
confirmacao: tipoPadraoEntrada<
boolean,

48
src/componentes/EliEntrada/tiposSelecao.ts Normal file
View file

@ -0,0 +1,48 @@
/**
* Tipos específicos dos componentes de seleção (simples e múltipla).
* Extraído de tiposEntradas.ts para respeitar o limite de 250 linhas.
*/
import type { CampoDensidade, CampoVariante } from "../../tipos"
/** Item padrão dos componentes de seleção. */
export type ItemSelecaoOpcoes = { chave: string; rotulo: string }
/** Carregador de itens (síncrono ou async). */
export type CarregadorItens = () => ItemSelecaoOpcoes[] | Promise<ItemSelecaoOpcoes[]>
/** Opções compartilhadas entre seleção simples e múltipla. */
export type OpcoesSelecaoBase = {
/**
* Carrega os itens da seleção (sincrono ou async).
* - Cada item precisa ter uma chave estável (value) e um rótulo (title).
*/
itens: CarregadorItens
/**
* Lista de chaves (valores de `chave`) que devem aparecer desativadas.
* Os itens aparecerão visíveis no menu, mas não poderão ser selecionados.
*/
desativado?: 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?: CampoDensidade
/** Variante do v-text-field (Vuetify). */
variante?: CampoVariante
}

2
src/index.ts
View file

@ -9,6 +9,7 @@ import {
EliEntradaNumero,
EliEntradaParagrafo,
EliEntradaSelecao,
EliEntradaSelecaoMultipla,
EliEntradaTexto,
} from "./componentes/EliEntrada"
import { EliTabela } from "./componentes/EliTabela"
@ -37,6 +38,7 @@ const EliVue: Plugin = {
app.component("EliEntradaDataHora", EliEntradaDataHora)
app.component("EliEntradaParagrafo", EliEntradaParagrafo)
app.component("EliEntradaSelecao", EliEntradaSelecao)
app.component("EliEntradaSelecaoMultipla", EliEntradaSelecaoMultipla)
app.component("EliEntradaCoordenadas", EliEntradaCoordenadas)
app.component("EliFeedbackWidget", EliFeedbackWidget)
},

41
src/playground/entradas.playground.vue
View file

@ -3,7 +3,8 @@
<section>
<h2 class="text-h6 mb-2">EliEntradas</h2>
<p class="text-body-2 mb-0">
Exemplos para <code>EliEntradaTexto</code>, <code>EliEntradaNumero</code> e
Exemplos para <code>EliEntradaTexto</code>, <code>EliEntradaNumero</code>,
<code>EliEntradaSelecao</code>, <code>EliEntradaSelecaoMultipla</code> e
<code>EliEntradaCoordenadas</code>.
</p>
</section>
@ -101,26 +102,8 @@
<v-divider />
<section class="d-flex flex-column ga-3">
<h3 class="text-subtitle-1">Seleção</h3>
<EliEntradaSelecao
v-model:value="selecao"
:opcoes="{
rotulo: 'Categoria',
placeholder: 'Selecione...',
limpavel: true,
// OBS: não usar `new Promise(...)` direto no template.
// O template do Vue resolve identificadores via `_ctx`, então `Promise`
// pode ser tratado como variável do componente.
itens: itensCategorias,
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ selecao ?? "(null)" }}
</div>
</section>
<!-- Seleção simples + múltipla (com e sem desativados) -->
<EntradasSelecaoPlayground />
<v-divider />
@ -167,9 +150,9 @@ import {
EliEntradaCoordenadas,
EliEntradaNumero,
EliEntradaParagrafo,
EliEntradaSelecao,
EliEntradaTexto,
} from "../index"
import EntradasSelecaoPlayground from "./entradas.selecao.playground.vue"
export default defineComponent({
name: "EntradasPlayground",
@ -177,25 +160,13 @@ export default defineComponent({
EliEntradaTexto,
EliEntradaNumero,
EliEntradaParagrafo,
EliEntradaSelecao,
EliEntradaCoordenadas,
},
methods: {
async itensCategorias() {
// Exemplo async (simula consulta)
await new Promise((r) => setTimeout(r, 600))
return [
{ chave: "a", rotulo: "Categoria A" },
{ chave: "b", rotulo: "Categoria B" },
{ chave: "c", rotulo: "Categoria C" },
]
},
EntradasSelecaoPlayground,
},
data() {
return {
texto: null as string | null,
paragrafo: null as string | null,
selecao: null as string | null,
numero: null as number | null,
numeroDecimal: null as number | null,
numeroLivre: null as number | null,

107
src/playground/entradas.selecao.playground.vue Normal file
View file

@ -0,0 +1,107 @@
<template>
<section class="d-flex flex-column ga-3">
<h3 class="text-subtitle-1">Seleção</h3>
<EliEntradaSelecao
v-model:value="selecao"
:opcoes="{
rotulo: 'Categoria',
placeholder: 'Selecione...',
limpavel: true,
itens: itensCategorias,
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ selecao ?? "(null)" }}
</div>
<v-divider />
<h3 class="text-subtitle-2">Com itens desativados</h3>
<EliEntradaSelecao
v-model:value="selecaoDesativados"
:opcoes="{
rotulo: 'Categoria (B e C desativadas)',
placeholder: 'Selecione...',
limpavel: true,
itens: itensCategorias,
desativado: ['b', 'c'],
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ selecaoDesativados ?? "(null)" }}
</div>
<v-divider />
<h3 class="text-subtitle-1">Seleção Múltipla</h3>
<EliEntradaSelecaoMultipla
v-model:value="selecaoMultipla"
:opcoes="{
rotulo: 'Categorias',
placeholder: 'Selecione uma ou mais...',
limpavel: true,
itens: itensCategorias,
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ selecaoMultipla ?? "(null)" }}
</div>
<v-divider />
<h3 class="text-subtitle-2">Com itens desativados</h3>
<EliEntradaSelecaoMultipla
v-model:value="selecaoMultiplaDesativados"
:opcoes="{
rotulo: 'Categorias (A e C desativadas)',
placeholder: 'Selecione...',
limpavel: true,
itens: itensCategorias,
desativado: ['a', 'c'],
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ selecaoMultiplaDesativados ?? "(null)" }}
</div>
</section>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue"
import { EliEntradaSelecao, EliEntradaSelecaoMultipla } from "../index"
async function itensCategorias() {
await new Promise((r) => setTimeout(r, 600))
return [
{ chave: "a", rotulo: "Categoria A" },
{ chave: "b", rotulo: "Categoria B" },
{ chave: "c", rotulo: "Categoria C" },
]
}
export default defineComponent({
name: "EntradasSelecaoPlayground",
components: { EliEntradaSelecao, EliEntradaSelecaoMultipla },
setup() {
const selecao = ref<string | null>(null)
const selecaoDesativados = ref<string | null>(null)
const selecaoMultipla = ref<string[] | null>(null)
const selecaoMultiplaDesativados = ref<string[] | null>(null)
return {
selecao,
selecaoDesativados,
selecaoMultipla,
selecaoMultiplaDesativados,
itensCategorias,
}
},
})
</script>