initial commit

resources/js/components/TextInput.vue

@@ -0,0 +1,76 @@
+<template>
+<div :class="wrapperClasses">
+    <label v-if="label"
+        class="fw-bold"
+        :for="id">
+        {{ label }}
+        <template v-if="required">*</template>
+    </label>
+    <input class="form-control" :id="id" :name="name" :type="type" :value="modelValue" :pattern="pattern" :placeholder="placeholder" :required="required" :min="min" :max="max" :tabindex="tabIndex ?? null" @input="$emit('update:modelValue', $event.target.value)" @keydown.enter="handleOnEnter" @blur="handleOnBlur" ref="input" />
+</div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+
+const props = defineProps([
+    "modelValue",
+    "label",
+    "classes",
+    "id",
+    "type",
+    "placeholder",
+    "pattern",
+    "required",
+    "name",
+    "tabIndex",
+    "onEnter",
+    "onBlur",
+    "autofocus",
+    "min",
+    "max",
+]);
+
+defineEmits(["update:modelValue"]);
+
+const input = ref(null);
+const wrapperClasses = ref([""]);
+
+if (Array.isArray(props.classes)) {
+    wrapperClasses.value = props.classes;
+}
+
+const handleOnEnter = () => {
+    if (!props.onEnter) {
+        return;
+    }
+    props.onEnter();
+};
+
+const handleOnBlur = (e) => {
+    if (!props.onBlur) {
+        return;
+    }
+    props.onBlur(e, { id: props.id, value: props.modelValue });
+}
+
+onMounted(() => {
+    if (props.autofocus) {
+        input.value.focus();
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/variables.scss";
+
+input {
+    border-radius: 0;
+
+    &:active,
+    &:focus {
+        outline: none;
+        box-shadow: none;
+    }
+}
+</style>