Added: initial "auto" for width and height props

Author: kirillmurashov

src/component/vue-drag-resize.css

@@ -1,6 +1,7 @@
 .vdr {
     position: absolute;
     box-sizing: border-box;
+    overflow: visible;
 }
 .vdr.active:before{
     content: '';
@@ -39,4 +40,9 @@
 }
 .vdr-stick.not-resizable{
     display: none;
+}
+
+.content-container{
+    display: block;
+    position: relative;
 }

src/component/vue-drag-resize.html

@@ -1,9 +1,14 @@
-<div class="vdr" :style="style"
+<div class="vdr"
+     :style="positionStyle"
      :class="`${(active || isActive) ? 'active' : 'inactive'} ${contentClass ? contentClass: ''}`"
      @mousedown="bodyDown($event)"
      @touchstart="bodyDown($event)"
-     @touchend="up($event)">
-    <slot></slot>
+     @touchend="up($event)"
+     ref="container"
+     tabindex="0">
+    <div :style="sizeStyle" class="content-container" ref="container2">
+        <slot></slot>
+    </div>
     <div
             v-for="stick in sticks"
             class="vdr-stick"

src/component/vue-drag-resize.js

@@ -50,6 +50,9 @@ export default {
         isResizable: {
             type: Boolean, default: true,
         },
+        focusable: {
+            type: Boolean, default: false,
+        },
         aspectRatio: {
             type: Boolean, default: false,
         },
@@ -63,14 +66,14 @@ export default {
             type: Number,
             default: 50,
             validator(val) {
-                return val > 0;
+                return val >= 0;
             },
         },
         gridY: {
             type: Number,
             default: 50,
             validator(val) {
-                return val > 0;
+                return val >= 0;
             },
         },
         parentW: {
@@ -88,31 +91,31 @@ export default {
             },
         },
         w: {
-            type: Number,
+            type: [String, Number],
             default: 200,
             validator(val) {
-                return val > 0;
+                return (typeof val === 'string') ? val === 'auto' : val >= 0;
             },
         },
         h: {
-            type: Number,
+            type: [String, Number],
             default: 200,
             validator(val) {
-                return val > 0;
+                return (typeof val === 'string') ? val === 'auto' : val >= 0;
             },
         },
         minw: {
             type: Number,
             default: 50,
             validator(val) {
-                return val > 0;
+                return val >= 0;
             },
         },
         minh: {
             type: Number,
             default: 50,
             validator(val) {
-                return val > 0;
+                return val >= 0;
             },
         },
         x: {
@@ -166,6 +169,7 @@ export default {
 
     data() {
         return {
+            fixAspectRatio: null,
             active: null,
             zIndex: null,
             parentWidth: null,
@@ -199,8 +203,8 @@ export default {
 
         this.left = this.x;
         this.top = this.y;
-        this.right = this.parentWidth - this.w - this.left;
-        this.bottom = this.parentHeight - this.h - this.top;
+        this.right = this.parentWidth - (this.w === 'auto' ? this.$refs.container.scrollWidth : this.w) - this.left;
+        this.bottom = this.parentHeight - (this.h === 'auto' ? this.$refs.container.scrollHeight : this.h) - this.top;
 
         this.domEvents = new Map([
             ['mousemove', this.move],
@@ -679,16 +683,21 @@ export default {
     },
 
     computed: {
-        style() {
+        positionStyle() {
             return {
                 top: this.top + 'px',
                 left: this.left + 'px',
-                width: this.width + 'px',
-                height: this.height + 'px',
                 zIndex: this.zIndex,
             };
         },
 
+        sizeStyle(){
+            return {
+                width: this.width + 'px',
+                height: this.height + 'px'
+            };
+        },
+
         vdrStick() {
             return (stick) => {
                 const stickStyle = {