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

4
// Mixins
5
import Colorable from '../../mixins/colorable'
6
import Themeable, { functionalThemeClasses } from '../../mixins/themeable'
7

8
// Types
9
import { VNode } from 'vue'
10
import mixins from '../../util/mixins'
11

12
// Helpers
13
import { convertToUnit } from '../../util/helpers'
14

15
/* @vue/component */
16
export default mixins(Themeable).extend({
17
  name: 'v-label',
18

19
  functional: true,
20

21
  props: {
22
    absolute: Boolean,
23
    color: {
24
      type: String,
25
      default: 'primary',
26
    },
27
    disabled: Boolean,
28
    focused: Boolean,
29
    for: String,
30
    left: {
31
      type: [Number, String],
32
      default: 0,
33
    },
34
    right: {
35
      type: [Number, String],
36
      default: 'auto',
37
    },
38
    value: Boolean,
39
  },
40

41 1
  render (h, ctx): VNode {
42 1
    const { children, listeners, props } = ctx
43 1
    const data = {
44
      staticClass: 'v-label',
45
      class: {
46
        'v-label--active': props.value,
47
        'v-label--is-disabled': props.disabled,
48
        ...functionalThemeClasses(ctx),
49
      },
50
      attrs: {
51
        for: props.for,
52
        'aria-hidden': !props.for,
53
      },
54
      on: listeners,
55
      style: {
56
        left: convertToUnit(props.left),
57
        right: convertToUnit(props.right),
58 1
        position: props.absolute ? 'absolute' : 'relative',
59
      },
60
      ref: 'label',
61
    }
62

63 1
    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children)
64
  },
65
})

Read our documentation on viewing source code .

Loading