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

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <Loading v-if="isLoading" />
     <Transition name="bk-library-edit-header">
       <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
@@ -38,7 +38,7 @@
 
 <script setup>
 import onBroadcastEvent from "#blokkli/helpers/composables/onBroadcastEvent";
-import { ref, useBlokkli } from "#imports";
+import { ref, useBlokkli, useTemplateRef } from "#imports";
 import { Icon } from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
 const props = defineProps({
@@ -46,7 +46,7 @@ const props = defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: false }
 });
-const { $t, element } = useBlokkli();
+const { $t, element, ui } = useBlokkli();
 const DURATION = 530;
 const emit = defineEmits(["submit", "close"]);
 function getOriginatingElement() {
@@ -124,7 +124,7 @@ function onAfterLeave(el) {
     emit("close");
   }
 }
-const iframe = ref(null);
+const iframe = useTemplateRef("iframe");
 const isLoaded = ref(false);
 const isLoading = ref(true);
 const hasPublished = ref(false);

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

@@ -79,7 +79,14 @@ import {
   FormSelect
 } from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
-import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
+import {
+  ref,
+  useBlokkli,
+  useAsyncData,
+  computed,
+  watch,
+  useTemplateRef
+} from "#imports";
 import LibraryListItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -88,7 +95,7 @@ const { $t, adapter, types } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
 const searchText = ref("");
 const selectedBundle = ref("all");
-const listEl = ref(null);
+const listEl = useTemplateRef("listEl");
 const selectedItem = ref("");
 const page = ref(0);
 const allowedBundles = computed(() => {

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="library-reusable"
     :title="$t('libraryDialogTitle', 'Add to library')"
     :lead="
   $t(
@@ -55,19 +56,28 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, onMounted } from "#imports";
+import { ref, useBlokkli, onMounted, useTemplateRef, watch } from "#imports";
 import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t, blocks } = useBlokkli();
+const { dom, $t, blocks, ui } = useBlokkli();
 const props = defineProps({
   uuid: { type: String, required: true },
   backgroundClass: { type: String, required: false }
 });
 const label = ref("");
 const width = ref(450);
-const previewEl = ref(null);
+const previewEl = useTemplateRef("previewEl");
 const backgroundColor = ref("");
+watch(
+  label,
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
 onMounted(() => {
   if (previewEl.value) {
     const item = blocks.getBlock(props.uuid);

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/MediaLibrary/Library/index.vue

@@ -75,7 +75,8 @@ import {
   useLazyAsyncData,
   useBlokkli,
   watch,
-  nextTick
+  nextTick,
+  useTemplateRef
 } from "#imports";
 import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
 import Item from "./Item.vue";
@@ -86,7 +87,7 @@ defineProps({
 });
 const { adapter, storage, $t, element } = useBlokkli();
 const selected = ref([]);
-const listEl = ref(null);
+const listEl = useTemplateRef("listEl");
 const page = ref(0);
 const key = computed(() => Object.values(filterValues.value).join(","));
 function getDragItems(activeItem) {

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/Options/Form/Item.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
 type __VLS_Props = {
     option: BlockOptionDefinition;
     property: string;

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

@@ -4,6 +4,7 @@
     id="preview_with_smartphone"
     :title="$t('previewWithSmartphone', 'Preview (with smartphone)')"
     :disabled="!state.canEdit.value"
+    weight="20"
     :tour-text="
   $t(
     'previewWithSmartphoneTourText',
@@ -15,10 +16,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
@@ -564,4 +565,13 @@ async function onSubmit() {
     emit("submit");
   }
 }
+watch(
+  () => [revisionMessage.value, publishMode.value, isMutating.value],
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
 </script>

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/ResponsivePreview/Frame/index.vue

@@ -25,7 +25,8 @@ import {
   onMounted,
   onBeforeUnmount,
   useRoute,
-  watch
+  watch,
+  useTemplateRef
 } from "#imports";
 import { Icon } from "#blokkli/components";
 import { frameEventBus } from "./../../../../../helpers/frameEventBus";
@@ -40,7 +41,7 @@ watch(selection.uuids, (selectedUuids) => {
   frameEventBus.emit("selectItems", selectedUuids);
 });
 const isLoading = ref(true);
-const iframe = ref(null);
+const iframe = useTemplateRef("iframe");
 const src = computed(
   () => route.fullPath.replace("blokkliEditing", "blokkliPreview")
 );

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

@@ -3,11 +3,12 @@
     id="mobile-preview"
     v-slot="{ width, height, isDetached, isResizing }"
     :title="$t('responsivePreviewTitle', 'Responsive Preview')"
-    :tour-text="tourText"
+    :tour-text
+    weight="10"
     :disabled="!state.canEdit.value"
     :min-width="375"
     :min-height="375"
-    :size="size"
+    :size
     icon="preview"
     region="left"
   >

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/Overlay/Results/Content/index.vue

@@ -52,10 +52,10 @@
 </template>
 
 <script setup>
-import { watch, ref, useBlokkli, onMounted } from "#imports";
+import { ref, watch, useBlokkli, onMounted, useTemplateRef } from "#imports";
 import { ItemIcon, Icon, Sortli } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
-const listItems = ref([]);
+const listItems = useTemplateRef("listItems");
 const props = defineProps({
   visible: { type: Boolean, required: true },
   search: { type: String, required: true },
@@ -123,6 +123,9 @@ const setIndex = (newIndex) => {
   scrollItemIntoView();
 };
 const clickItem = () => {
+  if (!listItems.value) {
+    return;
+  }
   const element = listItems.value[index.value];
   if (!element) {
     return;
@@ -143,6 +146,9 @@ const clickItem = () => {
   emit("close");
 };
 const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
   const item = listItems.value[index.value];
   if (item) {
     item.scrollIntoView({ block: "nearest", inline: "nearest" });

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Page/index.vue

@@ -38,10 +38,17 @@
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli, onMounted, watch } from "#imports";
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  watch,
+  useTemplateRef
+} from "#imports";
 import { ItemIcon, Highlight } from "#blokkli/components";
 import { falsy, modulo } from "#blokkli/helpers";
-const listItems = ref([]);
+const listItems = useTemplateRef("listItems");
 const emit = defineEmits(["close"]);
 const props = defineProps({
   visible: { type: Boolean, required: true },
@@ -86,6 +93,9 @@ const clickItem = () => {
   emit("close");
 };
 const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
   const item = listItems.value[index.value];
   if (item) {
     item.scrollIntoView({ block: "nearest", inline: "nearest" });

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

@@ -66,7 +66,15 @@
 </template>
 
 <script setup>
-import { watch, ref, computed, useBlokkli, onMounted, nextTick } from "#imports";
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  nextTick,
+  useTemplateRef
+} from "#imports";
 import { Icon, ScrollBoundary } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
 import ResultsPage from "./Results/Page/index.vue";
@@ -105,8 +113,8 @@ const tabs = computed(() => Object.keys(tabsMap.value));
 const tabIndex = ref(0);
 const tab = computed(() => tabs.value[tabIndex.value]);
 const search = ref("");
-const input = ref(null);
-const resultsEl = ref(null);
+const input = useTemplateRef("input");
+const resultsEl = useTemplateRef("resultsEl");
 watch(search, () => {
   const component = getResultsComponent();
   if (component) {

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"