yugrid/index.d.ts

yugrid 现代化响应式 Grid 布局系统，支持 ES Module 和 CommonJS

/**
 * YuGrid TypeScript 类型定义
 * 响应式 Grid 布局系统
 */

// 断点类型
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

// 断点配置
export interface BreakpointConfig {
  xs: number;
  sm: number;
  md: number;
  lg: number;
  xl: number;
  xxl: number;
}

// 容器最大宽度配置
export interface ContainerMaxWidths {
  sm?: number;
  md?: number;
  lg?: number;
  xl?: number;
  xxl?: number;
}

// 对齐方式
export type JustifyContent = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
export type AlignItems = 'top' | 'middle' | 'bottom' | 'stretch';

// 列配置
export interface ColConfig {
  span?: number;
  offset?: number;
  push?: number;
  pull?: number;
  order?: number;
  flex?: string | number;
}

// 响应式列配置
export interface ResponsiveColConfig {
  xs?: ColConfig;
  sm?: ColConfig;
  md?: ColConfig;
  lg?: ColConfig;
  xl?: ColConfig;
  xxl?: ColConfig;
}

// Container 选项
export interface ContainerOptions {
  fluid?: boolean;
  maxWidths?: ContainerMaxWidths;
  breakpoints?: BreakpointConfig;
}

// Row 选项
export interface RowOptions {
  gutter?: number;
  justify?: JustifyContent;
  align?: AlignItems;
  wrap?: boolean;
}

// Col 选项
export interface ColOptions extends ColConfig {
  breakpoints?: BreakpointConfig;
  responsive?: ResponsiveColConfig;
}

// Container 类
export declare class YuContainer {
  element: HTMLElement;
  options: ContainerOptions;
  
  constructor(element: string | HTMLElement, options?: ContainerOptions);
  init(): void;
  updateStyles(): void;
  bindEvents(): void;
}

// Row 类
export declare class YuRow {
  element: HTMLElement;
  options: RowOptions;
  
  constructor(element: string | HTMLElement, options?: RowOptions);
  init(): void;
  updateGutter(): void;
  setGutter(gutter: number): void;
}

// Col 类
export declare class YuCol {
  element: HTMLElement;
  options: ColOptions;
  
  constructor(element: string | HTMLElement, options?: ColOptions);
  init(): void;
  updateClasses(): void;
  getConfigForBreakpoint(breakpoint: Breakpoint): ColOptions;
  bindEvents(): void;
  setSpan(span: number, breakpoint?: Breakpoint): void;
}

// 工厂函数
export declare function createContainer(element: string | HTMLElement, options?: ContainerOptions): YuContainer;
export declare function createRow(element: string | HTMLElement, options?: RowOptions): YuRow;
export declare function createCol(element: string | HTMLElement, options?: ColOptions): YuCol;

// 批量初始化
export declare function initGrid(selector?: string): Array<YuContainer | YuRow | YuCol>;

// 工具函数
export declare function getCurrentBreakpoint(breakpoints?: BreakpointConfig): Breakpoint;

// 常量
export declare const DEFAULT_BREAKPOINTS: BreakpointConfig;
export declare const DEFAULT_CONTAINER_MAX_WIDTHS: ContainerMaxWidths;

// 主要导出接口
export interface YuGridInterface {
  Container: typeof YuContainer;
  Row: typeof YuRow;
  Col: typeof YuCol;
  createContainer: typeof createContainer;
  createRow: typeof createRow;
  createCol: typeof createCol;
  initGrid: typeof initGrid;
  DEFAULT_BREAKPOINTS: BreakpointConfig;
  DEFAULT_CONTAINER_MAX_WIDTHS: ContainerMaxWidths;
  getCurrentBreakpoint: typeof getCurrentBreakpoint;
}

// 默认导出
declare const YuGrid: YuGridInterface;
export default YuGrid;

// 全局声明（用于浏览器环境）
declare global {
  interface Window {
    YuGrid: YuGridInterface;
  }
}