<template>
  <div class="input switch" :style="{ width, height }" :class="{disabled}">
    <input 
      class="replace-input"
      :disabled="disabled"
      :id="id"
      type="checkbox" 
      :checked="props.modelValue"
      @input="ev => emit('update:modelValue', ev.target.checked)"
    >
    <span class="replace"></span>
  </div>
</template>

<script setup>
import { switchPropsDesc } from './state'
import { randomId } from '../../utils'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(switchPropsDesc)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)
</script>