From f8ad4627aaa63dad6d5d5a6e68fbb27b5fcf944f Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 19 Dec 2023 11:39:48 +0600
Subject: [PATCH 1/3] stepper

---
 src/App.vue                 | 25 +++++++++--
 src/components/DxhSteps.vue | 86 +++++++++++++++++++++++++++++++++++++
 2 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhSteps.vue

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..1b781be 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,24 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div class="m-10">
+    <StepComponent :steps="steps">
+      <template #content="{ currentStep }">
+        <div class="py-10" v-if="currentStep === 1">This is one man</div>
+        <div class="py-10" v-if="currentStep === 2">This is two man yooo</div>
+        <div class="py-10" v-if="currentStep === 3">This is three man yooo</div>
+        <div class="py-10" v-if="currentStep === 4">This is four man yooo</div>
+      </template>
+    </StepComponent>
+  </div>
 </template>
+
+<script setup lang="ts">
+import StepComponent from './components/DxhSteps.vue'
+
+const steps = [
+  { id: 1, title: 'Step 1', subtitle: 'Subtitle 1', content: 'this is content 1' },
+  { id: 2, title: 'Step 2', subtitle: 'Subtitle 2', content: 'this is content 2' },
+  { id: 3, title: 'Step 3', subtitle: 'Subtitle 3', content: 'this is content 3' },
+  { id: 4, title: 'Step 4', subtitle: 'Subtitle 4', content: 'this is content 4' }
+  // Add more steps as needed
+]
+</script>
diff --git a/src/components/DxhSteps.vue b/src/components/DxhSteps.vue
new file mode 100644
index 0000000..eced5be
--- /dev/null
+++ b/src/components/DxhSteps.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="p-8 shadow-md">
+    <div class="flex items-center justify-between space-x-3 w-full">
+      <template v-for="(step, id) in steps" :key="id">
+        <div
+          class="flex items-center justify-center space-x-2"
+          :class="{
+            'text-gray-500': id >1 && id > currentStep,
+            'text-black': id <= currentStep
+          }"
+        >
+          <div
+            class="rounded-full border"
+            :class="{
+              'border-gray-500 bg-white': id > 1 && id > currentStep,
+              'border-blue-500 bg-blue-500 text-white': id <= currentStep
+            }"
+          >
+            <p class="px-3 py-[5px]">
+              {{ id + 1 }}
+            </p>
+          </div>
+          <div class="text-center">
+            <div
+              v-if="step.title"
+              class="whitespace-nowrap"
+              :class="{ 'font-bold': id === currentStep }"
+            >
+              {{ step.title }}
+            </div>
+            <div
+              v-if="step.subtitle"
+              class="whitespace-nowrap"
+              :class="{ 'font-bold': id === currentStep }"
+            >
+              {{ step.subtitle }}
+            </div>
+          </div>
+        </div>
+        <div
+          v-if="id < steps.length - 1"
+          class="h-0.5 w-full bg-gray-500"
+          :class="{
+            '!bg-blue-500': id + 1 === currentStep
+          }"
+        ></div>
+      </template>
+    </div>
+    <slot name="content" :currentStep="currentStep">
+      <div class="p-10" v-if="activeStepContent">
+        <p>{{ activeStepContent }}</p>
+      </div>
+    </slot>
+    <div class="px-10">
+        <button class="ml-5 border px-1" @click="prevStep">Previous</button>
+      <button class="border px-1" @click="nextStep">Next</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
+const { steps } = defineProps<{
+  steps: { title: string; subtitle?: string; content?: string }[]
+}>()
+
+// Change the initial value to 1
+const currentStep = ref(0)
+
+const nextStep = () => {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++
+  }
+}
+
+const prevStep = () => {
+  // Allow going to step 0
+  if (currentStep.value > 0) {
+    currentStep.value--
+  }
+}
+const activeStepContent = computed(() => {
+  return steps[currentStep.value]?.content || ''
+})
+</script>

From 78c45c90cc14454ad25d8f55eb05e62a0b139fc0 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 19 Dec 2023 12:57:38 +0600
Subject: [PATCH 2/3] stepper

---
 src/App.vue                               | 18 ++---
 src/components/DxhSteps.vue               | 85 +++++++++++++----------
 src/components/__tests__/DxhSteps.spec.ts | 81 +++++++++++++++++++++
 3 files changed, 140 insertions(+), 44 deletions(-)
 create mode 100644 src/components/__tests__/DxhSteps.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 1b781be..687e5e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="m-10">
     <StepComponent :steps="steps">
-      <template #content="{ currentStep }">
-        <div class="py-10" v-if="currentStep === 1">This is one man</div>
-        <div class="py-10" v-if="currentStep === 2">This is two man yooo</div>
-        <div class="py-10" v-if="currentStep === 3">This is three man yooo</div>
-        <div class="py-10" v-if="currentStep === 4">This is four man yooo</div>
+      <template #default="{ currentStep }">
+        <div v-if="currentStep === 0">This is one man</div>
+        <div v-if="currentStep === 1">This is two man yooo</div>
+        <div v-if="currentStep === 2">This is 3 man yooo</div>
+        <div v-if="currentStep === 3">This is 4 man yooo</div>
       </template>
     </StepComponent>
   </div>
@@ -15,10 +15,10 @@
 import StepComponent from './components/DxhSteps.vue'
 
 const steps = [
-  { id: 1, title: 'Step 1', subtitle: 'Subtitle 1', content: 'this is content 1' },
-  { id: 2, title: 'Step 2', subtitle: 'Subtitle 2', content: 'this is content 2' },
-  { id: 3, title: 'Step 3', subtitle: 'Subtitle 3', content: 'this is content 3' },
-  { id: 4, title: 'Step 4', subtitle: 'Subtitle 4', content: 'this is content 4' }
+  { title: 'Step 1', subtitle: 'Subtitle 1', content: 'this is content 1' },
+  { title: 'Step 2', subtitle: 'Subtitle 2', content: 'this is content 2' },
+  { title: 'Step 3', subtitle: 'Subtitle 3', content: 'this is content 3' },
+  { title: 'Step 4', subtitle: 'Subtitle 4', content: 'this is content 4' }
   // Add more steps as needed
 ]
 </script>
diff --git a/src/components/DxhSteps.vue b/src/components/DxhSteps.vue
index eced5be..6f1d564 100644
--- a/src/components/DxhSteps.vue
+++ b/src/components/DxhSteps.vue
@@ -1,84 +1,99 @@
 <template>
-  <div class="p-8 shadow-md">
+  <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, id) in steps" :key="id">
+      <template v-for="(step, index) in steps" :key="index">
         <div
           class="flex items-center justify-center space-x-2"
           :class="{
-            'text-gray-500': id >1 && id > currentStep,
-            'text-black': id <= currentStep
+            'text-gray-500': index > 0 && index > currentStep,
+            'text-black': index <= currentStep
           }"
+          :data-test="`step-${index}`"
         >
-          <div
-            class="rounded-full border"
-            :class="{
-              'border-gray-500 bg-white': id > 1 && id > currentStep,
-              'border-blue-500 bg-blue-500 text-white': id <= currentStep
-            }"
-          >
-            <p class="px-3 py-[5px]">
-              {{ id + 1 }}
-            </p>
-          </div>
-          <div class="text-center">
+          <slot name="step" :index="index" :currentStep="currentStep">
             <div
-              v-if="step.title"
-              class="whitespace-nowrap"
-              :class="{ 'font-bold': id === currentStep }"
+              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}`"
             >
-              {{ step.title }}
+              <p class="px-3 py-[5px]">
+                {{ index + 1 }}
+              </p>
             </div>
-            <div
-              v-if="step.subtitle"
-              class="whitespace-nowrap"
-              :class="{ 'font-bold': id === currentStep }"
-            >
-              {{ step.subtitle }}
+          </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>
-          </div>
+          </slot>
         </div>
         <div
-          v-if="id < steps.length - 1"
+          v-if="index < steps.length - 1"
           class="h-0.5 w-full bg-gray-500"
           :class="{
-            '!bg-blue-500': id + 1 === currentStep
+            '!bg-blue-500': index + 1 === currentStep
           }"
+          :data-test="`step-divider-${index}`"
         ></div>
       </template>
     </div>
-    <slot name="content" :currentStep="currentStep">
-      <div class="p-10" v-if="activeStepContent">
+    <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">Previous</button>
-      <button class="border px-1" @click="nextStep">Next</button>
+      <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'])
 
-// Change the initial value to 1
 const currentStep = ref(0)
 
 const nextStep = () => {
   if (currentStep.value < steps.length - 1) {
     currentStep.value++
   }
+  emit('next')
 }
 
 const prevStep = () => {
-  // Allow going to step 0
   if (currentStep.value > 0) {
     currentStep.value--
   }
+  emit('prev')
 }
 const activeStepContent = computed(() => {
   return steps[currentStep.value]?.content || ''
diff --git a/src/components/__tests__/DxhSteps.spec.ts b/src/components/__tests__/DxhSteps.spec.ts
new file mode 100644
index 0000000..a17ca97
--- /dev/null
+++ b/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)
+  })
+})

From 97ed8317b3243962d0f583a07ffc4fb5ef6311f3 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 19 Dec 2023 13:02:01 +0600
Subject: [PATCH 3/3] stepper

---
 src/App.vue  | 25 +++----------------------
 src/index.ts |  7 ++++---
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 687e5e0..a0d7a19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,5 @@
 <template>
-  <div class="m-10">
-    <StepComponent :steps="steps">
-      <template #default="{ currentStep }">
-        <div v-if="currentStep === 0">This is one man</div>
-        <div v-if="currentStep === 1">This is two man yooo</div>
-        <div v-if="currentStep === 2">This is 3 man yooo</div>
-        <div v-if="currentStep === 3">This is 4 man yooo</div>
-      </template>
-    </StepComponent>
-  </div>
+  <main>
+    Vue-Tailwind
+  </main>
 </template>
-
-<script setup lang="ts">
-import StepComponent from './components/DxhSteps.vue'
-
-const steps = [
-  { title: 'Step 1', subtitle: 'Subtitle 1', content: 'this is content 1' },
-  { title: 'Step 2', subtitle: 'Subtitle 2', content: 'this is content 2' },
-  { title: 'Step 3', subtitle: 'Subtitle 3', content: 'this is content 3' },
-  { title: 'Step 4', subtitle: 'Subtitle 4', content: 'this is content 4' }
-  // Add more steps as needed
-]
-</script>
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..c8cdde2 100644
--- a/src/index.ts
+++ b/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}
\ No newline at end of file
+export default { DButton, DInput, DxhSteps }