36 lines
843 B
Vue
36 lines
843 B
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue?: any
|
|
color?: 'regular' | 'primary'
|
|
checked?: boolean
|
|
disabled?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
color: 'regular'
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any]
|
|
}>()
|
|
|
|
const styleClass = computed(() => {
|
|
const colorVariants = {
|
|
regular: '',
|
|
primary: 'dui-checkbox-primary'
|
|
}
|
|
const colorClass = colorVariants[props.color]
|
|
return [colorClass]
|
|
})
|
|
</script>
|
|
<template>
|
|
<input
|
|
type="checkbox"
|
|
class="dui-checkbox dui-checkbox-sm border-secondary"
|
|
:class="styleClass"
|
|
:checked="props.modelValue || props.checked"
|
|
@change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
|
|
:disabled="props.disabled"
|
|
/>
|
|
</template>
|