diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..b534d94
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,13 @@
+## v1.2.6
+
+* Added `"auto"` value support for `height` property.
+
+* Added `scrollable` flag that allowes modal content to be scrolled when height is "auto".
+
+* Added CHANGELOG file.
+
+## v1.2.5
+
+* `height` and `width` props can be set using percents.
+
+* Better handling of `min-width` and `min-height`
\ No newline at end of file
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index 2a0d928..40bac7f 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -417,6 +417,10 @@ exports.default = {
type: [Boolean, String],
default: false
},
+ scrollable: {
+ type: Boolean,
+ default: false
+ },
reset: {
type: Boolean,
default: false
@@ -463,6 +467,10 @@ exports.default = {
default: 300,
validator: function validator(value) {
if (typeof value === 'string') {
+ if (value === 'auto') {
+ return true;
+ }
+
var height = (0, _parser2.default)(value);
return (height.type === '%' || height.type === 'px') && height.value > 0;
}
@@ -523,7 +531,6 @@ exports.default = {
if (value) {
this.visibility.overlay = true;
-
setTimeout(function () {
_this.visibility.modal = true;
_this.$nextTick(function () {
@@ -560,44 +567,74 @@ exports.default = {
window.addEventListener('resize', this.onWindowResize);
this.onWindowResize();
+
+ if (this.scrollable && !this.isAutoHeight) {
+ console.warn('Modal "' + this.name + '" has scrollable flag set to true ' + ('but height is not "auto" (' + this.height + ')'));
+ }
},
beforeDestroy: function beforeDestroy() {
window.removeEventListener('resize', this.onWindowResize);
},
computed: {
+ isAutoHeight: function isAutoHeight() {
+ return this.modal.heightType === 'auto';
+ },
position: function position() {
var window = this.window,
modal = this.modal,
- shift = this.shift;
+ shift = this.shift,
+ pivotX = this.pivotX,
+ pivotY = this.pivotY,
+ trueModalWidth = this.trueModalWidth,
+ trueModalHeight = this.trueModalHeight,
+ isAutoHeight = this.isAutoHeight;
- var maxLeft = window.width - this.trueModalWidth;
- var maxTop = window.height - this.trueModalHeight;
+ var maxLeft = window.width - trueModalWidth;
+ var maxTop = window.height - trueModalHeight;
- var left = shift.left + this.pivotX * (window.width - this.trueModalWidth);
- var top = shift.top + this.pivotY * (window.height - this.trueModalHeight);
+ var minTop = this.scrollable ? Number.NEGATIVE_INFINITY : 0;
+
+ var left = shift.left + pivotX * maxLeft;
+ var top = shift.top + pivotY * maxTop;
return {
left: (0, _util.inRange)(0, maxLeft, left),
- top: (0, _util.inRange)(0, maxTop, top)
+ top: (0, _util.inRange)(minTop, maxTop, top)
};
},
trueModalWidth: function trueModalWidth() {
var window = this.window,
- modal = this.modal;
+ modal = this.modal,
+ adaptive = this.adaptive,
+ minWidth = this.minWidth;
+
var value = modal.widthType === '%' ? window.width / 100 * modal.width : modal.width;
- return this.adaptive ? (0, _util.inRange)(this.minWidth, this.window.width, value) : value;
+ return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
},
trueModalHeight: function trueModalHeight() {
var window = this.window,
- modal = this.modal;
+ modal = this.modal,
+ isAutoHeight = this.isAutoHeight,
+ adaptive = this.adaptive;
+
var value = modal.heightType === '%' ? window.height / 100 * modal.height : modal.height;
- return this.adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+ if (isAutoHeight) {
+ return 0;
+ }
+
+ return adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+ },
+ overlayClass: function overlayClass() {
+ return {
+ 'v--modal-overlay': true,
+ 'scrollable': this.scrollable && this.isAutoHeight
+ };
},
modalClass: function modalClass() {
return ['v--modal-box', this.classes];
@@ -607,7 +644,7 @@ exports.default = {
top: this.position.top + 'px',
left: this.position.left + 'px',
width: this.trueModalWidth + 'px',
- height: this.trueModalHeight + 'px'
+ height: this.isAutoHeight ? 'auto' : this.trueModalHeight + 'px'
};
}
},
@@ -885,6 +922,13 @@ var types = [{
}];
var getType = function getType(value) {
+ if (value === 'auto') {
+ return {
+ type: value,
+ value: 0
+ };
+ }
+
for (var i = 0; i < types.length; i++) {
var type = types[i];
if (type.regexp.test(value)) {
@@ -923,7 +967,7 @@ exports = module.exports = __webpack_require__(2)();
// module
-exports.push([module.i, "\n.v--modal-overlay {\n position: fixed;\n left: 0;\n top: 0;\n width: 100vw;\n height: 100vh;\n background: rgba(0, 0, 0, 0.2);\n z-index: 999;\n opacity: 1;\n}\n.v--modal-overlay .v--modal-box {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n}\n.v--modal {\n background-color: white;\n text-align: left;\n border-radius: 3px;\n box-shadow: 0 20px 60px -2px rgba(27, 33, 58, .4);\n padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n width: 100vw;\n height: 100vh;\n margin: 0;\n left: 0;\n top: 0;\n}\n.v--modal-top-right {\n display: block;\n position: absolute;\n right: 0;\n top: 0;\n}\n.overlay-fade-enter-active, .overlay-fade-leave-active {\n transition: all 0.2s;\n}\n.overlay-fade-enter, .overlay-fade-leave-active {\n opacity: 0;\n}\n.nice-modal-fade-enter-active, .nice-modal-fade-leave-active {\n transition: all 0.4s;\n}\n.nice-modal-fade-enter, .nice-modal-fade-leave-active {\n opacity: 0;\n transform: translateY(-20px);\n}\n", "", {"version":3,"sources":["/./src/Modal.vue?17bbad80"],"names":[],"mappings":";AAwaA;EACA,gBAAA;EACA,QAAA;EACA,OAAA;EACA,aAAA;EACA,cAAA;EACA,+BAAA;EACA,aAAA;EACA,WAAA;CACA;AAEA;EACA,mBAAA;EACA,iBAAA;EACA,uBAAA;CACA;AAEA;EACA,wBAAA;EACA,iBAAA;EACA,mBAAA;EACA,kDAAA;EACA,WAAA;CACA;AAEA;EACA,aAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EACA,OAAA;CACA;AAEA;EACA,eAAA;EACA,mBAAA;EACA,SAAA;EACA,OAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;CACA;AAEA;EACA,qBAAA;CACA;AAEA;EACA,WAAA;EACA,6BAAA;CACA","file":"Modal.vue","sourcesContent":["\n \n \n
\n \n
\n
\n \n \n \n
\n \n
\n
\n \n
\n
\n \n \n \n
\n \n