<script setup lang="ts">

const props = defineProps<{
    value: any,
    label?: string,
    disabled?: boolean,
    type?: string
}>()

const emit = defineEmits(["update:value"])

</script>

<template>
    <div class="input">
        <label v-if="label">{{ label }}</label>
        <input
            :value="value"
            @input="$emit('update:value', $event.target.value)"
            :type="props.type ? props.type : 'text'"
            :disabled="disabled">
    </div>
</template>

<style scoped lang="less">

.input {
  display: inline-block;
  label {
    display: block;
    padding-left: 15px;
    font-size: 14px;
    color: #727272;
  }
  input {
    font-family: sans-serif;
    width: calc(100% - 30px);
    min-width: 0px;
    outline: none;
    margin: 0 10px;
    padding: 5px 5px;
    color: #121212;
    border: 1px solid transparent;
    font-size: 14px;
    &:not(:disabled){
      border: 1px solid #cecece;
    }
  }
}

</style>