From fbe19f8a858d6b226bb80a43d93cd764735a15d0 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 20:06:11 +0100
Subject: [PATCH] Work on documentation

---
 docs/.vuepress/config.js |  5 +++
 docs/README.md           | 15 ++++----
 docs/guide/index.md      | 80 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 docs/guide/index.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 2cda3b8..b4c5e09 100644
--- a/docs/.vuepress/config.js
+++ b/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
diff --git a/docs/README.md b/docs/README.md
index b4164f3..47b4eff 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,8 @@
-# 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
diff --git a/docs/guide/index.md b/docs/guide/index.md
new file mode 100644
index 0000000..724a774
--- /dev/null
+++ b/docs/guide/index.md
@@ -0,0 +1,80 @@
+---
+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.
-- 
GitLab