From 6eadde1dcd6925cae82aed4318d0d1e9128f7559 Mon Sep 17 00:00:00 2001
From: Nandor Kraszlan <nandor.kraszlan@gmail.com>
Date: Mon, 8 Mar 2021 10:26:42 +0000
Subject: [PATCH 1/3]  #90 - Started feature

---
 src/components/breadcrumbs/Demo.vue           | 23 +++++++
 src/components/breadcrumbs/UIBreadcrumbs.vue  | 69 +++++++++++++++++++
 .../range-slider/UIRangeSlider.test.ts        |  2 +-
 3 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 src/components/breadcrumbs/Demo.vue
 create mode 100644 src/components/breadcrumbs/UIBreadcrumbs.vue

diff --git a/src/components/breadcrumbs/Demo.vue b/src/components/breadcrumbs/Demo.vue
new file mode 100644
index 00000000..180ac7bf
--- /dev/null
+++ b/src/components/breadcrumbs/Demo.vue
@@ -0,0 +1,23 @@
+<template>
+    <UIBreadcrumbs />
+
+    With Slots
+    <UIBreadcrumbs>
+        <template #separator="slotProps">
+            {{ slotProps.next ? '&nbsp;|&nbsp;': '' }}
+        </template>
+        <template #breadcrumbs="slotProps">
+            slotted {{ slotProps.crumb.path }}
+        </template>
+    </UIBreadcrumbs>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import UIBreadcrumbs from '@components/breadcrumbs/UIBreadcrumbs.vue';
+
+export default defineComponent({
+    name: 'Breadcrumbs',
+    components: { UIBreadcrumbs }
+});
+</script>
diff --git a/src/components/breadcrumbs/UIBreadcrumbs.vue b/src/components/breadcrumbs/UIBreadcrumbs.vue
new file mode 100644
index 00000000..6185d34e
--- /dev/null
+++ b/src/components/breadcrumbs/UIBreadcrumbs.vue
@@ -0,0 +1,69 @@
+<template>
+    <template v-if="$slots.default">
+        <slot />
+    </template>
+    <ul v-else class="flex items-center flex-wrap">
+        <li v-for="(crumb, index) in routeCrumbs" :key="crumb.path">
+            <slot :name="crumb.path" :route="crumb">
+                <router-link v-if="$router.currentRoute.path !== crumb.path" :to="crumb">
+                    {{ crumb?.meta?.label ?? crumb.path.slice(1) }}
+                </router-link>
+                <template v-else>
+                    {{ crumb?.meta?.label ?? crumb.path.slice(1) }}
+                </template>
+            </slot>
+            <slot name="separator"
+                  :previous="crumb"
+                  :next="routeCrumbs[index + 1]">
+                {{ routeCrumbs[index + 1] ? separator : '' }}
+            </slot>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, getCurrentInstance } from 'vue';
+import type { PropType } from 'vue';
+import type { Router, RouteLocation } from 'vue-router';
+
+// todo - vertical
+
+export default defineComponent({
+    name: 'UIBreadcrumbs',
+
+    props: {
+        separator: {
+            type: String,
+            default: '/'
+        },
+
+        crumbs: {
+            type: Array as PropType<string[]>
+        }
+    },
+
+    setup() {
+        const routeCrumbs = computed<boolean | RouteLocation[]>(() => {
+            const instance = getCurrentInstance();
+            if (!instance) {
+                return false;
+            }
+
+            const router = getCurrentInstance()!.appContext.config.globalProperties.$router as Router;
+            const routes: RouteLocation[] = [];
+            router.currentRoute.value.path.split('/').reduce((previous, next) => {
+                if (next) {
+                    routes.push(router.resolve(next));
+                    return '/' + next;
+                }
+            }, '');
+
+            return routes;
+        });
+
+        return {
+            routeCrumbs
+        };
+    }
+});
+</script>
diff --git a/src/components/range-slider/UIRangeSlider.test.ts b/src/components/range-slider/UIRangeSlider.test.ts
index 0aac5c4d..c9c1de8a 100644
--- a/src/components/range-slider/UIRangeSlider.test.ts
+++ b/src/components/range-slider/UIRangeSlider.test.ts
@@ -39,7 +39,7 @@ describe('UIRangeSlider', () => {
         });
 
         await wrapper.find('input').setValue(75);
-        expect(wrapper.emitted('update:modelValue')[0]).toStrictEqual(['75']);
+        expect(wrapper.emitted('update:modelValue')![0]).toStrictEqual(['75']);
         await wrapper.setProps({ disabled: true });
         await wrapper.find('input').setValue(0);
         expect(wrapper.emitted('update:modelValue')).toHaveLength(1);

From 88f384be040f644fa33f6873a49ed9805af1d2ec Mon Sep 17 00:00:00 2001
From: Nandor Kraszlan <nandor.kraszlan@gmail.com>
Date: Thu, 25 Mar 2021 11:51:14 +0000
Subject: [PATCH 2/3]  #90 - wip: added vertical orientation

---
 src/components/breadcrumbs/Demo.vue          |  1 +
 src/components/breadcrumbs/UIBreadcrumbs.vue | 22 ++++++++++++++------
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/breadcrumbs/Demo.vue b/src/components/breadcrumbs/Demo.vue
index 180ac7bf..e6f3bc68 100644
--- a/src/components/breadcrumbs/Demo.vue
+++ b/src/components/breadcrumbs/Demo.vue
@@ -1,6 +1,7 @@
 <template>
     <UIBreadcrumbs />
 
+    <br>
     With Slots
     <UIBreadcrumbs>
         <template #separator="slotProps">
diff --git a/src/components/breadcrumbs/UIBreadcrumbs.vue b/src/components/breadcrumbs/UIBreadcrumbs.vue
index 6185d34e..5ed39dd6 100644
--- a/src/components/breadcrumbs/UIBreadcrumbs.vue
+++ b/src/components/breadcrumbs/UIBreadcrumbs.vue
@@ -1,8 +1,6 @@
 <template>
-    <template v-if="$slots.default">
-        <slot />
-    </template>
-    <ul v-else class="flex items-center flex-wrap">
+    <slot />
+    <ul v-if="!$slots.default" class="flex items-center flex-wrap" :class="{ 'flex-col': vertical }">
         <li v-for="(crumb, index) in routeCrumbs" :key="crumb.path">
             <slot :name="crumb.path" :route="crumb">
                 <router-link v-if="$router.currentRoute.path !== crumb.path" :to="crumb">
@@ -26,19 +24,31 @@ import { computed, defineComponent, getCurrentInstance } from 'vue';
 import type { PropType } from 'vue';
 import type { Router, RouteLocation } from 'vue-router';
 
-// todo - vertical
-
 export default defineComponent({
     name: 'UIBreadcrumbs',
 
     props: {
+        /**
+         * The separator character to be used.
+         */
         separator: {
             type: String,
             default: '/'
         },
 
+        /**
+         * The crumbs to display.
+         */
         crumbs: {
             type: Array as PropType<string[]>
+        },
+
+        /**
+         * Set the orientation to vertical.
+         */
+        vertical: {
+            type: Boolean,
+            default: false
         }
     },
 

From 6be8b6050266e075be3c0f6ea74a11562191dd47 Mon Sep 17 00:00:00 2001
From: Nandor Kraszlan <nandor.kraszlan@gmail.com>
Date: Tue, 30 Mar 2021 10:39:15 +0100
Subject: [PATCH 3/3]  #90 - wip: worked on the component

---
 .../breadcrumbs/UIBreadcrumbs.test.ts         |  3 ++
 src/components/breadcrumbs/UIBreadcrumbs.vue  | 40 +++++++++----------
 2 files changed, 22 insertions(+), 21 deletions(-)
 create mode 100644 src/components/breadcrumbs/UIBreadcrumbs.test.ts

diff --git a/src/components/breadcrumbs/UIBreadcrumbs.test.ts b/src/components/breadcrumbs/UIBreadcrumbs.test.ts
new file mode 100644
index 00000000..83c10e93
--- /dev/null
+++ b/src/components/breadcrumbs/UIBreadcrumbs.test.ts
@@ -0,0 +1,3 @@
+describe('UIBreadcrumbs', () => {
+
+});
diff --git a/src/components/breadcrumbs/UIBreadcrumbs.vue b/src/components/breadcrumbs/UIBreadcrumbs.vue
index 5ed39dd6..c48f8307 100644
--- a/src/components/breadcrumbs/UIBreadcrumbs.vue
+++ b/src/components/breadcrumbs/UIBreadcrumbs.vue
@@ -1,8 +1,7 @@
 <template>
-    <slot />
-    <ul v-if="!$slots.default" class="flex items-center flex-wrap" :class="{ 'flex-col': vertical }">
+    <ul class="flex items-center flex-wrap" :class="{ 'flex-col': vertical }">
         <li v-for="(crumb, index) in routeCrumbs" :key="crumb.path">
-            <slot :name="crumb.path" :route="crumb">
+            <slot :name="crumb.path.startsWith('/') ? crumb.path.slice(1) : crumb.path" :route="crumb">
                 <router-link v-if="$router.currentRoute.path !== crumb.path" :to="crumb">
                     {{ crumb?.meta?.label ?? crumb.path.slice(1) }}
                 </router-link>
@@ -13,7 +12,7 @@
             <slot name="separator"
                   :previous="crumb"
                   :next="routeCrumbs[index + 1]">
-                {{ routeCrumbs[index + 1] ? separator : '' }}
+                {{ routeCrumbs[index + 1] ? '&nbsp;' + separator + '&nbsp;' : '' }}
             </slot>
         </li>
     </ul>
@@ -22,7 +21,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance } from 'vue';
 import type { PropType } from 'vue';
-import type { Router, RouteLocation } from 'vue-router';
+import type { Router, RouteLocationRaw, RouteLocation } from 'vue-router';
 
 export default defineComponent({
     name: 'UIBreadcrumbs',
@@ -37,10 +36,10 @@ export default defineComponent({
         },
 
         /**
-         * The crumbs to display.
+         * The path to display.
          */
-        crumbs: {
-            type: Array as PropType<string[]>
+        path: {
+            type: [Object, String] as PropType<RouteLocationRaw>
         },
 
         /**
@@ -52,21 +51,20 @@ export default defineComponent({
         }
     },
 
-    setup() {
-        const routeCrumbs = computed<boolean | RouteLocation[]>(() => {
-            const instance = getCurrentInstance();
-            if (!instance) {
-                return false;
-            }
+    setup(props) {
+        const instance = getCurrentInstance()!;
 
-            const router = getCurrentInstance()!.appContext.config.globalProperties.$router as Router;
+        const routeCrumbs = computed<RouteLocation[]>(() => {
+            const router = instance.appContext.config.globalProperties.$router as Router;
             const routes: RouteLocation[] = [];
-            router.currentRoute.value.path.split('/').reduce((previous, next) => {
-                if (next) {
-                    routes.push(router.resolve(next));
-                    return '/' + next;
-                }
-            }, '');
+            const currentRoute = props.path && router.resolve(props.path).matched.length
+                ? router.resolve(props.path).path
+                : router.currentRoute.value.path;
+
+            currentRoute
+                .split('/')
+                .splice(1)
+                .forEach(crumb => routes.push(router.resolve(crumb)));
 
             return routes;
         });