40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
interface Props {
|
|
modelValue?: boolean;
|
|
disabled?: boolean;
|
|
onToggle?: () => void;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
modelValue: false,
|
|
disabled: false,
|
|
onToggle: () => {
|
|
// do nothing
|
|
},
|
|
});
|
|
|
|
defineEmits(["update:modelValue"]);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="{
|
|
'opacity-50': disabled,
|
|
'cursor-not-allowed': disabled,
|
|
}"
|
|
class="w-8 h-8 cursor-pointer"
|
|
@click="$emit('update:modelValue', !modelValue)"
|
|
>
|
|
<button
|
|
v-if="modelValue"
|
|
class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-checked.svg')] hover:bg-[url('/static/icons/icon-checkbox-checked-hover.svg')] disabled:opacity-50 cy-checkbox cy-checkbox-checked"
|
|
@click.stop="props.onToggle()"
|
|
></button>
|
|
<button
|
|
v-else
|
|
class="w-8 h-8 flex-none bg-contain bg-[url('/static/icons/icon-checkbox-unchecked.svg')] hover:bg-[url('/static/icons/icon-checkbox-unchecked-hover.svg')] cy-checkbox cy-checkbox-unchecked"
|
|
@click.stop="props.onToggle()"
|
|
></button>
|
|
</div>
|
|
</template>
|