🚚 framework

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "my-module",
+  "name": "rayine-ui",
   "version": "1.0.0",
-  "description": "My new Nuxt module",
-  "repository": "your-org/my-module",
+  "description": "RayineSoft UI Components",
+  "repository": "HoshinoSuzumi/rayine-ui",
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -29,7 +29,11 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.14.159"
+    "@nuxt/kit": "^3.14.159",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "defu": "^6.1.4",
+    "pathe": "^1.1.2",
+    "tailwind-merge": "^2.5.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.6.0",

playground/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  rayui: {
+    primary: 'indigo',
+    gray: 'neutral'
+  }
+})

playground/app.vue

@@ -1,8 +1,9 @@
-<template>
-  <div>
-    Nuxt module playground!
-  </div>
-</template>
-
 <script setup>
 </script>
+
+<template>
+  <div>
+    <h1 class="text-primary">Nuxt module playground!</h1>
+    <RayButton>button</RayButton>
+  </div>
+</template>

src/module.ts

@@ -1,14 +1,23 @@
-import { defineNuxtModule, addPlugin, createResolver } from "@nuxt/kit";
+import {
+  defineNuxtModule,
+  createResolver,
+  addPlugin,
+  addComponentsDir,
+  addImportsDir,
+} from "@nuxt/kit";
+import { name, version } from "../package.json";
+import { installTailwind } from "./tailwind";
 import type { config } from "process";
 import type { Strategy, DeepPartial } from "./runtime/types/utils";
+import { createTemplates } from "./template";
 
-export type RayUI = {
+type RayUI = {
   primary?: string;
   gray?: string;
   strategy?: Strategy;
   colors?: string[];
   [key: string]: any;
-} & DeepPartial<typeof config>;
+} & DeepPartial<typeof config, string | number | boolean>;
 
 declare module "@nuxt/schema" {
   interface AppConfigInput {
@@ -16,20 +25,62 @@ declare module "@nuxt/schema" {
   }
 }
 
-// Module options TypeScript interface definition
-export interface ModuleOptions {}
+export interface ModuleOptions {
+  prefix?: string;
+  safeColors?: string[];
+}
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: "rayine/ui",
+    name,
+    version,
     configKey: "rayui",
+    compatibility: {
+      nuxt: ">=3.0.0",
+    },
   },
-  // Default configuration options of the Nuxt module
-  defaults: {},
-  setup(_options, _nuxt) {
-    const resolver = createResolver(import.meta.url);
+  defaults: {
+    prefix: "Ray",
+    safeColors: ["primary"],
+  },
+  async setup(_options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
 
-    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
-    addPlugin(resolver.resolve("./runtime/plugin"));
+    const runtimePath = resolve("runtime");
+    _nuxt.options.build.transpile.push(runtimePath);
+    _nuxt.options.alias["#rayui"] = runtimePath;
+
+    createTemplates(_nuxt);
+
+    // Modules
+    installTailwind(_options, _nuxt, resolve);
+
+    // Plugins
+    addPlugin({
+      src: resolve(runtimePath, "plugins", "colors"),
+    });
+
+    // Components
+    addComponentsDir({
+      path: resolve(runtimePath, "components", "elements"),
+      prefix: _options.prefix,
+      global: false,
+      watch: false,
+    });
+    addComponentsDir({
+      path: resolve(runtimePath, "components", "forms"),
+      prefix: _options.prefix,
+      global: false,
+      watch: false,
+    });
+    addComponentsDir({
+      path: resolve(runtimePath, "components", "overlays"),
+      prefix: _options.prefix,
+      global: false,
+      watch: false,
+    });
+
+    // Composables
+    addImportsDir(resolve(runtimePath, "composables"));
   },
 });

src/runtime/composables/useUI.ts

@@ -1,4 +1,8 @@
+import { useAppConfig } from "#app";
+import { type Ref, useAttrs, computed, toValue } from "vue";
 import type { DeepPartial, Strategy } from "../types/utils";
+import { mergeUiConfig } from "../utils";
+import { omit, getValueByPath } from "../utils/objectUtils";
 
 export const useUI = <T>(
   key: string,

src/runtime/plugin.ts

@@ -1,5 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((_nuxtApp) => {
-  console.log('Plugin injected by my-module!')
-})

src/runtime/plugins/colors.ts

@@ -1,6 +1,7 @@
 import { computed } from "vue";
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from "#imports";
-import colors from "tailwindcss/colors";
+import colors from "#tailwind-config/theme/colors";
+import { getValueByPath } from "../utils/objectUtils";
 
 const rgbHexPattern = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
 

src/runtime/utils/colors.ts

@@ -1,5 +1,5 @@
 import type { Config as TwConfig } from "tailwindcss";
-import defaultColors from "tailwindcss/colors";
+import defaultColors from "tailwindcss/colors.js";
 import type { SafelistConfig } from "tailwindcss/types/config";
 
 // @ts-ignore

src/tailwind.ts

@@ -0,0 +1,83 @@
+import { useNuxt, createResolver, addTemplate, installModule } from "@nuxt/kit";
+import type { ModuleOptions } from "@nuxt/schema";
+import { setColors } from "./runtime/utils/colors";
+import defu from "defu";
+import { join } from "pathe";
+
+export const installTailwind = (
+  moduleOptions: ModuleOptions,
+  nuxt = useNuxt(),
+  resolve = createResolver(import.meta.url).resolve
+) => {
+  const runtimePath = resolve("./runtime");
+
+  nuxt.hook("tailwindcss:config", (tailwindConfig) => {
+    tailwindConfig.theme = tailwindConfig.theme || {};
+    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
+    tailwindConfig.theme.extend.colors =
+      tailwindConfig.theme.extend.colors || {};
+
+    const colors = setColors(tailwindConfig.theme);
+
+    nuxt.options.appConfig.rayui = {
+      primary: "indigo",
+      gray: "neutral",
+      strategy: "merge",
+      colors,
+    };
+  });
+
+  const configTemplate = addTemplate({
+    filename: "ray-tailwind.config.cjs",
+    write: true,
+    getContents: ({ nuxt }) => `
+      const { generateSafelist } = require(${JSON.stringify(
+        resolve(runtimePath, "utils", "colors")
+      )})
+
+      module.exports = {
+        content: {
+          files: [
+            ${JSON.stringify(
+              resolve(runtimePath, "components/**/*.{vue,mjs,ts}")
+            )},
+            ${JSON.stringify(
+              resolve(runtimePath, "ui.config/**/*.{mjs,js,ts}")
+            )}
+          ],
+        },
+        safelist: generateSafelist(${JSON.stringify(
+          moduleOptions.safeColors || []
+        )}, ${JSON.stringify(nuxt.options.appConfig.rayui.colors)}),
+      }
+    `,
+  });
+
+  const { configPath: userTwConfigPath = [], ...twModuleConfig } =
+    nuxt.options.tailwindcss ?? {};
+
+  const twConfigPaths = [
+    configTemplate.dst,
+    join(nuxt.options.rootDir, "tailwind.config"),
+  ];
+
+  if (typeof userTwConfigPath === "string") {
+    twConfigPaths.push(userTwConfigPath);
+  } else {
+    twConfigPaths.push(...userTwConfigPath);
+  }
+
+  return installModule(
+    "@nuxtjs/tailwindcss",
+    defu(
+      {
+        exposeConfig: true,
+        config: {
+          darkMode: "class" as const,
+        },
+        configPath: twConfigPaths,
+      },
+      twModuleConfig
+    )
+  );
+};

src/template.ts

@@ -0,0 +1,24 @@
+import { addTemplate, useNuxt } from "@nuxt/kit";
+
+export const createTemplates = (nuxt = useNuxt()) => {
+  const template = addTemplate({
+    filename: "ray.colors.mjs",
+    getContents: () =>
+      `export default ${JSON.stringify(nuxt.options.appConfig.rayui.colors)};`,
+    write: true,
+  });
+  const typesTemplate = addTemplate({
+    filename: "ray.colors.d.ts",
+    getContents: () =>
+      `declare module '#ui-colors' { const defaultExport: ${JSON.stringify(
+        nuxt.options.appConfig.rayui.colors
+      )}; export default defaultExport; }`,
+    write: true,
+  });
+
+  nuxt.options.alias["#ray-colors"] = template.dst;
+
+  nuxt.hook("prepare:types", (opts) => {
+    opts.references.push({ path: typesTemplate.dst });
+  });
+};