Display Components

import { Badge } from 'vant';

interface BadgeProps {
  /** Badge content */
  content?: string | number;
  /** Maximum number */
  max?: number;
  /** Show dot instead of content */
  dot?: boolean;
  /** Badge color */
  color?: string;
  /** Offset position */
  offset?: [number, number];
  /** Show zero value */
  showZero?: boolean;
}

import { Progress } from 'vant';

interface ProgressProps {
  /** Progress percentage */
  percentage?: number;
  /** Stroke width */
  strokeWidth?: string | number;
  /** Progress color */
  color?: string | object;
  /** Track color */
  trackColor?: string;
  /** Pivot text */
  pivotText?: string;
  /** Pivot color */
  pivotColor?: string;
  /** Show pivot */
  showPivot?: boolean;
  /** Inactive */
  inactive?: boolean;
}

import { Circle } from 'vant';

interface CircleProps {
  /** Current rate */
  currentRate?: number;
  /** Speed */
  speed?: number;
  /** Size */
  size?: string | number;
  /** Color */
  color?: string | object;
  /** Layer color */
  layerColor?: string;
  /** Fill */
  fill?: string;
  /** Stroke width */
  strokeWidth?: number;
  /** Stroke linecap */
  strokeLinecap?: 'butt' | 'round' | 'square';
  /** Clockwise */
  clockwise?: boolean;
  /** Text */
  text?: string;
}

import { Empty } from 'vant';

interface EmptyProps {
  /** Empty image */
  image?: string;
  /** Image size */
  imageSize?: string | number | [string | number, string | number];
  /** Description */
  description?: string;
}

import { Skeleton } from 'vant';

interface SkeletonProps {
  /** Number of rows */
  row?: number | string;
  /** Row width */
  rowWidth?: number | string | Array<number | string>;
  /** Title */
  title?: boolean;
  /** Title width */
  titleWidth?: number | string;
  /** Avatar */
  avatar?: boolean;
  /** Avatar size */
  avatarSize?: number | string;
  /** Avatar shape */
  avatarShape?: 'square' | 'round';
  /** Loading state */
  loading?: boolean;
  /** Animate */
  animate?: boolean;
  /** Round */
  round?: boolean;
}

import { Tag } from 'vant';

interface TagProps {
  /** Tag type */
  type?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  /** Tag size */
  size?: 'large' | 'medium' | 'small';
  /** Tag color */
  color?: string;
  /** Show tag */
  show?: boolean;
  /** Plain style */
  plain?: boolean;
  /** Round style */
  round?: boolean;
  /** Mark style */
  mark?: boolean;
  /** Text color */
  textColor?: string;
  /** Closeable */
  closeable?: boolean;
}

import { NoticeBar } from 'vant';

interface NoticeBarProps {
  /** Notice mode */
  mode?: 'closeable' | 'link';
  /** Notice text */
  text?: string;
  /** Text color */
  color?: string;
  /** Background color */
  background?: string;
  /** Left icon */
  leftIcon?: string;
  /** Delay */
  delay?: number | string;
  /** Speed */
  speed?: number | string;
  /** Scrollable */
  scrollable?: boolean | null;
  /** Wrapable */
  wrapable?: boolean;
}

import { TextEllipsis } from 'vant';

interface TextEllipsisProps {
  /** Number of rows to display */
  rows?: string | number;
  /** Ellipsis dots text */
  dots?: string;
  /** Text content */
  content?: string;
  /** Expand button text */
  expandText?: string;
  /** Collapse button text */
  collapseText?: string;
  /** Ellipsis position */
  position?: 'start' | 'middle' | 'end';
}

// Events
interface TextEllipsisEvents {
  /** Triggered when action button is clicked */
  clickAction: (event: MouseEvent) => void;
}

// Instance methods
interface TextEllipsisInstance {
  /** Toggle expand/collapse state */
  toggle: (expanded?: boolean) => void;
}

<template>
  <div>
    <!-- Basic ellipsis -->
    <van-text-ellipsis
      rows="3"
      content="This is a very long text that will be truncated after 3 lines and show ellipsis with expand functionality"
      expand-text="Expand"
      collapse-text="Collapse"
    />
    
    <!-- Custom action slot -->
    <van-text-ellipsis 
      :content="longText"
      rows="2"
      @click-action="handleAction"
    >
      <template #action="{ expanded }">
        <span class="custom-action">
          {{ expanded ? 'Show Less' : 'Show More' }}
        </span>
      </template>
    </van-text-ellipsis>
  </div>
</template>

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

const longText = ref('Very long text content here...');

const handleAction = (event: MouseEvent) => {
  console.log('Action clicked:', event);
};
</script>

import { Watermark } from 'vant';

interface WatermarkProps {
  /** Width of watermark */
  width?: number;
  /** Height of watermark */
  height?: number;
  /** Horizontal gap between watermarks */
  gapX?: number;
  /** Vertical gap between watermarks */
  gapY?: number;
  /** Rotation angle */
  rotate?: string | number;
  /** Watermark image URL */
  image?: string;
  /** Z-index */
  zIndex?: string | number;
  /** Text content */
  content?: string;
  /** Opacity */
  opacity?: string | number;
  /** Full page watermark */
  fullPage?: boolean;
  /** Text color */
  textColor?: string;
}

<template>
  <div>
    <!-- Text watermark -->
    <van-watermark content="Vant Watermark">
      <div class="content">
        <p>Protected content here</p>
      </div>
    </van-watermark>
    
    <!-- Image watermark -->
    <van-watermark 
      :image="logoUrl"
      :width="120"
      :height="64"
      :opacity="0.3"
    >
      <div class="content">
        <p>Content with image watermark</p>
      </div>
    </van-watermark>
    
    <!-- Custom content watermark -->
    <van-watermark :gap-x="50" :gap-y="50">
      <template #content>
        <div class="custom-watermark">
          <van-icon name="shield-o" />
          <span>Custom</span>
        </div>
      </template>
      <div class="content">
        <p>Content with custom watermark</p>
      </div>
    </van-watermark>
  </div>
</template>

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

const logoUrl = 'https://example.com/logo.png';
</script>

import { Swipe, SwipeItem } from 'vant';

interface SwipeProps {
  /** Auto play */
  autoplay?: number | string;
  /** Duration */
  duration?: number | string;
  /** Initial swipe */
  initialSwipe?: number | string;
  /** Show indicators */
  showIndicators?: boolean;
  /** Indicator color */
  indicatorColor?: string;
  /** Loop */
  loop?: boolean;
  /** Touchable */
  touchable?: boolean;
  /** Vertical */
  vertical?: boolean;
  /** Stop propagation */
  stopPropagation?: boolean;
}

import { ImagePreview } from 'vant';

// Function API
function ImagePreview(images: string[]): ImagePreviewInstance;
function ImagePreview(options: ImagePreviewOptions): ImagePreviewInstance;

interface ImagePreviewOptions {
  /** Image URLs */
  images?: string[];
  /** Start position */
  startPosition?: number;
  /** Swipe duration */
  swipeDuration?: number;
  /** Show index */
  showIndex?: boolean;
  /** Show indicators */
  showIndicators?: boolean;
  /** Loop */
  loop?: boolean;
  /** Close on popstate */
  closeOnPopstate?: boolean;
  /** Class name */
  className?: string;
  /** Max zoom */
  maxZoom?: number;
  /** Min zoom */
  minZoom?: number;
  /** Close icon name */
  closeIcon?: string;
  /** Close icon position */
  closeIconPosition?: 'top-left' | 'top-right';
  /** Transition */
  transition?: string;
  /** Overlay style */
  overlayStyle?: object;
}

interface ImagePreviewInstance {
  close: () => void;
  swipeTo: (index: number) => void;
}

import { List } from 'vant';

interface ListProps {
  /** Loading state */
  loading?: boolean;
  /** Finished state */
  finished?: boolean;
  /** Finished text */
  finishedText?: string;
  /** Loading text */
  loadingText?: string;
  /** Error state */
  error?: boolean;
  /** Error text */
  errorText?: string;
  /** Offset */
  offset?: number | string;
  /** Direction */
  direction?: 'up' | 'down';
  /** Immediate check */
  immediateCheck?: boolean;
}