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

4
// Extensions
5 1
import VSheet from '../VSheet'
6

7
// Components
8 1
import VAvatar from '../VAvatar'
9 1
import VIcon from '../VIcon'
10 1
import { VExpandTransition } from '../transitions'
11

12
// Mixins
13 1
import Mobile from '../../mixins/mobile'
14 1
import Toggleable from '../../mixins/toggleable'
15

16
// Utilities
17 1
import mixins from '../../util/mixins'
18 1
import {
19
  convertToUnit,
20
  getSlot,
21
} from '../../util/helpers'
22

23
// Typeslint
24
import { VNode } from 'vue'
25

26
/* @vue/component */
27 1
export default mixins(
28
  VSheet,
29
  Mobile,
30
  Toggleable
31
).extend({
32
  name: 'v-banner',
33

34
  inheritAttrs: false,
35

36
  props: {
37
    app: Boolean,
38
    icon: String,
39
    iconColor: String,
40
    singleLine: Boolean,
41
    sticky: Boolean,
42
    value: {
43
      type: Boolean,
44
      default: true,
45
    },
46
  },
47

48
  computed: {
49 1
    classes (): object {
50 1
      return {
51
        ...VSheet.options.computed.classes.call(this),
52
        'v-banner--has-icon': this.hasIcon,
53
        'v-banner--is-mobile': this.isMobile,
54
        'v-banner--single-line': this.singleLine,
55
        'v-banner--sticky': this.isSticky,
56
      }
57
    },
58 1
    hasIcon (): boolean {
59 1
      return Boolean(this.icon || this.$slots.icon)
60
    },
61 1
    isSticky (): boolean {
62 1
      return this.sticky || this.app
63
    },
64 1
    styles (): object {
65 1
      const styles: Record<string, any> = { ...VSheet.options.computed.styles.call(this) }
66

67 1
      if (this.isSticky) {
68 1
        const top = !this.app
69 1
          ? 0
70 1
          : (this.$vuetify.application.bar + this.$vuetify.application.top)
71

72 1
        styles.top = convertToUnit(top)
73 1
        styles.position = 'sticky'
74 1
        styles.zIndex = 1
75
      }
76

77 1
      return styles
78
    },
79
  },
80

81
  methods: {
82
    /** @public */
83 1
    toggle () {
84 1
      this.isActive = !this.isActive
85
    },
86 1
    iconClick (e: MouseEvent) {
87 1
      this.$emit('click:icon', e)
88
    },
89 1
    genIcon () {
90 1
      if (!this.hasIcon) return undefined
91

92
      let content
93

94 1
      if (this.icon) {
95 1
        content = this.$createElement(VIcon, {
96
          props: {
97
            color: this.iconColor,
98
            size: 28,
99
          },
100
        }, [this.icon])
101
      } else {
102 1
        content = this.$slots.icon
103
      }
104

105 1
      return this.$createElement(VAvatar, {
106
        staticClass: 'v-banner__icon',
107
        props: {
108
          color: this.color,
109
          size: 40,
110
        },
111
        on: {
112
          click: this.iconClick,
113
        },
114
      }, [content])
115
    },
116 1
    genText () {
117 1
      return this.$createElement('div', {
118
        staticClass: 'v-banner__text',
119
      }, this.$slots.default)
120
    },
121 1
    genActions () {
122 1
      const children = getSlot(this, 'actions', {
123 1
        dismiss: () => this.isActive = false,
124
      })
125

126 1
      if (!children) return undefined
127

128 1
      return this.$createElement('div', {
129
        staticClass: 'v-banner__actions',
130
      }, children)
131
    },
132 1
    genContent () {
133 1
      return this.$createElement('div', {
134
        staticClass: 'v-banner__content',
135
      }, [
136
        this.genIcon(),
137
        this.genText(),
138
      ])
139
    },
140 1
    genWrapper () {
141 1
      return this.$createElement('div', {
142
        staticClass: 'v-banner__wrapper',
143
      }, [
144
        this.genContent(),
145
        this.genActions(),
146
      ])
147
    },
148
  },
149

150 1
  render (h): VNode {
151 1
    return h(VExpandTransition, [
152
      h('div', this.setBackgroundColor(this.color, {
153
        staticClass: 'v-banner',
154
        attrs: this.attrs$,
155
        class: this.classes,
156
        style: this.styles,
157
        directives: [{
158
          name: 'show',
159
          value: this.isActive,
160
        }],
161
      }), [this.genWrapper()]),
162
    ])
163
  },
164
})

Read our documentation on viewing source code .

Loading