123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
<template>
|
|
<section class="stack">
|
|
<h2>EliInput (campo)</h2>
|
|
|
|
<div class="grid">
|
|
<EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
|
|
<EliInput v-model="telefone" type="telefone" label="Telefone" />
|
|
<EliInput v-model="documento" type="cpfCnpj" label="CPF / CNPJ" />
|
|
|
|
<EliInput v-model="idade" type="numericoInteiro" label="Idade" />
|
|
<EliInput v-model="valor" type="numericoMoeda" label="Valor" />
|
|
<EliInput v-model="cep" type="cep" label="CEP" placeholder="00000-000" />
|
|
|
|
<EliInput
|
|
v-model="estado"
|
|
type="select"
|
|
label="Estado"
|
|
multiple
|
|
:options="[
|
|
{ label: 'São Paulo', value: 'SP' },
|
|
{ label: 'Rio de Janeiro', value: 'RJ' },
|
|
]"
|
|
/>
|
|
|
|
<EliInput
|
|
v-model="cor"
|
|
type="radio"
|
|
label="Cor favorita"
|
|
:options="[
|
|
{ label: 'Azul', value: 'azul' },
|
|
{ label: 'Verde', value: 'verde' },
|
|
]"
|
|
/>
|
|
|
|
<EliInput
|
|
v-model="habilidades"
|
|
type="checkbox"
|
|
label="Habilidades"
|
|
:options="[
|
|
{ label: 'Vue', value: 'vue' },
|
|
{ label: 'React', value: 'react' },
|
|
]"
|
|
/>
|
|
</div>
|
|
|
|
<pre class="debug">{{ debug }}</pre>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref } from "vue";
|
|
import { EliInput } from "@/componentes/campo";
|
|
|
|
type Cor = "azul" | "verde" | null;
|
|
type Habilidade = "vue" | "react";
|
|
|
|
export default defineComponent({
|
|
name: "CampoPlayground",
|
|
components: { EliInput },
|
|
setup() {
|
|
const nome = ref("");
|
|
const telefone = ref("");
|
|
const documento = ref("");
|
|
const idade = ref("");
|
|
const valor = ref("");
|
|
const cep = ref("");
|
|
const estado = ref<string[]>([]);
|
|
const cor = ref<Cor>(null);
|
|
const habilidades = ref<Habilidade[]>([]);
|
|
|
|
const debug = computed(() =>
|
|
JSON.stringify(
|
|
{
|
|
nome: nome.value,
|
|
telefone: telefone.value,
|
|
documento: documento.value,
|
|
idade: idade.value,
|
|
valor: valor.value,
|
|
cep: cep.value,
|
|
estado: estado.value,
|
|
cor: cor.value,
|
|
habilidades: habilidades.value,
|
|
},
|
|
null,
|
|
2
|
|
)
|
|
);
|
|
|
|
return {
|
|
nome,
|
|
telefone,
|
|
documento,
|
|
idade,
|
|
valor,
|
|
cep,
|
|
estado,
|
|
cor,
|
|
habilidades,
|
|
debug,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stack {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
}
|
|
|
|
.debug {
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border-radius: 8px;
|
|
overflow: auto;
|
|
}
|
|
</style>
|