@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/organisms/StepperHeader/StepperHeader.stories.ts

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import StepperHeader from './StepperHeader.vue'
+import Button from '../../atoms/Button/Button.vue'
+
+export default {
+  title: 'Components/Organisms/Stepper Header',
+  component: StepperHeader,
+} satisfies Meta<typeof StepperHeader>
+
+type Story = StoryObj<typeof StepperHeader>
+
+export const Default: Story = {
+  args: {
+    title: 'Stepper Header Title',
+    steps: ['Soort', 'Type', 'Inhoud', 'Template', 'Bewerk', 'Inplannen'],
+    currentStep: 0,
+    backButtonText: 'Back',
+    backButtonAction: () => alert('Back button clicked'),
+  },
+}
+
+export const ManySteps: Story = {
+  args: {
+    title: 'Stepper Header Title',
+    steps: [
+      'Soort',
+      'Type',
+      'Inhoud',
+      'Template',
+      'Bewerk',
+      'Inplannen',
+      'Doelgroep',
+      'Kanalen',
+      'Budget',
+      'Planning',
+      'Controle',
+      'Verzenden',
+    ],
+    currentStep: 4,
+    backButtonText: 'Back',
+    backButtonAction: () => alert('Back button clicked'),
+  },
+}
+
+export const WithSlots: Story = {
+  args: {
+    title: 'Stepper Header Title',
+    steps: ['Soort', 'Type', 'Inhoud', 'Template', 'Bewerk', 'Inplannen'],
+    currentStep: 0,
+    backButtonText: 'Back',
+    backButtonAction: () => alert('Back button clicked'),
+  },
+  render: (args) => ({
+    components: { StepperHeader, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <StepperHeader v-bind="args">
+        <Button>Next</Button>
+      </StepperHeader>
+    `,
+  }),
+}
+
+// The title slot replaces the static title, e.g. with an inline editable field.
+export const EditableTitle: Story = {
+  args: {
+    steps: ['Soort', 'Type', 'Inhoud', 'Template', 'Bewerk', 'Inplannen'],
+    currentStep: 2,
+    backButtonText: 'Back',
+    backButtonAction: () => alert('Back button clicked'),
+  },
+  render: (args) => ({
+    components: { StepperHeader, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <StepperHeader v-bind="args">
+        <template #title>
+          <input
+            class="min-w-0 flex-1 truncate rounded-lg border border-gray-200 px-4 py-2 heading-4 text-sapphire-500"
+            value="Voorstel voor Jan de Vries"
+          />
+        </template>
+        <Button>Next</Button>
+      </StepperHeader>
+    `,
+  }),
+}

package/src/components/organisms/StepperHeader/StepperHeader.test.ts

@@ -0,0 +1,279 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import StepperHeader from './StepperHeader.vue'
+import Header from '../Header/Header.vue'
+import ProgressBar from '../ProgressBar/ProgressBar.vue'
+
+describe('StepperHeader', () => {
+  const defaultProps = {
+    title: 'Test Title',
+    currentStep: 0,
+    steps: ['Step 1', 'Step 2', 'Step 3'],
+    backButtonAction: vi.fn(),
+  }
+
+  it('renders the header component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.exists()).toBe(true)
+  })
+
+  it('passes title prop to Header component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('title')).toBe('Test Title')
+  })
+
+  it('passes backButtonAction to Header component', () => {
+    const backButtonAction = vi.fn()
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        backButtonAction,
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('backButtonAction')).toBe(backButtonAction)
+  })
+
+  it('passes backButtonText to Header component when provided', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        backButtonText: 'Go Back',
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('backButtonText')).toBe('Go Back')
+  })
+
+  it('renders ProgressBar component when steps are provided', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+  })
+
+  it('passes correct props to ProgressBar component', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        ...defaultProps,
+        currentStep: 2,
+        steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.props('steps')).toBe(4)
+    expect(progressBar.props('stepTitles')).toEqual(['Step 1', 'Step 2', 'Step 3', 'Step 4'])
+    expect(progressBar.props('currentStep')).toBe(2)
+  })
+
+  it('does not render ProgressBar when steps is null or undefined', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+  })
+
+  it('renders default slot content in Header right slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+      slots: {
+        default: '<button class="test-button">Next</button>',
+      },
+    })
+
+    expect(wrapper.find('.test-button').exists()).toBe(true)
+    expect(wrapper.find('.test-button').text()).toBe('Next')
+  })
+
+  it('does not render right slot when default slot is empty', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    // When no default slot is provided, the right slot in Header should not exist
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('applies w-full class to ProgressBar', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.classes()).toContain('w-full')
+  })
+
+  it('renders with all props and slots correctly', () => {
+    const backButtonAction = vi.fn()
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Complete Header',
+        currentStep: 1,
+        steps: ['One', 'Two', 'Three'],
+        backButtonText: 'Previous',
+        backButtonAction,
+      },
+      slots: {
+        default: '<button>Continue</button>',
+      },
+    })
+
+    const header = wrapper.findComponent(Header)
+    expect(header.props('title')).toBe('Complete Header')
+    expect(header.props('backButtonText')).toBe('Previous')
+    expect(header.props('backButtonAction')).toBe(backButtonAction)
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.props('currentStep')).toBe(1)
+    expect(progressBar.props('steps')).toBe(3)
+    expect(progressBar.props('stepTitles')).toEqual(['One', 'Two', 'Three'])
+
+    expect(wrapper.text()).toContain('Continue')
+  })
+
+  it('renders without steps and without default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('renders with steps but without default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+    expect(wrapper.find('.ml-auto').exists()).toBe(false)
+  })
+
+  it('renders without steps but with default slot', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: null as any,
+        backButtonAction: vi.fn(),
+      },
+      slots: {
+        default: '<button class="action-button">Action</button>',
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+    expect(wrapper.find('.action-button').exists()).toBe(true)
+    expect(wrapper.find('.ml-auto').exists()).toBe(true)
+  })
+
+  it('renders with empty steps array', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        steps: [],
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    // Empty array is truthy, so ProgressBar should still render
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(true)
+    expect(progressBar.props('steps')).toBe(0)
+    expect(progressBar.props('stepTitles')).toEqual([])
+  })
+
+  it('renders with undefined steps', () => {
+    const wrapper = mount(StepperHeader, {
+      props: {
+        title: 'Test',
+        currentStep: 0,
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+        steps: undefined as any,
+        backButtonAction: vi.fn(),
+      },
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    expect(progressBar.exists()).toBe(false)
+  })
+
+  it('emits update:currentStep when ProgressBar emits it', async () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+    })
+
+    const progressBar = wrapper.findComponent(ProgressBar)
+    await progressBar.vm.$emit('update:currentStep', 1)
+
+    expect(wrapper.emitted('update:currentStep')).toBeTruthy()
+    expect(wrapper.emitted('update:currentStep')![0]).toEqual([1])
+  })
+
+  it('forwards the title slot to Header', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+      slots: { title: '<input class="title-field" value="Eigen titel" />' },
+    })
+
+    expect(wrapper.find('.title-field').exists()).toBe(true)
+    expect(wrapper.text()).not.toContain('Test Title')
+  })
+
+  it('renders the static title when no title slot is given', () => {
+    const wrapper = mount(StepperHeader, { props: defaultProps })
+
+    expect(wrapper.text()).toContain('Test Title')
+  })
+
+  it('forwards the back-button slot to Header', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+      slots: { 'back-button': '<a class="own-back">Terug</a>' },
+    })
+
+    expect(wrapper.find('.own-back').text()).toBe('Terug')
+  })
+
+  it('keeps the ProgressBar centered when the title slot is used', () => {
+    const wrapper = mount(StepperHeader, {
+      props: defaultProps,
+      slots: { title: '<input class="title-field" />' },
+    })
+
+    expect(wrapper.findComponent(ProgressBar).exists()).toBe(true)
+    expect(wrapper.find('.header').classes()).toContain('grid-cols-3')
+  })
+})

package/src/components/organisms/Table/Table.stories.ts

@@ -0,0 +1,332 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref, type ConcreteComponent } from 'vue'
+import Table, { type TableColumn } from './Table.vue'
+
+type RowKey = 'name' | 'email' | 'role' | 'status' | 'department' | 'lastLogin'
+
+interface TableStoryProps {
+  columns: TableColumn<RowKey>[]
+  rows: Record<RowKey, string>[]
+  selectable?: boolean
+  selectionMode?: 'single' | 'multiple'
+  selectOnRowClick?: boolean
+  loading?: boolean
+}
+
+const meta: Meta<TableStoryProps> = {
+  title: 'Components/Organisms/Table',
+  component: Table as ConcreteComponent<TableStoryProps>,
+}
+
+export default meta
+type Story = StoryObj<TableStoryProps>
+
+const columns: TableColumn<RowKey>[] = [
+  { key: 'name', label: 'Name', sortable: true },
+  { key: 'email', label: 'Email', sortable: true },
+  { key: 'department', label: 'Department' },
+  { key: 'role', label: 'Role', sortable: true, width: '0.5fr' },
+  { key: 'lastLogin', label: 'lastLogin' },
+  { key: 'status', label: 'Status', width: '0.5fr' },
+]
+
+const allRows = [
+  {
+    name: 'Alice Johnson',
+    email: 'alice@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Bob Smith',
+    email: 'bob@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Carol White',
+    email: 'carol@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-12',
+  },
+  {
+    name: 'David Brown',
+    email: 'david@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Eve Turner',
+    email: 'eve@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Frank Miller',
+    email: 'frank@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-26',
+  },
+  {
+    name: 'Grace Lee',
+    email: 'grace@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Henry Wilson',
+    email: 'henry@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-10',
+  },
+  {
+    name: 'Ivy Clark',
+    email: 'ivy@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-20',
+  },
+  {
+    name: 'Jack Davis',
+    email: 'jack@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-23',
+  },
+  {
+    name: 'Karen Harris',
+    email: 'karen@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-19',
+  },
+  {
+    name: 'Leo King',
+    email: 'leo@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-28',
+  },
+  {
+    name: 'Mia Scott',
+    email: 'mia@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-30',
+  },
+  {
+    name: 'Nick Evans',
+    email: 'nick@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-02-05',
+  },
+  {
+    name: 'Olivia Foster',
+    email: 'olivia@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Product',
+    lastLogin: '2026-03-27',
+  },
+  {
+    name: 'Paul Green',
+    email: 'paul@example.com',
+    role: 'Viewer',
+    status: 'Active',
+    department: 'Support',
+    lastLogin: '2026-03-18',
+  },
+  {
+    name: 'Quincy Adams',
+    email: 'quincy@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'Marketing',
+    lastLogin: '2026-03-25',
+  },
+  {
+    name: 'Rachel Lewis',
+    email: 'rachel@example.com',
+    role: 'Admin',
+    status: 'Active',
+    department: 'HR',
+    lastLogin: '2026-03-29',
+  },
+  {
+    name: 'Sam Nelson',
+    email: 'sam@example.com',
+    role: 'Viewer',
+    status: 'Inactive',
+    department: 'Finance',
+    lastLogin: '2026-01-15',
+  },
+  {
+    name: 'Tina Brooks',
+    email: 'tina@example.com',
+    role: 'Editor',
+    status: 'Active',
+    department: 'IT',
+    lastLogin: '2026-03-30',
+  },
+]
+
+const sortRows = (rows: typeof allRows, key: string | undefined, direction: 'asc' | 'desc') => {
+  if (!key) return rows
+  return [...rows].sort((a, b) => {
+    const aVal = String(a[key as keyof typeof a] ?? '')
+    const bVal = String(b[key as keyof typeof b] ?? '')
+    const result = aVal.localeCompare(bVal, undefined, { numeric: true, sensitivity: 'base' })
+    return direction === 'asc' ? result : -result
+  })
+}
+
+export const Default: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      return { args, rows, sortKey, sortDirection }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" />`,
+  }),
+}
+
+export const WithSelection: Story = {
+  args: { columns, rows: allRows, selectable: true },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const selected = ref<Record<RowKey, string>[]>([])
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      return { args, rows, sortKey, sortDirection, selected }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" :selectable="args.selectable" v-model="selected" />`,
+  }),
+}
+
+export const SingleSelection: Story = {
+  args: { columns, rows: allRows, selectable: true, selectionMode: 'single' },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const selected = ref<Record<RowKey, string>[]>([])
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      return { args, rows, sortKey, sortDirection, selected }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" :selectable="args.selectable" :selection-mode="args.selectionMode" v-model="selected" />`,
+  }),
+}
+
+export const SelectionOnRowClick: Story = {
+  args: {
+    columns,
+    rows: allRows,
+    selectable: true,
+    selectionMode: 'single',
+    selectOnRowClick: true,
+  },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const selected = ref<Record<RowKey, string>[]>([])
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      return { args, rows, sortKey, sortDirection, selected }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" :selectable="args.selectable" :selection-mode="args.selectionMode" :select-on-row-click="args.selectOnRowClick" v-model="selected" />`,
+  }),
+}
+
+export const Loading: Story = {
+  args: { columns, rows: allRows, loading: true },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      args.loading = true
+
+      return { args, rows, sortKey, sortDirection }
+    },
+    template: `<Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" :loading="args.loading" />`,
+  }),
+}
+
+export const WithSlots: Story = {
+  args: { columns, rows: allRows },
+  render: (args) => ({
+    components: { Table },
+    setup() {
+      const sortKey = ref<string | undefined>(undefined)
+      const sortDirection = ref<'asc' | 'desc'>('asc')
+      const rows = computed(() =>
+        sortRows(args.rows as typeof allRows, sortKey.value, sortDirection.value),
+      )
+      return { args, rows, sortKey, sortDirection }
+    },
+    template: `
+      <Table :columns="args.columns" :rows="rows" v-model:sort-key="sortKey" v-model:sort-direction="sortDirection" :selectable="true">
+        <template #cell-name="{ value, row }">
+          <div class="flex flex-col">
+            <span class="font-medium">{{ value }}</span>
+            <span class="text-xs text-slate-400">{{ row.email }}</span>
+          </div>
+        </template>
+        <template #cell-status="{ value }">
+          <span
+            class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
+            :class="value === 'Active' ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'"
+          >
+            {{ value }}
+          </span>
+        </template>
+      </Table>
+    `,
+  }),
+}
+
+export const Empty: Story = {
+  args: { columns, rows: [] },
+}