diff --git a/README.md b/README.md index 0662242..4f0b873 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,17 @@ -## Vue.js Grid +## 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) #### 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 +64,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 +102,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. 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", diff --git a/dist/index.js b/dist/index.js index 7f88074..7977b19 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,8 +246,11 @@ } }, 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; + return Math.ceil(this.list.length / this.rowCount) * this.cellHeight; }, style: function() { return { @@ -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.list.length * this.cellWidth, rowShift = contentWidth < this.gridResponsiveWidth ? (this.gridResponsiveWidth - contentWidth) / 2 : this.gridResponsiveWidth % this.cellWidth / 2; return Math.floor(rowShift); } return 0; @@ -484,19 +491,22 @@ 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); } } }; }, 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); @@ -551,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); @@ -561,11 +571,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/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" ], diff --git a/src/Grid.vue b/src/Grid.vue index 3607f1d..647d9bc 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) }"> @@ -39,6 +39,10 @@ export default { type: Array, default: () => [] }, + gridWidth: { + type: Number, + default: -1 + }, cellWidth: { type: Number, default: 80, @@ -84,8 +88,16 @@ 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) * + return Math.ceil(this.list.length / this.rowCount) * this.cellHeight }, @@ -96,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 contentWidth = this.list.length * this.cellWidth + let rowShift = contentWidth < this.gridResponsiveWidth + ? (this.gridResponsiveWidth - contentWidth) / 2 + : (this.gridResponsiveWidth % this.cellWidth) / 2 return Math.floor(rowShift) } @@ -224,12 +236,7 @@ export default { } } - 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 + } } } } 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$/,