vuetifyjs / vuetify
1
// Styles
2 1
import './VTextarea.sass'
3

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

7
// Utilities
8 1
import mixins from '../../util/mixins'
9

10
// Types
11
import Vue from 'vue'
12

13
interface options extends Vue {
14
  $refs: {
15
    input: HTMLTextAreaElement
16
  }
17
}
18

19 1
const baseMixins = mixins<options &
20
  InstanceType<typeof VTextField>
21
>(
22
  VTextField
23
)
24

25
/* @vue/component */
26 1
export default baseMixins.extend({
27
  name: 'v-textarea',
28

29
  props: {
30
    autoGrow: Boolean,
31
    noResize: Boolean,
32
    rowHeight: {
33
      type: [Number, String],
34
      default: 24,
35 1
      validator: (v: any) => !isNaN(parseFloat(v)),
36
    },
37
    rows: {
38
      type: [Number, String],
39
      default: 5,
40 1
      validator: (v: any) => !isNaN(parseInt(v, 10)),
41
    },
42
  },
43

44
  computed: {
45 1
    classes (): object {
46 1
      return {
47
        'v-textarea': true,
48
        'v-textarea--auto-grow': this.autoGrow,
49
        'v-textarea--no-resize': this.noResizeHandle,
50
        ...VTextField.options.computed.classes.call(this),
51
      }
52
    },
53 1
    noResizeHandle (): boolean {
54 1
      return this.noResize || this.autoGrow
55
    },
56
  },
57

58
  watch: {
59 1
    lazyValue () {
60 1
      this.autoGrow && this.$nextTick(this.calculateInputHeight)
61
    },
62 1
    rowHeight () {
63 1
      this.autoGrow && this.$nextTick(this.calculateInputHeight)
64
    },
65
  },
66

67 1
  mounted () {
68 1
    setTimeout(() => {
69 1
      this.autoGrow && this.calculateInputHeight()
70
    }, 0)
71
  },
72

73
  methods: {
74 1
    calculateInputHeight () {
75 1
      const input = this.$refs.input
76 1
      if (!input) return
77

78 1
      input.style.height = '0'
79 1
      const height = input.scrollHeight
80 1
      const minHeight = parseInt(this.rows, 10) * parseFloat(this.rowHeight)
81
      // This has to be done ASAP, waiting for Vue
82
      // to update the DOM causes ugly layout jumping
83 1
      input.style.height = Math.max(minHeight, height) + 'px'
84
    },
85 1
    genInput () {
86 1
      const input = VTextField.options.methods.genInput.call(this)
87

88 1
      input.tag = 'textarea'
89 1
      delete input.data!.attrs!.type
90 1
      input.data!.attrs!.rows = this.rows
91

92 1
      return input
93
    },
94 1
    onInput (e: Event) {
95 1
      VTextField.options.methods.onInput.call(this, e)
96 1
      this.autoGrow && this.calculateInputHeight()
97
    },
98 1
    onKeyDown (e: KeyboardEvent) {
99
      // Prevents closing of a
100
      // dialog when pressing
101
      // enter
102 1
      if (this.isFocused && e.keyCode === 13) {
103 1
        e.stopPropagation()
104
      }
105

106 1
      this.$emit('keydown', e)
107
    },
108
  },
109
})

Read our documentation on viewing source code .

Loading