diff --git a/.eslintignore b/.eslintignore
index 7801c2a..dacb580 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,2 @@
dist
-docs
-src/tests/**
\ No newline at end of file
+src/tests/**
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
deleted file mode 100644
index d3baf5b..0000000
--- a/.github/workflows/deploy-docs.yml
+++ /dev/null
@@ -1,55 +0,0 @@
-name: Docs
-
-on:
- release:
- types: created
-
- push:
- branches: main
-
- workflow_dispatch:
-
-permissions:
- contents: read
- pages: write
- id-token: write
-
-concurrency:
- group: pages
- cancel-in-progress: true
-
-jobs:
- docs:
- runs-on: ubuntu-latest
-
- steps:
- - name: Checkout
- uses: actions/checkout@v4
- - name: Use Node.js 18
- uses: actions/setup-node@v4
- with:
- node-version: 18
- - name: install npm dependencies
- run: npm ci
- - name: build docs files
- run: npm run docs:build
- - name: Setup Pages
- uses: actions/configure-pages@v3
- - name: Build with Jekyll
- uses: actions/jekyll-build-pages@v1
- with:
- source: ./docs/.vitepress/dist
- destination: ./_site
- - name: Upload artifact
- uses: actions/upload-pages-artifact@v2
-
- deploy:
- environment:
- name: github-pages
- url: ${{ steps.deployment.outputs.page_url }}
- runs-on: ubuntu-latest
- needs: docs
- steps:
- - name: Deploy to GitHub Pages
- id: deployment
- uses: actions/deploy-pages@v2
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9de658..3d4fa72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -142,9 +142,9 @@
### v1.0.0. includes some breaking changes. Only breaking changes will be listed here. Refer to the new documentation to update your app to v1.0.0
-- callback functions as props have been removed. Take a look at the [documentation](https://qwerty084.github.io/vue3-chessboard/callbacks.html) to see how to register callbacks in v1.0.0.
-- board and game from the boardAPI have been made private. You need to use the corresponding method to achieve the same result. Visit the [docs](https://qwerty084.github.io/vue3-chessboard/board-api.html) to get an overview of all available methods.
-- If you encounter any issues visit the [docs](https://qwerty084.github.io/vue3-chessboard/) or open an [issue](https://github.com/qwerty084/vue3-chessboard/issues/new/choose).
+- callback functions as props have been removed. Take a look at the [documentation](https://qwerty084.github.io/vue3-chessboard-docs/callbacks.html) to see how to register callbacks in v1.0.0.
+- board and game from the boardAPI have been made private. You need to use the corresponding method to achieve the same result. Visit the [docs](https://qwerty084.github.io/vue3-chessboard-docs/board-api.html) to get an overview of all available methods.
+- If you encounter any issues visit the [docs](https://qwerty084.github.io/vue3-chessboard-docs) or open an [issue](https://github.com/qwerty084/vue3-chessboard/issues/new/choose).
## 0.0.9 (2022-11-13)
diff --git a/docs/.vitepress/.gitignore b/docs/.vitepress/.gitignore
deleted file mode 100644
index 6e25fa8..0000000
--- a/docs/.vitepress/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-cache/
\ No newline at end of file
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
deleted file mode 100644
index b6fa7d1..0000000
--- a/docs/.vitepress/config.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export default {
- title: 'vue3-chessboard',
- appearance: 'dark',
- description: 'A Vue 3 Chessboard component library.',
- themeConfig: {
- sidebar: [
- {
- text: 'Getting started',
- items: [{ text: 'Quick Start', link: '/getting-started' }],
- },
- {
- text: 'Configuration',
- items: [
- { text: 'Props', link: '/props' },
- { text: 'Callbacks', link: '/callbacks' },
- ],
- },
- {
- text: 'Events',
- items: [
- { text: 'Available Events', link: '/events' },
- { text: 'Board Created', link: '/events/board-created' },
- { text: 'Checkmate', link: '/events/checkmate' },
- { text: 'Stalemate', link: '/events/stalemate' },
- { text: 'Draw', link: '/events/draw' },
- { text: 'Check', link: '/events/check' },
- { text: 'Move', link: '/events/move' },
- { text: 'Promotion', link: '/events/promotion' },
- ],
- },
- {
- text: 'Board API',
- items: [{ text: 'API', link: '/board-api' }],
- },
- {
- text: 'Contribute',
- items: [
- { text: 'Issues', link: '/issues' },
- { text: 'Contribute', link: '/contribute.md' },
- ],
- },
- ],
- socialLinks: [
- { icon: 'github', link: 'https://github.com/qwerty084/vue3-chessboard' },
- ],
- },
-};
diff --git a/docs/.vitepress/index.css b/docs/.vitepress/index.css
deleted file mode 100644
index f511fbc..0000000
--- a/docs/.vitepress/index.css
+++ /dev/null
@@ -1,91 +0,0 @@
-html {
- overflow-y: scroll;
-}
-
-.flex {
- display: flex;
- align-items: center;
- gap: 2%;
- margin-bottom: 0.5rem;
- margin-left: 1rem;
-}
-
-.w-6 {
- width: 24px;
-}
-
-.h-6 {
- width: 24px;
-}
-
-.chessboard .main-wrap {
- width: 99%;
- max-width: 600px;
-}
-
-.chessboard .buttons {
- margin-bottom: 10px;
-}
-
-coords.files {
- bottom: 5px !important;
-}
-
-.move-container {
- min-height: 250px;
-}
-
-h1 {
- font-size: 48px !important;
- background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
- background-clip: text;
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
-}
-
-.chessboard {
- margin-top: 2rem;
-}
-
-.svg-container {
- margin-top: 3rem;
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 10%;
-}
-
-.svg-container img {
- max-width: 36px;
- height: auto;
-}
-
-.svg-container .npm-svg {
- max-width: 60px;
-}
-
-.version-number {
- text-align: center;
- margin-top: 2rem;
-}
-
-.promotion-container {
- background-position: center;
- background-repeat: no-repeat;
-}
-
-.buttons {
- padding: 5px;
- text-align: center;
-}
-
-.buttons .activated {
- background-color: #888;
-}
-
-.buttons button {
- background-color: #555;
- border-radius: 5px;
- margin: 5px;
- padding: 5px;
-}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
deleted file mode 100644
index 94152b7..0000000
--- a/docs/.vitepress/theme/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import DefaultTheme from 'vitepress/theme';
-import '../index.css';
-import '../../../dist/style.css';
-
-export default DefaultTheme;
diff --git a/docs/ChessboardExample.vue b/docs/ChessboardExample.vue
deleted file mode 100644
index 30a51ce..0000000
--- a/docs/ChessboardExample.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-
-
-
-
-
Opening: {{ opening }}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/HistoryViewerExample.vue b/docs/HistoryViewerExample.vue
deleted file mode 100644
index a76bc08..0000000
--- a/docs/HistoryViewerExample.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/board-api.md b/docs/board-api.md
deleted file mode 100644
index 514c836..0000000
--- a/docs/board-api.md
+++ /dev/null
@@ -1,330 +0,0 @@
-
-
-# Board API
-
-The `boardApi` can be used to modify and retrieve information from the board.
-You can access the api when listening for the @board-created event.
-
-## Example
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-
-
-
-Here is a list of all the available methods:
-
-```ts
-/**
- * Resets the board to the initial starting configuration.
- */
-resetBoard(): void;
-
-/**
- * undo last move, if possible
- */
-undoLastMove(): void;
-
-/**
- * returns the current material count for white, black and the diff.
- * If diff > 0 white is leading, else black.
- */
-getMaterialCount(): MaterialDifference;
-
-/**
- * Finds all the captured pieces from the game history.
- *
- * Note: results may be innaccurate if game history has been lost, eg. if
- * setPosition has been called.
- *
- * @returns an object with white and black properties whose values are arrays
- * of all the pieces captured by that player this game.
- */
-getCapturedPieces(): CapturedPieces;
-
-/**
- * toggles the board orientation.
- */
-toggleOrientation(): void;
-
-/**
- * draws arrows and circles on the board for possible moves/captures
- */
-drawMoves(): void;
-
-/**
- * removes arrows and circles from the board for possible moves/captures
- */
-hideMoves(): void;
-
-/**
- * draws an arrow on the board
- */
-drawMove(orig: Square, dest: Square, brushColor: BrushColor): void;
-
-/**
- * toggle drawing of arrows and circles on the board for possible moves/captures
- */
-toggleMoves(): void;
-
-/**
- * returns the opening name for the current position from lichess api
- */
-getOpeningName(): Promise;
-
-/**
- * make a move programmatically on the board
- * @param move either a string in Standard Algebraic Notation (SAN), eg. 'e4', 'exd5', 'O-O', 'Nf3' or 'e8=Q'
- * or an object of shape { from: string; to: string; promotion?: string; }, eg. { from: 'g8', to: 'f6' } or
- * { from: 'e7', to: 'e8', promotion: 'q'}
- * @returns true if the move was made, false if the move was illegal
- */
-move(move: string | { from: Key; to: Key; promotion?: Promotion; }): boolean;
-
-/**
- * returns the current turn color
- * @returns 'white' or 'black'
- */
-getTurnColor(): Color;
-
-/**
- * returns all possible moves for the current position
- *
- */
-getPossibleMoves(): Map | undefined;
-
-/**
- *
- * @returns the current turn number
- * @example e4 e5 -> turn number is 2 now
- */
-getCurrentTurnNumber(): number;
-
-/**
- *
- * @returns the current ply number
- * @example e4 e5 Nf3 -> ply number is 3
- */
-getCurrentPlyNumber(): number;
-
-/**
- * returns the latest move made on the board
- */
-getLastMove(): MoveEvent | undefined;
-
-/**
- * Retrieves the move history.
- *
- * @param verbose - passing true will add more info
- * @example Verbose: [{"color": "w", "from": "e2", "to": "e4", "flags": "b", "piece": "p", "san": "e4"}], without verbose flag: [ "e7", "e5" ]
- */
-getHistory(verbose?: boolean): MoveEvent[] | string[];
-
-/**
- * Returns the FEN string for the current position.
- */
-getFen(): string;
-
-/**
- * Returns the board position as a 2D array.
- */
-getBoardPosition(): ({
- type: PieceType;
- color: PieceColor;
- square: Square;
-} | null)[][];
-
-/**
- * returns the PGN string for the current position.
- */
-getPgn(): string;
-
-/**
- * returns true of false depending on if the game is over
- */
-getIsGameOver(): boolean;
-
-/**
- * returns true or false depending on if a player is checkmated
- */
-getIsCheckmate(): boolean;
-
-/**
- * returns true or false depending on if a player is in check
- */
-getIsCheck(): boolean;
-
-/**
- * returns true or false depending on if a player is in stalemate
- */
-getIsStalemate(): boolean;
-
-/**
- * returns true or false depending on if a game is drawn
- */
-getIsDraw(): boolean;
-
-/**
- * returns true or false depending on if a game is drawn by threefold repetition
- */
-getIsThreefoldRepetition(): boolean;
-
-/**
- * returns true or false depending on if a game is drawn by insufficient material
- */
-getIsInsufficientMaterial(): boolean;
-
-/**
- * returns the color of a given square
- */
-getSquareColor(square: Square): SquareColor;
-
-/**
- * Returns the piece on the square or null if there is no piece
- */
-getSquare(square: Square): Piece | null;
-
-/**
- * loads a fen into the board
- * Caution: this will erase the game history. To set position with history call loadPgn with a pgn instead
- */
-setPosition(fen: string): void;
-
-/**
- * puts a piece on a given square on the board
- * returns true on success, else false
- */
-putPiece(piece: Piece, square: Square): boolean;
-
-/**
- * removes all pieces from the board
- */
-clearBoard(): void;
-
-/**
- * draw multiple arrows on the board
- */
-setShapes(shapes: DrawShape[]): void;
-
-/**
- * loads a pgn into the board
- *
- * @param pgn - the pgn to load
- */
-loadPgn(pgn: string): void;
-
-/**
- * returns the header information of the current pgn, if no pgn is loaded, returns an empty object
- * @example {
- * "Event": "IBM Kasparov vs. Deep Blue Rematch",
- * "Site": "New York, NY USA",
- * "Date": "1997.05.11",
- * "Round": "6",
- * "White": "Deep Blue",
- * "Black": "Kasparov, Garry",
- * "Opening": "Caro-Kann: 4...Nd7",
- * "ECO": "B17",
- * "Result": "1-0"
- * }
- */
-getPgnInfo(): {
- [key: string]: string | undefined;
-};
-
-/**
- * Sets the config of the board.
- * Caution: providing a config with a fen will erase the game history and change the starting position
- * for resetBoard. To keep history and starting position: omit fen from the given config and call
- * loadPgn with a pgn instead.
- *
- * @param config - a subset of config options, eg. `{ viewOnly: true, animation: { enabled: false } }`
- * or `{ movable: { events: { after: afterFunc }, showDests: false }, drawable: { enabled: false } }`
- * @param fillDefaults - if true unprovided config options will be substituted with default values, if
- * false the unprovided options will remain unchanged.
- */
-setConfig(config: BoardConfig, fillDefaults = false): void;
-
-/**
- * Views the position at the given ply number in the game's history.
- *
- * @param ply - the ply number of the position to be viewed, where 0 is the initial position, 1 is
- * after white's first move, 2 is after black's first move and so on.
- */
-viewHistory(ply: number): void;
-
-/**
- * Stops viewing history and returns the board to the present position, ie. after the latest move.
- */
-stopViewingHistory(): void;
-
-/**
- * Views the starting position of this game.
- */
-viewStart(): void;
-
-/**
- * If viewing history, views the move after the one currently being viewed.
- * If that move is the latest move, stops viewing history.
- */
-viewNext(): void;
-
-/**
- * If viewing history, views the previous move to the one currently being viewed.
- * Else, starts viewing history and views the move previous to the latest move.
- */
-viewPrevious(): void;
-
-```
-
-## Example Board API Usage
-
-
-
-## Example Game History Viewer Usage
-
-
-
-When viewing game history, the `viewingHistory` class is applied to the `main-wrap` element. This allows custom styles to be applied to the board only when viewing the history (by default, the board is desaturated).
diff --git a/docs/callbacks.md b/docs/callbacks.md
deleted file mode 100644
index b3be603..0000000
--- a/docs/callbacks.md
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-# Callbacks
-
-## Registering
-
-You can register custom callback functions on the board through the config object.
-Like other config property, this is optional.
-
-::: warning
-The move callback is being executed before the internal board state is updated. Accessing the boardApi can lead to unexpected results.
-Use the `move` event provided by the board component to access the API.
-:::
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-## Example
-
-
Change Counter: {{ changeCounter }}
-
Latest Move: {{lastMove }}
-
Square {{ square }} has been selected
-
No square has been selected yet
-
-
-
-
-
-
-
-There are two more methods, which aren't listed above:
-
-- insert
-- dropNewPiece
-
-The insert method is fired when a new chessboard is mounted.
-You probably will not need this.
-
-dropNewPiece is fired when a new piece is inserted. This feature isnt used currently.
diff --git a/docs/contribute.md b/docs/contribute.md
deleted file mode 100644
index 516d015..0000000
--- a/docs/contribute.md
+++ /dev/null
@@ -1,71 +0,0 @@
-# Contributing
-
-Contributions are very welcome. Thanks for your interest!
-
-## Setup the project
-
-::: code-group
-
-```sh[HTTPS]
-git clone https://github.com/qwerty084/vue3-chessboard.git
-```
-
-```sh[SSH]
-git clone git@github.com:qwerty084/vue3-chessboard.git
-```
-
-```sh[GitHub CLI]
-gh repo clone qwerty084/vue3-chessboard
-```
-
-:::
-
-Install the required dependencies:
-
-```sh
-npm install
-```
-
-Start the dev server:
-
-```sh
-npm run dev
-```
-
-Now you can start developing 🚀
-
-## Creating a Pull Request
-
-After adding your feature/bugfix please run the following scripts.
-
-Format your changes
-
-```sh
-npm run format
-```
-
-Type check your chages
-
-```sh
-npm run type-check
-```
-
-Lint your changes
-
-```sh
-npm run lint
-```
-
-Test your changes
-
-```sh
-npm run test
-```
-
-Then create a branch with a fitting name, commit and push your changes.
-
-
diff --git a/docs/events.md b/docs/events.md
deleted file mode 100644
index 3100ed4..0000000
--- a/docs/events.md
+++ /dev/null
@@ -1,449 +0,0 @@
-
-
-# Available Events
-
-## Events
-
-- `boardCreated` - emitted when the board is created and the boardAPI is available
-- `checkmate` - emitted when one player is mated
-- `stalemate` - emitted when the game ends in stalemate
-- `draw` - emitted when the game ends in a draw
-- `check` - emitted when one player is in check
-- `promotion` - emitted when a pawn is promoted
-- `move` - emitted when a move is made
-
-Here you can see the vue.js defineEmits:
-
-```ts
-const emit = defineEmits<{
- (e: 'boardCreated', boardApi: BoardApi): void; // emits boardAPI
- (e: 'checkmate', isMated: PieceColor): void; // emits the color of the mated player
- (e: 'stalemate'): void; // just emits stalemate, the value is not interesting
- (e: 'draw'): void; // same for draw
- (e: 'check', isInCheck: PieceColor): void; // emits color who is in check
- (e: 'promotion', promotion: PromotionEvent): void; // emits information about the promotion
- (e: 'move', move: MoveEvent): void; // emits information about the move
-}>();
-```
-
-## Listening for Events
-
-In the following examples you will see an alert when an event was emitted.
-Hit the play button, to see the events in action.
-
-## Check
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-
-
-
-
-
-
-
-
-
-
-
-## Move
-
-You can listen of moves on the board and get information about the move
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-
Magnus Carlsen vs Viswanathan Anand (World Championship Match 2014)
-
-
-
-
diff --git a/docs/events/board-created.md b/docs/events/board-created.md
deleted file mode 100644
index ce6111b..0000000
--- a/docs/events/board-created.md
+++ /dev/null
@@ -1,60 +0,0 @@
-# Board Created
-
-
-
-When the board component is mounted the board-created event is being emitted.
-In this event the `boardAPI` is included, which you can use to modify and extract data from the board through it's methods.
-
-## Definition
-
-```ts
-defineEmits<{
- (e: 'board-created', boardApi: BoardApi): void;
-}>();
-```
-
-
diff --git a/docs/issues.md b/docs/issues.md
deleted file mode 100644
index 5a4031e..0000000
--- a/docs/issues.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Issues
-
-## Report an issue
-
-I you have found a bug please open an issue on [GitHub](https://github.com/qwerty084/vue3-chessboard/issues)
-
-Or contact my via email: [github@lucahelms.dev](mailto:github@lucahelms.dev)
-
-If you want to fix the bug yourself, contributions are very welcome!
diff --git a/docs/props.md b/docs/props.md
deleted file mode 100644
index e40557c..0000000
--- a/docs/props.md
+++ /dev/null
@@ -1,349 +0,0 @@
-
-
-# Props
-
-Available props:
-
-- `board-config` - an object to configure the board
-- `player-color` - the color of the player who is allowed to move
-- `reactive-config` - boolean value, whether the board config should be reactive or not
-
-## `board-config`: Configure the chessboard
-
-To edit the chessboard you can pass a configuration object to the component.
-Here are all the available options with their default values.
-Just update the values the values you want to overwrite.
-
-```js
-{
- fen: 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1', // the position to start from as a string
- orientation: 'white', // the orientation of the board
- turnColor: 'white', // the color which starts the game
- coordinates: true, // enable or disable board coordinates
- autoCastle: true, // simplify castling move
- viewOnly: false, // allow or disallow moves on the board
- disableContextMenu: false, // enable/ disable the context menu
- addPieceZIndex: false,
- blockTouchScroll: false,
- highlight: {
- lastMove: true, // highlight the last move on the board
- check: true, // highlight king in check
- },
- animation: { // modify piece animations
- enabled: true,
- duration: 200,
- },
- lastMove: undefined, // this should not be modified
- movable: {
- free: false, // set to true any move is allowed, if false only legal moves
- color: 'white',
- showDests: true,
- dests: possibleMovesWhite,
- events: {},
- rookCastle: true,
- },
- premovable: {
- enabled: true,
- showDests: true,
- castle: true,
- events: {},
- },
- predroppable: {
- enabled: false,
- events: {},
- },
- draggable: {
- enabled: true,
- distance: 3,
- autoDistance: true,
- showGhost: true,
- deleteOnDropOff: false,
- },
- selectable: {
- enabled: true,
- },
- events: {},
- drawable: {
- enabled: true,
- visible: true,
- defaultSnapToValidMove: true,
- eraseOnClick: true,
- shapes: [],
- autoShapes: [],
- brushes: {
- green: { key: 'g', color: '#15781B', opacity: 1, lineWidth: 10 },
- red: { key: 'r', color: '#882020', opacity: 1, lineWidth: 10 },
- blue: { key: 'b', color: '#003088', opacity: 1, lineWidth: 10 },
- yellow: { key: 'y', color: '#e68f00', opacity: 1, lineWidth: 10 },
- paleBlue: { key: 'pb', color: '#003088', opacity: 0.4, lineWidth: 15 },
- paleGreen: { key: 'pg', color: '#15781B', opacity: 0.4, lineWidth: 15 },
- paleRed: { key: 'pr', color: '#882020', opacity: 0.4, lineWidth: 15 },
- paleGrey: {
- key: 'pgr',
- color: '#4a4a4a',
- opacity: 0.35,
- lineWidth: 15,
- },
- },
- },
-};
-```
-
-## Passing the config object to the board
-
-If you dont pass a config object, the default config shown above will be used.
-It's not required to set all properties. Your object will be merged with the default config.
-
-### Example setting the config object
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-The board should then look like this:
-
-
-
-
-
-
-
-## `player-color`: Configure the board for multiplayer
-
-The board can accept a _player-color_ prop to denote the color that the corresponding client should be allowed to play. Moves from a players opponent can be applied to the board with the `BoardApi`'s `move` method - the turns will switch once the `move` method is called with a valid fen string. If no value is provided, turns will switch locally.
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-```
-
-:::
-
-## `reactive-config`: Using a reactive config object
-
-The `TheChessboard` component can accept a `reactive-config` prop to allow the `board-config` prop to be reactive to changes. Any mutations of the `board-config` prop will propagate to changes of the board config. This works with nested properties in a non-destructive way, i.e. setting `boardConfig.draggable = { distance: 10, showGhost: false }` won't affect the other properties of `draggable` on the actual board config, such as `draggable.enabled`. However, it will change the "default state" of the board so that if `boardAPI.resetBoard()` is called the current state of the `board-config` prop is considered to be the provided config, as if it was passed at the time of instantiation of the `TheChessboard` component.
-
-Note that prop mutation is a _one-way flow of data_, so the state of the `board-config` prop won't necessarily reflect the state of the actual board config. For example, as the game progresses the `fen` property of the `board-config` prop **will not** update.
-Use the `boardAPI` to retrieve values.
-
-See the following example for how one might make use of this feature:
-
-::: code-group
-
-```vue [JavaScript]
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```vue [TypeScript]
-
-
-
-
-
-
-
-
-
-
-
-```
-
-:::
-
-The board should then look like this:
-
-
-