dvcp_v2_webapp/ui/dv/AiDvTabs.vue

<script>
export default {
  name: "AiDvTabs",
  model: {
    prop: "active",
    event: "input"
  },
  props: {
    active: String,
    config: Object,
    values: Object
  },
  computed: {
    layers: {
      set(settings) {
        console.log(settings)
      },
      get() {
        const v = this
        const tab = v.config?.tabs[v.active]
        const values = v.values[tab.label]?.data || {}
        return tab.comps?.map(e => ({dataType: "staticData", ...e, staticData: Array.isArray(values) ? values : values[e.label]}))?.filter(e => e.type) || []
      }
    }
  }
}
</script>

<template>
  <section class="AiDvTabs">
    <ai-dv-render class="fill" v-for="(e,i) in layers" :key="i" :data="layers[i]" :index="i"/>
  </section>
</template>

<style scoped lang="scss">
.AiDvTabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
</style>