Initial commit, framework/frontend assets setup

resources/scripts/app/components/Input.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { defineProps, defineEmits, ref, watch } from 'vue';
+
+const props = defineProps( {
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    name: {
+        type: String,
+    },
+    required: {
+        type: Boolean,
+        default: false,
+    },
+    placeholder: {
+        type: String,
+        default: "",
+    }
+} );
+
+const emit = defineEmits(['update:modelValue']);
+const inputValue = ref(props.modelValue);
+const updateValue = () => {
+    emit('update:modelValue', inputValue.value);
+};
+
+// If the modelValue prop changes externally, update the local ref
+watch(() => props.modelValue, (newVal) => {
+    inputValue.value = newVal;
+});
+</script>
+
+<template>
+    <input
+        type="text"
+        :id="name"
+        :name="name"
+        class="mt-1 p-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
+        :placeholder
+        :required
+        v-model="inputValue"
+        @input="updateValue"
+    >
+</template>