mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-29 19:30:37 +01:00
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>
This commit is contained in:
@@ -106,7 +106,7 @@ This can also happen when you bind a dynamic color to a component: `<UBadge :col
|
|||||||
|
|
||||||
### `app.config.ts`
|
### `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]
|
```ts [app.config.ts]
|
||||||
export default defineAppConfig({
|
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.
|
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`:
|
You can change this behavior by setting `strategy` to `override` in your `app.config.ts`:
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ type UI = {
|
|||||||
colors?: string[]
|
colors?: string[]
|
||||||
strategy?: Strategy
|
strategy?: Strategy
|
||||||
[key: string]: any
|
[key: string]: any
|
||||||
} & DeepPartial<typeof config>
|
} & DeepPartial<typeof config, string>
|
||||||
|
|
||||||
declare module 'nuxt/schema' {
|
declare module 'nuxt/schema' {
|
||||||
interface AppConfigInput {
|
interface AppConfigInput {
|
||||||
|
|||||||
16
src/runtime/types/utils.d.ts
vendored
16
src/runtime/types/utils.d.ts
vendored
@@ -1,15 +1,23 @@
|
|||||||
export type Strategy = 'merge' | 'override'
|
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>> = {
|
export type NestedKeyOf<ObjectType extends Record<string, any>> = {
|
||||||
[Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
|
[Key in keyof ObjectType]: ObjectType[Key] extends Record<string, any>
|
||||||
? NestedKeyOf<ObjectType[Key]>
|
? NestedKeyOf<ObjectType[Key]>
|
||||||
: Key
|
: Key
|
||||||
}[keyof ObjectType]
|
}[keyof ObjectType]
|
||||||
|
|
||||||
export type DeepPartial<T> = Partial<{
|
|
||||||
[P in keyof T]: DeepPartial<T[P]> | { [key: string]: string | object }
|
|
||||||
}>
|
|
||||||
|
|
||||||
type DeepKey<T, Keys extends string[]> =
|
type DeepKey<T, Keys extends string[]> =
|
||||||
Keys extends [infer First, ...infer Rest]
|
Keys extends [infer First, ...infer Rest]
|
||||||
? First extends keyof T
|
? First extends keyof T
|
||||||
|
|||||||
Reference in New Issue
Block a user