fix: update v-breadcrumbs examples and doc test (#641)

src/data/components.json

@@ -75,7 +75,8 @@
     ],
     "examples": [
       "textDividers",
-      "iconDividers"
+      "iconDividers",
+      "itemSlot"
     ],
     "spec": false
   },

src/data/deprecatedIn.json

@@ -5,6 +5,10 @@
     },
     "v-select": {
       "multi-line": "1.1"
+    },
+    "v-breadcrumbs": {
+      "justify-center": "1.2",
+      "justify-end": "1.2"
     }
   }
 }

src/data/newIn.json

@@ -7,6 +7,9 @@
     "v-autocomplete": {
       "no-filter": "1.1"
     },
+    "v-breadcrumbs": {
+      "items": "1.2"
+    },
     "v-combobox": {
       "delimiters": "1.1"
     },

src/examples/breadcrumbs/iconDividers.vue

@@ -1,50 +1,35 @@
 <template>
   <div>
-    <v-breadcrumbs>
+    <v-breadcrumbs :items="items">
       <v-icon slot="divider">forward</v-icon>
-
-      <v-breadcrumbs-item
-        v-for="item in items"
-        :disabled="item.disabled"
-        :key="item.text"
-      >
-        {{ item.text }}
-      </v-breadcrumbs-item>
     </v-breadcrumbs>
 
-    <v-breadcrumbs>
+    <v-breadcrumbs :items="items">
       <v-icon slot="divider">chevron_right</v-icon>
-
-      <v-breadcrumbs-item
-        v-for="item in items"
-        :disabled="item.disabled"
-        :key="item.text"
-      >
-        {{ item.text }}
-      </v-breadcrumbs-item>
     </v-breadcrumbs>
   </div>
 </template>
 
 <script>
   export default {
-    data () {
-      return {
-        items: [
-          {
-            text: 'Dashboard',
-            disabled: false
-          },
-          {
-            text: 'Link 1',
-            disabled: false
-          },
-          {
-            text: 'Link 2',
-            disabled: true
-          }
-        ]
-      }
-    }
+    data: () => ({
+      items: [
+        {
+          text: 'Dashboard',
+          disabled: false,
+          href: 'breadcrumbs_dashboard'
+        },
+        {
+          text: 'Link 1',
+          disabled: false,
+          href: 'breadcrumbs_link_1'
+        },
+        {
+          text: 'Link 2',
+          disabled: true,
+          href: 'breadcrumbs_link_2'
+        }
+      ]
+    })
   }
 </script>

src/examples/breadcrumbs/itemSlot.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <v-breadcrumbs :items="items">
+      <template slot="item" slot-scope="props">
+        <a :href="props.item.href">{{ props.item.text.toUpperCase() }}</a>
+      </template>
+    </v-breadcrumbs>
+  </div>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      items: [
+        {
+          text: 'Dashboard',
+          disabled: false,
+          href: 'breadcrumbs_dashboard'
+        },
+        {
+          text: 'Link 1',
+          disabled: false,
+          href: 'breadcrumbs_link_1'
+        },
+        {
+          text: 'Link 2',
+          disabled: true,
+          href: 'breadcrumbs_link_2'
+        }
+      ]
+    })
+  }
+</script>

src/examples/breadcrumbs/textDividers.vue

@@ -1,24 +1,8 @@
 <template>
   <div>
-    <v-breadcrumbs divider="/">
-      <v-breadcrumbs-item
-        v-for="item in items"
-        :key="item.text"
-        :disabled="item.disabled"
-      >
-        {{ item.text }}
-      </v-breadcrumbs-item>
-    </v-breadcrumbs>
+    <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
 
-    <v-breadcrumbs divider="-">
-      <v-breadcrumbs-item
-        v-for="item in items"
-        :key="item.text"
-        :disabled="item.disabled"
-      >
-        {{ item.text }}
-      </v-breadcrumbs-item>
-    </v-breadcrumbs>
+    <v-breadcrumbs :items="items" divider="-"></v-breadcrumbs>
   </div>
 </template>
 
@@ -28,15 +12,18 @@
       items: [
         {
           text: 'Dashboard',
-          disabled: false
+          disabled: false,
+          href: 'breadcrumbs_dashboard'
         },
         {
           text: 'Link 1',
-          disabled: false
+          disabled: false,
+          href: 'breadcrumbs_link_1'
         },
         {
           text: 'Link 2',
-          disabled: true
+          disabled: true,
+          href: 'breadcrumbs_link_2'
         }
       ]
     })

src/lang/en/components/Breadcrumbs.json

@@ -1,6 +1,6 @@
 {
   "header": "Breadcrumbs",
-  "headerText": "The `v-breadcrumbs` component is a navigational helper for pages. It can accept a **Material Icons** icon or characters as a divider. An array of objects containing the fields _href_, _text_ and optional _disabled_ can be passed to the **items** property of the component.  Additionally, a regular slot exists for more control of the breadcrumbs, either utilizing `v-breadcrumbs-item` or other custom markup.",
+  "headerText": "The `v-breadcrumbs` component is a navigational helper for pages. It can accept a **Material Icons** icon or text characters as a divider. An array of objects can be passed to the **items** property of the component.  Additionally, a scoped slot exists for more control of the breadcrumbs, either utilizing `v-breadcrumbs-item` or other custom markup.",
   "examples": {
     "textDividers": {
       "header": "Text dividers",
@@ -9,13 +9,24 @@
     "iconDividers": {
       "header": "Icon dividers",
       "desc": "For the icon variant, breadcrumbs can use any icon in Material Design Icons."
+    },
+    "itemSlot": {
+      "header": "Item slot",
+      "desc": "You can use the scoped `item` slot to customize each breadcrumb."
     }
   },
   "props": {
     "divider": "Specifies the dividing character",
     "icons": "Specifies that the dividers are icons",
+    "items": "An array of objects describing each breadcrumb. See `v-breadcrumbs-item` API section for all object properties. Use `text` property for the breadcrumb text.",
     "justifyCenter": "Align the breadcrumbs center",
     "justifyEnd": "Align the breadcrumbs at the end",
     "large": "Increase the font-size of the breadcrumb item text"
+  },
+  "slots": {
+    "divider": "Specifies the divider content"
+  },
+  "scopedSlots": {
+    "item": "Scoped slot for overriding default breadcrumb item rendering"
   }
 }