<template>
  <v-container>
    <v-card class="mx-auto" max_width="400">
      <v-card-title>
        <EliBadge :badge="'Novo'" offset-x="-15" location="right center">
          Olá Mundo!
        </EliBadge>
      </v-card-title>
      <v-card-text>
        Este é um componente de exemplo integrado com Vuetify.

        <div class="grid-example">
          <!-- text normal -->

          <EliEntradaTexto
            v-model:value="nome"
            :opcoes="{ rotulo: 'Nome', placeholder: 'Digite o nome' }"
            density="compact"
          />

          <EliEntradaTexto
            v-model:value="telefone"
            :opcoes="{ rotulo: 'Telefone', formato: 'telefone' }"
          />

          <EliEntradaTexto
            v-model:value="cep"
            :opcoes="{ rotulo: 'CEP', placeholder: '00000-000', formato: 'cep' }"
          />

          <EliEntradaTexto
            v-model:value="documento"
            :opcoes="{ rotulo: 'CPF / CNPJ', formato: 'cpfCnpj' }"
          />

          <EliEntradaTexto
            v-model:value="email"
            :opcoes="{ rotulo: 'Email', placeholder: 'email@exemplo.com', formato: 'email' }"
          />
        </div>
      </v-card-text>
      <v-card-actions>
        <EliBotao color="primary" variant="elevated" block>
          Botão Vuetify
        </EliBotao>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import EliBotao from "../botao/EliBotao.vue";
import EliBadge from "../indicador/EliBadge.vue";
import EliEntradaTexto from "../EliEntrada/EliEntradaTexto.vue";

export default defineComponent({
  name: "EliOlaMundo",
  components: {
    EliBotao,
    EliBadge,
    EliEntradaTexto,
  },
  setup() {
    const nome = ref("");
    const cep = ref("");
    const telefone = ref("");
    const email = ref("");
    const documento = ref("");
    return {
      nome,
      email,
      documento,
      telefone,
      cep,
    };
  },
});
</script>
