diff --git a/src/assets/menu/menu.json b/src/assets/menu/menu.json index 9418e9fa0..a91fecb0c 100644 --- a/src/assets/menu/menu.json +++ b/src/assets/menu/menu.json @@ -371,6 +371,10 @@ "name": "Scroll", "to": "/datatable/scroll" }, + { + "name": "VirtualScroll", + "to": "/datatable/virtualscroll" + }, { "name": "FlexScroll", "to": "/datatable/flexscroll" diff --git a/src/router/index.js b/src/router/index.js index c025562f4..2d482272f 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -287,6 +287,11 @@ const routes = [ name: 'datatableflexscroll', component: () => import('../views/datatable/DataTableFlexScrollDemo.vue') }, + { + path: '/datatable/virtualscroll', + name: 'datatablevirtualscroll', + component: () => import('../views/datatable/DataTableVirtualScrollDemo.vue') + }, { path: '/datatable/style', name: 'datatablestyle', @@ -868,4 +873,4 @@ const router = createRouter({ routes }); -export default router; \ No newline at end of file +export default router; diff --git a/src/service/CarService.js b/src/service/CarService.js new file mode 100644 index 000000000..72bdc24b1 --- /dev/null +++ b/src/service/CarService.js @@ -0,0 +1,39 @@ +export default class CarService { + + brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma']; + + colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow']; + + generateCar(id) { + return { + id, + vin: this.generateVin(), + brand: this.generateBrand(), + color: this.generateColor(), + year: this.generateYear() + } + } + + generateVin() { + let text = ""; + let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + for (let i = 0; i < 5; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + + return text; + } + + generateBrand() { + return this.brands[Math.floor(Math.random() * Math.floor(10))]; + } + + generateColor() { + return this.colors[Math.floor(Math.random() * Math.floor(7))]; + } + + generateYear() { + return 2000 + Math.floor(Math.random() * Math.floor(19)); + } +} diff --git a/src/views/datatable/DataTableVirtualScrollDemo.vue b/src/views/datatable/DataTableVirtualScrollDemo.vue new file mode 100644 index 000000000..377c6d39e --- /dev/null +++ b/src/views/datatable/DataTableVirtualScrollDemo.vue @@ -0,0 +1,435 @@ + + + diff --git a/src/views/liveeditor/LiveEditorData.js b/src/views/liveeditor/LiveEditorData.js index c15894d23..b8ce96018 100644 --- a/src/views/liveeditor/LiveEditorData.js +++ b/src/views/liveeditor/LiveEditorData.js @@ -85,6 +85,48 @@ export default class ProductService { } } + `, + 'CarService': ` +export default class CarService { + + brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma']; + + colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow']; + + generateCar(id) { + return { + id, + vin: this.generateVin(), + brand: this.generateBrand(), + color: this.generateColor(), + year: this.generateYear() + } + } + + generateVin() { + let text = ""; + let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + for (let i = 0; i < 5; i++) { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + + return text; + } + + generateBrand() { + return this.brands[Math.floor(Math.random() * Math.floor(10))]; + } + + generateColor() { + return this.colors[Math.floor(Math.random() * Math.floor(7))]; + } + + generateYear() { + return 2000 + Math.floor(Math.random() * Math.floor(19)); + } +} + ` } diff --git a/src/views/virtualscroller/VirtualScrollerDemo.vue b/src/views/virtualscroller/VirtualScrollerDemo.vue index 51d5b3d02..9681a2252 100644 --- a/src/views/virtualscroller/VirtualScrollerDemo.vue +++ b/src/views/virtualscroller/VirtualScrollerDemo.vue @@ -41,7 +41,7 @@ - + @@ -109,7 +109,7 @@
Lazy
- + @@ -180,12 +180,12 @@ export default { if (this.loadLazyTimeout) { clearTimeout(this.loadLazyTimeout); } - + //imitate delay of a backend call this.loadLazyTimeout = setTimeout(() => { const { first, last } = event; const lazyItems = [...this.lazyItems]; - + for (let i = first; i < last; i++) { lazyItems[i] = `Item #${i}`; } @@ -230,7 +230,7 @@ export default { display: flex; flex-direction: row; } - + .scroll-item { writing-mode: vertical-lr; } @@ -240,4 +240,4 @@ export default { display: block; } } - \ No newline at end of file +