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

4
// Mixins
5
import Applicationable from '../../mixins/applicationable'
6
import ButtonGroup from '../../mixins/button-group'
7
import Colorable from '../../mixins/colorable'
8
import Measurable from '../../mixins/measurable'
9
import Proxyable from '../../mixins/proxyable'
10
import Scrollable from '../../mixins/scrollable'
11
import Themeable from '../../mixins/themeable'
12
import { factory as ToggleableFactory } from '../../mixins/toggleable'
13

14
// Utilities
15
import mixins from '../../util/mixins'
16
import { breaking } from '../../util/console'
17

18
// Types
19
import { VNode } from 'vue'
20

21
export default mixins(
22
  Applicationable('bottom', [
23
    'height',
24
    'inputValue',
25
  ]),
26
  Colorable,
27
  Measurable,
28
  ToggleableFactory('inputValue'),
29
  Proxyable,
30
  Scrollable,
31
  Themeable
32
  /* @vue/component */
33
).extend({
34
  name: 'v-bottom-navigation',
35

36
  props: {
37
    activeClass: {
38
      type: String,
39
      default: 'v-btn--active',
40
    },
41
    backgroundColor: String,
42
    grow: Boolean,
43
    height: {
44
      type: [Number, String],
45
      default: 56,
46
    },
47
    hideOnScroll: Boolean,
48
    horizontal: Boolean,
49
    inputValue: {
50
      type: Boolean,
51
      default: true,
52
    },
53
    mandatory: Boolean,
54
    shift: Boolean,
55
  },
56

57 1
  data () {
58 1
    return {
59
      isActive: this.inputValue,
60
    }
61
  },
62

63
  computed: {
64 1
    canScroll (): boolean {
65 1
      return (
66 1
        Scrollable.options.computed.canScroll.call(this) &&
67
        (
68 1
          this.hideOnScroll ||
69 1
          !this.inputValue
70
        )
71
      )
72
    },
73 1
    classes (): object {
74 1
      return {
75
        'v-bottom-navigation--absolute': this.absolute,
76
        'v-bottom-navigation--grow': this.grow,
77 1
        'v-bottom-navigation--fixed': !this.absolute && (this.app || this.fixed),
78
        'v-bottom-navigation--horizontal': this.horizontal,
79
        'v-bottom-navigation--shift': this.shift,
80
      }
81
    },
82 1
    styles (): object {
83 1
      return {
84
        ...this.measurableStyles,
85 1
        transform: this.isActive ? 'none' : 'translateY(100%)',
86
      }
87
    },
88
  },
89

90 1
  created () {
91
    /* istanbul ignore next */
92
    if (this.$attrs.hasOwnProperty('active')) {
93
      breaking('active.sync', 'value or v-model', this)
94
    }
95
  },
96

97
  methods: {
98 1
    thresholdMet () {
99 1
      this.isActive = !this.isScrollingUp
100 1
      this.$emit('update:input-value', this.isActive)
101
    },
102 1
    updateApplication (): number {
103 1
      return this.$el
104 1
        ? this.$el.clientHeight
105 1
        : 0
106
    },
107 1
    updateValue (val: any) {
108 1
      this.$emit('change', val)
109
    },
110
  },
111

112 1
  render (h): VNode {
113 1
    const data = this.setBackgroundColor(this.backgroundColor, {
114
      staticClass: 'v-bottom-navigation',
115
      class: this.classes,
116
      style: this.styles,
117
      props: {
118
        activeClass: this.activeClass,
119
        mandatory: Boolean(
120 1
          this.mandatory ||
121 1
          this.value !== undefined
122
        ),
123
        value: this.internalValue,
124
      },
125
      on: { change: this.updateValue },
126
    })
127

128 1
    if (this.canScroll) {
129 1
      data.directives = data.directives || []
130

131 1
      data.directives.push({
132
        arg: this.scrollTarget,
133
        name: 'scroll',
134
        value: this.onScroll,
135
      })
136
    }
137

138 1
    return h(ButtonGroup, this.setTextColor(this.color, data), this.$slots.default)
139
  },
140
})

Read our documentation on viewing source code .

Loading