bkp

src/playground/entradas.playground.vue

@@ -64,22 +64,81 @@
         <strong>v-model:value</strong>: {{ numeroDecimal ?? "(null)" }}
       </div>
     </section>
+
+    <v-divider />
+
+    <section class="d-flex flex-column ga-3">
+      <h3 class="text-subtitle-1">Parágrafo</h3>
+
+      <EliEntradaParagrafo
+        v-model:value="paragrafo"
+        :opcoes="{
+          rotulo: 'Descrição',
+          placeholder: 'Digite uma descrição mais longa...',
+          linhas: 5,
+          limiteCaracteres: 300,
+          limpavel: true,
+        }"
+      />
+
+      <div class="text-caption">
+        <strong>v-model:value</strong>: {{ paragrafo ?? "(null)" }}
+      </div>
+    </section>
+
+    <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>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { EliEntradaNumero, EliEntradaTexto } from "../index";
+import { EliEntradaNumero, EliEntradaParagrafo, EliEntradaSelecao, EliEntradaTexto } from "../index";
 
 export default defineComponent({
   name: "EntradasPlayground",
   components: {
     EliEntradaTexto,
     EliEntradaNumero,
+    EliEntradaParagrafo,
+    EliEntradaSelecao,
+  },
+  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,
     };