<template>
    <div class="input-group mb-3 d-flex">
        <input type="text" class="form-control" placeholder="Search" @change="search" />
        <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
    </div>
</template>

<script setup>
    const props = defineProps({
        maxlength: {
            type: Number,
            default: 30,
            required: false,
        },
    });

    const emits = defineEmits(['update:data']);
    const search = function (event) {
        //Type Number 일때 maxlength 적용 안됨 방지
        if (event.target.value.length > props.maxlength) {
            event.target.value = event.target.value.slice(0, props.maxlength);
        }
        emits('update:data', event.target.value);
    };
</script>
