VxInputPhone

src/components/vx-input-phone/index.vue

Form high 6 usos

Input de telefone internacional com selector de país (bandeira + DDI) e validação via libphonenumber-js. Layout horizontal: selector de país (largura fixa ~120px) + campo numérico (flex-1). Baseado na biblioteca MazPhoneNumberInput customizada para o design Pedbot.

Com Label (padrão de formulário)

Variante dominante no codebase. Sempre usa label + :preferredCountries="['BR']" + @update="setInternational" + :reload sincronizado com o estado de abertura do componente pai (sidebar/popup).

Número de Telefone

🇧🇷 +55

Número de Telefone

🇧🇷 +55

✓ Número válido — isValid: true

Número de Telefone

🇧🇷 +55

✕ Campo é obrigatório / número inválido

<vx-input-phone
  label="Número de Telefone"
  class="mt-5 w-full"
  name="telefone"
  v-model="customer.phone_number"
  :reload="isActive"
  :preferredCountries="['BR']"
  @update="setInternational"
  v-validate="'required'"
/>
<span class="text-danger text-sm" v-show="errors.has('telefone')">
  {{ errors.first('telefone') }}
</span>

Com Condição v-if

Exibido apenas para clientes sem messenger_id ou instagram_id (apenas WhatsApp). :reload sincronizado com o estado do sidebar para resetar o campo ao reabrir.

v-if="!customer.messenger_id && !customer.instagram_id"

Número de Telefone

🇧🇷 +55

<vx-input-phone
  label="Número de Telefone"
  class="mt-5 w-full"
  name="telefone"
  v-if="!customer.messenger_id && !customer.instagram_id"
  v-model="customer.phone_number"
  :reload="isSidebarActiveLocal"
/>

Sem Bandeiras

Modo inline — exibido via v-else substituindo texto mascarado. :noFlags="true" remove bandeiras, :noUseBrowserLocale="true" evita detecção automática de país pelo browser.

+55

<vx-input-phone
  v-else
  class="w-full"
  :noFlags="true"
  :noUseBrowserLocale="true"
  :preferredCountries="['BR']"
  v-model="customerData.phone_number"
  :reload="activeLocal"
  @update="setInternational"
  v-validate="'required'"
/>

Sem Seletor de País

Exibe apenas o InputTel — CountrySelector oculto. Útil quando o país já é conhecido e não deve ser alterado pelo usuário.

Número de Telefone

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<vx-input-phone
  label="Número de Telefone"
  v-model="phone"
  :noCountrySelector="true"
  :defaultCountryCode="'BR'"
/>

Estados

Todos os estados visuais controlados automaticamente por libphonenumber-js (valid, error) ou por props (:error, :disabled).

🇧🇷 +55

Default

🇧🇷 +55

Focused (.is-focused)

🇧🇷 +55

Valid (.is-valid)

🇧🇷 +55

Error (.has-error)

🇧🇷 +55

Disabled (.is-disabled)

🇧🇷 +55

Dark (:dark="true")

API

<!-- Exemplo com principais props -->
<!-- v-model: número digitado; @update: objeto completo do libphonenumber-js
     :reload — sincroniza reset com abertura de modal/sidebar -->
<vx-input-phone
  label="Número de Telefone"
  v-model="customer.phone_number"
  :reload="isModalActive"
  :preferredCountries="['BR']"
  :defaultCountryCode="'BR'"
  :noUseBrowserLocale="true"
  :noValidatorState="false"
  @update="setInternational"
  v-validate="'required'"
/>

Props principais

Nome	Tipo	Default	Descrição
`value`	String	—	v-model — número digitado (sem DDI). Emite via `@input`.
`defaultCountryCode`	String	—	Código ISO do país inicial. Ex: `'BR'`. Auto-detectado pelo browser se omitido.
`label`	String	—	Label acima do campo.
`disabled`	Boolean	false	Desabilita CountrySelector e InputTel.
`error`	Boolean	false	Estado de erro manual — borda `errorColor`.
`required`	Boolean	false	Marca o campo como obrigatório.
`size`	String	—	`'sm'` (110px) \| `'lg'` (130px). Afeta largura do CountrySelector.
`noValidatorState`	Boolean	false	Quando true, não exibe indicadores visuais de válido/inválido.
`noFlags`	Boolean	false	Oculta bandeiras no CountrySelector.
`noCountrySelector`	Boolean	false	Oculta o CountrySelector — apenas InputTel visível.
`noExample`	Boolean	false	Oculta placeholder de exemplo do número.
`preferredCountries`	Array	—	Países no topo da lista. Ex: `['BR', 'US']`.
`onlyCountries`	Array	—	Whitelist de países exibidos.
`ignoredCountries`	Array	`[]`	Blacklist de países.
`color`	String	`'dodgerblue'`	Cor de foco/ativo. Atenção: default não é `primary` — substituir manualmente.
`validColor`	String	`'primary'`	Cor quando número é válido.
`errorColor`	String	`'danger'`	Cor quando há erro.
`dark`	Boolean	false	Dark mode interno (independente do dark global).
`darkColor`	String	`'#424242'`	Cor de fundo no dark mode.
`noUseBrowserLocale`	Boolean	false	Quando true, não detecta país pelo `navigator.language`.
`reload`	Boolean	false	Toggle false→true reseta os valores do campo. Sincronizar com abertura do modal/sidebar.
`borderRadius`	Number	4	Border radius dos campos em px.
`countriesHeight`	Number	30	Altura de cada item da lista em px.

Slots

Nome	Descrição
`arrow`	Ícone customizado para o toggle do CountrySelector. Default é um SVG de seta para baixo.

Eventos

Evento	Payload	Descrição
`@input`	String	v-model. Número formatado AsYouType enquanto digita.
`@update`	Object	Resultado completo do `libphonenumber-js`: `{ countryCode, isValid, phoneNumber, countryCallingCode, formattedNumber, nationalNumber, type, formatInternational, formatNational, uri, e164 }`. Capturar `isValid` e `e164` para salvar no backend.
`@onOpen`	—	Dropdown de países aberto.
`@onClose`	—	Dropdown de países fechado.
`@phone-number-focused`	—	Campo de número recebeu foco.
`@phone-number-blur`	—	Campo de número perdeu foco.

Dependências

Ext: libphonenumber-js — parsePhoneNumberFromString, AsYouType

Assets: assets/js/phoneCodeCountries.js, assets/locales/

Sub-componentes: CountrySelector (dropdown com flags), InputTel (input numérico)

Onde é usado

src/views/customers/CustomersViewSidebar.vue

src/views/customers/AddCustomerPopUp.vue

src/views/chat-attendance/UserProfile.vue

src/views/chat-attendance/new-chat/NewChatUserProfile.vue

src/views/schedules/NewSchedulesListPopup.vue

⚠ Atenção — cor padrão

A prop color tem default 'dodgerblue', não 'primary'. Nos 6 usos do codebase essa prop nunca foi sobrescrita — o design system usa azul primário (#0491FF), mas o foco dos campos mostra azul dodger browser. Para corrigir: :color="'primary'".

VxInputPhone

Com Label (padrão de formulário)

Com Condição v-if

Sem Bandeiras

Sem Seletor de País

Dropdown de Países (estado aberto)

Estados

API

Props principais

Slots

Eventos

Dependências

Onde é usado