56 lines
1.3 KiB
Svelte
56 lines
1.3 KiB
Svelte
|
<svelte:options
|
||
|
|
customElement={{
|
||
|
|
props: {
|
||
|
|
field_id: { attribute: "field-id" },
|
||
|
|
languages: { type: "Array" },
|
||
|
|
value: { type: "Object" },
|
||
|
|
},
|
||
|
|
shadow: "none",
|
||
|
|
tag: "i18n-textarea",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
@component
|
||
|
|
A textbox allowing for input in multiple alternative languages, used in the
|
||
|
|
form editor. The `value` attribute is expected to be a JSON record mapping
|
||
|
|
language codes to their initial text contents. The `languages` attribute is
|
||
|
|
expected to be a JSON array containing objects with keys `"code"` and
|
||
|
|
`"locale_str"`.
|
||
|
|
|
||
|
|
Form values are exposed as textarea inputs named as:
|
||
|
|
`<FIELD_ID>.<LANGUAGE_CODE>`.
|
||
|
|
-->
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
const DEFAULT_LANGUAGE = "eng";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
field_id: string;
|
||
|
|
languages: {
|
||
|
|
code: string;
|
||
|
|
locale_str: string;
|
||
|
|
}[];
|
||
|
|
value: Record<string, string>;
|
||
|
|
};
|
||
|
|
|
||
|
|
let { field_id = "", languages = [], value = {} }: Props = $props();
|
||
|
|
|
||
|
|
let visible_language = $state(DEFAULT_LANGUAGE);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="i18n-textarea">
|
||
|
|
<select bind:value={visible_language}>
|
||
|
|
{#each languages as { code, locale_str }}
|
||
|
|
<option value={code}>{locale_str}</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
{#each languages as { code }}
|
||
|
|
<textarea
|
||
|
|
name={`${field_id}.${code}`}
|
||
|
|
style:display={visible_language === code ? "block" : "none"}
|
||
|
|
>{value[code]}</textarea
|
||
|
|
>
|
||
|
|
{/each}
|
||
|
|
</div>
|