Merge pull request gridstack#1407 from adumesny/develop

adumesny · web-flow · commit b89aac99689e · 2020-10-11T08:55:47.000-07:00
updated vue3 to match vue2 so easier to diff
diff --git a/README.md b/README.md
@@ -176,7 +176,7 @@ grid.printCount();
 
 search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
 
-- vue.js: see [demo](https://github.com/gridstack/gridstack.js/blob/develop/demo/vuejs.html) 
+- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html) 
 - ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
 - AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
 - Angular8: [lb-gridstack](https://github.com/pfms84/lb-gridstack)
diff --git a/demo/index.html b/demo/index.html
@@ -18,7 +18,8 @@ <h1>Demos</h1>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="two.html">Two grids</a></li>
-    <li><a href="vuejs.html">Vue.js</a></li>
+    <li><a href="vuej2s.html">Vue2.js</a></li>
+    <li><a href="vuej3s.html">Vue3.js</a></li>
   </ul>
 </body>
 </html>
diff --git a/demo/vue2js.html b/demo/vue2js.html
diff --git a/demo/vue3js.html b/demo/vue3js.html
@@ -4,13 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gridstack.js Vue integration example</title>
+    <link rel="stylesheet" href="demo.css"/>
+    <script src="../dist/gridstack.all.js"></script>
   </head>
   <body>
-    <link
-      rel="stylesheet"
-      href="https://unpkg.com/gridstack@2.0.1/dist/gridstack.css"
-    />
-    <script src="https://unpkg.com/gridstack@2.0.1/dist/gridstack.all.js"></script>
     <main id="app">
       <h1>How to integrate GridStack.js with Vue.js</h1>
       <p>
@@ -28,12 +25,11 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
         >
         to let Vue deal with DOM rendering.
       </p>
-      <button type="button" @click="addNewWidget()">Add Widget</button> {{ info
-      }}
+      <button type="button" @click="addNewWidget()">Add Widget</button> {{ info }}
       <section class="grid-stack"></section>
     </main>
     <script type="module">
-      import { createApp } from "https://unpkg.com/vue@3.0.0/dist/vue.esm-browser.js";
+      import { createApp } from "https://cdn.jsdelivr.net/npm/vue@3.0.0/dist/vue.esm-browser.js";
 
       createApp({
         data() {
@@ -64,11 +60,7 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
         },
         mounted: function () {
           // Provides access to the GridStack instance across the Vue component.
-          this.grid = GridStack.init({
-            float: true,
-            cellHeight: "70px",
-            minRow: 1,
-          });
+          this.grid = GridStack.init({ float: true, cellHeight: '70px', minRow: 1 });
 
           // Use an arrow function so that `this` is bound to the Vue instance. Alternatively, use a custom Vue directive on the `.grid-stack` container element: https://vuejs.org/v2/guide/custom-directive.html
           this.grid.on("dragstop", (event, element) => {
@@ -94,38 +86,5 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
         },
       }).mount("#app");
     </script>
-    <style>
-      /* Optional styles for demos */
-      .btn-primary {
-        color: #fff;
-        background-color: #007bff;
-      }
-
-      .btn {
-        display: inline-block;
-        padding: 0.375rem 0.75rem;
-        line-height: 1.5;
-        border-radius: 0.25rem;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      h1 {
-        font-size: 2.5rem;
-        margin-bottom: 0.5rem;
-      }
-
-      .grid-stack {
-        background: #fafad2;
-      }
-
-      .grid-stack-item-content {
-        color: #2c3e50;
-        text-align: center;
-        background-color: #18bc9c;
-      }
-    </style>
   </body>
 </html>
