feat(presets): Allow selecting props using other props in presets

Author: Fsss126

Diff for: packages/ui/src/services/component-config/types.ts

@@ -1,6 +1,7 @@
 import type { VuesticComponentsMap } from '../vue-plugin'
 import type { VNodeProps, AllowedComponentProps, HTMLAttributes, VNode, DefineComponent } from 'vue'
 import { ComponentSlots } from '../../utils/component-options'
+import { ObjectOrGetter } from '../../utils/types/object-or-getter'
 
 export type VuesticComponentName = keyof VuesticComponentsMap
 export type VueDefaultPropNames = keyof (VNodeProps & AllowedComponentProps) | `on${string}`
@@ -34,11 +35,11 @@ type VuesticComponentSlotPropsMap = {
   }
 }
 
-type VuesticComponentPreset<T extends VuesticComponentName> = VuesticComponentPropsMap[T] & VuesticComponentSlotPropsMap[T]
+export type VuesticComponentPresetProps<T extends VuesticComponentName> = VuesticComponentPropsMap[T] & VuesticComponentSlotPropsMap[T]
 
 export type Presets = {
   [componentName in VuesticComponentName]?: {
-    [presetName: string]: VuesticComponentPreset<componentName>
+    [presetName: string]: ObjectOrGetter<VuesticComponentPresetProps<componentName>, VuesticComponentPropsMap[componentName]>
   }
 }
 

Diff for: packages/ui/src/services/component-config/utils/use-component-config-props.ts

@@ -6,6 +6,7 @@ import { injectChildPropsFromParent } from '../../../composables/useChildCompone
 import { ComponentPresetProp, PresetPropValue } from '../../../composables'
 import { notNil } from '../../../utils/isNilValue'
 import { head } from 'lodash'
+import { getObject } from '../../../utils/object-or-getter'
 
 const withPresetProp = <P extends Props>(props: P): props is P & ComponentPresetProp => 'preset' in props
 const getPresetProp = <P extends Props>(props: P) => withPresetProp(props) ? props.preset : undefined
@@ -18,12 +19,14 @@ export const useComponentConfigProps = <T extends VuesticComponent>(component: T
 
   const getPresetProps = (presetPropValue: PresetPropValue): Props => {
     return (presetPropValue instanceof Array ? presetPropValue : [presetPropValue]).reduce<Props>((acc, presetName) => {
-      const presetProps = globalConfig.value.components?.presets?.[componentName]?.[presetName]
+      const preset = globalConfig.value.components?.presets?.[componentName]?.[presetName]
 
-      if (!presetProps) {
+      if (!preset) {
         return acc
       }
 
+      const presetProps = getObject(preset, originalProps)
+
       const extendedPresets = getPresetProp(presetProps)
 
       return {
@@ -51,8 +54,8 @@ export const useComponentConfigProps = <T extends VuesticComponent>(component: T
       }, {})
 
     const presetProp = head([
-      originalProps,
       parentInjectedProps?.value,
+      originalProps,
       localConfigProps,
       globalConfigProps,
     ].filter(notNil).map(getPresetProp).filter(notNil))

Diff for: packages/ui/src/utils/object-or-getter.ts

@@ -0,0 +1,9 @@
+import { ObjectOrGetter } from './types/object-or-getter'
+
+export const getObject = <T extends object, P>(objectOrGetter: ObjectOrGetter<T, P>, baseProps: P) => {
+  if (typeof objectOrGetter === 'function') {
+    return objectOrGetter(baseProps)
+  }
+
+  return objectOrGetter
+}

Diff for: packages/ui/src/utils/types/object-or-getter.ts

@@ -0,0 +1 @@
+export type ObjectOrGetter<T extends object, P> = T | ((props: P) => T)