From 65c170525f3fe1136caa4a7ca2c85ab70d510ac6 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Tue, 7 Feb 2023 13:07:17 +0100
Subject: [PATCH] Provide examples of blocked fields
---
example/src/App.vue | 41 +++++++++++++++++++++++++++++++++++++++--
1 file changed, 39 insertions(+), 2 deletions(-)
diff --git a/example/src/App.vue b/example/src/App.vue
index aa27f66..1993003 100644
--- a/example/src/App.vue
+++ b/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>
--
GitLab