MeUpdatePlanModal

Modal de atualização de plano com campos de nome e telefone (máscara automática) e confirmação opcional via MeSwitchCard.

Documentação visual

Esta documentação é apenas um exemplo visual do componente. No projeto Minha Effecti, o MeUpdatePlanModal possui as validações corretas para os campos (integração com vee-validate, regras de obrigatoriedade e formatos específicos).

Playground

Importação

Vue 3

<script setup>
import { MeUpdatePlanModal } from '@me/ui-vue3'
</script>

Vue 2

<script>
import { MeUpdatePlanModal } from '@me/ui-vue2'

export default {
  components: { MeUpdatePlanModal }
}
</script>

Uso Básico

O modal exibe campos obrigatórios de nome e telefone. O botão Enviar fica desabilitado enquanto os campos estiverem vazios.

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)

function handleSubmit(data) {
  console.log(data) // { name, phone, acceptedTerms }
  isOpen.value = false
}
</script>

<template>
  <MeButton label="Abrir Modal" @click="isOpen = true" />
  <MeUpdatePlanModal
    :visible="isOpen"
    @submit="handleSubmit"
    @close="isOpen = false"
  />
</template>

Com Confirmação

Use showSwitchConfirmation para exibir um MeSwitchCard que o usuário precisa aceitar antes de enviar. Customize o texto com switchTitle e switchSubtitle.

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <MeUpdatePlanModal
    :visible="isOpen"
    :showSwitchConfirmation="true"
    switchTitle="Aceito os termos e condições"
    switchSubtitle="Li e concordo com a atualização do meu plano"
    @submit="handleSubmit"
    @close="isOpen = false"
  />
</template>

Estado de Loading

Use a prop loading para indicar que o envio está em progresso. O botão é desabilitado automaticamente.

<script setup>
import { ref } from 'vue'

const isOpen = ref(false)
const isLoading = ref(false)

async function handleSubmit(data) {
  isLoading.value = true
  await salvarDados(data)
  isLoading.value = false
  isOpen.value = false
}
</script>

<template>
  <MeUpdatePlanModal
    :visible="isOpen"
    :loading="isLoading"
    @submit="handleSubmit"
    @close="isOpen = false"
  />
</template>

API

Props

Prop	Tipo	Padrão	Descrição
visible	boolean	false	Controla a visibilidade do modal
showSwitchConfirmation	boolean	false	Exibe o MeSwitchCard de confirmação
switchTitle	string	'Aceito atualizar meu plano'	Título do MeSwitchCard
switchSubtitle	string	''	Subtitle do MeSwitchCard
loading	boolean	false	Exibe estado de carregamento no botão e desabilita o envio

Eventos

Evento	Payload	Descrição
submit	{ name: string, phone: string, acceptedTerms: boolean }	Emitido quando o formulário é válido e o usuário confirma
close	—	Emitido ao fechar o modal

Acessibilidade

• Campos de nome e telefone possuem label visível e indicação de obrigatório (*)
• Mensagens de erro são exibidas abaixo de cada campo após tentativa de envio
• O botão Enviar é desabilitado até que todos os campos obrigatórios sejam preenchidos
• O modal não fecha ao clicar fora (closeOnClickOutside=false)

Validação

Os erros de campo (nome e telefone) são exibidos apenas após a primeira tentativa de envio, para não distrair o usuário durante o preenchimento.