updating composable for deep merging

Author: webdevnerdstuff

src/plugin/VStepperForm.vue

@@ -174,7 +174,7 @@ import {
 import {
 	useBuildSettings,
 	useColumnErrorCheck,
-	useMergeProps,
+	useDeepMerge,
 } from './composables/helpers';
 import componentEmits from './utils/emits';
 import { AllProps } from './utils/props';
@@ -190,7 +190,7 @@ const injectedOptions = inject(globalOptions, {});
 
 // -------------------------------------------------- Props //
 const props = withDefaults(defineProps<Props>(), AllProps);
-let stepperProps: Settings = reactive<Settings>(useMergeProps(attrs, injectedOptions, props));
+let stepperProps: Settings = reactive<Settings>(useDeepMerge(attrs, injectedOptions, props));
 const { direction, title, width } = toRefs(props);
 const pages = reactive<Page[]>(props.pages);
 const originalPages = JSON.parse(JSON.stringify(pages));
@@ -208,7 +208,7 @@ const stepperSettings = computed(() => useBindingSettings(settings.value as Part
 ]));
 
 watch(props, () => {
-	stepperProps = useMergeProps(attrs, injectedOptions, props);
+	stepperProps = useDeepMerge(attrs, injectedOptions, props);
 	settings.value = useBuildSettings(stepperProps);
 }, { deep: true });
 

src/plugin/composables/helpers.ts

@@ -1,23 +1,38 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 import { watchDebounced } from '@vueuse/core';
 import {
 	UseAutoPage,
 	UseBuildSettings,
 	UseColumnErrorCheck,
-	UseMergeProps,
+	UseDeepMerge,
 } from '@/plugin/types';
 
 
 /**
 * Merges props from three objects.
 */
-export const useMergeProps: UseMergeProps = (A, B, C) => {
-	const res: Record<string, any> = {};
-
-	Object.keys({ ...A, ...B, ...C }).map(key => {
-		res[key] = (C[key] ?? B[key] ?? A[key]) as any;
-	});
+type AnyObject = Record<string, any>;
+
+export const useDeepMerge: UseDeepMerge = (A, B, C) => {
+	const deepMerge = (obj1: AnyObject, obj2: AnyObject): AnyObject => {
+		const result: AnyObject = { ...obj1 };
+		for (const key in obj2) {
+			if (
+				obj2[key] &&
+				typeof obj2[key] === 'object' &&
+				!Array.isArray(obj2[key])
+			) {
+				result[key] = deepMerge(result[key] ?? {}, obj2[key]);
+			}
+			else {
+				result[key] = obj2[key];
+			}
+		}
+		return result;
+	};
 
-	return res;
+	// Merge A, B, and C with priority order C > B > A
+	return deepMerge(deepMerge(A, B), C);
 };
 
 

src/plugin/types/index.ts

@@ -257,11 +257,11 @@ export interface UseBuildSettings {
 	): Settings;
 }
 // ------------------------- Helpers //
-export interface UseMergeProps {
+export interface UseDeepMerge {
 	(
 		A: Record<string, any>,
-		B: PluginOptions,
-		C: Props
+		B: Record<string, any>,
+		C: Record<string, any>
 	): Record<string, any>;
 }