feat: add NeStepper component

Author: andre8244

src/components/NeStepper.vue

@@ -0,0 +1,31 @@
+<!--
+  Copyright (C) 2025 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import NeProgressBar from './NeProgressBar.vue'
+import { range } from 'lodash-es'
+
+const { totalSteps, currentStep, stepLabel } = defineProps<{
+  totalSteps: number
+  currentStep: number
+  stepLabel: string
+}>()
+</script>
+
+<template>
+  <div>
+    <NeProgressBar :progress="(currentStep / totalSteps) * 100" size="sm" />
+    <div class="mt-2 flex flex-row">
+      <div v-for="i in range(1, totalSteps + 1)" :key="i" class="flex grow basis-0 justify-center">
+        <p
+          v-if="i == currentStep"
+          class="text-primary-700 dark:text-primary-500 text-xs font-medium"
+        >
+          {{ stepLabel }} {{ currentStep }}/{{ totalSteps }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

src/main.ts

@@ -40,6 +40,7 @@ export { default as NeDropdownFilter } from './components/NeDropdownFilter.vue'
 export { default as NeSortDropdown } from './components/NeSortDropdown.vue'
 export { default as NeAvatar } from './components/NeAvatar.vue'
 export { default as NeBadgeV2 } from './components/NeBadgeV2.vue'
+export { default as NeStepper } from './components/NeStepper.vue'
 
 // types export
 export type { NeComboboxOption } from './components/NeCombobox.vue'

stories/NeStepper.stories.ts

@@ -0,0 +1,32 @@
+//  Copyright (C) 2025 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { NeStepper } from '../src/main'
+
+const meta = {
+  title: 'NeStepper',
+  component: NeStepper,
+  tags: ['autodocs'],
+  args: {
+    totalSteps: 4,
+    currentStep: 1,
+    stepLabel: 'Step'
+  } // default values
+} satisfies Meta<typeof NeStepper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `<NeStepper v-bind="args" />`
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeStepper },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}