fix some bugs

src/components/ui/BaseInput.vue

@@ -1,19 +1,30 @@
 <script setup lang="ts">
-defineProps<{
-  modelValue?: string | number
-  label?: string
-  type?: string
-  placeholder?: string
-  hint?: string
-  error?: string
-  disabled?: boolean
-  min?: number
-  max?: number
-  step?: number
-}>()
+withDefaults(
+  defineProps<{
+    modelValue?: string | number
+    label?: string
+    type?: string
+    placeholder?: string
+    hint?: string
+    error?: string
+    disabled?: boolean
+    min?: number
+    max?: number
+    step?: number
+    maxlength?: number | string
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+    autocomplete?: string
+    dir?: string
+    align?: 'start' | 'center' | 'end'
+  }>(),
+  {
+    align: 'start',
+  },
+)
 
 defineEmits<{
   'update:modelValue': [value: string]
+  blur: [event: FocusEvent]
 }>()
 </script>
 
@@ -22,7 +33,7 @@ defineEmits<{
     <label v-if="label" class="form-label">{{ label }}</label>
     <input
       class="input"
-      :class="{ 'input-error': error }"
+      :class="[`input--align-${align}`, { 'input-error': error }]"
       :type="type ?? 'text'"
       :value="modelValue"
       :placeholder="placeholder"
@@ -30,7 +41,12 @@ defineEmits<{
       :min="min"
       :max="max"
       :step="step"
+      :maxlength="maxlength"
+      :inputmode="inputmode"
+      :autocomplete="autocomplete"
+      :dir="dir"
       @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @blur="$emit('blur', $event)"
     />
     <p v-if="error" class="input-error-text">{{ error }}</p>
     <p v-else-if="hint" class="form-hint">{{ hint }}</p>
@@ -50,6 +66,19 @@ defineEmits<{
   transition: border-color 0.15s;
 }
 
+.input--align-start {
+  text-align: start;
+}
+
+.input--align-center {
+  text-align: center;
+  letter-spacing: 0.04em;
+}
+
+.input--align-end {
+  text-align: end;
+}
+
 .input:focus {
   outline: none;
   border-color: var(--color-primary);