test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide section if section.hidden is true, also hide first sections border top using css

Browse Source
This commit is contained in:
Shariq Ansari 2025-01-01 19:57:15 +05:30
parent b252f3a82e
commit 1389b92a34
1 changed files with 216 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/FieldLayout.vue
View File

@ -15,15 +15,14 @@
!hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : '' !hasTabs ? 'hidden' : modal ? 'border-outline-gray-modals' : ''
" "
> >
<div class="overflow-hidden" :class="{ 'my-4 sm:my-6': hasTabs }">
<div <div
v-for="(section, i) in tab.sections" class="sections overflow-hidden"
:key="section.label" :class="{ 'my-4 sm:my-6': hasTabs }"
class="section"
> >
<template v-for="section in tab.sections" :key="section.name">
<div v-if="!section.hidden" class="section" :data-name="section.name">
<div <div
v-if="i != 0" class="w-full section-border"
class="w-full"
:class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']" :class="[section.hideBorder ? 'mt-4' : 'h-px border-t my-5']"
/> />
<Section <Section
@ -36,7 +35,7 @@
collapseIconPosition="right" collapseIconPosition="right"
> >
<div <div
class="column flex gap-4" class="flex gap-4"
:class="[ :class="[
{ {
'px-3 sm:px-5': hasTabs, 'px-3 sm:px-5': hasTabs,
@ -45,9 +44,10 @@
]" ]"
> >
<div <div
class="flex flex-col gap-4 w-full" class="column flex flex-col gap-4 w-full"
v-for="column in section.columns" v-for="column in section.columns"
:key="column.name" :key="column.name"
:data-name="column.name"
> >
<div <div
v-if="column.label && !column.hideLabel" v-if="column.label && !column.hideLabel"
@ -248,6 +248,7 @@
</div> </div>
</Section> </Section>
</div> </div>
</template>
</div> </div>
</Tabs> </Tabs>
</div> </div>
@ -344,4 +345,8 @@ const getPlaceholder = (field) => {
.section:has(.settings-field) { .section:has(.settings-field) {
display: block; display: block;
} }
.sections .section:first-of-type .section-border {
display: none;
}
</style> </style>