VSystemBar.ts at 6ac659b ⋅ vuetifyjs/vuetify

// Styles
import './VSystemBar.sass'

// Mixins
import Applicationable from '../../mixins/applicationable'
import Colorable from '../../mixins/colorable'
import Themeable from '../../mixins/themeable'

// Utilities
import mixins from '../../util/mixins'
import { convertToUnit, getSlot } from '../../util/helpers'

// Types
import { VNode } from 'vue/types'

export default mixins(
  Applicationable('bar', [
    'height',
    'window',
  ]),
  Colorable,
  Themeable
/* @vue/component */
).extend({
  name: 'v-system-bar',

  props: {
    height: [Number, String],
    lightsOut: Boolean,
    window: Boolean,
  },

  computed: {
    classes (): object {
      return {
        'v-system-bar--lights-out': this.lightsOut,
        'v-system-bar--absolute': this.absolute,
        'v-system-bar--fixed': !this.absolute && (this.app || this.fixed),
        'v-system-bar--window': this.window,
        ...this.themeClasses,
      }
    },
    computedHeight (): number | string {
      if (this.height) {
        return isNaN(parseInt(this.height)) ? this.height : parseInt(this.height)
      }

      return this.window ? 32 : 24
    },
    styles (): object {
      return {
        height: convertToUnit(this.computedHeight),
      }
    },
  },

  methods: {
    updateApplication () {
      return this.$el
        ? this.$el.clientHeight
        : this.computedHeight
    },
  },

  render (h): VNode {
    const data = {
      staticClass: 'v-system-bar',
      class: this.classes,
      style: this.styles,
      on: this.$listeners,
    }

    return h('div', this.setBackgroundColor(this.color, data), getSlot(this))
  },
})

Read our documentation on viewing source code .

Navigation	Overlay
`t` Navigate files	`h` Toggle hits
`y` Change url to tip of branch	`m` Toggle misses
`b / v` Jump to prev/next hit line	`p` Toggle partial
`z / x` Jump to prev/next missed or partial line	`1..9` Toggle flags
`shift + o` Open current page in GitHub	`a` Toggle all on
`/ or ?` Show keyboard shortcuts dialog	`c` Toggle context lines or commits

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		})