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

<script lang="ts" setup>
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 full-width full-height">
    <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
        inline-label
        mobile-arrows
        dense
        class="app-text-muted cancel-overflow full-width"
        v-model="employeeTab"
        active-class="active-tab"
        indicator-color="transparent"
        align="left"
      >
        <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="col full-height q-pa-md full-width"
      :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
    >
      <div class="col-md-2 q-mr-md" v-if="$slots['person-card']">
        <slot name="person-card"></slot>
      </div>

      <div
        class="rounded scroll full-height col full-width"
        :class="{
          'q-mt-md': $q.screen.lt.md,
        }"
      >
        <div
          class="row q-col-gutter-y-md surface-1 rounded bordered"
          :class="{ 'q-pa-md': !noPaddingTab }"
        >
          <slot></slot>
        </div>
      </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);
}
</style>