fix config merging

README.md

@@ -50,9 +50,9 @@ Example Typescript Component
 import { ref } from 'vue';
 import { TheChessboard } from 'vue3-chessboard';
 import 'vue3-chessboard/style.css';
-import type { ChessboardAPI, BoardConfig } from 'vue3-chessboard';
+import type { BoardApi, BoardConfig } from 'vue3-chessboard';
 
-const boardAPI = ref<ChessboardAPI>();
+const boardAPI = ref<BoardApi>();
 const boardConfig: BoardConfig = {
   coordinates: false,
   autoCastle: false,

src/classes/BoardApi.ts

@@ -418,7 +418,7 @@ export class BoardApi {
   /**
    * apply the fen game on the board
    */
-  updateGameState(): void {
+  private updateGameState(): void {
     this.board.set({ fen: this.game.fen() });
     this.board.state.turnColor = shortToLongColor(this.game.turn());
     this.board.state.movable.color = this.board.state.turnColor;

src/components/TheChessboard.vue

@@ -9,6 +9,7 @@ import {
   getThreats,
   isPromotion,
   shortToLongColor,
+  merge,
 } from '@/helper/Board';
 import { defaultBoardConfig } from '@/helper/DefaultConfig';
 import { emitBoardEvents } from '@/helper/EmitEvents';
@@ -59,10 +60,7 @@ onMounted(() => {
   }
 
   if (props.boardConfig) {
-    boardState.value.boardConfig = {
-      ...defaultBoardConfig,
-      ...props.boardConfig,
-    };
+    boardState.value.boardConfig = merge(defaultBoardConfig, props.boardConfig);
   } else {
     boardState.value.boardConfig = defaultBoardConfig;
   }

src/helper/Board.ts

@@ -71,3 +71,14 @@ export function isPromotion(dest: Key, piece: Piece | null): boolean {
 export function getPossiblePromotions(legalMoves: Move[]): Move[] {
   return legalMoves.filter((move) => move.promotion);
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function merge(target: any, source: any): any {
+  for (const key of Object.keys(source)) {
+    if (source[key] instanceof Object)
+      Object.assign(source[key], merge(target[key], source[key]));
+  }
+
+  Object.assign(target || {}, source);
+  return target;
+}