emplementado entrada numero e entrada texto

This commit is contained in:
Luiz Silva 2026-01-29 10:35:35 -03:00
parent fa1f93aedc
commit de7c19be24
39 changed files with 2155 additions and 1058 deletions

View file

@ -0,0 +1,88 @@
<template>
<div class="d-flex flex-column ga-6">
<section>
<h2 class="text-h6 mb-2">EliEntradas</h2>
<p class="text-body-2 mb-0">
Exemplos para <code>EliEntradaTexto</code> e <code>EliEntradaNumero</code>.
</p>
</section>
<v-divider />
<section class="d-flex flex-column ga-3">
<h3 class="text-subtitle-1">Texto</h3>
<EliEntradaTexto
v-model:value="texto"
:opcoes="{
rotulo: 'Nome',
placeholder: 'Digite seu nome',
limiteCaracteres: 20,
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ texto ?? "(null)" }}
</div>
<v-alert type="info" variant="tonal" density="comfortable">
Para EliEntradas, o padrão é <code>v-model:value</code> (prop <code>value</code> + evento
<code>update:value</code>). Mantemos também o evento <code>input</code> para compat Vue2.
</v-alert>
</section>
<v-divider />
<section class="d-flex flex-column ga-3">
<h3 class="text-subtitle-1">Número</h3>
<EliEntradaNumero
v-model:value="numero"
:opcoes="{
rotulo: 'Quantidade',
placeholder: 'Ex: 10',
precisao: 1,
sufixo: 'kg',
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ numero ?? "(null)" }}
</div>
<EliEntradaNumero
v-model:value="numeroDecimal"
:opcoes="{
rotulo: 'Moeda',
placeholder: 'Digite (2 casas)',
precisao: 0.01,
prefixo: 'R$',
}"
/>
<div class="text-caption">
<strong>v-model:value</strong>: {{ numeroDecimal ?? "(null)" }}
</div>
</section>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { EliEntradaNumero, EliEntradaTexto } from "../index";
export default defineComponent({
name: "EntradasPlayground",
components: {
EliEntradaTexto,
EliEntradaNumero,
},
data() {
return {
texto: null as string | null,
numero: null as number | null,
numeroDecimal: null as number | null,
};
},
});
</script>