Layout Components

declare const ElContainer: Component;

interface ContainerProps {
  /** Layout direction */
  direction?: 'horizontal' | 'vertical';
}

declare const ElHeader: Component;

interface HeaderProps {
  /** Header height */
  height?: string;
}

declare const ElAside: Component;

interface AsideProps {
  /** Aside width */
  width?: string;
}

declare const ElMain: Component;

declare const ElFooter: Component;

interface FooterProps {
  /** Footer height */
  height?: string;
}

<template>
  <el-container>
    <el-header height="60px">Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
    <el-footer height="60px">Footer</el-footer>
  </el-container>
</template>

declare const ElRow: Component;

interface RowProps {
  /** Grid spacing */
  gutter?: number;
  /** Horizontal alignment */
  justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
  /** Vertical alignment */
  align?: 'top' | 'middle' | 'bottom';
  /** Custom tag */
  tag?: string;
}

declare const ElCol: Component;

interface ColProps {
  /** Column span */
  span?: number;
  /** Column offset */
  offset?: number;
  /** Column push */
  push?: number;
  /** Column pull */
  pull?: number;
  /** Extra small screens (<576px) */
  xs?: number | ColResponsive;
  /** Small screens (≥576px) */
  sm?: number | ColResponsive;
  /** Medium screens (≥768px) */
  md?: number | ColResponsive;
  /** Large screens (≥992px) */
  lg?: number | ColResponsive;
  /** Extra large screens (≥1200px) */
  xl?: number | ColResponsive;
  /** Custom tag */
  tag?: string;
}

interface ColResponsive {
  span?: number;
  offset?: number;
  push?: number;
  pull?: number;
}

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div>Column 1</div>
    </el-col>
    <el-col :span="6">
      <div>Column 2</div>
    </el-col>
    <el-col :span="6">
      <div>Column 3</div>
    </el-col>
    <el-col :span="6">
      <div>Column 4</div>
    </el-col>
  </el-row>
</template>

declare const ElSpace: Component;

interface SpaceProps {
  /** Alignment */
  alignment?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
  /** Space direction */
  direction?: 'horizontal' | 'vertical';
  /** Space size */
  size?: SpaceSize | SpaceSize[];
  /** Whether to wrap */
  wrap?: boolean;
  /** Fill container */
  fill?: boolean;
  /** Fill ratio */
  fillRatio?: number;
  /** Prefix content */
  prefixCls?: string;
}

type SpaceSize = 'small' | 'default' | 'large' | number;

<template>
  <el-space direction="vertical" size="large" fill>
    <el-card>Card 1</el-card>
    <el-card>Card 2</el-card>
    <el-card>Card 3</el-card>
  </el-space>
</template>

declare const ElDivider: Component;

interface DividerProps {
  /** Divider direction */
  direction?: 'horizontal' | 'vertical';
  /** Content position */
  contentPosition?: 'left' | 'center' | 'right';
  /** Border style */
  borderStyle?: 'solid' | 'dashed' | 'dotted';
}

<template>
  <div>
    <p>Section 1</p>
    <el-divider content-position="left">Section Title</el-divider>
    <p>Section 2</p>
  </div>
</template>

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