From d3b8148cfa777517ed1a80affe58d2410e120952 Mon Sep 17 00:00:00 2001
From: "Gabriel R. Antunes" <gabrielrodantunes@gmail.com>
Date: Wed, 24 Jul 2024 15:12:17 -0400
Subject: [PATCH] refactor: use typescript props definition

---
 .../Appbar/SpeechBubbles/SpeechBubbles.vue    |  7 +++-
 components/Pages/DashboardCalendar/Event.vue  | 29 ++++++++++-------
 .../Pages/DashboardCalendar/EventList.vue     | 15 +++++----
 components/Pages/DashboardCalendar/Month.vue  | 17 ++++++----
 components/Section/Ambientes/Form/Form.vue    | 23 ++++++++-----
 components/Section/Ambientes/Modal/Modal.vue  | 16 ++++++----
 components/Section/Blocos/Form/Form.vue       | 23 ++++++++-----
 components/Section/Blocos/Modal/Modal.vue     | 21 ++++++------
 components/Section/Cursos/Form/Form.vue       | 23 ++++++++-----
 components/Section/Cursos/Modal/Modal.vue     | 16 ++++++----
 .../Form/Geral/02-Turmas/02-Turmas.vue        | 23 +++++++------
 components/Section/Diarios/Grid/Grid.vue      | 14 ++++++--
 components/Section/Diarios/Grid/Item/Item.vue | 18 +++++++----
 components/Section/Diarios/Modal/Modal.vue    | 16 ++++++----
 components/Section/Disciplinas/Form/Form.vue  | 21 +++++++-----
 .../Section/Disciplinas/Modal/Modal.vue       | 16 ++++++----
 .../SpeechBubblesCalendar.vue                 |  8 ++++-
 .../Turmas/Form/Fields/Periodo/Bruto.vue      | 16 ++++------
 .../Turmas/Form/Fields/Periodo/Periodo.vue    | 16 ++++------
 .../Turmas/Form/Fields/Periodo/SerieTurma.vue | 16 ++++------
 components/Section/Turmas/Form/Form.vue       | 14 ++++----
 components/Section/Turmas/Modal/Modal.vue     | 16 ++++++----
 components/Section/Usuarios/Form/Form.vue     | 15 +++++----
 .../Section/Usuarios/Form/Profile/Profile.vue | 17 ++++++----
 components/Section/Usuarios/Grid/Grid.vue     | 12 +++++--
 .../Section/Usuarios/Modals/Form/Form.vue     | 16 ++++++----
 components/Sidebar/SidebarItem.vue            | 15 +++++----
 components/Sidebar/SidebarItemGroup.vue       | 15 +++++----
 components/Sidebar/SidebarItemSpacer.vue      | 15 +++++----
 components/UI/SearchBar/SearchBar.vue         | 14 +++++---
 components/UI/TextButton/TextButton.vue       | 14 +++++---
 components/VV/Autocomplete/Autocomplete.vue   | 15 +++++----
 components/VV/SelectRoles/SelectRoles.vue     | 15 +++++----
 components/VV/TextField.vue                   | 32 +++++++++----------
 34 files changed, 348 insertions(+), 231 deletions(-)

diff --git a/components/Appbar/SpeechBubbles/SpeechBubbles.vue b/components/Appbar/SpeechBubbles/SpeechBubbles.vue
index 9d814e2..c5ebdff 100644
--- a/components/Appbar/SpeechBubbles/SpeechBubbles.vue
+++ b/components/Appbar/SpeechBubbles/SpeechBubbles.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core';
 
-const props = defineProps<{ notificationsButtonEl: HTMLElement | null }>();
+type Props = {
+  notificationsButtonEl: HTMLElement | null;
+};
+
+const props = defineProps<Props>();
+
 const bubbleEl = ref(null);
 
 const boundingActivator = useElementBounding(props.notificationsButtonEl);
diff --git a/components/Pages/DashboardCalendar/Event.vue b/components/Pages/DashboardCalendar/Event.vue
index f69567e..01b8b19 100644
--- a/components/Pages/DashboardCalendar/Event.vue
+++ b/components/Pages/DashboardCalendar/Event.vue
@@ -2,24 +2,31 @@
 // Interface and types
 
 // Props
-const props = defineProps({
-  id: String,
-  name: String,
-  details: String,
-  locale: String,
-  color: String,
-});
+
+type Props = {
+  id?: string;
+
+  name?: string;
+  details?: string;
+  color?: string;
+
+  locale?: string;
+};
+
+const props = defineProps<Props>();
 
 // Event
 </script>
 
 <template>
   <v-card class="-event flex-shrink-0 mx-auto rounded-lg w-full" height="128px">
-    <div class="w-2 h-full" :style="{ backgroundColor: props.color! }"></div>
+    <div class="w-2 h-full" :style="{ backgroundColor: props.color }"></div>
+
     <v-container class="flex flex-col w-full h-full">
-      <p class="font-semibold">{{ props.name! }}</p>
-      <p class="font-medium h-full mb-auto">{{ props.details! }}</p>
-      <p class="font-medium">{{ props.locale! }}</p>
+      <p class="font-semibold">{{ props.name }}</p>
+      <p class="font-medium h-full mb-auto">{{ props.details }}</p>
+
+      <p class="font-medium" v-if="props.locale">{{ props.locale }}</p>
     </v-container>
   </v-card>
 </template>
diff --git a/components/Pages/DashboardCalendar/EventList.vue b/components/Pages/DashboardCalendar/EventList.vue
index f9aa8c9..6b82bc0 100644
--- a/components/Pages/DashboardCalendar/EventList.vue
+++ b/components/Pages/DashboardCalendar/EventList.vue
@@ -25,12 +25,15 @@ type EventItem = Omit<Event, 'locale' | 'type'> & {
 };
 
 // Props
-const props = defineProps({
-  year: Number,
-  steps: Array<Step>,
-  events: Array<Event>,
-  monthNum: Number,
-});
+
+type Props = {
+  year: number;
+  steps: Step[];
+  events: Event[];
+  monthNum: number;
+};
+
+const props = defineProps<Props>();
 
 // Set event data
 let allEventItems = ref<EventItem[]>([
diff --git a/components/Pages/DashboardCalendar/Month.vue b/components/Pages/DashboardCalendar/Month.vue
index ec20dff..28e1fd4 100644
--- a/components/Pages/DashboardCalendar/Month.vue
+++ b/components/Pages/DashboardCalendar/Month.vue
@@ -26,12 +26,15 @@ type Event = {
 };
 
 // Props
-const props = defineProps({
-  year: Number,
-  toggleMonth: Boolean,
-  steps: Array<Step>,
-  events: Array<Event>,
-});
+
+type Props = {
+  year: number;
+  toggleMonth: boolean;
+  steps: Step[];
+  events: Event[];
+};
+
+const props = defineProps<Props>();
 
 // Month
 const daysInTheWeek = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
@@ -244,7 +247,7 @@ onMounted(async () => {
         @click="toggleMonth(-1)"
         v-show="props.toggleMonth!"
       />
-      
+
       <!-- Month name -->
       <h1 class="font-medium text-center text-xl w-full">
         {{
diff --git a/components/Section/Ambientes/Form/Form.vue b/components/Section/Ambientes/Form/Form.vue
index 17de7c3..b2ae6b5 100644
--- a/components/Section/Ambientes/Form/Form.vue
+++ b/components/Section/Ambientes/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiAmbienteFindOne, useApiClient } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -68,12 +71,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse ambiente?'
   );
 
   if (resposta) {
-    await apiClient.ambientes.ambienteDeleteById({ id: editIdRef.value });
+    await apiClient.ambientes.ambienteDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['ambientes'] });
     $emit('close');
   }
diff --git a/components/Section/Ambientes/Modal/Modal.vue b/components/Section/Ambientes/Modal/Modal.vue
index db54ee2..3884e3f 100644
--- a/components/Section/Ambientes/Modal/Modal.vue
+++ b/components/Section/Ambientes/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Section/Blocos/Form/Form.vue b/components/Section/Blocos/Form/Form.vue
index 8b17b35..1a2202e 100644
--- a/components/Section/Blocos/Form/Form.vue
+++ b/components/Section/Blocos/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiBlocosFindOne, useApiClient } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -57,12 +60,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse bloco?'
   );
 
   if (resposta) {
-    await apiClient.blocos.blocoDeleteById({ id: editIdRef.value });
+    await apiClient.blocos.blocoDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['blocos'] });
     $emit('close');
   }
diff --git a/components/Section/Blocos/Modal/Modal.vue b/components/Section/Blocos/Modal/Modal.vue
index d58ace6..4cd718c 100644
--- a/components/Section/Blocos/Modal/Modal.vue
+++ b/components/Section/Blocos/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
@@ -23,10 +27,7 @@ const isActive = ref(false);
 
     <template v-slot:="{ isActive }">
       <v-card class="dialog-style">
-        <SectionBlocosForm
-          :editId="editId"
-          @close="isActive.value = false"
-        />
+        <SectionBlocosForm :editId="editId" @close="isActive.value = false" />
       </v-card>
     </template>
   </v-dialog>
diff --git a/components/Section/Cursos/Form/Form.vue b/components/Section/Cursos/Form/Form.vue
index 3336930..c3e5255 100644
--- a/components/Section/Cursos/Form/Form.vue
+++ b/components/Section/Cursos/Form/Form.vue
@@ -5,15 +5,18 @@ import { computed } from 'vue';
 import * as yup from 'yup';
 import { useApiClient, useApiCursosFindOne } from '~/composables';
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -67,12 +70,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esse curso?'
   );
 
   if (resposta) {
-    await apiClient.cursos.cursoDeleteById({ id: editIdRef.value });
+    await apiClient.cursos.cursoDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['cursos'] });
     $emit('close');
   }
diff --git a/components/Section/Cursos/Modal/Modal.vue b/components/Section/Cursos/Modal/Modal.vue
index 406051a..bffe35a 100644
--- a/components/Section/Cursos/Modal/Modal.vue
+++ b/components/Section/Cursos/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue b/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue
index 706a5a3..bce8b1a 100644
--- a/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue
+++ b/components/Section/Diarios/Form/Geral/02-Turmas/02-Turmas.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue';
 
-const props = defineProps({
-  searchBarText: String,
-});
+//
+
+type Props = {
+  searchBarText?: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const $emit = defineEmits(['close', 'back', 'next']);
 
@@ -79,10 +85,7 @@ const selectRole = (role: string) => {
                     </template>
 
                     <template #actions>
-                      <v-radio 
-                        class="detail"
-                        :value="disciplina.id"
-                      ></v-radio>
+                      <v-radio class="detail" :value="disciplina.id"></v-radio>
                     </template>
 
                     <UICardLine>
@@ -96,7 +99,7 @@ const selectRole = (role: string) => {
             </div>
 
             <div v-if="showGroupingSection" class="Seaction-Grouping pt-3">
-              <UIDaySelectionClass/>
+              <UIDaySelectionClass />
             </div>
           </v-expansion-panel-text>
         </v-expansion-panel>
@@ -110,9 +113,9 @@ const selectRole = (role: string) => {
         <UIButtonModalAddNewClassButton />
       </div>
       <div class="button-group">
-        <UIButtonModalBackButton @click="backForm"/>
+        <UIButtonModalBackButton @click="backForm" />
         <UIButtonModalCancelButton @click="closeForm" />
-        <UIButtonModalSaveButton/>
+        <UIButtonModalSaveButton />
       </div>
     </div>
   </v-form>
diff --git a/components/Section/Diarios/Grid/Grid.vue b/components/Section/Diarios/Grid/Grid.vue
index 37f0b68..c4f5202 100644
--- a/components/Section/Diarios/Grid/Grid.vue
+++ b/components/Section/Diarios/Grid/Grid.vue
@@ -1,10 +1,18 @@
 <script setup lang="ts">
-const props = defineProps({
-  searchBarText: String,
-});
+//
 
 const $emit = defineEmits(['edit']);
 
+//
+
+type Props = {
+  searchBarText?: string;
+};
+
+const props = defineProps<Props>();
+
+//
+
 const { searchBarText } = toRefs(props);
 const { diarios } = await useApiDiariosFindAll(searchBarText);
 </script>
diff --git a/components/Section/Diarios/Grid/Item/Item.vue b/components/Section/Diarios/Grid/Item/Item.vue
index 1068fb3..b666e14 100644
--- a/components/Section/Diarios/Grid/Item/Item.vue
+++ b/components/Section/Diarios/Grid/Item/Item.vue
@@ -1,15 +1,21 @@
-<script setup>
+<script setup lang="ts">
+import type { DiarioFindOneResultDto } from '@ladesa-ro/api-client-fetch';
 import { defineProps, toRefs } from 'vue';
 
 // Definição das props ajustadas
-const props = defineProps({
-  diario: Object,
-});
+
+type Props = {
+  diario: DiarioFindOneResultDto;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const { diario } = toRefs(props);
 
 // Realizei a chamada da ROTA useApiDiariosProfessorFindAllByDiarioId
-const { diarioProfessorList } = await useApiDiariosProfessorFindAllByDiarioId({
+const { diariosProfessorList } = await useApiDiariosProfessorFindAllByDiarioId({
   diario: diario.value,
 });
 </script>
@@ -31,7 +37,7 @@ const { diarioProfessorList } = await useApiDiariosProfessorFindAllByDiarioId({
       <span>
         Professores:
         <template
-          v-for="diarioProfessor in diarioProfessorList"
+          v-for="diarioProfessor in diariosProfessorList"
           :key="diarioProfessor.id"
         >
           {{ diarioProfessor.vinculo.usuario.nome }}
diff --git a/components/Section/Diarios/Modal/Modal.vue b/components/Section/Diarios/Modal/Modal.vue
index 4adf16f..965364a 100644
--- a/components/Section/Diarios/Modal/Modal.vue
+++ b/components/Section/Diarios/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Section/Disciplinas/Form/Form.vue b/components/Section/Disciplinas/Form/Form.vue
index fceefa4..15981f4 100644
--- a/components/Section/Disciplinas/Form/Form.vue
+++ b/components/Section/Disciplinas/Form/Form.vue
@@ -7,15 +7,16 @@ import { useApiClient, useApiDisciplinasFindOne } from '~/composables';
 
 //
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
@@ -48,12 +49,16 @@ const initialFormValues = reactive({
 });
 
 const handleDelete = async () => {
+  const id = editIdRef.value;
+
+  if (!id) return;
+
   const resposta = window.confirm(
     'Você tem certeza de que deseja deletar esta Disciplina?'
   );
 
   if (resposta) {
-    await apiClient.disciplinas.disciplinaDeleteById({ id: editIdRef.value });
+    await apiClient.disciplinas.disciplinaDeleteById({ id: id });
     await queryClient.invalidateQueries({ queryKey: ['disciplinas'] });
     $emit('close');
   }
diff --git a/components/Section/Disciplinas/Modal/Modal.vue b/components/Section/Disciplinas/Modal/Modal.vue
index 1024f80..f211cf2 100644
--- a/components/Section/Disciplinas/Modal/Modal.vue
+++ b/components/Section/Disciplinas/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Section/Horario/SpeechBubblesCalendar/SpeechBubblesCalendar.vue b/components/Section/Horario/SpeechBubblesCalendar/SpeechBubblesCalendar.vue
index 049b084..82ee047 100644
--- a/components/Section/Horario/SpeechBubblesCalendar/SpeechBubblesCalendar.vue
+++ b/components/Section/Horario/SpeechBubblesCalendar/SpeechBubblesCalendar.vue
@@ -29,7 +29,13 @@ const selectedDay = useSelectedDay();
     ></div>
 
     <div class="flex flex-col">
-      <PagesDashboardCalendarMonth :year="selectedDay.year()" class="mx-0" />
+      <PagesDashboardCalendarMonth
+        :year="selectedDay.year()"
+        :toggleMonth="false"
+        :steps="[]"
+        :events="[]"
+        class="mx-0"
+      />
     </div>
   </div>
 </template>
diff --git a/components/Section/Turmas/Form/Fields/Periodo/Bruto.vue b/components/Section/Turmas/Form/Fields/Periodo/Bruto.vue
index 041ee2f..e675b42 100644
--- a/components/Section/Turmas/Form/Fields/Periodo/Bruto.vue
+++ b/components/Section/Turmas/Form/Fields/Periodo/Bruto.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-defineProps({
-  disabled: {
-    type: Boolean,
-    required: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-  },
-});
+type Props = {
+  disabled?: boolean;
+  isLoading?: boolean;
+};
+
+defineProps<Props>();
 </script>
 
 <template>
diff --git a/components/Section/Turmas/Form/Fields/Periodo/Periodo.vue b/components/Section/Turmas/Form/Fields/Periodo/Periodo.vue
index 2bf8c2e..18b2ce5 100644
--- a/components/Section/Turmas/Form/Fields/Periodo/Periodo.vue
+++ b/components/Section/Turmas/Form/Fields/Periodo/Periodo.vue
@@ -3,16 +3,12 @@ import { useTurmaFormValues } from '../../-Helpers/context';
 import { QuerySuspenseBehaviourMode } from '../../../../../../integrations';
 import { verificarModalidade } from './-Helpers/verificar-modalidade';
 
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    required: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-  },
-});
+type Props = {
+  disabled?: boolean;
+  isLoading?: boolean;
+};
+
+const props = defineProps<Props>();
 
 const formValues = useTurmaFormValues();
 
diff --git a/components/Section/Turmas/Form/Fields/Periodo/SerieTurma.vue b/components/Section/Turmas/Form/Fields/Periodo/SerieTurma.vue
index e429096..62490a3 100644
--- a/components/Section/Turmas/Form/Fields/Periodo/SerieTurma.vue
+++ b/components/Section/Turmas/Form/Fields/Periodo/SerieTurma.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
 import { useTurmaFormValues } from '../../-Helpers/context';
 
-defineProps({
-  disabled: {
-    type: Boolean,
-    required: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-  },
-});
+type Props = {
+  disabled?: boolean;
+  isLoading?: boolean;
+};
+
+defineProps<Props>();
 
 const formValues = useTurmaFormValues();
 
diff --git a/components/Section/Turmas/Form/Form.vue b/components/Section/Turmas/Form/Form.vue
index 023e3d3..32d1897 100644
--- a/components/Section/Turmas/Form/Form.vue
+++ b/components/Section/Turmas/Form/Form.vue
@@ -8,14 +8,16 @@ import { useTurmaSubmit } from './-Helpers/useTurmaSubmit';
 
 //
 
-const props = defineProps({
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const { editId } = toRefs(props);
 
 //
diff --git a/components/Section/Turmas/Modal/Modal.vue b/components/Section/Turmas/Modal/Modal.vue
index 8eee50f..a585e69 100644
--- a/components/Section/Turmas/Modal/Modal.vue
+++ b/components/Section/Turmas/Modal/Modal.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Section/Usuarios/Form/Form.vue b/components/Section/Usuarios/Form/Form.vue
index 16f3318..d8b9da6 100644
--- a/components/Section/Usuarios/Form/Form.vue
+++ b/components/Section/Usuarios/Form/Form.vue
@@ -7,15 +7,16 @@ import type { FormUserOutput, FormUserValues } from './FormUtils';
 
 //
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 //
diff --git a/components/Section/Usuarios/Form/Profile/Profile.vue b/components/Section/Usuarios/Form/Profile/Profile.vue
index 1af0646..10647cf 100644
--- a/components/Section/Usuarios/Form/Profile/Profile.vue
+++ b/components/Section/Usuarios/Form/Profile/Profile.vue
@@ -5,15 +5,18 @@ import { useFormUser, type FormUserOutput } from '../FormUtils';
 const apiClient = useApiClient();
 const queryClient = useQueryClient();
 
-const props = defineProps({
-  //props do modal criar e editar
-  editId: {
-    type: String,
-    required: false,
-    default: null,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editIdRef = toRef(props, 'editId');
 
 const $emit = defineEmits(['close']);
diff --git a/components/Section/Usuarios/Grid/Grid.vue b/components/Section/Usuarios/Grid/Grid.vue
index 40b806d..d5ec5c5 100644
--- a/components/Section/Usuarios/Grid/Grid.vue
+++ b/components/Section/Usuarios/Grid/Grid.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-const props = defineProps({
-  searchBarText: String,
-});
+//
+
+type Props = {
+  searchBarText?: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const $emit = defineEmits(['edit']);
 
diff --git a/components/Section/Usuarios/Modals/Form/Form.vue b/components/Section/Usuarios/Modals/Form/Form.vue
index 59f3a0f..92f5d8e 100644
--- a/components/Section/Usuarios/Modals/Form/Form.vue
+++ b/components/Section/Usuarios/Modals/Form/Form.vue
@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const props = defineProps({
-  editId: {
-    type: String,
-    default: null,
-    required: false,
-  },
+//
+
+type Props = {
+  editId?: string | null;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  editId: null,
 });
 
+//
+
 const editId = toRef(props, 'editId');
 
 const isActive = ref(false);
diff --git a/components/Sidebar/SidebarItem.vue b/components/Sidebar/SidebarItem.vue
index 445ca4d..0a97bc4 100644
--- a/components/Sidebar/SidebarItem.vue
+++ b/components/Sidebar/SidebarItem.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { ISidebarItem } from './ISidebarItem';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-}) as { item: ISidebarItem };
+//
+
+type Props = {
+  item: ISidebarItem;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const { item } = toRefs(props);
 </script>
diff --git a/components/Sidebar/SidebarItemGroup.vue b/components/Sidebar/SidebarItemGroup.vue
index d5fa8c3..54f5b76 100644
--- a/components/Sidebar/SidebarItemGroup.vue
+++ b/components/Sidebar/SidebarItemGroup.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { ISidebarItem } from './ISidebarItem';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-}) as { item: ISidebarItem };
+//
+
+type Props = {
+  item: ISidebarItem;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const { item } = toRefs(props);
 </script>
diff --git a/components/Sidebar/SidebarItemSpacer.vue b/components/Sidebar/SidebarItemSpacer.vue
index 0fa69e4..e731460 100644
--- a/components/Sidebar/SidebarItemSpacer.vue
+++ b/components/Sidebar/SidebarItemSpacer.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { ISidebarItem } from './ISidebarItem';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-}) as { item: ISidebarItem };
+//
+
+type Props = {
+  item: ISidebarItem;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const { item } = toRefs(props);
 </script>
diff --git a/components/UI/SearchBar/SearchBar.vue b/components/UI/SearchBar/SearchBar.vue
index dcee218..8e7980a 100644
--- a/components/UI/SearchBar/SearchBar.vue
+++ b/components/UI/SearchBar/SearchBar.vue
@@ -1,9 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue';
 
-const props = defineProps({
-  value: String,
-});
+//
+
+type Props = {
+  value?: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const emits = defineEmits(['update:value']);
 
diff --git a/components/UI/TextButton/TextButton.vue b/components/UI/TextButton/TextButton.vue
index 1c6c88c..a62abdd 100644
--- a/components/UI/TextButton/TextButton.vue
+++ b/components/UI/TextButton/TextButton.vue
@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const props = defineProps({
-  text: String,
-  showBackground: Boolean,
-});
+//
+
+type Props = {
+  text?: string;
+  showBackground?: boolean;
+};
+
+const props = defineProps<Props>();
+
+//
 </script>
 
 <template>
diff --git a/components/VV/Autocomplete/Autocomplete.vue b/components/VV/Autocomplete/Autocomplete.vue
index 4d9feb3..9ab3615 100644
--- a/components/VV/Autocomplete/Autocomplete.vue
+++ b/components/VV/Autocomplete/Autocomplete.vue
@@ -4,12 +4,15 @@ import { toRef } from 'vue';
 
 const searchValue = defineModel('search', { default: '' });
 
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-});
+//
+
+type Props = {
+  name: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const name = toRef(props, 'name');
 
diff --git a/components/VV/SelectRoles/SelectRoles.vue b/components/VV/SelectRoles/SelectRoles.vue
index 68bba55..5ab97ed 100644
--- a/components/VV/SelectRoles/SelectRoles.vue
+++ b/components/VV/SelectRoles/SelectRoles.vue
@@ -2,12 +2,15 @@
 import { useField } from 'vee-validate';
 import { toRefs } from 'vue';
 
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-});
+//
+
+type Props = {
+  name: string;
+};
+
+const props = defineProps<Props>();
+
+//
 
 const { name } = toRefs(props);
 
diff --git a/components/VV/TextField.vue b/components/VV/TextField.vue
index 37a0adc..4185da6 100644
--- a/components/VV/TextField.vue
+++ b/components/VV/TextField.vue
@@ -2,25 +2,23 @@
 import { useField } from 'vee-validate';
 import { toRef } from 'vue';
 
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'text',
-  },
-  value: {
-    type: String,
-    default: undefined,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  successMessage: {
-    type: String,
-    default: '',
-  },
+//
+
+type Props = {
+  type: string;
+  value?: string;
+  name: string;
+  successMessage: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  value: undefined,
+  successMessage: '',
 });
 
+//
+
 const name = toRef(props, 'name');
 
 const {