bravio init project

components/InputText.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="space-y-2">
+    <label for="text" class="block text-sm text-gray-900">{{label}} <span>{{ required ? '*' : '' }}</span></label>
+    <div class="h-10 flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
+      <input 
+        id="text" 
+        type="text" 
+        name="text" 
+        :placeholder="placeholder"
+        class="block min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500" 
+        :required="required"
+        :value="modelValue"
+        @input="updateValue"
+        />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    placeholder: {
+      type: String,
+      default: 'Input'
+    }
+  },
+  emits: ['input-value'],
+  methods: {
+    updateValue(event) {
+      this.$emit('input-value', event.target.value)
+    }
+  },
+}
+</script>