Utilities and Composables

import { 
  useRect, 
  useScrollParent, 
  useEventListener, 
  useToggle, 
  useCountDown,
  useClickAway,
  usePageVisibility,
  useWindowSize,
  useCustomFieldValue
} from 'vant';

// DOM measurement composable
function useRect(elementOrSelector: Element | Window | string | Ref<Element | undefined>): {
  width: number;
  height: number;
  top: number;
  left: number;
  right: number;
  bottom: number;
};

// Scroll parent detection
function useScrollParent(element: Ref<Element | undefined>): Ref<Element | Window>;

// Event listener management
function useEventListener(
  type: string,
  listener: EventListener,
  options?: AddEventListenerOptions | boolean
): void;

// Toggle state management  
function useToggle(defaultValue?: boolean): [
  Ref<boolean>,
  (value?: boolean) => void
];

// Countdown functionality
function useCountDown(options: {
  time: number;
  millisecond?: boolean;
  onChange?: (current: CountDown) => void;
  onFinish?: () => void;
}): {
  current: ComputedRef<CountDown>;
  start: () => void;
  pause: () => void;
  reset: (totalTime?: number) => void;
};

interface CountDown {
  total: number;
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
}

// Click outside detection
function useClickAway(
  target: Ref<Element | undefined> | Array<Ref<Element | undefined>>,
  listener: (event: Event) => void,
  options?: { eventName?: string }
): void;

// Page visibility detection
function usePageVisibility(): Ref<VisibilityState>;

// Window size tracking
function useWindowSize(): {
  width: Ref<number>;
  height: Ref<number>;
};

// Custom field value handling
function useCustomFieldValue<T>(getValue: () => T): [
  Ref<T>,
  (value: T) => void
];

import { ref, onMounted } from 'vue';
import { useRect, useToggle, useCountDown, useClickAway } from 'vant';

export default {
  setup() {
    const elementRef = ref<HTMLElement>();
    const [visible, toggleVisible] = useToggle(false);
    
    // Get element dimensions
    const rect = useRect(elementRef);
    console.log('Element size:', rect.width, rect.height);
    
    // Countdown timer
    const { current, start, pause, reset } = useCountDown({
      time: 30 * 1000, // 30 seconds
      onChange: (current) => {
        console.log('Time remaining:', current.seconds);
      },
      onFinish: () => {
        console.log('Countdown finished!');
      }
    });
    
    // Click outside to close
    useClickAway(elementRef, () => {
      toggleVisible(false);
    });
    
    return {
      elementRef,
      visible,
      toggleVisible,
      current,
      start,
      pause,
      reset
    };
  }
};

import { 
  addUnit, 
  createNamespace, 
  isDef, 
  isNumeric, 
  formatNumber,
  clamp,
  addNumber,
  preventDefault,
  stopPropagation,
  raf,
  cancelRaf,
  getScrollTop,
  setScrollTop,
  getRootScrollTop,
  setRootScrollTop,
  getElementTop,
  getVisibleHeight,
  getVisibleTop,
  isHidden
} from 'vant/es/utils';

// Add unit to numeric value
function addUnit(value?: string | number): string | undefined;

// Create BEM namespace
function createNamespace(name: string): [
  (modifier?: string) => string,
  (element?: string, modifier?: string) => string,
  (element?: string) => string
];

// Type checking utilities
function isDef<T>(val: T): val is NonNullable<T>;
function isNumeric(val: string): boolean;

// Number formatting
function formatNumber(num: string): string;
function clamp(num: number, min: number, max: number): number;
function addNumber(num1: number | string, num2: number | string): number;

// Event utilities
function preventDefault(event: Event, isStopPropagation?: boolean): void;
function stopPropagation(event: Event): void;

// Animation frame utilities
function raf(fn: FrameRequestCallback): number;
function cancelRaf(id: number): void;

// Scroll utilities
function getScrollTop(element?: Element | Window): number;
function setScrollTop(element: Element | Window, value: number): void;
function getRootScrollTop(): number;
function setRootScrollTop(value: number): void;

// Position utilities
function getElementTop(element: Element, scroller?: Element): number;
function getVisibleHeight(element: Element): number;
function getVisibleTop(element: Element): number;
function isHidden(element: Element): boolean;

import { withInstall, withNoopInstall } from 'vant/es/utils';
import type { App, Component } from 'vue';

// Install component with global registration
function withInstall<T extends Component>(component: T): T & {
  install: (app: App) => void;
};

// Install component without registration (for directive-only components)
function withNoopInstall<T extends Component>(component: T): T & {
  install: () => void;
};

import { useTouch } from 'vant';

function useTouch(): {
  move: Ref<{ deltaX: number; deltaY: number; offsetX: number; offsetY: number; direction: string }>;
  start: (event: TouchEvent) => void;
  move: (event: TouchEvent) => void;
  reset: () => void;
  startX: Ref<number>;
  startY: Ref<number>;
  deltaX: Ref<number>;
  deltaY: Ref<number>;
  offsetX: Ref<number>;
  offsetY: Ref<number>;
  direction: Ref<'horizontal' | 'vertical' | ''>;
  isHorizontal: () => boolean;
  isVertical: () => boolean;
};

import { Locale } from 'vant';

// Locale management
interface LocaleMessages {
  [key: string]: any;
}

namespace Locale {
  // Add locale messages
  function add(messages: LocaleMessages): void;
  
  // Use specific locale
  function use(lang: string, messages?: LocaleMessages): void;
  
  // Get current locale
  function current(): string;
}

// Built-in language packs available
const langs = [
  'zh-CN', 'zh-TW', 'en-US', 'es-ES', 'de-DE', 
  'fr-FR', 'ja-JP', 'ko-KR', 'ru-RU', 'th-TH',
  'vi-VN', 'tr-TR', 'pt-BR', 'ar-SA', 'id-ID'
];

import { Locale } from 'vant';
import enUS from 'vant/es/locale/lang/en-US';
import zhCN from 'vant/es/locale/lang/zh-CN';

// Switch to English
Locale.use('en-US', enUS);

// Switch to Chinese
Locale.use('zh-CN', zhCN);

// Add custom translations
Locale.add({
  'en-US': {
    customMessage: 'Custom message in English'
  },
  'zh-CN': {
    customMessage: '中文自定义消息'
  }
});

import { ConfigProvider } from 'vant';

// Theme configuration
interface ConfigProviderThemeVars {
  // Color variables
  '--van-primary-color'?: string;
  '--van-success-color'?: string;
  '--van-danger-color'?: string;
  '--van-warning-color'?: string;
  '--van-text-color'?: string;
  '--van-active-color'?: string;
  '--van-active-opacity'?: string;
  '--van-disabled-opacity'?: string;
  '--van-background-color'?: string;
  '--van-background-color-light'?: string;
  '--van-text-color-2'?: string;
  '--van-text-color-3'?: string;
  '--van-border-color'?: string;
  '--van-font-size-xs'?: string;
  '--van-font-size-sm'?: string;
  '--van-font-size-md'?: string;
  '--van-font-size-lg'?: string;
  '--van-padding-base'?: string;
  '--van-padding-xs'?: string;
  '--van-padding-sm'?: string;
  '--van-padding-md'?: string;
  '--van-padding-lg'?: string;
  '--van-padding-xl'?: string;
  [key: string]: string | undefined;
}

// CSS variable utilities
function setCssVar(name: string, value: string, element?: Element): void;
function getCssVar(name: string, element?: Element): string;