Form Components

/**
 * Basic text input component with validation states
 */
import InputText from "primevue/inputtext";

interface InputTextProps extends BaseComponentProps {
  modelValue?: string;
  size?: "small" | "large";
  invalid?: boolean;
  variant?: "filled" | "outlined";
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
}

<template>
  <InputText 
    v-model="username" 
    placeholder="Enter username"
    :invalid="!isValid"
    size="large"
  />
</template>

<script setup>
import { ref } from 'vue';
import InputText from 'primevue/inputtext';

const username = ref('');
const isValid = ref(true);
</script>

/**
 * AutoComplete input with real-time suggestions
 */
import AutoComplete from "primevue/autocomplete";

interface AutoCompleteProps extends BaseComponentProps {
  modelValue?: any;
  suggestions?: any[];
  optionLabel?: string | ((data: any) => string);
  optionDisabled?: string | ((data: any) => boolean);
  optionGroupLabel?: string | ((data: any) => string);
  optionGroupChildren?: string | ((data: any) => any[]);
  placeholder?: string;
  disabled?: boolean;
  multiple?: boolean;
  minLength?: number;
  delay?: number;
  dropdown?: boolean;
  autoHighlight?: boolean;
  forceSelection?: boolean;
  completeMethod?: (event: AutoCompleteCompleteEvent) => void;
}

interface AutoCompleteCompleteEvent {
  originalEvent: Event;
  query: string;
}

<template>
  <AutoComplete
    v-model="selectedUser"
    :suggestions="filteredUsers"
    @complete="searchUsers"
    optionLabel="name"
    placeholder="Search users..."
    dropdown
    :min-length="2"
  />
</template>

<script setup>
import { ref } from 'vue';
import AutoComplete from 'primevue/autocomplete';

const selectedUser = ref(null);
const filteredUsers = ref([]);
const users = ref([
  { name: 'John Doe', id: 1 },
  { name: 'Jane Smith', id: 2 },
  { name: 'Bob Johnson', id: 3 }
]);

const searchUsers = (event) => {
  const query = event.query.toLowerCase();
  filteredUsers.value = users.value.filter(user => 
    user.name.toLowerCase().includes(query)
  );
};
</script>

/**
 * Multi-line text input with auto-resize options
 */
import Textarea from "primevue/textarea";

interface TextareaProps extends BaseComponentProps {
  modelValue?: string;
  autoResize?: boolean;
  rows?: number;
  cols?: number;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  invalid?: boolean;
}

/**
 * Password input with strength meter and visibility toggle
 */
import Password from "primevue/password";

interface PasswordProps extends BaseComponentProps {
  modelValue?: string;
  promptLabel?: string;
  mediumRegex?: string;
  strongRegex?: string;
  weakLabel?: string;
  mediumLabel?: string;
  strongLabel?: string;
  feedback?: boolean;
  toggleMask?: boolean;
  appendTo?: string;
  placeholder?: string;
  disabled?: boolean;
  invalid?: boolean;
}

/**
 * Text input with formatting mask patterns
 */
import InputMask from "primevue/inputmask";

interface InputMaskProps extends BaseComponentProps {
  modelValue?: string;
  mask?: string;
  placeholder?: string;
  slotChar?: string;
  autoClear?: boolean;
  unmask?: boolean;
  readonly?: boolean;
  disabled?: boolean;
  invalid?: boolean;
}

<template>
  <InputMask 
    v-model="phone" 
    mask="(999) 999-9999"
    placeholder="(999) 999-9999"
  />
  <InputMask 
    v-model="ssn" 
    mask="999-99-9999"
    placeholder="999-99-9999"
  />
</template>

/**
 * Numeric input with formatting and validation
 */
import InputNumber from "primevue/inputnumber";

interface InputNumberProps extends BaseComponentProps {
  modelValue?: number;
  format?: boolean;
  showButtons?: boolean;
  buttonLayout?: "stacked" | "horizontal" | "vertical";
  incrementButtonClass?: string;
  decrementButtonClass?: string;
  incrementButtonIcon?: string;
  decrementButtonIcon?: string;
  locale?: string;
  localeMatcher?: string;
  mode?: "decimal" | "currency";
  currency?: string;
  currencyDisplay?: string;
  useGrouping?: boolean;
  minFractionDigits?: number;
  maxFractionDigits?: number;
  min?: number;
  max?: number;
  step?: number;
  placeholder?: string;
  disabled?: boolean;
  readonly?: boolean;
  invalid?: boolean;
}

/**
 * Modern single selection dropdown (use Select for new projects)
 */
import Select from "primevue/select";
import Dropdown from "primevue/dropdown"; // Legacy

interface SelectProps extends BaseComponentProps {
  modelValue?: any;
  options?: any[];
  optionLabel?: string | ((option: any) => string);
  optionValue?: string | ((option: any) => any);
  optionDisabled?: string | ((option: any) => boolean);
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  placeholder?: string;
  filter?: boolean;
  filterPlaceholder?: string;
  filterLocale?: string;
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
  filterFields?: string[];
  editable?: boolean;
  showClear?: boolean;
  appendTo?: string;
  disabled?: boolean;
  invalid?: boolean;
  loading?: boolean;
  loadingIcon?: string;
  resetFilterOnHide?: boolean;
  virtualScrollerOptions?: object;
}

<template>
  <Select
    v-model="selectedCity"
    :options="cities"
    optionLabel="name"
    optionValue="code"
    placeholder="Select a City"
    filter
    class="w-full md:w-14rem"
  />
</template>

<script setup>
import { ref } from 'vue';
import Select from 'primevue/select';

const selectedCity = ref(null);
const cities = ref([
  { name: 'New York', code: 'NY' },
  { name: 'Rome', code: 'RM' },
  { name: 'London', code: 'LDN' },
  { name: 'Istanbul', code: 'IST' }
]);
</script>

/**
 * Multiple selection dropdown with chips
 */
import MultiSelect from "primevue/multiselect";

interface MultiSelectProps extends BaseComponentProps {
  modelValue?: any[];
  options?: any[];
  optionLabel?: string | ((option: any) => string);
  optionValue?: string | ((option: any) => any);
  optionDisabled?: string | ((option: any) => boolean);
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  display?: "comma" | "chip";
  placeholder?: string;
  filter?: boolean;
  filterPlaceholder?: string;
  filterLocale?: string;
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
  filterFields?: string[];
  showToggleAll?: boolean;
  selectAll?: boolean;
  resetFilterOnHide?: boolean;
  appendTo?: string;
  disabled?: boolean;
  invalid?: boolean;
  loading?: boolean;
  virtualScrollerOptions?: object;
  maxSelectedLabels?: number;
  selectedItemsLabel?: string;
}

/**
 * List-based selection component with multiple selection support
 */
import Listbox from "primevue/listbox";

interface ListboxProps extends BaseComponentProps {
  modelValue?: any;
  options?: any[];
  optionLabel?: string | ((option: any) => string);
  optionValue?: string | ((option: any) => any);
  optionDisabled?: string | ((option: any) => boolean);
  optionGroupLabel?: string;
  optionGroupChildren?: string;
  listStyle?: string;
  disabled?: boolean;
  multiple?: boolean;
  filter?: boolean;
  filterPlaceholder?: string;
  filterLocale?: string;
  filterMatchMode?: "contains" | "startsWith" | "endsWith";
  filterFields?: string[];
  filterInputProps?: object;
  virtualScrollerOptions?: object;
  autoOptionFocus?: boolean;
  selectOnFocus?: boolean;
  focusOnHover?: boolean;
}

<template>
  <Listbox
    v-model="selectedCountries"
    :options="countries"
    optionLabel="name"
    optionValue="code"
    multiple
    filter
    filterPlaceholder="Search countries..."
    listStyle="max-height:250px"
  />
</template>

<script setup>
import { ref } from 'vue';
import Listbox from 'primevue/listbox';

const selectedCountries = ref([]);
const countries = ref([
  { name: 'United States', code: 'US' },
  { name: 'Canada', code: 'CA' },
  { name: 'United Kingdom', code: 'UK' },
  { name: 'Germany', code: 'DE' }
]);
</script>

/**
 * Cascading selection dropdown for hierarchical data
 */
import CascadeSelect from "primevue/cascadeselect";

interface CascadeSelectProps extends BaseComponentProps {
  modelValue?: any;
  options?: any[];
  optionLabel?: string | ((option: any) => string);
  optionValue?: string | ((option: any) => any);
  optionGroupLabel?: string | ((option: any) => string);
  optionGroupChildren?: string | ((option: any) => any[]);
  placeholder?: string;
  disabled?: boolean;
  loading?: boolean;
  invalid?: boolean;
  variant?: "filled" | "outlined";
  appendTo?: string;
}

<template>
  <CascadeSelect
    v-model="selectedLocation"
    :options="locations"
    optionLabel="name"
    optionGroupLabel="name"
    optionGroupChildren="cities"
    placeholder="Select a location..."
  />
</template>

<script setup>
import { ref } from 'vue';
import CascadeSelect from 'primevue/cascadeselect';

const selectedLocation = ref(null);
const locations = ref([
  {
    name: 'United States',
    cities: [
      { name: 'New York', code: 'NY' },
      { name: 'Los Angeles', code: 'LA' }
    ]
  },
  {
    name: 'Canada', 
    cities: [
      { name: 'Toronto', code: 'TO' },
      { name: 'Vancouver', code: 'VA' }
    ]
  }
]);
</script>

/**
 * Tree-based selection dropdown with hierarchical data
 */
import TreeSelect from "primevue/treeselect";

interface TreeSelectProps extends BaseComponentProps {
  modelValue?: any;
  options?: any[];
  placeholder?: string;
  disabled?: boolean;
  selectionMode?: "single" | "multiple" | "checkbox";
  display?: "comma" | "chip";
  metaKeySelection?: boolean;
  appendTo?: string;
  emptyMessage?: string;
  filter?: boolean;
  filterBy?: string;
  filterMode?: "lenient" | "strict";
  filterPlaceholder?: string;
  filterLocale?: string;
  filterInputProps?: object;
  loading?: boolean;
  variant?: "filled" | "outlined";
  invalid?: boolean;
}

<template>
  <TreeSelect
    v-model="selectedNodes"
    :options="treeData"
    selectionMode="multiple"
    display="chip"
    placeholder="Select items..."
    filter
    filterPlaceholder="Search..."
  />
</template>

<script setup>
import { ref } from 'vue';
import TreeSelect from 'primevue/treeselect';

const selectedNodes = ref([]);
const treeData = ref([
  {
    key: '1',
    label: 'Documents',
    children: [
      { key: '1-1', label: 'Work', data: 'Work Folder' },
      { key: '1-2', label: 'Home', data: 'Home Folder' }
    ]
  },
  {
    key: '2',
    label: 'Pictures',
    children: [
      { key: '2-1', label: 'Vacation', data: 'Vacation Photos' },
      { key: '2-2', label: 'Family', data: 'Family Photos' }
    ]
  }
]);
</script>

/**
 * Checkbox control for binary or array values
 */
import Checkbox from "primevue/checkbox";

interface CheckboxProps extends BaseComponentProps {
  modelValue?: any;
  value?: any;
  name?: string;
  binary?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  tabindex?: number;
  trueValue?: any;
  falseValue?: any;
  invalid?: boolean;
  variant?: "filled" | "outlined";
}

<template>
  <!-- Binary checkbox -->
  <Checkbox v-model="checked" binary />
  
  <!-- Array binding -->
  <div class="flex flex-wrap gap-3">
    <div class="flex align-items-center">
      <Checkbox v-model="categories" inputId="category1" name="category" value="Technology" />
      <label for="category1" class="ml-2">Technology</label>
    </div>
    <div class="flex align-items-center">
      <Checkbox v-model="categories" inputId="category2" name="category" value="Finance" />
      <label for="category2" class="ml-2">Finance</label>
    </div>
  </div>
</template>

/**
 * Radio button for exclusive selection
 */
import RadioButton from "primevue/radiobutton";

interface RadioButtonProps extends BaseComponentProps {
  modelValue?: any;
  value?: any;
  name?: string;
  disabled?: boolean;
  readonly?: boolean;
  required?: boolean;
  tabindex?: number;
  invalid?: boolean;
  variant?: "filled" | "outlined";
}

/**
 * Toggle button for binary state with custom labels
 */
import ToggleButton from "primevue/togglebutton";

interface ToggleButtonProps extends BaseComponentProps {
  modelValue?: boolean;
  onIcon?: string;
  offIcon?: string;
  onLabel?: string;
  offLabel?: string;
  iconPos?: "left" | "right";
  disabled?: boolean;
  readonly?: boolean;
  tabindex?: number;
  invalid?: boolean;
}

/**
 * Modern date/time picker (replaces Calendar)
 */
import DatePicker from "primevue/datepicker";

interface DatePickerProps extends BaseComponentProps {
  modelValue?: Date | Date[];
  selectionMode?: "single" | "multiple" | "range";
  dateFormat?: string;
  inline?: boolean;
  showOtherMonths?: boolean;
  selectOtherMonths?: boolean;
  showIcon?: boolean;
  iconDisplay?: "input" | "button";
  icon?: string;
  previousIcon?: string;
  nextIcon?: string;
  incrementIcon?: string;
  decrementIcon?: string;
  numberOfMonths?: number;
  responsiveOptions?: object[];
  view?: "date" | "month" | "year";
  minDate?: Date;
  maxDate?: Date;
  disabledDates?: Date[];
  disabledDays?: number[];
  maxDateCount?: number;
  hideOnDateTimeSelect?: boolean;  
  showTime?: boolean;
  timeOnly?: boolean;
  hourFormat?: "12" | "24";
  stepHour?: number;
  stepMinute?: number;
  stepSecond?: number;
  showSeconds?: boolean;
  showMillisec?: boolean;
  placeholder?: string;
  disabled?: boolean;
  invalid?: boolean;
  readonly?: boolean;
  appendTo?: string;
}

<template>
  <!-- Basic date picker -->
  <DatePicker v-model="date" />
  
  <!-- Date range picker -->
  <DatePicker v-model="dates" selectionMode="range" />
  
  <!-- Date time picker -->
  <DatePicker v-model="datetime" showTime hourFormat="24" />
  
  <!-- Inline calendar -->
  <DatePicker v-model="date" inline />
</template>

/**
 * Color picker with multiple format support
 */
import ColorPicker from "primevue/colorpicker";

interface ColorPickerProps extends BaseComponentProps {
  modelValue?: string;
  defaultColor?: string;
  inline?: boolean;
  format?: "hex" | "rgb" | "hsb";
  disabled?: boolean;
  tabindex?: number;
  autoZIndex?: boolean;
  baseZIndex?: number;
  appendTo?: string;
}

/**
 * Circular range input component
 */
import Knob from "primevue/knob";

interface KnobProps extends BaseComponentProps {
  modelValue?: number;
  size?: number;
  disabled?: boolean;
  readonly?: boolean;
  step?: number;
  min?: number;
  max?: number;
  valueColor?: string;
  rangeColor?: string;
  textColor?: string;
  strokeWidth?: number;
  showValue?: boolean;
  valueTemplate?: string;
  tabindex?: number;
}

/**
 * Star rating input component
 */
import Rating from "primevue/rating";

interface RatingProps extends BaseComponentProps {
  modelValue?: number;
  disabled?: boolean;
  readonly?: boolean;
  stars?: number;
  cancel?: boolean;
  onIcon?: string;
  offIcon?: string;
  cancelIcon?: string;
}

/**
 * Range slider for numeric value selection
 */
import Slider from "primevue/slider";

interface SliderProps extends BaseComponentProps {
  modelValue?: number | number[];
  min?: number;
  max?: number;
  orientation?: "horizontal" | "vertical";
  step?: number;
  range?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  tabindex?: number;
}

/**
 * Advanced file upload component with drag-drop support
 */
import FileUpload from "primevue/fileupload";

interface FileUploadProps extends BaseComponentProps {
  name?: string;
  url?: string;
  mode?: "advanced" | "basic";
  multiple?: boolean;
  accept?: string;
  disabled?: boolean;
  auto?: boolean;
  maxFileSize?: number;
  invalidFileSizeMessage?: string;
  invalidFileTypeMessage?: string;
  fileLimit?: number;
  invalidFileLimitMessage?: string;
  withCredentials?: boolean;
  previewWidth?: number;
  chooseLabel?: string;
  uploadLabel?: string;
  cancelLabel?: string;
  customUpload?: boolean;
  showUploadButton?: boolean;
  showCancelButton?: boolean;
  chooseIcon?: string;
  uploadIcon?: string;
  cancelIcon?: string;
  style?: any;
  class?: string;
}

<template>
  <FileUpload
    name="demo[]"
    url="/api/upload"
    :multiple="true"
    accept="image/*"
    :maxFileSize="1000000"
    @upload="onAdvancedUpload"
    @select="onSelect"
  >
    <template #empty>
      <p>Drag and drop files to here to upload.</p>
    </template>
  </FileUpload>
</template>

/**
 * Multiple value input as removable chips
 */
import InputChips from "primevue/inputchips";

interface InputChipsProps extends BaseComponentProps {
  modelValue?: any[];
  max?: number;
  separator?: string | RegExp;
  addOnBlur?: boolean;
  allowDuplicate?: boolean;
  placeholder?: string;
  disabled?: boolean;
  invalid?: boolean;
  readonly?: boolean;
}

/**
 * Individual chip component for tags and labels
 */
import Chips from "primevue/chips";

interface ChipsProps extends BaseComponentProps {
  modelValue?: any[];
  max?: number;
  separator?: string | RegExp;
  addOnBlur?: boolean;
  allowDuplicate?: boolean;
  placeholder?: string;
  disabled?: boolean;
  invalid?: boolean;
  readonly?: boolean;
  removable?: boolean;
  chipProps?: object;
}

<template>
  <Chips
    v-model="tags"
    placeholder="Add tags..."
    :max="5"
    separator=","
    addOnBlur
  />
</template>

<script setup>
import { ref } from 'vue';
import Chips from 'primevue/chips';

const tags = ref(['vue', 'primevue', 'typescript']);
</script>

/**
 * One-time password input component
 */
import InputOtp from "primevue/inputotp";

interface InputOtpProps extends BaseComponentProps {
  modelValue?: string | number;
  invalid?: boolean;
  disabled?: boolean;
  readonly?: boolean;
  variant?: "filled" | "outlined";
  mask?: boolean;
  integerOnly?: boolean;
  length?: number;
}

// File upload event types
interface FileUploadSelectEvent {
  originalEvent: Event;
  files: File[];
}

interface FileUploadUploadEvent {
  originalEvent: Event;
  files: File[];
}

interface FileUploadErrorEvent {
  originalEvent: Event;
  files: File[];
}

// Date picker types
type DatePickerDateType = Date | Date[] | undefined;

interface DatePickerMonthChangeEvent {
  month: number;
  year: number;
}

interface DatePickerYearChangeEvent {
  month: number;
  year: number;
}

// Input validation types
interface InputValidationState {
  invalid?: boolean;
  errorMessage?: string;
}