fds-vue-core 4.5.2 → 4.5.4

package/README.md

@@ -87,30 +87,22 @@ After registration, you can use components directly in your templates:
 
 ### FdsWizard (Route-Based)
 
-`FdsWizard` is a route-based step component that accepts a `routes` array, supports incoming route params/prefill data, and keeps a local wizard state.
+`FdsWizard` is a route-based step component. It only renders the step indicator and emits navigation; **all data lives in the consumer**. Listen to `@go`, call `router.push({ name: payload.route.routeName, params, query })`, and pass the current route name via `activeRouteName` (or rely on vue-router so the component reads `currentRoute.name`).
 
 ```vue
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const activeRoutePath = ref('/wizard/start')
-
 const activeRouteName = ref('wizard-start')
 
 const wizardRoutes = [
-  { id: 'start', name: 'Start', routeName: 'wizard-start', to: '/wizard/start', prefillData: { source: 'campaign' } },
-  { id: 'details', name: 'Details', routeName: 'wizard-details', to: '/wizard/details', params: { personId: '191212121212' } },
-  { id: 'review', name: 'Review', routeName: 'wizard-review', to: '/wizard/review' },
+  { id: 'start', name: 'Start', routeName: 'wizard-start' },
+  { id: 'details', name: 'Details', routeName: 'wizard-details' },
+  { id: 'review', name: 'Review', routeName: 'wizard-review' },
 ]
 
-const initialWizardState = {
-  channel: 'web',
-}
-
-const handleGo = (payload: { route: { routeName?: string; to?: string } }) => {
-  // Useful in environments without vue-router
-  activeRouteName.value = payload.route.routeName ?? activeRouteName.value
-  activeRoutePath.value = payload.route.to ?? activeRoutePath.value
+const handleGo = (payload: { route: { routeName: string } }) => {
+  activeRouteName.value = payload.route.routeName
 }
 </script>
 
@@ -118,17 +110,11 @@ const handleGo = (payload: { route: { routeName?: string; to?: string } }) => {
   <FdsWizard
     :routes="wizardRoutes"
     :activeRouteName="activeRouteName"
-    :activeRoutePath="activeRoutePath"
-    :initialState="initialWizardState"
     :completedTo="0"
     @go="handleGo"
-    @stateChange="(payload) => console.log(payload.state)"
   >
-    <template #default="{ state, setState, nextStep, previousStep, currentRoute }">
+    <template #default="{ currentRoute, currentStepIndex, nextStep, previousStep }">
       <p>Current step: {{ currentRoute?.name }}</p>
-      <p>Wizard state: {{ state }}</p>
-
-      <button @click="setState({ acceptedTerms: true })">Update state</button>
       <button @click="previousStep">Previous</button>
       <button @click="nextStep">Next</button>
     </template>
@@ -136,15 +122,7 @@ const handleGo = (payload: { route: { routeName?: string; to?: string } }) => {
 </template>
 ```
 
-`routes` items support:
-
-- `id`, `name` (required)
-- `routeName` (recommended, used first when matching and navigating)
-- `to` (path fallback, optional when `routeName` is used)
-- `params` (incoming route params)
-- `query` (incoming query values)
-- `prefillData` (merged into local state on step activation)
-- `disabled` (disables specific step)
+`routes` items: `id`, `name`, `routeName` (required); `to`, `params`, `query` (optional, for your router); `disabled` (optional).
 
 ### Individual Component Import