8000 feat(module): improve app config types autocomplete by davestewart · Pull Request #1870 · nuxt/ui · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat(module): improve app config types autocomplete #1870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 9, 2024
Merged

feat(module): improve app config types autocomplete #1870

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8779799
feat(Config): full theming autocompletion for app config
davestewart Jun 13, 2024
6f04d30
docs: add note regarding theme auto-completion
davestewart Jun 13, 2024
a7bd9c8
Merge branch 'dev' into app-config-autocomplete
davestewart Jun 13, 2024
1c7abbc
Merge branch 'dev' into app-config-autocomplete
benjamincanac Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/content/1.getting-started/3.theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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`:
Expand Down
2 changes: 1 addition & 1 deletion src/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
16 changes: 12 additions & 4 deletions src/runtime/types/utils.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
0