From 33924d207ac0f852d2e34598b6f9f520c1d75970 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 2 Feb 2023 18:14:59 +0100
Subject: [PATCH] Create Grid And Container components
---
docs/.vuepress/config.js | 2 +-
docs/components/{component.md => grid.md} | 0
src/Component.vue | 8 -----
src/DragContainer.vue | 26 ++++++++++++++++
src/Grid.vue | 36 +++++++++++++++++++++++
src/components.js | 5 ++--
6 files changed, 66 insertions(+), 11 deletions(-)
rename docs/components/{component.md => grid.md} (100%)
delete mode 100644 src/Component.vue
create mode 100644 src/DragContainer.vue
create mode 100644 src/Grid.vue
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index ba76c72..3eee8fc 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -7,7 +7,7 @@ module.exports = {
title: 'Components',
collapsable: false,
children: [
- '/components/component.md',
+ '/components/grid.md',
]
}
]
diff --git a/docs/components/component.md b/docs/components/grid.md
similarity index 100%
rename from docs/components/component.md
rename to docs/components/grid.md
diff --git a/src/Component.vue b/src/Component.vue
deleted file mode 100644
index 214828e..0000000
--- a/src/Component.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
- <div/>
-</template>
-<script>
-export default {
- name: 'Component'
-}
-</script>
\ No newline at end of file
diff --git a/src/DragContainer.vue b/src/DragContainer.vue
new file mode 100644
index 0000000..b9cb3c2
--- /dev/null
+++ b/src/DragContainer.vue
@@ -0,0 +1,26 @@
+<template>
+ <div @dragstart="handleDragStart">
+ <slot>
+ <div id="container"></div>
+ </slot>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "DragContainer",
+ methods: {
+ handleDragStart(event) {
+ event.dataTransfer.setData("text", event.target.id);
+ }
+ }
+}
+</script>
+
+<style scoped>
+#container {
+ background: lightcoral;
+ width: 100%;
+ height: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/Grid.vue b/src/Grid.vue
new file mode 100644
index 0000000..4f001d2
--- /dev/null
+++ b/src/Grid.vue
@@ -0,0 +1,36 @@
+<template>
+ <div @dragover.prevent @drop.prevent="">
+ <slot name="highlight">
+ <div id="highlight"></div>
+ </slot>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'Grid',
+ props: {
+ rows: {
+ type: Number,
+ required: true
+ },
+ cols: {
+ type: Number,
+ required: true
+ }
+ },
+ methods: {
+ handleDrop(event) {
+ let data = event.dataTransfer.getData("text");
+ event.target.appendChild(document.getElementById(data));
+ }
+ }
+}
+</script>
+
+<style scoped>
+#highlight {
+ background: darkgrey;
+ border: grey dashed 2px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components.js b/src/components.js
index ab5df40..60479b9 100644
--- a/src/components.js
+++ b/src/components.js
@@ -1,3 +1,4 @@
-import Component from "./Component.vue";
+import DragContainer from "./DragContainer.vue";
+import Grid from "./Grid.vue";
-export default {Component};
+export default {DragContainer, Grid};
--
GitLab