From c6faebb2428c85ba13723d24a0b11b4f879a9323 Mon Sep 17 00:00:00 2001 From: Mikhail Preyskurantov Date: Wed, 6 Sep 2023 14:10:47 +0300 Subject: [PATCH] Update Vue demos dataGrid to composition API style (#2817) --- .../Vue/AddressTab.vue | 29 +-- .../AdvancedMasterDetailView/Vue/App.vue | 24 +-- .../Vue/MasterDetail.vue | 18 +- .../Vue/OrderHistory.vue | 42 ++--- .../Vue/OrdersTab.vue | 25 +-- .../Vue/ProductSelectBox.vue | 56 +++--- .../AdvancedMasterDetailView/Vue/index.html | 6 + .../Demos/DataGrid/AjaxRequest/Vue/App.vue | 14 +- .../Demos/DataGrid/AjaxRequest/Vue/index.html | 6 + JSDemos/Demos/DataGrid/Appearance/Vue/App.vue | 25 +-- JSDemos/Demos/DataGrid/Appearance/Vue/data.js | 8 +- .../Demos/DataGrid/Appearance/Vue/index.html | 6 + .../Demos/DataGrid/BatchEditing/Vue/App.vue | 26 +-- .../DataGrid/BatchEditing/Vue/index.html | 6 + .../DataGrid/BatchUpdateRequest/Vue/App.vue | 33 +--- .../BatchUpdateRequest/Vue/index.html | 6 + .../Demos/DataGrid/CRUDOperations/Vue/App.vue | 159 ++++++++-------- .../DataGrid/CRUDOperations/Vue/index.html | 6 + .../DataGrid/CascadingLookups/Vue/App.vue | 49 ++--- .../DataGrid/CascadingLookups/Vue/data.js | 18 +- .../DataGrid/CascadingLookups/Vue/index.html | 6 + .../DataGrid/CellCustomization/Vue/App.vue | 22 +-- .../CellCustomization/Vue/ChartCell.vue | 20 +- .../CellCustomization/Vue/DiffCell.vue | 53 ++---- .../DataGrid/CellCustomization/Vue/data.js | 8 +- .../DataGrid/CellCustomization/Vue/index.html | 6 + .../CellEditingAndEditingAPI/Vue/App.vue | 66 +++---- .../CellEditingAndEditingAPI/Vue/index.html | 6 + .../DataGrid/CollaborativeEditing/Vue/App.vue | 16 +- .../CollaborativeEditing/Vue/Grid.vue | 38 ++-- .../CollaborativeEditing/Vue/index.html | 6 + .../Demos/DataGrid/ColumnChooser/Vue/App.vue | 48 ++--- .../DataGrid/ColumnChooser/Vue/index.html | 6 + .../DataGrid/ColumnCustomization/Vue/App.vue | 26 +-- .../DataGrid/ColumnCustomization/Vue/data.js | 8 +- .../ColumnCustomization/Vue/index.html | 6 + .../DataGrid/ColumnHeaderFilter/Vue/App.vue | 16 +- .../ColumnHeaderFilter/Vue/index.html | 6 + .../Demos/DataGrid/ColumnResizing/Vue/App.vue | 30 +-- .../Demos/DataGrid/ColumnResizing/Vue/data.js | 2 +- .../DataGrid/ColumnResizing/Vue/index.html | 6 + .../Demos/DataGrid/ColumnTemplate/Vue/App.vue | 16 +- .../Demos/DataGrid/ColumnTemplate/Vue/data.js | 8 +- .../DataGrid/ColumnTemplate/Vue/index.html | 6 + .../ColumnsBasedOnADataSource/Vue/App.vue | 15 +- .../ColumnsBasedOnADataSource/Vue/index.html | 6 + .../CommandColumnCustomization/Vue/App.vue | 90 ++++----- .../CommandColumnCustomization/Vue/data.js | 19 +- .../CommandColumnCustomization/Vue/index.html | 6 + .../DataGrid/CustomDataSource/Vue/App.vue | 28 +-- .../DataGrid/CustomDataSource/Vue/index.html | 6 + .../Demos/DataGrid/CustomEditors/Vue/App.vue | 73 +++----- .../Vue/EmployeeDropDownBoxComponent.vue | 66 +++---- .../Vue/EmployeeTagBoxComponent.vue | 52 ++---- .../DataGrid/CustomEditors/Vue/index.html | 6 + .../CustomNewRecordPosition/Vue/App.vue | 69 +++---- .../CustomNewRecordPosition/Vue/index.html | 6 + .../DataGrid/CustomSummaries/Vue/App.vue | 53 ++---- .../DataGrid/CustomSummaries/Vue/data.js | 8 +- .../DataGrid/CustomSummaries/Vue/index.html | 6 + .../CustomizeKeyboardNavigation/Vue/App.vue | 41 ++--- .../Vue/index.html | 6 + .../Demos/DataGrid/DataValidation/Vue/App.vue | 45 ++--- .../DataGrid/DataValidation/Vue/index.html | 6 + .../DataGrid/DeferredSelection/Vue/App.vue | 105 +++++------ .../DataGrid/DeferredSelection/Vue/index.html | 6 + .../DataGrid/DnDBetweenGrids/Vue/App.vue | 14 +- .../DataGrid/DnDBetweenGrids/Vue/Grid.vue | 64 +++---- .../DataGrid/DnDBetweenGrids/Vue/index.html | 6 + .../DataGrid/EditStateManagement/Vue/App.vue | 86 ++++----- .../EditStateManagement/Vue/index.html | 6 + .../ExcelJSCellCustomization/Vue/App.vue | 103 +++++------ .../ExcelJSCellCustomization/Vue/data.js | 8 +- .../ExcelJSCellCustomization/Vue/index.html | 6 + .../DataGrid/ExcelJSExportImages/Vue/App.vue | 80 ++++---- .../DataGrid/ExcelJSExportImages/Vue/data.js | 8 +- .../ExcelJSExportImages/Vue/index.html | 6 + .../ExcelJSExportMultipleGrids/Vue/App.vue | 131 ++++++------- .../ExcelJSExportMultipleGrids/Vue/index.html | 6 + .../ExcelJSHeaderAndFooter/Vue/App.vue | 84 ++++----- .../ExcelJSHeaderAndFooter/Vue/index.html | 6 + .../DataGrid/ExcelJSOverview/Vue/App.vue | 44 ++--- .../DataGrid/ExcelJSOverview/Vue/data.js | 8 +- .../DataGrid/ExcelJSOverview/Vue/index.html | 6 + .../Demos/DataGrid/FilterPanel/Vue/App.vue | 94 +++++----- .../Demos/DataGrid/FilterPanel/Vue/index.html | 6 + JSDemos/Demos/DataGrid/Filtering/Vue/App.vue | 152 +++++++-------- JSDemos/Demos/DataGrid/Filtering/Vue/data.js | 8 +- .../Demos/DataGrid/Filtering/Vue/index.html | 6 + .../Demos/DataGrid/FilteringAPI/Vue/App.vue | 70 +++---- .../DataGrid/FilteringAPI/Vue/index.html | 6 + JSDemos/Demos/DataGrid/FocusedRow/Vue/App.vue | 174 ++++++++---------- .../Demos/DataGrid/FocusedRow/Vue/index.html | 6 + .../Demos/DataGrid/FormEditing/Vue/App.vue | 21 +-- .../Demos/DataGrid/FormEditing/Vue/index.html | 6 + .../GridAdaptabilityOverview/Vue/App.vue | 25 +-- .../GridAdaptabilityOverview/Vue/data.js | 8 +- .../GridAdaptabilityOverview/Vue/index.html | 6 + .../GridColumnsHidingPriority/Vue/App.vue | 16 +- .../GridColumnsHidingPriority/Vue/data.js | 8 +- .../GridColumnsHidingPriority/Vue/index.html | 6 + .../Demos/DataGrid/GridSummaries/Vue/App.vue | 26 +-- .../Demos/DataGrid/GridSummaries/Vue/data.js | 8 +- .../DataGrid/GridSummaries/Vue/index.html | 6 + .../Demos/DataGrid/GroupSummaries/Vue/App.vue | 20 +- .../Demos/DataGrid/GroupSummaries/Vue/data.js | 8 +- .../DataGrid/GroupSummaries/Vue/index.html | 6 + .../HorizontalVirtualScrolling/Vue/App.vue | 15 +- .../HorizontalVirtualScrolling/Vue/index.html | 6 + .../DataGrid/InfiniteScrolling/Vue/App.vue | 24 +-- .../DataGrid/InfiniteScrolling/Vue/index.html | 6 + .../DataGrid/KeyboardNavigation/Vue/App.vue | 25 +-- .../KeyboardNavigation/Vue/index.html | 6 + .../DataGrid/LocalReordering/Vue/App.vue | 46 ++--- .../DataGrid/LocalReordering/Vue/index.html | 6 + .../DataGrid/MasterDetailAPI/Vue/App.vue | 39 ++-- .../DataGrid/MasterDetailAPI/Vue/index.html | 6 + .../DataGrid/MasterDetailView/Vue/App.vue | 22 +-- .../MasterDetailView/Vue/DetailTemplate.vue | 57 +++--- .../DataGrid/MasterDetailView/Vue/data.js | 13 +- .../DataGrid/MasterDetailView/Vue/index.html | 6 + .../DataGrid/MultiRowHeadersBands/Vue/App.vue | 23 +-- .../MultiRowHeadersBands/Vue/index.html | 6 + .../MultipleRecordSelectionAPI/Vue/App.vue | 111 +++++------ .../MultipleRecordSelectionAPI/Vue/index.html | 6 + .../MultipleRecordSelectionModes/Vue/App.vue | 31 +--- .../Vue/index.html | 6 + .../DataGrid/MultipleSorting/Vue/App.vue | 31 +--- .../DataGrid/MultipleSorting/Vue/index.html | 6 + .../Demos/DataGrid/OdataService/Vue/App.vue | 40 ++-- .../DataGrid/OdataService/Vue/index.html | 6 + JSDemos/Demos/DataGrid/Overview/Vue/App.vue | 60 +++--- .../DataGrid/Overview/Vue/DiscountCell.vue | 34 +--- .../Demos/DataGrid/Overview/Vue/index.html | 6 + .../DataGrid/PDFCellCustomization/Vue/App.vue | 95 ++++------ .../DataGrid/PDFCellCustomization/Vue/data.js | 8 +- .../PDFCellCustomization/Vue/index.html | 6 + .../DataGrid/PDFExportImages/Vue/App.vue | 73 +++----- .../DataGrid/PDFExportImages/Vue/data.js | 8 +- .../DataGrid/PDFExportImages/Vue/index.html | 6 + .../PDFExportMultipleGrids/Vue/App.vue | 128 ++++++------- .../PDFExportMultipleGrids/Vue/index.html | 6 + .../DataGrid/PDFHeaderAndFooter/Vue/App.vue | 88 ++++----- .../PDFHeaderAndFooter/Vue/index.html | 6 + .../Demos/DataGrid/PDFOverview/Vue/App.vue | 47 ++--- .../Demos/DataGrid/PDFOverview/Vue/index.html | 6 + .../Demos/DataGrid/PopupEditing/Vue/App.vue | 24 +-- .../DataGrid/PopupEditing/Vue/index.html | 6 + .../DataGrid/RealTimeUpdates/Vue/App.vue | 79 ++++---- .../DataGrid/RealTimeUpdates/Vue/index.html | 6 + .../RecalculateWhileEditing/Vue/App.vue | 19 +- .../RecalculateWhileEditing/Vue/data.js | 8 +- .../RecalculateWhileEditing/Vue/index.html | 6 + .../Demos/DataGrid/RecordGrouping/Vue/App.vue | 21 +-- .../DataGrid/RecordGrouping/Vue/index.html | 6 + .../Demos/DataGrid/RecordPaging/Vue/App.vue | 50 ++--- .../DataGrid/RecordPaging/Vue/index.html | 6 + .../Demos/DataGrid/RemoteGrouping/Vue/App.vue | 26 +-- .../DataGrid/RemoteGrouping/Vue/index.html | 6 + .../DataGrid/RemoteReordering/Vue/App.vue | 37 +--- .../DataGrid/RemoteReordering/Vue/index.html | 6 + .../RemoteVirtualScrolling/Vue/App.vue | 24 +-- .../RemoteVirtualScrolling/Vue/index.html | 6 + .../DataGrid/RightToLeftSupport/Vue/App.vue | 38 ++-- .../DataGrid/RightToLeftSupport/Vue/data.js | 8 +- .../RightToLeftSupport/Vue/index.html | 6 + .../RowEditingAndEditingEvents/Vue/App.vue | 37 ++-- .../RowEditingAndEditingEvents/Vue/index.html | 6 + .../Demos/DataGrid/RowSelection/Vue/App.vue | 34 ++-- .../DataGrid/RowSelection/Vue/index.html | 6 + .../Demos/DataGrid/RowTemplate/Vue/App.vue | 20 +- .../Demos/DataGrid/RowTemplate/Vue/data.js | 8 +- .../Demos/DataGrid/RowTemplate/Vue/index.html | 6 + .../Demos/DataGrid/SignalRService/Vue/App.vue | 61 +++--- .../SignalRService/Vue/ChangeCell.vue | 15 +- .../DataGrid/SignalRService/Vue/PriceCell.vue | 15 +- .../DataGrid/SignalRService/Vue/index.html | 6 + .../Demos/DataGrid/SimpleArray/Vue/App.vue | 16 +- .../Demos/DataGrid/SimpleArray/Vue/index.html | 6 + .../DataGrid/StatePersistence/Vue/App.vue | 30 ++- .../DataGrid/StatePersistence/Vue/data.js | 8 +- .../DataGrid/StatePersistence/Vue/index.html | 6 + .../DataGrid/ToolbarCustomization/Vue/App.vue | 94 ++++------ .../DataGrid/ToolbarCustomization/Vue/data.js | 8 +- .../ToolbarCustomization/Vue/index.html | 6 + .../DataGrid/VirtualScrolling/Vue/App.vue | 31 +--- .../DataGrid/VirtualScrolling/Vue/index.html | 6 + .../Demos/DataGrid/WebAPIService/Vue/App.vue | 33 +--- .../WebAPIService/Vue/MasterDetailGrid.vue | 28 +-- .../DataGrid/WebAPIService/Vue/index.html | 6 + JSDemos/configs/Vue/config.js | 4 + utils/demo-ts-loader.js | 16 ++ utils/templates/Vue/index.html | 6 + 193 files changed, 2065 insertions(+), 3036 deletions(-) create mode 100644 utils/demo-ts-loader.js diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/AddressTab.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/AddressTab.vue index 0a3daf230d2..2df25c9fa83 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/AddressTab.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/AddressTab.vue @@ -14,27 +14,16 @@ - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue index 5eb6d109e28..0cff78b4e3b 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue @@ -22,34 +22,20 @@ - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/MasterDetail.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/MasterDetail.vue index 3c0abc12970..a8cab2ad05a 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/MasterDetail.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/MasterDetail.vue @@ -21,21 +21,13 @@ - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue index 65896dc62e3..74f9ac99699 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrderHistory.vue @@ -42,7 +42,7 @@ - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrdersTab.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrdersTab.vue index b1333088184..109224bef3e 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrdersTab.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/OrdersTab.vue @@ -24,26 +24,15 @@ - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue index 4bb6215143a..965763de31e 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/ProductSelectBox.vue @@ -3,46 +3,40 @@ :defer-rendering="false" :data-source="dataSource" :input-attr="{ 'aria-label': 'Product' }" - :value="value" + :value="productId" value-expr="ProductID" display-expr="ProductName" @valueChanged="$emit('product-changed', $event.value)" /> - diff --git a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/index.html b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/index.html index 2661da90905..346ecb7633a 100644 --- a/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/index.html +++ b/JSDemos/Demos/DataGrid/AdvancedMasterDetailView/Vue/index.html @@ -8,6 +8,12 @@ + + diff --git a/JSDemos/Demos/DataGrid/AjaxRequest/Vue/App.vue b/JSDemos/Demos/DataGrid/AjaxRequest/Vue/App.vue index 1a10e43bf61..241fc7319f4 100644 --- a/JSDemos/Demos/DataGrid/AjaxRequest/Vue/App.vue +++ b/JSDemos/Demos/DataGrid/AjaxRequest/Vue/App.vue @@ -5,18 +5,8 @@ data-source="../../../../data/customers.json" /> - diff --git a/JSDemos/Demos/DataGrid/AjaxRequest/Vue/index.html b/JSDemos/Demos/DataGrid/AjaxRequest/Vue/index.html index 6ac05c3579e..290ca9ba901 100644 --- a/JSDemos/Demos/DataGrid/AjaxRequest/Vue/index.html +++ b/JSDemos/Demos/DataGrid/AjaxRequest/Vue/index.html @@ -7,6 +7,12 @@ + + diff --git a/JSDemos/Demos/DataGrid/Appearance/Vue/App.vue b/JSDemos/Demos/DataGrid/Appearance/Vue/App.vue index 26db10e5b26..407df3f2da4 100644 --- a/JSDemos/Demos/DataGrid/Appearance/Vue/App.vue +++ b/JSDemos/Demos/DataGrid/Appearance/Vue/App.vue @@ -67,27 +67,16 @@ -