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) }