fds-vue-core 4.5.1 → 4.5.4

package/README.md

@@ -85,6 +85,45 @@ After registration, you can use components directly in your templates:
 </template>
 ```
 
+### FdsWizard (Route-Based)
+
+`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 activeRouteName = ref('wizard-start')
+
+const wizardRoutes = [
+  { id: 'start', name: 'Start', routeName: 'wizard-start' },
+  { id: 'details', name: 'Details', routeName: 'wizard-details' },
+  { id: 'review', name: 'Review', routeName: 'wizard-review' },
+]
+
+const handleGo = (payload: { route: { routeName: string } }) => {
+  activeRouteName.value = payload.route.routeName
+}
+</script>
+
+<template>
+  <FdsWizard
+    :routes="wizardRoutes"
+    :activeRouteName="activeRouteName"
+    :completedTo="0"
+    @go="handleGo"
+  >
+    <template #default="{ currentRoute, currentStepIndex, nextStep, previousStep }">
+      <p>Current step: {{ currentRoute?.name }}</p>
+      <button @click="previousStep">Previous</button>
+      <button @click="nextStep">Next</button>
+    </template>
+  </FdsWizard>
+</template>
+```
+
+`routes` items: `id`, `name`, `routeName` (required); `to`, `params`, `query` (optional, for your router); `disabled` (optional).
+
 ### 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>