5a21ac47eb
- Federation List/Map tabs now use the Home mode-switcher tablist (full-width on mobile, shrink-wrapped on desktop, proper tablist a11y) - Network Interfaces WLAN adapter toggle replaced with the shared ToggleSwitch used by AI data access in Settings; ToggleSwitch gains optional disabled/ariaLabel props (non-breaking) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
32 lines
790 B
Vue
32 lines
790 B
Vue
<template>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
:aria-checked="modelValue"
|
|
:aria-label="ariaLabel"
|
|
:disabled="disabled"
|
|
tabindex="-1"
|
|
data-controller-ignore
|
|
class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
|
|
:class="[modelValue ? 'bg-orange-500' : 'bg-white/15', disabled ? 'opacity-40 cursor-not-allowed' : '']"
|
|
@click="$emit('update:modelValue', !modelValue)"
|
|
>
|
|
<div
|
|
class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
|
|
:class="modelValue ? 'translate-x-5' : 'translate-x-1'"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
modelValue: boolean
|
|
disabled?: boolean
|
|
ariaLabel?: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:modelValue': [value: boolean]
|
|
}>()
|
|
</script>
|