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

<script lang="ts" setup>
defineProps<{
  readonly?: boolean;
  titleFormAddress?: string;
  addressTitle?: string;
  addressTitleEN?: string;
  noAddress?: boolean;
  noPaddingTab?: boolean;
  disabledRule?: boolean;
  employee?: boolean;
  tabsList?: { name: string; label: string }[];
}>();
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="row col full-width scroll">
      <!-- prepend -->
      <div class="col" v-if="$slots.prepend">
        <slot name="prepend"></slot>
      </div>

      <!-- center -->
      <div class="col column full-height">
        <slot></slot>
      </div>

      <!-- append -->
      <div class="col" v-if="$slots.append">
        <slot name="append"></slot>
      </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>