Added: initial "auto" for width and height props

Author: kirillmurashov

README.md

@@ -3,9 +3,9 @@
 
 <p align="center">
 
-  [![Latest Version on NPM](https://img.shields.io/npm/v/vue-drag-resize.svg?style=flat-square)](https://npmjs.com/package/vue-drag-resize)
-  [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
-  [![npm](https://img.shields.io/npm/dt/vue-drag-resize.svg?style=flat-square)](https://www.npmjs.com/package/vue-drag-resize)
+[![Latest Version on NPM](https://img.shields.io/npm/v/vue-drag-resize.svg?style=flat-square)](https://npmjs.com/package/vue-drag-resize)
+[![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
+[![npm](https://img.shields.io/npm/dt/vue-drag-resize.svg?style=flat-square)](https://www.npmjs.com/package/vue-drag-resize)
 </p>
 
 <p align="center">
@@ -31,7 +31,7 @@
 
 ### Features
 
-* A lightweight, no-dependency 
+* A lightweight, no-dependency
 * All props are reactive
 * Support touch events
 * Snap element to custom grid
@@ -43,14 +43,10 @@
 
 ## Install and basic usage
 
-For Vue2:
 ```bash
 $ npm i -s vue-drag-resize
 ```
-For Vue3:
-```bash
-$ npm i -s vue-drag-resize@next
-```
+
 
 Register the component:
 
@@ -112,7 +108,8 @@ Type: `Boolean`<br>
 Required: `false`<br>
 Default: `false`
 
-Determines whether the component should be active. 
+Determines whether the component should be active.
+
 确定组件是否应处于活动状态。
 
 ```html
@@ -124,10 +121,10 @@ Type: `Boolean`<br>
 Required: `false`<br>
 Default: `false`
 
-Disable behavior of the component by clicking on it and clicking outside the component's area (isActive: true / false).
+Disable behavior of the component by clicking on it and clicking outside the component's area (isActive: true / false).<br>
 If the prop is enabled, the component is oriented only to the specified.
 
-通过单击组件并单击组件区域外部来禁用组件的行为（isActive：true / false）。
+通过单击组件并单击组件区域外部来禁用组件的行为（isActive：true / false）。<br>
 如果启用了prop，则组件仅面向指定的。
 
 ```html
@@ -139,9 +136,10 @@ Type: `Number`<br>
 Required: `false`<br>
 Default: `0`
 
-Define the initial width of the parent element. If not specified it calculated automatically.
+Define the initial width of the parent element. If not specified it calculated automatically.<br>
 With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
-定义父元素的初始宽度。 如果未指定，则自动计算。
+
+定义父元素的初始宽度。 如果未指定，则自动计算。<br>
 使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。
 ```html
 <vue-drag-resize :parentW="2000">
@@ -152,8 +150,9 @@ Type: `Number`<br>
 Required: `false`<br>
 Default: `0`
 
-Define the initial height of the parent element. If not specified it calculated automatically.
+Define the initial height of the parent element. If not specified it calculated automatically.<br>
 With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
+
 定义父元素的初始高度。 如果未指定，则自动计算。
 使用此参数，您可以设置组件的边界区域，并在实时调整大小时使用它。
 
@@ -166,9 +165,10 @@ Type: `Number`<br>
 Required: `false`<br>
 Default: `1`
 
-Define the initial horizontal scale or the parent element. Same value in parent's transform: scale() css definition.
+Define the initial horizontal scale or the parent element. Same value in parent's transform: scale() css definition.<br>
 The drag/resize and the sticks' sizes will computed with this value.
-定义初始水平比例或父元素。父级的transform:scale（）css定义中的值相同。
+
+定义初始水平比例或父元素。父级的transform:scale（）css定义中的值相同。<br>
 拖动/调整大小和杆的大小将使用该值计算。
 ```html
 <vue-drag-resize :parentScaleX="0.5">
@@ -179,10 +179,10 @@ Type: `Number`<br>
 Required: `false`<br>
 Default: `1`
 
-Define the initial vertical scale or the parent element. Same value in parent's transform: scale() css definition.
+Define the initial vertical scale or the parent element. Same value in parent's transform: scale() css definition.<br>
 The drag/resize and the sticks' sizes will computed with this value.
-定义初始垂直比例或父元素。父级的transform:scale（）css定义中的值相同。
 
+定义初始垂直比例或父元素。父级的transform:scale（）css定义中的值相同。<br>
 拖动/调整大小和杆的大小将使用该值计算。
 
 ```html
@@ -195,6 +195,7 @@ Required: `false`<br>
 Default: `true`
 
 Determines whether the component should draggable.
+
 确定组件是否应可拖动。
 
 
@@ -208,6 +209,7 @@ Required: `false`<br>
 Default: `true`
 
 Determines whether the component should resize.
+
 确定组件是否应调整大小。
 
 
@@ -220,6 +222,7 @@ Required: `false`<br>
 Default: `false`
 
 Limits the scope of the component's change to its parent size.
+
 将组件更改的范围限制为其父大小。
 
 
@@ -259,13 +262,14 @@ Define the grid step size for the vertical axis. Both sides of the component (to
 ```html
 <vue-drag-resize :snapToGrid="true" :gridY="20">
 ```
-  
+
 #### aspectRatio
 Type: `Boolean`<br>
 Required: `false`<br>
 Default: `false`
 
 Determines whether the component should retain its proportions.
+
 确定组件是否应保持其比例。
 
 
@@ -274,11 +278,14 @@ Determines whether the component should retain its proportions.
 ```
 
 #### w
-Type: `Number`<br>
+Type: `Number|String`<br>
 Required: `false`<br>
 Default: `200`
 
-Define the initial width of the component.
+Define the initial width of the component.<br>
+The value can either be a number >= 0 or the string 'auto'. <br>
+If set to 'auto', the initial width value will be equal to the width of the content within the component.
+
 定义组件的初始宽度。
 
 
@@ -287,11 +294,14 @@ Define the initial width of the component.
 ```
 
 #### h
-Type: `Number`<br>
+Type: `Number|String`<br>
 Required: `false`<br>
 Default: `200`
 
-Define the initial height of the component.
+Define the initial height of the component.<br>
+The value can either be a number >= 0 or the string 'auto'. <br>
+If set to 'auto', the initial height value will be equal to the height of the content within the component.
+
 定义组件的初始高度。
 
 
@@ -306,6 +316,7 @@ Required: `false`<br>
 Default: `50`
 
 Define the minimal width of the component.
+
 定义组件的初始宽度。
 
 
@@ -320,6 +331,7 @@ Required: `false`<br>
 Default: `50`
 
 Define the minimal height of the component.
+
 定义组件的最小高度。
 
 
@@ -333,6 +345,7 @@ Required: `false`<br>
 Default: `0`
 
 Define the initial x position of the component.
+
 定义组件的初始X位置。
 
 
@@ -346,6 +359,7 @@ Required: `false`<br>
 Default: `0`
 
 Define the initial y position of the component.
+
 定义组件的初始Y位置。
 
 
@@ -359,6 +373,7 @@ Required: `false`<br>
 Default: `auto`
 
 Define the zIndex of the component.
+
 定义组件的zindex(层级)。
 
 ```html
@@ -382,6 +397,7 @@ Required: `false`<br>
 Default: `['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']`
 
 Define the array of handles to restrict the element resizing:
+
 定义句柄数组以限制元素大小调整：
 
 * `tl` - Top left
@@ -403,6 +419,7 @@ Required: `false`<br>
 Default: `both`
 
 Define the axis on which the element is draggable. Available values are `x`, `y`, `both` or `none`.
+
 定义元素可拖动的轴。 可用值为`x`，`y`，`both`或`none`。
 
 ```html
@@ -414,6 +431,7 @@ Type: `String`<br>
 Required: `false`
 
 Defines the selector that should be used to drag the component.
+
 定义应该用于拖动组件的选择器。
 
 ```html
@@ -425,6 +443,7 @@ Type: `String`<br>
 Required: `false`
 
 Defines a selector that should be used to prevent drag initialization.
+
 定义应该用于防止拖动初始化的选择器。
 
 ```html
@@ -454,6 +473,7 @@ Required: `false`<br>
 Parameters: `Original event handler`
 
 Called whenever the component gets clicked.
+
 单击组件时调用。
 
 ```html
@@ -466,6 +486,7 @@ Required: `false`<br>
 Parameters: `-`
 
 Called whenever the component gets clicked, in order to show handles.
+
 单击组件时调用，以显示句柄。
 
 ```html
@@ -478,6 +499,7 @@ Required: `false`<br>
 Parameters: `-`
 
 Called whenever the user clicks anywhere outside the component, in order to deactivate it.
+
 每当用户单击组件外部的任何位置时调用，以便将其停用。
 
 
@@ -500,6 +522,7 @@ Parameters: `object`
 ```
 
 Called whenever the component gets resized.
+
 每当组件调整大小时调用。
 
 
@@ -521,6 +544,7 @@ Parameters: `object`
 ```
 
 Called whenever the component stops getting resized.
+
 每当组件停止调整大小时调用。
 
 
@@ -542,6 +566,7 @@ Parameters: `object`
 ```
 
 Called whenever the component gets dragged.
+
 每当拖动组件时调用。
 
 
@@ -564,6 +589,7 @@ Parameters: `object`
 
 
 Called whenever the component stops getting dragged.
+
 每当组件停止拖动时调用。
 
 
@@ -586,4 +612,4 @@ npm run build
 
 ## License
 
-[MIT license](LICENSE)
+[MIT license](LICENSE)

src/components/vue-drag-resize.css

@@ -39,4 +39,8 @@
 }
 .vdr-stick.not-resizable{
     display: none;
+}
+.content-container{
+    display: block;
+    position: relative;
 }

src/components/vue-drag-resize.html

@@ -1,9 +1,11 @@
-<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>
+    <div :style="sizeStyle" class="content-container" ref="container2">
+        <slot></slot>
+    </div>
     <div
             v-for="stick in sticks"
             class="vdr-stick"