bensladden · bensladden · Mar 28, 2020 · Mar 28, 2020
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -58,13 +58,6 @@ module.exports = {
   },
   plugins: [
     "@vuepress/last-updated",
-    [
-      "vuepress-plugin-typescript",
-      {
-        tsLoaderOptions: {
-          // All options of ts-loader
-        }
-      }
-    ]
+    "vuepress-plugin-typescript",
   ]
 };
diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html
diff --git a/docs/.vuepress/dist/api/index.html b/docs/.vuepress/dist/api/index.html
@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>API | Vue-Responsive-Dash Docs</title>
     <meta name="description" content="Welcome to Vue-Responsive-Dash Docs">
-    <meta name="generator" content="VuePress 1.3.1">
+    <meta name="generator" content="VuePress 1.4.0">
 
 
-    <link rel="preload" href="/assets/css/0.styles.325b6a73.css" as="style"><link rel="preload" href="/assets/js/app.51d1bdda.js" as="script"><link rel="preload" href="/assets/js/2.39c2587b.js" as="script"><link rel="preload" href="/assets/js/11.46cedb55.js" as="script"><link rel="prefetch" href="/assets/js/10.359c0fb2.js"><link rel="prefetch" href="/assets/js/12.a237bbb8.js"><link rel="prefetch" href="/assets/js/13.96197d16.js"><link rel="prefetch" href="/assets/js/14.8e6be213.js"><link rel="prefetch" href="/assets/js/15.c8c5a647.js"><link rel="prefetch" href="/assets/js/16.3f497874.js"><link rel="prefetch" href="/assets/js/3.d89887d6.js"><link rel="prefetch" href="/assets/js/4.daf07c63.js"><link rel="prefetch" href="/assets/js/5.20497327.js"><link rel="prefetch" href="/assets/js/6.c591c042.js"><link rel="prefetch" href="/assets/js/7.e0c80cb7.js"><link rel="prefetch" href="/assets/js/8.54f4a74b.js"><link rel="prefetch" href="/assets/js/9.ad38043d.js">
-    <link rel="stylesheet" href="/assets/css/0.styles.325b6a73.css">
+    <link rel="preload" href="/assets/css/0.styles.d84f7517.css" as="style"><link rel="preload" href="/assets/js/app.989d8722.js" as="script"><link rel="preload" href="/assets/js/2.265a1964.js" as="script"><link rel="preload" href="/assets/js/11.bc2d2fa5.js" as="script"><link rel="prefetch" href="/assets/js/10.980e523c.js"><link rel="prefetch" href="/assets/js/12.6b417632.js"><link rel="prefetch" href="/assets/js/13.dabc1f39.js"><link rel="prefetch" href="/assets/js/14.8e508e36.js"><link rel="prefetch" href="/assets/js/15.cabe38bd.js"><link rel="prefetch" href="/assets/js/16.3f497874.js"><link rel="prefetch" href="/assets/js/3.4c768573.js"><link rel="prefetch" href="/assets/js/4.7655e5ba.js"><link rel="prefetch" href="/assets/js/5.63ab47f6.js"><link rel="prefetch" href="/assets/js/6.d62d6db3.js"><link rel="prefetch" href="/assets/js/7.e2cc2cb0.js"><link rel="prefetch" href="/assets/js/8.98bab720.js"><link rel="prefetch" href="/assets/js/9.c390235a.js">
+    <link rel="stylesheet" href="/assets/css/0.styles.d84f7517.css">
   </head>
   <body>
     <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">Vue-Responsive-Dash Docs</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Guide" class="dropdown-title"><span class="title">Guide</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/#getting-started" class="nav-link">
@@ -80,6 +80,6 @@
 From this the layouts can then change to best suit the screen size.</p> <h3 id="props"><a href="#props" class="header-anchor">#</a> Props</h3> <table><thead><tr><th>Name</th> <th>Type</th> <th>Required</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td>id</td> <td><code>String | Number</code></td> <td>yes</td> <td></td> <td>UUID for the dashboard</td></tr></tbody></table> <h3 id="events"><a href="#events" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>currentBreakpointUpdated</td> <td>returns the active layout breakpoint</td></tr></tbody></table> <h2 id="dash-layout"><a href="#dash-layout" class="header-anchor">#</a> Dash Layout</h2> <p>Each Dash Layout contains an name, numberOfCols and optionally a breakpointWidth.
 Note that only one layout should have the breakpointWidth <code>undefined</code>. This layout is the biggest. The smallest should have a breakpointWidth of <code>0</code>.</p> <h3 id="props-2"><a href="#props-2" class="header-anchor">#</a> Props</h3> <table><thead><tr><th>Name</th> <th>Type</th> <th>Required</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td>breakpoint</td> <td><code>string</code></td> <td>yes</td> <td></td> <td>typically describing the breakpoint Size (i.e. xl, lg etc)</td></tr> <tr><td>numberOfCols</td> <td><code>number</code></td> <td>no</td> <td><code>12</code></td> <td>Number of columns allowed</td></tr> <tr><td>margin</td> <td><code>object</code></td> <td>no</td> <td><code>{ x:10, y:10 }</code></td> <td>Distance in pixels between DashItems</td></tr> <tr><td>breakpointWidth</td> <td><code>number</code></td> <td>no</td> <td></td> <td>Width used to determine which layout is most appropriate for the screen size</td></tr> <tr><td>useCssTransforms</td> <td><code>boolean</code></td> <td>no</td> <td><code>false</code></td> <td>Use translate3d instead of direct top left css properties</td></tr> <tr><td>compact</td> <td><code>boolean</code></td> <td>no</td> <td><code>true</code></td> <td>Automatically move items up if there is space available</td></tr></tbody></table> <h2 id="dash-item"><a href="#dash-item" class="header-anchor">#</a> Dash Item</h2> <p>The dash item is responsible for displaying the items content (via slot) and also for dragging and resizing around the layout.
 All props can be synced back to the item being passed via the .sync modifier (see examples)</p> <p>There are also slots around the item for custom drag icons (again see examples)</p> <h3 id="props-3"><a href="#props-3" class="header-anchor">#</a> Props</h3> <table><thead><tr><th>Name</th> <th>Type</th> <th>Required</th> <th>Default</th> <th>Description</th></tr></thead> <tbody><tr><td>id</td> <td><code>[Number, String]</code></td> <td>true</td> <td></td> <td>UUID for the item</td></tr> <tr><td>x</td> <td><code>Number</code></td> <td>false</td> <td><code>0</code></td> <td></td></tr> <tr><td>y</td> <td><code>Number</code></td> <td>false</td> <td><code>0</code></td> <td></td></tr> <tr><td>width</td> <td><code>Number</code></td> <td>false</td> <td><code>1</code></td> <td>Width (in col units)</td></tr> <tr><td>height</td> <td><code>Number</code></td> <td>false</td> <td><code>1</code></td> <td>Height (in row units)</td></tr> <tr><td>draggable</td> <td><code>Boolean</code></td> <td>false</td> <td><code>true</code></td> <td>If the item can be dragged</td></tr> <tr><td>resizable</td> <td><code>Boolean</code></td> <td>false</td> <td><code>true</code></td> <td>If the item can be resized</td></tr> <tr><td>resizeEdges</td> <td><code>String</code></td> <td>false</td> <td><code>&quot;bottom right&quot;</code></td> <td>The edges it can be resized (experimental for all options apart from bottom right)</td></tr> <tr><td>resizeHandleSize</td> <td><code>Number</code></td> <td>false</td> <td><code>8</code></td> <td>The area where resize can be selected on the item</td></tr> <tr><td>draggableZIndex</td> <td><code>Number</code></td> <td>false</td> <td><code>1</code></td> <td>The zIndex applied to the draggable area to make sure it is above the items in the slot</td></tr> <tr><td>resizableZIndex</td> <td><code>Number</code></td> <td>false</td> <td><code>1</code></td> <td>The zIndex applied to each resizeable area to make sure it is above the items in the main slot</td></tr></tbody></table> <h3 id="events-2"><a href="#events-2" class="header-anchor">#</a> Events</h3> <table><thead><tr><th>Name</th> <th>Description</th></tr></thead> <tbody><tr><td>moveStart</td> <td>Fires initially when an item is being moved (dragged) by human interaction</td></tr> <tr><td>moving</td> <td>Fires while an item is being moved (dragged)</td></tr> <tr><td>moveEnd</td> <td>Fires when the move is complete</td></tr> <tr><td>resizeStart</td> <td>Fires initially when an item size is changing (via human interaction)</td></tr> <tr><td>resizing</td> <td>Fires while the item is being resized</td></tr> <tr><td>resizeEnd</td> <td>Fires once resizing is complete</td></tr> <tr><td>hoverStart</td> <td>Fires when mouse begins to hover over DashItem</td></tr> <tr><td>hoverEnd</td> <td>Fires when mouse moves our of DashItem</td></tr></tbody></table> <h3 id="resizing-slots"><a href="#resizing-slots" class="header-anchor">#</a> Resizing Slots</h3> <table><thead><tr><th>Names</th></tr></thead> <tbody><tr><td>resizeTop</td></tr> <tr><td>resizeBottom</td></tr> <tr><td>resizeBottomRight</td></tr> <tr><td>resizeBottomLeft</td></tr> <tr><td>resizeTopLeft</td></tr> <tr><td>resizeTopRight</td></tr></tbody></table></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/24/2020, 8:20:26 AM</span></div></footer> <!----> </main></div><div class="global-ui"></div></div>
-    <script src="/assets/js/app.51d1bdda.js" defer></script><script src="/assets/js/2.39c2587b.js" defer></script><script src="/assets/js/11.46cedb55.js" defer></script>
+    <script src="/assets/js/app.989d8722.js" defer></script><script src="/assets/js/2.265a1964.js" defer></script><script src="/assets/js/11.bc2d2fa5.js" defer></script>
   </body>
 </html>
diff --git a/docs/.vuepress/dist/assets/css/0.styles.325b6a73.css b/docs/.vuepress/dist/assets/css/0.styles.325b6a73.css
diff --git a/docs/.vuepress/dist/assets/css/0.styles.d84f7517.css b/docs/.vuepress/dist/assets/css/0.styles.d84f7517.css
diff --git a/docs/.vuepress/dist/assets/js/10.359c0fb2.js → docs/.vuepress/dist/assets/js/10.980e523c.js b/docs/.vuepress/dist/assets/js/10.359c0fb2.js → docs/.vuepress/dist/assets/js/10.980e523c.js