feat(unit_data_tab): adiciona formulario base

src/components/defaults/DefaultInput.vue

@@ -5,11 +5,14 @@
         ref="inputRef"
         v-model="model"
         v-bind="inputAttrs"
+        hide-bottom-space
+        label-color="secondary"
+        color="secondary"
         :label
         :error="!!error"
         :error-message="errorMessage"
         :rules
-        hide-bottom-space
+        :outlined
         :class="inputClass"
         :input-class="nativeInputClass"
         :bg-color="bgColor"
@@ -41,7 +44,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const { label, nativeInputClass, inputClass, rules, icon, bgColor } =
+const { label, nativeInputClass, inputClass, rules, icon, bgColor, outlined } =
   defineProps({
     label: {
       type: String,
@@ -67,6 +70,10 @@ const { label, nativeInputClass, inputClass, rules, icon, bgColor } =
       type: String,
       default: "suface",
     },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
   });
 
 const attrs = useAttrs();
@@ -116,4 +123,8 @@ defineExpose({
 });
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+:deep(.q-field--outlined.q-field--rounded .q-field__control) {
+  border-radius: 8px;
+}
+</style>

src/pages/unit/tabs/UnitDataTab.vue

@@ -1,13 +1,135 @@
 <template>
   <div class="q-pa-md">
-    <div class="row justify-center q-mb-lg">
+    <div class="column justify-center items-center q-mb-lg">
       <AvatarImageComponent @update:file="onAvatarChange" />
+
+      <div class="row full-width q-mt-md q-col-gutter-sm">
+        <DefaultInput
+          v-model="form.social_reason"
+          label="Razão Social"
+          class="col-12"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.fantasy_name"
+          label="Nome Fantasia"
+          class="col-12"
+          outlined
+        />
+
+        <DefaultInput v-model="form.cnpj" label="CNPJ" class="col-4" outlined />
+
+        <DefaultInput
+          v-model="form.state_registration"
+          label="Inscrição Estadual"
+          class="col-4"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.responsible"
+          label="Responsável"
+          class="col-4"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.address"
+          label="Endereço"
+          class="col-8"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.address_number"
+          label="Número"
+          class="col-4"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.zip_code"
+          label="CEP"
+          class="col-3"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.neighborhood"
+          label="Bairro"
+          class="col-5"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.city_state"
+          label="Cidade / Estado"
+          class="col-4"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.complement"
+          label="Complemento"
+          class="col-12"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.primary_email"
+          label="E-mail Principal"
+          class="col-6"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.secondary_email"
+          label="E-mail Secundário"
+          class="col-6"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.phone"
+          label="Telefone"
+          class="col-6"
+          outlined
+        />
+
+        <DefaultInput
+          v-model="form.cellphone_number"
+          label="Celular"
+          class="col-6"
+          outlined
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
 import AvatarImageComponent from "src/components/shared/AvatarImageComponent.vue";
+import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
+
+const { form } = useFormUpdateTracker({
+  social_reason: null,
+  fantasy_name: null,
+  cnpj: null,
+  state_registration: null,
+  address: null,
+  address_number: null,
+  zip_code: null,
+  neighborhood: null,
+  city_state: null,
+  complement: null,
+  responsible: null,
+  primary_email: null,
+  secondary_email: null,
+  phone: null,
+  cellphone_number: null,
+});
 
 function onAvatarChange(file) {
   console.log("Avatar file selected:", file);