Basic Components

import { Button } from 'vant';

interface ButtonProps {
  /** Button type affecting appearance */
  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  /** Button size */
  size?: 'large' | 'normal' | 'small' | 'mini';
  /** Button text content */
  text?: string;
  /** Icon name to display */
  icon?: string;
  /** Icon position relative to text */
  iconPosition?: 'left' | 'right';
  /** Loading state */
  loading?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Plain style button */
  plain?: boolean;
  /** Hairline border */
  hairline?: boolean;
  /** Square shape */
  square?: boolean;
  /** Round shape */
  round?: boolean;
  /** Block level button */
  block?: boolean;
  /** Custom color */
  color?: string;
  /** Button tag type */
  tag?: keyof HTMLElementTagMap;
  /** Native button type */
  nativeType?: 'button' | 'submit' | 'reset';
}

// Events
interface ButtonEvents {
  /** Triggered when button is clicked */
  click: (event: MouseEvent) => void;
  /** Triggered when touch starts */
  touchstart: (event: TouchEvent) => void;
}

<template>
  <div>
    <!-- Basic button -->
    <van-button type="primary">Primary Button</van-button>
    
    <!-- Button with icon -->
    <van-button type="primary" icon="plus" @click="handleClick">
      Add Item
    </van-button>
    
    <!-- Loading button -->
    <van-button type="primary" :loading="loading" @click="handleSubmit">
      Submit
    </van-button>
    
    <!-- Disabled button -->
    <van-button type="primary" disabled>Disabled</van-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'vant';

const loading = ref(false);

const handleClick = () => {
  console.log('Button clicked');
};

const handleSubmit = async () => {
  loading.value = true;
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000));
  loading.value = false;
};
</script>

import { Cell } from 'vant';

interface CellProps {
  /** Left side title */
  title?: string | number;
  /** Right side value */
  value?: string | number;
  /** Description text below title */
  label?: string;
  /** Left icon name */
  icon?: string;
  /** Right icon name */
  rightIcon?: string;
  /** Cell size */
  size?: 'large' | 'normal';
  /** URL to navigate to */
  url?: string;
  /** Route object for vue-router */
  to?: string | object;
  /** Replace current route */
  replace?: boolean;
  /** Enable click feedback */
  clickable?: boolean;
  /** Whether to show arrow */
  isLink?: boolean;
  /** Required field marker */
  required?: boolean;
  /** Center content vertically */
  center?: boolean;
  /** Arrow direction */
  arrowDirection?: 'left' | 'up' | 'down' | 'right';
  /** Title text color */
  titleStyle?: string | object;
  /** Title class name */
  titleClass?: string;
  /** Value text color */
  valueStyle?: string | object;
  /** Value class name */
  valueClass?: string;
  /** Label text color */
  labelStyle?: string | object;
  /** Label class name */
  labelClass?: string;
}

// Events
interface CellEvents {
  /** Triggered when cell is clicked */
  click: (event: MouseEvent) => void;
}

// Slots
interface CellSlots {
  /** Custom title content */
  title?: () => VNode[];
  /** Custom value content */
  default?: () => VNode[];
  /** Custom label content */
  label?: () => VNode[];
  /** Custom left icon */
  icon?: () => VNode[];
  /** Custom right icon */
  'right-icon'?: () => VNode[];
  /** Extra content */
  extra?: () => VNode[];
}

<template>
  <van-cell-group>
    <!-- Basic cell -->
    <van-cell title="Cell title" value="Content" />
    
    <!-- Cell with description -->
    <van-cell title="Cell title" value="Content" label="Description" />
    
    <!-- Cell with icon -->
    <van-cell title="Cell title" value="Content" icon="location-o" />
    
    <!-- Clickable cell -->
    <van-cell 
      title="Click me" 
      is-link 
      @click="handleCellClick"
    />
    
    <!-- Cell with custom slot -->
    <van-cell title="Custom content" value="Content">
      <template #right-icon>
        <van-icon name="search" class="custom-icon" />
      </template>
    </van-cell>
  </van-cell-group>
</template>

<script setup lang="ts">
import { Cell, CellGroup, Icon } from 'vant';

const handleCellClick = () => {
  console.log('Cell clicked');
};
</script>

import { CellGroup } from 'vant';

interface CellGroupProps {
  /** Group title */
  title?: string;
  /** Inset style with rounded corners */
  inset?: boolean;
  /** Custom border style */
  border?: boolean;
}

// Slots
interface CellGroupSlots {
  /** Cell group content */
  default?: () => VNode[];
  /** Custom title content */
  title?: () => VNode[];
}

import { Icon } from 'vant';

interface IconProps {
  /** Icon name */
  name: string;
  /** Icon color */
  color?: string;
  /** Icon size */
  size?: string | number;
  /** Class prefix for custom icons */
  classPrefix?: string;
  /** Custom tag type */
  tag?: keyof HTMLElementTagMap;
  /** Badge content */
  badge?: string | number;
  /** Show badge dot */
  dot?: boolean;
}

<template>
  <div>
    <!-- Basic icon -->
    <van-icon name="chat-o" />
    
    <!-- Icon with color and size -->
    <van-icon name="chat-o" color="#1989fa" size="20px" />
    
    <!-- Icon with badge -->
    <van-icon name="chat-o" badge="9" />
    <van-icon name="chat-o" dot />
  </div>
</template>

import { Image } from 'vant';

interface ImageProps {
  /** Image source URL */
  src?: string;
  /** Image fit mode */
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  /** Alt text */
  alt?: string;
  /** Image width */
  width?: string | number;
  /** Image height */
  height?: string | number;
  /** Border radius */
  radius?: string | number;
  /** Round shape */
  round?: boolean;
  /** Enable lazy loading */
  lazyLoad?: boolean;
  /** Show loading placeholder */
  showLoading?: boolean;
  /** Show error placeholder */
  showError?: boolean;
  /** Error icon */
  errorIcon?: string;
  /** Loading icon */
  loadingIcon?: string;
  /** Icon size for placeholder */
  iconSize?: string | number;
  /** Icon prefix */
  iconPrefix?: string;
}

// Events
interface ImageEvents {
  /** Triggered when image loads successfully */
  load: (event: Event) => void;
  /** Triggered when image fails to load */
  error: (event: Event) => void;
  /** Triggered when image is clicked */
  click: (event: MouseEvent) => void;
}

import { Row, Col } from 'vant';

interface RowProps {
  /** Grid type */
  type?: 'flex';
  /** Horizontal alignment */
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
  /** Vertical alignment */
  align?: 'top' | 'middle' | 'bottom';
  /** Whether to wrap */
  wrap?: boolean;
  /** Column gap */
  gutter?: string | number | Array<string | number>;
  /** Custom tag */
  tag?: keyof HTMLElementTagMap;
}

interface ColProps {
  /** Column span */
  span?: string | number;
  /** Column offset */
  offset?: string | number;
  /** Custom tag */
  tag?: keyof HTMLElementTagMap;
}

<template>
  <div>
    <!-- Basic grid -->
    <van-row>
      <van-col span="8">Col 8</van-col>
      <van-col span="8">Col 8</van-col>
      <van-col span="8">Col 8</van-col>
    </van-row>
    
    <!-- Grid with gutter -->
    <van-row gutter="20">
      <van-col span="6">Col 6</van-col>
      <van-col span="6">Col 6</van-col>
      <van-col span="6">Col 6</van-col>
      <van-col span="6">Col 6</van-col>
    </van-row>
    
    <!-- Flex layout -->
    <van-row type="flex" justify="center" align="middle">
      <van-col span="6">Centered</van-col>
      <van-col span="6">Content</van-col>
    </van-row>
  </div>
</template>

import { Popup } from 'vant';

interface PopupProps {
  /** Show/hide popup */
  show?: boolean;
  /** Popup position */
  position?: 'top' | 'bottom' | 'right' | 'left' | 'center';
  /** Show overlay */
  overlay?: boolean;
  /** Overlay class */
  overlayClass?: string;
  /** Overlay style */
  overlayStyle?: object;
  /** Close on overlay click */
  closeOnClickOverlay?: boolean;
  /** Z-index */
  zIndex?: string | number;
  /** Animation duration */
  duration?: string | number;
  /** Border radius */
  round?: boolean;
  /** Lock scroll */
  lockScroll?: boolean;
  /** Show close icon */
  closeable?: boolean;
  /** Close icon name */
  closeIcon?: string;
  /** Close icon position */
  closeIconPosition?: 'top-left' | 'top-right';
  /** Transition name */
  transition?: string;
  /** Safe area inset bottom */
  safeAreaInsetBottom?: boolean;
  /** Safe area inset top */
  safeAreaInsetTop?: boolean;
}

import { Space } from 'vant';

interface SpaceProps {
  /** Direction of arrangement */
  direction?: 'horizontal' | 'vertical';
  /** Spacing size */
  size?: string | number | [string | number, string | number];
  /** Alignment */
  align?: 'start' | 'end' | 'center' | 'baseline';
  /** Whether to wrap */
  wrap?: boolean;
  /** Fill container */
  fill?: boolean;
}

import { Toast } from 'vant';

// Function API
function Toast(message: string): ToastInstance;
function Toast(options: ToastOptions): ToastInstance;

interface ToastOptions {
  /** Toast type */
  type?: 'text' | 'loading' | 'success' | 'fail' | 'html';
  /** Toast message */
  message?: string;
  /** Display position */
  position?: 'top' | 'middle' | 'bottom';
  /** Display duration (ms) */
  duration?: number;
  /** Custom class name */
  className?: string;
  /** Prevent touch events */
  forbidClick?: boolean;
  /** Loading type */
  loadingType?: 'circular' | 'spinner';
  /** Show overlay */
  overlay?: boolean;
  /** Close on overlay click */
  closeOnClickOverlay?: boolean;
  /** Transition name */
  transition?: string;
  /** Icon name */
  icon?: string;
  /** Icon size */
  iconSize?: string | number;
  /** Icon prefix */
  iconPrefix?: string;
  /** Z-index */
  zIndex?: number;
}

interface ToastInstance {
  /** Close toast */
  close: () => void;
}

// Static methods and exports
namespace Toast {
  function loading(message?: string): ToastInstance;
  function success(message?: string): ToastInstance;
  function fail(message?: string): ToastInstance;
  function clear(): void;
  function setDefaultOptions(options: ToastOptions): void;
  function resetDefaultOptions(): void;
}

// Additional function exports
function showToast(options: string | ToastOptions): ToastInstance;
function closeToast(all?: boolean): void;
function showFailToast(options: string | ToastOptions): ToastInstance;
function showLoadingToast(options: string | ToastOptions): ToastInstance;
function showSuccessToast(options: string | ToastOptions): ToastInstance;
function allowMultipleToast(allow?: boolean): void;
function setToastDefaultOptions(options: ToastOptions): void;
function resetToastDefaultOptions(): void;

<template>
  <div>
    <van-button @click="showToast">Show Toast</van-button>
    <van-button @click="showLoading">Show Loading</van-button>
    <van-button @click="showSuccess">Show Success</van-button>
  </div>
</template>

<script setup lang="ts">
import { Toast } from 'vant';

const showToast = () => {
  Toast('Some message');
};

const showLoading = () => {
  const toast = Toast.loading({
    message: 'Loading...',
    forbidClick: true,
  });
  
  // Close after 3 seconds
  setTimeout(() => {
    toast.close();
  }, 3000);
};

const showSuccess = () => {
  Toast.success('Success!');
};
</script>

import { ConfigProvider } from 'vant';

interface ConfigProviderProps {
  /** Theme mode */
  theme?: 'light' | 'dark';
  /** Theme color variables */
  themeVars?: Record<string, string>;
  /** Icon class prefix */
  iconPrefix?: string;
  /** Component tag prefix */
  tag?: string;
}

import { Divider } from 'vant';

interface DividerProps {
  /** Dashed border style */
  dashed?: boolean;
  /** Hairline border style */
  hairline?: boolean;
  /** Vertical orientation */
  vertical?: boolean;
  /** Content position for horizontal dividers */
  contentPosition?: 'left' | 'center' | 'right';
}

<template>
  <div>
    <!-- Basic divider -->
    <van-divider />
    
    <!-- Divider with text -->
    <van-divider>Text</van-divider>
    
    <!-- Dashed divider -->
    <van-divider dashed>Dashed</van-divider>
    
    <!-- Custom content position -->
    <van-divider content-position="left">Left</van-divider>
    <van-divider content-position="right">Right</van-divider>
    
    <!-- Vertical divider -->
    <van-divider vertical />
  </div>
</template>

import { BackTop } from 'vant';

interface BackTopProps {
  /** Right offset */
  right?: string | number;
  /** Bottom offset */
  bottom?: string | number;
  /** Z-index */
  zIndex?: string | number;
  /** Scroll target selector or element */
  target?: string | Element;
  /** Scroll offset to show button */
  offset?: string | number;
  /** Immediate scroll without animation */
  immediate?: boolean;
  /** Teleport target */
  teleport?: string | Element;
}

// Events
interface BackTopEvents {
  /** Triggered when back to top button is clicked */
  click: (event: MouseEvent) => void;
}

<template>
  <div>
    <!-- Basic back to top -->
    <van-back-top />
    
    <!-- Custom position and offset -->
    <van-back-top
      :right="20"
      :bottom="100"
      :offset="300"
      @click="handleBackTop"
    />
    
    <!-- Custom content -->
    <van-back-top>
      <div class="custom-back-top">
        <van-icon name="arrow-up" />
      </div>
    </van-back-top>
  </div>
</template>

<script setup lang="ts">
import { BackTop, Icon } from 'vant';

const handleBackTop = () => {
  console.log('Back to top clicked');
};
</script>

import { Overlay } from 'vant';

interface OverlayProps {
  /** Show/hide overlay */
  show?: boolean;
  /** Z-index */
  zIndex?: string | number;
  /** Custom class name */
  className?: string;
  /** Custom style */
  customStyle?: object;
  /** Animation duration */
  duration?: string | number;
  /** Lock scroll */
  lockScroll?: boolean;
}

// Events
interface OverlayEvents {
  /** Triggered when overlay is clicked */
  click: (event: MouseEvent) => void;
}

import { Sticky } from 'vant';

interface StickyProps {
  /** Z-index when sticky */
  zIndex?: string | number;
  /** Container selector */
  container?: Element;
  /** Offset from top when sticky */
  offsetTop?: string | number;
  /** Offset from bottom when sticky */
  offsetBottom?: string | number;
  /** Sticky position */
  position?: 'top' | 'bottom';
}

// Events
interface StickyEvents {
  /** Triggered when sticky state changes */
  change: (isFixed: boolean) => void;
  /** Triggered when scrolling */
  scroll: (scrollTop: number, isFixed: boolean) => void;
}