UI Library Resolvers

/**
 * Element Plus component resolver
 * @param options - Element Plus resolver configuration
 * @returns Component resolver for Element Plus
 */
function ElementPlusResolver(options?: ElementPlusResolverOptions): ComponentResolver;

interface ElementPlusResolverOptions {
  /** Import style css or sass with components */
  importStyle?: boolean | "css" | "sass";
  /** Use commonjs lib & source css or scss for ssr */
  ssr?: boolean;
  /** Specify element-plus version to load style */
  version?: string;
  /** Auto import for directives */
  directives?: boolean;
  /** Exclude component name, if match do not resolve the name */
  exclude?: RegExp;
  /** A list of component names that have no styles */
  noStylesComponents?: string[];
  /** Nightly version */
  nightly?: boolean;
}

// Basic usage
Components({
  resolvers: [ElementPlusResolver()],
});

// With style importing
Components({
  resolvers: [
    ElementPlusResolver({
      importStyle: "sass", // or 'css' or false
      directives: true,
    }),
  ],
});

// SSR configuration
Components({
  resolvers: [
    ElementPlusResolver({
      ssr: true,
      importStyle: "css",
    }),
  ],
});

/**
 * Element UI component resolver for Vue 2
 * @param options - Element UI resolver configuration
 * @returns Component resolver for Element UI
 */
function ElementUiResolver(options?: ElementUiResolverOptions): ComponentResolver;

interface ElementUiResolverOptions {
  /** Import style css or sass with components */
  importStyle?: boolean | "css" | "sass";
  /** Exclude component name patterns */
  exclude?: RegExp;
}

// Basic usage (Vue 2 projects)
Components({
  resolvers: [ElementUiResolver()],
});

// With Sass styles
Components({
  resolvers: [
    ElementUiResolver({
      importStyle: "sass",
    }),
  ],
});

// Without styles
Components({
  resolvers: [
    ElementUiResolver({
      importStyle: false,
    }),
  ],
});

/**
 * Ant Design Vue component resolver
 * @param options - Ant Design Vue resolver configuration
 * @returns Component resolver for Ant Design Vue
 */
function AntDesignVueResolver(options?: AntDesignVueResolverOptions): ComponentResolver;

interface AntDesignVueResolverOptions {
  /** Import style css or less with components */
  importStyle?: boolean | "css" | "less";
  /** Resolve icon components */
  resolveIcons?: boolean;
  /** Import CSS files for components */
  importCss?: boolean;
  /** Import Less files for components */
  importLess?: boolean;
  /** Exclude component name patterns */
  exclude?: string[];
}

// Basic usage
Components({
  resolvers: [AntDesignVueResolver()],
});

// With Less styles and icons
Components({
  resolvers: [
    AntDesignVueResolver({
      importStyle: "less",
      resolveIcons: true,
    }),
  ],
});

/**
 * Vuetify component resolver
 * @param options - Vuetify resolver configuration
 * @returns Component resolver for Vuetify
 */
function VuetifyResolver(options?: VuetifyResolverOptions): ComponentResolver;

interface VuetifyResolverOptions {
  /** Import styles */
  styles?: boolean;
  /** Include Vuetify labs components */
  labs?: boolean;
  /** Custom theme configuration */
  theme?: Record<string, any>;
}

Components({
  resolvers: [
    VuetifyResolver({
      styles: true,
      labs: true,
    }),
  ],
});

/**
 * Quasar component resolver
 * @param options - Quasar resolver configuration
 * @returns Component resolver for Quasar
 */
function QuasarResolver(options?: QuasarResolverOptions): ComponentResolver;

interface QuasarResolverOptions {
  /** Import Quasar styles */
  importStyle?: boolean;
  /** Auto-import Quasar directives */
  autoImportComponentCase?: "camel" | "pascal" | "kebab";
}

/**
 * Naive UI component resolver
 * @param options - Naive UI resolver configuration
 * @returns Component resolver for Naive UI
 */
function NaiveUiResolver(options?: NaiveUiResolverOptions): ComponentResolver;

interface NaiveUiResolverOptions {
  /** Import styles */
  importStyle?: boolean;
}

/**
 * PrimeVue component resolver
 * @param options - PrimeVue resolver configuration
 * @returns Component resolver for PrimeVue
 */
function PrimeVueResolver(options?: PrimeVueResolverOptions): ComponentResolver;

interface PrimeVueResolverOptions {
  /** Import component styles */
  importStyle?: boolean;
  /** Import theme styles */
  importTheme?: boolean;
  /** PrimeVue prefix */
  prefix?: string;
}

/**
 * Arco Design Vue component resolver
 * @param options - Arco resolver configuration
 * @returns Component resolver for Arco Design Vue
 */
function ArcoResolver(options?: ArcoResolverOptions): ComponentResolver;

interface ArcoResolverOptions {
  /** Import component styles */
  importStyle?: boolean | "css" | "less";
  /** Import icon components */
  resolveIcons?: boolean;
  /** Component library prefix */
  prefix?: string;
}

/**
 * Vant mobile UI resolver
 */
function VantResolver(options?: VantResolverOptions): ComponentResolver;

/**
 * Varlet UI mobile resolver
 */
function VarletUIResolver(options?: VarletUIResolverOptions): ComponentResolver;

/**
 * Ionic Vue resolver
 */
function IonicResolver(options?: IonicResolverOptions): ComponentResolver;

interface VantResolverOptions {
  /** Import component styles */
  importStyle?: boolean;
}

interface VarletUIResolverOptions {
  /** Import component styles */
  importStyle?: boolean;
  /** Auto import directives */
  directives?: boolean;
}

interface IonicResolverOptions {
  /** Import Ionic styles */
  importStyle?: boolean;
}

/**
 * TDesign Vue resolver
 */
function TDesignResolver(options?: TDesignResolverOptions): ComponentResolver;

/**
 * DevUI resolver
 */
function DevUiResolver(): ComponentResolver;

/**
 * View UI resolver
 */
function ViewUiResolver(options?: ViewUiResolverOptions): ComponentResolver;

/**
 * Bootstrap Vue resolver
 */
function BootstrapVueResolver(): ComponentResolver;

/**
 * Headless UI resolver
 */
function HeadlessUiResolver(options?: HeadlessUiResolverOptions): ComponentResolver;

/**
 * Inkline resolver
 */
function InklineResolver(): ComponentResolver;

/**
 * VEUI resolver
 */
function VeuiResolver(options?: VeuiResolverOptions): ComponentResolver;

/**
 * Layui Vue resolver
 */
function LayuiVueResolver(): ComponentResolver;

/**
 * IduxResolver
 */
function IduxResolver(options?: IduxResolverOptions): ComponentResolver;

/**
 * VueUse components resolver
 * @param options - VueUse resolver configuration
 * @returns Component resolver for VueUse components
 */
function VueUseComponentsResolver(options?: VueUseResolverOptions): ComponentResolver;

/**
 * VueUse directives resolver
 * @param options - VueUse directives configuration
 * @returns Directive resolver for VueUse directives
 */
function VueUseDirectiveResolver(options?: VueUseDirectiveResolverOptions): ComponentResolver;

interface VueUseResolverOptions {
  /** Import styles */
  importStyle?: boolean;
}

interface VueUseDirectiveResolverOptions {
  /** Auto import VueUse directives */
  importDirectives?: boolean;
}

// Multiple UI libraries
Components({
  resolvers: [
    // Desktop UI
    ElementPlusResolver({
      importStyle: "sass",
    }),
    AntDesignVueResolver({
      importStyle: "less",
    }),
    
    // Mobile UI
    VantResolver({
      importStyle: true,
    }),
    
    // Utility libraries
    VueUseComponentsResolver(),
    VueUseDirectiveResolver(),
    
    // Custom resolver as fallback
    (name: string) => {
      if (name.startsWith("Custom")) {
        return { name, from: `@/components/${name}.vue` };
      }
    },
  ],
});

// Environment-based configuration
const isDev = process.env.NODE_ENV === "development";

Components({
  resolvers: [
    ElementPlusResolver({
      importStyle: isDev ? "sass" : "css", // Use Sass in dev, CSS in prod
      directives: true,
    }),
  ],
});

// Conditional resolvers based on features
const resolvers = [
  ElementPlusResolver(),
];

// Add mobile resolver for mobile app
if (process.env.MOBILE_APP) {
  resolvers.push(VantResolver());
}

Components({ resolvers });

// Themed configuration
Components({
  resolvers: [
    AntDesignVueResolver({
      importStyle: "less", // Required for theme customization
    }),
    PrimeVueResolver({
      importTheme: true,
      prefix: "P", // PButton, PCard, etc.
    }),
  ],
});

// No styles (manual import)
Components({
  resolvers: [
    ElementPlusResolver({
      importStyle: false, // Import styles manually in main.ts
    }),
  ],
});

// CSS imports (smaller bundle)
Components({
  resolvers: [
    ElementPlusResolver({
      importStyle: "css", // Import pre-compiled CSS
    }),
  ],
});

// Sass/Less imports (customizable)
Components({
  resolvers: [
    ElementPlusResolver({
      importStyle: "sass", // Import source Sass for customization
    }),
    AntDesignVueResolver({
      importStyle: "less", // Import source Less for theming
    }),
  ],
});