docs/.vuepress/components/textareaBox.vue at c0382f83db493578fabc403a2e40e52a6d8bb216 · gitthermal/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
	<textarea
		:name="name"
		class="textarea__text"
		:class="[disabled, resize ? '' : 'textarea__resize--none']"
		:placeholder="placeholder"
		:disabled="disable"
		@input="$emit('input', $event.target.value)"
		:maxlength="maxlength"
		:minlength="minlength"
		:wrap="wrap"
		:cols="cols"
		:rows="rows"
	/>
</template>

<script>
export default {
	name: "textareaBox",
	props: {
		name: {
			type: String,
			default: "inputField",
			required: true
		},
		placeholder: {
			type: String,
			default: "Enter the value",
			required: true
		},
		disable: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: Number
		},
		minlength: {
			type: Number
		},
		wrap: {
			type: String,
			default: "off"
		},
		resize: {
			type: Boolean
		},
		cols: {
			type: Number,
			default: 20
		},
		rows: {
			type: Number
		}
	},
	computed: {
		disabled() {
			if (this.disable) {
				return "input__text__disable";
			} else {
				return "";
			}
		}
	}
};
</script>

<style lang="sass">
.textarea

	&__text
		border-radius: .3rem
		padding: .5rem .8rem
		border: 1px solid #eeeeee
		font-family: inherit
		outline: none
		max-width: 100%

		&:focus
			border: 1px solid #00adb5
			box-shadow: rgba(#00adb5, .2) 0 0 0 3px

		&__disable
			background-color: #eee
			color: #222831
			cursor: not-allowed
			user-select: none

	&__resize
		&--none
			resize: none
</style>