fix: form variable name

src/components/FormDialog.vue

@@ -4,21 +4,19 @@ import AppBox from 'components/app/AppBox.vue';
 
 defineProps<{
   title: string;
-  addressLocaleTitle: string;
-  addressEngTitle: string;
+  addressTitle: string;
+  addressENTitle: string;
+  submit?: (...args: unknown[]) => void;
+  close?: (...args: unknown[]) => void;
 }>();
 
-interface Address {
-  address: string;
-  province: string;
-  district: string;
-  subDistrict: string;
-  zip: string;
-}
-
 const modal = defineModel('modal', { default: false });
-const addressL = defineModel<Address>('addressL');
-const addressEng = defineModel<Address>('addressEng');
+const address = defineModel('address', { default: '' });
+const addressEN = defineModel('addressEN', { default: '' });
+const provinceId = defineModel('provinceId');
+const districtId = defineModel('districtId');
+const subDistrictId = defineModel('subDistrictId');
+const zipCode = defineModel('zipCode', { default: '' });
 
 const addrOptions = ref({
   provinceOps: [
@@ -37,10 +35,8 @@ const addrOptions = ref({
 </script>
 <template>
   <q-dialog full-width v-model="modal">
-    <AppBox
-      v-if="addressL && addressEng"
-      style="padding: 0; border-radius: var(--radius-2)"
-    >
+    <AppBox style="padding: 0; border-radius: var(--radius-2)">
+      <q-form greedy @submit.prevent @validation-success="submit">
         <!-- header -->
         <q-card-section class="form-header">
           <div class="row items-center justity-between">
@@ -53,11 +49,13 @@ const addrOptions = ref({
             <q-btn
               round
               flat
+              id="closeDialog"
               icon="mdi-close"
               padding="xs"
               class="close-btn"
               :class="{ dark: $q.dark.isActive }"
               v-close-popup
+              @click="close"
             />
           </div>
         </q-card-section>
@@ -91,21 +89,23 @@ const addrOptions = ref({
             >
               <slot name="midTop"></slot>
               <div class="col-12">
-              {{ addressLocaleTitle }}
+                {{ addressTitle }}
               </div>
               <q-input
                 dense
                 outlined
+                id="AddrL"
                 label="ที่อยู่"
                 class="col-12"
-              v-model="addressL.address"
+                v-model="address"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-              v-model="addressL.province"
+                id="selectProvinceL"
+                v-model="provinceId"
                 option-value="value"
                 option-label="label"
                 label="จังหวัด"
@@ -117,7 +117,8 @@ const addrOptions = ref({
                 outlined
                 emit-value
                 map-options
-              v-model="addressL.district"
+                id="selectDistrictL"
+                v-model="districtId"
                 option-value="value"
                 option-label="label"
                 label="อำเภอ"
@@ -128,8 +129,9 @@ const addrOptions = ref({
                 dense
                 outlined
                 emit-value
-              map-options
-              v-model="addressL.subDistrict"
+                map-
+                id="selectSubDistrictL"
+                v-model="subDistrictId"
                 option-value="value"
                 option-label="label"
                 label="ตำบล"
@@ -140,26 +142,29 @@ const addrOptions = ref({
                 dense
                 readonly
                 outlined
+                id="zipL"
                 label="รหัสไปรษณีย์"
                 class="col-3"
-              v-model="addressL.zip"
+                v-model="zipCode"
               />
               <span class="col-12">
-              {{ addressEngTitle }}
+                {{ addressENTitle }}
               </span>
               <q-input
                 dense
                 outlined
+                id="addressEN"
                 label="ที่อยู่"
                 class="col-12"
-              v-model="addressEng.address"
+                v-model="addressEN"
               />
               <q-select
                 dense
                 outlined
                 emit-value
                 map-options
-              v-model="addressEng.province"
+                id="selectProvinceEN"
+                v-model="provinceId"
                 option-value="value"
                 option-label="label"
                 label="จังหวัด"
@@ -171,7 +176,8 @@ const addrOptions = ref({
                 outlined
                 emit-value
                 map-options
-              v-model="addressEng.district"
+                id="selectDistrictEN"
+                v-model="districtId"
                 option-value="value"
                 option-label="label"
                 label="อำเภอ"
@@ -183,7 +189,8 @@ const addrOptions = ref({
                 outlined
                 emit-value
                 map-options
-              v-model="addressEng.subDistrict"
+                id="SelectSubDistrictEN"
+                v-model="subDistrictId"
                 option-value="value"
                 option-label="label"
                 label="ตำบล"
@@ -194,9 +201,10 @@ const addrOptions = ref({
                 dense
                 readonly
                 outlined
+                zip="zipEN"
                 label="รหัสไปรษณีย์"
                 class="col-3"
-              v-model="addressEng.zip"
+                v-model="zipCode"
               />
               <div class="col-12" v-if="$slots.midBottom">
                 <q-separator size="1px" />
@@ -219,12 +227,15 @@ const addrOptions = ref({
             <q-btn
               dense
               unelevated
+              id="submitBtn"
+              type="submit"
               color="primary"
               class="q-px-sm"
               :label="$t('save')"
             />
           </div>
         </q-card-section>
+      </q-form>
     </AppBox>
   </q-dialog>
 </template>