pixelfed/resources/assets/components/groups/partials/CreateForm/TextInput.vue
Daniel Supernault 3811a1cd65
Add Groups vues
2024-07-09 23:52:08 -06:00

79 lines
2 KiB
Vue

<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">
<input
v-if="hasLimit"
type="text"
class="form-control"
:class="{ 'form-control-lg': largeInput }"
:placeholder="placeholder"
:maxlength="maxLimit"
v-model="value">
<input
v-else
type="text"
class="form-control"
:class="{ 'form-control-lg': largeInput }"
:placeholder="placeholder"
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
}
},
data() {
return {
value: this.val
}
},
watch: {
value: function(newVal, oldVal) {
this.$emit('update', newVal);
}
}
}
</script>