From 3034919c3172466b4ca78ad37f29f381c494f973 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 4 Nov 2023 12:58:30 +0300
Subject: [PATCH] Update breadcrumb demos

---
 doc/breadcrumb/BasicDoc.vue    | 33 ++++++--------
 doc/breadcrumb/RouterDoc.vue   | 83 +++++++++++++++-------------------
 doc/breadcrumb/TemplateDoc.vue | 31 +++++++------
 3 files changed, 69 insertions(+), 78 deletions(-)

diff --git a/doc/breadcrumb/BasicDoc.vue b/doc/breadcrumb/BasicDoc.vue
index f5e1dd9b4..31e0417f4 100644
--- a/doc/breadcrumb/BasicDoc.vue
+++ b/doc/breadcrumb/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
+        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>, the root item is defined with the <i>home</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items" />
@@ -13,10 +13,9 @@ export default {
     data() {
         return {
             home: {
-                icon: 'pi pi-home',
-                to: '/'
+                icon: 'pi pi-home'
             },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            items: [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }],
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items" />
@@ -33,15 +32,14 @@ export default {
     data() {
         return {
             home: {
-                icon: 'pi pi-home',
-                to: '/',
+                icon: 'pi pi-home'
             },
             items: [
-                {label: 'Computer'},
-                {label: 'Notebook'},
-                {label: 'Accessories'},
-                {label: 'Backpacks'},
-                {label: 'Item'}
+                { label: 'Electronics' }, 
+                { label: 'Computer' }, 
+                { label: 'Accessories' }, 
+                { label: 'Keyboard' }, 
+                { label: 'Wireless' }
             ]
         }
     }
@@ -59,15 +57,14 @@ export default {
 import { ref } from "vue";
 
 const home = ref({
-    icon: 'pi pi-home',
-    to: '/',
+    icon: 'pi pi-home'
 });
 const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
+    { label: 'Electronics' }, 
+    { label: 'Computer' }, 
+    { label: 'Accessories' }, 
+    { label: 'Keyboard' }, 
+    { label: 'Wireless' }
 ]);
 <\/script>
 `
diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
index 044d47581..92f0045d3 100644
--- a/doc/breadcrumb/RouterDoc.vue
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -1,27 +1,23 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
-            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
-        </p>
+        <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-if="item.icon" v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                    <span class="text-color">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" hideStackBlitz hideCodeSandbox />
 </template>
 
 <script>
@@ -30,22 +26,21 @@ export default {
         return {
             home: {
                 icon: 'pi pi-home',
-                route: '/'
+                route: '/installation'
             },
-            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            items: [{ label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }],
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items">
-    <template #item="{ label, item, props }">
-        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-            <a :href="routerProps.href" v-bind="props.action">
-                <span v-bind="props.icon" />
-                <span v-bind="props.label">{{ label }}</span>
+    <template #item="{ item, props }">
+        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+            <a :href="href" v-bind="props.action" @click="navigate">
+                <span :class="[item.icon, 'text-color']" />
+                <span class="text-primary font-semibold">{{ item.label }}</span>
             </a>
         </router-link>
         <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span v-if="item.icon" v-bind="props.icon" />
-            <span v-bind="props.label">{{ label }}</span>
+            <span class="text-color">{{ item.label }}</span>
         </a>
     </template>
 </Breadcrumb>
@@ -54,16 +49,15 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-if="item.icon" v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                    <span class="text-color">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
@@ -76,14 +70,12 @@ export default {
         return {
             home: {
                 icon: 'pi pi-home',
-                route: '/'
+                route: '/installation'
             },
             items: [
-                {label: 'Computer'},
-                {label: 'Notebook'},
-                {label: 'Accessories'},
-                {label: 'Backpacks'},
-                {label: 'Item'}
+                { label: 'Components' }, 
+                { label: 'Form' }, 
+                { label: 'InputText', route: '/inputtext' }
             ]
         }
     }
@@ -94,16 +86,15 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
-            <template #item="{ label, item, props }">
-                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
-                    <a :href="routerProps.href" v-bind="props.action">
-                        <span v-bind="props.icon" />
-                        <span v-bind="props.label">{{ label }}</span>
+            <template #item="{ item, props }">
+                <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+                    <a :href="href" v-bind="props.action" @click="navigate">
+                        <span :class="[item.icon, 'text-color']" />
+                        <span class="text-primary font-semibold">{{ item.label }}</span>
                     </a>
                 </router-link>
                 <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-                    <span v-if="item.icon" v-bind="props.icon" />
-                    <span v-bind="props.label">{{ label }}</span>
+                    <span class="text-color">{{ item.label }}</span>
                 </a>
             </template>
         </Breadcrumb>
@@ -115,14 +106,12 @@ import { ref } from "vue";
 
 const home = ref({
     icon: 'pi pi-home',
-    route: '/'
+    route: '/installation'
 });
 const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
+    { label: 'Components' }, 
+    { label: 'Form' }, 
+    { label: 'InputText', route: '/inputtext' }
 ]);
 <\/script>
 `
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index bf055101c..7a7a22c7b 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -1,14 +1,15 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content can be placed inside the menuitem using the <i>item</i> templating.</p>
+        <p>Custom content can be placed inside the items using the <i>item</i> template. The divider between the items has its own <i>separator</i> template.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
             <template #item="{ item }">
-                <a :class="item.class" :href="item.url">
+                <a class="cursor-pointer" :href="item.url">
                     <span :class="item.icon"></span>
                 </a>
             </template>
+            <template #separator> / </template>
         </Breadcrumb>
     </div>
     <DocSectionCode :code="code" />
@@ -18,15 +19,18 @@
 export default {
     data() {
         return {
-            home: { icon: 'pi pi-home', url: 'https://primevue.org/' },
+            home: { icon: 'pi pi-home' },
             items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }],
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items">
     <template #item="item">
-        <a :class="item.class">
-            <span :class="item.icon"></span>
-        </a>
+        <template #item="{ item }">
+            <a class="cursor-pointer" :href="item.url">
+                <span :class="item.icon"></span>
+            </a>
+        </template>
+        <template #separator> / </template>
     </template>
 </Breadcrumb>
 `,
@@ -34,11 +38,12 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
-            <template #item="{item}">
-                <a :class="item.class">
+            <template #item="{ item }">
+                <a class="cursor-pointer" :href="item.url">
                     <span :class="item.icon"></span>
                 </a>
             </template>
+            <template #separator> / </template>
         </Breadcrumb>
     </div>
 </template>
@@ -47,7 +52,7 @@ export default {
 export default {
     data() {
         return {
-            home: { icon: 'pi pi-home', url: 'https://primevue.org/' },
+            home: { icon: 'pi pi-home' },
             items: [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]
         }
     }
@@ -58,11 +63,12 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Breadcrumb :home="home" :model="items">
-            <template #item="{item}">
-                <a :class="item.class">
+            <template #item="{ item }">
+                <a class="cursor-pointer" :href="item.url">
                     <span :class="item.icon"></span>
                 </a>
             </template>
+            <template #separator> / </template>
         </Breadcrumb>
     </div>
 </template>
@@ -70,9 +76,8 @@ export default {
 <script setup>
 import { ref } from "vue";
 
-const home = ref({ icon: 'pi pi-home', url: 'https://primevue.org/' });
+const home = ref({ icon: 'pi pi-home' });
 const items = ref([{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]);
-}
 <\/script>
 `
             }