<template>
  <slot />
</template>

<script setup lang="ts">
import { inject, provide, Ref, ref } from 'vue';

const props = defineProps<{
  name: string;
}>();

const name = ref(props.name);
const prevGroup = inject<Ref<string>>('formGroup', ref(''));

if (prevGroup?.value) {
  name.value = `${prevGroup.value}.${props.name}`;
}

provide('formGroup', name);
</script>
