diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 16b55c3560101b2f75a5bfd9b5f7947fd807b3d7..b644b9726bae3993d8d02160a5c863cdefc69e9b 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,28 +1,31 @@ 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/", + }, + ], + }, +}; diff --git a/docs/README.md b/docs/README.md index e2ffe596f381b8a4b18e7e97b07c8aa3a4003944..17458b43f5b80502feb99782578b646019d54a3c 100644 --- a/docs/README.md +++ b/docs/README.md @@ -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 +--- diff --git a/docs/examples/Colors.md b/docs/examples/Colors.md index ca475836a0e008c0ffc8406a29d81c6bc3dcc95a..fa6ae24c8e5d4dd9cb1998247791958764fbc889 100644 --- a/docs/examples/Colors.md +++ b/docs/examples/Colors.md @@ -14,6 +14,5 @@ positioned automatically. import Example5Colors from "../../example/src/Example5Colors.vue"; </script> - <Example5Colors /> -</ClientOnly> \ No newline at end of file +</ClientOnly> diff --git a/docs/examples/Counters.md b/docs/examples/Counters.md index 112be6ee6d303badedc0a8ffce44b0cba2dd6f0a..778baeb2c2163d898f17a74b9bb4a7bfbac83ff0 100644 --- a/docs/examples/Counters.md +++ b/docs/examples/Counters.md @@ -12,4 +12,4 @@ import Example3Counters from "../../example/src/Example3Counters.vue"; </script> <Example3Counters /> -</ClientOnly> \ No newline at end of file +</ClientOnly> diff --git a/docs/examples/Disabled.md b/docs/examples/Disabled.md index cecee570209cdff55f2e9949ae8371d060b66f83..c44d5dd3dd27da82bab15b0c29b874d699adfa04 100644 --- a/docs/examples/Disabled.md +++ b/docs/examples/Disabled.md @@ -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> diff --git a/docs/examples/DisabledItems.md b/docs/examples/DisabledItems.md index 423e5fb3e80f64c1ec709359f20b14d2bd1da6a7..8c5b4969f740ea391d80c2a19fdc82adb0be82df 100644 --- a/docs/examples/DisabledItems.md +++ b/docs/examples/DisabledItems.md @@ -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> diff --git a/docs/examples/Generic.md b/docs/examples/Generic.md index 520206bc1d9ade46086d2e9678169531e32b0617..bc2060c125df19f3e6c9e1b66cc516a659d4a4bd 100644 --- a/docs/examples/Generic.md +++ b/docs/examples/Generic.md @@ -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> diff --git a/docs/examples/Lessons.md b/docs/examples/Lessons.md index 80c092cdb8726104a126f4372f2527a7ad31dd37..a04c26f0c59f6b533b5c84b7ed0c6b7a052fe227 100644 --- a/docs/examples/Lessons.md +++ b/docs/examples/Lessons.md @@ -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> diff --git a/docs/examples/Responsive.md b/docs/examples/Responsive.md index 3d87a0affb7b9b0c049a20a0286753dcdc21dce2..55eb22025f58e60738e91e7cfc244c7f34987574 100644 --- a/docs/examples/Responsive.md +++ b/docs/examples/Responsive.md @@ -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> diff --git a/docs/examples/TicTacToe.md b/docs/examples/TicTacToe.md index e8f1172f048d5fa17f27e3e47d1fe1bc1934c115..bfb532845945d01a26b0062de8ac2683865db4c2 100644 --- a/docs/examples/TicTacToe.md +++ b/docs/examples/TicTacToe.md @@ -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> diff --git a/docs/guide/index.md b/docs/guide/index.md index 357132457877ce2301b64562390d9c0b7c8c8af9..4fd751b8c3b34172e9fe4657b65007366e80c80b 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -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