Fix TS in Vue demos. Scheduler (#30888)

Co-authored-by: EugeniyKiyashko <[email protected]>

Author: GoodDayForSurf

apps/demos/Demos/Menu/Overview/Vue/App.vue

@@ -53,7 +53,7 @@ import { computed, ref } from 'vue';
 import DxMenu, { type DxMenuTypes } from 'devextreme-vue/menu';
 import DxCheckBox from 'devextreme-vue/check-box';
 import DxSelectBox from 'devextreme-vue/select-box';
-import service from './data.ts';
+import service, { type Product } from './data.ts';
 
 const showSubmenuModes = [{
   name: 'onHover',
@@ -69,11 +69,11 @@ const showFirstSubmenuModes = computed(() => showSubmenuModes.find(
 ));
 const orientation = ref<DxMenuTypes.Orientation>('horizontal');
 const hideSubmenuOnMouseLeave = ref(false);
-const currentProduct = ref(null);
+const currentProduct = ref<Product>();
 
-function itemClick(e) {
-  if (e.itemData.price) {
-    currentProduct.value = e.itemData;
+function itemClick(e: DxMenuTypes.ItemClickEvent) {
+  if (e.itemData?.price) {
+    currentProduct.value = e.itemData as Product;
   }
 }
 </script>

apps/demos/Demos/Menu/Overview/Vue/data.ts

@@ -1,4 +1,12 @@
-const products = [{
+export interface Product {
+  id: string;
+  name: string;
+  price?: number;
+  icon?: string;
+  disabled?: boolean;
+  items?: Product[];
+}
+const products: Product[] = [{
   id: '1',
   name: 'Video Players',
   items: [{

apps/demos/Demos/Menu/Scrolling/Vue/App.vue

@@ -31,13 +31,15 @@ const products = ref(service.getProducts());
 const limitSubmenuHeight = ref(false);
 
 function itemClick(e: DxMenuTypes.ItemClickEvent) {
-  if (!e.itemData.items) {
-    notify(`The "${e.itemData.text}" item was clicked`, 'success', 1500);
+  if (!e.itemData?.items) {
+    notify(`The "${e.itemData?.text}" item was clicked`, 'success', 1500);
   }
 }
 
 function onSubmenuShowing({ submenuContainer }: DxMenuTypes.SubmenuShowingEvent) {
-  submenuContainer.style.maxHeight = limitSubmenuHeight.value ? `${SUBMENU_HEIGHT}px` : '';
+  if (submenuContainer) {
+    submenuContainer.style.maxHeight = limitSubmenuHeight.value ? `${SUBMENU_HEIGHT}px` : '';
+  }
 }
 </script>
 <style>

apps/demos/Demos/Pagination/Overview/Vue/App.vue

@@ -42,7 +42,7 @@ import { computed, ref } from 'vue';
 import DxPagination from 'devextreme-vue/pagination';
 import { employees } from './data.ts';
 
-const getPageEmployees = (pageIndex, pageSize) => {
+const getPageEmployees = (pageIndex: number, pageSize: number) => {
   return employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
 }
 

apps/demos/Demos/PivotGrid/ChartIntegration/Vue/App.vue

@@ -45,7 +45,7 @@ import { sales } from './data.ts';
 
 const grid = ref<DxPivotGrid>();
 const chart = ref<DxChart>();
-const dataSource = {
+const dataSource: Record<string, any> = {
   fields: [{
     caption: 'Region',
     width: 120,
@@ -78,7 +78,7 @@ const dataSource = {
   }],
   store: sales,
 };
-const customizeTooltip = ({ seriesName, originalValue }) => {
+const customizeTooltip = ({ seriesName, originalValue }: Record<string, any>) => {
   const valueText = (seriesName.indexOf('Total') !== -1)
     ? new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD' }).format(originalValue)
     : originalValue;

apps/demos/Demos/PivotGrid/Customization/Vue/App.vue

@@ -47,8 +47,8 @@ import DxPivotGrid, {
   DxFieldChooser,
   type DxPivotGridTypes,
 } from 'devextreme-vue/pivot-grid';
+import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
-import DxCheckBox from 'devextreme-vue/check-box';
 import { sales } from './data.ts';
 
 const showTotalsPrior = ref<DxPivotGridTypes.PivotGridTotalDisplayMode>('none');
@@ -91,13 +91,13 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 
-function onShowTotalsPriorChanged(data) {
+function onShowTotalsPriorChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
   showTotalsPrior.value = data.value ? 'both' : 'none';
 }
-function onDataFieldAreaChanged(data) {
+function onDataFieldAreaChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
   dataFieldArea.value = data.value ? 'row' : 'column';
 }
-function onRowHeaderLayoutChanged(data) {
+function onRowHeaderLayoutChanged(data: DxCheckBoxTypes.ValueChangedEvent) {
   rowHeaderLayout.value = data.value ? 'tree' : 'standard';
 }
 </script>

apps/demos/Demos/PivotGrid/DrillDown/Vue/App.vue

@@ -81,16 +81,16 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 const dataGridRef = ref();
-const drillDownDataSource = ref<DataSource>(null);
+const drillDownDataSource = ref<DataSource>();
 const popupTitle = ref('');
 const popupVisible = ref(false);
 
-function onCellClick(e: DxPivotGridTypes.CellClickEvent) {
-  if (e.area === 'data') {
-    const pivotGridDataSource = e.component.getDataSource();
-    const rowPathLength = e.cell.rowPath.length;
-    const rowPathName = e.cell.rowPath[rowPathLength - 1];
-    drillDownDataSource.value = pivotGridDataSource.createDrillDownDataSource(e.cell);
+function onCellClick({ area, cell, component }: DxPivotGridTypes.CellClickEvent) {
+  if (area === 'data' && cell?.rowPath) {
+    const pivotGridDataSource = component.getDataSource();
+    const rowPathLength = cell.rowPath.length;
+    const rowPathName = cell.rowPath[rowPathLength - 1];
+    drillDownDataSource.value = pivotGridDataSource.createDrillDownDataSource(cell);
     popupTitle.value = `${
       rowPathName || 'Total'
     } Drill Down Data`;

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue

@@ -27,7 +27,7 @@ import { Workbook } from 'devextreme-exceljs-fork';
 // Our demo infrastructure requires us to use 'file-saver-es'.
 // We recommend that you use the official 'file-saver' package in your applications.
 import { saveAs } from 'file-saver-es';
-import { exportPivotGrid } from 'devextreme/excel_exporter';
+import { exportPivotGrid, type PivotGridCell } from 'devextreme-vue/common/export/excel';
 import { sales } from './data.ts';
 
 interface ConditionalAppearance {
@@ -69,8 +69,8 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
   exportPivotGrid({
     component: e.component,
     worksheet,
-    customizeCell: ({ pivotCell, excelCell }) => {
-      if (isDataCell(pivotCell) || isTotalCell(pivotCell)) {
+    customizeCell: ({ pivotCell, excelCell }: { pivotCell?: PivotGridCell, excelCell?: any }) => {
+      if (pivotCell && (isDataCell(pivotCell) || isTotalCell(pivotCell))) {
         const appearance = getConditionalAppearance(pivotCell);
         Object.assign(excelCell, getExcelCellFormat(appearance));
       }
@@ -90,15 +90,15 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
   });
 }
 function onCellPrepared({ cell, cellElement }: DxPivotGridTypes.CellPreparedEvent) {
-  if (isDataCell(cell) || isTotalCell(cell)) {
+  if (cell && cellElement && (isDataCell(cell) || isTotalCell(cell))) {
     const appearance = getConditionalAppearance(cell);
     Object.assign(cellElement.style, getCssStyles(appearance));
   }
 }
-function isDataCell(cell) {
+function isDataCell(cell: DxPivotGridTypes.Cell) {
   return (cell.rowType === 'D' && cell.columnType === 'D');
 }
-function isTotalCell(cell) {
+function isTotalCell(cell: DxPivotGridTypes.Cell) {
   return (cell.type === 'T' || cell.type === 'GT' || cell.rowType === 'T' || cell.rowType === 'GT' || cell.columnType === 'T' || cell.columnType === 'GT');
 }
 function getExcelCellFormat({ fill, font, bold = false }: ConditionalAppearance) {
@@ -114,7 +114,7 @@ function getCssStyles({ fill, font, bold = false }: ConditionalAppearance) {
     'font-weight': bold ? 'bold' : undefined,
   };
 }
-function getConditionalAppearance(cell): ConditionalAppearance {
+function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppearance {
   if (isTotalCell(cell)) {
     return { fill: 'F2F2F2', font: '3F3F3F', bold: true };
   }

apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue

@@ -66,8 +66,9 @@ import { ref } from 'vue';
 import DxPivotGrid, {
   DxFieldChooser,
   DxFieldPanel,
+  type DxPivotGridTypes,
 } from 'devextreme-vue/pivot-grid';
-import DxCheckBox from 'devextreme-vue/check-box';
+import DxCheckBox, { type DxCheckBoxTypes } from 'devextreme-vue/check-box';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
 import { sales } from './data.ts';
 
@@ -86,7 +87,7 @@ const gridDataSource = new PivotGridDataSource({
     dataField: 'city',
     width: 150,
     area: 'row',
-    selector(data) {
+    selector(data: Record<string, unknown>) {
       return `${data.city} (${data.country})`;
     },
   }, {
@@ -103,36 +104,34 @@ const gridDataSource = new PivotGridDataSource({
   store: sales,
 });
 
-function OnShowColumnFieldsChanged(e) {
+function OnShowColumnFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   showColumnFields.value = e.value;
 }
-function OnShowDataFieldsChanged(e) {
+function OnShowDataFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   showDataFields.value = e.value;
 }
-function OnShowFilterFieldsChanged(e) {
+function OnShowFilterFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   showFilterFields.value = e.value;
 }
-function OnShowRowFieldsChanged(e) {
+function OnShowRowFieldsChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
   showRowFields.value = e.value;
 }
-function onContextMenuPreparing(e) {
+function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
   const dataSource = e.component.getDataSource();
-  const sourceField = e.field;
+  const sourceField: Record<string, any> | undefined = e.field;
 
   if (sourceField) {
     if (!sourceField.groupName || sourceField.groupIndex === 0) {
-      e.items.push({
+      e.items?.push({
         text: 'Hide field',
         onItemClick() {
           let fieldIndex: number;
 
-          if (sourceField.groupName) {
-            fieldIndex = dataSource
-              .getAreaFields(sourceField.area, true)[sourceField.areaIndex]
-              .index;
-          } else {
-            fieldIndex = sourceField.index;
-          }
+          const dataSourceField: Record<string, any> = sourceField.groupName 
+              ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
+              : sourceField
+
+          fieldIndex = dataSourceField.index;
 
           dataSource.field(fieldIndex, {
             area: null,
@@ -143,7 +142,7 @@ function onContextMenuPreparing(e) {
     }
 
     if (sourceField.dataType === 'number') {
-      const setSummaryType = function(args) {
+      const setSummaryType = function(args: Record<string, any>) {
         dataSource.field(sourceField.index, {
           summaryType: args.itemData.value,
         });
@@ -152,7 +151,7 @@ function onContextMenuPreparing(e) {
       };
       const menuItems: Record<string, any>[] = [];
 
-      e.items.push({ text: 'Summary Type', items: menuItems });
+      e.items?.push({ text: 'Summary Type', items: menuItems });
 
       ['Sum', 'Avg', 'Min', 'Max'].forEach((summaryType) => {
         const summaryTypeValue = summaryType.toLowerCase();
@@ -161,7 +160,7 @@ function onContextMenuPreparing(e) {
           text: summaryType,
           value: summaryType.toLowerCase(),
           onItemClick: setSummaryType,
-          selected: e.field.summaryType === summaryTypeValue,
+          selected: e.field?.summaryType === summaryTypeValue,
         });
       });
     }

apps/demos/Demos/PivotGrid/IntegratedFieldChooser/Vue/App.vue

@@ -40,7 +40,7 @@ import {
   DxSelectBox,
 } from 'devextreme-vue/select-box';
 
-const dataSource = {
+const dataSource: Record<string, any> = {
   fields: [
     { dataField: '[Product].[Category]', area: 'row' },
     {