From 1fa9f240b1599583692dd4921162fcf8ac298d68 Mon Sep 17 00:00:00 2001 From: euvl Date: Wed, 27 Sep 2017 08:12:01 +0100 Subject: [PATCH 01/12] Removed unused peer dep --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index a66e208..60e3cc5 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,6 @@ "bugs": { "url": "https://github.com/euvl/vue-js-grid/issues" }, - "peerDependencies": { - "vue": "^2.0.0" - }, "keywords": [ "vue" ], From b3a40374f30093f0aadc12f2c2c4454e819cbca4 Mon Sep 17 00:00:00 2001 From: euvl Date: Wed, 27 Sep 2017 09:42:41 +0100 Subject: [PATCH 02/12] Removed scss support, working on gridWidth prop --- src/Grid.vue | 19 +++++++++++++------ src/GridItem.vue | 12 ++++-------- webpack.config.js | 13 +++++++------ 3 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/Grid.vue b/src/Grid.vue index 3607f1d..faccd57 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -39,6 +39,10 @@ export default { type: Array, default: () => [] }, + gridWidth: { + type: Number, + default: -1 + }, cellWidth: { type: Number, default: 80, @@ -84,6 +88,14 @@ export default { } }, computed: { + gridResponsiveWidth () { + if (this.gridWidth < 0) { + return this.windowWidth + } else { + return Math.min(this.windowWidth, this.gridWidth) + } + }, + height () { return Math.ceil(this.items.length / this.rowCount) * this.cellHeight @@ -224,12 +236,7 @@ export default { } } - diff --git a/webpack.config.js b/webpack.config.js index 0f5302a..4f70dd9 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,12 +15,13 @@ module.exports = { rules: [ { test: /\.vue$/, - loader: 'vue-loader', - options: { - loaders: { - 'scss': 'vue-style-loader!css-loader!sass-loader' - } - } + loader: 'vue-loader' +// , +// options: { +// loaders: { +// 'scss': 'vue-style-loader!css-loader!sass-loader' +// } +// } }, { test: /\.js$/, From 99b7d73a84ae8880874d18cf3a43a4319dfb73d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E6=AA=80?= <474481263@qq.com> Date: Tue, 19 Dec 2017 15:58:20 +0800 Subject: [PATCH 03/12] fixed 'gridWidth' bug --- dist/index.js | 19 +++++++++++++------ src/Grid.vue | 8 ++++---- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/dist/index.js b/dist/index.js index 7f88074..3aa078a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -196,6 +196,10 @@ return []; } }, + gridWidth: { + type: Number, + default: -1 + }, cellWidth: { type: Number, default: 80 @@ -242,6 +246,9 @@ } }, computed: { + gridResponsiveWidth: function() { + return this.gridWidth < 0 ? this.windowWidth : Math.min(this.windowWidth, this.gridWidth); + }, height: function() { return Math.ceil(this.items.length / this.rowCount) * this.cellHeight; }, @@ -251,11 +258,11 @@ }; }, rowCount: function() { - return Math.floor(this.windowWidth / this.cellWidth); + return Math.floor(this.gridResponsiveWidth / this.cellWidth); }, rowShift: function() { if (this.center) { - var contentWidth = this.items.length * this.cellWidth, rowShift = contentWidth < this.windowWidth ? (this.windowWidth - contentWidth) / 2 : this.windowWidth % this.cellWidth / 2; + var contentWidth = this.items.length * this.cellWidth, rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : this.gridResponsiveWidth % this.cellWidth / 2; return Math.floor(rowShift); } return 0; @@ -494,9 +501,9 @@ } }; }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\nbody {\n margin: 0;\n padding: 0;\n}\n.v-grid {\n display: block;\n position: relative;\n width: 100%;\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, ".v-grid{display:block;position:relative;width:100%}", "" ]); }, function(module, exports, __webpack_require__) { - exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v-grid-item-wrapper {\n display: block;\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n user-select: none;\n transform: translate3d(0px, 0px, 0px);\n z-index: 1;\n}\n.v-grid-item-wrapper.v-grid-item-animate {\n transition: transform 800ms ease;\n}\n", "" ]); + exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, ".v-grid-item-wrapper{display:block;position:absolute;box-sizing:border-box;left:0;top:0;user-select:none;transform:translateZ(0);z-index:1}.v-grid-item-animate{transition:transform .8s ease}", "" ]); }, function(module, exports, __webpack_require__) { __webpack_require__(14); var Component = __webpack_require__(1)(__webpack_require__(5), __webpack_require__(12), null, null); @@ -561,11 +568,11 @@ }, function(module, exports, __webpack_require__) { var content = __webpack_require__(8); "string" == typeof content && (content = [ [ module.i, content, "" ] ]), content.locals && (module.exports = content.locals); - __webpack_require__(2)("0a97df14", content, !0); + __webpack_require__(2)("105852af", content, !0); }, function(module, exports, __webpack_require__) { var content = __webpack_require__(9); "string" == typeof content && (content = [ [ module.i, content, "" ] ]), content.locals && (module.exports = content.locals); - __webpack_require__(2)("4be927ea", content, !0); + __webpack_require__(2)("38de0bc4", content, !0); }, function(module, exports) { module.exports = function(parentId, list) { for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) { diff --git a/src/Grid.vue b/src/Grid.vue index faccd57..81748f2 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -108,15 +108,15 @@ export default { }, rowCount () { - return Math.floor(this.windowWidth / this.cellWidth) + return Math.floor(this.gridResponsiveWidth / this.cellWidth) }, rowShift () { if (this.center) { let contentWidth = this.items.length * this.cellWidth - let rowShift = contentWidth < this.windowWidth - ? (this.windowWidth - contentWidth) / 2 - : (this.windowWidth % this.cellWidth) / 2 + let rowShift = contentWidth < this.gridResponsiveWidth + ? (this.gridResponsiveWidth - contentWidth) / 2 + : (this.gridResponsiveWidth % this.cellWidth) / 2 return Math.floor(rowShift) } From 0b4c35204002e2b149393eb5ab3d87c6fa951e96 Mon Sep 17 00:00:00 2001 From: Yev Vlasenko Date: Mon, 15 Jan 2018 14:54:21 +0000 Subject: [PATCH 04/12] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0662242..3d2b871 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -## Vue.js Grid +## Vue.js Grid ( Experiment ) [![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) From 664854f7bb6e0cda6761b36bf55e262136f70c5d Mon Sep 17 00:00:00 2001 From: eiamei Date: Sat, 20 Oct 2018 09:54:56 +0300 Subject: [PATCH 05/12] 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 06/12] 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 07/12] 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 08/12] 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 09/12] 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 10/12] 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 11/12] 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 12/12] 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)