diff options
Diffstat (limited to 'packages/frontend/src/components/MkSwitch.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSwitch.vue | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue index a19b45448b..a0994d9cc9 100644 --- a/packages/frontend/src/components/MkSwitch.vue +++ b/packages/frontend/src/components/MkSwitch.vue @@ -10,10 +10,10 @@ SPDX-License-Identifier: AGPL-3.0-only type="checkbox" :disabled="disabled" :class="$style.input" - @keydown.enter="toggle" + @click="toggle" > - <XButton :checked="checked" :disabled="disabled" @toggle="toggle"/> - <span :class="$style.body"> + <XButton :class="$style.toggle" :checked="checked" :disabled="disabled" @toggle="toggle"/> + <span v-if="!noBody" :class="$style.body"> <!-- TODO: 無名slotの方は廃止 --> <span :class="$style.label"> <span @click="toggle"> @@ -34,16 +34,19 @@ const props = defineProps<{ modelValue: boolean | Ref<boolean>; disabled?: boolean; helpText?: string; + noBody?: boolean; }>(); const emit = defineEmits<{ (ev: 'update:modelValue', v: boolean): void; + (ev: 'change', v: boolean): void; }>(); const checked = toRefs(props).modelValue; const toggle = () => { if (props.disabled) return; emit('update:modelValue', !checked.value); + emit('change', !checked.value); }; </script> @@ -72,7 +75,13 @@ const toggle = () => { height: 0; opacity: 0; margin: 0; + + &:focus-visible ~ .toggle { + outline: 2px solid var(--focus); + outline-offset: 2px; + } } + .body { margin-left: 12px; margin-top: 2px; |