fix some TS in vue Demos. Navigation

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

@@ -57,7 +57,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"
@@ -90,13 +90,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>
@@ -104,8 +104,8 @@ 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 {
@@ -126,6 +126,26 @@ const allowSelectAll = ref(true);
 const selectByClick = ref(true);
 const allowColumnReordering = ref(false);
 
+function onModeChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
+  columnChooserMode.value = e.value;
+}
+
+function onSearchEnabledChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
+  searchEnabled.value = e.value;
+}
+
+function onAllowSelectAllChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
+  allowSelectAll.value = e.value;
+}
+
+function onSelectByClickChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
+  selectByClick.value = e.value;
+}
+
+function onAllowColumnReorderingChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
+  allowColumnReordering.value = e.value;
+}
+
 </script>
 <style>
   .options-panel {

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

@@ -70,16 +70,25 @@ function getOrderDay(rowData: Order) {
 }
 
 function calculateOrderDateFilterExpression(
-  this: DxCardViewTypes.Column, value, selectedFilterOperations, target,
+  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

@@ -173,24 +173,27 @@ import {
   DxItem, DxSearchPanel, DxRequiredRule, DxEmailRule,
   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: {
@@ -207,7 +210,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/Priority.vue

@@ -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>

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

@@ -1,11 +1,11 @@
 <template>
-  <div className="task__progress">
-    <DxProgressBar
-      :value="value"
-      :element-attr="{ 'aria-label': 'Progress Bar' }"
-      :statusFormat="(_, value: number) => `${value}%`"
-    />
-  </div>
+    <div className="task__progress">
+        <DxProgressBar
+            :value="value"
+            :element-attr="{ 'aria-label': 'Progress Bar' }"
+            :statusFormat="statusFormat"
+        />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -14,6 +14,8 @@ import { DxProgressBar } from 'devextreme-vue/progress-bar';
 const props = defineProps<{
   value: number,
 }>();
+
+const statusFormat = (_: unknown, value: number) => `${value}%`;
 </script>
 
 <style>