feat: add NeStepper and minor fixes (#97)

Author: andre8244

src/components/NeDropdown.vue

@@ -13,7 +13,7 @@ import { ref, watch } from 'vue'
 
 export interface Props {
   items: NeDropdownItem[]
-  alignToRight: boolean
+  alignToRight?: boolean
   openMenuAriaLabel?: string
   menuClasses?: string
 }

src/components/NePaginator.vue

@@ -230,7 +230,7 @@ function navigateToPage(page: number) {
         </template>
         <li>
           <button
-            :disabled="currentPage === totalPages"
+            :disabled="currentPage >= totalPages"
             :aria-label="nextLabel"
             class="flex h-10 items-center justify-center rounded-e-lg border border-gray-300 bg-white px-4 leading-tight text-gray-500 hover:bg-gray-50 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-950 dark:text-gray-400 dark:hover:bg-gray-900 dark:hover:text-white"
             @click="navigateToPage(currentPage + 1)"

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/components/NeTableRow.vue

@@ -18,7 +18,13 @@ const trCardStyle: Record<Breakpoint, string> = {
 }
 </script>
 <template>
-  <tr :class="[`grid`, `hover:bg-gray-100 dark:hover:bg-gray-800`, trCardStyle[cardBreakpoint]]">
+  <tr
+    :class="[
+      `grid`,
+      `transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800`,
+      trCardStyle[cardBreakpoint]
+    ]"
+  >
     <slot />
   </tr>
 </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: {}
+}