Set up Form component & some form elements components

resources/js_vue3/components/formElements/FormField.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="field" :class="{ 'pt-3' : hasOffset }">
+        <label :for="inputId" class="label" v-html="label"></label>
+        <div class="control">
+            <input 
+                :disabled="isDisabled" 
+                :id="inputId" 
+                :type="inputType" 
+                class="input" 
+                v-model="form[fieldName]" 
+                :placeholder="placeholder" 
+                v-bind="$attrs" 
+                v-on:change="$emit('field-changed', form[fieldName])"
+                :maxlength="this.maxLength" 
+            />
+        </div>
+        <FieldError :form="form" :field="fieldName" />
+        <p class="help" v-html="help" v-if="help"></p>
+    </div> 
+</template>
+
+<script>
+    import { useIdGenerator } from '../../composables/helpers'
+
+    export default {
+        name: 'FormField',
+        inheritAttrs: false,
+
+        setup(props) {
+            const { inputId } = useIdGenerator(props.inputType, props.fieldName)
+            return { inputId }
+        },
+        
+        data() {
+            return {
+
+            }
+        },
+
+        props: {
+            label: {
+                type: String,
+                default: ''
+            },
+
+            fieldName: {
+                type: String,
+                default: '',
+                required: true
+            },
+
+            inputType: {
+                type: String,
+                default: 'text'
+            },
+
+            form: {
+                type: Object,
+                required: true
+            },
+
+            placeholder: {
+                type: String,
+                default: ''
+            },
+
+            help: {
+                type: String,
+                default: ''
+            },
+
+            hasOffset: {
+                type: Boolean,
+                default: false
+            },
+
+            isDisabled: {
+                type: Boolean,
+                default: false
+            },
+
+            maxLength: {
+                type: Number,
+                default: null
+            }
+        }
+    }
+</script>