From 6ec9bf33e3f251f85f10240762452593f7249e97 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Mon, 13 Feb 2023 15:15:47 +0100
Subject: [PATCH] Add example for disabled fields
---
example/src/App.vue | 31 +++++++++++++++++++++++++++++++
1 file changed, 31 insertions(+)
diff --git a/example/src/App.vue b/example/src/App.vue
index 9eb3485..075a7b0 100644
--- a/example/src/App.vue
+++ b/example/src/App.vue
@@ -281,6 +281,27 @@ import NumberCounter from "./components/NumberCounter.vue";
</div>
<div>
<h2>Example 7: Disabled fields and items with props</h2>
+ <p>
+ This is a grid with disabled fields and items. Red items are disabled
+ and cannot be moved.
+ </p>
+ <drag-grid
+ v-model="someDisabledItems"
+ :cols="4"
+ :rows="4"
+ class="tic-tac-toe"
+ :disabled-fields="disabledFields"
+ >
+ <template #item="{ rawItem }">
+ <div
+ class="container"
+ :style="{ background: rawItem.disabled ? 'red' : 'green' }"
+ ></div>
+ </template>
+ <template #disabledField
+ ><div class="container">This field is disabled!</div></template
+ >
+ </drag-grid>
</div>
</div>
</div>
@@ -455,6 +476,16 @@ export default {
y: 2,
},
gridDisabled: true,
+ someDisabledItems: [
+ { key: "key1", x: 1, y: 3, w: 1, h: 1, data: {} },
+ { key: "key2", x: 2, y: 2, w: 1, h: 1, data: {} },
+ { key: "key3", x: 3, y: 1, w: 1, h: 1, data: {}, disabled: true },
+ { key: "key4", x: 1, y: 2, w: 1, h: 1, data: {}, disabled: true },
+ ],
+ disabledFields: [
+ { x: 1, y: 1 },
+ { x: 2, y: 3 },
+ ],
};
},
computed: {
--
GitLab