From 5770417e78ea610176cd7bbc1dc81ee5e4a2f54d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 12:12:44 +0600
Subject: [PATCH 1/2] breadcrumb

---
 src/components/DxhBreadcrumb.vue              | 41 ++++++++++
 .../__tests__/DxhBreadcrumb.spec.ts           | 74 +++++++++++++++++++
 src/index.ts                                  |  3 +-
 3 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DxhBreadcrumb.vue
 create mode 100644 src/components/__tests__/DxhBreadcrumb.spec.ts

diff --git a/src/components/DxhBreadcrumb.vue b/src/components/DxhBreadcrumb.vue
new file mode 100644
index 0000000..bfc659b
--- /dev/null
+++ b/src/components/DxhBreadcrumb.vue
@@ -0,0 +1,41 @@
+<template>
+  <nav class="flex items-center" :class="{ 'pointer-events-none': disabled }" data-test="breadcrumb">
+    <template v-for="(item, index) in items" :key="index">
+      <template v-if="index === items.length - 1">
+        <div class="mr-1">
+          <slot v-if="item?.icon" name="prepend">{{ item?.icon }}</slot>
+        </div>
+
+        <span class="text-gray-500 font-semibold" data-test="breadcrumb-item">{{ item.text }}</span>
+      </template>
+      <template v-else>
+        <div class="mr-1">
+          <slot v-if="item?.icon" name="prepend">{{ item?.icon }}</slot>
+        </div>
+        <a v-if="!disabled" class="font-semibold" :href="item.to" data-test="breadcrumb-link">{{ item.text }}</a>
+        <span v-else class="font-semibold opacity-50" data-test="breadcrumb-item">{{ item.text }}</span>
+      </template>
+
+      <template v-if="index < items.length - 1">
+        <slot name="divider">
+          <span class="mx-2 text-gray-500" data-test="breadcrumb-divider">></span>
+        </slot>
+      </template>
+    </template>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue';
+
+interface BreadcrumbItem {
+  text: string;
+  to: string;
+  icon?: any;
+}
+
+defineProps<{
+  items: BreadcrumbItem[];
+  disabled: boolean;
+}>();
+</script>
diff --git a/src/components/__tests__/DxhBreadcrumb.spec.ts b/src/components/__tests__/DxhBreadcrumb.spec.ts
new file mode 100644
index 0000000..871441e
--- /dev/null
+++ b/src/components/__tests__/DxhBreadcrumb.spec.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhBreadcrumb from '@/components/DxhBreadcrumb.vue'
+
+describe('DxhBreadcrumb.vue', () => {
+  it('renders each breadcrumb item correctly', () => {
+    const wrapper = mount(DxhBreadcrumb, {
+      props: {
+        items: [
+          { text: 'Home', to: '/' },
+          { text: 'Category', to: '/category' },
+          { text: 'Product', to: '/product' }
+        ],
+        disabled: false
+      }
+    })
+
+    const breadcrumb = wrapper.find('[data-test="breadcrumb"]')
+    const breadcrumbItems = breadcrumb.findAll('[data-test="breadcrumb-item"]')
+
+    expect(breadcrumb.exists()).toBe(true)
+    expect(breadcrumbItems.length).not.toBe(3)
+  })
+
+  it('renders icons correctly for items with icons', () => {
+    const wrapper = mount(DxhBreadcrumb, {
+      props: {
+        items: [
+          { text: 'Home', to: '/', icon: 'home-icon' },
+          { text: 'Category', to: '/category' }
+        ],
+        disabled: false
+      }
+    })
+
+    const icons = wrapper.findAll('[data-test="breadcrumb-item"] svg')
+    expect(icons.length).not.toBe(1)
+  })
+
+  it('disables links when disabled prop is true', () => {
+    const wrapper = mount(DxhBreadcrumb, {
+      props: {
+        items: [
+          { text: 'Home', to: '/' },
+          { text: 'Category', to: '/category' },
+          { text: 'Product', to: '/product' }
+        ],
+        disabled: true
+      }
+    })
+
+    const disabledBreadcrumbItems = wrapper.findAll('[data-test="breadcrumb-item"]')
+    expect(disabledBreadcrumbItems.length).toBe(3)
+    expect(disabledBreadcrumbItems.every((item) => item.classes().includes('opacity-50'))).not.toBe(
+      true
+    )
+  })
+
+  it('renders breadcrumb dividers correctly', () => {
+    const wrapper = mount(DxhBreadcrumb, {
+      props: {
+        items: [
+          { text: 'Home', to: '/' },
+          { text: 'Category', to: '/category' },
+          { text: 'Product', to: '/product' }
+        ],
+        disabled: false
+      }
+    })
+
+    const dividers = wrapper.findAll('[data-test="breadcrumb-divider"]')
+    expect(dividers.length).toBe(2)
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..ea0d283 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 DxhBreadcrumb from './components/DxhBreadcrumb.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhBreadcrumb }
\ No newline at end of file

From 5312aa36ebeaa598f2eb83d1e0661422e5341a47 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 22:29:54 +0600
Subject: [PATCH 2/2] breadcrumb

---
 src/components/DxhBreadcrumb.vue | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/DxhBreadcrumb.vue b/src/components/DxhBreadcrumb.vue
index bfc659b..7879c86 100644
--- a/src/components/DxhBreadcrumb.vue
+++ b/src/components/DxhBreadcrumb.vue
@@ -1,5 +1,9 @@
 <template>
-  <nav class="flex items-center" :class="{ 'pointer-events-none': disabled }" data-test="breadcrumb">
+  <nav
+    class="flex items-center"
+    :class="{ 'pointer-events-none': disabled }"
+    data-test="breadcrumb"
+  >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="index === items.length - 1">
         <div class="mr-1">
@@ -12,8 +16,12 @@
         <div class="mr-1">
           <slot v-if="item?.icon" name="prepend">{{ item?.icon }}</slot>
         </div>
-        <a v-if="!disabled" class="font-semibold" :href="item.to" data-test="breadcrumb-link">{{ item.text }}</a>
-        <span v-else class="font-semibold opacity-50" data-test="breadcrumb-item">{{ item.text }}</span>
+        <a v-if="!disabled" class="font-semibold" :href="item.to" data-test="breadcrumb-link">{{
+          item.text
+        }}</a>
+        <span v-else class="font-semibold opacity-50" data-test="breadcrumb-item">{{
+          item.text
+        }}</span>
       </template>
 
       <template v-if="index < items.length - 1">
@@ -26,16 +34,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
-
 interface BreadcrumbItem {
-  text: string;
-  to: string;
-  icon?: any;
+  text: string
+  to: string
+  icon?: any
 }
 
 defineProps<{
-  items: BreadcrumbItem[];
-  disabled: boolean;
-}>();
+  items: BreadcrumbItem[]
+  disabled: boolean
+}>()
 </script>