<template>
  <div class="group-option">
    <span class="group-option-label" v-if="props.label">
      {{ props.label }}
    </span>
    <slot />
  </div>
</template>

<script setup>
import { Relation } from './constant'
import { inject, onBeforeMount, onUnmounted, getCurrentInstance } from 'vue'
const props = defineProps({
  label: String
})

const brotherInstances = inject(Relation)
const instance = getCurrentInstance()

if (brotherInstances.value) {
  onBeforeMount(() => brotherInstances.value = [...brotherInstances.value, instance])
  onUnmounted(() => {
    const index = brotherInstances.value.indexOf(instance)
    if (~index) {
      brotherInstances.value.splice(index, 1)
      brotherInstances.value = [...brotherInstances.value]
    }
  })
}
</script>

<script> export default { name: 'ui-group-option' } </script>