Skip to content
Snippets Groups Projects
Commit 759d8c6b authored by Julian's avatar Julian
Browse files

Reformat

parent ebb9ed37
No related branches found
No related tags found
1 merge request!2Resolve "Implement basic functionality"
Pipeline #115755 passed
module.exports = {
title: 'vue-draggable-grid',
description: 'vue-draggable-grid component library for a draggable grid',
themeConfig: {
sidebar: [
{
title: 'Examples',
collapsable: false,
children: [
'/examples/Generic.md',
'/examples/TicTacToe.md',
'/examples/Counters.md',
'/examples/Lessons.md',
'/examples/Colors.md',
'/examples/Disabled.md',
'/examples/DisabledItems.md',
'/examples/Responsive.md',
]
}
title: "vue-draggable-grid",
description: "vue-draggable-grid component library for a draggable grid",
themeConfig: {
sidebar: [
{
title: "Examples",
collapsable: false,
children: [
"/examples/Generic.md",
"/examples/TicTacToe.md",
"/examples/Counters.md",
"/examples/Lessons.md",
"/examples/Colors.md",
"/examples/Disabled.md",
"/examples/DisabledItems.md",
"/examples/Responsive.md",
],
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'Examples', link: '/examples/Generic.md'},
{ text: 'Repository', link: 'https://edugit.org/AlekSIS/libs/vue-draggable-grid/' }
]
}
}
\ No newline at end of file
},
],
nav: [
{ text: "Home", link: "/" },
{ text: "Guide", link: "/guide/" },
{ text: "Examples", link: "/examples/Generic.md" },
{
text: "Repository",
link: "https://edugit.org/AlekSIS/libs/vue-draggable-grid/",
},
],
},
};
......@@ -5,4 +5,4 @@ tagline: A vueJS library to create grids with draggable data blocks.
actionText: Get Started →
actionLink: /guide/
footer: Copyright © 2023 Julian Leucker
---
\ No newline at end of file
---
......@@ -14,6 +14,5 @@ positioned automatically.
import Example5Colors from "../../example/src/Example5Colors.vue";
</script>
<Example5Colors />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -12,4 +12,4 @@ import Example3Counters from "../../example/src/Example3Counters.vue";
</script>
<Example3Counters />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -12,6 +12,5 @@ but it displays loading symbols everywhere. Check the checkbox to try:
import Example6Disabled from "../../example/src/Example6Disabled.vue";
</script>
<Example6Disabled />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -9,6 +9,5 @@ to them. Green items are normal and enabled.
import Example7DisabledItems from "../../example/src/Example7DisabledItems.vue";
</script>
<Example7DisabledItems />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -7,6 +7,5 @@ Grid with two programmatically blocked cells and one programmatically blocked it
import Example1Generic from "../../example/src/Example1Generic.vue";
</script>
<Example1Generic />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -12,6 +12,5 @@ have a highlight and doesn't keep track of the item position. Try moving
import Example4Lessons from "../../example/src/Example4Lessons.vue";
</script>
<Example4Lessons />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -7,6 +7,5 @@ The grid is responsive. Try resizing it below:
import Example8Responsive from "../../example/src/Example8Responsive.vue";
</script>
<Example8Responsive />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -7,6 +7,5 @@ A grid functioning as a playing field and another functioning as a container for
import Example2TicTacToe from "../../example/src/Example2TicTacToe.vue";
</script>
<Example2TicTacToe />
</ClientOnly>
\ No newline at end of file
</ClientOnly>
......@@ -20,7 +20,6 @@ Vue.use(draggableGrid);
Inside the component where you want to use the grid define your grid and data as follows:
```vue
<template>
<drag-grid v-model="items" :cols="4" :rows="4">
<template #item="item">
......@@ -35,13 +34,34 @@ export default {
data() {
return {
items: [
{x: 1, y: 3, w: 2, h: 2, key: "item1", data: {text: "Hello world 1"},},
{x: 2, y: 2, w: 2, h: 1, key: "item2", data: {text: "Hello world 2"},},
{x: 3, y: 1, w: 1, h: 1, key: "item3", data: {text: "Hello world 3"},},
]
}
{
x: 1,
y: 3,
w: 2,
h: 2,
key: "item1",
data: { text: "Hello world 1" },
},
{
x: 2,
y: 2,
w: 2,
h: 1,
key: "item2",
data: { text: "Hello world 2" },
},
{
x: 3,
y: 1,
w: 1,
h: 1,
key: "item3",
data: { text: "Hello world 3" },
},
],
};
},
}
};
</script>
```
......@@ -54,9 +74,9 @@ An example for a disabled fields property:
```javascript
disabledFields: [
{x: 1, y: 1},
{x: 2, y: 3},
]
{ x: 1, y: 1 },
{ x: 2, y: 3 },
];
```
## Prevent items from being dragged
......@@ -95,15 +115,15 @@ Examples for such methods are the following:
```javascript
function blockField(x, y, key) {
// We won't move items with ID 'obj8' and nothing into (3, 3) and (4, 3)
if (x === 3 && y === 3) return false;
if (x === 4 && y === 3) return false;
return key !== "obj8";
};
// We won't move items with ID 'obj8' and nothing into (3, 3) and (4, 3)
if (x === 3 && y === 3) return false;
if (x === 4 && y === 3) return false;
return key !== "obj8";
}
function blockAllMoving() {
return false;
};
return false;
}
```
## Changing the highlight
......@@ -115,17 +135,12 @@ The highlight is the grey-bordered rectangle which appears when dragging over a
To customize the highlight, use the `highlight` slot inside the grid component.
```html
<drag-grid
v-model="items"
:cols="3"
:rows="2"
>
<template #highlight>
<div ref="highlight" class="custom-highlight">
This is a custom highlight with a custom style!
</div>
</template>
<drag-grid v-model="items" :cols="3" :rows="2">
<template #highlight>
<div ref="highlight" class="custom-highlight">
This is a custom highlight with a custom style!
</div>
</template>
</drag-grid>
```
......@@ -147,9 +162,9 @@ function could look like this:
```javascript
function randomKey(element) {
if (element.key.length !== 1) return;
element.key += Math.random().toString(36).replace("0.", "");
};
if (element.key.length !== 1) return;
element.key += Math.random().toString(36).replace("0.", "");
}
```
This method changes the key of a moved item to a random string if the key has a length of 1.
......@@ -164,20 +179,22 @@ as well as the `context`.
A singular item could look like this:
```javascript
[{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
[
{
x: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1X : 0;
},
y: (grid) => {
return grid.gridId === "lesson-plan" ? this.lesson1Y : 0;
},
w: 1,
h: this.lesson1Length,
key: "lesson1",
data: {
text: this.lessonData.lesson1,
},
},
w: 1,
h: this.lesson1Length,
key: "lesson1",
data: {
text: this.lessonData.lesson1,
},
}]
];
```
Items can also have custom extra properties. They will however be reset after moving.
......@@ -192,7 +209,7 @@ The `input` event works together with the value prop so one can use `v-model` to
and have changes made automatically. The event returns the grid how it would look if the item
moved to the specific location.
::: warning
::: warning
Notice that this event is only possible if your item properties are basic types, functional items are not
supported and the properties will be reset to `undefined`.
:::
......@@ -201,21 +218,21 @@ The `itemChanged` event returns the moved item with following attributes:
```javascript
let eventData = {
context: String, // Context of the origin grid (same as the target's)
data: Object, // Data Object of the item
gridId: String, // ID of the target grid
h: Number, // Height of the item
key: String, // Key of the item
mouseX: Number, // Mouse position on the element relative to
mouseY: Number, // the center of the top left rectangle
originGridId: String, // ID of the origin grid
w: Number, // Width of the item
x: Number, // New x position (col) of the item
y: Number, // New y position (row) of the item
}
context: String, // Context of the origin grid (same as the target's)
data: Object, // Data Object of the item
gridId: String, // ID of the target grid
h: Number, // Height of the item
key: String, // Key of the item
mouseX: Number, // Mouse position on the element relative to
mouseY: Number, // the center of the top left rectangle
originGridId: String, // ID of the origin grid
w: Number, // Width of the item
x: Number, // New x position (col) of the item
y: Number, // New y position (row) of the item
};
```
This event doesn't change the grid, this change has to be made separately. This is
This event doesn't change the grid, this change has to be made separately. This is
useful if e.g. a direct API request is needed.
## Multiple grids
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment