debian-mirror-gitlab/app/assets/javascripts/vue_shared/components/slot_switch.vue

<script>
/**
 * Allows to toggle slots based on an array of slot names.
 */
export default {
  name: 'SlotSwitch',

  props: {
    activeSlotNames: {
      type: Array,
      required: true,
    },

    tagName: {
      type: String,
      required: false,
      default: 'div',
    },
  },

  computed: {
    allSlotNames() {
      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
      return Object.keys(this.$slots);
    },
  },
};
</script>

<template>
  <component :is="tagName">
    <template v-for="slotName in allSlotNames">
      <slot v-if="activeSlotNames.includes(slotName)" :name="slotName"></slot>
    </template>
  </component>
</template>