@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/runtime/editor/features/translations/CsvDialog/csv.d.ts

@@ -0,0 +1,22 @@
+export type CsvRow = {
+    key: string;
+    source: string;
+    translation: string;
+};
+export type MultiLangRow = {
+    key: string;
+    source: string;
+    entityType?: string;
+    translations: Record<string, string>;
+};
+export declare function buildCsv(rows: CsvRow[]): string;
+export declare function buildMultiLangCsv(rows: MultiLangRow[], languages: string[]): string;
+export type ParsedCsv = {
+    type: 'single';
+    rows: CsvRow[];
+} | {
+    type: 'multi';
+    languages: string[];
+    rows: MultiLangRow[];
+};
+export declare function parseCsv(text: string): ParsedCsv;

package/dist/runtime/editor/features/translations/CsvDialog/csv.js

@@ -0,0 +1,50 @@
+import * as Papa from "papaparse";
+export function buildCsv(rows) {
+  return Papa.unparse(rows, { header: true });
+}
+export function buildMultiLangCsv(rows, languages) {
+  const data = rows.map((row) => {
+    const obj = {
+      key: row.key,
+      source: row.source
+    };
+    for (const lang of languages) {
+      obj[lang] = row.translations[lang] ?? "";
+    }
+    return obj;
+  });
+  return Papa.unparse(data, { header: true });
+}
+export function parseCsv(text) {
+  const result = Papa.parse(text, {
+    header: true,
+    skipEmptyLines: true
+  });
+  const fields = result.meta.fields ?? [];
+  const langColumns = fields.filter((f) => f !== "key" && f !== "source");
+  if (langColumns.length === 1 && langColumns[0] === "translation") {
+    return {
+      type: "single",
+      rows: result.data.map((row) => ({
+        key: row.key ?? "",
+        source: row.source ?? "",
+        translation: row.translation ?? ""
+      }))
+    };
+  }
+  return {
+    type: "multi",
+    languages: langColumns,
+    rows: result.data.map((row) => {
+      const translations = {};
+      for (const lang of langColumns) {
+        translations[lang] = row[lang] ?? "";
+      }
+      return {
+        key: row.key ?? "",
+        source: row.source ?? "",
+        translations
+      };
+    })
+  };
+}

package/dist/runtime/editor/features/translations/CsvDialog/index.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    initialFiles?: File[] | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/CsvDialog/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <DialogModal
+    id="translations-csv"
+    :title="$t('translationsCsvDialogTitle', 'Import/Export Translations')"
+    icon="bk_mdi_translate"
+    :width="1800"
+    hide-buttons
+    @cancel="$emit('close')"
+  >
+    <template #tabs>
+      <Tabs v-model="mode" :tabs />
+    </template>
+    <div class="bk _bk_h-[calc(100vh-200px)] _bk_overflow-hidden">
+      <Export v-if="mode === 'export'" />
+      <Import v-else :initial-files="initialFiles" @close="$emit('close')" />
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import { DialogModal, Tabs } from "#blokkli/editor/components";
+import Export from "./Export/index.vue";
+import Import from "./Import/index.vue";
+const props = defineProps({
+  initialFiles: { type: [Array, null], required: false }
+});
+defineEmits(["close"]);
+const { $t } = useBlokkli();
+const mode = ref(
+  props.initialFiles?.length ? "import" : "export"
+);
+const tabs = [
+  { id: "export", label: $t("translationsCsvExport", "Export") },
+  { id: "import", label: $t("translationsCsvImport", "Import") }
+];
+</script>

package/dist/runtime/editor/features/translations/CsvDialog/index.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    initialFiles?: File[] | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/CsvDialog/po.d.ts

@@ -0,0 +1,7 @@
+import type { CsvRow } from './csv.js';
+export declare function buildPo(rows: CsvRow[], language: string): string;
+export type ParsedPo = {
+    language: string | undefined;
+    rows: CsvRow[];
+};
+export declare function parsePo(text: string): ParsedPo;

package/dist/runtime/editor/features/translations/CsvDialog/po.js

@@ -0,0 +1,36 @@
+import PO from "pofile";
+export function buildPo(rows, language) {
+  const po = new PO();
+  po.headers = {
+    "Project-Id-Version": "blokkli",
+    "POT-Creation-Date": (/* @__PURE__ */ new Date()).toISOString(),
+    Language: language,
+    "MIME-Version": "1.0",
+    "Content-Type": "text/plain; charset=UTF-8",
+    "Content-Transfer-Encoding": "8bit"
+  };
+  for (const row of rows) {
+    const item = new PO.Item();
+    item.msgctxt = row.key;
+    item.msgid = row.source;
+    item.msgstr = [row.translation];
+    po.items.push(item);
+  }
+  return po.toString();
+}
+export function parsePo(text) {
+  const po = PO.parse(text);
+  const rows = [];
+  for (const item of po.items) {
+    if (!item.msgctxt) continue;
+    rows.push({
+      key: item.msgctxt,
+      source: item.msgid,
+      translation: item.msgstr[0] ?? ""
+    });
+  }
+  return {
+    language: po.headers.Language || void 0,
+    rows
+  };
+}

package/dist/runtime/editor/features/translations/SelectionTable/index.d.vue.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    selectedCount?: number;
+    totalCount: number;
+    label?: string;
+    showSelection?: boolean;
+    showFilters?: boolean;
+};
+type __VLS_ModelProps = {
+    'onlyOutdated'?: boolean;
+    'onlyUntranslated'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    toolbar?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    body?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-all": () => any;
+    "update:onlyOutdated": (value: boolean | undefined) => any;
+    "update:onlyUntranslated": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onToggle-all"?: (() => any) | undefined;
+    "onUpdate:onlyOutdated"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:onlyUntranslated"?: ((value: boolean | undefined) => 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/runtime/editor/features/translations/SelectionTable/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="_bk_flex _bk_items-end _bk_justify-between _bk_flex-wrap _bk_gap-10 _bk_pb-15">
+    <span v-if="showSelection" class="_bk_text-mono-900 _bk_text-lg _bk_font-bold">
+      {{ selectedCount }}/{{ totalCount }}
+      {{ label }}
+    </span>
+    <slot name="toolbar" />
+    <div v-if="showFilters">
+      <div class="bk-form-label">Filter</div>
+      <div class="_bk_flex _bk_items-center _bk_gap-20">
+        <FormToggle
+          v-model="onlyOutdated"
+          :label="
+  $t('translationsCsvOnlyOutdated', 'Only outdated translations')
+"
+        />
+        <FormToggle
+          v-model="onlyUntranslated"
+          :label="$t('translationsCsvOnlyMissing', 'Only missing translations')"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="_bk_border _bk_border-mono-300 _bk_rounded _bk_overflow-auto _bk_flex-1">
+    <table class="bk-csv-table _bk_w-full _bk_text-sm _bk_select-text">
+      <thead>
+        <tr>
+          <th v-if="showSelection" class="_bk_w-40">
+            <div class="bk-checkbox">
+              <input
+                type="checkbox"
+                :checked="selectedCount === totalCount && totalCount > 0"
+                @change="$emit('toggle-all')"
+              />
+              <span class="_bk_!mt-0 _bk_before:!mt-0" />
+            </div>
+          </th>
+          <slot name="header" />
+        </tr>
+      </thead>
+      <tbody>
+        <slot name="body" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { FormToggle } from "#blokkli/editor/components";
+defineProps({
+  selectedCount: { type: Number, required: false },
+  totalCount: { type: Number, required: true },
+  label: { type: String, required: false },
+  showSelection: { type: Boolean, required: false },
+  showFilters: { type: Boolean, required: false }
+});
+const onlyOutdated = defineModel("onlyOutdated", { type: Boolean });
+const onlyUntranslated = defineModel("onlyUntranslated", { type: Boolean });
+defineEmits(["toggle-all"]);
+const { $t } = useBlokkli();
+</script>
+
+<style>
+.bk .bk-csv-table {
+  border-collapse: collapse;
+}
+
+  .bk .bk-csv-table th {
+  position: sticky;
+  top: 0px;
+  z-index: 50;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  padding: 8px;
+  text-align: left;
+  font-weight: 600;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk .bk-csv-table td {
+  border-top-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-top-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-border-opacity, 1));
+  padding: 8px;
+    max-width: 400px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+  .bk .bk-csv-table tr:hover td {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk .bk-csv-table .bk-is-empty {
+  font-style: italic;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+</style>

package/dist/runtime/editor/features/translations/SelectionTable/index.vue.d.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    selectedCount?: number;
+    totalCount: number;
+    label?: string;
+    showSelection?: boolean;
+    showFilters?: boolean;
+};
+type __VLS_ModelProps = {
+    'onlyOutdated'?: boolean;
+    'onlyUntranslated'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {}, __VLS_13: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    toolbar?: (props: typeof __VLS_1) => any;
+} & {
+    header?: (props: typeof __VLS_13) => any;
+} & {
+    body?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "toggle-all": () => any;
+    "update:onlyOutdated": (value: boolean | undefined) => any;
+    "update:onlyUntranslated": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onToggle-all"?: (() => any) | undefined;
+    "onUpdate:onlyOutdated"?: ((value: boolean | undefined) => any) | undefined;
+    "onUpdate:onlyUntranslated"?: ((value: boolean | undefined) => 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/runtime/editor/features/translations/TranslateDialog/index.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/TranslateDialog/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <DialogModal
+    id="translations-translate"
+    :title="$t('translationsTranslateDialogTitle', 'Automatic Translation')"
+    icon="bk_mdi_translate"
+    :width="1800"
+    hide-buttons
+    @cancel="$emit('close')"
+  >
+    <div class="bk _bk_h-[calc(100vh-200px)] _bk_overflow-hidden _bk_flex _bk_flex-col">
+      <template v-if="isLoading">
+        <div class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
+          <Loading />
+        </div>
+      </template>
+
+      <template v-else-if="!sourceValues.length">
+        <div class="_bk_py-20 _bk_text-center _bk_text-mono-500">
+          {{
+            $t(
+  "translationsTranslateNoTexts",
+  "No translatable texts found on this page."
+)
+          }}
+        </div>
+      </template>
+
+      <template v-else>
+        <SelectionTable
+          v-model:only-outdated="onlyOutdated"
+          v-model:only-untranslated="onlyUntranslated"
+          show-filters
+          show-selection
+          :selected-count="selectedCount"
+          :total-count="filteredValues.length"
+          :label="$t('translationsTranslateFieldsLabel', 'fields selected')"
+          @toggle-all="toggleAll"
+        >
+          <template #header>
+            <th>{{ sourceLangName }}</th>
+            <th v-if="hasTranslated">
+              {{ targetLangName }}
+            </th>
+            <th v-else>
+              {{
+                $t(
+  "translationsTranslateCurrentColumn",
+  "Current translation (@language)"
+).replace("@language", targetLangName)
+              }}
+            </th>
+          </template>
+          <template #body>
+            <tr v-for="item in filteredValues" :key="item.key">
+              <td>
+                <div class="bk-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="selected[item.key]"
+                    @change="selected[item.key] = !selected[item.key]"
+                  />
+                  <span class="_bk_!mt-0 _bk_before:!mt-0" />
+                </div>
+              </td>
+              <td v-text="stripHtml(item.value)" />
+              <td v-if="hasTranslated && translations.has(item.key)">
+                <DiffValue
+                  :before="currentValues.get(item.key) || ''"
+                  :after="translations.get(item.key) || ''"
+                  :after-only="
+  !currentValues.get(item.key) || currentValues.get(item.key) === item.value
+"
+                />
+              </td>
+              <td v-else>
+                <span
+                  v-if="
+  currentValues.get(item.key) && currentValues.get(item.key) !== item.value
+"
+                  v-text="stripHtml(currentValues.get(item.key))"
+                />
+                <span v-else class="_bk_text-mono-400 _bk_italic">&mdash;</span>
+              </td>
+            </tr>
+          </template>
+        </SelectionTable>
+
+        <div class="_bk_flex _bk_items-center _bk_gap-10 _bk_mt-auto _bk_pt-20">
+          <button
+            class="bk-button"
+            :disabled="!selectedCount || isTranslating"
+            @click="requestTranslations"
+          >
+            <template v-if="isTranslating">
+              {{ $t("translationsTranslateLoading", "Translating...") }}
+            </template>
+            <template v-else>
+              {{
+                $t(
+  "translationsTranslateButton",
+  "Request @count translations"
+).replace("@count", selectedCount.toString())
+              }}
+            </template>
+          </button>
+          <button
+            class="bk-button bk-is-primary"
+            :disabled="!hasTranslated || !selectedCount || isApplying"
+            @click="applyTranslations"
+          >
+            {{
+              $t(
+  "translationsTranslateApply",
+  "Apply @count translations"
+).replace("@count", selectedCount.toString())
+            }}
+          </button>
+          <FormToggle
+            v-model="markUpToDate"
+            class="_bk_!h-auto"
+            :label="
+  $t('translationsMarkUpToDate', 'Mark translations as up to date')
+"
+          />
+        </div>
+      </template>
+
+      <div
+        v-if="errorMessage"
+        class="_bk_text-red-normal _bk_text-sm"
+        v-text="errorMessage"
+      />
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, onMounted } from "#imports";
+import {
+  DialogModal,
+  DiffValue,
+  FormToggle,
+  Loading
+} from "#blokkli/editor/components";
+import SelectionTable from "../SelectionTable/index.vue";
+const emit = defineEmits(["close"]);
+const { adapter, $t, state, context, blocks } = useBlokkli();
+const sourceValues = ref([]);
+const currentValues = ref(/* @__PURE__ */ new Map());
+const translations = ref(/* @__PURE__ */ new Map());
+const selected = ref({});
+const isLoading = ref(true);
+const isTranslating = ref(false);
+const isApplying = ref(false);
+const hasTranslated = ref(false);
+const markUpToDate = ref(false);
+const errorMessage = ref("");
+const onlyOutdated = ref(false);
+const onlyUntranslated = ref(false);
+const sourceLanguage = computed(
+  () => state.translation.value.sourceLanguage || "en"
+);
+const targetLanguage = computed(() => context.value.language);
+const outdatedUuids = computed(() => {
+  const lang = targetLanguage.value;
+  return new Set(
+    blocks.getAllBlocks().filter((b) => b.outdatedTranslations.includes(lang)).map((b) => b.uuid)
+  );
+});
+const filteredValues = computed(() => {
+  let items = sourceValues.value;
+  if (onlyOutdated.value) {
+    items = items.filter((item) => outdatedUuids.value.has(item.uuid));
+  }
+  if (onlyUntranslated.value) {
+    items = items.filter((item) => {
+      const current = currentValues.value.get(item.key);
+      return !current || current === item.value;
+    });
+  }
+  return items;
+});
+const selectedCount = computed(
+  () => filteredValues.value.filter((item) => selected.value[item.key]).length
+);
+const sourceLangName = computed(() => {
+  const id = sourceLanguage.value;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+const targetLangName = computed(() => {
+  const id = targetLanguage.value;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+function toggleAll() {
+  const allSelected = filteredValues.value.length > 0 && selectedCount.value === filteredValues.value.length;
+  const newValue = !allSelected;
+  for (const item of filteredValues.value) {
+    selected.value[item.key] = newValue;
+  }
+}
+function stripHtml(text) {
+  const div = document.createElement("div");
+  div.innerHTML = text;
+  return div.textContent || "";
+}
+async function loadTexts() {
+  isLoading.value = true;
+  errorMessage.value = "";
+  try {
+    const source = await adapter.loadTextFieldValuesForLanguage(
+      sourceLanguage.value
+    );
+    sourceValues.value = source.map((v) => ({
+      ...v,
+      key: `${v.uuid}:${v.fieldName}`
+    }));
+    for (const item of sourceValues.value) {
+      selected.value[item.key] = true;
+    }
+    const current = await adapter.loadTextFieldValuesForLanguage(
+      targetLanguage.value
+    );
+    const map = /* @__PURE__ */ new Map();
+    for (const v of current) {
+      map.set(`${v.uuid}:${v.fieldName}`, v.value);
+    }
+    currentValues.value = map;
+  } catch (e) {
+    errorMessage.value = e?.message || "Failed to load texts.";
+  } finally {
+    isLoading.value = false;
+  }
+}
+async function requestTranslations() {
+  isTranslating.value = true;
+  errorMessage.value = "";
+  const items = filteredValues.value.filter((item) => selected.value[item.key]).map((item) => ({
+    key: item.key,
+    text: item.value,
+    isHtml: item.fieldType === "markup",
+    sourceLanguage: sourceLanguage.value,
+    targetLanguage: targetLanguage.value
+  }));
+  try {
+    const response = await adapter.requestTranslation(items);
+    if (!response.success) {
+      errorMessage.value = response.errors?.join(", ") || "Translation request failed.";
+      return;
+    }
+    const map = /* @__PURE__ */ new Map();
+    for (const result of response.data) {
+      map.set(result.key, result.translatedText);
+    }
+    translations.value = map;
+    hasTranslated.value = true;
+  } catch (e) {
+    errorMessage.value = e?.message || "Translation request failed.";
+  } finally {
+    isTranslating.value = false;
+  }
+}
+async function applyTranslations() {
+  isApplying.value = true;
+  errorMessage.value = "";
+  const items = filteredValues.value.filter(
+    (item) => selected.value[item.key] && translations.value.has(item.key)
+  ).map((item) => {
+    const separatorIndex = item.key.indexOf(":");
+    return {
+      langcode: targetLanguage.value,
+      uuid: item.key.substring(0, separatorIndex),
+      fieldName: item.key.substring(separatorIndex + 1),
+      fieldValue: translations.value.get(item.key)
+    };
+  });
+  if (!items.length) return;
+  try {
+    await state.mutateWithLoadingState(
+      () => adapter.importTranslationsBatched({
+        items,
+        markUpToDate: markUpToDate.value
+      })
+    );
+    emit("close");
+  } catch (e) {
+    errorMessage.value = e?.message || "Failed to apply translations.";
+  } finally {
+    isApplying.value = false;
+  }
+}
+onMounted(() => {
+  loadTexts();
+});
+</script>

package/dist/runtime/editor/features/translations/TranslateDialog/index.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;