<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue?: any
    label?: string
    value?: any
    disabled?: boolean
    checked?: boolean
    indeterminate?: boolean
  }>(),
  {},
)

const emit = defineEmits(['update:modelValue'])

defineOptions({ name: 'MjCheck' })

const _value = computed({
  get: () => props.modelValue || false,
  set: val => emit('update:modelValue', val),
})
</script>

<template>
  <el-checkbox
    v-model="_value"
    class="mj-check"
    :disabled="disabled"
    :label="label"
    :value="value"
    :checked="checked"
    :indeterminate="indeterminate"
  >
    {{ props.label }}
  </el-checkbox>
</template>

<style lang="scss" scoped>
.mj-check {
  @include checkbox;

  :deep(.el-checkbox__label) {
    color: $font-color;
    font-size: 2.33vh;
    font-family: $font-text;
  }
}
</style>
