1
// Styles
2 1
import './VList.sass'
3
import VListGroup from './VListGroup'
4

5
// Components
6 1
import VSheet from '../VSheet/VSheet'
7

8
// Types
9
import { VNode } from 'vue'
10

11
type VListGroupInstance = InstanceType<typeof VListGroup>
12

13
interface options extends InstanceType<typeof VSheet> {
14
  isInMenu: boolean
15
  isInNav: boolean
16
}
17

18
/* @vue/component */
19 1
export default VSheet.extend<options>().extend({
20
  name: 'v-list',
21

22 1
  provide (): object {
23 1
    return {
24
      isInList: true,
25
      list: this,
26
    }
27
  },
28

29
  inject: {
30
    isInMenu: {
31
      default: false,
32
    },
33
    isInNav: {
34
      default: false,
35
    },
36
  },
37

38
  props: {
39
    dense: Boolean,
40
    disabled: Boolean,
41
    expand: Boolean,
42
    flat: Boolean,
43
    nav: Boolean,
44
    rounded: Boolean,
45
    subheader: Boolean,
46
    threeLine: Boolean,
47
    twoLine: Boolean,
48
  },
49

50 1
  data: () => ({
51
    groups: [] as VListGroupInstance[],
52
  }),
53

54
  computed: {
55 1
    classes (): object {
56 1
      return {
57
        ...VSheet.options.computed.classes.call(this),
58
        'v-list--dense': this.dense,
59
        'v-list--disabled': this.disabled,
60
        'v-list--flat': this.flat,
61
        'v-list--nav': this.nav,
62
        'v-list--rounded': this.rounded,
63
        'v-list--subheader': this.subheader,
64
        'v-list--two-line': this.twoLine,
65
        'v-list--three-line': this.threeLine,
66
      }
67
    },
68
  },
69

70
  methods: {
71 0
    register (content: VListGroupInstance) {
72 0
      this.groups.push(content)
73
    },
74 0
    unregister (content: VListGroupInstance) {
75 0
      const index = this.groups.findIndex(g => g._uid === content._uid)
76

77 1
      if (index > -1) this.groups.splice(index, 1)
78
    },
79 0
    listClick (uid: number) {
80 1
      if (this.expand) return
81

82 0
      for (const group of this.groups) {
83 0
        group.toggle(uid)
84
      }
85
    },
86
  },
87

88 1
  render (h): VNode {
89 1
    const data = {
90
      staticClass: 'v-list',
91
      class: this.classes,
92
      style: this.styles,
93
      attrs: {
94 1
        role: this.isInNav || this.isInMenu ? undefined : 'list',
95
        ...this.attrs$,
96
      },
97
    }
98

99 1
    return h(this.tag, this.setBackgroundColor(this.color, data), [this.$slots.default])
100
  },
101
})

Read our documentation on viewing source code .

Loading