77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
Vue
<template>
|
|
<div :class="wrapperClasses">
|
|
<label v-if="label"
|
|
class="fw-bold"
|
|
:for="id">
|
|
{{ label }}
|
|
<template v-if="required">*</template>
|
|
</label>
|
|
<input class="form-control" :id="id" :name="name" :type="type" :value="modelValue" :pattern="pattern" :placeholder="placeholder" :required="required" :min="min" :max="max" :tabindex="tabIndex ?? null" @input="$emit('update:modelValue', $event.target.value)" @keydown.enter="handleOnEnter" @blur="handleOnBlur" ref="input" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
|
|
const props = defineProps([
|
|
"modelValue",
|
|
"label",
|
|
"classes",
|
|
"id",
|
|
"type",
|
|
"placeholder",
|
|
"pattern",
|
|
"required",
|
|
"name",
|
|
"tabIndex",
|
|
"onEnter",
|
|
"onBlur",
|
|
"autofocus",
|
|
"min",
|
|
"max",
|
|
]);
|
|
|
|
defineEmits(["update:modelValue"]);
|
|
|
|
const input = ref(null);
|
|
const wrapperClasses = ref([""]);
|
|
|
|
if (Array.isArray(props.classes)) {
|
|
wrapperClasses.value = props.classes;
|
|
}
|
|
|
|
const handleOnEnter = () => {
|
|
if (!props.onEnter) {
|
|
return;
|
|
}
|
|
props.onEnter();
|
|
};
|
|
|
|
const handleOnBlur = (e) => {
|
|
if (!props.onBlur) {
|
|
return;
|
|
}
|
|
props.onBlur(e, { id: props.id, value: props.modelValue });
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.autofocus) {
|
|
input.value.focus();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../../scss/variables.scss";
|
|
|
|
input {
|
|
border-radius: 0;
|
|
|
|
&:active,
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|