Update code after review (everything except jQuery)

Angular/src/app/app.component.html

@@ -1,33 +1,10 @@
-<dx-stepper (onSelectionChanged)="onSelectionChanged($event)">
-  <dxi-item 
-    label="Personal Details"
-    template="firstStep"
-  ></dxi-item>
-  <div *dxTemplate="let data of 'firstStep'">
-    <div class='star dx-step-indicator'></div>
-    <div class='dx-step-caption'>
-      <div class='dx-step-label'>{{ data.label }}</div>
+<dx-stepper
+  [items]="steps"
+  (onSelectionChanged)="onSelectionChanged($event)">
+  <div *dxTemplate="let data of 'starTemplate'">
+    <div class="star dx-step-indicator"></div>
+    <div class="dx-step-caption">
+      <div class="dx-step-label">{{ data.label }}</div>
     </div>
   </div>
-  <dxi-item 
-    label="Program Selection"
-    icon="detailslayout"
-  ></dxi-item>
-  <dxi-item 
-    label="Campus and Start Dates"
-    icon="map"
-  ></dxi-item>
-  <dxi-item 
-    label="Supporting Documents"
-    icon="textdocument"
-  ></dxi-item>
-  <dxi-item 
-    label="Scholarship and Aid"
-    icon="money"
-    [optional]="true"
-  ></dxi-item>
-  <dxi-item 
-    label="Review and Submit"
-    icon="send"
-  ></dxi-item>
-</dx-stepper>
+</dx-stepper>

Angular/src/app/app.component.ts

@@ -7,10 +7,21 @@ import { DxStepperTypes } from 'devextreme-angular/stepper';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  onSelectionChanged(e: DxStepperTypes.SelectionChangedEvent) {
+  steps = [
+    { label: 'Personal Details', template: 'starTemplate' },
+    { label: 'Program Selection', icon: 'detailslayout' },
+    { label: 'Campus and Start Dates', icon: 'map' },
+    { label: 'Supporting Documents', icon: 'textdocument' },
+    { label: 'Scholarship and Aid', icon: 'money', optional: true },
+    { label: 'Review and Submit', icon: 'send' }
+  ];
+
+  onSelectionChanged(e: DxStepperTypes.SelectionChangedEvent): void {
     const newItem = e.addedItems[0];
-    const items = e.component.option('items');
-    const newIndex = items.findIndex((item) => newItem.label === item.label);
-    e.component.option(`items[${newIndex - 1}].disabled`, true);
+    const newIndex = this.steps.findIndex(item => item.label === newItem.label);
+
+    if (newIndex > 0 && !this.steps[newIndex - 1].disabled) {
+      this.steps[newIndex - 1].disabled = true;
+    }
   }
 }

README.md

@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/979187465/25.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1290489)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)

React/src/App.tsx

@@ -1,31 +1,41 @@
-import { JSX } from 'react';
+import React, { JSX, useState } from 'react';
 import { Stepper, Item, StepperTypes } from 'devextreme-react/stepper';
-import React from 'react';
 
-const renderFirstItem = (data: StepperTypes.TemplateData) => 
-  <React.Fragment>
+const renderFirstItem = (data: StepperTypes.TemplateData) => (
+  <>
     <div className="star dx-step-indicator"></div>
     <div className="dx-step-caption">
       <div className="dx-step-label">{data.label}</div>
     </div>
-  </React.Fragment>;
-
-const onSelectionChanged = (e: StepperTypes.SelectionChangedEvent) => {
-  const newItem = e.addedItems[0];
-  const items = e.component.option('items');
-  const newIndex = items.findIndex((item: StepperTypes.Item) => newItem.label === item.label);
-  e.component.option(`items[${newIndex - 1}].disabled`, true);
-};
+  </>
+);
 
 export default function App(): JSX.Element {
+  const [steps, setSteps] = useState([
+    { label: 'Personal Details', render: renderFirstItem },
+    { label: 'Program Selection', icon: 'detailslayout' },
+    { label: 'Campus and Start Dates', icon: 'map' },
+    { label: 'Supporting Documents', icon: 'textdocument' },
+    { label: 'Scholarship and Aid', icon: 'money', optional: true },
+    { label: 'Review and Submit', icon: 'send' }
+  ]);
+
+  const onSelectionChanged = (e: StepperTypes.SelectionChangedEvent) => {
+    const newItem = e.addedItems[0];
+    const newIndex = steps.findIndex((item) => item.label === newItem.label);
+
+    if (newIndex > 0 && !steps[newIndex - 1].disabled) {
+      const updated = [...steps];
+      updated[newIndex - 1] = { ...updated[newIndex - 1], disabled: true };
+      setSteps(updated);
+    }
+  };
+
   return (
     <Stepper onSelectionChanged={onSelectionChanged}>
-      <Item label="Personal Details" render={renderFirstItem} />
-      <Item label="Program Selection" icon="detailslayout" />
-      <Item label="Campus and Start Dates" icon="map" />
-      <Item label="Supporting Documents" icon="textdocument" />
-      <Item label="Scholarship and Aid" icon="money" optional={true} />
-      <Item label="Review and Submit" icon="send" />
+      {steps.map((item, index) => (
+        <Item key={index} {...item} />
+      ))}
     </Stepper>
   );
 }

Vue/src/components/HomeContent.vue

@@ -1,26 +1,42 @@
+<template>
+  <DxStepper ref="stepperRef" @selection-changed="onSelectionChanged">
+  <DxItem
+    v-for="(item, index) in items"
+    :key="index"
+    v-bind="item"
+    :template="item.template"
+  />
+  <template #star="{ data }">
+    <div class="star dx-step-indicator"></div>
+    <div class="dx-step-caption">
+      <div class="dx-step-label">{{ data.label }}</div>
+    </div>
+  </template>
+</DxStepper>
+</template>
 <script setup lang="ts">
 import { DxStepper, DxItem, DxStepperTypes } from 'devextreme-vue/stepper';
+import { reactive } from 'vue';
+const items = reactive([
+  { label: 'Personal Details', template: 'star' },
+  { label: 'Program Selection', icon: 'detailslayout' },
+  { label: 'Campus and Start Dates', icon: 'map' },
+  { label: 'Supporting Documents', icon: 'textdocument' },
+  { label: 'Scholarship and Aid', icon: 'money', optional: true },
+  { label: 'Review and Submit', icon: 'send' }
+]);
 const onSelectionChanged = (e: DxStepperTypes.SelectionChangedEvent) => {
   const newItem = e.addedItems[0];
-  const items = e.component.option('items');
-  const newIndex = items.findIndex((item) => newItem.label === item.label);
-  e.component.option(`items[${newIndex - 1}].disabled`, true);
+  const newIndex = items.findIndex((item) => item.label === newItem.label);
+  if (newIndex > 0) {
+    items[newIndex - 1].disabled = true;
+  }
 };
 </script>
-<template>
-  <DxStepper @selection-changed="onSelectionChanged">
-    <DxItem label='Personal Details' template='star' />
-    <template #star="{ data }">
-      <div class="star dx-step-indicator">
-      </div>
-      <div class="dx-step-caption">
-        <div class="dx-step-label">{{ data.label }}</div>
-      </div>
-    </template>
-    <DxItem label="Program Selection" icon='detailslayout' />
-    <DxItem label="Campus and Start Dates" icon='map' />
-    <DxItem label="Supporting Documents" icon='textdocument' />
-    <DxItem label="Scholarship and Aid" icon='money' :optional='true' />
-    <DxItem label="Review and Submit" icon='send' />
-  </DxStepper>
-</template>
+<style>
+.star { 
+  aspect-ratio: 1;
+  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%); 
+  box-shadow: 0 0 0 8px #fafafa;
+}
+</style>