sfp_front_vue_diarista_prestador/src/components/login/LoginStepOnePanel.vue

<template>
  <q-card-section class="full-width">
    <div class="text-text">
      <span class="fontbold font12">{{ $t('common.terms.email') }}</span>
    </div>
    <q-input
      v-model="email"
      no-error-icon
      outlined
      rounded
      class="bg-surface q-mt-sm"
      input-class="text-text font12 fontmedium"
      :placeholder="$t('common.terms.email')"
      hide-bottom-space
      :rules="!phone ? [inputRules.requiredHideMessage, inputRules.email] : [inputRules.email]"
      lazy-rules
      :bottom-slots="false"
    />

    <div class="col-12 row q-py-lg">
      <div class="col-5 q-my-auto">
        <q-separator class="q-my-sm bg-grey-4" />
      </div>
      <span class="col text-center text-text font12 fontmedium">{{ $t('common.ui.misc.or') }}</span>
      <div class="col-5 q-my-auto">
        <q-separator class="q-my-sm bg-grey-4" />
      </div>
    </div>

    <div class="text-text">
      <span class="fontbold font12">{{ $t('common.terms.phone') }}</span>
      <span class="fontlight font12">{{ ' (' + $t('common.terms.celular') + ')' }}</span>
    </div>
    <q-input
      v-model="phone"
      no-error-icon
      class="bg-surface q-mt-sm"
      :placeholder="$t('common.terms.phone')"
      input-class="text-text"
      hide-bottom-space
      :rules="!email ? [inputRules.requiredHideMessage, validatePhone] : [validatePhone]"
      lazy-rules
      mask="(##) #####-####"
      :bottom-slots="false"
    />
  </q-card-section>
</template>

<script setup>
import { useInputRules } from 'src/composables/useInputRules';

const email = defineModel('email', { type: String, required: true });
const phone = defineModel('phone', { type: String, required: true });

const { inputRules } = useInputRules();

const validatePhone = (value) => {
  if (!value) return true;
  return value.replace(/\D/g, '').length >= 10 || 'Telefone inválido';
};
</script>