chore: try to update design function

jbaubree · Feb 8, 2024 · 2a63c72 · 2a63c72
1 parent fa272cf
commit 2a63c72
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 34 deletions.
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,6 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from 'vue'
-import { UnuseUI } from 'unuse-ui'
+import { createUnuseUi } from 'unuse-ui'
 import Theme from 'vitepress/theme'
 
 import 'unuse-ui/dist/style.css'
@@ -15,6 +15,6 @@ export default {
     })
   },
   enhanceApp({ app }) {
-    app.use(UnuseUI)
+    app.use(createUnuseUi())
   },
 }
diff --git a/playground/src/main.ts b/playground/src/main.ts
@@ -1,6 +1,6 @@
 // @unocss-include
 import { createApp } from 'vue'
-import { UnuseUI } from 'unuse-ui'
+import { createUnuseUi } from 'unuse-ui'
 import { createRouter, createWebHistory } from 'vue-router/auto'
 
 import App from './App.vue'
@@ -14,6 +14,6 @@ const router = createRouter({
 })
 
 createApp(App)
-  .use(UnuseUI, options)
+  .use(createUnuseUi(options))
   .use(router)
   .mount('#app')
diff --git a/src/unuse-ui.ts b/src/unuse-ui.ts
@@ -125,44 +125,46 @@ const configDefaults: ResolvedPluginOptions = {
   appConfig,
 }
 
-const plugin = {
-  install(app: App, options: DeepPartial<PluginOptions> = {}) {
-    const config: typeof appConfig = merge({}, configDefaults.appConfig, options.appConfig)
+function createUnuseUi(options: DeepPartial<PluginOptions> = {}) {
+  return {
+    install(app: App) {
+      const config: typeof appConfig = merge({}, configDefaults.appConfig, options.appConfig)
 
-    const { primaryColor } = useAppTheme()
+      const { primaryColor } = useAppTheme()
 
-    app.use(createHead())
+      app.use(createHead())
 
-    if (options.registerComponents) {
-      Object.entries(components).forEach(([name, component]) => {
-        app.component(name, component)
-      })
-    }
+      if (options.registerComponents) {
+        Object.entries(components).forEach(([name, component]) => {
+          app.component(name, component)
+        })
+      }
 
-    const hexToRgb = (hex: string) => {
+      const hexToRgb = (hex: string) => {
       // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-      const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
-      hex = hex.replace(shorthandRegex, (_, r, g, b) => {
-        return r + r + g + g + b + b
-      })
-      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
-      return result
-        ? `${Number.parseInt(result[1], 16)}, ${Number.parseInt(result[2], 16)}, ${Number.parseInt(result[3], 16)}`
-        : null
-    }
-
-    const root = computed(() => `:root {
+        const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+        hex = hex.replace(shorthandRegex, (_, r, g, b) => {
+          return r + r + g + g + b + b
+        })
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+        return result
+          ? `${Number.parseInt(result[1], 16)}, ${Number.parseInt(result[2], 16)}, ${Number.parseInt(result[3], 16)}`
+          : null
+      }
+
+      const root = computed(() => `:root {
       ${Object.keys(colors.primary).map(key => `--color-primary-${key}: ${hexToRgb(colors[primaryColor.value]?.[key])};`).join('\n')}
     }`)
 
-    app.runWithContext(() => {
-      useHead({
-        style: [{ innerHTML: root }],
+      app.runWithContext(() => {
+        useHead({
+          style: [{ innerHTML: root }],
+        })
       })
-    })
 
-    app.provide(APP_UI, config.ui)
-  },
+      app.provide(APP_UI, config.ui)
+    },
+  }
 }
 
 export * from './types'
@@ -208,5 +210,6 @@ export {
   useToast,
 }
 
-export { plugin as UnuseUI }
-export default plugin
+export { createUnuseUi }
+
+export default createUnuseUi