<template>
    <div class="s-checkbox">
        <input type="checkbox" id="checkbox" :checked="checked" @input="update">
        <label for="checkbox">{{ label }}</label>
    </div>
</template>

<script lang="ts" setup>
// 属性
interface Props{
   checked:boolean,
   name?:string,
   label?:string
}
const props = withDefaults(defineProps<Props>(), {
   checked: false
})

// 方法
const emit = defineEmits(["update"])

const update = (e:Event) => {
   const targetChecked = (e.target as HTMLInputElement).checked
   emit("update", { name: props.name, value: targetChecked })
}
</script>
