sfp_vue_franchisee_ginastica_cerebro/src/components/defaults/DefaultForm.vue

<template>
  <QForm ref="formRef" v-bind="$attrs" @validation-error="onValidationError">
    <slot />
  </QForm>
</template>

<script setup>
import { nextTick, useTemplateRef } from "vue";
import { QForm } from "quasar";
import { useScroll } from "src/composables/useScroll";

defineOptions({ inheritAttrs: false });

const formRef = useTemplateRef("formRef");

const { scrollToComponent } = useScroll();

const getValidationComponents = (...args) =>
  formRef.value?.getValidationComponents(...args);

const onValidationError = async (invalidComponent) => {
  if (!invalidComponent) return;

  await nextTick();

  invalidComponent.focus?.();

  scrollToComponent(invalidComponent);
};

const resetValidation = (...args) => formRef.value?.resetValidation(...args);

const validate = (...args) => formRef.value?.validate(...args);

const submit = (...args) => formRef.value?.submit(...args);

defineExpose({ validate, resetValidation, getValidationComponents, submit });
</script>