Website Structure

Frontend-Learner/components/common/FormInput.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * @file FormInput.vue
+ * @description Reusable input component with label, error handling, and support for disabled/required states.
+ */
+
+defineProps<{
+  modelValue: string
+  label: string
+  type?: string
+  placeholder?: string
+  error?: string
+  required?: boolean
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  /** Update v-model value */
+  'update:modelValue': [value: string]
+}>()
+
+const updateValue = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div class="form-group" :class="{ 'has-error': error }">
+    <label class="input-label">
+      {{ label }}
+      <span v-if="required" class="required-mark">*</span>
+    </label>
+    <input
+      :type="type || 'text'"
+      :value="modelValue"
+      class="input-field"
+      :class="{ 'input-error': error }"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="updateValue"
+    >
+    <span v-if="error" class="error-message">
+      <span class="error-icon">⚠</span>
+      {{ error }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.form-group {
+  margin-bottom: 16px;
+}
+
+.required-mark {
+  color: var(--error);
+  margin-left: 2px;
+}
+
+.input-error {
+  border-color: var(--error) !important;
+  background-color: rgba(239, 68, 68, 0.05);
+}
+
+.input-error:focus {
+  outline-color: var(--error) !important;
+}
+
+.error-message {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--error);
+  font-size: 12px;
+  margin-top: 6px;
+  animation: shake 0.3s ease-in-out;
+}
+
+.error-icon {
+  font-size: 14px;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-4px); }
+  75% { transform: translateX(4px); }
+}
+</style>