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

<script setup lang="ts">
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="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-5"
      :label="$t('formDialogInputEmailHq')"
      v-model="email"
      id="input-email"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-7"
      :label="$t('formDialogInputTelephoneHq')"
      v-model="telephoneNo"
      id="input-telephone-no"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-5"
      :label="$t('formDialogInputContactName')"
      v-model="contactName"
      id="input-contact-name"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-7"
      :label="$t('formDialogInputTelephoneContact')"
      v-model="contact"
      id="input-contact"
    />

    <q-input
      :dense="dense"
      :outlined="!readonly"
      :readonly="readonly"
      :borderless="readonly"
      hide-bottom-space
      class="col-5"
      label="Line ID"
      v-model="lineId"
      id="input-line-id"
    />
  </div>
  <q-separator
    v-if="separator"
    class="col-12 q-mt-xl q-mb-md"
    style="padding-block: 0.5px"
  />
</template>