Installation and Configuration

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);

import { ElButton, ElSelect } from 'element-plus';

const app = createApp(App);
app.component('ElButton', ElButton);
app.component('ElSelect', ElSelect);

/**
 * Install Element Plus plugin with all components and services
 * @param app - Vue application instance
 * @param options - Optional configuration
 */
declare function install(app: App, options?: InstallOptions): void;

interface InstallOptions {
  size?: ComponentSize;
  zIndex?: number;
  locale?: Language;
}

declare const version: string;

/**
 * Day.js library for date/time operations
 * Re-exported from element-plus for convenience
 */
declare const dayjs: Dayjs;

interface Dayjs {
  (): DayjsInstance;
  (date?: string | number | Date | DayjsInstance): DayjsInstance;
  extend(plugin: any): Dayjs;
  locale(preset?: string | ILocale, object?: Partial<ILocale>): string;
  isDayjs(d: any): d is DayjsInstance;
  (date?: string | number | Date | DayjsInstance, format?: string): DayjsInstance;
}

interface DayjsInstance {
  format(template?: string): string;
  valueOf(): number;
  unix(): number;
  toDate(): Date;
  toISOString(): string;
  clone(): DayjsInstance;
  add(value: number, unit: string): DayjsInstance;
  subtract(value: number, unit: string): DayjsInstance;
  startOf(unit: string): DayjsInstance;
  endOf(unit: string): DayjsInstance;
}

/**
 * Create a custom installer with specific plugins/components
 * @param plugins - Array of plugins to include
 * @returns Custom installer function
 */
declare function makeInstaller(plugins: Plugin[]): {
  install: (app: App) => void;
  version: string;
};

interface Plugin {
  install: (app: App) => void;
}

declare const ElConfigProvider: Component;

interface ConfigProviderProps {
  /** Global component size */
  size?: ComponentSize;
  /** Global z-index configuration */
  zIndex?: number;
  /** Global locale configuration */
  locale?: Language;
  /** Global namespace for CSS classes */
  namespace?: string;
  /** Global button configuration */
  button?: ButtonGlobalConfig;
  /** Global message configuration */
  message?: MessageGlobalConfig;
}

interface ButtonGlobalConfig {
  autoInsertSpace?: boolean;
}

interface MessageGlobalConfig {
  max?: number;
}

<template>
  <el-config-provider :size="size" :locale="locale">
    <app />
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';

const size = 'large';
const locale = zhCn;
</script>

/**
 * Provide global configuration for Element Plus
 * @param config - Global configuration object
 * @param app - Vue application instance (optional)
 */
declare function provideGlobalConfig(
  config: ConfigProviderProps,
  app?: App
): void;

type ComponentSize = '' | 'large' | 'default' | 'small';

interface Language {
  name: string;
  el: Record<string, any>;
}

interface App {
  use(plugin: any): App;
  component(name: string, component: any): App;
  provide(key: string | symbol, value: any): App;
}

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