Resolve "Implement basic functionality"

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

src/DragGrid.vue

@@ -20,7 +20,7 @@
       :data="getObject('data', item)"
       :context="context"
       :grid-id="gridId"
-      :disabled="disabled"
+      :disabled="disabled || item.disabled"
     >
       <slot v-bind="transformItem(item)" :raw-item="item" name="item">
         <dl>
@@ -35,6 +35,16 @@
         </dl>
       </slot>
     </DragContainer>
+    <template v-for="disabledField in disabledFields">
+      <GridItem
+        class="disabledField"
+        :x="disabledField.x"
+        :y="disabledField.y"
+        :key="disabledField"
+      >
+        <slot name="disabledField"></slot>
+      </GridItem>
+    </template>
     <slot></slot>
   </div>
 </template>
@@ -42,10 +52,12 @@
 <script>
 import DragContainer from "./DragContainer.vue";
 import { v4 as uuidv4 } from "uuid";
+import GridItem from "./GridItem.vue";
 
 export default {
   name: "DragGrid",
   components: {
+    GridItem,
     DragContainer,
   },
   emits: ["input", "itemChanged"],
@@ -92,6 +104,11 @@ export default {
       required: false,
       default: false,
     },
+    disabledFields: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
   },
   methods: {
     positionAllowed(x, y, key) {
@@ -99,6 +116,14 @@ export default {
       if (x > this.cols) return false;
       if (y > this.rows) return false;
 
+      if (
+        this.disabledFields.filter((field) => field.x === x && field.y === y)
+          .length > 0
+      ) {
+        // Field is disabled
+        return false;
+      }
+
       for (let item of this.value) {
         if (key === item.key) continue;
         if (