107d820109
- pluginAssets loads controller scripts and stylesheets from {base}/assets/ only, once per URL
- WidgetField mounts the custom element with attributes only and posts summer-action through the typed client
- Only declared fill keys returned by the server are patched; the form turns dirty and nothing saves
- widget is a registered valueless type rendered on create and update, labelled as a group
- backend::lang.extension strings in en and pl; embedded dist rebuilt
68 lines
2.8 KiB
Vue
68 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { CircleAlert } from '@lucide/vue'
|
|
import type { ControllerParams, FormField, RelationOption } from '../../api/types'
|
|
import FieldRenderer from './FieldRenderer.vue'
|
|
import { groupLabelled, ownsLabel } from './registry'
|
|
|
|
// One form row: label (600, red aria-hidden asterisk when required), the
|
|
// control, the comment and the error line linked by aria-describedby.
|
|
const props = defineProps<{
|
|
field: FormField
|
|
modelValue: unknown
|
|
errors?: string[]
|
|
labels?: RelationOption[]
|
|
source?: ControllerParams | null
|
|
recordId?: number | null
|
|
/** Prefix for element ids, so two forms on a page never collide. */
|
|
idPrefix?: string
|
|
}>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: unknown] }>()
|
|
|
|
const base = computed(() => `${props.idPrefix ?? 'field'}-${props.field.name}`)
|
|
const controlId = computed(() => base.value)
|
|
const commentId = computed(() => `${base.value}-comment`)
|
|
const errorId = computed(() => `${base.value}-error`)
|
|
const invalid = computed(() => (props.errors?.length ?? 0) > 0)
|
|
const selfLabelled = computed(() => ownsLabel(props.field.type))
|
|
// A widget or partial row labels a role="group" host, so its label is a span
|
|
// the host names with aria-labelledby, not a label for an input.
|
|
const labelsGroup = computed(() => groupLabelled(props.field.type))
|
|
const showComment = computed(() => !selfLabelled.value && !!props.field.comment)
|
|
|
|
const describedBy = computed(() =>
|
|
[showComment.value || (selfLabelled.value && props.field.comment) ? commentId.value : '', invalid.value ? errorId.value : '']
|
|
.filter(Boolean)
|
|
.join(' '),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex min-w-0 flex-col gap-1.5" :data-field="field.name">
|
|
<span v-if="labelsGroup" :id="`${controlId}-label`" class="font-semibold">
|
|
{{ field.label || field.name }}<span v-if="field.required" class="text-danger" aria-hidden="true"> *</span>
|
|
</span>
|
|
<label v-else-if="!selfLabelled" :for="controlId" class="font-semibold">
|
|
{{ field.label || field.name }}<span v-if="field.required" class="text-danger" aria-hidden="true"> *</span>
|
|
</label>
|
|
<FieldRenderer
|
|
:field="field"
|
|
:model-value="modelValue"
|
|
:control-id="controlId"
|
|
:invalid="invalid"
|
|
:described-by="describedBy"
|
|
:labels="labels"
|
|
:source="source"
|
|
:record-id="recordId"
|
|
@update:model-value="(value: unknown) => emit('update:modelValue', value)"
|
|
/>
|
|
<p v-if="showComment" :id="commentId" class="text-[13px] text-muted">{{ field.comment }}</p>
|
|
<div v-if="invalid" :id="errorId" class="flex flex-col gap-0.5 text-[13px] text-danger">
|
|
<p v-for="(text, index) in errors" :key="index" class="flex items-center gap-1.5">
|
|
<CircleAlert :size="14" class="shrink-0" aria-hidden="true" />
|
|
<span>{{ text }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|