<template>
  <div class="ui-gate-content" :class="{active}" v-if="brotherInstances">
    <slot :active="active" />
  </div>
</template>

<script setup>
import { 
  onBeforeMount, 
  ref, 
  inject, 
  getCurrentInstance, 
  onUnmounted 
} from 'vue'
import { Relation } from './constant'

const active = ref(false)
const brotherInstances = inject(Relation).value

if (brotherInstances) {
  onBeforeMount(() => brotherInstances.push(active))
  onUnmounted(() => {
    const index = brotherInstances.indexOf(active)
    if (~index) {
      brotherInstances.splice(index, 1)
    }
  })
}

</script>

<script> export default { name: 'ui-gate-content' } </script>
