sfp_front_vue_diarista_cliente/src/components/login/LoginStepOnePanel.vue

<template>
  <q-card-section class="full-width">
    <div class="text-text">
      <span class="text-weight-medium">{{ $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"
      :placeholder="$t('common.terms.email')"
      hide-bottom-space
      :rules="!phone ? [inputRules.requiredHideMessage, 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">{{ $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="text-weight-medium">{{ $t('common.terms.phone') }}</span>
      <span class="text-weight-light">{{ ' (' + $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, inputRules.email] : []"
      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();
</script>