1c2a66df45
- 41 unit and component suites under admin/tests/{app,state,shell,list,form,relation,views,ui}
covering states and a11y roles; every src module is imported by a test
- typed fixture helper assigns each JSON fixture to its generated OpenAPI type
- fix: iconFor ignores inherited object members such as "constructor"
- fix: field controls import ./control instead of the registry (import cycle
left a renderer unregistered depending on module load order)
- fix: dropdown shows the placeholder for an unknown stored value next to an emptyOption
- fix: list announces a failed schema load even when the rows arrive after it
- tailwind no longer scans admin/tests; boardwalk/dist rebuilt
40 lines
1.4 KiB
Vue
40 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { toggleOn, toggleValue, type FieldControlProps } from '../control'
|
|
|
|
// Toggle card (design screen 4) with a 20px checkbox on the right.
|
|
const props = defineProps<FieldControlProps>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: boolean | number] }>()
|
|
|
|
const on = computed(() => toggleOn(props.modelValue))
|
|
|
|
function onChange(event: Event): void {
|
|
emit('update:modelValue', toggleValue(props.modelValue, (event.target as HTMLInputElement).checked))
|
|
}
|
|
</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>
|
|
<input
|
|
:id="controlId"
|
|
type="checkbox"
|
|
:name="field.name"
|
|
:checked="on"
|
|
:aria-invalid="invalid ? 'true' : undefined"
|
|
:aria-describedby="describedBy || undefined"
|
|
class="size-5 shrink-0 rounded-[6px] accent-primary"
|
|
@change="onChange"
|
|
/>
|
|
</div>
|
|
</template>
|