<template>
  <div class="s-select">
    <select :name="name" class="select-control" @change="update" :value="value" :style="{width}"  @focus="emits('focus')" @blur="emits('blur')">
        <slot></slot>
    </select>
  </div>
</template>

<script lang='ts' setup>
interface Props{
    name:string,
    value:string | number,
    width?:string
}
const props = withDefaults(defineProps<Props>(), {
   width: "192px"
})

const emits = defineEmits(["update", "focus", "blur"])
const update = (e:Event) => {
   const targetValue = (e.target as HTMLInputElement).value
   emits("update", { name: props.name, value: targetValue })
}
</script>

<style scoped lang='less'>
.s-select{
    select{
        outline:none;
    }
    .select-control{
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        font-size: 1em;
    }
}
</style>
