R
Hey @JoshKisb ! Maybe this is a very late response, but this is a code that you can start working with:
<template>
<div>
<label class="label" :class="{ 'has-error': hasError }" :for="id">
{{ label }}
</label>
<q-input
outlined
dense
:for="id"
:id="id"
:rules="rules"
lazy-rules
v-bind="$attrs"
v-on="$listeners"
@input="onInput"
@blur="onBlur"
/>
</div>
</template>
<script>
const HInput = {
name: 'HInput',
props: ['label', 'id', 'rules'],
data() {
return {
hasError: false,
};
},
methods: {
onInput(value) {
this.checkInputAgainstRules(value, this.rules);
},
onBlur(event) {
this.checkInputAgainstRules(event.target.value, this.rules);
},
checkInputAgainstRules(value, rules) {
this.hasError = rules.some((rule) => rule(value) !== true);
},
},
};
export default HInput;
</script>
<style scoped lang="scss">
.label {
display: block;
margin-bottom: 3px;
&.has-error {
color: $negative;
}
}
</style>
Then you use it like the default q-input:
<h-input
v-model.trim="username"
label="Username"
id="username"
:rules="[
(val) => (val && val.length > 0) || 'Required field',
(val) => val.length <= 10 || 'Maximum of 10 characters',
]"
/>
