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

package/dist/runtime/editor/features/import-existing/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-up">
+      <ExistingDialog
+        v-if="showModal"
+        @confirm="onSubmit($event.sourceUuid, $event.fields)"
+        @cancel="showModal = false"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, useBlokkli, onMounted, defineBlokkliFeature } from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import ExistingDialog from "./Dialog/index.vue";
+import { defineMenuButton, useDialog } from "#blokkli/editor/composables";
+const { adapter, settings } = defineBlokkliFeature({
+  id: "import-existing",
+  label: "Import existing content",
+  icon: "bk_mdi_arrow_downward",
+  requiredAdapterMethods: ["getImportItems", "importFromExisting"],
+  description: "Implements a menu action that renders a dialog to import blocks from another entity.",
+  settings: {
+    showDialogWhenEmpty: {
+      type: "checkbox",
+      default: true,
+      label: "Show import dialog at start",
+      description: "Displays the import dialog when starting bl\xF6kkli if the page is empty.",
+      group: "behavior"
+    }
+  }
+});
+const { ui, state, $t } = useBlokkli();
+const isEmpty = computed(
+  () => !state.mutatedFields.value.find((v) => v.list?.length)
+);
+const showModal = useDialog("import-existing", "center");
+function onSubmit(sourceUuid, sourceFields) {
+  showModal.value = false;
+  state.mutateWithLoadingState(
+    () => adapter.importFromExisting({
+      sourceFields,
+      sourceUuid
+    }),
+    $t("importExistingError", "Content could not be imported."),
+    $t("importExistingSuccess", "Content imported successfully.")
+  );
+}
+onMounted(() => {
+  if (isEmpty.value && !state.mutations.value.length && settings.value.showDialogWhenEmpty && state.canEdit.value) {
+    showModal.value = true;
+  }
+});
+defineMenuButton(() => {
+  if (!state.mutatedFields.value.length) {
+    return void 0;
+  }
+  return {
+    id: "import_existing",
+    title: $t("importExistingTitle", "Import..."),
+    description: $t(
+      "importExistingDescription",
+      "Import from an existing page"
+    ),
+    icon: "bk_mdi_arrow_downward",
+    disabled: state.editMode.value !== "editing",
+    weight: 50,
+    callback: () => {
+      showModal.value = true;
+    }
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "ImportExisting"
+};
+</script>

package/dist/runtime/editor/features/import-existing/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+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>;

package/dist/runtime/editor/features/import-existing/types.d.ts

@@ -0,0 +1,23 @@
+import type { BlokkliAdapterSearchResults } from '#blokkli/editor/adapter';
+export type BlokkliAdapterGetImportItemsResult = BlokkliAdapterSearchResults<ImportItem>;
+export type ImportFromExistingEvent = {
+    sourceUuid: string;
+    sourceFields: string[];
+};
+export interface ImportItem {
+    uuid: string;
+    label: string;
+    description?: string;
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Get all existing entities for importing.
+         */
+        getImportItems?: (e: AdapterSearchArguments) => Promise<BlokkliAdapterGetImportItemsResult>;
+        /**
+         * Import items from an existing entity.
+         */
+        importFromExisting?: (e: ImportFromExistingEvent) => Promise<MutationResponseLike<T>>;
+    }
+}

package/dist/runtime/editor/features/library/EditReusable/index.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    url: string;
+    uuid: string;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/EditReusable/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <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">
+        <h2>
+          <span>{{
+            $t("libraryItemEditOverlayTitle", "Edit reusable block")
+          }}</span>
+          <span v-if="label">&nbsp;{{ label }}</span>
+        </h2>
+        <button @click.prevent="closeOverlay">
+          <Icon name="bk_mdi_arrow_left_alt" />
+          <span>{{ $t("libraryItemEditOverlayBack", "Back to page") }}</span>
+        </button>
+      </header>
+    </Transition>
+    <Transition
+      :css="false"
+      @enter="onEnter"
+      @after-enter="onAfter"
+      @enter-cancelled="onAfter"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+      @leave-cancelled="onAfterLeave"
+    >
+      <div v-show="isLoaded" class="bk bk-library-edit-overlay">
+        <iframe
+          ref="iframe"
+          :src="url"
+          style="width: 100%; height: 100%"
+          @load="onLoad"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, Loading } from "#blokkli/editor/components";
+import { onBroadcastEvent } from "#blokkli/editor/composables";
+const props = defineProps({
+  url: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false }
+});
+const { $t, element, ui } = useBlokkli();
+const DURATION = 530;
+const emit = defineEmits(["submit", "close"]);
+function getOriginatingElement() {
+  return element.query(
+    document.documentElement,
+    `[data-bk-library-item-uuid="${props.uuid}"]`,
+    "Get originating library item element"
+  );
+}
+function onEnter(el, done) {
+  if (el instanceof HTMLElement) {
+    const originating = getOriginatingElement();
+    if (!originating) {
+      done();
+      isLoading.value = false;
+      return;
+    }
+    const originatingRect = originating.getBoundingClientRect();
+    const overlayRect = el.getBoundingClientRect();
+    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
+    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
+    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
+    setTimeout(() => {
+      el.style.transitionDuration = DURATION + "ms";
+      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+      el.style.transitionProperty = "transform";
+      el.style.transformOrigin = "0px 0px";
+      el.style.transform = "translate(0px, 0px)";
+    }, 10);
+    setTimeout(() => {
+      done();
+      isLoading.value = false;
+    }, DURATION);
+  }
+}
+function onAfter(el) {
+  if (el instanceof HTMLElement) {
+    el.style.transform = "";
+    el.style.transitionDuration = "";
+    el.style.opacity = "";
+    el.style.transitionProperty = "";
+    el.style.transitionTimingFunction = "";
+    el.style.transformOrigin = "";
+  }
+}
+function onLeave(el, done) {
+  if (el instanceof HTMLElement) {
+    const originating = getOriginatingElement();
+    if (!originating) {
+      done();
+      return;
+    }
+    const originatingRect = originating.getBoundingClientRect();
+    const overlayRect = el.getBoundingClientRect();
+    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
+    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
+    el.style.transform = "translate(0px, 0px)";
+    setTimeout(() => {
+      el.style.transitionDuration = DURATION + "ms";
+      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+      el.style.transitionProperty = "transform";
+      el.style.transformOrigin = "0px 0px";
+      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
+    }, 10);
+    setTimeout(() => {
+      done();
+    }, DURATION);
+  }
+}
+function onAfterLeave(el) {
+  onAfter(el);
+  if (hasPublished.value) {
+    emit("submit");
+  } else {
+    emit("close");
+  }
+}
+const iframe = useTemplateRef("iframe");
+const isLoaded = ref(false);
+const isLoading = ref(true);
+const hasPublished = ref(false);
+let timeout = null;
+function onLibraryItemPublished({ uuid }) {
+  if (props.uuid === uuid) {
+    hasPublished.value = true;
+    isLoaded.value = false;
+  }
+}
+function onLoad() {
+  clearTimeout(timeout);
+  timeout = window.setTimeout(() => {
+    isLoaded.value = true;
+  }, 3e3);
+  if (!iframe.value) {
+    return;
+  }
+  iframe.value.focus();
+  iframe.value.contentWindow?.focus();
+}
+function closeOverlay() {
+  hasPublished.value = false;
+  isLoaded.value = false;
+}
+function onLibraryItemClose({ uuid }) {
+  if (props.uuid === uuid) {
+    closeOverlay();
+  }
+}
+function onEditorLoaded({ uuid }) {
+  if (props.uuid === uuid) {
+    isLoaded.value = true;
+  }
+}
+onBroadcastEvent("published", onLibraryItemPublished);
+onBroadcastEvent("closeEditor", onLibraryItemClose);
+onBroadcastEvent("editorLoaded", onEditorLoaded);
+</script>

package/dist/runtime/editor/features/library/EditReusable/index.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    url: string;
+    uuid: string;
+    label?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/LibraryDialog/Item/index.d.vue.ts

@@ -0,0 +1,10 @@
+import type { FieldListItem } from '#blokkli/types';
+type __VLS_Props = {
+    uuid: string;
+    label?: string;
+    bundle: string;
+    item: FieldListItem;
+};
+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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/LibraryDialog/Item/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    data-element-type="reusable"
+    :data-item-bundle="bundle"
+    :data-library-item-uuid="uuid"
+    :data-label="label"
+    :class="backgroundClass"
+    class="bk-library-list-item"
+  >
+    <div class="bk bk-library-list-item-header">
+      <div class="bk-blokkli-item-label">
+        <div class="bk-blokkli-item-label-icon">
+          <ItemIcon :bundle="bundle" />
+        </div>
+        <span>{{ bundleLabel }}: {{ label }}</span>
+      </div>
+    </div>
+    <div
+      v-if="renderPreview"
+      class="bk-library-list-item-inner"
+      :class="backgroundClass"
+    >
+      <ScaleToFit :width="previewWidth" :max-height="400">
+        <BlokkliItem v-bind="item" parent-type="nested" />
+      </ScaleToFit>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, provide, useBlokkli } from "#imports";
+import { ItemIcon, ScaleToFit } from "#blokkli/editor/components";
+import {
+  INJECT_FIELD_LIST_BLOCKS,
+  INJECT_FIELD_LIST_TYPE,
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE,
+  INJECT_PROVIDER_BLOCKS
+} from "#blokkli/helpers/injections";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  bundle: { type: String, required: true },
+  item: { type: Object, required: true }
+});
+const { types, definitions } = useBlokkli();
+const bundleLabel = computed(
+  () => types.getBlockBundleDefinition(props.bundle)?.label || props.bundle
+);
+const definition = computed(
+  () => definitions.getDefaultDefinition(props.bundle)
+);
+const previewWidth = computed(() => definition.value?.editor?.previewWidth);
+const renderPreview = computed(
+  () => definition.value?.editor?.noPreview !== true
+);
+const backgroundClass = computed(
+  () => definition.value?.editor?.previewBackgroundClass || ""
+);
+const blocks = computed(() => []);
+const fieldListType = computed(() => "default");
+provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_IS_EDITING, false);
+provide(INJECT_FIELD_LIST_BLOCKS, blocks);
+provide(INJECT_PROVIDER_BLOCKS, blocks);
+provide(INJECT_FIELD_LIST_TYPE, fieldListType);
+</script>

package/dist/runtime/editor/features/library/LibraryDialog/Item/index.vue.d.ts

@@ -0,0 +1,10 @@
+import type { FieldListItem } from '#blokkli/types';
+type __VLS_Props = {
+    uuid: string;
+    label?: string;
+    bundle: string;
+    item: FieldListItem;
+};
+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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/LibraryDialog/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/LibraryDialog/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <FormOverlay
+    id="library"
+    :title="$t('libraryPlaceDialogTitle', 'Add block from library')"
+    icon="reusable"
+    @close="onClose"
+  >
+    <div class="bk-library-dialog">
+      <div>
+        <p class="bk-lead">
+          {{
+            $t(
+  "libraryPlaceDialogLead",
+  "Select a reusable block from the library to add it to your layout. You can detach the block later."
+)
+          }}
+        </p>
+        <div class="bk">
+          <div class="bk-form-group">
+            <ConfigForm v-model="filters" :config />
+            <FormItem>
+              <FormSelect
+                id="library_bundle"
+                v-model="selectedBundle"
+                :label="$t('libraryPlaceBundleSelectLabel', 'Bundle')"
+                :options="bundleOptions"
+              />
+            </FormItem>
+          </div>
+        </div>
+        <div class="bk-library-dialog-content">
+          <Loading v-if="status === 'pending'" />
+          <ul ref="listEl" class="bk-library-dialog-list">
+            <li
+              v-for="item in items"
+              :key="item.uuid"
+              :class="{
+  'bk-is-selected': selectedItem === item.uuid
+}"
+              @click="selectedItem = item.uuid"
+            >
+              <LibraryListItem v-bind="item" />
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="bk bk-library-pagination">
+        <Pagination v-model="page" :total-pages />
+      </div>
+    </div>
+
+    <template #footer>
+      <button class="bk-button bk-is-primary" @click="onSubmit">
+        {{ $t("libraryPlaceDialogSubmit", "Add reusable block") }}
+      </button>
+    </template>
+  </FormOverlay>
+</template>
+
+<script setup>
+import {
+  FormOverlay,
+  Pagination,
+  FormItem,
+  FormSelect,
+  ConfigForm,
+  Loading
+} from "#blokkli/editor/components";
+import {
+  ref,
+  useBlokkli,
+  useAsyncData,
+  computed,
+  watch,
+  reactive
+} from "#imports";
+import LibraryListItem from "./Item/index.vue";
+const props = defineProps({
+  field: { type: Object, required: true }
+});
+const { $t, adapter, types } = useBlokkli();
+const emit = defineEmits(["close", "submit"]);
+const filters = reactive({});
+const selectedBundle = ref("all");
+const selectedItem = ref("");
+const page = ref(0);
+const allowedBundles = computed(() => {
+  const fieldConfig = types.getFieldConfig(
+    props.field.hostEntityType,
+    props.field.hostEntityBundle,
+    props.field.name
+  );
+  return (fieldConfig?.allowedBundles || []).filter((v) => {
+    return types.getBlockBundleDefinition(v)?.allowReusable;
+  });
+});
+const onSubmit = () => {
+  if (selectedItem.value) {
+    emit("submit", selectedItem.value);
+  }
+};
+const onClose = () => {
+  emit("close");
+};
+const searchParams = computed(() => {
+  return {
+    bundles: selectedBundle.value !== "all" ? [selectedBundle.value] : allowedBundles.value,
+    page: page.value,
+    filters: { ...filters }
+  };
+});
+watch(filters, function() {
+  page.value = 0;
+});
+const { data, status } = await useAsyncData(
+  () => adapter.getLibraryItems(searchParams.value),
+  {
+    watch: [searchParams],
+    default: () => {
+      return {
+        items: [],
+        filters: [],
+        total: 0,
+        perPage: 50
+      };
+    }
+  }
+);
+const perPage = computed(() => data.value.perPage);
+const totalPages = computed(() => Math.ceil(data.value.total / perPage.value));
+const config = computed(() => data.value.filters);
+const items = computed(() => data.value.items);
+const bundleOptions = computed(() => {
+  const bundles = allowedBundles.value.map((bundle) => {
+    const definition = types.getBlockBundleDefinition(bundle);
+    return {
+      value: bundle,
+      label: definition?.label || bundle
+    };
+  });
+  return [{ value: "all", label: $t("all", "All") }, ...bundles];
+});
+</script>

package/dist/runtime/editor/features/library/LibraryDialog/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    field: BlokkliFieldElement;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+    submit: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSubmit?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/ReusableDialog/index.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    uuid: string;
+    backgroundClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/ReusableDialog/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <DialogModal
+    id="library-reusable"
+    :title="$t('libraryDialogTitle', 'Add to library')"
+    :lead="
+  $t(
+    'libraryDialogLead',
+    'When you add an item to the library, you can use it on multiple pages at the same time. Changes to this item are then immediately published on all pages.'
+  )
+"
+    :width="1200"
+    icon="reusable"
+    :submit-label="$t('libraryDialogSubmit', 'Add to library')"
+    :can-submit="!!label.length"
+    @submit="$emit('confirm', label)"
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk-reusable-dialog-form">
+      <InfoBox
+        :text="
+  $t(
+    'libraryDialogReusableInfo',
+    'The library item will be available for placement on other pages once this page has been published.'
+  )
+"
+      />
+      <FormItem>
+        <FormText
+          id="reusable_label"
+          v-model="label"
+          :label="$t('libraryDialogDescriptionLabel', 'Description')"
+          type="text"
+          :placeholder="
+  $t(
+    'libraryDialogTitleInputPlaceholder',
+    'e.g. Teaser Campaign 2024'
+  )
+"
+          required
+        />
+      </FormItem>
+      <FormItem>
+        <div class="bk-form-label">
+          {{ $t("libraryPreviewLabel", "Preview") }}
+        </div>
+        <div
+          class="bk-dialog-content-element"
+          :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
+          :style="backgroundClass ? {} : { backgroundColor }"
+        >
+          <div ref="previewEl" />
+        </div>
+      </FormItem>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { ref, useBlokkli, onMounted, useTemplateRef, watch } from "#imports";
+import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/editor/components";
+import { realBackgroundColor } from "#blokkli/editor/helpers/dom";
+defineEmits(["confirm", "cancel"]);
+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 = useTemplateRef("previewEl");
+const backgroundColor = ref("");
+watch(
+  label,
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
+onMounted(() => {
+  if (previewEl.value) {
+    const item = blocks.getBlock(props.uuid);
+    if (!item) {
+      return;
+    }
+    const element = dom.getDragElement(item);
+    if (!element) {
+      return;
+    }
+    const markup = dom.getDropElementMarkup(item);
+    width.value = element.getBoundingClientRect().width + 40;
+    const clone = document.createElement("div");
+    clone.innerHTML = markup;
+    previewEl.value.appendChild(clone);
+    backgroundColor.value = realBackgroundColor(element);
+  }
+});
+</script>