Skip to content

updated vue3 to match vue2 so easier to diff #1407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Oct 11, 2020
Merged

updated vue3 to match vue2 so easier to diff #1407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
3 changes: 2 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
0 demo/vuejs.html → demo/vue2js.html
View file
Open in desktop
File renamed without changes.
51 changes: 5 additions & 46 deletions demo/vue3js.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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() {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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>