Form Components

declare const ElForm: Component;

interface FormProps {
  /** Form data model */
  model?: Record<string, any>;
  /** Validation rules */
  rules?: FormRules;
  /** Label position */
  labelPosition?: 'left' | 'right' | 'top';
  /** Label width */
  labelWidth?: string | number;
  /** Label suffix */
  labelSuffix?: string;
  /** Whether to hide required asterisk */
  hideRequiredAsterisk?: boolean;
  /** Whether to show validation message inline */
  inlineMessage?: boolean;
  /** Whether to show validation status icon */
  statusIcon?: boolean;
  /** Component size */
  size?: ComponentSize;
  /** Whether form is disabled */
  disabled?: boolean;
  /** Whether to validate on rules change */
  validateOnRuleChange?: boolean;
  /** Whether to scroll to first error */
  scrollToError?: boolean;
}

interface FormRules {
  [key: string]: FormItemRule | FormItemRule[];
}

interface FormItemRule {
  required?: boolean;
  message?: string;
  trigger?: 'blur' | 'change' | 'submit';
  min?: number;
  max?: number;
  type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
  pattern?: RegExp;
  validator?: (rule: any, value: any, callback: Function) => void;
}

interface FormEmits {
  validate: (prop: string, isValid: boolean, message: string) => void;
}

interface FormMethods {
  /** Validate the whole form */
  validate: (callback?: (isValid: boolean, invalidFields?: any) => void) => Promise<boolean>;
  /** Validate specific fields */
  validateField: (props: string | string[], callback?: Function) => Promise<boolean>;
  /** Reset fields to initial value and clear validation */
  resetFields: (props?: string | string[]) => void;
  /** Clear validation result */
  clearValidate: (props?: string | string[]) => void;
  /** Scroll to specific field */
  scrollToField: (prop: string) => void;
}

declare const ElFormItem: Component;

interface FormItemProps {
  /** Field name for validation and data binding */
  prop?: string;
  /** Label text */
  label?: string;
  /** Label width */
  labelWidth?: string | number;
  /** Whether field is required */
  required?: boolean;
  /** Validation rules */
  rules?: FormItemRule | FormItemRule[];
  /** Validation error message */
  error?: string;
  /** Whether to show validation message */
  showMessage?: boolean;
  /** Whether to show validation message inline */
  inlineMessage?: boolean | string;
  /** Component size */
  size?: ComponentSize;
}

declare const ElInput: Component;

interface InputProps {
  /** Input value */
  modelValue?: string | number;
  /** Input type */
  type?: 'text' | 'textarea' | 'password' | 'url' | 'email' | 'date' | 'number' | 'tel';
  /** Component size */
  size?: ComponentSize;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input is readonly */
  readonly?: boolean;
  /** Whether input can be cleared */
  clearable?: boolean;
  /** Whether to show password toggle */
  showPassword?: boolean;
  /** Whether to show word limit */
  showWordLimit?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Maximum input length */
  maxlength?: number;
  /** Minimum input length */
  minlength?: number;
  /** Prefix icon */
  prefixIcon?: string | Component;
  /** Suffix icon */
  suffixIcon?: string | Component;
  /** Input width */
  width?: string | number;
  /** Textarea rows */
  rows?: number;
  /** Whether textarea can be resized */
  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
  /** Validate event trigger */
  validateEvent?: boolean;
}

interface InputEmits {
  /** Value change event */
  'update:modelValue': (value: string) => void;
  /** Input event */
  input: (value: string) => void;
  /** Change event */
  change: (value: string) => void;
  /** Focus event */
  focus: (event: FocusEvent) => void;
  /** Blur event */
  blur: (event: FocusEvent) => void;
  /** Clear event */
  clear: () => void;
}

interface InputMethods {
  /** Focus the input */
  focus: () => void;
  /** Blur the input */
  blur: () => void;
  /** Select input text */
  select: () => void;
}

declare const ElInputNumber: Component;

interface InputNumberProps {
  /** Input value */
  modelValue?: number;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step for increment/decrement */
  step?: number;
  /** Step strictly */
  stepStrictly?: boolean;
  /** Number precision */
  precision?: number;
  /** Component size */
  size?: ComponentSize;
  /** Controls position */
  controlsPosition?: '' | 'right';
  /** Whether controls are displayed */
  controls?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input is readonly */
  readonly?: boolean;
}

declare const ElSelect: Component;

interface SelectProps {
  /** Selected value */
  modelValue?: any;
  /** Whether multiple selection is enabled */
  multiple?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input can be cleared */
  clearable?: boolean;
  /** Whether select is collapsible when multiple */
  collapseTags?: boolean;
  /** Maximum number of tags to show */
  maxCollapseTags?: number;
  /** Whether options are filterable */
  filterable?: boolean;
  /** Whether options can be created */
  allowCreate?: boolean;
  /** Whether to load data remotely */
  remote?: boolean;
  /** Remote search function */
  remoteMethod?: (query: string) => void;
  /** Loading state */
  loading?: boolean;
  /** Loading text */
  loadingText?: string;
  /** No match text */
  noMatchText?: string;
  /** No data text */
  noDataText?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Component size */
  size?: ComponentSize;
}

declare const ElOption: Component;

interface OptionProps {
  /** Option value */
  value: any;
  /** Option label */
  label?: string;
  /** Whether option is disabled */
  disabled?: boolean;
}

declare const ElOptionGroup: Component;

interface OptionGroupProps {
  /** Group label */
  label: string;
  /** Whether group is disabled */
  disabled?: boolean;
}

declare const ElCheckbox: Component;

interface CheckboxProps {
  /** Whether checkbox is checked */
  modelValue?: boolean | string | number;
  /** Value when checked */
  trueValue?: boolean | string | number;
  /** Value when unchecked */
  falseValue?: boolean | string | number;
  /** Label text */
  label?: string | number | boolean;
  /** Whether checkbox is disabled */
  disabled?: boolean;
  /** Whether checkbox is indeterminate */
  indeterminate?: boolean;
  /** Component size */
  size?: ComponentSize;
  /** Native name attribute */
  name?: string;
  /** Whether to validate on change */
  validateEvent?: boolean;
}

declare const ElCheckboxGroup: Component;

interface CheckboxGroupProps {
  /** Selected values */
  modelValue?: Array<string | number | boolean>;
  /** Component size */
  size?: ComponentSize;
  /** Whether group is disabled */
  disabled?: boolean;
  /** Minimum checked items */
  min?: number;
  /** Maximum checked items */
  max?: number;
  /** Text color when checked */
  textColor?: string;
  /** Fill color when checked */
  fill?: string;
  /** Whether to validate on change */
  validateEvent?: boolean;
}

declare const ElRadio: Component;

interface RadioProps {
  /** Selected value */
  modelValue?: string | number | boolean;
  /** Radio value */
  value?: string | number | boolean;
  /** Label text */
  label?: string | number | boolean;
  /** Whether radio is disabled */
  disabled?: boolean;
  /** Component size */
  size?: ComponentSize;
  /** Native name attribute */
  name?: string;
}

declare const ElRadioGroup: Component;

interface RadioGroupProps {
  /** Selected value */
  modelValue?: string | number | boolean;
  /** Component size */
  size?: ComponentSize;
  /** Whether group is disabled */
  disabled?: boolean;
  /** Text color when checked */
  textColor?: string;
  /** Fill color when checked */
  fill?: string;
  /** Whether to validate on change */
  validateEvent?: boolean;
}

declare const ElSwitch: Component;

interface SwitchProps {
  /** Switch value */
  modelValue?: boolean | string | number;
  /** Whether switch is disabled */
  disabled?: boolean;
  /** Switch width */
  width?: number;
  /** Value when active */
  activeValue?: boolean | string | number;
  /** Value when inactive */
  inactiveValue?: boolean | string | number;
  /** Text when active */
  activeText?: string;
  /** Text when inactive */
  inactiveText?: string;
  /** Color when active */
  activeColor?: string;
  /** Color when inactive */
  inactiveColor?: string;
  /** Component size */
  size?: ComponentSize;
  /** Native name attribute */
  name?: string;
  /** Whether to validate on change */
  validateEvent?: boolean;
  /** Whether loading state */
  loading?: boolean;
  /** Custom action before change */
  beforeChange?: () => Promise<boolean> | boolean;
}

declare const ElSlider: Component;

interface SliderProps {
  /** Slider value */
  modelValue?: number | number[];
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step size */
  step?: number;
  /** Whether to show input box */
  showInput?: boolean;
  /** Whether to show input controls */
  showInputControls?: boolean;
  /** Whether to show stops */
  showStops?: boolean;
  /** Whether to show tooltip */
  showTooltip?: boolean;
  /** Tooltip formatter */
  formatTooltip?: (value: number) => string;
  /** Whether slider is disabled */
  disabled?: boolean;
  /** Whether range selection */
  range?: boolean;
  /** Whether vertical */
  vertical?: boolean;
  /** Slider height when vertical */
  height?: string;
  /** Debounce delay */
  debounce?: number;
  /** Tooltip class */
  tooltipClass?: string;
  /** Component size */
  size?: ComponentSize;
  /** Marks on slider */
  marks?: Record<number, string>;
}

declare const ElDatePicker: Component;

interface DatePickerProps {
  /** Selected date value */
  modelValue?: Date | string | number | Date[] | string[] | number[];
  /** Whether input is readonly */
  readonly?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Component size */
  size?: ComponentSize;
  /** Whether input is editable */
  editable?: boolean;
  /** Whether input can be cleared */
  clearable?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Start placeholder for range */
  startPlaceholder?: string;
  /** End placeholder for range */
  endPlaceholder?: string;
  /** Date picker type */
  type?: 'year' | 'years' | 'month' | 'months' | 'date' | 'dates' | 'datetime' | 'datetimerange' | 'daterange' | 'monthrange' | 'yearrange' | 'week';
  /** Date format */
  format?: string;
  /** Value format */
  valueFormat?: string;
  /** Disabled dates function */
  disabledDate?: (date: Date) => boolean;
  /** Shortcuts */
  shortcuts?: DatePickerShortcut[];
  /** First day of week */
  cellClassName?: (date: Date) => string;
  /** Range separator */
  rangeSeparator?: string;
  /** Default value */
  defaultValue?: Date | Date[];
  /** Default time */
  defaultTime?: Date | Date[];
}

interface DatePickerShortcut {
  text: string;
  value: Date | (() => Date);
}

declare const ElMention: Component;

interface MentionProps {
  /** Input value */
  modelValue?: string;
  /** Mention options */
  options?: MentionOption[];
  /** Trigger character */
  trigger?: string | string[];
  /** Whether loading */
  loading?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Whether disabled */
  disabled?: boolean;
  /** Component size */
  size?: ComponentSize;
  /** Maximum number of suggestions */
  maxSuggestions?: number;
  /** Split character */
  split?: string;
  /** Filter option function */
  filterOption?: (input: string, option: MentionOption) => boolean;
  /** Placement of suggestion dropdown */
  placement?: 'top' | 'bottom';
  /** Prefix for mentions */
  prefix?: string;
  /** Suffix for mentions */
  suffix?: string;
  /** Whether to show avatar */
  showAvatar?: boolean;
}

interface MentionOption {
  /** Option value */
  value: string;
  /** Option label */
  label: string;
  /** Avatar URL */
  avatar?: string;
  /** Option description */
  description?: string;
  /** Whether disabled */
  disabled?: boolean;
}

interface MentionEmits {
  /** Input change event */
  'update:modelValue': (value: string) => void;
  /** Search event */
  search: (text: string, trigger: string) => void;
  /** Select event */
  select: (option: MentionOption, trigger: string) => void;
  /** Focus event */
  focus: (event: FocusEvent) => void;
  /** Blur event */
  blur: (event: FocusEvent) => void;
}

type ComponentSize = '' | 'large' | 'default' | 'small';

interface Component {
  name?: string;
  props?: Record<string, any>;
  emits?: string[] | Record<string, any>;
  setup?: Function;
}