fds-vue-core 4.4.4 → 4.5.2

package/README.md

@@ -85,6 +85,67 @@ After registration, you can use components directly in your templates:
 </template>
 ```
 
+### 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.
+
+```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' },
+]
+
+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
+}
+</script>
+
+<template>
+  <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 }">
+      <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>
+  </FdsWizard>
+</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)
+
 ### Individual Component Import
 
 You can also import specific components:

package/components.d.ts

@@ -22,6 +22,7 @@ import type { FdsSpinnerProps } from './src/components/FdsSpinner/types'
 import type { FdsStickerProps } from './src/components/FdsSticker/types'
 import type { WrapperProps } from './src/components/FdsTreeView/types'
 import type { FdsTruncatedTextProps } from './src/components/FdsTruncatedText/types'
+import type { FdsWizardProps } from './src/components/FdsWizard/types'
 import type { FdsCheckboxProps } from './src/components/Form/FdsCheckbox/types'
 import type { FdsInputProps } from './src/components/Form/FdsInput/types'
 import type { FdsRadioProps } from './src/components/Form/FdsRadio/types'
@@ -72,6 +73,7 @@ declare module '@vue/runtime-core' {
     FdsPagination: DefineComponent<FdsPaginationProps>
     FdsSearchSelect: DefineComponent<FdsSearchSelectProps>
     FdsTruncatedText: DefineComponent<FdsTruncatedTextProps>
+    FdsWizard: DefineComponent<FdsWizardProps>
     FdsH1: DefineComponent<FdsH1Props>
     FdsH2: DefineComponent<FdsH2Props>
     FdsH3: DefineComponent<FdsH3Props>