From 5120f1604f467696e9cf28edeaba77d1b56ecf79 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 15:15:33 +0100
Subject: [PATCH] Allow grids to declare disabled fields
---
src/DragGrid.vue | 27 ++++++++++++++++++++++++++-
src/GridItem.vue | 28 ++++++++++++++++++++++++++++
2 files changed, 54 insertions(+), 1 deletion(-)
create mode 100644 src/GridItem.vue
diff --git a/src/DragGrid.vue b/src/DragGrid.vue
index 44b5e40..7ecd69e 100644
--- a/src/DragGrid.vue
+++ b/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 (
diff --git a/src/GridItem.vue b/src/GridItem.vue
new file mode 100644
index 0000000..4597204
--- /dev/null
+++ b/src/GridItem.vue
@@ -0,0 +1,28 @@
+<template>
+ <div>
+ <slot></slot>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "GridItem",
+ props: {
+ x: {
+ type: Number,
+ required: true,
+ },
+ y: {
+ type: Number,
+ required: true,
+ },
+ },
+};
+</script>
+
+<style scoped>
+div {
+ grid-column: v-bind(x) / span 1;
+ grid-row: v-bind(y) / span 1;
+}
+</style>
--
GitLab