a913eec50f
- MLField.vue is the one locale-switching wrapper; MLTextField, MLMarkdownField and the new MLTextareaField are shells around it - isMLFieldType replaces the inline ML type-name checks in formState, FormView and RelationChildModal - register mltextarea as a group-labelled control; rebuild dist
94 lines
3.1 KiB
Vue
94 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
// The one locale-switching wrapper of the ML controls (mltext, mltextarea,
|
|
// mlmarkdown). It owns the locale select, follows ML_LOCALE_CHANGE from every
|
|
// other ML control, edits only the active locale and emits the whole map. The
|
|
// inner control (TextField, TextareaField, MarkdownField) is passed in and
|
|
// edits a plain string.
|
|
import { computed, inject, onMounted, onUnmounted, ref, type Component } from 'vue'
|
|
import type { FieldControlProps } from '../control'
|
|
import { FORM_ENABLED_LOCALES } from '../formContext'
|
|
import { ML_LOCALE_CHANGE, broadcastMLLocale, localeRecord } from '../mlLocale'
|
|
|
|
interface MLFieldProps extends FieldControlProps {
|
|
/** The control that edits the active locale's text. */
|
|
inner: Component
|
|
/** The field type the inner control receives (text, textarea, markdown). */
|
|
innerType: string
|
|
/** The ML field type, shown on the root as data-ml-field. */
|
|
mlType: string
|
|
}
|
|
|
|
const props = defineProps<MLFieldProps>()
|
|
const emit = defineEmits<{ 'update:modelValue': [value: Record<string, string>] }>()
|
|
|
|
const values = computed(() => localeRecord(props.modelValue))
|
|
const enabledLocales = inject(FORM_ENABLED_LOCALES, null)
|
|
const locales = computed(() => {
|
|
const codes = enabledLocales?.value
|
|
return codes && codes.length > 0 ? [...codes] : []
|
|
})
|
|
const activeLocale = ref(locales.value[0] ?? 'en')
|
|
|
|
const labelledBy = computed(() => `${props.controlId}-label`)
|
|
const editorId = computed(() => `${props.controlId}-editor`)
|
|
const activeText = computed(() => values.value[activeLocale.value] ?? '')
|
|
// A stable field object for the inner control: it keeps size and attributes.
|
|
const innerField = computed(() => ({ ...props.field, type: props.innerType }))
|
|
|
|
function setLocale(locale: string) {
|
|
if (!locale) {
|
|
return
|
|
}
|
|
activeLocale.value = locale
|
|
}
|
|
|
|
function onLocaleInput(event: Event) {
|
|
const locale = (event.target as HTMLSelectElement).value
|
|
setLocale(locale)
|
|
broadcastMLLocale(locale)
|
|
}
|
|
|
|
function onText(text: string) {
|
|
emit('update:modelValue', { ...values.value, [activeLocale.value]: text })
|
|
}
|
|
|
|
function onBroadcast(event: Event) {
|
|
const locale = (event as CustomEvent<string>).detail
|
|
if (typeof locale === 'string' && locale !== '') {
|
|
setLocale(locale)
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener(ML_LOCALE_CHANGE, onBroadcast)
|
|
})
|
|
onUnmounted(() => {
|
|
window.removeEventListener(ML_LOCALE_CHANGE, onBroadcast)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-1.5" role="group" :aria-labelledby="labelledBy" :data-ml-field="mlType">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<select
|
|
data-ml-locale
|
|
class="rounded-control border border-border-strong bg-surface px-2 py-1 text-[13px]"
|
|
:value="activeLocale"
|
|
:aria-label="`Locale for ${field.label || field.name}`"
|
|
@change="onLocaleInput"
|
|
>
|
|
<option v-for="code in locales" :key="code" :value="code">{{ code }}</option>
|
|
</select>
|
|
</div>
|
|
<component
|
|
:is="inner"
|
|
:field="innerField"
|
|
:model-value="activeText"
|
|
:control-id="editorId"
|
|
:invalid="invalid"
|
|
:described-by="describedBy"
|
|
@update:model-value="onText"
|
|
/>
|
|
</div>
|
|
</template>
|