Translation Grid
Examples
Enabling From A Form
Naming The Source
A Row Per Field
Importing
Slots
Properties
Parts

Translation Grid

<zn-translation-grid> | ZnTranslationGrid

Since 1.0

experimental

Shows how far each language’s translation has got, with a column per language to choose and enable it, and optionally a row per translated field.

Each language gets a column: its code links to that language’s translation, the Enable row holds the control that turns it on, and the Translation row shows its status. Pass the languages as a JSON array of {code, label, status, href}, where status is source, translated, outdated or missing, and put each language’s Enable control in the enable-{code} slot.

<zn-translation-grid
  selected="es"
  languages='[
    {"code":"en","label":"English","status":"source"},
    {"code":"fr","label":"French","status":"translated","href":"#fr"},
    {"code":"de","label":"German","status":"outdated","href":"#de"},
    {"code":"es","label":"Spanish","status":"missing","href":"#es"},
    {"code":"it","label":"Italian","status":"missing","href":"#it"}
  ]'>
  <zn-checkbox slot="enable-en" checked disabled aria-label="English is always on"></zn-checkbox>
  <zn-checkbox slot="enable-fr" checked aria-label="Enable French"></zn-checkbox>
  <zn-checkbox slot="enable-de" aria-label="Enable German"></zn-checkbox>
  <zn-checkbox slot="enable-es" disabled aria-label="Enable Spanish"></zn-checkbox>
  <zn-checkbox slot="enable-it" disabled aria-label="Enable Italian"></zn-checkbox>
</zn-translation-grid>

Examples

Enabling From A Form

Each Enable control can post on its own: put it in a form in the language’s slot and give it submit-on-click, with an unchecked-value so unticking posts too.

<zn-translation-grid
  selected="fr"
  languages='[
    {"code":"en","label":"English","status":"source"},
    {"code":"fr","label":"French","status":"translated","href":"#fr"}
  ]'>
  <zn-checkbox slot="enable-en" checked disabled aria-label="English is always on"></zn-checkbox>
  <form slot="enable-fr" method="post" action="/translations/fr/enable">
    <zn-checkbox name="enabled" value="1" unchecked-value="0" submit-on-click aria-label="Enable French"></zn-checkbox>
  </form>
</zn-translation-grid>

Naming The Source

The legend calls an out-of-date translation “English changed”. Set source-label when the source is another language.

<zn-translation-grid
  source-label="German"
  languages='[
    {"code":"de","label":"German","status":"source"},
    {"code":"en","label":"English","status":"outdated","href":"#en"}
  ]'>
</zn-translation-grid>

A Row Per Field

When a record has several translated fields, pass them as fields, a JSON array of {key, label, cells} where cells holds each language’s {status, href} keyed by its code. Each field gets its own row, and selected-field with selected rings the cell being edited. Leave out the enable-{code} slots to drop the Enable row.

<zn-translation-grid
  selected="de"
  selected-field="content"
  languages='[
    {"code":"en","label":"English"},
    {"code":"fr","label":"French","href":"#fr"},
    {"code":"de","label":"German","href":"#de"}
  ]'
  fields='[
    {"key":"name","label":"Display name","cells":{"en":{"status":"source"},"fr":{"status":"translated","href":"#name-fr"},"de":{"status":"missing","href":"#name-de"}}},
    {"key":"content","label":"Content","cells":{"en":{"status":"source"},"fr":{"status":"outdated","href":"#content-fr"},"de":{"status":"missing","href":"#content-de"}}}
  ]'>
</zn-translation-grid>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.185/dist/components/translation-grid/translation-grid.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.185/dist/components/translation-grid/translation-grid.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/translation-grid/translation-grid.js';

Slots

Name	Description
(default)	Help text under the legend.
`enable-{code}`	The control that enables the language with that code, such as a `zn-checkbox` in a form. The Enable row only shows when at least one is given.

Learn more about using slots.

Properties

Name	Description	Type	Default
`languages`	The languages, in column order, as a JSON array of `{code, label, status, href}`.	`TranslationGridLanguage[]`	`[]`
`fields`	A row per translated field, as a JSON array of `{key, label, cells}`; without it there is one Translation row.	`TranslationGridField[]`	`[]`
`selected`	The code of the language being edited.	`string`	`''`
`selectedField` `selected-field`	The key of the field being edited, when there are `fields`.	`string`	`''`
`linkTarget` `link-target`	Where the language links open, as a console `data-target`; `self` replaces the content they sit in.	`string`	`''`
`sourceLabel` `source-label`	Names the source in the legend, such as “English changed”.	`string`	`'English'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.