Resolve "Implement basic functionality"

Closes #1 (closed) Closes #2 (closed) Closes #3 (closed) Closes #4 (closed) Closes #5 (closed) Closes #6 (closed)

example/src/App.vue

@@ -4,8 +4,67 @@ import Grid from "../../src/Grid.vue";
 
 <template>
   <div id="app">
-    <Grid :rows="10" :cols="5"></Grid>
+    <Grid :rows="10" :cols="5" :pos-validation="blockField" v-model="items">
+      <div id="blocker">
+        This field is blocked because it's filled, the next one programmatically
+      </div>
+    </Grid>
   </div>
 </template>
 
-<style scoped></style>
+<script>
+export default {
+  name: "App",
+  methods: {
+    blockField(x, y, key) {
+      // We won't move fields with ID 'obj8' and nothing into (4, 3)
+      if (x === 4 && y === 3) return false;
+      return key !== "obj8";
+    },
+  },
+  data() {
+    return {
+      items: [
+        { x: 1, y: 3, w: 1, h: 1, key: "obj1", data: {} },
+        { x: 2, y: 1, w: 1, h: 1, key: "obj2", data: {} },
+        { x: 3, y: 1, w: 2, h: 2, key: "obj3", data: {} },
+        { x: 5, y: 2, w: 1, h: 1, key: "obj4", data: {} },
+        { x: 1, y: 1, w: 1, h: 2, key: "obj5", data: {} },
+        { x: 5, y: 1, w: 1, h: 1, key: "obj6", data: {} },
+        { x: 2, y: 2, w: 1, h: 3, key: "obj7", data: {} },
+        {
+          x: 1,
+          y: 4,
+          w: 1,
+          h: 1,
+          key: "obj8",
+          data: { title: "I'm blocked from moving!" },
+        },
+        { x: 5, y: 3, w: 1, h: 1, key: "obj9", data: {} },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+#blocker {
+  grid-row: 3 / span 1;
+  grid-column: 3 / span 1;
+  background-image: linear-gradient(
+    45deg,
+    #edd85f 25%,
+    #0f2b3d 25%,
+    #0f2b3d 50%,
+    #edd85f 50%,
+    #edd85f 75%,
+    #0f2b3d 75%,
+    #0f2b3d 100%
+  );
+  background-size: 56.57px 56.57px;
+  color: white;
+  font-size: large;
+  font-weight: bold;
+  text-shadow: 4px 4px 4px #2c3e50;
+}
+</style>