Profile Intake Form

A compact form that collects a profile username, password, monthly budget, and mood rating using the UI library's form input components.

Capabilities

Username entry

• Shows a text field with a leading icon and live character counter; caps input at 20 characters, trims whitespace, and emits the updated model when the value changes. @test

Password entry with strength and toggle

• Renders a password field with a strength meter that labels weak (<8 chars), medium (8-11 chars), or strong (>=12 chars with at least one digit and one symbol); includes a visibility toggle that preserves the value. @test

Numeric budget input

• Provides a numeric field formatted as currency with grouping separators, step increments of 50, and min/max bounds of 0 and 10,000; emits the normalized number on arrow clicks and when the field loses focus. @test

Mood slider

• Exposes a 0-10 slider with step size 1; updates the bound model on slide end and renders a badge from the UI library beside the control that mirrors the current value. @test

Implementation

@generates

API

export interface ProfileIntakeFormModel {
  username: string;
  password: string;
  monthlyBudget: number | null;
  mood: number;
}

export interface ProfileIntakeFormEmits {
  (e: 'update:modelValue', value: ProfileIntakeFormModel): void;
  (e: 'submit', value: ProfileIntakeFormModel): void;
}

export interface ProfileIntakeFormProps {
  modelValue: ProfileIntakeFormModel;
  loading?: boolean;
  disableSubmit?: boolean;
}

export const ProfileIntakeForm: import('vue').DefineComponent<
  ProfileIntakeFormProps,
  {},
  {},
  {},
  {},
  {},
  {},
  ProfileIntakeFormEmits
>;

Dependencies { .dependencies }

PrimeVue { .dependency }

UI component library supplying styled text fields, password entry with strength meter and toggle, numeric inputs with steppers/formatting, and slider controls. @satisfied-by