speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-12 11:18:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make Checkbox keyboard-accessible

Browse source
This commit is contained in:
adroslice 2023-11-13 19:07:29 +01:00
parent 2ea55de2cc
commit 9f58657855
1 changed files with 5 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/input/CheckBox.vue
View file

@ -1,13 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{ modelValue: boolean}>(), { modelValue: false });
modelValue: boolean const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();
}>(), {
modelValue: false,
});
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void,
}>();
let modelValue = $ref(false); let modelValue = $ref(false);
watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; }); watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; });
@ -15,14 +8,12 @@ watch($$(modelValue), (val) => emit('update:modelValue', val));
</script> </script>
<template> <template>
<div @click="() => modelValue = !modelValue"> <div @click="() => modelValue = !modelValue" @keypress="() => modelValue = !modelValue" tabindex="0">
<i-material-symbols-check-box-outline v-if="modelValue"/> <i-material-symbols-check-box-outline v-if="modelValue"/>
<i-material-symbols-check-box-outline-blank v-else/> <i-material-symbols-check-box-outline-blank v-else/>
</div> </div>
</template> </template>
<style scoped> <style scoped>
div { div { cursor: pointer; }
cursor: pointer;
}
</style> </style>