@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

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

@@ -1,234 +0,0 @@
-<template>
-  <Teleport :to="ui.mainLayoutElement.value">
-    <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 { BlokkliTransition } from "#blokkli/components";
-import { filterTransforms } from "#blokkli/helpers/transform";
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
-import TransformDialog from "./Dialog/index.vue";
-const { adapter } = defineBlokkliFeature({
-  id: "transform",
-  icon: "script",
-  label: "Transform",
-  requiredAdapterMethods: ["getTransformPlugins", "applyTransformPlugin"],
-  description: "Provides integration for block transform plugins.",
-  screenshot: "feature-transform.jpg"
-});
-const { types, selection, state, $t, ui } = useBlokkli();
-const openPlugin = ref(null);
-const selectedUuids = ref([]);
-const {
-  data: plugins,
-  execute,
-  status
-} = await useLazyAsyncData(
-  () => {
-    return adapter.getTransformPlugins();
-  },
-  {
-    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();
-  }
-});
-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,
-      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",
-      'The action "@name" could not be executed.'
-    ).replace("@name", plugin.label)
-  );
-  ui.setTransform();
-}
-const possibleTransforms = computed(
-  () => filterTransforms(
-    plugins.value || [],
-    selection.uuids.value,
-    selection.bundles.value,
-    types.allowedTypesInList.value
-  )
-);
-defineCommands(
-  () => possibleTransforms.value.map((transform) => ({
-    id: "transform:" + transform.id,
-    label: getPluginLabel(transform),
-    group: "selection",
-    icon: "script",
-    callback: () => {
-      onSelectBlockTransformPlugin(transform, selection.uuids.value);
-    }
-  }))
-);
-defineItemDropdownAction(() => {
-  if (possibleTransforms.value.length) {
-    return possibleTransforms.value.map((transform) => ({
-      id: "transform-block-" + transform.id,
-      label: transform.label,
-      icon: "script",
-      group: "transform",
-      weight: 100,
-      callback: () => {
-        onSelectBlockTransformPlugin(transform, selection.uuids.value);
-      }
-    }));
-  }
-});
-defineItemDropdownAction(() => {
-  if (selection.hasHostSelected.value && hostPlugins.value && hostPlugins.value.length) {
-    return hostPlugins.value.map((plugin) => ({
-      id: "transform-host-" + plugin.id,
-      label: plugin.label,
-      icon: "script",
-      group: "transform",
-      weight: 100,
-      callback: () => {
-        onSelectHostTransformPlugin(plugin);
-      }
-    }));
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "Transform"
-};
-</script>

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

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

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

@@ -1,48 +0,0 @@
-<template>
-  <Banner
-    id="translate"
-    icon="translate"
-    :text
-    :button="$t('translationsBannerButton', 'Edit source language instead')"
-    scheme="yellow"
-    @click="onClick"
-  />
-</template>
-
-<script setup>
-import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-import { Banner } from "#blokkli/components";
-const props = defineProps({
-  activeLanguage: { type: Object, required: true }
-});
-const { $t, adapter, state, ui } = useBlokkli();
-const onClick = () => {
-  const sourceLanguage = state.translation.value.sourceLanguage;
-  if (!sourceLanguage) {
-    throw new Error(
-      'Missing property "sourceLanguage" in TranslationState object.'
-    );
-  }
-  const sourceTranslation = state.translation.value.translations?.find(
-    (v) => v.id === sourceLanguage
-  );
-  if (!sourceTranslation) {
-    throw new Error(
-      `Failed to find translation for language "${sourceLanguage}".`
-    );
-  }
-  adapter.changeLanguage(sourceTranslation);
-};
-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."
-  ).replace("@language", props.activeLanguage.name);
-});
-onMounted(() => {
-  ui.setSelectionColor("translating", "mono");
-});
-onBeforeUnmount(() => {
-  ui.removeSelectionColor("translating");
-});
-</script>

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

@@ -1,6 +0,0 @@
-import type { Language } from '#blokkli/types';
-type __VLS_Props = {
-    activeLanguage: Language;
-};
-declare const _default: 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>;
-export default _default;

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

@@ -1,212 +0,0 @@
-<template>
-  <Teleport to="#bk-toolbar-after-title">
-    <PluginTourItem
-      v-if="items.length"
-      id="translations"
-      :title="$t('translationsTourTitle', 'Translations')"
-      :text="
-  $t(
-    'translationsTourText',
-    'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.'
-  )
-"
-    >
-      <div class="bk-translations">
-        <button
-          v-if="isDropdown"
-          class="bk-toolbar-button"
-          :class="{ 'bk-is-active': isOpen }"
-          @click.stop.prevent="isOpen = !isOpen"
-        >
-          {{ activeLangcode }}
-        </button>
-        <div
-          v-if="isOpen || !isDropdown"
-          :class="
-  isDropdown ? 'bk-translations-dropdown' : 'bk-blokkli-item-options-radios bk-is-language'
-"
-        >
-          <label
-            v-for="item in items"
-            :key="item.id"
-            :class="{ 'bk-is-muted': !item.translation?.exists }"
-          >
-            <div>
-              <input
-                type="radio"
-                :checked="item.checked"
-                :value="item.id"
-                name="pb_language"
-                @click.stop.prevent="onClick(item, $event)"
-              />
-              <span>{{ item.code }}</span>
-              <div :class="{ 'bk-tooltip': !isDropdown }">{{ item.label }}</div>
-            </div>
-          </label>
-        </div>
-      </div>
-    </PluginTourItem>
-  </Teleport>
-
-  <Teleport to="#bk-banner-list">
-    <Banner v-if="isTranslating" :active-language />
-  </Teleport>
-
-  <PluginItemAction
-    v-if="isTranslating"
-    id="translate"
-    :disabled="!canTranslateBlock"
-    :title="$t('translationsItemAction', 'Translate')"
-    icon="translate"
-    :weight="-100"
-    @click="onTranslate"
-  />
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  useBlokkli,
-  defineBlokkliFeature,
-  onMounted
-} from "#imports";
-import { falsy } from "#blokkli/helpers";
-import { PluginItemAction, PluginTourItem } from "#blokkli/plugins";
-import Banner from "./Banner/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
-const { adapter } = defineBlokkliFeature({
-  id: "translations",
-  label: "Translations",
-  icon: "translate",
-  requiredAdapterMethods: ["changeLanguage"],
-  description: "Adds support for block translations."
-});
-const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
-const isTranslating = computed(() => state.editMode.value === "translating");
-const isOpen = ref(false);
-const isDropdown = computed(() => {
-  if (ui.isMobile.value) {
-    return true;
-  }
-  const allCodes = items.value.map((v) => v.code).join("");
-  return allCodes.length > 15;
-});
-const activeLangcode = computed(() => context.value.language);
-const activeLanguage = computed(() => {
-  return state.translation.value.availableLanguages?.find(
-    (v) => v.id === activeLangcode.value
-  ) || {
-    id: activeLangcode.value,
-    name: activeLangcode.value
-  };
-});
-const items = computed(() => {
-  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: (state.translation.value.translations || []).find(
-          (v) => v.id === language.id
-        )
-      };
-    }
-    return null;
-  }).filter(falsy);
-});
-const canTranslateBlock = computed(() => {
-  const block = selection.item.value;
-  if (!block) {
-    return false;
-  }
-  if (block.library?.libraryItemUuid) {
-    return false;
-  }
-  const definition = definitions.getBlockDefinition(
-    block.bundle,
-    block.fieldListType,
-    block.parentBlockBundle
-  );
-  if (definition?.editor?.disableEdit) {
-    return false;
-  }
-  const type = types.getBlockBundleDefinition(block.bundle);
-  if (!type) {
-    return false;
-  }
-  if (!type.isTranslatable) {
-    return false;
-  }
-  return true;
-});
-function onClick(item, event) {
-  if (item.translation?.exists) {
-    return adapter.changeLanguage(item.translation);
-  }
-  event.preventDefault();
-  if (item.translation) {
-    eventBus.emit("translateEntity", item.translation);
-  }
-}
-function onTranslate(items2) {
-  const item = items2[0];
-  if (item) {
-    eventBus.emit("item:edit", {
-      uuid: item.uuid,
-      bundle: item.bundle
-    });
-  }
-}
-onBlokkliEvent("item:doubleClick", function(block) {
-  if (isTranslating.value && canTranslateBlock.value) {
-    onTranslate([block]);
-  }
-});
-onBlokkliEvent("entity:translated", (langcode) => {
-  const targetTranslation = state.translation.value.translations?.find(
-    (v) => v.id === langcode
-  );
-  if (targetTranslation) {
-    adapter.changeLanguage(targetTranslation);
-  }
-});
-onMounted(() => {
-  const translationExists = !!state.translation.value.translations?.find(
-    (v) => v.id === context.value.language
-  );
-  if (!translationExists) {
-    const sourceTranslation = state.translation.value.translations?.find(
-      (v) => v.id === state.translation.value.sourceLanguage
-    );
-    if (sourceTranslation) {
-      return adapter.changeLanguage(sourceTranslation);
-    }
-  }
-});
-defineMenuButton(() => {
-  return {
-    id: "translations",
-    title: $t("translationsBatchTranslateMenuTitle", "Translate..."),
-    description: $t(
-      "translationsBatchTranslateMenuDescription",
-      "Translate all blocks"
-    ),
-    icon: "translate",
-    disabled: !isTranslating.value,
-    weight: 60,
-    callback: () => {
-      eventBus.emit("batchTranslate");
-    }
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "Translations"
-};
-</script>

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

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

package/dist/runtime/components/Edit/Features/Validations/Overlay/Item.vue

@@ -1,36 +0,0 @@
-<template>
-  <div :style="style">
-    <div v-html="messages.join(', ')" />
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, ref, computed } from "#imports";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { dom } = useBlokkli();
-const props = defineProps({
-  uuid: { type: String, required: true },
-  messages: { type: Array, required: true }
-});
-const rect = ref(null);
-const style = computed(() => {
-  if (!rect.value) {
-    return;
-  }
-  return {
-    transform: `translate(${rect.value.x}px, ${rect.value.y}px)`,
-    width: rect.value.width + "px",
-    height: rect.value.height + "px"
-  };
-});
-onBlokkliEvent("canvas:draw", () => {
-  const newRect = dom.getBlockRect(props.uuid);
-  if (!newRect) {
-    return;
-  }
-  if (newRect.width === rect.value?.width && newRect.height === rect.value.height && newRect.x === rect.value.x && newRect.y === rect.value.y) {
-    return;
-  }
-  rect.value = newRect;
-});
-</script>

package/dist/runtime/components/Edit/Features/Validations/Overlay/Item.vue.d.ts

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    uuid: string;
-    messages: string[];
-};
-declare const _default: 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>;
-export default _default;

package/dist/runtime/components/Edit/Features/Validations/Overlay/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <Teleport to=".bk-main-canvas">
-    <div class="bk bk-validations-overlay">
-      <OverlayItem v-for="item in items" :key="item.uuid" v-bind="item" />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { falsy } from "#blokkli/helpers";
-import { useBlokkli, computed } from "#imports";
-import OverlayItem from "./Item.vue";
-const props = defineProps({
-  validations: { type: Array, required: true }
-});
-const { runtimeConfig } = useBlokkli();
-const items = computed(
-  () => Object.entries(
-    props.validations.map((v) => {
-      if (v.entityType === runtimeConfig.itemEntityType && v.entityUuid) {
-        return {
-          uuid: v.entityUuid,
-          message: v.message
-        };
-      }
-      return null;
-    }).filter(falsy).reduce((acc, v) => {
-      if (!acc[v.uuid]) {
-        acc[v.uuid] = [v.message];
-      } else {
-        acc[v.uuid].push(v.message);
-      }
-      return acc;
-    }, {})
-  ).map((v) => {
-    return {
-      uuid: v[0],
-      messages: v[1]
-    };
-  })
-);
-</script>

package/dist/runtime/components/Edit/Features/Validations/Overlay/index.vue.d.ts

@@ -1,6 +0,0 @@
-import type { Validation } from '#blokkli/types';
-type __VLS_Props = {
-    validations: Validation[];
-};
-declare const _default: 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>;
-export default _default;

package/dist/runtime/components/Edit/Features/Validations/SidebarItem/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <button class="bk-validation-item" @click.prevent="onClick">
-    <div v-if="block" class="bk-validation-item-header">
-      <ItemIcon :bundle="block.bundle" />
-      <div>{{ itemBundle?.label }}</div>
-    </div>
-    <div v-html="message" />
-  </button>
-</template>
-
-<script setup>
-import { useBlokkli, computed } from "#imports";
-import { ItemIcon } from "#blokkli/components";
-const props = defineProps({
-  message: { type: String, required: true },
-  propertyPath: { type: String, required: false },
-  code: { type: String, required: false },
-  entityType: { type: String, required: false },
-  entityUuid: { type: String, required: false }
-});
-const { runtimeConfig, eventBus, types, blocks } = useBlokkli();
-const isBlock = computed(
-  () => props.entityType === runtimeConfig.itemEntityType
-);
-const block = computed(() => {
-  if (isBlock.value && props.entityUuid) {
-    return blocks.getBlock(props.entityUuid);
-  }
-  return null;
-});
-const itemBundle = computed(() => {
-  if (block.value?.bundle) {
-    return types.getBlockBundleDefinition(block.value.bundle);
-  }
-  return null;
-});
-function onClick() {
-  if (isBlock.value && props.entityUuid) {
-    eventBus.emit("scrollIntoView", { uuid: props.entityUuid, center: true });
-  }
-}
-</script>

package/dist/runtime/components/Edit/Features/Validations/SidebarItem/index.vue.d.ts

@@ -1,9 +0,0 @@
-type __VLS_Props = {
-    message: string;
-    propertyPath?: string;
-    code?: string;
-    entityType?: string;
-    entityUuid?: string;
-};
-declare const _default: 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>;
-export default _default;