<script setup lang="ts">
import { defineProps, defineEmits, withDefaults } from "vue";

export interface Props {
    type: string;
    required: boolean;
    onChange: any;
    placeholder: string;
    label: string;
    vModel: string;
    modelValue: any;
}

const props = withDefaults(defineProps<Props>(), {
    required: () => false,
});

defineEmits(["update:modelValue"]);
</script>

<template>
    <span>
        <label v-show="props.label">{{ props.label }}</label>
        <input
            :value="modelValue"
            @input="$emit('update:modelValue', $event.target.value)"
            :type="props.type"
            :required="props.required"
            @change="props.onChange"
            :placeholder="props.placeholder"
        />
    </span>
</template>

<style scoped lang="scss">
label {
    color: var(--secondary-text);
}

input {
    -webkit-box-flex: 1;
    background-color: var(--quaternary-background);
    border: none;
    border-radius: 4px;
    color: var(--primary-text);
    -ms-flex: 1;
    flex: 1;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 400;
    min-width: 0;
    padding: 8px 9px;

    &:focus {
        outline: none;
    }
}

/* Firefox */
input[type="number"] {
    appearance: textfield;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
</style>
