From 664854f7bb6e0cda6761b36bf55e262136f70c5d Mon Sep 17 00:00:00 2001 From: eiamei Date: Sat, 20 Oct 2018 09:54:56 +0300 Subject: [PATCH 1/8] Possible fix for autosize issue if padding not 0 --- src/mixins/window_size.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/mixins/window_size.js b/src/mixins/window_size.js index 335cb30..516db1b 100644 --- a/src/mixins/window_size.js +++ b/src/mixins/window_size.js @@ -5,20 +5,23 @@ export default { windowWidth: 0 } }, - created () { window.addEventListener('resize', this.getWindowSize) this.getWindowSize() }, - + mounted () { + this.getWindowSize() + }, beforeDestroy () { window.removeEventListener('resize', this.getWindowSize) }, methods: { getWindowSize () { - this.windowHeight = window.innerHeight - this.windowWidth = window.innerWidth + if (this.$el) { + this.windowHeight = this.$el.clientHeight + this.windowWidth = this.$el.clientWidth + } } } } From 14b8098a490d7e0abd54037851d40eefea4b0035 Mon Sep 17 00:00:00 2001 From: Alexander Galaydyuk Date: Tue, 13 Nov 2018 16:36:57 +0200 Subject: [PATCH 2/8] update dist to actual state --- dist/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index 3aa078a..ada0791 100644 --- a/dist/index.js +++ b/dist/index.js @@ -491,12 +491,15 @@ created: function() { window.addEventListener("resize", this.getWindowSize), this.getWindowSize(); }, + mounted: function() { + this.getWindowSize(); + }, beforeDestroy: function() { window.removeEventListener("resize", this.getWindowSize); }, methods: { getWindowSize: function() { - this.windowHeight = window.innerHeight, this.windowWidth = window.innerWidth; + this.$el && (this.windowHeight = this.$el.clientHeight, this.windowWidth = this.$el.clientWidth); } } }; @@ -558,7 +561,7 @@ on: { mousedown: _vm.mousedown, touchstart: function($event) { - $event.stopPropagation(), _vm.mousedown($event); + return $event.stopPropagation(), _vm.mousedown($event); } } }, [ _vm._t("default") ], 2); From 21505ee6b4e3db437947afcad8dce9f60b285228 Mon Sep 17 00:00:00 2001 From: Alexander Galaydyuk Date: Tue, 20 Nov 2018 17:33:31 +0200 Subject: [PATCH 3/8] fix height of container and center alignment after remove item --- src/Grid.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Grid.vue b/src/Grid.vue index 81748f2..67cf209 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -97,7 +97,7 @@ export default { }, height () { - return Math.ceil(this.items.length / this.rowCount) * + return Math.ceil(this.list.length / this.rowCount) * this.cellHeight }, @@ -113,7 +113,7 @@ export default { rowShift () { if (this.center) { - let contentWidth = this.items.length * this.cellWidth + let contentWidth = this.list.length * this.cellWidth let rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : (this.gridResponsiveWidth % this.cellWidth) / 2 From 3e4119a1c912963ee77cc8def61f2b7e28f04eb3 Mon Sep 17 00:00:00 2001 From: Alexander Galaydyuk Date: Tue, 20 Nov 2018 17:33:56 +0200 Subject: [PATCH 4/8] build --- dist/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/index.js b/dist/index.js index ada0791..7977b19 100644 --- a/dist/index.js +++ b/dist/index.js @@ -250,7 +250,7 @@ return this.gridWidth < 0 ? this.windowWidth : Math.min(this.windowWidth, this.gridWidth); }, height: function() { - return Math.ceil(this.items.length / this.rowCount) * this.cellHeight; + return Math.ceil(this.list.length / this.rowCount) * this.cellHeight; }, style: function() { return { @@ -262,7 +262,7 @@ }, rowShift: function() { if (this.center) { - var contentWidth = this.items.length * this.cellWidth, rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : this.gridResponsiveWidth % this.cellWidth / 2; + var contentWidth = this.list.length * this.cellWidth, rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : this.gridResponsiveWidth % this.cellWidth / 2; return Math.floor(rowShift); } return 0; From af2a166411be9e3928c4591a38b73fb84675c3dd Mon Sep 17 00:00:00 2001 From: Jeffrey Ernst / Black beard / irongollem Date: Tue, 16 Apr 2019 13:20:21 +0200 Subject: [PATCH 5/8] BUG fixed double dom close Slot scope was self closing then followed by a --- src/Grid.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Grid.vue b/src/Grid.vue index 81748f2..cbc559f 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -19,7 +19,7 @@ :item="v.item" :index="v.index" :sort="v.sort" - :remove="() => { removeItem(v) }"/> + :remove="() => { removeItem(v) }"> From 86f049952ef07db7510c9801a3f8b0e53fe4a2fe Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 13 Dec 2019 16:04:15 +0000 Subject: [PATCH 6/8] Bump npm from 5.10.0 to 6.13.4 in /demo Bumps [npm](https://github.com/npm/cli) from 5.10.0 to 6.13.4. - [Release notes](https://github.com/npm/cli/releases) - [Changelog](https://github.com/npm/cli/blob/latest/CHANGELOG.md) - [Commits](https://github.com/npm/cli/compare/v5.10.0...v6.13.4) Signed-off-by: dependabot[bot] --- demo/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/package.json b/demo/package.json index dc18088..6c50e9e 100644 --- a/demo/package.json +++ b/demo/package.json @@ -22,7 +22,7 @@ "html-webpack-plugin": "^2.30.1", "install": "^0.10.1", "node-sass": "^4.5.0", - "npm": "^5.4.2", + "npm": "^6.13.4", "sass-loader": "^5.0.1", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", From 9fd3159f66150ffd5a30fbb2c9b1fe0ed4eee7c6 Mon Sep 17 00:00:00 2001 From: Zearin Date: Sun, 15 Mar 2020 14:27:04 -0400 Subject: [PATCH 7/8] Update README.md Minor copy-edits for grammar, spelling, phrasing, formatting, and clarity. --- README.md | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 3d2b871..4258f46 100644 --- a/README.md +++ b/README.md @@ -5,11 +5,11 @@ #### Fixed size grid for Vue.js -This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs or reach me out on twitter! 👍 🚀 +This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs, or reach me out on twitter! 👍 🚀 Thanks! -

+

@@ -62,36 +62,33 @@ Plugin does **NOT** modify the source data array. | Name | Type | Default | Description | | --- | --- | --- | --- | -| items | Array | [] | Initial array of items | -| cellWidth | Number | 80 | Cell width | -| cellHeight | Number | 80 | Cell height | -| draggable | Boolean | false | Flag that will let you drag grid's cells | -| dragDelay | Number | 0 | @TODO | -| sortable | Boolean | false | Flag that will let you reorder grid's cells, requires `draggable` to be `true` | -| center | Boolean | false | @TODO | +| `items` | Array | `[]` | Initial array of items | +| `cellWidth` | Number | `80` | Cell width | +| `cellHeight` | Number | `80` | Cell height | +| `draggable` | Boolean | `false` | Flag that will let you drag grid's cells | +| `dragDelay` | Number | `0` | @TODO | +| `sortable` | Boolean | `false` | Flag that will let you reorder grid's cells; requires `draggable` to be `true` | +| `center` | Boolean | `false` | @TODO | ### Events | Name | Description | | --- | --- | -| @change | Occurs on every action that involves reordering array or changing it's length | -| @remove | Occurs when an element is deleted through template | -| @click | Occurs when cell is clicked | -| @sort | Occurs when array item order is changed manually | +| `@change` | Occurs on every action that involves reordering array or changing its length | +| `@remove` | Occurs when an element is deleted through template | +| `@click` | Occurs when cell is clicked | +| `@sort` | Occurs when array item order is changed manually | ### Cell template -Cell template is used to get access to list data, indexing and sorting params generated by plugin. +Cell template is used to get access to list data, indexing, and sorting params generated by plugin. Template's scope contains: -`props.item` - list item value - -`props.index` - initial index of the item - -`props.sort` - current index of an item after sorting - -`props.remove()` - method that will remove item from the arrey and resport list. +* `props.item`: list item value +* `props.index`: initial index of the item +* `props.sort`: current index of the item after sorting +* `props.remove()`: method that removes the item from the array and resort list. Example: @@ -103,7 +100,7 @@ Example: ``` -### Why do i need this? +### Why do I need this? A good example of using a plugin would be rending macOS' `Launchpad` or `Dock`. Check out a demo for a solid example of how the plugin behaves & feels. From d430db4c3f65a55a0bd83f360ac7be680c75247d Mon Sep 17 00:00:00 2001 From: Yev Vlasenko Date: Sun, 17 May 2020 07:21:53 +0100 Subject: [PATCH 8/8] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4258f46..4f0b873 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ ## Vue.js Grid ( Experiment ) +## ⚠️ This an experement and not a production-ready plugin + [![npm version](https://badge.fury.io/js/vue-js-grid.svg)](https://badge.fury.io/js/vue-js-grid) [![npm](https://img.shields.io/npm/dm/vue-js-grid.svg)](https://www.npmjs.com/package/vue-js-grid)