fix(QBreadcrumbEl): Work with scoped slots instead of slots

Author: rstoenescu

dev/components/components/breadcrumbs.vue

@@ -20,14 +20,14 @@
       </q-breadcrumbs>
       <br><br>
       <q-breadcrumbs align="center">
-        <q-icon name="trending_flat" slot="separator" />
+        <q-icon name="trending_flat" slot="separator" slot-scope="props" />
         <q-breadcrumb-el active>Home</q-breadcrumb-el>
         <q-breadcrumb-el>Components</q-breadcrumb-el>
         <q-breadcrumb-el>Breadcrumbs</q-breadcrumb-el>
       </q-breadcrumbs>
       <br><br>
       <q-breadcrumbs align="justify" style="max-width: 700px">
-        <q-icon name="arrow_forward" slot="separator" />
+        <q-icon name="arrow_forward" slot="separator" slot-scope="props" />
         <q-breadcrumb-el>Home</q-breadcrumb-el>
         <q-breadcrumb-el>Components</q-breadcrumb-el>
         <q-breadcrumb-el>Breadcrumbs</q-breadcrumb-el>

src/components/breadcrumbs/QBreadcrumbs.js

@@ -27,27 +27,28 @@ export default {
     }
   },
   computed: {
-    computedAlign () {
-      return alignMap[this.align]
+    classes () {
+      return [`text-${this.color}`, `justify-${alignMap[this.align]}`]
     }
   },
   render (h) {
     const
       child = [],
       length = this.$slots.default.length - 1,
-      separator = this.$slots.separator
-        ? this.$slots.separator
-        : this.separator,
+      separator = this.$scopedSlots.separator || (() => this.separator),
       color = `text-${this.color}`,
       active = `text-${this.activeColor}`
 
     this.$slots.default.forEach((comp, i) => {
       if (comp.componentOptions && comp.componentOptions.tag === 'q-breadcrumb-el') {
         const middle = i < length
 
-        child.push(h('div', { staticClass: `${middle ? active : color} ${middle ? 'text-weight-bold' : 'q-breadcrumb-last'}` }, [ comp ]))
+        child.push(h('div', {
+          'class': [ middle ? active : color, middle ? 'text-weight-bold' : 'q-breadcrumb-last' ]
+        }, [ comp ]))
+
         if (middle) {
-          child.push(h('div', { staticClass: `q-breadcrumb-separator ${color}` }, [ separator ]))
+          child.push(h('div', { staticClass: `q-breadcrumb-separator`, 'class': color }, [ separator() ]))
         }
       }
       else {
@@ -57,7 +58,7 @@ export default {
 
     return h('div', {
       staticClass: 'q-breadcrumbs flex gutter-xs items-center overflow-hidden',
-      'class': [`text-${this.color}`, `justify-${this.computedAlign}`]
+      'class': this.classes
     }, child)
   }
 }