@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/modules/charts/runtime/features/charts/Editor/NumberFormatEditor/index.vue.d.ts

@@ -0,0 +1,21 @@
+import type { ChartNumberFormat } from '../../../../types.js';
+type __VLS_Props = {
+    format: ChartNumberFormat;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:format": (value: ChartNumberFormat) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:format"?: ((value: ChartNumberFormat) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/modules/charts/runtime/features/charts/Editor/OrphanOverridesWarning/index.d.vue.ts

@@ -0,0 +1,18 @@
+export type OrphanOverride = {
+    scope: 'series' | 'category';
+    scopeLabel: string;
+    name: string;
+};
+type __VLS_Props = {
+    seriesOverrideNames: string[];
+    categoryOverrideNames: string[];
+    knownSeries: string[];
+    knownCategories: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (args_0: OrphanOverride) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((args_0: OrphanOverride) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/OrphanOverridesWarning/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div v-if="orphans.length" class="_bk_p-panel-gap">
+    <InfoBox color="yellow" small>
+      <p class="_bk_text-pretty _bk_mb-5">
+        {{
+          $t(
+  "chartsOrphanOverridesIntro",
+  "These overrides reference items not present in the current data:"
+)
+        }}
+      </p>
+      <ul class="_bk_flex _bk_flex-col _bk_gap-3 _bk_mt-5">
+        <li
+          v-for="orphan in orphans"
+          :key="`${orphan.scope}:${orphan.name}`"
+          class="_bk_flex _bk_items-center _bk_justify-between _bk_gap-10 _bk_bg-white _bk_border _bk_border-mono-300 _bk_rounded _bk_px-8 _bk_py-3"
+        >
+          <span class="_bk_font-medium _bk_text-mono-800 _bk_truncate">
+            <span class="_bk_text-mono-500 _bk_mr-5">{{ orphan.scopeLabel }}</span>
+            {{ orphan.name }}
+          </span>
+          <button
+            type="button"
+            class="bk-button bk-scheme-mono bk-is-small bk-is-icon"
+            :title="$t('chartsOrphanOverridesRemove', 'Remove override')"
+            @click="$emit('remove', orphan)"
+          >
+            <Icon name="bk_mdi_close" />
+          </button>
+        </li>
+      </ul>
+    </InfoBox>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, InfoBox } from "#blokkli/editor/components";
+const props = defineProps({
+  seriesOverrideNames: { type: Array, required: true },
+  categoryOverrideNames: { type: Array, required: true },
+  knownSeries: { type: Array, required: true },
+  knownCategories: { type: Array, required: true }
+});
+defineEmits(["remove"]);
+const { $t } = useBlokkli();
+const orphans = computed(() => {
+  const result = [];
+  const knownSeries = new Set(props.knownSeries);
+  const knownCategories = new Set(props.knownCategories);
+  const seriesLabel = $t("chartsTranslationsSeries", "Series");
+  const categoryLabel = $t("category", "Category");
+  for (const name of props.seriesOverrideNames) {
+    if (!knownSeries.has(name)) {
+      result.push({ scope: "series", scopeLabel: seriesLabel, name });
+    }
+  }
+  for (const name of props.categoryOverrideNames) {
+    if (!knownCategories.has(name)) {
+      result.push({ scope: "category", scopeLabel: categoryLabel, name });
+    }
+  }
+  return result;
+});
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/OrphanOverridesWarning/index.vue.d.ts

@@ -0,0 +1,18 @@
+export type OrphanOverride = {
+    scope: 'series' | 'category';
+    scopeLabel: string;
+    name: string;
+};
+type __VLS_Props = {
+    seriesOverrideNames: string[];
+    categoryOverrideNames: string[];
+    knownSeries: string[];
+    knownCategories: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (args_0: OrphanOverride) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((args_0: OrphanOverride) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.d.vue.ts

@@ -1,8 +1,9 @@
-import type { BlokkliChartData } from '../../../../types.js';
+import type { BlokkliChartData, ChartDataSourcePayload } from '../../../../types.js';
 type __VLS_Props = {
     uuid: string;
     optionKey: string;
     data: BlokkliChartData | null;
+    dynamicData: ChartDataSourcePayload | null;
     stale: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'bk-is-stale': stale }">
+  <div :class="{ '_bk_opacity-50': stale }">
     <BlokkliItem
       v-if="item"
       v-bind="item"
@@ -19,11 +19,13 @@ import {
   INJECT_IS_IN_REUSABLE,
   INJECT_PROVIDER_BLOCKS
 } from "#blokkli/helpers/injections";
+import { INJECT_CHART_PREVIEW_DYNAMIC_DATA } from "../../../../helpers/previewInjection";
 const { state } = useBlokkli();
 const props = defineProps({
   uuid: { type: String, required: true },
   optionKey: { type: String, required: true },
   data: { type: [Object, null], required: true },
+  dynamicData: { type: [Object, null], required: true },
   stale: { type: Boolean, required: true }
 });
 const item = computed(() => state.getFieldListItem(props.uuid));
@@ -36,10 +38,14 @@ const mergedOptions = computed(() => {
 });
 const blocks = computed(() => []);
 const fieldListType = computed(() => "default");
+const dynamicDataRef = computed(
+  () => props.dynamicData
+);
 provide(INJECT_IS_IN_REUSABLE, true);
-provide(INJECT_IS_EDITING, false);
+provide(INJECT_IS_EDITING, true);
 provide(INJECT_FIELD_LIST_BLOCKS, blocks);
 provide(INJECT_PROVIDER_BLOCKS, blocks);
 provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 provide(INJECT_EDIT_CONTEXT, null);
+provide(INJECT_CHART_PREVIEW_DYNAMIC_DATA, dynamicDataRef);
 </script>

package/dist/modules/charts/runtime/features/charts/Editor/Preview/index.vue.d.ts

@@ -1,8 +1,9 @@
-import type { BlokkliChartData } from '../../../../types.js';
+import type { BlokkliChartData, ChartDataSourcePayload } from '../../../../types.js';
 type __VLS_Props = {
     uuid: string;
     optionKey: string;
     data: BlokkliChartData | null;
+    dynamicData: ChartDataSourcePayload | null;
     stale: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/modules/charts/runtime/features/charts/Editor/SeriesOverridesPanel/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ChartSeriesOverride } from '../../../../types.js';
+type __VLS_Props = {
+    seriesNames: string[];
+    overrides: Record<string, ChartSeriesOverride>;
+    hasSeriesColors: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:overrides": (args_0: Record<string, ChartSeriesOverride>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:overrides"?: ((args_0: Record<string, ChartSeriesOverride>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/SeriesOverridesPanel/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="_bk_flex _bk_flex-col _bk_gap-5 _bk_p-panel-gap">
+    <div class="bk-form-label">
+      {{ $t("chartsTranslationsSeries", "Series") }}
+    </div>
+    <InfoBox
+      v-if="seriesNames.length > MAX_OVERRIDE_ROWS"
+      small
+      :text="
+  $t(
+    'chartsDynamicOverridesTooMany',
+    'Too many items to configure inline (@count, max @max).'
+  ).replace('@count', String(seriesNames.length)).replace('@max', String(MAX_OVERRIDE_ROWS))
+"
+    />
+    <div v-else-if="!seriesNames.length" class="_bk_text-sm _bk_text-mono-500">
+      {{ $t("chartsDynamicNoSeries", "No series.") }}
+    </div>
+    <div v-else class="_bk_flex _bk_flex-col _bk_gap-5">
+      <div
+        v-for="(name, i) in seriesNames"
+        :key="name"
+        class="_bk_flex _bk_items-center _bk_gap-10 _bk_bg-white _bk_border _bk_border-mono-300 _bk_rounded _bk_px-5 _bk_py-3"
+      >
+        <ColorDropdown
+          v-if="hasSeriesColors"
+          :color-id="colorFor(name, i)"
+          @select="setColor(name, $event)"
+        />
+        <span class="_bk_flex-1 _bk_truncate _bk_text-sm _bk_font-medium _bk_text-mono-800">
+          {{ name }}
+        </span>
+        <button
+          type="button"
+          class="_bk_flex _bk_items-center _bk_justify-center _bk_size-30 _bk_text-mono-500 _bk_hover:text-accent-700"
+          :title="
+  isHidden(name) ? $t('chartsDynamicShowSeries', 'Show series') : $t('chartsDynamicHideSeries', 'Hide series')
+"
+          @click="toggleHidden(name)"
+        >
+          <Icon
+            :name="
+  isHidden(name) ? 'bk_mdi_visibility_off' : 'bk_mdi_visibility'
+"
+            class="_bk_[&_svg]:size-20"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, InfoBox } from "#blokkli/editor/components";
+import ColorDropdown from "../ColorDropdown/index.vue";
+const props = defineProps({
+  seriesNames: { type: Array, required: true },
+  overrides: { type: Object, required: true },
+  hasSeriesColors: { type: Boolean, required: true }
+});
+const emit = defineEmits(["update:overrides"]);
+const { $t, config } = useBlokkli();
+const MAX_OVERRIDE_ROWS = 200;
+const colorOptions = computed(() => config.colorOptions.value);
+function fallbackColor(index) {
+  const opts = colorOptions.value;
+  if (opts.length === 0) return "";
+  return opts[index % opts.length]?.id ?? opts[0]?.id ?? "";
+}
+function colorFor(name, index) {
+  return props.overrides[name]?.color ?? fallbackColor(index);
+}
+function isHidden(name) {
+  return props.overrides[name]?.hidden === true;
+}
+function patch(name, patch2) {
+  const existing = props.overrides[name] ?? {};
+  const merged = { ...existing, ...patch2 };
+  const next = {};
+  for (const key of Object.keys(props.overrides)) {
+    if (key !== name) next[key] = props.overrides[key];
+  }
+  if (merged.color !== void 0 || merged.hidden !== void 0) {
+    next[name] = merged;
+  }
+  emit("update:overrides", next);
+}
+function setColor(name, colorId) {
+  patch(name, { color: colorId });
+}
+function toggleHidden(name) {
+  patch(name, { hidden: !isHidden(name) || void 0 });
+}
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/SeriesOverridesPanel/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ChartSeriesOverride } from '../../../../types.js';
+type __VLS_Props = {
+    seriesNames: string[];
+    overrides: Record<string, ChartSeriesOverride>;
+    hasSeriesColors: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:overrides": (args_0: Record<string, ChartSeriesOverride>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:overrides"?: ((args_0: Record<string, ChartSeriesOverride>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/{runtime/editor/components/AutoHeight → modules/charts/runtime/features/charts/Editor/TranslationsEditor/TranslationRow}/index.d.vue.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    anchor: 'top' | 'bottom';
+    source: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/modules/charts/runtime/features/charts/Editor/TranslationsEditor/TranslationRow/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="_bk_grid _bk_grid-cols-2 _bk_gap-10 _bk_items-start">
+    <div class="_bk_min-h-[46px] _bk_pt-[10px]">
+      {{ source || sourcePlaceholder }}
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+defineProps({
+  source: { type: String, required: true }
+});
+const { $t } = useBlokkli();
+const sourcePlaceholder = computed(
+  () => $t("chartsTranslationsSource", "Source")
+);
+</script>

package/dist/{runtime/editor/components/AutoHeight → modules/charts/runtime/features/charts/Editor/TranslationsEditor/TranslationRow}/index.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    anchor: 'top' | 'bottom';
+    source: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/modules/charts/runtime/features/charts/Editor/TranslationsEditor/index.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BlokkliChartData, ChartTranslation } from '../../../../types.js';
+type __VLS_Props = {
+    chartData: BlokkliChartData;
+    hasNumericCategories: boolean;
+    hasDateFormattedCategories: boolean;
+};
+type __VLS_ModelProps = {
+    'translations'?: Record<string, ChartTranslation>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:translations": (value: Record<string, ChartTranslation>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:translations"?: ((value: Record<string, ChartTranslation>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/TranslationsEditor/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <PanelSection
+    v-if="targetLanguages.length"
+    :title="$t('translations', 'Translations')"
+    padded
+  >
+    <template v-if="!isTranslation" #tabs>
+      <PanelTabs v-model="activeLanguage" :tabs="languageTabs" />
+    </template>
+
+    <div>
+      <template v-if="active">
+        <FormItem v-if="chartData.title">
+          <div class="bk-form-label">
+            {{ $t("title", "Title") }}
+          </div>
+          <TranslationRow :source="chartData.title">
+            <FormText
+              :id="`chart-translation-${activeLanguage}-title`"
+              :label="active.name"
+              :model-value="active.translation.title ?? ''"
+              hide-label
+              lazy
+              @update:model-value="updateField('title', $event ?? '')"
+            />
+          </TranslationRow>
+        </FormItem>
+
+        <FormItem
+          v-if="
+  !chartData.dataSource && chartData.categories.length && !hasNumericCategories && !hasDateFormattedCategories
+"
+        >
+          <div class="bk-form-label">
+            {{ $t("categories", "Categories") }}
+          </div>
+          <InfoBox
+            v-if="chartData.categories.length > MAX_TRANSLATABLE_ITEMS"
+            small
+            :text="
+  $t(
+    'chartsTranslationsTooMany',
+    'Too many items to translate inline (@count, max @max).'
+  ).replace('@count', String(chartData.categories.length)).replace('@max', String(MAX_TRANSLATABLE_ITEMS))
+"
+          />
+          <div v-else class="_bk_flex _bk_flex-col _bk_gap-10">
+            <TranslationRow
+              v-for="(category, i) in chartData.categories"
+              :key="`category-${i}`"
+              :source="category"
+            >
+              <FormText
+                :id="`chart-translation-${activeLanguage}-category-${i}`"
+                :label="active.name"
+                :model-value="active.translation.categories?.[i] ?? ''"
+                hide-label
+                lazy
+                @update:model-value="
+  updateArrayField('categories', i, $event ?? '')
+"
+              />
+            </TranslationRow>
+          </div>
+        </FormItem>
+
+        <FormItem v-if="!chartData.dataSource && chartData.series.length">
+          <div class="bk-form-label">
+            {{ $t("chartsTranslationsSeries", "Series") }}
+          </div>
+          <InfoBox
+            v-if="chartData.series.length > MAX_TRANSLATABLE_ITEMS"
+            small
+            :text="
+  $t(
+    'chartsTranslationsTooMany',
+    'Too many items to translate inline (@count, max @max).'
+  ).replace('@count', String(chartData.series.length)).replace('@max', String(MAX_TRANSLATABLE_ITEMS))
+"
+          />
+          <div v-else class="_bk_flex _bk_flex-col _bk_gap-10">
+            <TranslationRow
+              v-for="(series, i) in chartData.series"
+              :key="`series-${i}`"
+              :source="series.name"
+            >
+              <FormText
+                :id="`chart-translation-${activeLanguage}-series-${i}`"
+                :label="active.name"
+                :model-value="active.translation.seriesNames?.[i] ?? ''"
+                hide-label
+                lazy
+                @update:model-value="
+  updateArrayField('seriesNames', i, $event ?? '')
+"
+              />
+            </TranslationRow>
+          </div>
+        </FormItem>
+
+        <FormItem v-if="chartData.footnotes.length">
+          <div class="bk-form-label">
+            {{ $t("footnotes", "Footnotes") }}
+          </div>
+          <div class="_bk_flex _bk_flex-col _bk_gap-10">
+            <TranslationRow
+              v-for="(note, i) in chartData.footnotes"
+              :key="`footnote-${i}`"
+              :source="note"
+            >
+              <FormTextarea
+                :id="`chart-translation-${activeLanguage}-footnote-${i}`"
+                :label="active.name"
+                :rows="2"
+                :model-value="active.translation.footnotes?.[i] ?? ''"
+                hide-label
+                lazy
+                @update:model-value="
+  updateArrayField('footnotes', i, $event ?? '')
+"
+              />
+            </TranslationRow>
+          </div>
+        </FormItem>
+
+        <FormItem v-if="chartData.numberFormat?.prefix">
+          <div class="bk-form-label">
+            {{ $t("prefix", "Prefix") }}
+          </div>
+          <TranslationRow :source="chartData.numberFormat.prefix">
+            <FormText
+              :id="`chart-translation-${activeLanguage}-prefix`"
+              :label="active.name"
+              :model-value="active.translation.prefix ?? ''"
+              hide-label
+              lazy
+              @update:model-value="updateField('prefix', $event ?? '')"
+            />
+          </TranslationRow>
+        </FormItem>
+
+        <FormItem v-if="chartData.numberFormat?.suffix">
+          <div class="bk-form-label">
+            {{ $t("suffix", "Suffix") }}
+          </div>
+          <TranslationRow :source="chartData.numberFormat.suffix">
+            <FormText
+              :id="`chart-translation-${activeLanguage}-suffix`"
+              :label="active.name"
+              :model-value="active.translation.suffix ?? ''"
+              hide-label
+              lazy
+              @update:model-value="updateField('suffix', $event ?? '')"
+            />
+          </TranslationRow>
+        </FormItem>
+      </template>
+    </div>
+  </PanelSection>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, watch } from "#imports";
+import {
+  FormItem,
+  FormText,
+  FormTextarea,
+  InfoBox
+} from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelTabs from "#blokkli/editor/components/Panel/Tabs/index.vue";
+import TranslationRow from "./TranslationRow/index.vue";
+const props = defineProps({
+  chartData: { type: Object, required: true },
+  hasNumericCategories: { type: Boolean, required: true },
+  hasDateFormattedCategories: { type: Boolean, required: true }
+});
+const MAX_TRANSLATABLE_ITEMS = 50;
+const translations = defineModel("translations", { type: Object, ...{ default: () => ({}) } });
+const { $t, state, context } = useBlokkli();
+const isTranslation = computed(() => state.editMode.value === "translating");
+const targetLanguages = computed(() => {
+  const t = state.translation.value;
+  if (!t.isTranslatable) return [];
+  const source = t.sourceLanguage;
+  const candidates = (t.translations ?? []).filter((x) => x.exists && x.id !== source).map((x) => {
+    const lang = (t.availableLanguages ?? []).find((l) => l.id === x.id);
+    return { id: x.id, name: lang?.name ?? x.id };
+  });
+  if (isTranslation.value) {
+    const current = context.value.language;
+    return candidates.filter((l) => l.id === current);
+  }
+  return candidates;
+});
+const languageTabs = computed(
+  () => targetLanguages.value.map((l) => ({ id: l.id, label: l.name }))
+);
+const activeLanguage = ref(targetLanguages.value[0]?.id ?? "");
+watch(
+  targetLanguages,
+  (langs) => {
+    if (!langs.find((l) => l.id === activeLanguage.value)) {
+      activeLanguage.value = langs[0]?.id ?? "";
+    }
+  },
+  { immediate: true }
+);
+function ensureTranslation(lang) {
+  let t = translations.value[lang];
+  if (!t) {
+    t = {
+      title: "",
+      categories: Array.from({
+        length: props.chartData.categories.length
+      }).fill(""),
+      seriesNames: Array.from({
+        length: props.chartData.series.length
+      }).fill(""),
+      footnotes: Array.from({
+        length: props.chartData.footnotes.length
+      }).fill(""),
+      prefix: "",
+      suffix: ""
+    };
+    translations.value[lang] = t;
+  } else {
+    if (t.title === void 0) t.title = "";
+    if (!t.categories) {
+      t.categories = Array.from({
+        length: props.chartData.categories.length
+      }).fill("");
+    }
+    if (!t.seriesNames) {
+      t.seriesNames = Array.from({
+        length: props.chartData.series.length
+      }).fill("");
+    }
+    if (!t.footnotes) {
+      t.footnotes = Array.from({
+        length: props.chartData.footnotes.length
+      }).fill("");
+    }
+  }
+  return t;
+}
+const active = computed(() => {
+  if (!activeLanguage.value) return null;
+  const lang = targetLanguages.value.find((l) => l.id === activeLanguage.value);
+  if (!lang) return null;
+  const translation = ensureTranslation(lang.id);
+  return { id: lang.id, name: lang.name, translation };
+});
+function updateField(key, value) {
+  if (!active.value) return;
+  active.value.translation[key] = value;
+}
+function updateArrayField(key, index, value) {
+  if (!active.value) return;
+  const arr = active.value.translation[key];
+  if (!arr) return;
+  arr[index] = value;
+}
+</script>

package/dist/modules/charts/runtime/features/charts/Editor/TranslationsEditor/index.vue.d.ts

@@ -0,0 +1,17 @@
+import type { BlokkliChartData, ChartTranslation } from '../../../../types.js';
+type __VLS_Props = {
+    chartData: BlokkliChartData;
+    hasNumericCategories: boolean;
+    hasDateFormattedCategories: boolean;
+};
+type __VLS_ModelProps = {
+    'translations'?: Record<string, ChartTranslation>;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:translations": (value: Record<string, ChartTranslation>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:translations"?: ((value: Record<string, ChartTranslation>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/charts/runtime/features/charts/Editor/index.d.vue.ts

@@ -1,4 +1,5 @@
 import type { BlokkliChartData } from '../../../types.js';
+import '#blokkli/charts/adapter';
 type __VLS_Props = {
     data: BlokkliChartData | null;
     uuid: string;