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

package/dist/runtime/editor/features/tour/Overlay/index.vue

@@ -22,27 +22,37 @@
           </div>
         </div>
       </div>
-      <div class="bk-tour-buttons">
-        <button @click.stop.prevent="prev">
+      <div
+        class="_bk_border-t _bk_h-50 _bk_absolute _bk_bottom-0 _bk_left-0 _bk_w-full _bk_bg-white _bk_border-t-yellow-dark/20 _bk_flex _bk_justify-between _bk_items-center"
+      >
+        <button class="bk-tour-button _bk_group/tooltip" @click.stop.prevent="prev">
           <Icon name="bk_mdi_chevron_backward" />
           <span>{{ $t("tourPrev", "Previous") }}</span>
-          <div class="bk-tooltip">
-            <span>Arrow Right</span>
-            <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
-          </div>
+          <Tooltip
+            :label="$t('arrowRight', 'Arrow Right')"
+            placement="below-left"
+          >
+            <template #shortcut>
+              <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
+            </template>
+          </Tooltip>
         </button>
-        <div>
+        <div class="_bk_text-yellow-dark/80 _bk_text-sm">
           <span>{{ activeIndex + 1 }}</span
           >&nbsp;/
           <span>{{ items.length }}</span>
         </div>
-        <button @click.stop.prevent="next">
+        <button class="bk-tour-button _bk_group/tooltip" @click.stop.prevent="next">
           <span>{{ $t("tourNext", "Next") }}</span>
           <Icon name="bk_mdi_chevron_forward" />
-          <div class="bk-tooltip">
-            <span>Arrow Left</span>
-            <ShortcutIndicator label="Next Tour Item" key-code="ArrowRight" />
-          </div>
+          <Tooltip
+            :label="$t('arrowLeft', 'Arrow Left')"
+            placement="below-right"
+          >
+            <template #shortcut>
+              <ShortcutIndicator label="Next Tour Item" key-code="ArrowRight" />
+            </template>
+          </Tooltip>
         </button>
       </div>
     </div>
@@ -54,7 +64,7 @@
 import { useBlokkli, computed, ref, useTemplateRef } from "#imports";
 import { falsy } from "#blokkli/helpers";
 import { modulo } from "#blokkli/editor/helpers/math";
-import { Icon, ShortcutIndicator } from "#blokkli/editor/components";
+import { Icon, ShortcutIndicator, Tooltip } from "#blokkli/editor/components";
 import { onBlokkliEvent, useAnimationFrame } from "#blokkli/editor/composables";
 const emit = defineEmits(["close"]);
 const rectStyle = computed(() => {
@@ -216,3 +226,223 @@ useAnimationFrame(() => {
   tooltipHeight.value = contentEl.value.scrollHeight + 50;
 });
 </script>
+
+<style>
+.bk.bk-tour {
+
+    position: fixed;
+
+    top: 0px;
+
+    left: 0px;
+
+    z-index: calc(var(--bk-z-index-base) + 280000) /* "tour-item" */;
+
+    border-radius: 6px;
+
+    pointer-events: auto;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
+
+    --bk-tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+    --bk-tw-shadow-colored: 0 20px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
+
+    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+
+    transition-property: all;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transition-duration: 200ms;
+
+    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1)
+}
+
+  .bk.bk-tour button:focus {
+
+    border-width: 0;
+
+    outline-width: 0px;
+
+    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color);
+
+    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
+
+    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000)
+}
+
+.bk .bk-tour-title {
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: space-between;
+
+    border-bottom-width: 1px;
+
+    border-bottom-color: rgb(var(--bk-theme-yellow-dark) / 0.3);
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+
+    padding-left: 20px;
+
+    font-size: 18px;
+
+    line-height: 28px;
+
+    font-weight: 700
+}
+
+.bk .bk-tour-title button {
+
+    padding: 15px
+}
+
+.bk .bk-tour-title button:hover {
+
+    background-color: rgb(var(--bk-theme-yellow-dark) / 0.1)
+}
+
+.bk .bk-tour-title button svg {
+
+    fill: rgb(var(--bk-theme-yellow-dark) / 1)
+}
+
+.bk .bk-tour-title svg {
+
+    height: 20px;
+
+    width: 20px
+}
+
+.bk .bk-tour-content {
+
+    padding: 20px;
+
+    padding-top: 17px
+}
+
+.bk .bk-tour-content > div {
+
+    position: relative;
+
+    overflow: hidden;
+
+    transition-property: all;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transition-duration: 150ms;
+
+    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1)
+}
+
+.bk .bk-tour-content p:not(:last-child) {
+
+    margin-bottom: 18px
+}
+
+.bk .bk-tour-content-text {
+
+    position: absolute;
+
+    top: 0px;
+
+    left: 0px;
+
+    width: 100%
+}
+
+.bk .bk-tour-button {
+
+    position: relative;
+
+    display: flex;
+
+    align-items: center;
+
+    padding-top: 15px;
+
+    padding-bottom: 15px;
+
+    padding-left: 15px;
+
+    padding-right: 15px;
+
+    font-weight: 600;
+
+    line-height: 1;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-tour-button:hover {
+
+    background-color: rgb(var(--bk-theme-yellow-dark) / 0.05)
+}
+
+.bk .bk-tour-button .bk-icon {
+
+    height: 20px;
+
+    width: 20px
+}
+
+.bk .bk-tour-button .bk-icon svg {
+
+    fill: currentColor
+}
+
+.bk.bk-tour-overlay-element {
+
+    pointer-events: none;
+
+    position: fixed;
+
+    top: 0px;
+
+    left: 0px;
+
+    z-index: calc(var(--bk-z-index-base) + 270000) /* "tour-overlay" */;
+
+    height: 100%;
+
+    width: 100%;
+
+    border-width: 3px;
+
+    --bk-tw-border-opacity: 1;
+
+    border-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-border-opacity, 1));
+
+    transition-property: all;
+
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    transition-duration: 200ms;
+
+    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+
+    background-color: rgb(var(--bk-theme-yellow-normal) / 0.3);
+
+    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color);
+
+    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(1px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
+
+    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000);
+
+    --bk-tw-ring-color: rgb(var(--bk-theme-yellow-light) / 0.8)
+}
+</style>

package/dist/runtime/editor/features/transform/Dialog/index.vue

@@ -26,7 +26,7 @@
                 @toggle="onToggleSelected"
               />
             </div>
-            <Loading v-if="isLocked" white />
+            <Loading v-if="isLocked" theme="white" />
           </main>
           <footer>
             <button
@@ -224,3 +224,134 @@ onBeforeUnmount(() => {
   selection.unlockSelection("transform-dialog");
 });
 </script>
+
+<style>
+.bk.bk-transform-overlay {
+    pointer-events: auto;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: calc(var(--bk-z-index-base) + 310000) /* "transform-overlay" */;
+    width: 100%;
+    height: 100%;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog {
+    width: 600px;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+  }
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-orange-dark) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header p {
+    padding-left: 20px;
+    padding-right: 20px;
+    font-weight: 700;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: currentColor;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button:hover {
+    background-color: rgb(var(--bk-theme-orange-dark) / 0.2);
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button {
+    width: 50px;
+    height: 50px;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button svg {
+    width: 25px;
+    height: 25px;
+    fill: currentColor;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog main {
+    position: relative;
+    flex: 1 1 0%;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog main .bk-lead {
+    margin-bottom: 15px;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog footer {
+    display: flex;
+    justify-content: space-between;
+    border-top-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding: 20px;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog-inner {
+    height: 100%;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog-inner-content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    overflow: hidden;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+    --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
+    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog-grid {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog-grid .bk-diff-table td {
+    padding-left: 20px !important;
+}
+
+  .bk.bk-transform-overlay .bk-transform-overlay-dialog-top {
+    padding: 20px;
+}
+
+.bk-transform-overlay-enter-active,
+.bk-transform-overlay-leave-active {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+
+.bk-transform-overlay-enter-active .bk-transform-overlay-dialog-inner, .bk-transform-overlay-leave-active .bk-transform-overlay-dialog-inner {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+
+.bk-transform-overlay-enter-from .bk-transform-overlay-dialog-inner, .bk-transform-overlay-leave-to .bk-transform-overlay-dialog-inner {
+    --bk-tw-translate-x: 100%;
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+    opacity: 0;
+}
+</style>

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

@@ -1,7 +1,20 @@
 import type { Language } from '#blokkli/editor/types/state';
 type __VLS_Props = {
     activeLanguage: Language;
+    showCsv?: boolean;
+    showTranslate?: boolean;
+    dialogOpen?: 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>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "mark-all-up-to-date": (uuids: string[]) => void;
+    "open-csv": () => void;
+    "open-translate": () => void;
+    "import-file": (files: File[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMark-all-up-to-date"?: ((uuids: string[]) => any) | undefined;
+    "onOpen-csv"?: (() => any) | undefined;
+    "onOpen-translate"?: (() => any) | undefined;
+    "onImport-file"?: ((files: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,21 +1,134 @@
 <template>
-  <Banner
-    id="translate"
-    icon="bk_mdi_translate"
-    :text
-    :button="$t('translationsBannerButton', 'Edit source language instead')"
-    scheme="yellow"
-    @click="onClick"
-  />
+  <Banner id="translate" scheme="yellow">
+    <FileDropHandler
+      icon="bk_mdi_translate"
+      :label="$t('translationsDropToImport', 'Drop CSV or PO file to import')"
+      :accept="acceptTranslationFile"
+      @drop="onFileDrop"
+    >
+      <BannerInner
+        icon="bk_mdi_translate"
+        :text
+        :button="$t('translationsBannerButton', 'Edit source language instead')"
+        @click="onClick"
+      >
+        <template #before>
+          <TransitionHeight opacity :duration="300">
+            <div v-if="outdatedUuids.length" class="_bk_pb-10">
+              <div
+                class="_bk_pb-10 _bk_border-b _bk_border-b-scheme-dark/40 _bk_flex _bk_justify-between _bk_items-center"
+              >
+                <div class="_bk_text-base" v-html="outdatedLabel" />
+                <div class="_bk_flex _bk_gap-5 _bk_relative">
+                  <button
+                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    @click.prevent="$emit('mark-all-up-to-date', outdatedUuids)"
+                  >
+                    {{
+                      $t(
+  "translationsBannerMarkAllAsUpToDate",
+  "Mark all as up-to-date"
+)
+                    }}
+                  </button>
+                  <button
+                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    @click.prevent="eventBus.emit('select:prev', outdatedUuids)"
+                  >
+                    <Icon name="bk_mdi_arrow_left_alt" />
+                    {{ $t("translationsBannerPrev", "Previous block") }}
+                  </button>
+                  <button
+                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    @click.prevent="eventBus.emit('select:next', outdatedUuids)"
+                  >
+                    {{ $t("translationsBannerNext", "Next block") }}
+                    <Icon name="bk_mdi_arrow_right_alt" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </TransitionHeight>
+        </template>
+        <template v-if="showCsv || showTranslate" #before-button>
+          <div class="_bk_flex _bk_gap-10 _bk_relative">
+            <button
+              v-if="showTranslate"
+              class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+              @click.prevent="$emit('open-translate')"
+            >
+              <Icon name="bk_mdi_translate" />
+              {{ $t("translationsAutoTranslateButton", "Auto-translate...") }}
+              <Tooltip
+                :label="
+  $t(
+    'translationsAutoTranslateTooltip',
+    'Automatically translate all texts using a translation service'
+  )
+"
+                placement="above-left"
+              />
+            </button>
+            <button
+              v-if="showCsv"
+              class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+              @click.prevent="$emit('open-csv')"
+            >
+              <Icon name="bk_mdi_upload" />
+              {{ $t("translationsCsvMenuTitle", "Import/export...") }}
+              <Tooltip
+                :label="
+  $t(
+    'translationsCsvTooltip',
+    'Import or export translations as CSV or PO files'
+  )
+"
+                placement="above-left"
+              />
+            </button>
+          </div>
+        </template>
+      </BannerInner>
+    </FileDropHandler>
+  </Banner>
 </template>
 
 <script setup>
 import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-import { Banner } from "#blokkli/editor/components";
+import {
+  Banner,
+  BannerInner,
+  FileDropHandler,
+  Icon,
+  TransitionHeight,
+  Tooltip
+} from "#blokkli/editor/components";
 const props = defineProps({
-  activeLanguage: { type: Object, required: true }
+  activeLanguage: { type: Object, required: true },
+  showCsv: { type: Boolean, required: false },
+  showTranslate: { type: Boolean, required: false },
+  dialogOpen: { type: Boolean, required: false }
 });
-const { $t, adapter, state, ui } = useBlokkli();
+const { $t, adapter, state, ui, eventBus, blocks } = useBlokkli();
+const emit = defineEmits(["mark-all-up-to-date", "open-csv", "open-translate", "import-file"]);
+const outdatedUuids = computed(() => {
+  const lang = props.activeLanguage.id;
+  return blocks.getAllBlocks().filter((b) => b.outdatedTranslations.includes(lang)).map((b) => b.uuid);
+});
+function acceptTranslationFile(item) {
+  if (!props.showCsv || props.dialogOpen) return false;
+  if (item.kind !== "file") return false;
+  if (item.type.startsWith("text/") || !item.type) return true;
+  return false;
+}
+function onFileDrop(files) {
+  const matched = files.filter(
+    (f) => f.name.endsWith(".csv") || f.name.endsWith(".po")
+  );
+  if (matched.length) {
+    emit("import-file", matched);
+  }
+}
 const onClick = () => {
   const sourceLanguage = state.translation.value.sourceLanguage;
   if (!sourceLanguage) {
@@ -36,9 +149,23 @@ const onClick = () => {
 const text = computed(() => {
   return $t(
     "translationsBannerText",
-    "You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available."
+    "You are currently editing the <strong>@language</strong> translation."
   ).replace("@language", props.activeLanguage.name);
 });
+const outdatedLabel = computed(() => {
+  const count = outdatedUuids.value.length;
+  if (!count) {
+    return null;
+  }
+  const key = count === 1 ? $t(
+    "translationsBannerOutdatedSingular",
+    "@count block has an <strong>outdated translation</strong>."
+  ) : $t(
+    "translationsBannerOutdatedCount",
+    "@count blocks have <strong>outdated translations</strong>."
+  );
+  return key.replace("@count", String(count));
+});
 onMounted(() => {
   ui.setSelectionColor("translating", "mono");
 });

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

@@ -1,7 +1,20 @@
 import type { Language } from '#blokkli/editor/types/state';
 type __VLS_Props = {
     activeLanguage: Language;
+    showCsv?: boolean;
+    showTranslate?: boolean;
+    dialogOpen?: 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>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "mark-all-up-to-date": (uuids: string[]) => void;
+    "open-csv": () => void;
+    "open-translate": () => void;
+    "import-file": (files: File[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMark-all-up-to-date"?: ((uuids: string[]) => any) | undefined;
+    "onOpen-csv"?: (() => any) | undefined;
+    "onOpen-translate"?: (() => any) | undefined;
+    "onImport-file"?: ((files: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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