140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<script setup>
|
|
import { computed, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const emit = defineEmits([
|
|
'update:modelValue',
|
|
'update:options',
|
|
'keyup.enter',
|
|
'remove'
|
|
]);
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
isOutlined: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
info: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
clearable: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const requiredFieldRule = val => !!val || t('globals.fieldRequired');
|
|
const vnInputRef = ref(null);
|
|
const value = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value);
|
|
}
|
|
});
|
|
const hover = ref(false);
|
|
const styleAttrs = computed(() => {
|
|
return props.isOutlined
|
|
? { dense: true, outlined: true, rounded: true }
|
|
: {};
|
|
});
|
|
|
|
const focus = () => {
|
|
vnInputRef.value.focus();
|
|
};
|
|
|
|
defineExpose({
|
|
focus
|
|
});
|
|
|
|
const inputRules = [
|
|
val => {
|
|
const { min, max } = vnInputRef.value.$attrs;
|
|
if (min >= 0) {
|
|
if (Math.floor(val) < min) return t('inputMin', { value: min });
|
|
}
|
|
if (max > 0) {
|
|
if (Math.floor(val) > max) return t('inputMax', { value: max });
|
|
}
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:rules="$attrs.required ? [requiredFieldRule] : null"
|
|
@mouseover="hover = true"
|
|
@mouseleave="hover = false"
|
|
>
|
|
<QInput
|
|
ref="vnInputRef"
|
|
v-model="value"
|
|
v-bind="{ ...$attrs, ...styleAttrs }"
|
|
:type="$attrs.type"
|
|
:class="{ required: $attrs.required }"
|
|
:clearable="false"
|
|
:rules="inputRules"
|
|
:lazy-rules="true"
|
|
hide-bottom-space
|
|
@keyup.enter="emit('keyup.enter')"
|
|
>
|
|
<template
|
|
v-if="$slots.prepend"
|
|
#prepend
|
|
>
|
|
<slot name="prepend" />
|
|
</template>
|
|
<template #append>
|
|
<slot
|
|
v-if="$slots.append && !$attrs.disabled"
|
|
name="append"
|
|
/>
|
|
<QIcon
|
|
v-if="hover && value && !$attrs.disabled && props.clearable"
|
|
name="close"
|
|
size="xs"
|
|
@click="
|
|
() => {
|
|
value = null;
|
|
emit('remove');
|
|
}
|
|
"
|
|
/>
|
|
<QIcon
|
|
v-if="info"
|
|
name="info"
|
|
>
|
|
<QTooltip max-width="350px">
|
|
{{ info }}
|
|
</QTooltip>
|
|
</QIcon>
|
|
</template>
|
|
</QInput>
|
|
</div>
|
|
</template>
|
|
|
|
<i18n lang="yaml">
|
|
en-US:
|
|
inputMin: Must be more than {value}
|
|
inputMax: Must be less than {value}
|
|
es-ES:
|
|
inputMin: Debe ser mayor a {value}
|
|
inputMax: Debe ser menor a {value}
|
|
ca-ES:
|
|
inputMin: Ha de ser més gran que {value}
|
|
inputMax: Ha de ser menys que {value}
|
|
fr-FR:
|
|
inputMin: Doit être supérieur à {value}
|
|
inputMax: Doit être supérieur à {value}
|
|
pt-PT:
|
|
inputMin: Deve ser maior que {value}
|
|
inputMax: Deve ser maior que {value}
|
|
</i18n>
|