<template>
  <div class="p-4">
    <Provider :data="fieldData">
      <label :for="fieldData.fieldId">Label</label>
      <BaseInput v-model="propName" class="inline-block ml-2 px-3 py-2 border rounded" />
    </Provider>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import BaseInput from '@/components/input/BaseInput.vue'
  import Provider from '@/components/docs/Provider.vue'
  import {CONTROL_ID, CONTROL_NAME, CONTROL_MODEL,} from "@/util/controls";


  let nickname = ref('Bruton Gaster')
  let propName = ref('Frank Jones')

  // Data to be provided to <BaseInput />
  const fieldData = {
    [CONTROL_ID]: 'bar-baz',
    [CONTROL_NAME]: 'nicko',
    [CONTROL_MODEL]: nickname,
  }
</script>
