From 2f353f2c19bec94c316d73c58187be7bda91f9e6 Mon Sep 17 00:00:00 2001 From: tugcekucukoglu Date: Wed, 21 Feb 2024 10:31:43 +0300 Subject: [PATCH] Deferred context added --- components/doc/codeeditor/services.js | 2 +- doc/galleria/AdvancedDoc.vue | 102 +++++++++--------- doc/galleria/AutoPlayDoc.vue | 28 ++--- doc/galleria/BasicDoc.vue | 28 ++--- doc/galleria/CaptionDoc.vue | 36 ++++--- doc/galleria/ControlledDoc.vue | 36 ++++--- doc/galleria/ResponsiveDoc.vue | 32 +++--- doc/galleria/ThumbnailDoc.vue | 42 ++++---- doc/galleria/fullscreen/CustomContentDoc.vue | 56 +++++----- doc/galleria/fullscreen/WithThumbnailsDoc.vue | 30 +++--- .../fullscreen/WithoutThumbnailsDoc.vue | 30 +++--- doc/galleria/indicator/ClickEventDoc.vue | 22 ++-- doc/galleria/indicator/HoverEventDoc.vue | 22 ++-- doc/galleria/indicator/PositionDoc.vue | 38 ++++--- doc/galleria/indicator/TemplateDoc.vue | 28 ++--- doc/galleria/navigator/HoverDoc.vue | 28 ++--- doc/galleria/navigator/IndicatorsDoc.vue | 38 ++++--- doc/galleria/navigator/ItemThumbnailsDoc.vue | 28 ++--- .../navigator/ItemWithoutThumbnailsDoc.vue | 28 ++--- doc/treetable/BasicDoc.vue | 22 ++-- doc/treetable/ColumnToggleDoc.vue | 30 +++--- doc/treetable/ControlledDoc.vue | 24 +++-- doc/treetable/DynamicColumnsDoc.vue | 18 ++-- doc/treetable/FilterDoc.vue | 70 ++++++------ doc/treetable/LazyLoadDoc.vue | 37 ++++--- doc/treetable/ResponsiveDoc.vue | 22 ++-- doc/treetable/SizeDoc.vue | 26 +++-- doc/treetable/TemplateDoc.vue | 50 +++++---- doc/treetable/paginator/PaginatorBasicDoc.vue | 67 ++++++------ .../paginator/PaginatorTemplateDoc.vue | 92 ++++++++-------- doc/treetable/resize/ExpandModeDoc.vue | 22 ++-- doc/treetable/resize/FitModeDoc.vue | 22 ++-- doc/treetable/scroll/FlexibleScrollDoc.vue | 34 +++--- doc/treetable/scroll/FrozenColumnsDoc.vue | 28 ++--- doc/treetable/scroll/HorizontalScrollDoc.vue | 28 ++--- doc/treetable/scroll/VerticalScrollDoc.vue | 22 ++-- .../selection/CheckboxRowSelectionDoc.vue | 22 ++-- .../selection/MultipleRowsSelectionDoc.vue | 28 ++--- .../selection/RowSelectionEventsDoc.vue | 22 ++-- .../selection/SingleRowSelectionDoc.vue | 28 ++--- doc/treetable/sort/MultipleColumnsDoc.vue | 22 ++-- doc/treetable/sort/RemovableSortDoc.vue | 22 ++-- doc/treetable/sort/SingleColumnDoc.vue | 22 ++-- service/NodeService.js | 2 +- 44 files changed, 801 insertions(+), 635 deletions(-) diff --git a/components/doc/codeeditor/services.js b/components/doc/codeeditor/services.js index 768889f96..c245d8f8c 100644 --- a/components/doc/codeeditor/services.js +++ b/components/doc/codeeditor/services.js @@ -9726,7 +9726,7 @@ const services = { { key: '7-1', data: { - name: 'primeng.png', + name: 'primevue.png', size: '30kb', type: 'Picture' } diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue index 991e33eba..dac40d619 100644 --- a/doc/galleria/AdvancedDoc.vue +++ b/doc/galleria/AdvancedDoc.vue @@ -2,52 +2,54 @@

Advanced Galleria implementation with a custom UI.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -424,11 +426,11 @@ const slideButtonIcon = computed(() => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); - this.bindDocumentListeners(); - }, methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + this.bindDocumentListeners(); + }, toggleAutoSlide() { this.isAutoPlay = !this.isAutoPlay; }, diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue index 9553e9858..1ddf063a3 100644 --- a/doc/galleria/AutoPlayDoc.vue +++ b/doc/galleria/AutoPlayDoc.vue @@ -2,16 +2,18 @@

A slideshow implementation is defined by adding circular and autoPlay properties.

 -
- - - - -
+ +
+ + + + +
+ @@ -133,8 +135,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue index 76585dc76..1ed161743 100644 --- a/doc/galleria/BasicDoc.vue +++ b/doc/galleria/BasicDoc.vue @@ -2,16 +2,18 @@

Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail.

 -
- - - - -
+ +
+ + + + +
+ @@ -130,8 +132,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue index 92d29fbc9..2ba3726e0 100644 --- a/doc/galleria/CaptionDoc.vue +++ b/doc/galleria/CaptionDoc.vue @@ -2,20 +2,22 @@

Description of an image is specified with the caption property that takes the displayed object and returns content.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -146,8 +148,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue index 85265cd28..550d8b254 100644 --- a/doc/galleria/ControlledDoc.vue +++ b/doc/galleria/ControlledDoc.vue @@ -2,21 +2,23 @@

Galleria can be controlled programmatically using a binding to activeIndex.

 -
-
-
+ +
+
+
- - - - -
+ + + + +
+ @@ -168,10 +170,10 @@ const prev = () => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); - }, methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + }, next() { this.activeIndex = this.activeIndex === this.images.length - 1 ? this.images.length - 1 : this.activeIndex + 1; }, diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue index a85446ab6..4551440a0 100644 --- a/doc/galleria/ResponsiveDoc.vue +++ b/doc/galleria/ResponsiveDoc.vue @@ -2,18 +2,20 @@

Settings per screen size is defined via the responsiveOptions property.

 -
- - - - -
+ +
+ + + + +
+ @@ -138,8 +140,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue index 6a3aacd11..cb3c879e6 100644 --- a/doc/galleria/ThumbnailDoc.vue +++ b/doc/galleria/ThumbnailDoc.vue @@ -2,24 +2,26 @@

Thumbnails represent a smaller version of the actual content.

 -
-
-
- - -
-
- - - - -
+ + + + + + + @@ -213,8 +215,10 @@ onMounted(() => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/fullscreen/CustomContentDoc.vue b/doc/galleria/fullscreen/CustomContentDoc.vue index c620758ad..f1a895e14 100644 --- a/doc/galleria/fullscreen/CustomContentDoc.vue +++ b/doc/galleria/fullscreen/CustomContentDoc.vue @@ -2,33 +2,35 @@

Using activeIndex, Galleria is displayed with a specific initial image.

 -
- - - - + +
+ + + + -
-
- +
+
+ +
-
+ @@ -191,10 +193,10 @@ const imageClick = (index) => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); - }, methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + }, imageClick(index) { this.activeIndex = index; this.displayCustom = true; diff --git a/doc/galleria/fullscreen/WithThumbnailsDoc.vue b/doc/galleria/fullscreen/WithThumbnailsDoc.vue index 1f392833a..4eba2a7a8 100644 --- a/doc/galleria/fullscreen/WithThumbnailsDoc.vue +++ b/doc/galleria/fullscreen/WithThumbnailsDoc.vue @@ -2,18 +2,20 @@

Full screen mode is enabled by adding fullScreen property and and visibility is controlled with a binding to visible property.

 -
- - - - + +
+ + + + -
+
+ @@ -165,8 +167,10 @@ onMounted(() => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue index 30e1591d2..b35e6ac20 100644 --- a/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue +++ b/doc/galleria/fullscreen/WithoutThumbnailsDoc.vue @@ -2,18 +2,20 @@

Thumbnails can also be hidden in full screen mode.

 -
- - - - + +
+ + + + -
+
+ @@ -165,8 +167,10 @@ onMounted(() => { } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue index a007298de..d39f13167 100644 --- a/doc/galleria/indicator/ClickEventDoc.vue +++ b/doc/galleria/indicator/ClickEventDoc.vue @@ -2,13 +2,15 @@

Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by default.

 -
- - - -
+ +
+ + + +
+ @@ -91,8 +93,10 @@ const images = ref(); } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue index 2053ae6af..a06a66617 100644 --- a/doc/galleria/indicator/HoverEventDoc.vue +++ b/doc/galleria/indicator/HoverEventDoc.vue @@ -2,13 +2,15 @@

Indicators can be activated on hover instead of click if changeItemOnIndicatorHover is added.

 -
- - - -
+ +
+ + + +
+ @@ -91,8 +93,10 @@ const images = ref(); } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue index 710241c62..84ee10607 100644 --- a/doc/galleria/indicator/PositionDoc.vue +++ b/doc/galleria/indicator/PositionDoc.vue @@ -2,23 +2,25 @@

Indicators can be placed at four different sides using the indicatorsPosition property. In addition, enabling showIndicatorsOnItem moves the indicators inside the image section.

 -
-
-
- - + +
+
+
+ + +
+
+ + +
+ + +
-
- - -
- - - -
+ @@ -181,8 +183,10 @@ const positionOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue index 8346a4b70..2c2935d0d 100644 --- a/doc/galleria/indicator/TemplateDoc.vue +++ b/doc/galleria/indicator/TemplateDoc.vue @@ -2,16 +2,18 @@

Indicator content can be customized with the indicator property that takes an index as a parameter and expects content.

 -
- - - - -
+ +
+ + + + +
+ @@ -103,8 +105,10 @@ const images = ref(); } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue index e9079c099..32abd1b91 100644 --- a/doc/galleria/navigator/HoverDoc.vue +++ b/doc/galleria/navigator/HoverDoc.vue @@ -2,16 +2,18 @@

Navigators are displayed on hover only if showItemNavigatorsOnHover is enabled.

 -
- - - - -
+ +
+ + + + +
+ @@ -130,8 +132,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue index c1d1f6cfc..c8ebf0fbe 100644 --- a/doc/galleria/navigator/IndicatorsDoc.vue +++ b/doc/galleria/navigator/IndicatorsDoc.vue @@ -2,16 +2,28 @@

Navigators and Indicators can be combined as well.

 -
- - - - -
+ +
+ + + + +
+ @@ -145,8 +157,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue index 193c40da4..4b3647af7 100644 --- a/doc/galleria/navigator/ItemThumbnailsDoc.vue +++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue @@ -2,16 +2,18 @@

Add showItemNavigators to display navigator elements and the left and right side.

 -
- - - - -
+ +
+ + + + +
+ @@ -133,8 +135,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue index 3a2f07348..00aa0106e 100644 --- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue +++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue @@ -2,16 +2,18 @@

Simple example with indicators only.

 -
- - - - -
+ +
+ + + + +
+ @@ -145,8 +147,10 @@ const responsiveOptions = ref([ } }; }, - mounted() { - PhotoService.getImages().then((data) => (this.images = data)); + methods: { + loadDemoData() { + PhotoService.getImages().then((data) => (this.images = data)); + } } }; diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue index 45cd3adfb..69a557fde 100644 --- a/doc/treetable/BasicDoc.vue +++ b/doc/treetable/BasicDoc.vue @@ -2,13 +2,15 @@

TreeTable requires a collection of TreeNode instances as a value and Column components as children for the representation. The column with the element to toggle a node should have expander enabled.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue index 92bbd2812..c66219773 100644 --- a/doc/treetable/ColumnToggleDoc.vue +++ b/doc/treetable/ColumnToggleDoc.vue @@ -2,17 +2,19 @@

Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -155,10 +157,10 @@ const onToggle = (val) => { this.selectedColumns = this.columns; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); - }, methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + }, onToggle(value) { this.selectedColumns = this.columns.filter((col) => value.includes(col)); } diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue index bab4c22e0..6aea3fc99 100644 --- a/doc/treetable/ControlledDoc.vue +++ b/doc/treetable/ControlledDoc.vue @@ -2,14 +2,16 @@

Expansion state is controlled with expandedKeys property. The expandedKeys should be an object whose keys refer to the node key and values represent the expanded state e.g. {'0-0': true}.

 -
-
+ +
+
+ @@ -131,10 +133,10 @@ const toggleApplications = () => { } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); - }, methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + }, toggleApplications() { let _expandedKeys = { ...this.expandedKeys }; diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue index 2dbfae8e4..c45415367 100644 --- a/doc/treetable/DynamicColumnsDoc.vue +++ b/doc/treetable/DynamicColumnsDoc.vue @@ -2,11 +2,13 @@

Columns can be created programmatically.

 -
- - - -
+ +
+ + + +
+ @@ -119,8 +121,10 @@ const columns = ref([ { field: 'type', header: 'Type' } ]; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue index b459a75ec..5d746675f 100644 --- a/doc/treetable/FilterDoc.vue +++ b/doc/treetable/FilterDoc.vue @@ -6,38 +6,40 @@ support filtering.

-
-
- + +
+
+ +
+ + + + + + + + + + + +
- - - - - - - - - - - - -
+ @@ -226,8 +228,10 @@ const filterOptions = ref([ } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue index 4145c9747..8280855fb 100644 --- a/doc/treetable/LazyLoadDoc.vue +++ b/doc/treetable/LazyLoadDoc.vue @@ -10,13 +10,15 @@

In addition, only the root elements should be loaded, children can be loaded on demand using nodeExpand callback.

-
- - - - - -
+ +
+ + + + + +
+ @@ -147,7 +149,7 @@ export default { -
+
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue index 23ab49d85..33f23c7af 100644 --- a/doc/treetable/SizeDoc.vue +++ b/doc/treetable/SizeDoc.vue @@ -2,16 +2,18 @@

In addition to a regular table, alternatives with alternative sizes are available.

 -
-
- + +
+
+ +
+ + + + +
- - - - - -
+ @@ -127,8 +129,10 @@ const sizeOptions = ref([ } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue index 6cafefdc3..d19c9c78c 100644 --- a/doc/treetable/TemplateDoc.vue +++ b/doc/treetable/TemplateDoc.vue @@ -2,29 +2,31 @@

Custom content at header and footer slots are supported via templating.

 -
- - - - - - - @@ -170,8 +172,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue index 7a4b270b2..439e0ac90 100644 --- a/doc/treetable/paginator/PaginatorBasicDoc.vue +++ b/doc/treetable/paginator/PaginatorBasicDoc.vue @@ -2,13 +2,15 @@

Pagination is enabled by adding paginator property and defining rows per page.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -115,39 +117,42 @@ for (let i = 0; i < 50; i++) { } nodes.value = files; - + <\/script> ` } }; }, - mounted() { - let files = []; + mounted() {}, + methods: { + loadDemoData() { + let files = []; - for (let i = 0; i < 50; i++) { - let node = { - key: i, - data: { - name: 'Item ' + i, - size: Math.floor(Math.random() * 1000) + 1 + 'kb', - type: 'Type ' + i - }, - children: [ - { - key: i + ' - 0', - data: { - name: 'Item ' + i + ' - 0', - size: Math.floor(Math.random() * 1000) + 1 + 'kb', - type: 'Type ' + i + for (let i = 0; i < 50; i++) { + let node = { + key: i, + data: { + name: 'Item ' + i, + size: Math.floor(Math.random() * 1000) + 1 + 'kb', + type: 'Type ' + i + }, + children: [ + { + key: i + ' - 0', + data: { + name: 'Item ' + i + ' - 0', + size: Math.floor(Math.random() * 1000) + 1 + 'kb', + type: 'Type ' + i + } } - } - ] - }; + ] + }; - files.push(node); + files.push(node); + } + + this.nodes = files; } - - this.nodes = files; } }; diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue index 8c7a59a9e..1894acabc 100644 --- a/doc/treetable/paginator/PaginatorTemplateDoc.vue +++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue @@ -5,26 +5,28 @@ Paginator component for more information about the advanced customization options.

-
- - - - - - - -
+ +
+ + + + + + + +
+ @@ -155,39 +157,41 @@ for (let i = 0; i < 50; i++) { } nodes.value = files; - + <\/script> ` } }; }, - mounted() { - let files = []; + methods: { + loadDemoData() { + let files = []; - for (let i = 0; i < 50; i++) { - let node = { - key: i, - data: { - name: 'Item ' + i, - size: Math.floor(Math.random() * 1000) + 1 + 'kb', - type: 'Type ' + i - }, - children: [ - { - key: i + ' - 0', - data: { - name: 'Item ' + i + ' - 0', - size: Math.floor(Math.random() * 1000) + 1 + 'kb', - type: 'Type ' + i + for (let i = 0; i < 50; i++) { + let node = { + key: i, + data: { + name: 'Item ' + i, + size: Math.floor(Math.random() * 1000) + 1 + 'kb', + type: 'Type ' + i + }, + children: [ + { + key: i + ' - 0', + data: { + name: 'Item ' + i + ' - 0', + size: Math.floor(Math.random() * 1000) + 1 + 'kb', + type: 'Type ' + i + } } - } - ] - }; + ] + }; - files.push(node); + files.push(node); + } + + this.nodes = files; } - - this.nodes = files; } }; diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue index 96e9b8f3d..3d92d351f 100644 --- a/doc/treetable/resize/ExpandModeDoc.vue +++ b/doc/treetable/resize/ExpandModeDoc.vue @@ -2,13 +2,15 @@

Setting columnResizeMode as expand changes the table width as well.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue index 9f1359e2d..6dd545529 100644 --- a/doc/treetable/resize/FitModeDoc.vue +++ b/doc/treetable/resize/FitModeDoc.vue @@ -5,13 +5,15 @@ that does not change the overall table width.

-
- - - - - -
+ +
+ + + + + +
+ @@ -109,8 +111,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue index f6660a2a8..568df653f 100644 --- a/doc/treetable/scroll/FlexibleScrollDoc.vue +++ b/doc/treetable/scroll/FlexibleScrollDoc.vue @@ -5,20 +5,22 @@ adjusts itself according to the size changes.

-
-
+ + + + + + + + +
+ @@ -110,8 +112,10 @@ const dialogVisible = ref(false); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue index c66c24ddc..d559ff15e 100644 --- a/doc/treetable/scroll/FrozenColumnsDoc.vue +++ b/doc/treetable/scroll/FrozenColumnsDoc.vue @@ -2,16 +2,18 @@

A column can be fixed during horizontal scrolling by enabling the frozen property on a Column. The location is defined with the alignFrozen that can be left or right.

 -
- - - - - - - - -
+ +
+ + + + + + + + +
+ @@ -118,8 +120,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue index 5c6cd2e07..cdbd431fb 100644 --- a/doc/treetable/scroll/HorizontalScrollDoc.vue +++ b/doc/treetable/scroll/HorizontalScrollDoc.vue @@ -2,16 +2,18 @@

Horizontal scrolling is enabled when the total width of columns exceeds table width.

 -
- - - - - - - - -
+ +
+ + + + + + + + +
+ @@ -118,8 +120,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue index 6e496ac22..361af26ff 100644 --- a/doc/treetable/scroll/VerticalScrollDoc.vue +++ b/doc/treetable/scroll/VerticalScrollDoc.vue @@ -2,13 +2,15 @@

Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue index 49fcf3042..3bdd2e77e 100644 --- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue +++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue @@ -6,13 +6,15 @@

-
- - - - - -
+ +
+ + + + + +
+ @@ -123,8 +125,10 @@ const selectedKey = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue index 5fbc9b89c..611e27a4f 100644 --- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue +++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue @@ -6,17 +6,19 @@

In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.

-
-
- - + +
+
+ + +
+ + + + +
- - - - - -
+ @@ -130,8 +132,10 @@ const metaKey = ref(true); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue index 550d056a6..031defc30 100644 --- a/doc/treetable/selection/RowSelectionEventsDoc.vue +++ b/doc/treetable/selection/RowSelectionEventsDoc.vue @@ -2,13 +2,15 @@

TreeTable provides nodeSelect and nodeUnselect events to listen selection events.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -130,10 +132,10 @@ const onNodeUnselect = (node) => { } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); - }, methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + }, onNodeSelect(node) { this.$toast.add({ severity: 'success', summary: 'Node Selected', detail: node.data.name, life: 3000 }); }, diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue index ef72f1b5f..d5abe1c95 100644 --- a/doc/treetable/selection/SingleRowSelectionDoc.vue +++ b/doc/treetable/selection/SingleRowSelectionDoc.vue @@ -6,17 +6,19 @@ setting it to false.

-
-
- - + +
+
+ + +
+ + + + +
- - - - - -
+ @@ -130,8 +132,10 @@ const metaKey = ref(true); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue index c91a5a2ca..9d3855bcd 100644 --- a/doc/treetable/sort/MultipleColumnsDoc.vue +++ b/doc/treetable/sort/MultipleColumnsDoc.vue @@ -2,13 +2,15 @@

Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue index 322adeaac..70d5846ec 100644 --- a/doc/treetable/sort/RemovableSortDoc.vue +++ b/doc/treetable/sort/RemovableSortDoc.vue @@ -2,13 +2,15 @@

When removableSort is present, the third click removes the sorting from the column.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue index cb38a164b..3278b0075 100644 --- a/doc/treetable/sort/SingleColumnDoc.vue +++ b/doc/treetable/sort/SingleColumnDoc.vue @@ -2,13 +2,15 @@

Sorting on a column is enabled by adding the sortable property.

 -
- - - - - -
+ +
+ + + + + +
+ @@ -106,8 +108,10 @@ const nodes = ref(); } }; }, - mounted() { - NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + methods: { + loadDemoData() { + NodeService.getTreeTableNodes().then((data) => (this.nodes = data)); + } } }; diff --git a/service/NodeService.js b/service/NodeService.js index d6877ccad..e10b0809e 100755 --- a/service/NodeService.js +++ b/service/NodeService.js @@ -377,7 +377,7 @@ export const NodeService = { { key: '7-1', data: { - name: 'primeng.png', + name: 'primevue.png', size: '30kb', type: 'Picture' }