@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/Transform/Dialog/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="bk bk-transform-overlay" @keydown.stop @keyup.stop>
+    <div ref="el" class="bk-transform-overlay-dialog" @wheel="onWheel">
+      <div class="bk-transform-overlay-dialog-inner">
+        <div class="bk-transform-overlay-dialog-inner-content">
+          <header>
+            <p>{{ title }}</p>
+            <button @click.prevent="$emit('cancel')">
+              <Icon name="close" />
+            </button>
+          </header>
+          <main>
+            <div class="bk-transform-overlay-dialog-grid">
+              <div class="bk-transform-overlay-dialog-top">
+                <p v-if="lead" class="bk-lead">{{ lead }}</p>
+                <ConfigForm ref="configForm" v-model="value" :config />
+              </div>
+              <DiffViewerState
+                v-if="stateAfter"
+                :state-before
+                :state-after
+                show-select
+                :selected="selection.uuids.value"
+                :include-uuids="uuids"
+                scheme="orange"
+                @toggle="onToggleSelected"
+              />
+            </div>
+            <Loading v-if="isLocked" white />
+          </main>
+          <footer>
+            <button
+              v-if="supportsPreview"
+              class="bk-button"
+              :disabled="disabled || !hasChanged && !hasSeedInput"
+              :class="{
+  'bk-is-loading': isPreviewing
+}"
+              @click.prevent="onClickPreview"
+            >
+              {{ $t("transformDialogButtonPreview", "Preview") }}
+            </button>
+            <button
+              class="bk-button bk-is-orange"
+              :disabled
+              @click.prevent="onClickSubmit"
+            >
+              {{ $t("transformDialogButtonApply", "Apply") }}
+            </button>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  ref,
+  watch,
+  computed,
+  useTemplateRef,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { ConfigForm, DiffViewerState, Icon, Loading } from "#blokkli/components";
+const props = defineProps({
+  plugin: { type: Object, required: true },
+  uuids: { type: Array, required: false }
+});
+const { adapter, state, ui, selection, $t, eventBus } = useBlokkli();
+function onToggleSelected(uuid) {
+  let newSelection = [...selection.uuids.value];
+  if (newSelection.includes(uuid)) {
+    newSelection = newSelection.filter((v) => v !== uuid);
+  } else {
+    newSelection.push(uuid);
+  }
+  eventBus.emit("select:force", newSelection);
+}
+const configForm = useTemplateRef("configForm");
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
+}
+function mapValues(values) {
+  return Object.entries(values).map(([name, value2]) => {
+    return {
+      name,
+      value: value2
+    };
+  });
+}
+const hasSeedInput = computed(
+  () => !!props.plugin.configInputs?.find((v) => v.type === "seed")
+);
+const isLocked = ref(false);
+const hasChanged = ref(false);
+const isPreviewing = ref(false);
+const title = computed(() => props.plugin.label);
+const lead = computed(() => props.plugin.description);
+const config = computed(() => props.plugin.configInputs ?? []);
+const isHostPlugin = computed(() => !("bundles" in props.plugin));
+const supportsPreview = computed(() => {
+  if (!props.plugin.preview) {
+    return false;
+  }
+  if (isHostPlugin.value) {
+    return !!adapter.previewHostTransformPlugin;
+  }
+  return !!adapter.previewTransformPlugin;
+});
+const stateBefore = clone(state.getMappedState());
+const stateAfter = ref(null);
+const emit = defineEmits(["cancel", "submit"]);
+const value = ref(
+  (props.plugin.configInputs ?? []).reduce(
+    (acc, plugin) => {
+      acc[plugin.name] = "";
+      return acc;
+    },
+    {}
+  )
+);
+const requiredItems = computed(
+  () => config.value.filter((v) => v.required).map((v) => v.name)
+);
+const canSubmit = computed(() => {
+  return requiredItems.value.every((name) => !!value.value[name]);
+});
+const disabled = computed(() => isLocked.value || !canSubmit.value);
+watch(
+  value,
+  () => {
+    hasChanged.value = true;
+  },
+  {
+    deep: true
+  }
+);
+function onWheel(e) {
+  if (e.metaKey || e.ctrlKey) {
+    return;
+  }
+  e.stopPropagation();
+}
+async function onClickPreview() {
+  if (isLocked.value) {
+    return;
+  }
+  if (configForm.value) {
+    configForm.value.updateSeed();
+  }
+  isLocked.value = true;
+  isPreviewing.value = true;
+  ui.setTransform(title.value);
+  if (supportsPreview.value && adapter.previewTransformPlugin && "bundles" in props.plugin && props.uuids) {
+    const config2 = mapValues(value.value);
+    try {
+      const result = await adapter.previewTransformPlugin({
+        pluginId: props.plugin.id,
+        uuids: props.uuids,
+        config: config2
+      });
+      stateAfter.value = clone(adapter.mapState(result.state));
+      state.setOverrideState(stateAfter.value);
+    } catch {
+    }
+  }
+  isLocked.value = false;
+  isPreviewing.value = false;
+  ui.setTransform();
+  hasChanged.value = false;
+}
+function onClickSubmit() {
+  if (isLocked.value) {
+    return;
+  }
+  isLocked.value = true;
+  emit("submit", mapValues(value.value));
+}
+onMounted(async () => {
+  ui.hasTransformOverlayOpen.value = true;
+  selection.lockSelection("transform-dialog");
+  if (hasSeedInput.value && supportsPreview.value) {
+    const hasOnlySeedInputs = props.plugin.configInputs?.every(
+      (v) => v.type === "seed"
+    );
+    if (hasOnlySeedInputs === true) {
+      await onClickPreview();
+    }
+  }
+});
+onBeforeUnmount(() => {
+  ui.hasTransformOverlayOpen.value = false;
+  selection.unlockSelection("transform-dialog");
+});
+</script>

package/dist/runtime/components/Edit/Features/Transform/Dialog/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { HostTransformPlugin, PluginConfigInputItem, TransformPlugin } from '#blokkli/types';
+type __VLS_Props = {
+    plugin: HostTransformPlugin | TransformPlugin;
+    uuids?: string[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (values: PluginConfigInputItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((values: PluginConfigInputItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Transform/index.vue

@@ -1,34 +1,52 @@
 <template>
   <PluginItemDropdown
     id="transform"
-    :title="$t('transformTo', 'Other actions')"
-    :enabled="!!(itemBundleIds.length && possibleTransforms.length)"
-  >
-    <button
-      v-for="transform in possibleTransforms"
-      :key="transform.id"
-      @click.prevent="onTransform(transform, selection.uuids.value)"
-    >
-      <div>
-        <div>{{ transform.label }}</div>
-      </div>
-    </button>
-  </PluginItemDropdown>
+    :title="$t('transformTo', 'Actions')"
+    :enabled="!!possibleTransforms.length"
+    :items="possibleTransforms"
+    icon="script"
+    weight="100"
+    @select="onSelectBlockTransformPlugin($event, selection.uuids.value)"
+  />
+
+  <PluginItemDropdown
+    v-if="hostPlugins.length"
+    id="transform-host"
+    :title="$t('transformTo', 'Actions')"
+    :enabled="selection.hasHostSelected.value"
+    :items="hostPlugins"
+    icon="script"
+    weight="100"
+    @select="onSelectHostTransformPlugin($event)"
+  />
+
+  <Teleport to="body">
+    <BlokkliTransition name="transform-overlay">
+      <TransformDialog
+        v-if="openPluginDefinition"
+        :plugin="openPluginDefinition"
+        :uuids="selectedUuids"
+        @cancel="cancelTransform"
+        @submit="onSubmitDialog"
+      />
+    </BlokkliTransition>
+  </Teleport>
 </template>
 
 <script setup>
 import {
   computed,
   watch,
+  ref,
   useBlokkli,
   defineBlokkliFeature,
   useLazyAsyncData
 } from "#imports";
 import { PluginItemDropdown } from "#blokkli/plugins";
-import { onlyUnique } from "#blokkli/helpers";
+import { BlokkliTransition } from "#blokkli/components";
 import { filterTransforms } from "#blokkli/helpers/transform";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
+import TransformDialog from "./Dialog/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "transform",
   icon: "script",
@@ -37,7 +55,9 @@ const { adapter } = defineBlokkliFeature({
   description: "Provides integration for block transform plugins.",
   screenshot: "feature-transform.jpg"
 });
-const { types, selection, state, $t, dom, ui } = useBlokkli();
+const { types, selection, state, $t, ui } = useBlokkli();
+const openPlugin = ref(null);
+const selectedUuids = ref([]);
 const {
   data: plugins,
   execute,
@@ -46,19 +66,131 @@ const {
   () => {
     return adapter.getTransformPlugins();
   },
-  { immediate: false, default: () => [] }
+  {
+    immediate: false,
+    default: () => [],
+    transform: function(plugins2) {
+      return plugins2.map((plugin) => {
+        return {
+          ...plugin,
+          label: getPluginLabel(plugin)
+        };
+      });
+    }
+  }
 );
+const {
+  data: hostPlugins,
+  status: statusHostPlugins,
+  execute: executeHostPlugins
+} = await useLazyAsyncData(
+  () => {
+    if (adapter.getHostTransformPlugins) {
+      return adapter.getHostTransformPlugins();
+    }
+    return Promise.resolve([]);
+  },
+  {
+    immediate: !openPlugin.value,
+    default: () => [],
+    transform: function(plugins2) {
+      return plugins2.map((plugin) => {
+        return {
+          ...plugin,
+          label: getPluginLabel(plugin)
+        };
+      });
+    }
+  }
+);
+const openPluginDefinition = computed(() => {
+  if (openPlugin.value) {
+    if (openPlugin.value.type === "block") {
+      return plugins.value.find((v) => v.id === openPlugin.value?.id) ?? null;
+    } else if (openPlugin.value.type === "host") {
+      return hostPlugins.value.find((v) => v.id === openPlugin.value?.id) ?? null;
+    }
+  }
+  return null;
+});
+function getPluginLabel(plugin) {
+  if (plugin.configInputs?.length) {
+    return plugin.label + "...";
+  }
+  return plugin.label;
+}
+function cancelTransform() {
+  openPlugin.value = null;
+  selectedUuids.value = [];
+  state.clearOverrideState();
+}
 watch(selection.uuids, async () => {
   if (status.value === "idle") {
     execute();
   }
 });
-async function onTransform(plugin, uuids) {
+watch(selection.hasHostSelected, () => {
+  if (statusHostPlugins.value === "idle") {
+    executeHostPlugins();
+  }
+});
+function onSelectBlockTransformPlugin(plugin, uuids) {
+  if (plugin.configInputs?.length) {
+    openPlugin.value = {
+      type: "block",
+      id: plugin.id
+    };
+    selectedUuids.value = [...selection.uuids.value];
+    return;
+  }
+  onTransformBlock(plugin, uuids, []);
+}
+function onSelectHostTransformPlugin(plugin) {
+  if (plugin.configInputs?.length) {
+    openPlugin.value = {
+      type: "host",
+      id: plugin.id
+    };
+    return;
+  }
+  onTransformHost(plugin, []);
+}
+async function onTransformBlock(plugin, uuids, values) {
   ui.setTransform(plugin.label);
+  openPlugin.value = null;
   await state.mutateWithLoadingState(
     () => adapter.applyTransformPlugin({
       uuids,
-      pluginId: plugin.id
+      pluginId: plugin.id,
+      config: values
+    }),
+    $t(
+      "failedToTransform",
+      'The action "@name" could not be executed.'
+    ).replace("@name", plugin.label)
+  );
+  ui.setTransform();
+}
+function onSubmitDialog(values) {
+  if (!openPluginDefinition.value) {
+    return;
+  }
+  if ("bundles" in openPluginDefinition.value) {
+    onTransformBlock(openPluginDefinition.value, selection.uuids.value, values);
+  } else {
+    onTransformHost(openPluginDefinition.value, values);
+  }
+}
+async function onTransformHost(plugin, values) {
+  if (!adapter.applyHostTransformPlugin) {
+    return;
+  }
+  ui.setTransform(plugin.label);
+  openPlugin.value = null;
+  await state.mutateWithLoadingState(
+    () => adapter.applyHostTransformPlugin({
+      pluginId: plugin.id,
+      config: values
     }),
     $t(
       "failedToTransform",
@@ -67,71 +199,25 @@ async function onTransform(plugin, uuids) {
   );
   ui.setTransform();
 }
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
 const possibleTransforms = computed(
   () => filterTransforms(
     plugins.value || [],
     selection.uuids.value,
-    itemBundleIds.value,
+    selection.bundles.value,
     types.allowedTypesInList.value
   )
 );
 defineCommands(
   () => possibleTransforms.value.map((transform) => ({
     id: "transform:" + transform.id,
-    label: transform.label,
+    label: getPluginLabel(transform),
     group: "selection",
     icon: "script",
-    callback: () => onTransform(transform, selection.uuids.value)
+    callback: () => {
+      onSelectBlockTransformPlugin(transform, selection.uuids.value);
+    }
   }))
 );
-const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
-  const notDraggedBlocks = allBlocks.filter(
-    (block) => !dragItems.find((dragItem) => dragItem.uuid === block.uuid)
-  );
-  const validPlugins = plugins2.filter((plugin) => {
-    const draggedBundles = dragItems.map((item) => item.itemBundle);
-    return draggedBundles.every((bundle) => plugin.bundles.includes(bundle)) && dragItems.length + 1 >= plugin.min && (plugin.max === -1 || dragItems.length + 1 <= plugin.max);
-  });
-  const possibleTransforms2 = [];
-  validPlugins.forEach((plugin) => {
-    notDraggedBlocks.forEach((block) => {
-      if (plugin.targetBundles.includes(block.itemBundle)) {
-        possibleTransforms2.push({
-          plugin,
-          block
-        });
-      }
-    });
-  });
-  return possibleTransforms2;
-};
-defineDropAreas((dragItems) => {
-  const existing = dragItems.filter(
-    (v) => v.itemType === "existing"
-  );
-  if (!existing.length) {
-    return;
-  }
-  const uuids = existing.map((v) => v.uuid);
-  return getPossibleDropTransforms(
-    plugins.value,
-    dom.getAllBlocks(),
-    existing
-  ).map((v) => {
-    return {
-      id: `transform:${v.plugin.id}:${v.block.uuid}`,
-      label: v.plugin.label,
-      element: v.block.element(),
-      onDrop: () => {
-        const transformUuids = [v.block.uuid, ...uuids];
-        return onTransform(v.plugin, transformUuids);
-      }
-    };
-  });
-});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Translations/Banner/index.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="bk bk-translations-banner">
-    <Icon name="translate" />
-    <p v-html="text" />
-    <button class="bk-translations-banner-close" @click="onClick">
-      {{ $t("translationsBannerButton", "Edit source language instead") }}
-      <Icon name="close" />
-    </button>
-  </div>
+  <Banner
+    id="translate"
+    icon="translate"
+    :text
+    :button="$t('translationsBannerButton', 'Edit source language instead')"
+    scheme="yellow"
+    @click="onClick"
+  />
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
 const props = defineProps({
   activeLanguage: { type: Object, required: true }
 });
-const { $t, adapter, state } = useBlokkli();
+const { $t, adapter, state, ui } = useBlokkli();
 const onClick = () => {
   const sourceLanguage = state.translation.value.sourceLanguage;
   if (!sourceLanguage) {
@@ -39,4 +39,10 @@ const text = computed(() => {
     "You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available."
   ).replace("@language", props.activeLanguage.name);
 });
+onMounted(() => {
+  ui.setSelectionColor("translating", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("translating");
+});
 </script>

package/dist/runtime/components/Edit/Features/Translations/index.vue

@@ -48,11 +48,8 @@
     </PluginTourItem>
   </Teleport>
 
-  <Teleport to="#bk-banner-container">
-    <Banner
-      v-if="state.editMode.value === 'translating'"
-      :active-language="activeLanguage"
-    />
+  <Teleport to="#bk-banner-list">
+    <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
   <PluginMenuButton
@@ -61,14 +58,14 @@
     :description="
   $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
 "
-    :disabled="editMode !== 'translating'"
+    :disabled="!isTranslating"
     :weight="60"
     icon="translate"
     @click="eventBus.emit('batchTranslate')"
   />
 
   <PluginItemAction
-    v-if="editMode === 'translating'"
+    v-if="isTranslating"
     id="translate"
     :disabled="!canTranslateBlock"
     :title="$t('translationsItemAction', 'Translate')"
@@ -102,7 +99,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Adds support for block translations."
 });
 const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
-const { translation, editMode } = state;
+const isTranslating = computed(() => state.editMode.value === "translating");
 const isOpen = ref(false);
 const isDropdown = computed(() => {
   if (ui.isMobile.value) {
@@ -113,7 +110,7 @@ const isDropdown = computed(() => {
 });
 const activeLangcode = computed(() => context.value.language);
 const activeLanguage = computed(() => {
-  return translation.value.availableLanguages?.find(
+  return state.translation.value.availableLanguages?.find(
     (v) => v.id === activeLangcode.value
   ) || {
     id: activeLangcode.value,
@@ -121,14 +118,14 @@ const activeLanguage = computed(() => {
   };
 });
 const items = computed(() => {
-  return (translation.value.availableLanguages || []).map((language) => {
+  return (state.translation.value.availableLanguages || []).map((language) => {
     if (language && language.id) {
       return {
         id: language.id,
         code: language.id.toUpperCase(),
         label: language.name,
         checked: context.value.language === language.id,
-        translation: (translation.value.translations || []).find(
+        translation: (state.translation.value.translations || []).find(
           (v) => v.id === language.id
         )
       };
@@ -137,22 +134,22 @@ const items = computed(() => {
   }).filter(falsy);
 });
 const canTranslateBlock = computed(() => {
-  if (selection.blocks.value.length !== 1) {
+  const block = selection.item.value;
+  if (!block) {
     return false;
   }
-  const block = selection.blocks.value[0];
-  if (block.libraryItemUuid) {
+  if (block.library?.libraryItemUuid) {
     return false;
   }
   const definition = definitions.getBlockDefinition(
-    block.itemBundle,
-    block.hostFieldListType,
+    block.bundle,
+    block.fieldListType,
     block.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
     return false;
   }
-  const type = types.getBlockBundleDefinition(block.itemBundle);
+  const type = types.getBlockBundleDefinition(block.bundle);
   if (!type) {
     return false;
   }
@@ -175,17 +172,17 @@ function onTranslate(items2) {
   if (item) {
     eventBus.emit("item:edit", {
       uuid: item.uuid,
-      bundle: item.itemBundle
+      bundle: item.bundle
     });
   }
 }
 onBlokkliEvent("item:doubleClick", function(block) {
-  if (editMode.value === "translating" && canTranslateBlock.value) {
+  if (isTranslating.value && canTranslateBlock.value) {
     onTranslate([block]);
   }
 });
 onBlokkliEvent("entity:translated", (langcode) => {
-  const targetTranslation = translation.value.translations?.find(
+  const targetTranslation = state.translation.value.translations?.find(
     (v) => v.id === langcode
   );
   if (targetTranslation) {
@@ -193,12 +190,12 @@ onBlokkliEvent("entity:translated", (langcode) => {
   }
 });
 onMounted(() => {
-  const translationExists = !!translation.value.translations?.find(
+  const translationExists = !!state.translation.value.translations?.find(
     (v) => v.id === context.value.language
   );
   if (!translationExists) {
-    const sourceTranslation = translation.value.translations?.find(
-      (v) => v.id === translation.value.sourceLanguage
+    const sourceTranslation = state.translation.value.translations?.find(
+      (v) => v.id === state.translation.value.sourceLanguage
     );
     if (sourceTranslation) {
       return adapter.changeLanguage(sourceTranslation);