.implementado itens desativados nos selects

README.md

@@ -300,10 +300,53 @@ opcoes: {
   // 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 }

dist/types/componentes/EliEntrada/EliEntradaSelecao.vue.d.ts

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

dist/types/componentes/EliEntrada/EliEntradaSelecaoMultipla.vue.d.ts

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

dist/types/componentes/EliEntrada/tiposEntradas.d.ts

@@ -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, {
+    /** Seleção simples — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
-        /**
+    selecao: tipoPadraoEntrada<string | null | undefined, OpcoesSelecaoBase>;
-         * Carrega os itens da seleção (sincrono ou async).
+    /** Seleção múltipla — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
-         * - Cada item precisa ter uma chave estável (value) e um rótulo (title).
+    selecaoMultipla: tipoPadraoEntrada<string[] | null | undefined, OpcoesSelecaoBase>;
-         */
-        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;
-    }>;
     confirmacao: tipoPadraoEntrada<boolean, {
         /** Cor do switch quando ativo (Vuetify color). */
         cor?: string;

dist/types/componentes/EliEntrada/tiposSelecao.d.ts

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

dist/types/componentes/EliTabela/EliTabela.vue.d.ts

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

dist/types/componentes/EliTabela/EliTabelaModalFiltroAvancado.vue.d.ts

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

dist/types/componentes/EliTabela/useFiltroAvancado.d.ts

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

package.json

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

src/componentes/EliEntrada/EliEntradaSelecao.vue

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

src/componentes/EliEntrada/EliEntradaSelecaoMultipla.vue

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

src/componentes/EliEntrada/tiposEntradas.ts

@@ -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<
+  /** Seleção simples — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
-    string | null | undefined,
+  selecao: tipoPadraoEntrada<string | null | undefined, 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: () =>
-        | { chave: string; rotulo: string }[]
-        | Promise<{ chave: string; rotulo: string }[]>
 
-      /** Se true, mostra ícone para limpar o valor (Vuetify clearable). */
+  /** Seleção múltipla — ver {@link OpcoesSelecaoBase} para opções disponíveis. */
-      limpavel?: boolean
+  selecaoMultipla: tipoPadraoEntrada<string[] | null | undefined, OpcoesSelecaoBase>
-
-      /** 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
-    }
-  >
 
   confirmacao: tipoPadraoEntrada<
     boolean,

src/componentes/EliEntrada/tiposSelecao.ts

@@ -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
+}

src/index.ts

@@ -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)
   },

src/playground/entradas.playground.vue

@@ -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">
+    <!-- Seleção simples + múltipla (com e sem desativados) -->
-      <h3 class="text-subtitle-1">Seleção</h3>
+    <EntradasSelecaoPlayground />
-
-      <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>
 
     <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,
-  },
+    EntradasSelecaoPlayground,
-  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" },
-      ]
-    },
   },
   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,

src/playground/entradas.selecao.playground.vue

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