1
// Components
2 1
import { VFadeTransition } from '../transitions'
3
import VExpansionPanel from './VExpansionPanel'
4 1
import VIcon from '../VIcon'
5

6
// Mixins
7 1
import Colorable from '../../mixins/colorable'
8 1
import { inject as RegistrableInject } from '../../mixins/registrable'
9

10
// Directives
11 1
import ripple from '../../directives/ripple'
12

13
// Utilities
14 1
import { getSlot } from '../../util/helpers'
15 1
import mixins, { ExtractVue } from '../../util/mixins'
16

17
// Types
18
import Vue, { VNode, VueConstructor } from 'vue'
19

20 1
const baseMixins = mixins(
21
  Colorable,
22
  RegistrableInject<'expansionPanel', VueConstructor<Vue>>('expansionPanel', 'v-expansion-panel-header', 'v-expansion-panel')
23
)
24

25
interface options extends ExtractVue<typeof baseMixins> {
26
  $el: HTMLElement
27
  expansionPanel: InstanceType<typeof VExpansionPanel>
28
}
29

30 1
export default baseMixins.extend<options>().extend({
31
  name: 'v-expansion-panel-header',
32

33
  directives: { ripple },
34

35
  props: {
36
    disableIconRotate: Boolean,
37
    expandIcon: {
38
      type: String,
39
      default: '$expand',
40
    },
41
    hideActions: Boolean,
42
    ripple: {
43
      type: [Boolean, Object],
44
      default: false,
45
    },
46
  },
47

48 1
  data: () => ({
49
    hasMousedown: false,
50
  }),
51

52
  computed: {
53 1
    classes (): object {
54 1
      return {
55
        'v-expansion-panel-header--active': this.isActive,
56
        'v-expansion-panel-header--mousedown': this.hasMousedown,
57
      }
58
    },
59 1
    isActive (): boolean {
60 1
      return this.expansionPanel.isActive
61
    },
62 1
    isDisabled (): boolean {
63 1
      return this.expansionPanel.isDisabled
64
    },
65 0
    isReadonly (): boolean {
66 0
      return this.expansionPanel.isReadonly
67
    },
68
  },
69

70 1
  created () {
71 1
    this.expansionPanel.registerHeader(this)
72
  },
73

74 1
  beforeDestroy () {
75 1
    this.expansionPanel.unregisterHeader()
76
  },
77

78
  methods: {
79 1
    onClick (e: MouseEvent) {
80 1
      this.$emit('click', e)
81
    },
82 1
    genIcon () {
83 1
      const icon = getSlot(this, 'actions') ||
84 1
        [this.$createElement(VIcon, this.expandIcon)]
85

86 1
      return this.$createElement(VFadeTransition, [
87
        this.$createElement('div', {
88
          staticClass: 'v-expansion-panel-header__icon',
89
          class: {
90
            'v-expansion-panel-header__icon--disable-rotate': this.disableIconRotate,
91
          },
92
          directives: [{
93
            name: 'show',
94
            value: !this.isDisabled,
95
          }],
96
        }, icon),
97
      ])
98
    },
99
  },
100

101 1
  render (h): VNode {
102 1
    return h('button', this.setBackgroundColor(this.color, {
103
      staticClass: 'v-expansion-panel-header',
104
      class: this.classes,
105
      attrs: {
106 1
        tabindex: this.isDisabled ? -1 : null,
107
        type: 'button',
108
      },
109
      directives: [{
110
        name: 'ripple',
111
        value: this.ripple,
112
      }],
113
      on: {
114
        ...this.$listeners,
115
        click: this.onClick,
116 1
        mousedown: () => (this.hasMousedown = true),
117 1
        mouseup: () => (this.hasMousedown = false),
118
      },
119
    }), [
120
      getSlot(this, 'default', { open: this.isActive }, true),
121 1
      this.hideActions || this.genIcon(),
122
    ])
123
  },
124
})

Read our documentation on viewing source code .

Loading