78 lines
2 KiB
Vue
78 lines
2 KiB
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>
|