fix TS in Navigation Vue demos

Author: GoodDayForSurf

apps/demos/Demos/Accordion/Overview/Vue/CustomItem.vue

@@ -33,6 +33,6 @@
 import { type CompanyData } from './data';
 
 defineProps<{
-  itemData?: CompanyData
+  itemData: CompanyData
 }>();
 </script>

apps/demos/Demos/Accordion/Overview/Vue/CustomTitle.vue

@@ -5,6 +5,6 @@
 import { type CompanyData } from './data';
 
 defineProps<{
-  itemData?: CompanyData
+  itemData: CompanyData
 }>();
 </script>

apps/demos/Demos/ActionSheet/PopoverMode/Vue/ContactItem.vue

@@ -9,6 +9,6 @@
 import { type ContactInfo } from './data';
 
 defineProps<{
-  itemData?: ContactInfo
+  itemData: ContactInfo
 }>();
 </script>

apps/demos/Demos/CardView/CardTemplate/Vue/App.vue

@@ -55,7 +55,7 @@
           :vehicle="vehicle"
           :id="ID"
           :model="`${TrademarkName} ${Name}`"
-          :price="fields?.find(f => f.column?.dataField === 'Price')?.text"
+          :price="getPriceText(fields)"
           :category-name="CategoryName"
           :modification="Modification"
           :body-style-name="BodyStyleName"
@@ -83,13 +83,20 @@ import { DxCardView, DxColumn, DxHeaderFilter, DxSearchPanel, DxPaging } from 'd
 import { DxPopup, DxPosition } from 'devextreme-vue/popup';
 import LicenseInfo from './LicenseInfo.vue';
 import VehicleCard from './VehicleCard.vue';
-import { vehicles } from './data.ts';
+import { vehicles, type Vehicle } from './data.ts';
 import { ref } from 'vue';
 
 const popupVisible = ref(false);
-const currentVehicle = ref(null);
+const currentVehicle = ref<Vehicle | undefined>();
 
-function showInfo(vehicle) {
+function getPriceText(
+  fields?: Array<{ column?: { dataField?: string }, text?: string }>,
+): string {
+  const priceField = fields?.find((field) => field?.column?.dataField === 'Price');
+  return priceField?.text || '';
+}
+
+function showInfo(vehicle: Vehicle) {
   currentVehicle.value = vehicle;
   popupVisible.value = true;
 }

apps/demos/Demos/CardView/ColumnChooser/Vue/App.vue

@@ -8,37 +8,37 @@
           :data-source="['dragAndDrop', 'select']"
           :input-attr="{ 'aria-label': 'Column Chooser Mode' }"
           :value="columnChooserMode"
-          @value-changed="({ value }) => { columnChooserMode = value; }"
+          @value-changed="onModeChanged"
         />
       </div>
       <div className="option">
         <DxCheckBox
           text="Search Enabled"
           :value="searchEnabled"
-          @value-changed="({ value }) => { searchEnabled = value; }"
+          @value-changed="onSearchEnabledChanged"
         />
       </div>
       <div className="option">
         <DxCheckBox
           text="Allow Select All"
           :value="allowSelectAll"
-          @value-changed="({ value }) => { allowSelectAll = value; }"
+          @value-changed="onAllowSelectAllChanged"
           :disabled="columnChooserMode !== 'select'"
         />
       </div>
       <div className="option">
         <DxCheckBox
           text="Select By Click On Item"
           :value="selectByClick"
-          @value-changed="({ value }) => { selectByClick = value; }"
+          @value-changed="onSelectByClickChanged"
           :disabled="columnChooserMode !== 'select'"
         />
       </div>
       <div className="option">
         <DxCheckBox
           text="Allow Column Reordering"
           :value="allowColumnReordering"
-          @value-changed="({ value }) => { allowColumnReordering = value; }"
+          @value-changed="onAllowColumnReorderingChanged"
         />
       </div>
     </div>
@@ -103,8 +103,8 @@ import { ref } from 'vue';
 import {
   DxCardView, DxColumn, DxCardCover, DxSearchPanel, DxColumnChooser, DxColumnChooserSearch, DxColumnChooserSelection,
 } from 'devextreme-vue/card-view';
-import { DxSelectBox } from 'devextreme-vue/select-box';
-import { DxCheckBox } from 'devextreme-vue/check-box';
+import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box';
+import { DxCheckBox, type DxCheckBoxTypes } from 'devextreme-vue/check-box';
 import { employees, type Employee } from './data.ts';
 
 function altExpr({ First_Name, Last_Name }: Employee): string {
@@ -125,6 +125,26 @@ const allowSelectAll = ref(true);
 const selectByClick = ref(true);
 const allowColumnReordering = ref(false);
 
+function onModeChanged({ value }: DxSelectBoxTypes.ValueChangedEvent) {
+  columnChooserMode.value = value;
+}
+
+function onSearchEnabledChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {
+  searchEnabled.value = value;
+}
+
+function onAllowSelectAllChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {
+  allowSelectAll.value = value;
+}
+
+function onSelectByClickChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {
+  selectByClick.value = value;
+}
+
+function onAllowColumnReorderingChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {
+  allowColumnReordering.value = value;
+}
+
 </script>
 <style>
   .options-panel {

apps/demos/Demos/CardView/ColumnHeaderFilter/Vue/App.vue

@@ -69,15 +69,26 @@ function getOrderDay(rowData: Order) {
   return new Date(rowData.OrderDate).getDay();
 }
 
-function calculateOrderDateFilterExpression(this: DxCardViewTypes.Column, value, selectedFilterOperations, target) {
+function calculateOrderDateFilterExpression(
+  this: DxCardViewTypes.Column,
+  value: unknown,
+  selectedFilterOperations: string | null,
+  target: string,
+) {
   if (value === 'weekends') {
     return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]];
   }
   return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target) as any;
 }
 
-function orderDateHeaderFilterDataSource(data) {
-  data.dataSource.postProcess = function(results) {
+type HeaderFilterDataSourceArg = {
+  dataSource: {
+    postProcess: (results: Array<{ text: string; value: unknown }>) => Array<{ text: string; value: unknown }>;
+  };
+};
+
+function orderDateHeaderFilterDataSource(data: HeaderFilterDataSourceArg): void {
+  data.dataSource.postProcess = function(results: Array<{ text: string; value: unknown }>) {
     results.push({
       text: 'Weekends',
       value: 'weekends',

apps/demos/Demos/CardView/DataValidation/Vue/App.vue

@@ -171,24 +171,27 @@
 import {
   DxCardView, DxColumn, DxCardCover, DxEditing, DxForm, DxItem, DxSearchPanel, DxRequiredRule, DxEmailRule, DxPatternRule, DxAsyncRule, DxCustomRule,
 } from 'devextreme-vue/card-view';
+import { type ValidationCallbackData } from 'devextreme-vue/common';
 import 'devextreme-vue/text-area';
 import { employees, type Employee } from './data.ts';
 
-function altExpr({ fullName }: Employee) {
+function altExpr({ fullName }: Employee): string {
   return `Photo of ${fullName}`;
 }
 
-function imageExpr({ picture }: Employee) {
+function imageExpr({ picture }: Employee): string {
   return picture;
 }
 
-function calculateFullName({ firstName, lastName }: Employee) {
+function calculateFullName({ firstName, lastName }: Employee): string {
   return `${firstName} ${lastName}`;
 }
 
 const emailValidationUrl = 'https://js.devexpress.com/Demos/NetCore/RemoteValidation/CheckUniqueEmailAddress';
 
-async function emailValidationCallback(params) {
+async function emailValidationCallback(
+  params: ValidationCallbackData,
+): Promise<boolean> {
   const response = await fetch(emailValidationUrl, {
     method: 'POST',
     headers: {
@@ -205,7 +208,7 @@ async function emailValidationCallback(params) {
   return result;
 }
 
-function hireDateValidationCallback(params) {
-  return new Date(params.value) > new Date(params.data.birthDate);
-}
+const hireDateValidationCallback = (
+  params: ValidationCallbackData,
+): boolean => new Date(params.value) > new Date(params.data.birthDate);
 </script>

apps/demos/Demos/CardView/DataValidation/Vue/data.ts

@@ -18,7 +18,7 @@ export interface Employee {
   departmentID: number;
   department: string;
   status: string;
-  notes: string;
+  notes: string | null;
   pictureName: string;
   picture: string;
 }

apps/demos/Demos/CardView/FieldTemplate/Vue/Employee.vue

@@ -1,5 +1,5 @@
 <template>
-    <button className="task__link-button">{{ employee.Name }}</button>
+    <button className="task__link-button">{{ employee?.Name }}</button>
 </template>
 
 <script setup lang="ts">

apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue

@@ -1,7 +1,7 @@
 <template>
   <div :className="priorityClassName">
       <div className="task__indicator"></div>
-      <div>{{ priority.text }}</div>
+      <div>{{ priority?.text }}</div>
   </div>
 </template>
 
@@ -16,7 +16,9 @@ const props = defineProps<{
 const priority = computed(() =>
   priorities.find(p => p.id === props.priorityID)
 );
-const priorityClassName = `task__priority task__priority--${priority.value.postfix}`;
+const priorityClassName = computed(() => 
+  `task__priority task__priority--${priority.value?.postfix || ''}`
+);
 </script>
 
 <style>