Stepper

src/components/DxhSteps.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="p-8 shadow-md" data-test="your-component">
+    <div class="flex items-center justify-between space-x-3 w-full">
+      <template v-for="(step, index) in steps" :key="index">
+        <div
+          class="flex items-center justify-center space-x-2"
+          :class="{
+            'text-gray-500': index > 0 && index > currentStep,
+            'text-black': index <= currentStep
+          }"
+          :data-test="`step-${index}`"
+        >
+          <slot name="step" :index="index" :currentStep="currentStep">
+            <div
+              class="rounded-full border"
+              :class="{
+                'border-gray-500 bg-white': index > 0 && index > currentStep,
+                'border-blue-500 bg-blue-500 text-white': index <= currentStep
+              }"
+              :data-test="`step-circle-${index}`"
+            >
+              <p class="px-3 py-[5px]">
+                {{ index + 1 }}
+              </p>
+            </div>
+          </slot>
+          <slot
+            name="content"
+            :index="index"
+            :currentStep="currentStep"
+            :title="step.title"
+            :subtitle="step.subtitle"
+          >
+            <div class="text-center" :data-test="`step-content-${index}`">
+              <div
+                v-if="step.title"
+                class="whitespace-nowrap"
+                :class="{ 'font-bold': index === currentStep }"
+              >
+                {{ step.title }}
+              </div>
+              <div
+                v-if="step.subtitle"
+                class="whitespace-nowrap"
+                :class="{ 'font-bold': index === currentStep }"
+              >
+                {{ step.subtitle }}
+              </div>
+            </div>
+          </slot>
+        </div>
+        <div
+          v-if="index < steps.length - 1"
+          class="h-0.5 w-full bg-gray-500"
+          :class="{
+            '!bg-blue-500': index + 1 === currentStep
+          }"
+          :data-test="`step-divider-${index}`"
+        ></div>
+      </template>
+    </div>
+    <slot :currentStep="currentStep">
+      <div class="p-10" v-if="activeStepContent" data-test="active-step-content">
+        <p>{{ activeStepContent }}</p>
+      </div>
+    </slot>
+    <div class="px-10">
+      <button class="ml-5 border px-1" @click="prevStep" data-test="prev-button">Previous</button>
+      <button class="border px-1" @click="nextStep" data-test="next-button">Next</button>
+    </div>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const { steps } = defineProps<{
+  steps: { title: string; subtitle?: string; content?: string }[]
+}>()
+const emit = defineEmits(['next', 'prev'])
+
+const currentStep = ref(0)
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+  emit('next')
+}
+
+const prevStep = () => {
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+  emit('prev')
+}
+const activeStepContent = computed(() => {
+  return steps[currentStep.value]?.content || ''
+})
+</script>

src/components/__tests__/DxhSteps.spec.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhSteps from '../DxhSteps.vue'
+
+describe('DxhSteps.vue', () => {
+  it('renders the component with the correct steps and buttons', async () => {
+    const steps = [
+      { title: 'Step 1', subtitle: 'Subtitle 1', content: 'Content 1' },
+      { title: 'Step 2', subtitle: 'Subtitle 2', content: 'Content 2' },
+      { title: 'Step 3', subtitle: 'Subtitle 3', content: 'Content 3' }
+    ]
+
+    const wrapper: any = mount(DxhSteps, {
+      props: {
+        steps
+      }
+    })
+
+    const component = wrapper.element
+    expect(component.getAttribute('data-test')).toBe('your-component')
+
+    const stepDivs = wrapper.findAll('[data-test^="step-"]')
+    expect(stepDivs.length).not.toBe(steps.length)
+
+    const prevButton = wrapper.find('[data-test="prev-button"]')
+    const nextButton = wrapper.find('[data-test="next-button"]')
+    expect(prevButton.exists()).toBe(true)
+    expect(nextButton.exists()).toBe(true)
+
+    const activeStepContent = wrapper.find('[data-test="active-step-content"]')
+    expect(activeStepContent.text()).toBe(steps[0].content)
+
+    await nextButton.trigger('click')
+    expect(wrapper.vm.currentStep).toBe(1)
+
+    await prevButton.trigger('click')
+    expect(wrapper.vm.currentStep).toBe(0)
+  })
+
+  it('updates the step when clicking "Next" button', async () => {
+    const steps = [
+      { title: 'Step 1', subtitle: 'Subtitle 1', content: 'Content 1' },
+      { title: 'Step 2', subtitle: 'Subtitle 2', content: 'Content 2' },
+      { title: 'Step 3', subtitle: 'Subtitle 3', content: 'Content 3' }
+    ]
+
+    const wrapper: any = mount(DxhSteps, {
+      props: {
+        steps
+      }
+    })
+
+    const nextButton = wrapper.find('[data-test="next-button"]')
+    await nextButton.trigger('click')
+
+    expect(wrapper.vm.currentStep).toBe(1)
+  })
+
+  it('updates the step when clicking "Previous" button', async () => {
+    const steps = [
+      { title: 'Step 1', subtitle: 'Subtitle 1', content: 'Content 1' },
+      { title: 'Step 2', subtitle: 'Subtitle 2', content: 'Content 2' },
+      { title: 'Step 3', subtitle: 'Subtitle 3', content: 'Content 3' }
+    ]
+
+    const wrapper: any = mount(DxhSteps, {
+      props: {
+        steps
+      }
+    })
+
+    const nextButton = wrapper.find('[data-test="next-button"]')
+    const prevButton = wrapper.find('[data-test="prev-button"]')
+
+    await nextButton.trigger('click')
+    expect(wrapper.vm.currentStep).toBe(1)
+
+    await prevButton.trigger('click')
+    expect(wrapper.vm.currentStep).toBe(0)
+  })
+})

src/index.ts

@@ -1,4 +1,5 @@
-import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DxhSteps from './components/DxhSteps.vue'
 
-export default {DButton, DInput}
+export default { DButton, DInput, DxhSteps }