From 3f8ea5dbded7b6836495103739688905ff26fe22 Mon Sep 17 00:00:00 2001
From: Dave Stewart <info@davestewart.co.uk>
Date: Tue, 9 Jul 2024 11:23:57 +0100
Subject: [PATCH] feat(module): improve app config types autocomplete (#1870)

Co-authored-by: Dave Stewart <dev@davestewart.co.uk>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/content/1.getting-started/3.theming.md |  4 +++-
 src/module.ts                               |  2 +-
 src/runtime/types/utils.d.ts                | 16 ++++++++++++----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 6b302a536e..3d3c7c6548 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -106,7 +106,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
 
 ### `app.config.ts`
 
-You can find the config of each component in the [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can override those classes in your own `app.config.ts`.
+You can override component config in your own `app.config.ts`:
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -118,6 +118,8 @@ export default defineAppConfig({
 })
 ```
 
+The available options for each component should auto-complete, and you can review the defaults for each component using your IDE's function such as `Cmd`+`Click` (these files can be found in [`src/runtime/ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config)).
+
 Thanks to [tailwind-merge](https://github.com/dcastil/tailwind-merge), the `app.config.ts` is smartly merged with the default config. This means you don't have to rewrite everything.
 
 You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:
diff --git a/src/module.ts b/src/module.ts
index 44a50d0379..c50d461570 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -21,7 +21,7 @@ type UI = {
   colors?: string[]
   strategy?: Strategy
   [key: string]: any
-} & DeepPartial<typeof config>
+} & DeepPartial<typeof config, string>
 
 declare module 'nuxt/schema' {
   interface AppConfigInput {
diff --git a/src/runtime/types/utils.d.ts b/src/runtime/types/utils.d.ts
index 82a5488761..8b831507cf 100644
--- a/src/runtime/types/utils.d.ts
+++ b/src/runtime/types/utils.d.ts
@@ -1,15 +1,23 @@
 export type Strategy = 'merge' | 'override'
 
+export interface TightMap<O = any> {
+  [key: string]: TightMap | O
+}
+
+export type DeepPartial<T, O = any> = {
+  [P in keyof T]?: T[P] extends object
+    ? DeepPartial<T[P], O>
+    : T[P];
+} & {
+  [key: string]: O | TightMap<O>
+}
+
 export type NestedKeyOf<ObjectType extends Record<string, any>> = {
   [Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
   ? NestedKeyOf<ObjectType[Key]>
   : Key
 }[keyof ObjectType]
 
-export type DeepPartial<T> = Partial<{
-  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
-}>
-
 type DeepKey<T, Keys extends string[]> =
   Keys extends [infer First, ...infer Rest]
     ? First extends keyof T