feat: ทำ form input

src/components/01_branch-management/FormBranchContact.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const telephoneNo = defineModel<string>('telephoneNo');
+const contact = defineModel<string>('contact');
+const email = defineModel<string>('email');
+const contactName = defineModel<string>('contactName');
+const operatingHours = defineModel<string>('operatingHours');
+const lineId = defineModel<string>('lineId');
+
+defineProps<{
+  title?: string;
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• {{ $t(`${title}`) }}</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      :label="$t('formDialogInputEmailHq')"
+      v-model="email"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-7"
+      :label="$t('formDialogInputTelephoneHq')"
+      v-model="telephoneNo"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      :label="$t('formDialogInputContactName')"
+      v-model="contactName"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-7"
+      :label="$t('formDialogInputTelephoneContact')"
+      v-model="contact"
+    />
+
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      hide-bottom-space
+      class="col-5"
+      label="Line ID"
+      v-model="lineId"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>