jws-frontend/src/components/02_personnel-management/InfoForm.vue

<script lang="ts" setup>
import AppBox from '../app/AppBox.vue';
import FormAddress from './FormAddress.vue';

defineProps<{
  readonly?: boolean;
  titleFormAddress?: string;
  addressTitle?: string;
  addressTitleEN?: string;
  noAddress?: boolean;
  noPaddingTab?: boolean;
  disabledRule?: boolean;
  employee?: boolean;
  tabsList?: { name: string; label: string }[];
}>();

const address = defineModel('address', { default: '' });
const addressEN = defineModel('addressEN', { default: '' });
const provinceId = defineModel<string | null | undefined>('provinceId');
const districtId = defineModel<string | null | undefined>('districtId');
const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
const zipCode = defineModel<string>('zipCode', { default: '' });

const sameWithEmployer = defineModel<boolean>('sameWithEmployer');
const employeeTab = defineModel<string>('employeeTab');
</script>
<template>
  <div class="column absolute-top" style="inset: 0">
    <div
      v-if="tabsList && tabsList.length > 0"
      class="row surface-2 q-px-md q-pt-md full-width"
      style="border-bottom: 1px solid var(--brand-1)"
    >
      <q-tabs
        dense
        class="app-text-muted cancel-overflow"
        v-model="employeeTab"
        active-class="active-tab"
        indicator-color="transparent"
      >
        <q-tab
          v-for="tab in tabsList"
          v-bind:key="tab.name"
          class="content-tab text-capitalize"
          :name="tab.name"
          :label="$t(tab.label)"
          style="z-index: 999"
        />
      </q-tabs>
    </div>

    <div class="row full-width" style="flex: 1">
      <div class="col-3" v-if="$slots['person-card']">
        <slot name="person-card"></slot>
      </div>
      <div
        :class="{
          'col-9': $slots['person-card'],
          'col-12': !$slots['person-card'],
        }"
        class="relative-position"
      >
        <AppBox
          bordered
          :noPadding="noPaddingTab"
          :class="{
            'q-my-md q-mr-md': $slots['person-card'],
            'q-ma-md': !$slots['person-card'],
          }"
          style="position: absolute; overflow-y: auto; inset: 0"
        >
          <div class="row q-col-gutter-y-md">
            <slot name="information"></slot>
            <slot name="person"></slot>
            <slot name="address" v-if="!noAddress">
              <FormAddress
                dense
                outlined
                separator
                :employee="employee"
                :readonly="readonly"
                :disabledRule="disabledRule"
                v-model:address="address"
                v-model:addressEN="addressEN"
                v-model:provinceId="provinceId"
                v-model:districtId="districtId"
                v-model:subDistrictId="subDistrictId"
                v-model:zipCode="zipCode"
                v-model:same-with-employer="sameWithEmployer"
                :title="titleFormAddress"
                :addressTitle="addressTitle || ''"
                :addressTitleEN="addressTitleEN || ''"
                v-if="!$slots.address"
              />
            </slot>
            <slot name="qr-code"></slot>
            <slot name="location"></slot>
            <slot name="by-type"></slot>
          </div>
        </AppBox>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.active-tab {
  color: var(--brand-1);
  background-color: var(--surface-tab);
  border-top: 1px solid var(--brand-1);
  border-left: 1px solid var(--brand-1);
  border-right: 1px solid var(--brand-1);
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
  margin-bottom: -1.5px;
  border-bottom: 3px solid var(--surface-tab);
}

.content-tab {
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
  position: relative;
}

:deep(.q-tabs__content) {
  overflow: visible;
}
</style>