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

4
// Mixins
5 1
import Applicationable from '../../mixins/applicationable'
6 1
import Colorable from '../../mixins/colorable'
7 1
import Themeable from '../../mixins/themeable'
8

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

13
// Types
14
import { VNode } from 'vue/types'
15

16 1
export default mixins(
17
  Applicationable('bar', [
18
    'height',
19
    'window',
20
  ]),
21
  Colorable,
22
  Themeable
23
/* @vue/component */
24
).extend({
25
  name: 'v-system-bar',
26

27
  props: {
28
    height: [Number, String],
29
    lightsOut: Boolean,
30
    window: Boolean,
31
  },
32

33
  computed: {
34 1
    classes (): object {
35 1
      return {
36
        'v-system-bar--lights-out': this.lightsOut,
37
        'v-system-bar--absolute': this.absolute,
38 1
        'v-system-bar--fixed': !this.absolute && (this.app || this.fixed),
39
        'v-system-bar--window': this.window,
40
        ...this.themeClasses,
41
      }
42
    },
43 1
    computedHeight (): number | string {
44 1
      if (this.height) {
45 1
        return isNaN(parseInt(this.height)) ? this.height : parseInt(this.height)
46
      }
47

48 1
      return this.window ? 32 : 24
49
    },
50 1
    styles (): object {
51 1
      return {
52
        height: convertToUnit(this.computedHeight),
53
      }
54
    },
55
  },
56

57
  methods: {
58 1
    updateApplication () {
59 1
      return this.$el
60 1
        ? this.$el.clientHeight
61 1
        : this.computedHeight
62
    },
63
  },
64

65 1
  render (h): VNode {
66 1
    const data = {
67
      staticClass: 'v-system-bar',
68
      class: this.classes,
69
      style: this.styles,
70
      on: this.$listeners,
71
    }
72

73 1
    return h('div', this.setBackgroundColor(this.color, data), getSlot(this))
74
  },
75
})

Read our documentation on viewing source code .

Loading