feat(module)!: use tailwind-merge for app.config & move config to components & type props (#692)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

src/runtime/types/avatar.d.ts

@@ -1,9 +1,15 @@
+import { avatar } from '../ui.config'
+import colors from '#ui-colors'
+
+export type AvatarSize = keyof typeof avatar.size
+export type AvatarChipColor = 'gray' | typeof colors[number]
+export type AvatarChipPosition = keyof typeof avatar.chip.position
+
 export interface Avatar {
   src?: string | boolean
   alt?: string
   text?: string
-  size?: string
-  chipColor?: string
-  chipVariant?: string
-  chipPosition?: string
+  size?: AvatarSize
+  chipColor?: AvatarChipColor
+  chipPosition?: AvatarChipPosition
 }

src/runtime/types/button.d.ts

@@ -1,4 +1,11 @@
 import type { Link } from './link'
+import { button } from '../ui.config'
+import type { NestedKeyOf } from '.'
+import colors from '#ui-colors'
+
+export type ButtonSize = keyof typeof button.size
+export type ButtonColor = keyof typeof button.color | typeof colors[number]
+export type ButtonVariant = keyof typeof button.variant | NestedKeyOf<typeof button.color>
 
 export interface Button extends Link {
   type?: string
@@ -7,9 +14,9 @@ export interface Button extends Link {
   loading?: boolean
   disabled?: boolean
   padded?: boolean
-  size?: string
-  color?: string
-  variant?: string
+  size?: ButtonSize
+  color?: ButtonColor
+  variant?: ButtonVariant
   icon?: string
   loadingIcon?: string
   leadingIcon?: string

src/runtime/types/form.d.ts

@@ -4,7 +4,7 @@ export interface FormError {
 }
 
 export interface Form<T> {
-  validate(path?: string, opts: { silent?: boolean } = { silent: false }): Promise<T>
+  validate(path?: string, opts: { silent?: boolean }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void

src/runtime/types/index.d.ts

@@ -10,3 +10,4 @@ export * from './notification'
 export * from './popper'
 export * from './tabs'
 export * from './vertical-navigation'
+export * from './utils'

src/runtime/types/notification.d.ts

@@ -1,6 +1,8 @@
 import type { Avatar } from './avatar'
 import type { Button } from './button'
-import appConfig from '#build/app.config'
+import colors from '#ui-colors'
+
+export type NotificationColor = 'gray' | typeof colors[number]
 
 export interface NotificationAction extends Button {
   click?: Function
@@ -17,6 +19,6 @@ export interface Notification {
   actions?: NotificationAction[]
   click?: Function
   callback?: Function
-  color?: string
-  ui?: Partial<typeof appConfig.ui.notification>
+  color?: NotificationColor
+  ui?: any
 }

src/runtime/types/utils.d.ts

@@ -0,0 +1,11 @@
+export type Strategy = 'merge' | 'override';
+
+export type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType]: ObjectType[Key] extends object
+  ? NestedKeyOf<ObjectType[Key]>
+  : Key;
+}[keyof ObjectType];
+
+export type DeepPartial<T> = Partial<{
+  [P in keyof T]: DeepPartial<T[P]> | { [key: string]: string };
+}>;