@witchcraft/ui 0.2.4 → 0.2.5

package/dist/module.d.mts

@@ -1,4 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import Icons from 'unplugin-icons/vite';
 
 declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
 declare module "@nuxt/schema" {
@@ -8,15 +9,21 @@ declare module "@nuxt/schema" {
 }
 interface ModuleOptions {
     /**
-     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults, i.e. prefix "i").
      *
      * @default true
      */
     includeUnpluginIconsPlugins?: boolean;
+    /**
+     * Pass options to unplugin-icons/nuxt
+     *
+     * The module doesn't define a key for it's options so this is the only way to allow proper merging.
+     */
+    unpluginOptions?: Parameters<typeof Icons>[0];
     directives: (typeof knownDirectives[number])[];
     /**
-        * Which components (without a prefix) to register for auto-importing globally.
-        */
+     * Which components (without a prefix) to register for auto-importing globally.
+     */
     globalComponents: string[];
     /**
      * @default "W"

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,5 +1,5 @@
 import { indent, crop } from '@alanscodelog/utils';
-import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
+import { createResolver, defineNuxtModule, installModule, useLogger, addTemplate, addComponent, addImports, addTypeTemplate } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
 import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom';
 import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles';
@@ -13,8 +13,7 @@ import { themeConvertionOpts } from '../dist/runtime/tailwind/themeConvertionOpt
 import { theme } from '../dist/runtime/theme.js';
 
 const dependencies = {
-	"reka-ui": "^2.5.0",
-	"unplugin-icons": "^22.2.0"};
+	"reka-ui": "^2.5.0"};
 const pkg = {
 	dependencies: dependencies};
 
@@ -35,6 +34,7 @@ const module = defineNuxtModule({
   },
   defaults: {
     includeUnpluginIconsPlugins: true,
+    unpluginOptions: unpluginIconViteOptions,
     directives: [...knownDirectives],
     globalComponents: [
       ...componentsInfo.map((_) => _.name.slice("PREFIX".length))
@@ -45,16 +45,20 @@ const module = defineNuxtModule({
     _playgroundWorkaround: false
   },
   moduleDependencies: {
-    "unplugin-icons/nuxt": {
-      version: pkg.dependencies["unplugin-icons"],
-      defaults: unpluginIconViteOptions
-    },
+    // not working, see note for unpluginOptions
+    // "unplugin-icons/nuxt": {
+    // 	version: pkg.dependencies["unplugin-icons"],
+    // 	defaults: unpluginIconViteOptions as any
+    // },
     "reka-ui/nuxt": {
       version: pkg.dependencies["reka-ui"]
     }
   },
   async setup(options, nuxt) {
     const moduleName = "@witchcraft/ui";
+    installModule("unplugin-icons/nuxt", defu(
+      options.unpluginOptions
+    ));
     const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 });
     const filteredComponentsInfo = [];
     for (const component of componentsInfo) {
@@ -121,6 +125,7 @@ const module = defineNuxtModule({
                 IconsResolver({ prefix: "i" })
               ]
             })
+            // this is taken care of by unplugin-icons
             // Icons({
             // 	compiler: "vue3",
             // 	...unpluginIconViteOptions,

package/dist/runtime/components/LibButton/LibButton.vue

@@ -19,7 +19,7 @@
 		text-fg
 		hover:text-accent-700
 		dark:text-bg
-		dark:hover:text-accent-500
+		dark:hover:text-accent-400
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
@@ -27,7 +27,7 @@
   border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-900
+			dark:bg-neutral-800
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -36,7 +36,7 @@
 			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-xs
+			after:rounded-sm
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -53,7 +53,7 @@
 			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-			dark:hover:shadow-accent-950/30
+			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
 			dark:border-neutral-900

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",

package/src/module.ts

@@ -4,6 +4,7 @@ import {
 	addImports, addTemplate, addTypeTemplate,
 	createResolver,
 	defineNuxtModule,
+	installModule,
 	useLogger
 } from "@nuxt/kit"
 import tailwindcss from "@tailwindcss/vite"
@@ -13,6 +14,7 @@ import { defu } from "defu"
 import { themeAsTailwindCss } from "metamorphosis/tailwind"
 import fs from "node:fs"
 import IconsResolver from "unplugin-icons/resolver"
+import type Icons from "unplugin-icons/vite"
 import ViteComponents from "unplugin-vue-components/vite"
 
 import { unpluginIconViteOptions } from "./runtime/build/unpluginIconViteOptions.js"
@@ -45,16 +47,24 @@ declare module "@nuxt/schema" {
 }
 
 export interface ModuleOptions {
-/**
- * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
- *
- * @default true
- */
+	/**
+	 * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults, i.e. prefix "i").
+	 *
+	 * @default true
+	 */
 	includeUnpluginIconsPlugins?: boolean
+	/**
+	 * Pass options to unplugin-icons/nuxt
+	 *
+	 * The module doesn't define a key for it's options so this is the only way to allow proper merging.
+	 */
+	// also moduleDependencies + defaults (or even overrides) isn't working, hence the use of the deprecated installModule
+	// I think this is due to how the module is defined (without a key)
+	unpluginOptions?: Parameters<typeof Icons>[0]
 	directives: (typeof knownDirectives[number])[]
 	/**
-		* Which components (without a prefix) to register for auto-importing globally.
-		*/
+	 * Which components (without a prefix) to register for auto-importing globally.
+	 */
 	globalComponents: string[]
 	/**
 	 * @default "W"
@@ -76,6 +86,7 @@ export default defineNuxtModule<ModuleOptions>({
 	},
 	defaults: {
 		includeUnpluginIconsPlugins: true,
+		unpluginOptions: unpluginIconViteOptions,
 		directives: [...knownDirectives],
 		globalComponents: [
 			...componentsInfo.map(_ => _.name.slice("PREFIX".length))
@@ -86,16 +97,21 @@ export default defineNuxtModule<ModuleOptions>({
 		_playgroundWorkaround: false
 	},
 	moduleDependencies: {
-		"unplugin-icons/nuxt": {
-			version: pkg.dependencies["unplugin-icons"],
-			defaults: unpluginIconViteOptions as any
-		},
+		// not working, see note for unpluginOptions
+		// "unplugin-icons/nuxt": {
+		// 	version: pkg.dependencies["unplugin-icons"],
+		// 	defaults: unpluginIconViteOptions as any
+		// },
 		"reka-ui/nuxt": {
 			version: pkg.dependencies["reka-ui"]
 		}
 	},
 	async setup(options, nuxt) {
 		const moduleName = "@witchcraft/ui"
+		// see note for unpluginOptions
+		installModule("unplugin-icons/nuxt", defu(
+			options.unpluginOptions
+		))
 		const logger = useLogger(moduleName, { level: options.debug ? 10 : 0 })
 
 		const filteredComponentsInfo: typeof componentsInfo = []
@@ -173,6 +189,7 @@ export default defineNuxtModule<ModuleOptions>({
 											IconsResolver({ prefix: "i" })
 										]
 									})
+								// this is taken care of by unplugin-icons
 								// Icons({
 								// 	compiler: "vue3",
 								// 	...unpluginIconViteOptions,

package/src/runtime/components/LibButton/LibButton.vue

@@ -18,7 +18,7 @@
 		text-fg
 		hover:text-accent-700
 		dark:text-bg
-		dark:hover:text-accent-500
+		dark:hover:text-accent-400
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
@@ -26,7 +26,7 @@
 		border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-900
+			dark:bg-neutral-800
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -35,7 +35,7 @@
 			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-xs
+			after:rounded-sm
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -52,7 +52,7 @@
 			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-			dark:hover:shadow-accent-950/30
+			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
 			dark:border-neutral-900