Initial commit: fabric-trade-user Vue 3 app with mobile and desktop layouts

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ui/BaseInput.vue

@@ -0,0 +1,67 @@
+<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
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="form-group">
+    <label v-if="label" class="form-label">{{ label }}</label>
+    <input
+      class="input"
+      :class="{ 'input-error': error }"
+      :type="type ?? 'text'"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :min="min"
+      :max="max"
+      :step="step"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <p v-if="error" class="input-error-text">{{ error }}</p>
+    <p v-else-if="hint" class="form-hint">{{ hint }}</p>
+  </div>
+</template>
+
+<style scoped>
+.input {
+  width: 100%;
+  height: var(--btn-height);
+  padding: 0 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.9375rem;
+  background: var(--color-surface);
+  color: var(--color-text);
+  transition: border-color 0.15s;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.input-error {
+  border-color: var(--color-danger);
+}
+
+.input-error-text {
+  color: var(--color-danger);
+  font-size: 0.8125rem;
+  margin: 4px 0 0;
+}
+</style>