<template>
  <button class="kole-switch kole-switch-switch" :class="{ 'is-on': checked }" type="button" role="switch" :aria-checked="checked" :disabled="props.disabled" @click="toggle">切换</button>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    checked: { type: Boolean, default: true }, // 是否选中
    disabled: { type: Boolean, default: false }, // 是否禁用
    size: { type: String, default: 'default' }, // 尺寸
});
const emit = defineEmits(["change", "update:modelValue"]);
const checked = ref(Boolean(props.checked));
function toggle() { checked.value = !checked.value; emit('update:modelValue', checked.value); emit('change', checked.value); }
</script>

<style src="./Switch.css"></style>
