1
// Styles
2 1
import './VBreadcrumbs.sass'
3

4
// Types
5
import { VNode } from 'vue'
6
import { PropValidator } from 'vue/types/options'
7

8
// Components
9 1
import VBreadcrumbsItem from './VBreadcrumbsItem'
10 1
import VBreadcrumbsDivider from './VBreadcrumbsDivider'
11

12
// Mixins
13 1
import Themeable from '../../mixins/themeable'
14

15
// Utils
16 1
import mixins from '../../util/mixins'
17

18 1
export default mixins(
19
  Themeable
20
  /* @vue/component */
21
).extend({
22
  name: 'v-breadcrumbs',
23

24
  props: {
25
    divider: {
26
      type: String,
27
      default: '/',
28
    },
29
    items: {
30
      type: Array,
31 1
      default: () => ([]),
32
    } as PropValidator<any[]>,
33
    large: Boolean,
34
  },
35

36
  computed: {
37 1
    classes (): object {
38 1
      return {
39
        'v-breadcrumbs--large': this.large,
40
        ...this.themeClasses,
41
      }
42
    },
43
  },
44

45
  methods: {
46 1
    genDivider () {
47 1
      return this.$createElement(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)
48
    },
49 1
    genItems () {
50 1
      const items = []
51 1
      const hasSlot = !!this.$scopedSlots.item
52 1
      const keys = []
53

54 1
      for (let i = 0; i < this.items.length; i++) {
55 1
        const item = this.items[i]
56

57 1
        keys.push(item.text)
58

59 1
        if (hasSlot) items.push(this.$scopedSlots.item!({ item }))
60 1
        else items.push(this.$createElement(VBreadcrumbsItem, { key: keys.join('.'), props: item }, [item.text]))
61

62 1
        if (i < this.items.length - 1) items.push(this.genDivider())
63
      }
64

65 1
      return items
66
    },
67
  },
68

69 1
  render (h): VNode {
70 1
    const children = this.$slots.default || this.genItems()
71

72 1
    return h('ul', {
73
      staticClass: 'v-breadcrumbs',
74
      class: this.classes,
75
    }, children)
76
  },
77
})

Read our documentation on viewing source code .

Loading