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,45 @@ import Grid from "../../src/Grid.vue";
 
 <template>
   <div id="app">
-    <Grid :rows="10" :cols="5"></Grid>
+    <Grid :rows="10" :cols="5" :pos-validation="blockField">
+      <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";
+    },
+  },
+};
+</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>