b040ee3a74
The admin sets the html font size to 14px, so the rem utilities w-11 and size-5 shrank the track to 38.5px and the knob to 17.5px against the fixed 26px height and 18px travel. Use w-[44px] and size-[20px] so the knob sits in a symmetric 3px inset at both ends. Rebuild the embedded admin shell.
48 lines
1.8 KiB
Vue
48 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { toggleOn, toggleValue, type FieldControlProps } from '../control'
|
|
|
|
// Toggle card (design screen 4): the label as title, the comment as helper
|
|
// text and a 44x26 role="switch" control; the off track uses borderStrong.
|
|
const props = defineProps<FieldControlProps>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: boolean | number] }>()
|
|
|
|
const on = computed(() => toggleOn(props.modelValue))
|
|
|
|
function toggle(): void {
|
|
emit('update:modelValue', toggleValue(props.modelValue, !on.value))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="invalid ? 'border-danger' : 'border-border'"
|
|
class="flex items-center justify-between gap-4 rounded-inner border px-4 py-3.5"
|
|
data-toggle-card
|
|
>
|
|
<div class="flex min-w-0 flex-col">
|
|
<label :for="controlId" class="font-semibold">
|
|
{{ field.label || field.name }}<span v-if="field.required" class="text-danger" aria-hidden="true"> *</span>
|
|
</label>
|
|
<p v-if="field.comment" :id="`${controlId}-comment`" class="text-[13px] text-muted">{{ field.comment }}</p>
|
|
</div>
|
|
<button
|
|
:id="controlId"
|
|
type="button"
|
|
role="switch"
|
|
:aria-checked="on ? 'true' : 'false'"
|
|
:aria-invalid="invalid ? 'true' : undefined"
|
|
:aria-describedby="describedBy || undefined"
|
|
:class="on ? 'bg-primary' : 'bg-border-strong'"
|
|
class="relative h-[26px] w-[44px] shrink-0 rounded-pill transition-colors duration-150 ease-out"
|
|
@click="toggle"
|
|
>
|
|
<span
|
|
:class="on ? 'translate-x-[18px] bg-on-primary' : 'translate-x-0 bg-white'"
|
|
class="absolute top-[3px] left-[3px] size-[20px] rounded-full shadow-tab transition-transform duration-150 ease-out"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</template>
|