95 lines
2.7 KiB
Vue
95 lines
2.7 KiB
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>
|