Move example 6 to separate component and docs

docs/.vuepress/config.js

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

docs/examples/Disabled.md

+# Example 6: Disabled grid
+
+This uses the same data as the tic-tac-toe but is completely disabled.
+Notice how the items still move if the tic-tac-toe data would
+change. Uncheck the checkbox to enable:
+
+<ClientOnly>
+<script setup>
+import Example6Disabled from "../../example/src/Example6Disabled.vue";
+</script>
+
+
+<Example6Disabled />
+</ClientOnly>
\ No newline at end of file

example/src/App.vue

 <script setup>
 import DragGrid from "../../src/DragGrid.vue";
-import CircularCard from "./components/CircularCard.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";
 </script>
 
 <template>
@@ -62,7 +62,7 @@ import Example5Colors from "./Example5Colors.vue";
     </p>
     <example5-colors></example5-colors>
 
-    <div class="ttt-container">
+    <div class="row">
       <div>
         <h2>Example 6: Disabled grid</h2>
         <p>
@@ -71,25 +71,7 @@ import Example5Colors from "./Example5Colors.vue";
           changed. Uncheck the checkbox to enable:
         </p>
 
-        <label>
-          <input type="checkbox" v-model="gridDisabled" />
-          Grid disabled?
-        </label>
-
-        <drag-grid
-          v-model="ticTacToe"
-          :cols="3"
-          :rows="3"
-          :disabled="gridDisabled"
-          class="tic-tac-toe"
-          context="ticTacToe"
-        >
-          <template #item="item">
-            <CircularCard>
-              {{ item.key.startsWith("a") ? "X" : "O" }}
-            </CircularCard>
-          </template>
-        </drag-grid>
+        <example6-disabled></example6-disabled>
       </div>
       <div>
         <h2>Example 7: Disabled fields and items with props</h2>
@@ -124,11 +106,6 @@ export default {
   name: "App",
   data() {
     return {
-      ticTacToe: [
-        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
-        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
-      ],
-      gridDisabled: true,
       someDisabledItems: [
         { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
         { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
@@ -155,7 +132,7 @@ export default {
   max-width: 400px;
 }
 
-.ttt-container {
+.row {
   display: flex;
   justify-content: space-between;
 }

example/src/Example6Disabled.vue

+<script setup>
+import CircularCard from "./components/CircularCard.vue";
+import DragGrid from "../../src/DragGrid.vue";
+</script>
+
+<template>
+  <div>
+    <label>
+      <input type="checkbox" v-model="gridDisabled" />
+      Grid disabled?
+    </label>
+
+    <drag-grid
+      v-model="ticTacToe"
+      :cols="3"
+      :rows="3"
+      :disabled="gridDisabled"
+      class="tic-tac-toe"
+      context="ticTacToe"
+    >
+      <template #item="item">
+        <CircularCard>
+          {{ item.key.startsWith("a") ? "X" : "O" }}
+        </CircularCard>
+      </template>
+    </drag-grid>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Example6Disabled",
+  data() {
+    return {
+      ticTacToe: [
+        { x: 1, y: 1, w: 1, h: 1, key: "a1", data: { text: "X" } },
+        { x: 3, y: 3, w: 1, h: 1, key: "b1", data: { text: "O" } },
+      ],
+      gridDisabled: true,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.tic-tac-toe {
+  max-width: 400px;
+}
+</style>