Work on documentation

docs/.vuepress/config.js

@@ -10,6 +10,11 @@ module.exports = {
                     '/components/DragGrid.md',
                 ]
             }
+        ],
+        nav: [
+            { text: 'Home', link: '/' },
+            { text: 'Guide', link: '/guide/' },
+            { text: 'Repository', link: 'https://edugit.org/AlekSIS/libs/vue-draggable-grid/' }
         ]
     }
 }
\ No newline at end of file

docs/README.md

-# vue-draggable-grid
-
-Document the library here.
-
-### Installation
-
-$ npm install vue-draggable-grid
\ No newline at end of file
+---
+home: true
+heroText: vue-draggable-grid
+tagline: A vueJS library to create grids with draggable data blocks.
+actionText: Get Started →
+actionLink: /guide/
+footer: Copyright © 2023-present Julian Leucker
+---
\ No newline at end of file

docs/guide/index.md

+---
+sidebar: auto
+---
+
+# Guide
+
+## Quickstart
+
+Install the package `vue-draggable-grid` via your favourite package manager.
+Include the library in your project:
+
+```javascript
+import plugin from 'vue-draggable-grid';
+
+Vue.use(plugin);
+
+// Now create your app as usual
+```
+
+Inside the component where you want to use the grid define your grid and data as follows:
+
+```vue
+
+<template>
+  <drag-grid v-model="items" :cols="4" :rows="4">
+    <template #item="item">
+      {{ item.data.text }}
+    </template>
+  </drag-grid>
+</template>
+
+<script>
+export default {
+  name: "YourComponent",
+  data() {
+    return {
+      items: [
+        {x: 1, y: 3, w: 2, h: 2, key: "item1", data: {text: "Hello world 1"},},
+        {x: 2, y: 2, w: 2, h: 1, key: "item2", data: {text: "Hello world 2"},},
+        {x: 3, y: 1, w: 1, h: 1, key: "item3", data: {text: "Hello world 3"},},
+      ]
+    }
+  },
+}
+</script>
+```
+
+## Blocking fields
+
+A field (or cell) can be blocked via the `disabledFields` prop. The prop receives an array of objects, containing the
+coordinates of the blocked fields.
+
+An example for a disabled fields property:
+
+```javascript
+disabledFields: [
+    {x: 1, y: 1},
+    {x: 2, y: 3},
+]
+```
+
+## Prevent items from being dragged
+
+To disable dragging of a specific item, simply set the attribute `disabled` of the item to `true`.
+
+```javascript{4,5}
+someDisabledItems: [
+    { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
+    { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
+    { key: "key3", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
+    { key: "key4", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
+]
+```
+
+The highlighted items are not draggable.
+
+## Disabling the grid
+
+If the boolean property `disabled` is set for the whole grid, the grid itself is disabled,
+and items can't be moved.