feat(nuxt): add new theme option for switching to new morpheme theme

gitsindonesia · May 22, 2023 · e7e7ac4 · e7e7ac4
1 parent f6dc329
commit e7e7ac4
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 37 deletions.
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
@@ -23,17 +23,17 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@morpheme/ui": "^1.0.0-alpha.57+95edc430",
-    "@nuxt/kit": "^3.3.1"
+    "@morpheme/ui": "^1.0.0-beta.8",
+    "@nuxt/kit": "^3.5.0"
   },
   "devDependencies": {
     "@morpheme/tailwind-config": "^1.0.0-beta.8",
     "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.3.1",
+    "@nuxt/schema": "^3.5.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/tailwindcss": "^6.4.1",
     "eslint": "latest",
-    "nuxt": "^3.3.1"
+    "nuxt": "^3.5.0"
   },
   "gitHead": "95edc430940e02006a6f7ccc5065333389c50ccd"
 }
diff --git a/packages/nuxt/playground/nuxt.config.ts b/packages/nuxt/playground/nuxt.config.ts
@@ -1,13 +1,17 @@
-import GitsUIModule from '..';
+import MorphemeUI from '..';
 
 export default defineNuxtConfig({
-  modules: [GitsUIModule, '@nuxtjs/tailwindcss'],
+  modules: [MorphemeUI, '@nuxtjs/tailwindcss'],
   morpheme: {
     darkMode: true,
   },
   vite: {
     optimizeDeps: {
-      include: ['@ckeditor/ckeditor5-build-classic', '@ckeditor/ckeditor5-vue'],
+      include: [
+        '@ckeditor/ckeditor5-build-classic',
+        '@ckeditor/ckeditor5-vue',
+        'consola',
+      ],
     },
   },
 });
diff --git a/packages/nuxt/playground/pages/index.vue b/packages/nuxt/playground/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {defaultColors} from '@morpheme/theme/defaultTheme';
-import '@morpheme/themes/morpheme';
 
 useHead({
   title: 'Morpheme UI Playground',
@@ -13,13 +12,7 @@ const items = Array.from({length: 50}, (_, index) => ({
 
 const isOpen = ref(false);
 
-const buttonVariants = [
-  'default',
-  'outlined',
-  'text',
-  'disabled',
-  'loading',
-];
+const buttonVariants = ['default', 'outlined', 'text', 'disabled', 'loading'];
 
 const sheetOpen = ref(false);
 

diff --git a/packages/nuxt/playground/tailwind.config.js b/packages/nuxt/playground/tailwind.config.js
@@ -20,4 +20,7 @@ module.exports = {
     'lg:px-6',
     'animate-spin',
   ],
+  morpheme: {
+    sass: true,
+  },
 };
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
@@ -455,7 +455,7 @@ export interface ModuleOptions {
    */
   transpileDeps?: boolean;
   /**
-   * Determine whether to load floating vue styles.
+   * Determine whether to load floating vue styles. Only works when `theme` is `legacy`.
    *
    * @default true
    * @example
@@ -468,7 +468,7 @@ export interface ModuleOptions {
   loadFloatingVueStyles?: boolean;
   /**
    * Determine whether to load default styles.
-   * Only works when `css` and `scss` is `false`.
+   * Only works when `css` and `scss` is `false` and `theme` is `legacy`.
    *
    * @default true
    * @example
@@ -503,6 +503,18 @@ export interface ModuleOptions {
    * })
    */
   optimizeDeps?: boolean;
+  /**
+   * Name of the theme to use. Available options: `morpheme`, `legacy`.
+   *
+   * @default 'morpheme'
+   * @example
+   * // nuxt.config.ts
+   * export default defineConfig({
+   *  morpheme: {
+   *   theme: 'morpheme'
+   * })
+   */
+  theme: 'morpheme' | 'legacy';
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -519,6 +531,7 @@ export default defineNuxtModule<ModuleOptions>({
     loadDefaultStyles: true,
     darkMode: false,
     optimizeDeps: true,
+    theme: 'morpheme',
   },
   setup(options, nuxt) {
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url));
@@ -543,31 +556,52 @@ export default defineNuxtModule<ModuleOptions>({
       }
     }
 
-    // use css bundle
-    if (options.css) {
-      nuxt.options.css.push('@morpheme/ui/styles');
-    }
+    if (options.theme === 'legacy') {
+      // use css bundle
+      if (options.css) {
+        nuxt.options.css.push('@morpheme/ui/styles');
+      }
 
-    // use sass bundle
-    if (options.sass) {
-      nuxt.options.css.push('@morpheme/ui/styles.scss');
-    }
+      // use sass bundle
+      if (options.sass) {
+        nuxt.options.css.push('@morpheme/ui/styles.scss');
+      }
 
-    // load required styles when not using css bundle and not using sass bundle
-    if (!options.css && !options.sass && options.loadDefaultStyles) {
-      nuxt.options.css.push('@morpheme/menu/dist/style.css');
-      nuxt.options.css.push('@morpheme/tooltip/dist/style.css');
-      nuxt.options.css.push('@morpheme/theme/transition.css');
-    }
+      // load required styles when not using css bundle and not using sass bundle
+      if (!options.css && !options.sass && options.loadDefaultStyles) {
+        nuxt.options.css.push('@morpheme/menu/dist/style.css');
+        nuxt.options.css.push('@morpheme/tooltip/dist/style.css');
+        nuxt.options.css.push('@morpheme/theme/transition.css');
+      }
 
-    // load floating-vue styles
-    if (options.loadFloatingVueStyles) {
-      nuxt.options.css.push('floating-vue/dist/style.css');
+      // load floating-vue styles
+      if (options.loadFloatingVueStyles) {
+        nuxt.options.css.push('floating-vue/dist/style.css');
+      }
+
+      // load dark mode styles
+      if (options.darkMode) {
+        nuxt.options.css.push('@morpheme/ui/styles.dark');
+      }
     }
 
-    // load dark mode styles
-    if (options.darkMode) {
-      nuxt.options.css.push('@morpheme/ui/styles.dark');
+    if (options.theme === 'morpheme') {
+      // if using sass, load sass bundle
+      if (options.sass) {
+        nuxt.options.css.push('@morpheme/themes/src/morpheme/main.scss');
+
+        if (options.darkMode) {
+          nuxt.options.css.push('@morpheme/themes/src/morpheme/main.dark.scss');
+        }
+      }
+
+      if (options.css || !options.sass) {
+        nuxt.options.css.push('@morpheme/themes/dist/morpheme/main.css');
+
+        if (options.darkMode) {
+          nuxt.options.css.push('@morpheme/themes/dist/morpheme/main.dark.css');
+        }
+      }
     }
 
     // register components