feat: add globalConfig (#132)

README.md

@@ -26,7 +26,7 @@
 ## Installation
 
 > [!WARNING]
-> Since the [dayjs](https://github.com/iamkun/dayjs) used internally by element-plus is not a [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), in order to ensure that it can be converted into a JavaScript module before startup, you need to add a `.npmrc` file to the root directory of the project and add the following configuration:
+> Since the [dayjs](https://github.com/iamkun/dayjs) used internally by element-plus is not a [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), in order to ensure that it can be converted into a JavaScript modules before startup, you need to add a `.npmrc` file to the root directory of the project and add the following configuration:
 > ```
 > shamefully-hoist=true
 > ```
@@ -96,6 +96,16 @@ When you change the global namespace, you must change it here as well.
 
 Replace default locale, you can find locale list [here](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang)
 
+e.g. `'zh-cn'`
+
+### globalConfig
+
+- Type: `object`
+
+Set global configuration, such as modifying the default `size` and `z-index` of the component.
+
+e.g. `{ size: 'small', zIndex: 3000 }`
+
 ### injectionID
 
 - Type: `object`

playground/nuxt.config.ts

@@ -9,6 +9,7 @@ export default defineNuxtConfig({
     defaultLocale: 'zh-cn',
     imports: ['useLocale'],
     themes: ['dark'],
-    injectionID: { prefix: 100, current: 1 }
+    injectionID: { prefix: 100, current: 1 },
+    globalConfig: { size: 'small', zIndex: 1000 }
   }
 })

src/core/globalConfig.ts

@@ -0,0 +1,21 @@
+import { libraryName } from '../config'
+import { resolvePath } from '../utils'
+import type { Options } from '../types'
+
+export async function resolveGlobalConfig (config: Options) {
+  const { globalConfig } = config
+  const libraryPath = await resolvePath(libraryName)
+
+  return {
+    filename: `${libraryName}-globalConfig.plugin.mjs`,
+    getContents: () => {
+      return `import { defineNuxtPlugin } from '#imports';
+import { provideGlobalConfig } from '${libraryPath}';
+
+export default defineNuxtPlugin(nuxtApp => {
+  provideGlobalConfig(${JSON.stringify(globalConfig)}, nuxtApp.vueApp, true);
+})
+`
+    }
+  }
+}

src/core/index.ts

@@ -1,5 +1,6 @@
 export * from './components'
 export * from './directives'
+export * from './globalConfig'
 export * from './imports'
 export * from './injection'
 export * from './localePlugn'

src/module.ts

@@ -3,6 +3,7 @@ import { defaults, libraryName } from './config'
 import {
   resolveComponents,
   resolveDirectives,
+  resolveGlobalConfig,
   resolveImports,
   resolveInjection,
   resolveOptions,
@@ -31,6 +32,10 @@ export default defineNuxtModule<Partial<Options>>({
     nuxt.options.imports.autoImport !== false && resolveImports(options)
     nuxt.options.components !== false && resolveComponents(options)
 
+    if (options.globalConfig) {
+      addPluginTemplate(await resolveGlobalConfig(options))
+    }
+
     if (nuxt.options.ssr !== false) {
       addPluginTemplate(await resolveInjection(options))
       addPluginTemplate(resolveTeleports(options))

src/types.ts

@@ -1,4 +1,4 @@
-import type { ElIdInjectionContext, ElZIndexInjectionContext } from 'element-plus'
+import type { ElIdInjectionContext, ElZIndexInjectionContext, ConfigProviderContext } from 'element-plus'
 
 /** name: export name from the library, as: the name you want to use in your project, from: the name of library */
 export type PresetImport = string | [name: string, as?: string, from?: string]
@@ -149,6 +149,15 @@ export interface Options extends TransformOptions {
    * @example 'zh-cn'
    */
   defaultLocale?: string
+  /**
+   * Set global configuration, such as modifying the default size and z-index of the component.
+   *
+   * @example
+   * ```ts
+   * { size: 'small', zIndex: 3000 }
+   * ```
+   */
+  globalConfig?: ConfigProviderContext
 }
 
 declare module '@nuxt/schema' {