Move example 7 to separate component and docs

docs/.vuepress/config.js

@@ -13,6 +13,7 @@ module.exports = {
                     '/examples/Lessons.md',
                     '/examples/Colors.md',
                     '/examples/Disabled.md',
+                    '/examples/DisabledItems.md',
                 ]
             }
         ],

docs/examples/DisabledItems.md

+# Example 7: Disabled items and fields
+
+This is a grid with disabled fields and items. Red items are disabled
+and cannot be moved. Pink fields are disabled and items cannot be moved
+to them. Green items are normal and enabled.
+
+<ClientOnly>
+<script setup>
+import Example7DisabledItems from "../../example/src/Example7DisabledItems.vue";
+</script>
+
+
+<Example7DisabledItems />
+</ClientOnly>
\ No newline at end of file

example/src/App.vue

 <script setup>
-import DragGrid from "../../src/DragGrid.vue";
 import Example1Generic from "./Example1Generic.vue";
 import Example2TicTacToe from "./Example2TicTacToe.vue";
 import Example3Counters from "./Example3Counters.vue";
 import Example4Lessons from "./Example4Lessons.vue";
 import Example5Colors from "./Example5Colors.vue";
 import Example6Disabled from "./Example6Disabled.vue";
+import Example7DisabledItems from "./Example7DisabledItems.vue";
 </script>
 
 <template>
@@ -79,23 +79,8 @@ import Example6Disabled from "./Example6Disabled.vue";
           This is a grid with disabled fields and items. Red items are disabled
           and cannot be moved.
         </p>
-        <drag-grid
-          v-model="someDisabledItems"
-          :cols="4"
-          :rows="4"
-          class="tic-tac-toe"
-          :disabled-fields="disabledFields"
-        >
-          <template #item="{ rawItem }">
-            <div
-              class="container"
-              :style="{ background: rawItem.disabled ? 'red' : 'green' }"
-            ></div>
-          </template>
-          <template #disabledField
-            ><div class="container">This field is disabled!</div></template
-          >
-        </drag-grid>
+
+        <example7-disabled-items></example7-disabled-items>
       </div>
     </div>
   </div>
@@ -104,34 +89,10 @@ import Example6Disabled from "./Example6Disabled.vue";
 <script>
 export default {
   name: "App",
-  data() {
-    return {
-      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 },
-      ],
-      disabledFields: [
-        { x: 1, y: 1 },
-        { x: 2, y: 3 },
-      ],
-    };
-  },
 };
 </script>
 
 <style scoped>
-.container {
-  background: lightcoral;
-  width: 100%;
-  height: 100%;
-}
-
-.tic-tac-toe {
-  max-width: 400px;
-}
-
 .row {
   display: flex;
   justify-content: space-between;

example/src/Example7DisabledItems.vue

+<script setup>
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <drag-grid
+    v-model="someDisabledItems"
+    :cols="4"
+    :rows="4"
+    class="size"
+    :disabled-fields="disabledFields"
+  >
+    <template #item="{ rawItem }">
+      <div
+        class="container"
+        :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+      ></div>
+    </template>
+    <template #disabledField
+      ><div class="container">This field is disabled!</div></template
+    >
+  </drag-grid>
+</template>
+
+<script>
+export default {
+  name: "Example7DisabledItems",
+  data() {
+    return {
+      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: 4, w: 1, h: 1, data: {} },
+        { key: "key4", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
+        { key: "key5", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
+        { key: "key6", x: 4, y: 3, w: 1, h: 1, data: {}, disabled: true },
+      ],
+      disabledFields: [
+        { x: 1, y: 1 },
+        { x: 2, y: 3 },
+        { x: 4, y: 2 },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.container {
+  background: lightcoral;
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  text-align: center;
+}
+.size {
+  aspect-ratio: 1;
+}
+</style>