vue3-responsive-dash

Vue 3 version of vue-responsive-dash.

A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

🤟🏻 New Features and changes in 0.1.7

You can use placeholderColor and placeholderOpacity on Layout component! This props change placeholder color and opacity.

Changes in 0.1.4

You can use alignContainer on Layout component! This prop make items align container so there is no "padding".

Changes in 0.1.2

You can use aspectRatio on Layout component!

Changes in 0.1.1

For using layout you can use function useDashboard!!! It provides adding and deleting functionality. Check out the usage example below!

BreakpointWidth is now the last size at which the layout is visible.

Item schema has been changed! Now it has v-model functionality and settings binding. Check out the usage example below!

⚙️ Installation

1$ npm install vue3-responsive-dash

📄 Documents

Link

🚀 How to use

1<script setup lang="ts">
2import {
3  Dashboard,
4  DashLayout,
5  DashItem,
6  DashboardLayout,
7  useDashboard,
8} from "vue3-responsive-dash";
9import { ref } from "vue";
10
11const LAYOUTS: DashboardLayout[] = [
12  {
13    breakpoint: "cols10",
14    numberOfCols: 10,
15    breakpointWidth: 1920,
16    items: [
17      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
18      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
19      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
20      { id: "4", parameters: { x: 5, y: 0, width: 1, height: 1 } },
21      { id: "5", parameters: { x: 6, y: 0, width: 1, height: 1 } },
22      { id: "6", parameters: { x: 7, y: 0, width: 1, height: 1 } },
23      { id: "7", parameters: { x: 8, y: 0, width: 1, height: 1 } },
24      { id: "8", parameters: { x: 9, y: 0, width: 1, height: 1 } },
25    ],
26  },
27  {
28    breakpoint: "cols9",
29    numberOfCols: 9,
30    breakpointWidth: 1730,
31    items: [
32      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
33      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
34      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
35      { id: "4", parameters: { x: 5, y: 0, width: 1, height: 1 } },
36      { id: "5", parameters: { x: 6, y: 0, width: 1, height: 1 } },
37      { id: "6", parameters: { x: 7, y: 0, width: 1, height: 1 } },
38      { id: "7", parameters: { x: 8, y: 0, width: 1, height: 1 } },
39      { id: "8", parameters: { x: 2, y: 1, width: 1, height: 1 } },
40    ],
41  },
42  {
43    breakpoint: "cols8",
44    numberOfCols: 8,
45    breakpointWidth: 1540,
46    items: [
47      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
48      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
49      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
50      { id: "4", parameters: { x: 5, y: 0, width: 1, height: 1 } },
51      { id: "5", parameters: { x: 6, y: 0, width: 1, height: 1 } },
52      { id: "6", parameters: { x: 7, y: 0, width: 1, height: 1 } },
53      { id: "7", parameters: { x: 2, y: 1, width: 1, height: 1 } },
54      { id: "8", parameters: { x: 3, y: 1, width: 1, height: 1 } },
55    ],
56  },
57  {
58    breakpoint: "cols7",
59    numberOfCols: 7,
60    breakpointWidth: 1350,
61    items: [
62      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
63      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
64      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
65      { id: "4", parameters: { x: 5, y: 0, width: 1, height: 1 } },
66      { id: "5", parameters: { x: 6, y: 0, width: 1, height: 1 } },
67      { id: "6", parameters: { x: 2, y: 1, width: 1, height: 1 } },
68      { id: "7", parameters: { x: 3, y: 1, width: 1, height: 1 } },
69      { id: "8", parameters: { x: 4, y: 1, width: 1, height: 1 } },
70    ],
71  },
72  {
73    breakpoint: "cols6",
74    numberOfCols: 6,
75    breakpointWidth: 1160,
76    items: [
77      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
78      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
79      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
80      { id: "4", parameters: { x: 5, y: 0, width: 1, height: 1 } },
81      { id: "5", parameters: { x: 2, y: 1, width: 1, height: 1 } },
82      { id: "6", parameters: { x: 3, y: 1, width: 1, height: 1 } },
83      { id: "7", parameters: { x: 4, y: 1, width: 1, height: 1 } },
84      { id: "8", parameters: { x: 5, y: 1, width: 1, height: 1 } },
85    ],
86  },
87  {
88    breakpoint: "cols5",
89    numberOfCols: 5,
90    breakpointWidth: 970,
91    items: [
92      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
93      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
94      { id: "3", parameters: { x: 4, y: 0, width: 1, height: 1 } },
95      { id: "4", parameters: { x: 2, y: 1, width: 1, height: 1 } },
96      { id: "5", parameters: { x: 3, y: 1, width: 1, height: 1 } },
97      { id: "6", parameters: { x: 4, y: 1, width: 1, height: 1 } },
98      { id: "7", parameters: { x: 0, y: 2, width: 1, height: 1 } },
99      { id: "8", parameters: { x: 1, y: 2, width: 1, height: 1 } },
100    ],
101  },
102  {
103    breakpoint: "cols4",
104    numberOfCols: 4,
105    breakpointWidth: 780,
106    items: [
107      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
108      { id: "2", parameters: { x: 2, y: 0, width: 2, height: 1 } },
109      { id: "3", parameters: { x: 2, y: 1, width: 1, height: 1 } },
110      { id: "4", parameters: { x: 3, y: 1, width: 1, height: 1 } },
111      { id: "5", parameters: { x: 0, y: 2, width: 1, height: 1 } },
112      { id: "6", parameters: { x: 1, y: 2, width: 1, height: 1 } },
113      { id: "7", parameters: { x: 2, y: 2, width: 1, height: 1 } },
114      { id: "8", parameters: { x: 3, y: 2, width: 1, height: 1 } },
115    ],
116  },
117  {
118    breakpoint: "cols3",
119    numberOfCols: 3,
120    breakpointWidth: 590,
121    items: [
122      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
123      { id: "2", parameters: { x: 0, y: 2, width: 2, height: 1 } },
124      { id: "3", parameters: { x: 2, y: 0, width: 1, height: 1 } },
125      { id: "4", parameters: { x: 2, y: 1, width: 1, height: 1 } },
126      { id: "5", parameters: { x: 2, y: 2, width: 1, height: 1 } },
127      { id: "6", parameters: { x: 0, y: 3, width: 1, height: 1 } },
128      { id: "7", parameters: { x: 1, y: 3, width: 1, height: 1 } },
129      { id: "8", parameters: { x: 2, y: 3, width: 1, height: 1 } },
130    ],
131  },
132  {
133    breakpoint: "cols2",
134    numberOfCols: 2,
135    breakpointWidth: 400,
136    items: [
137      { id: "1", parameters: { x: 0, y: 0, width: 2, height: 2 } },
138      { id: "2", parameters: { x: 0, y: 2, width: 2, height: 1 } },
139      { id: "3", parameters: { x: 0, y: 3, width: 1, height: 1 } },
140      { id: "4", parameters: { x: 1, y: 3, width: 1, height: 1 } },
141      { id: "5", parameters: { x: 0, y: 4, width: 1, height: 1 } },
142      { id: "6", parameters: { x: 1, y: 4, width: 1, height: 1 } },
143      { id: "7", parameters: { x: 0, y: 5, width: 1, height: 1 } },
144      { id: "8", parameters: { x: 1, y: 5, width: 1, height: 1 } },
145    ],
146  },
147];
148
149const draggable = ref(false);
150
151const { layouts, addItem, removeItem } = useDashboard(LAYOUTS);
152
153// Adding item with only width and height to all layouts
154// addItem({
155//   id: "9",
156//   parameters: { width: 2, height: 2 },
157// });
158
159// Adding item with only width and height to list of layouts
160// addItem(
161//   {
162//     id: "10",
163//     parameters: { width: 2, height: 2 },
164//   },
165//   ["cols5", "cols6"]
166// );
167
168// Adding item with additional settings
169// addItem({
170//   id: "11",
171//   parameters: { width: 2, height: 2 },
172//   settings: { draggable: false, resizable: true },
173// });
174
175// Adding item with static position
176// (use carefully. If it collides, it will move upward until it finds a spot)
177// addItem({
178//   id: "12",
179//   parameters: { width: 2, height: 2, x: 1, y: 2 },
180// });
181
182// Remove item from all layouts
183// removeItem("4");
184
185// Remove item from list of layouts
186// removeItem("5", ["cols5", "cols6"]);
187</script>
188
189<template>
190  <dashboard id="dashExample">
191    <dash-layout
192      v-for="layout in layouts"
193      v-bind="layout"
194      :key="layout.breakpoint"
195      :margin="{ x: 20, y: 20 }"
196    >
197      <dash-item
198        v-for="item in layout.items"
199        v-model="item.parameters"
200        :draggable="draggable"
201        :resizable="false"
202        :id="item.id"
203        :key="item.id"
204        v-bind="item?.settings"
205      >
206        <div class="content">
207          {{ item.id }}
208        </div>
209      </dash-item>
210    </dash-layout>
211  </dashboard>
212  <div class="actions">
213    <button @click="draggable = !draggable">Set Draggable</button>
214    <button
215      @click="
216        () => {
217          console.log(layouts);
218        }
219      "
220    >
221      Print Layouts
222    </button>
223  </div>
224</template>
225
226<style>
227* {
228  margin: 0;
229  padding: 0;
230  box-sizing: border-box;
231}
232
233#app {
234  display: flex;
235  flex-direction: column;
236  height: 100vh;
237  height: 100svh;
238}
239
240.actions {
241  display: flex;
242  align-items: center;
243  gap: 1rem;
244  padding: 0 1.25rem 1.25rem 1.25rem;
245}
246
247.actions button {
248  padding: 0.5rem 1rem;
249  font-size: 1rem;
250  border-radius: 0.25rem;
251  cursor: pointer;
252}
253
254.actions :first-child {
255  border: 0.125rem solid #4268b9;
256  background-color: #4268b93d;
257}
258
259.actions :last-child {
260  border: 0.125rem solid #b98942;
261  background-color: #b989423d;
262}
263
264#dashExample {
265  height: fit-content;
266  overflow-y: scroll;
267  overflow-x: hidden;
268  scrollbar-width: thin;
269  scrollbar-color: #dee2e6 transparent;
270  flex: 1;
271}
272
273@media (pointer: fine) {
274  #dashExample::-webkit-scrollbar {
275    width: 8px;
276  }
277
278  #dashExample::-webkit-scrollbar-thumb {
279    background: #dee2e6;
280    border-radius: 4px;
281  }
282
283  #dashExample::-webkit-scrollbar-thumb:hover {
284    background: #babdc0;
285  }
286  #dashExample::-webkit-scrollbar-thumb:active {
287    background: #585858;
288  }
289}
290
291.content {
292  display: flex;
293  align-items: center;
294  justify-content: center;
295  font-size: 1.5rem;
296  font-weight: bold;
297  height: 100%;
298  width: 100%;
299  border: 2px solid #42b983;
300  border-radius: 0.5rem;
301  background-color: #42b9833d;
302}
303
304.draggable:nth-of-type(2n + 1) {
305  animation: jiggle-first 0.3s infinite alternate;
306}
307.draggable:nth-of-type(2n) {
308  animation: jiggle-second 0.3s infinite alternate;
309}
310
311.dragging {
312  animation: none !important;
313}
314
315@keyframes jiggle-first {
316  0% {
317    transform: rotate(-0.5deg);
318    animation-timing-function: ease-in;
319  }
320
321  50% {
322    transform: rotate(1deg);
323    animation-timing-function: ease-out;
324  }
325}
326
327@keyframes jiggle-second {
328  0% {
329    transform: rotate(0.5deg);
330    animation-timing-function: ease-in;
331  }
332
333  50% {
334    transform: rotate(-1deg);
335    animation-timing-function: ease-out;
336  }
337}
338</style>

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to vue3-responsive-dash or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

⚙️ Development

npm run serve

Runs the app in the development mode.
Open http://localhost:5000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.