emplementado entrada numero e entrada texto
This commit is contained in:
parent
fa1f93aedc
commit
de7c19be24
39 changed files with 2155 additions and 1058 deletions
88
src/playground/entradas.playground.vue
Normal file
88
src/playground/entradas.playground.vue
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue