160 lines
4.1 KiB
Vue
160 lines
4.1 KiB
Vue
<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>
|
|
|
|
<EliEntradaNumero
|
|
v-model:value="numeroLivre"
|
|
:opcoes="{
|
|
rotulo: 'Número Livre (Com vírgula)',
|
|
placeholder: 'Digite livremente (ex: 1,5)',
|
|
}"
|
|
/>
|
|
|
|
<div class="text-caption">
|
|
<strong>v-model:value</strong>: {{ numeroLivre ?? "(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, 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,
|
|
numeroLivre: null as number | null,
|
|
}
|
|
},
|
|
})
|
|
</script>
|