speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +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

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

@ -1,13 +1,6 @@
<script setup lang="ts">
const props = withDefaults(defineProps<{
modelValue: boolean
}>(), {
modelValue: false,
});
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void,
}>();
const props = withDefaults(defineProps<{ modelValue: boolean}>(), { modelValue: false });
const emit = defineEmits<{(e: 'update:modelValue', value: boolean): void}>();
let modelValue = $ref(false);
watch(() => props.modelValue, (val) => { if (val !== modelValue) modelValue = val; });
@ -15,14 +8,12 @@ watch($$(modelValue), (val) => emit('update:modelValue', val));
</script>
<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-blank v-else/>
</div>
</template>
</template>
<style scoped>
div {
cursor: pointer;
}
div { cursor: pointer; }
</style>