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

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

@@ -0,0 +1,272 @@
+<template>
+  <div class="_bk_flex _bk_flex-col _bk_h-full">
+    <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_gap-10 _bk_py-20">
+      <Loading />
+    </div>
+    <template v-else-if="exportRows.length">
+      <SelectionTable
+        v-model:only-outdated="onlyOutdated"
+        v-model:only-untranslated="onlyMissing"
+        show-filters
+        :total-count="filteredRows.length"
+      >
+        <template #toolbar>
+          <FormCheckboxes
+            id="export-languages"
+            v-model="selectedLanguages"
+            :label="$t('translationsCsvLanguages', 'Languages')"
+            :options="languageOptions"
+            inline
+            @update:model-value="loadExportData"
+          />
+        </template>
+        <template #header>
+          <th>Key</th>
+          <th>{{ sourceLangName }}</th>
+          <th v-for="lang in activeLanguages" :key="lang.id">
+            {{ lang.name }}
+          </th>
+        </template>
+        <template #body>
+          <tr v-for="row in filteredRows" :key="row.key">
+            <td class="_bk_text-mono-400" v-text="row.key" />
+            <td v-text="row.source" />
+            <td
+              v-for="lang in activeLanguages"
+              :key="lang.id"
+              :class="{
+  'bk-is-empty': !row.translations[lang.id]
+}"
+              v-text="row.translations[lang.id] || '\u2014'"
+            />
+          </tr>
+        </template>
+      </SelectionTable>
+      <div class="_bk_flex _bk_gap-10 _bk_flex-wrap _bk_pt-20">
+        <button class="bk-button" @click="downloadCsv">
+          <div
+            class="_bk_uppercase _bk_font-bold _bk_border-2 _bk_leading-none _bk_rounded-md _bk_px-3 _bk_py-2 _bk_-ml-5"
+          >
+            csv
+          </div>
+          <span>{{ $t("download", "Download") }}</span>
+        </button>
+        <button
+          v-for="lang in activeLanguages"
+          :key="lang.id"
+          class="bk-button"
+          @click="downloadPo(lang.id)"
+        >
+          <div
+            class="_bk_uppercase _bk_font-bold _bk_border-2 _bk_leading-none _bk_rounded-md _bk_px-3 _bk_py-2 _bk_-ml-5"
+          >
+            po
+          </div>
+          <span>{{
+            $t("downloadWithLabel", "Download @label").replace(
+  "@label",
+  lang.name
+)
+          }}</span>
+        </button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, onMounted } from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+import { Loading, FormCheckboxes } from "#blokkli/editor/components";
+import { buildMultiLangCsv } from "../csv";
+import { buildPo } from "../po";
+import SelectionTable from "../../SelectionTable/index.vue";
+const { adapter, $t, state, blocks, context, element, ui, directive } = useBlokkli();
+const isLoading = ref(false);
+const onlyOutdated = ref(false);
+const onlyMissing = ref(false);
+const exportRows = ref([]);
+const selectedLanguages = ref([]);
+const availableLanguages = computed(() => {
+  const source = state.translation.value.sourceLanguage;
+  return state.translation.value.availableLanguages?.filter(
+    (l) => l.id !== source
+  ) ?? [];
+});
+const languageOptions = computed(
+  () => availableLanguages.value.map((l) => ({ value: l.id, label: l.name }))
+);
+const activeLanguages = computed(
+  () => availableLanguages.value.filter(
+    (l) => selectedLanguages.value.includes(l.id)
+  )
+);
+const filteredRows = computed(() => {
+  let rows = exportRows.value;
+  if (onlyOutdated.value) {
+    const activeLangIds = activeLanguages.value.map((l) => l.id);
+    const outdatedUuids = new Set(
+      blocks.getAllBlocks().filter(
+        (b) => b.outdatedTranslations.some((lang) => activeLangIds.includes(lang))
+      ).map((b) => b.uuid)
+    );
+    rows = rows.filter((row) => {
+      if (row.entityType !== itemEntityType) return true;
+      const uuid = row.key.substring(0, row.key.indexOf(":"));
+      return outdatedUuids.has(uuid);
+    });
+  }
+  if (onlyMissing.value) {
+    const activeLangIds = activeLanguages.value.map((l) => l.id);
+    rows = rows.filter(
+      (row) => activeLangIds.some((lang) => {
+        const val = row.translations[lang];
+        return !val || val === row.source;
+      })
+    );
+  }
+  return rows;
+});
+const sourceLangName = computed(() => {
+  const id = state.translation.value.sourceLanguage;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+function slugify(text) {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function buildTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  return [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, "0"),
+    String(now.getDate()).padStart(2, "0")
+  ].join("-") + "--" + [
+    String(now.getHours()).padStart(2, "0"),
+    String(now.getMinutes()).padStart(2, "0")
+  ].join("-");
+}
+function buildFilename(ext, langcode) {
+  const langPart = langcode ?? activeLanguages.value.map((l) => l.id).join("-");
+  const pageSlug = slugify(state.entity.value.label || "page");
+  return `${pageSlug}--${langPart}-${buildTimestamp()}.${ext}`;
+}
+function triggerDownload(content, filename, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function downloadCsv() {
+  const langIds = activeLanguages.value.map((l) => l.id);
+  const content = buildMultiLangCsv(filteredRows.value, langIds);
+  triggerDownload(content, buildFilename("csv"), "text/csv;charset=utf-8");
+}
+function downloadPo(langcode) {
+  const rows = filteredRows.value.map((row) => ({
+    key: row.key,
+    source: row.source,
+    translation: row.translations[langcode] ?? ""
+  }));
+  const content = buildPo(rows, langcode);
+  triggerDownload(
+    content,
+    buildFilename("po", langcode),
+    "text/x-gettext;charset=utf-8"
+  );
+}
+async function loadExportData() {
+  const sourceLanguage = state.translation.value.sourceLanguage;
+  if (!sourceLanguage) {
+    return;
+  }
+  const langIds = selectedLanguages.value.filter(
+    (id) => availableLanguages.value.some((l) => l.id === id)
+  );
+  if (!langIds.length) {
+    exportRows.value = [];
+    return;
+  }
+  isLoading.value = true;
+  try {
+    const sourceValues = await adapter.loadTextFieldValuesForLanguage(sourceLanguage);
+    const translationMaps = /* @__PURE__ */ new Map();
+    for (const langId of langIds) {
+      const values = await adapter.loadTextFieldValuesForLanguage(langId);
+      const map = /* @__PURE__ */ new Map();
+      for (const v of values) {
+        map.set(`${v.uuid}:${v.fieldName}`, v.value);
+      }
+      translationMaps.set(langId, map);
+    }
+    const hostFields = sourceValues.filter(
+      (sv) => sv.entityType !== itemEntityType
+    );
+    const blockFields = sourceValues.filter(
+      (sv) => sv.entityType === itemEntityType
+    );
+    const uuidOrder = element.queryAll(
+      ui.providerElement,
+      ".bk-field-list-item",
+      "getExportOrder",
+      (el) => el.dataset.bkUuid
+    );
+    const uuidIndexMap = /* @__PURE__ */ new Map();
+    for (let i = 0; i < uuidOrder.length; i++) {
+      const uuid = uuidOrder[i];
+      if (uuid && !uuidIndexMap.has(uuid)) {
+        uuidIndexMap.set(uuid, i);
+      }
+    }
+    const grouped = /* @__PURE__ */ new Map();
+    for (const sv of blockFields) {
+      let group = grouped.get(sv.uuid);
+      if (!group) {
+        group = [];
+        grouped.set(sv.uuid, group);
+      }
+      group.push(sv);
+    }
+    for (const [uuid, fields] of grouped) {
+      if (fields.length <= 1) continue;
+      const block = blocks.getBlock(uuid);
+      if (!block) continue;
+      const host = { uuid, type: itemEntityType, bundle: block.bundle };
+      fields.sort((a, b) => {
+        const elA = directive.findEditableElement(a.fieldName, host);
+        const elB = directive.findEditableElement(b.fieldName, host);
+        if (!elA || !elB) return 0;
+        const pos = elA.compareDocumentPosition(elB);
+        if (pos & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (pos & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+      });
+    }
+    const sortedBlockFields = [...grouped.entries()].sort((a, b) => {
+      const idxA = uuidIndexMap.get(a[0]) ?? Infinity;
+      const idxB = uuidIndexMap.get(b[0]) ?? Infinity;
+      return idxA - idxB;
+    }).flatMap(([, fields]) => fields);
+    const sortedValues = [...hostFields, ...sortedBlockFields];
+    exportRows.value = sortedValues.map((sv) => {
+      const key = `${sv.uuid}:${sv.fieldName}`;
+      const translations = {};
+      for (const langId of langIds) {
+        translations[langId] = translationMaps.get(langId)?.get(key) ?? "";
+      }
+      return { key, source: sv.value, entityType: sv.entityType, translations };
+    });
+  } finally {
+    isLoading.value = false;
+  }
+}
+onMounted(() => {
+  const currentLang = context.value.language;
+  if (availableLanguages.value.some((l) => l.id === currentLang)) {
+    selectedLanguages.value = [currentLang];
+  }
+  loadExportData();
+});
+</script>

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

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

package/dist/runtime/editor/features/translations/CsvDialog/Import/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/Import/index.vue

@@ -0,0 +1,382 @@
+<template>
+  <FileDropHandler
+    icon="bk_mdi_translate"
+    :label="$t('translationsDropToImport', 'Drop CSV or PO file to import')"
+    :accept="acceptTranslationFile"
+    class="_bk_flex _bk_flex-col _bk_h-full"
+    @drop="addFiles"
+  >
+    <div v-if="files.length" class="_bk_flex _bk_flex-wrap _bk_items-center _bk_gap-8 _bk_pb-20">
+      <div
+        v-for="(file, index) in files"
+        :key="index"
+        class="_bk_flex _bk_items-center _bk_gap-5 _bk_bg-mono-100 _bk_rounded-full _bk_pl-10 _bk_pr-5 _bk_py-3 _bk_text-sm _bk_text-mono-800"
+      >
+        <span>{{ file.name }}</span>
+        <button
+          class="_bk_rounded-full _bk_p-2 _bk_text-mono-400 _bk_hover:text-mono-900 _bk_hover:bg-mono-200"
+          @click="removeFile(file)"
+        >
+          <Icon name="bk_mdi_close" class="_bk_size-15" />
+        </button>
+      </div>
+      <button class="bk-button bk-is-small" @click.prevent="triggerFileDialog">
+        {{ $t("translationsAddFiles", "Add files...") }}
+      </button>
+    </div>
+    <div v-else class="_bk_mx-auto _bk_py-20">
+      <button
+        type="button"
+        class="bk-button"
+        @click.prevent="triggerFileDialog"
+      >
+        {{ $t("translationsSelectImportFile", "Select CSV or PO file") }}
+      </button>
+    </div>
+    <template v-if="files.length">
+      <div
+        v-if="changes && !changes.length"
+        class="_bk_py-20 _bk_text-center _bk_text-mono-500"
+      >
+        {{ $t("translationsCsvNoChanges", "No changes found") }}
+      </div>
+      <template v-else-if="changes && changes.length">
+        <SelectionTable
+          show-selection
+          :selected-count="selectedCount"
+          :total-count="changes.length"
+          :label="$t('translationsCsvChangesLabel', 'fields will be updated')"
+          @toggle-all="toggleAll"
+        >
+          <template #header>
+            <th>{{ sourceLangName }}</th>
+            <th v-if="!isMultiLang">
+              {{ $t("translationsCsvDiff", "Changes") }}
+            </th>
+            <th v-for="lang in languages" v-else :key="lang">
+              {{ langName(lang) }}
+            </th>
+          </template>
+          <template #body>
+            <tr v-for="row in rows" :key="row.key">
+              <td>
+                <div class="bk-checkbox">
+                  <input
+                    type="checkbox"
+                    :checked="isRowSelected(row)"
+                    @change="toggleRow(row)"
+                  />
+                  <span class="_bk_!mt-0 _bk_before:!mt-0" />
+                </div>
+              </td>
+              <td v-text="row.source" />
+              <template v-if="!isMultiLang">
+                <td>
+                  <DiffValue
+                    :before="singleLangChange(row).current"
+                    :after="singleLangChange(row).imported"
+                    :after-only="
+  !singleLangChange(row).current || singleLangChange(row).current === row.source
+"
+                  />
+                </td>
+              </template>
+              <template v-else>
+                <td v-for="lang in languages" :key="lang">
+                  <div v-if="row.changes[lang]" class="_bk_flex _bk_items-start _bk_gap-8">
+                    <div class="bk-checkbox _bk_shrink-0">
+                      <input
+                        v-model="selected[row.changes[lang].id]"
+                        type="checkbox"
+                      />
+                      <span class="_bk_!mt-0 _bk_before:!mt-0" />
+                    </div>
+                    <DiffValue
+                      :before="row.changes[lang].current"
+                      :after="row.changes[lang].imported"
+                      :after-only="
+  !row.changes[lang].current || row.changes[lang].current === row.source
+"
+                    />
+                  </div>
+                  <span v-else class="bk-is-empty">&mdash;</span>
+                </td>
+              </template>
+            </tr>
+          </template>
+        </SelectionTable>
+        <div class="_bk_flex _bk_items-center _bk_gap-10 _bk_mt-auto _bk_pt-20">
+          <button
+            class="bk-button bk-is-primary"
+            :disabled="!selectedCount"
+            @click="applyImport"
+          >
+            {{
+              $t("translationsCsvApply", "Import @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>
+    </template>
+    <input
+      ref="fileInputEl"
+      type="file"
+      accept=".csv,.po,text/csv"
+      multiple
+      class="_bk_hidden"
+      @change="onFileSelected"
+    />
+  </FileDropHandler>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, useTemplateRef, onMounted } from "#imports";
+import {
+  DiffValue,
+  FileDropHandler,
+  FormToggle,
+  Icon
+} from "#blokkli/editor/components";
+import { parseCsv } from "../csv";
+import { parsePo } from "../po";
+import SelectionTable from "../../SelectionTable/index.vue";
+const props = defineProps({
+  initialFiles: { type: [Array, null], required: false }
+});
+const emit = defineEmits(["close"]);
+const { adapter, $t, state, context } = useBlokkli();
+const files = ref([]);
+const changes = ref(null);
+const languages = ref([]);
+const isMultiLang = computed(() => languages.value.length > 1);
+const selected = ref({});
+const fileInputEl = useTemplateRef("fileInputEl");
+const markUpToDate = ref(false);
+const rows = computed(() => {
+  if (!changes.value) return [];
+  const map = /* @__PURE__ */ new Map();
+  for (const change of changes.value) {
+    let row = map.get(change.key);
+    if (!row) {
+      row = { key: change.key, source: change.source, changes: {} };
+      map.set(change.key, row);
+    }
+    row.changes[change.langcode] = change;
+  }
+  return [...map.values()];
+});
+const sourceLangName = computed(() => {
+  const id = state.translation.value.sourceLanguage;
+  return state.translation.value.availableLanguages?.find((l) => l.id === id)?.name ?? id;
+});
+function langName(langcode) {
+  return state.translation.value.availableLanguages?.find((l) => l.id === langcode)?.name ?? langcode;
+}
+const selectedCount = computed(
+  () => changes.value?.filter((c) => selected.value[c.id]).length ?? 0
+);
+function isRowSelected(row) {
+  const rowChanges = Object.values(row.changes);
+  return rowChanges.length > 0 && rowChanges.every((c) => selected.value[c.id]);
+}
+function toggleRow(row) {
+  const newValue = !isRowSelected(row);
+  for (const change of Object.values(row.changes)) {
+    selected.value[change.id] = newValue;
+  }
+}
+function singleLangChange(row) {
+  return Object.values(row.changes)[0];
+}
+function toggleAll() {
+  if (!changes.value) return;
+  const allSelected = changes.value.length > 0 && selectedCount.value === changes.value.length;
+  const newValue = !allSelected;
+  for (const change of changes.value) {
+    selected.value[change.id] = newValue;
+  }
+}
+async function loadCurrentValues(langcode) {
+  const map = /* @__PURE__ */ new Map();
+  const values = await adapter.loadTextFieldValuesForLanguage(langcode);
+  for (const v of values) {
+    map.set(`${v.uuid}:${v.fieldName}`, v.value);
+  }
+  return map;
+}
+async function addFiles(newFiles) {
+  const filtered = newFiles.filter(
+    (f) => f.name.endsWith(".csv") || f.name.endsWith(".po")
+  );
+  if (!filtered.length) return;
+  files.value = [...files.value, ...filtered];
+  await reprocess();
+}
+async function removeFile(file) {
+  files.value = files.value.filter((f) => f !== file);
+  selected.value = {};
+  if (!files.value.length) {
+    changes.value = null;
+    languages.value = [];
+    return;
+  }
+  await reprocess();
+}
+async function reprocess() {
+  selected.value = {};
+  await processFiles(files.value);
+}
+async function processFiles(allFiles) {
+  const poFiles = allFiles.filter((f) => f.name.endsWith(".po"));
+  const csvFiles = allFiles.filter((f) => f.name.endsWith(".csv"));
+  if (csvFiles.length) {
+    await processCsvFile(csvFiles[0]);
+  } else if (poFiles.length) {
+    await processPoFiles(poFiles);
+  }
+}
+async function processPoFiles(files2) {
+  const rowsByLang = /* @__PURE__ */ new Map();
+  const langs = [];
+  for (const file of files2) {
+    const text = await file.text();
+    const parsed = parsePo(text);
+    const lang = parsed.language || context.value.language;
+    if (!rowsByLang.has(lang)) {
+      langs.push(lang);
+      rowsByLang.set(lang, /* @__PURE__ */ new Map());
+    }
+    const langRows = rowsByLang.get(lang);
+    for (const row of parsed.rows) {
+      langRows.set(row.key, row);
+    }
+  }
+  const newChanges = [];
+  for (const lang of langs) {
+    const currentMap = await loadCurrentValues(lang);
+    for (const row of rowsByLang.get(lang).values()) {
+      const current = currentMap.get(row.key) ?? "";
+      if (row.translation !== current && row.translation !== "") {
+        const change = {
+          id: `${lang}:${row.key}`,
+          key: row.key,
+          langcode: lang,
+          source: row.source,
+          current,
+          imported: row.translation
+        };
+        newChanges.push(change);
+        selected.value[change.id] = true;
+      }
+    }
+  }
+  languages.value = langs;
+  changes.value = newChanges;
+}
+async function processCsvFile(file) {
+  const text = await file.text();
+  const parsed = parseCsv(text);
+  if (parsed.type === "single") {
+    const lang = context.value.language;
+    const currentMap = await loadCurrentValues(lang);
+    const newChanges = [];
+    for (const row of parsed.rows) {
+      const current = currentMap.get(row.key) ?? "";
+      if (row.translation !== current && row.translation !== "") {
+        const change = {
+          id: `${lang}:${row.key}`,
+          key: row.key,
+          langcode: lang,
+          source: row.source,
+          current,
+          imported: row.translation
+        };
+        newChanges.push(change);
+        selected.value[change.id] = true;
+      }
+    }
+    languages.value = [lang];
+    changes.value = newChanges;
+  } else {
+    const currentMaps = /* @__PURE__ */ new Map();
+    for (const lang of parsed.languages) {
+      currentMaps.set(lang, await loadCurrentValues(lang));
+    }
+    const newChanges = [];
+    for (const row of parsed.rows) {
+      for (const lang of parsed.languages) {
+        const translation = row.translations[lang] ?? "";
+        const current = currentMaps.get(lang)?.get(row.key) ?? "";
+        if (translation !== current && translation !== "") {
+          const change = {
+            id: `${lang}:${row.key}`,
+            key: row.key,
+            langcode: lang,
+            source: row.source,
+            current,
+            imported: translation
+          };
+          newChanges.push(change);
+          selected.value[change.id] = true;
+        }
+      }
+    }
+    languages.value = parsed.languages;
+    changes.value = newChanges;
+  }
+}
+async function onFileSelected(e) {
+  const fileList = e.target.files;
+  if (!fileList?.length) return;
+  await addFiles([...fileList]);
+  if (fileInputEl.value) {
+    fileInputEl.value.value = "";
+  }
+}
+async function applyImport() {
+  if (!changes.value) return;
+  const selectedChanges = changes.value.filter((c) => selected.value[c.id]);
+  if (!selectedChanges.length) return;
+  const items = selectedChanges.map((change) => {
+    const separatorIndex = change.key.indexOf(":");
+    return {
+      langcode: change.langcode,
+      uuid: change.key.substring(0, separatorIndex),
+      fieldName: change.key.substring(separatorIndex + 1),
+      fieldValue: change.imported
+    };
+  });
+  await state.mutateWithLoadingState(
+    () => adapter.importTranslationsBatched({
+      items,
+      markUpToDate: markUpToDate.value
+    })
+  );
+  emit("close");
+}
+function acceptTranslationFile(item) {
+  if (item.kind !== "file") return false;
+  if (item.type.startsWith("text/") || !item.type) return true;
+  return false;
+}
+function triggerFileDialog() {
+  fileInputEl.value?.click();
+}
+onMounted(() => {
+  if (props.initialFiles?.length) {
+    addFiles(props.initialFiles);
+  } else {
+    triggerFileDialog();
+  }
+});
+</script>

package/dist/runtime/editor/features/translations/CsvDialog/Import/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;