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

<script>
export default {
  name: 'KoleSwitch',
  props: {
    checked: { type: Boolean, default: true }, // 是否选中
    disabled: { type: Boolean, default: false }, // 是否禁用
    size: { type: String, default: 'default' }, // 尺寸
  },
  data: function () { return { checked: false }; },
  methods: {
    toggle: function () { this.checked = !this.checked; this.$emit('input', this.checked); this.$emit('change', this.checked); }
  },
  // events: change, update:modelValue
};
</script>

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