<script setup>
import { computed } from 'vue';

const emit = defineEmits(['update:modelValue', 'update:options']);

const $props = defineProps({
    modelValue: {
        type: [String, Number],
        default: null,
    },
    isOutlined: {
        type: Boolean,
        default: false,
    },
});

const value = computed({
    get() {
        return $props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    },
});

const styleAttrs = computed(() => {
    return $props.isOutlined
        ? {
              dense: true,
              outlined: true,
              rounded: true,
          }
        : {};
});
</script>

<template>
    <QInput
        ref="vnInputRef"
        v-model="value"
        v-bind="{ ...$attrs, ...styleAttrs }"
        type="text"
        :class="{ required: $attrs.required }"
    >
        <template v-if="$slots.prepend" #prepend>
            <slot name="prepend" />
        </template>
        <template v-if="$slots.append" #append>
            <slot name="append" />
        </template>
    </QInput>
</template>

<style lang="scss">
/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
    content: ' *';
}
</style>
