@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

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

@@ -20,26 +20,7 @@
     @click="showReusableDialog = true"
   />
 
-  <PluginAddAction
-    v-if="
-  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-"
-    type="library"
-    :title="$t('libraryAddFromLibrary', 'Add from library')"
-    :description="
-  $t(
-    'libraryAddDescription',
-    'Add a reusable block from the block library.'
-  )
-"
-    icon="reusable"
-    color="lime"
-    :item-bundle="BUNDLE_FROM_LIBRARY"
-    :disabled="!fromLibraryAllowedInList"
-    @placed="placedAction = $event"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <ReusableDialog
         v-if="showReusableDialog && selection.item.value"
@@ -51,7 +32,7 @@
     </BlokkliTransition>
   </Teleport>
 
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
@@ -71,12 +52,14 @@
 
 <script setup>
 import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
+import { PluginItemAction } from "#blokkli/plugins";
 import ReusableDialog from "./ReusableDialog/index.vue";
 import LibraryDialog from "./LibraryDialog/index.vue";
 import EditReusable from "./EditReusable/index.vue";
 import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { adapter } = defineBlokkliFeature({
   id: "library",
@@ -86,8 +69,8 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
   dependencies: ["add-list"]
 });
-const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
-const showReusableDialog = ref(false);
+const { selection, state, types, $t, eventBus, definitions, ui } = useBlokkli();
+const showReusableDialog = useDialog("library-reusable", "center");
 async function selectNewlyAdded(cb) {
   const uuidsBefore = state.getAllUuids();
   await cb();
@@ -186,6 +169,25 @@ function onSubmitLibraryItem() {
   eventBus.emit("reloadState");
   cancelLibraryItemEdit();
 }
+defineAddAction(() => {
+  if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value) {
+    return;
+  }
+  return {
+    id: "library",
+    title: $t("libraryAddFromLibrary", "Add from library"),
+    description: $t(
+      "libraryAddDescription",
+      "Add a reusable block from the block library."
+    ),
+    icon: "reusable",
+    color: "lime",
+    itemBundle: BUNDLE_FROM_LIBRARY,
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/MultiSelect/Renderer/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <Teleport to="body">
-    <div />
-  </Teleport>
+  <div />
 </template>
 
 <script setup>

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

@@ -15,10 +15,11 @@
     @click="qrCodeVisible = true"
   />
 
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="qrCodeVisible"
+        id="preview-grant"
         :title="$t('previewDialogTitle', 'Preview with smartphone')"
         :lead="
   $t(

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="publish"
     :title="$t('publishDialogTitle', 'Publish changes')"
     :width="900"
     :submit-label

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

@@ -1,15 +1,5 @@
 <template>
-  <PluginMenuButton
-    id="publish"
-    :title="publishLabel"
-    :description="publishDescription"
-    :disabled="!mutations.length || !canEdit"
-    :type="isScheduled ? 'yellow' : 'success'"
-    :weight="0"
-    :icon="icon"
-    @click="onMenuClick"
-  />
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <PublishDialog v-if="showDialog" @close="onClose" @submit="onSubmit" />
     </BlokkliTransition>
@@ -22,13 +12,13 @@ import {
   defineBlokkliFeature,
   computed,
   useRoute,
-  ref,
   nextTick
 } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",
   icon: "publish",
@@ -46,14 +36,14 @@ const { adapter, settings } = defineBlokkliFeature({
   }
 });
 const route = useRoute();
-const { state, $t, broadcast, context, eventBus } = useBlokkli();
+const { state, $t, broadcast, context, eventBus, ui } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
 const hasPublishOptions = !!adapter.getPublishOptions;
 const isPublished = computed(() => !!state.entity.value.status);
 const isScheduled = computed(
   () => !!state.publishOptions.value.publishOn
 );
-const showDialog = ref(false);
+const showDialog = useDialog("publish", "center");
 const publishLabel = computed(() => {
   const suffix = hasPublishOptions ? "..." : "";
   if (isScheduled.value) {
@@ -122,6 +112,18 @@ async function onClose() {
 onBlokkliEvent("publish:show-dialog", () => {
   showDialog.value = true;
 });
+defineMenuButton(() => {
+  return {
+    id: "publish",
+    title: publishLabel.value,
+    description: publishDescription.value,
+    icon: icon.value,
+    type: isScheduled.value ? "yellow" : "success",
+    disabled: !mutations.value.length || !canEdit.value,
+    weight: 0,
+    callback: onMenuClick
+  };
+});
 </script>
 
 <script>

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

@@ -1,21 +1,9 @@
 <template>
-  <PluginMenuButton
-    id="revert"
-    :title="$t('revertMenuTitle', 'Discard...')"
-    :description="
-  $t('revertMenuDescription', 'Restore currently published state')
-"
-    icon="revert"
-    type="danger"
-    :disabled="!mutations.length || !canEdit"
-    :weight="10"
-    @click="showConfirm = true"
-  />
-
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="showConfirm"
+        id="revert"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
         :lead="
   $t(
@@ -33,9 +21,10 @@
 </template>
 
 <script setup>
-import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { DialogModal, BlokkliTransition } from "#blokkli/components";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 const { adapter } = defineBlokkliFeature({
   id: "revert",
   icon: "revert",
@@ -43,9 +32,9 @@ const { adapter } = defineBlokkliFeature({
   requiredAdapterMethods: ["revertAllChanges"],
   description: "Provides a menu button to revert all changes done on the current entity."
 });
-const { state, $t } = useBlokkli();
+const { state, $t, ui } = useBlokkli();
 const { mutations, canEdit, mutateWithLoadingState } = state;
-const showConfirm = ref(false);
+const showConfirm = useDialog("revert", "center");
 async function onSubmit() {
   await mutateWithLoadingState(
     () => adapter.revertAllChanges(),
@@ -54,6 +43,23 @@ async function onSubmit() {
   );
   showConfirm.value = false;
 }
+defineMenuButton(() => {
+  return {
+    id: "revert",
+    title: $t("revertMenuTitle", "Discard..."),
+    description: $t(
+      "revertMenuDescription",
+      "Restore currently published state"
+    ),
+    icon: "revert",
+    type: "danger",
+    disabled: !mutations.value.length || !canEdit.value,
+    weight: 10,
+    callback: () => {
+      showConfirm.value = true;
+    }
+  };
+});
 </script>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value" defer>
     <BlokkliTransition name="search">
       <div
         v-if="isRendered"

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -12,34 +12,36 @@
       class="bk-selection-add-overlay-list bk-scrollbar-dark"
       @wheel="onWheel"
     >
-      <button
+      <AddListItem
         v-for="item in items"
+        :id="item.bundle"
         :key="item.bundle"
+        context="selection-add-buttons"
+        :label="item.label"
+        :bundle="item.bundle"
+        :color="item.isFavorite ? 'yellow' : void 0"
         tabindex="-1"
         @click.prevent="$emit('select', item.bundle)"
-      >
-        <AddListItemIcon
-          :bundle="item.bundle"
-          :color="item.isFavorite ? 'yellow' : 'default'"
-        />
-        <span>{{ item.label }}</span>
-      </button>
-      <button
+      />
+      <AddListItem
         v-for="action in actions"
+        :id="action.id"
         :key="'action:' + action.id"
         tabindex="-1"
-        @click.prevent="$emit('action', action.id)"
-      >
-        <AddListItemIcon :icon="action.icon" :color="action.color" />
-        <span>{{ action.title }}</span>
-      </button>
+        context="selection-add-buttons"
+        :icon="action.icon"
+        :label="action.title"
+        :color="action.color"
+        no-context-menu
+        @click.prevent="$emit('action', action)"
+      />
     </div>
   </ArtboardTooltip>
 </template>
 
 <script setup>
 import { useTemplateRef, useBlokkli, computed } from "#imports";
-import { AddListItemIcon, ArtboardTooltip } from "#blokkli/components";
+import { ArtboardTooltip, AddListItem } from "#blokkli/components";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 const props = defineProps({
   bundles: { type: Array, required: true },
@@ -66,7 +68,7 @@ const items = computed(() => {
   });
 });
 const actions = computed(() => {
-  return plugins.getAddActions().filter((action) => {
+  return plugins.get("addAction").filter((action) => {
     if (!action.itemBundle) {
       return true;
     }
@@ -79,7 +81,9 @@ const onWheel = (e) => {
     hasScrollbar = element && element.scrollHeight > element.clientHeight;
   }
   if (hasScrollbar) {
-    e.stopPropagation();
+    if (!e.ctrlKey && !e.metaKey) {
+      e.stopPropagation();
+    }
   }
 };
 </script>

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

@@ -1,17 +1,17 @@
-import type { Coord } from '#blokkli/types';
+import type { AddAction, Coord } from '#blokkli/types';
 type __VLS_Props = {
     bundles: string[];
     anchorEl?: HTMLElement;
     anchorCoordinates?: Coord;
     label: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string) => void;
-    action: (id: string) => void;
-    close: () => void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    action: (action: AddAction) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
-    onAction?: ((id: string) => any) | undefined;
+    onAction?: ((action: AddAction) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -188,12 +188,11 @@ function onSelectBundle(bundle) {
   });
   closeOverlay();
 }
-function onSelectAction(id) {
+function onSelectAction(action) {
   if (!addData.value) {
     return;
   }
-  eventBus.emit("action:placed", {
-    id,
+  action.callback({
     field: addData.value.field,
     preceedingUuid: addData.value.preceedingUuid,
     host: { ...addData.value.host }
@@ -291,9 +290,7 @@ onBlokkliEvent("state:reloaded", () => {
   }
 });
 function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
-  const allowedBundles = field.allowedBundles.filter(
-    (bundle) => !isInternalBundle(bundle)
-  );
+  const allowedBundles = field.allowedBundles;
   if (allowedBundles.length === 0) {
     return;
   }

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="settings"
     :title="$t('settingsDialogTitle', 'Change settings')"
     :width="900"
     hide-buttons

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

@@ -1,28 +1,18 @@
 <template>
-  <PluginMenuButton
-    id="settings"
-    :title="$t('settingsMenuTitle', 'Settings')"
-    :description="
-  $t('settingsMenuDescription', 'Personal settings for the editor')
-"
-    secondary
-    icon="cog"
-    @click="onClick"
-  />
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
-      <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
+      <SettingsDialog v-if="showSettings" @cancel="onClose" />
     </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import SettingsDialog from "./Dialog/index.vue";
 import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 import { BlokkliTransition } from "#blokkli/components";
-const { $t } = useBlokkli();
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+const { ui, $t } = useBlokkli();
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -53,14 +43,32 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
-const showSettings = ref(false);
-const onClick = () => showSettings.value = true;
+const showSettings = computed(() => ui.currentDialog.value?.id === "settings");
+function onClick() {
+  ui.openDialog({ id: "settings", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("settings");
+}
 const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
 addElementClasses(
   document.documentElement,
   "bk-low-performance-mode",
   lowPerformanceMode
 );
+defineMenuButton(() => {
+  return {
+    id: "settings",
+    title: $t("settingsMenuTitle", "Settings"),
+    description: $t(
+      "settingsMenuDescription",
+      "Personal settings for the editor"
+    ),
+    icon: "cog",
+    secondary: true,
+    callback: onClick
+  };
+});
 </script>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="touch-bar">
       <Bar
         v-if="
@@ -24,7 +24,7 @@
 import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { BlokkliTransition } from "#blokkli/components";
 import Bar from "./Bar/index.vue";
-const { eventBus, selection, $t } = useBlokkli();
+const { eventBus, selection, $t, ui } = useBlokkli();
 defineBlokkliFeature({
   id: "touch-action-bar",
   label: "Touch Action Bar",

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport v-if="activeItem" to="body">
+  <Teleport v-if="activeItem" :to="ui.mainLayoutElement.value">
     <div class="bk bk-tour" :style="tooltipStyle">
       <div class="bk-tour-inner">
         <div class="bk-tour-title">

package/dist/runtime/components/Edit/Features/Tour/Popup/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
       <div class="bk-tour-popup-title">
         <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
@@ -29,6 +29,6 @@
 <script setup>
 import { Icon, ViewportBlockingRect } from "#blokkli/components";
 import { useBlokkli } from "#imports";
-const { $t } = useBlokkli();
+const { $t, ui } = useBlokkli();
 defineEmits(["start", "close"]);
 </script>

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

@@ -1,22 +1,13 @@
 <template>
   <Overlay v-if="tour.isTouring.value" @close="close" />
-  <PluginMenuButton
-    id="tour"
-    :title="$t('tourLabel', 'Take a tour')"
-    :description="$t('tourDescription', 'Explore the features of the editor')"
-    icon="tutor"
-    secondary
-    :weight="-10"
-    @click="start"
-  />
   <Popup v-if="showTourPopup" @close="close" @start="start" />
 </template>
 
 <script setup>
 import { defineBlokkliFeature, useBlokkli } from "#imports";
 import Overlay from "./Overlay/index.vue";
-import { PluginMenuButton } from "#blokkli/plugins";
 import Popup from "./Popup/index.vue";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 defineBlokkliFeature({
   id: "tour",
   label: "Tour",
@@ -33,6 +24,17 @@ const close = () => {
   showTourPopup.value = false;
   tour.isTouring.value = false;
 };
+defineMenuButton(() => {
+  return {
+    id: "tour",
+    title: $t("tourLabel", "Take a tour"),
+    description: $t("tourDescription", "Explore the features of the editor"),
+    icon: "tutor",
+    secondary: true,
+    weight: -10,
+    callback: start
+  };
+});
 </script>
 
 <script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="transform-overlay">
       <TransformDialog
         v-if="openPluginDefinition"

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

@@ -52,18 +52,6 @@
     <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
-  <PluginMenuButton
-    id="translations"
-    :title="$t('translationsBatchTranslateMenuTitle', 'Translate...')"
-    :description="
-  $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
-"
-    :disabled="!isTranslating"
-    :weight="60"
-    icon="translate"
-    @click="eventBus.emit('batchTranslate')"
-  />
-
   <PluginItemAction
     v-if="isTranslating"
     id="translate"
@@ -84,13 +72,10 @@ import {
   onMounted
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import {
-  PluginMenuButton,
-  PluginItemAction,
-  PluginTourItem
-} from "#blokkli/plugins";
+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",
@@ -202,6 +187,22 @@ onMounted(() => {
     }
   }
 });
+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>

package/dist/runtime/components/Edit/FormOverlay/index.vue

@@ -6,7 +6,6 @@
     @keyup.stop
     @keydown.stop
   >
-    <div class="bk bk-form-overlay-background bk-overlay" />
     <Resizable :id="id" class="bk-form-overlay-resizable">
       <FormHeader
         :bundle="bundle"
@@ -27,16 +26,26 @@
 <script setup>
 import FormHeader from "./Header/index.vue";
 import { Resizable } from "#blokkli/components";
-defineProps({
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
   id: { type: String, required: true },
   bundle: { type: String, required: false },
   icon: { type: null, required: false },
   title: { type: String, required: true }
 });
+const { ui } = useBlokkli();
 const emit = defineEmits(["close"]);
-const onClose = () => {
+function onClose() {
   emit("close");
-};
+}
+onBlokkliEvent("overlay:close", onClose);
+onMounted(() => {
+  ui.openDialog({ id: props.id, alignment: "right" });
+});
+onBeforeUnmount(() => {
+  ui.closeDialog(props.id);
+});
 </script>
 
 <script>