refactor: idPrefix is no longer assigned to FormGenerator.vue

Author: kevinkosterr

src/FormGenerator.vue

@@ -1,9 +1,8 @@
 <script setup>
-import { computed, getCurrentInstance, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { resetObjectProperties, toUniqueArray } from '@/helpers'
 import FormGroup from './FormGroup.vue'
 
-const instance = getCurrentInstance()
 const emits = defineEmits([ 'submit' ])
 
 const props = defineProps({
@@ -17,6 +16,10 @@ const props = defineProps({
     required: false,
     default: ''
   },
+  options: {
+    type: Object,
+    default: () => ({})
+  },
   schema: {
     type: Object,
     required: true
@@ -32,9 +35,9 @@ const props = defineProps({
 })
 
 /** Data / Refs */
-const formGenerator = ref(instance?.proxy || null)
 const fieldElements = ref([])
 const formErrors = ref({})
+const formOptions = computed(() => ({ ...props.options, idPrefix: props.idPrefix }))
 
 /**
  * Update form model key with its new value.
@@ -79,7 +82,7 @@ const onReset = () => {
   props.model = resetObjectProperties(props.model)
 }
 
-defineExpose({ hasErrors, idPrefix: props.idPrefix })
+defineExpose({ hasErrors })
 </script>
 
 <template>
@@ -94,7 +97,8 @@ defineExpose({ hasErrors, idPrefix: props.idPrefix })
       <template v-for="field in props.schema.fields" :key="field">
         <form-group
           :ref="el => fieldElements.push(el)"
-          :form-generator="formGenerator" :field="field"
+          :form-options="formOptions"
+          :field="field"
           :model="props.model"
           @value-updated="updateGeneratorModel"
           @validated="onFieldValidated"
@@ -108,7 +112,7 @@ defineExpose({ hasErrors, idPrefix: props.idPrefix })
           <template v-for="field in group.fields" :key="field">
             <form-group
               :ref="el => fieldElements.push(el)"
-              :form-generator="formGenerator"
+              :form-options="formOptions"
               :field="field"
               :model="props.model"
               @value-updated="updateGeneratorModel"

src/FormGroup.vue

@@ -5,9 +5,9 @@ import { getFieldComponentName, hasLabel } from '@/helpers'
 const fieldComponent = ref(null)
 
 const props = defineProps({
-  formGenerator: {
+  formOptions: {
     type: Object,
-    required: true
+    default: () => ({})
   },
   model: {
     type: Object,
@@ -35,7 +35,7 @@ function onValidated (isValid, fieldErrors, field) {
 
 /** Computed */
 const fieldId = computed(() => {
-  return `${props.formGenerator.idPrefix ? props.formGenerator.idPrefix + '_' : ''}${props.field.name}`
+  return `${props.formOptions.idPrefix ? props.formOptions.idPrefix + '_' : ''}${props.field.name}`
 })
 
 const shouldHaveLabel = computed(() => {
@@ -55,6 +55,7 @@ const shouldHaveLabel = computed(() => {
         :is="getFieldComponentName(props.field)"
         :id="fieldId"
         ref="fieldComponent"
+        :form-options="props.formOptions"
         :model="model"
         :field="props.field"
         @on-input="onInput"

src/composables/useFieldProps.ts

@@ -2,7 +2,7 @@ export function useFieldProps () {
 
   return {
     id: String,
-    formGenerator: Object,
+    formOptions: Object,
     field: {
       type: Object,
       required: true