Rename Grid to DragGrid

docs/.vuepress/config.js

@@ -7,7 +7,7 @@ module.exports = {
                 title: 'Components',
                 collapsable: false,
                 children: [
-                    '/components/grid.md',
+                    '/components/DragGrid.md',
                 ]
             }
         ]

docs/components/DragGrid.md

+# DragGrid
+
+`DragGrid` is a cool component. Here's how to use it...
+
+<template>
+  <DragGrid :rows="5" :cols="5" v-model="items"></DragGrid>
+</template>
\ No newline at end of file

docs/components/grid.md

-# component
-
-`Component` is a cool component. Here's how to use it...
-
-<template>
-  <component />
-</template>
\ No newline at end of file

example/src/App.vue

 <script setup>
-import Grid from "../../src/Grid.vue";
+import DragGrid from "../../src/DragGrid.vue";
 import CircularCard from "./components/CircularCard.vue";
 </script>
 
 <template>
   <div id="app">
-    <Grid :rows="5" :cols="5" :pos-validation="blockField" v-model="items">
+    <DragGrid :rows="5" :cols="5" :pos-validation="blockField" v-model="items">
       <div id="blocker">
         This field is blocked because it's filled, the next one programmatically
       </div>
       <template #item="item">
         <div class="container">{{ item }}</div>
       </template>
-    </Grid>
-    <Grid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
+    </DragGrid>
+    <DragGrid :rows="3" :cols="3" v-model="ticTacToe" class="tic-tac-toe">
       <template #item="item">
-        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O"}}</CircularCard>
+        <CircularCard> {{ item.key.startsWith("a") ? "X" : "O" }}</CircularCard>
       </template>
-    </Grid>
+    </DragGrid>
   </div>
 </template>
 
@@ -59,7 +59,7 @@ export default {
         { x: 3, y: 3, w: 1, h: 1, key: "b1", data: {} },
         { x: 1, y: 2, w: 1, h: 1, key: "b2", data: {} },
         { x: 3, y: 1, w: 1, h: 1, key: "b3", data: {} },
-      ]
+      ],
     };
   },
 };

src/Grid.vue → src/DragGrid.vue

@@ -38,7 +38,7 @@
 import DragContainer from "./DragContainer.vue";
 
 export default {
-  name: "Grid",
+  name: "DragGrid",
   components: {
     DragContainer,
   },

src/components.js

 import DragContainer from "./DragContainer.vue";
-import Grid from "./Grid.vue";
+import DragGrid from "./DragGrid.vue";
 
-export default { DragContainer, Grid };
+export default { DragContainer, DragGrid };