<script setup>
  /**
   *  Provider is a documentation & testing component that allows
   *  examples to configure scenarios where the example is providing
   *  data that can be injected by the child components.
   *
   *  This will allow us to exercise components that inject data.
   *  An example of this is when a field component provides an id
   *  value for labels & inputs.
   *
   *  Props:
   *
   *  data: Object, required
   *    All keys in the object will be provided to child components
   *
   *  <Provider :data="{id: 'idValue'}">
   *    // id will be available to Child through inject
   *    <Child />
   *  </Provider>
   */

  import {provide} from "vue"
  
  const props = defineProps({
    data: { type: Object, required: true }
  })

  const keys = Object.keys(props.data)
  keys.forEach(key =>{
    provide(key, props.data[key])
  })
</script>

<template>
  <div><slot /></div>
</template>

