pixelfed/resources/assets/components/groups/partials/CreateForm/TextAreaInput.vue

87 lines
2.3 KiB
Vue
Raw Normal View History

2024-07-10 05:52:08 +00:00
<template>
<div class="form-group row">
<div class="col-sm-3">
<label class="col-form-label text-left">{{ label }}</label>
</div>
<div class="col-sm-9">
<textarea
v-if="hasLimit"
type="text"
class="form-control"
:class="{ 'form-control-lg': largeInput }"
style="resize:none;"
:placeholder="placeholder"
:maxlength="maxLimit"
:rows="rows"
v-model="value" />
<textarea
v-else
type="text"
class="form-control"
:class="{ 'form-control-lg': largeInput }"
style="resize:none;"
:placeholder="placeholder"
:rows="rows"
v-model="value" />
<div
v-if="helpText || hasLimit"
class="help-text small text-muted d-flex flex-row justify-content-between gap-3">
<div v-if="helpText">{{ helpText }}</div>
<div
v-if="hasLimit"
class="font-weight-bold text-dark">
{{ value ? value.length : 0 }}/{{ maxLimit }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
label: {
type: String
},
placeholder: {
type: String
},
val: {
type: String
},
helpText: {
type: String
},
hasLimit: {
type: Boolean,
default: false
},
maxLimit: {
type: Number,
default: 40
},
largeInput: {
type: Boolean,
default: false
},
rows: {
type: Number,
default: 4
},
},
data() {
return {
value: this.val
}
},
watch: {
value: function(newVal, oldVal) {
this.$emit('update', newVal);
}
}
}
</script>