1
// Components
2
import VExpansionPanels from './VExpansionPanels'
3
import VExpansionPanelHeader from './VExpansionPanelHeader'
4
import VExpansionPanelContent from './VExpansionPanelContent'
5

6
// Mixins
7 1
import { factory as GroupableFactory } from '../../mixins/groupable'
8 1
import { provide as RegistrableProvide } from '../../mixins/registrable'
9

10
// Utilities
11 1
import { getSlot } from '../../util/helpers'
12 1
import mixins from '../../util/mixins'
13

14
// Types
15
import { VNode } from 'vue'
16

17
type VExpansionPanelHeaderInstance = InstanceType<typeof VExpansionPanelHeader>
18
type VExpansionPanelContentInstance = InstanceType<typeof VExpansionPanelContent>
19

20 1
export default mixins(
21
  GroupableFactory<'expansionPanels', typeof VExpansionPanels>('expansionPanels', 'v-expansion-panel', 'v-expansion-panels'),
22
  RegistrableProvide('expansionPanel', true)
23
  /* @vue/component */
24
).extend({
25
  name: 'v-expansion-panel',
26

27
  props: {
28
    disabled: Boolean,
29
    readonly: Boolean,
30
  },
31

32 1
  data () {
33 1
    return {
34
      content: null as VExpansionPanelContentInstance | null,
35
      header: null as VExpansionPanelHeaderInstance | null,
36
      nextIsActive: false,
37
    }
38
  },
39

40
  computed: {
41 1
    classes (): object {
42 1
      return {
43
        'v-expansion-panel--active': this.isActive,
44
        'v-expansion-panel--next-active': this.nextIsActive,
45
        'v-expansion-panel--disabled': this.isDisabled,
46
        ...this.groupClasses,
47
      }
48
    },
49 1
    isDisabled (): boolean {
50 1
      return this.expansionPanels.disabled || this.disabled
51
    },
52 1
    isReadonly (): boolean {
53 1
      return this.expansionPanels.readonly || this.readonly
54
    },
55
  },
56

57
  methods: {
58 1
    registerContent (vm: VExpansionPanelContentInstance) {
59 1
      this.content = vm
60
    },
61 1
    unregisterContent () {
62 1
      this.content = null
63
    },
64 1
    registerHeader (vm: VExpansionPanelHeaderInstance) {
65 1
      this.header = vm
66 1
      vm.$on('click', this.onClick)
67
    },
68 1
    unregisterHeader () {
69 1
      this.header = null
70
    },
71 1
    onClick (e: MouseEvent) {
72 1
      if (e.detail) this.header!.$el.blur()
73

74 1
      this.$emit('click', e)
75

76 1
      this.isReadonly || this.isDisabled || this.toggle()
77
    },
78 1
    toggle () {
79
      /* istanbul ignore else */
80 1
      if (this.content) this.content.isBooted = true
81 1
      this.$nextTick(() => this.$emit('change'))
82
    },
83
  },
84

85 1
  render (h): VNode {
86 1
    return h('div', {
87
      staticClass: 'v-expansion-panel',
88
      class: this.classes,
89
      attrs: {
90
        'aria-expanded': String(this.isActive),
91
      },
92
    }, getSlot(this))
93
  },
94
})

Read our documentation on viewing source code .

Loading