fix: use Section component in Data tab

This commit is contained in:
Shariq Ansari 2024-12-05 17:58:21 +05:30
parent 94d5dc6870
commit 878003909a

View File

@ -1,18 +1,25 @@
<template>
<div class="flex flex-col gap-4">
<div class="flex flex-col my-4 sm:my-6">
<div
v-for="section in sections"
v-for="(section, i) in sections"
:key="section.label"
class="section first:border-t-0 border-outline-gray-modals first:pt-0"
:class="section.hideBorder ? '' : 'border-t pt-4'"
>
<div
v-if="!section.hideLabel"
class="flex h-7 mb-3 max-w-fit cursor-pointer items-center gap-2 text-base font-semibold leading-5"
v-if="!section.hideBorder && i != 0"
class="h-px w-full border-t my-5"
/>
<Section
class="text-lg font-medium px-3 sm:px-5"
:label="section.label"
:hideLabel="section.hideLabel"
:opened="section.opened"
collapseIconPosition="right"
>
<div
class="grid gap-4 mt-6 px-3 sm:px-5"
:class="gridClass(section.columns)"
>
{{ section.label }}
</div>
<div class="grid gap-4" :class="gridClass(section.columns)">
<div v-for="field in section.fields" :key="field.name">
<div
class="settings-field"
@ -33,7 +40,8 @@
class="text-ink-red-3"
v-if="
field.mandatory ||
(field.mandatory_depends_on && field.mandatory_via_depends_on)
(field.mandatory_depends_on &&
field.mandatory_via_depends_on)
"
>*</span
>
@ -163,11 +171,13 @@
</div>
</div>
</div>
</Section>
</div>
</div>
</template>
<script setup>
import Section from '@/components/Section.vue'
import EditIcon from '@/components/Icons/EditIcon.vue'
import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
import UserAvatar from '@/components/UserAvatar.vue'