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

package/dist/runtime/editor/features/hover/Renderer/index.vue

@@ -0,0 +1,448 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import { useBlokkli, computed, ref, watch } from "#imports";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
+import { isInsideRect } from "#blokkli/editor/helpers/geometry";
+import { toShaderColor } from "#blokkli/editor/helpers/color";
+import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
+const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
+const MAX_RECTS = 11;
+function getDeepestUuid(uuids) {
+  if (uuids.length === 0) {
+    return null;
+  }
+  let deepestUuid = uuids[0];
+  let maxLevel = state.getNestingLevel(deepestUuid);
+  for (let i = 1; i < uuids.length; i++) {
+    const uuid = uuids[i];
+    const level = state.getNestingLevel(uuid);
+    if (level > maxLevel) {
+      maxLevel = level;
+      deepestUuid = uuid;
+    }
+  }
+  return deepestUuid;
+}
+function createHoverState() {
+  return {
+    positions: new Float32Array(MAX_RECTS * 4),
+    radii: new Float32Array(MAX_RECTS * 4),
+    types: new Float32Array(MAX_RECTS),
+    visible: new Float32Array(MAX_RECTS)
+  };
+}
+const hoverState = createHoverState();
+let previousHoveredUuids = [];
+let previousDeepestUuid = null;
+let previousEditableFieldRect = null;
+const isHoveringEditableField = ref(false);
+const isHoveringSelectedBlock = ref(false);
+class HoverRectangleBufferCollector extends RectangleBufferCollector {
+  getBufferInfo(gl) {
+    if (!this.bufferInfo) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return this.bufferInfo;
+  }
+}
+function resetHoverState() {
+  previousHoveredUuids = [];
+  previousDeepestUuid = null;
+  previousEditableFieldRect = null;
+  hoverState.visible.fill(0);
+  isHoveringEditableField.value = false;
+  isHoveringSelectedBlock.value = false;
+}
+watch(selection.isChangingOptions, (isChanging) => {
+  if (!isChanging) {
+    resetHoverState();
+  }
+});
+watch(selection.uuids, () => {
+  resetHoverState();
+});
+function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
+  const artboardRect = {
+    x: offset.x,
+    y: offset.y,
+    width: artboardSize.width * scale,
+    height: artboardSize.height * scale
+  };
+  const isOutsideArtboard = mouseX < artboardRect.x || mouseX > artboardRect.x + artboardRect.width || mouseY < artboardRect.y || mouseY > artboardRect.y + artboardRect.height;
+  if (isOutsideArtboard) {
+    const needsUpdate = previousHoveredUuids.length > 0 || previousEditableFieldRect !== null || isHoveringEditableField.value || isHoveringSelectedBlock.value;
+    hoverState.visible.fill(0);
+    isHoveringEditableField.value = false;
+    isHoveringSelectedBlock.value = false;
+    previousHoveredUuids = [];
+    previousDeepestUuid = null;
+    previousEditableFieldRect = null;
+    return needsUpdate;
+  }
+  const artboardMouseX = mouseX / scale - offset.x / scale;
+  const artboardMouseY = mouseY / scale - offset.y / scale;
+  const hoveredUuids = [];
+  const visibleBlocks = dom.getVisibleBlocks();
+  for (let i = 0; i < visibleBlocks.length; i++) {
+    const uuid = visibleBlocks[i];
+    if (!uuid) continue;
+    const rawRect = dom.getBlockRect(uuid);
+    if (!rawRect) continue;
+    const rect = ui.getViewportRelativeRect(rawRect, scale, offset);
+    const blockRect = {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      width: rect.width / scale,
+      height: rect.height / scale
+    };
+    if (isInsideRect(artboardMouseX, artboardMouseY, blockRect)) {
+      hoveredUuids.push(uuid);
+    }
+  }
+  const deepestUuid = getDeepestUuid(hoveredUuids);
+  const selectedUuids = selection.uuids.value;
+  const unselectedHoveredUuids = hoveredUuids.filter(
+    (uuid) => !selectedUuids.includes(uuid)
+  );
+  const hoveredChanged = unselectedHoveredUuids.length !== previousHoveredUuids.length || unselectedHoveredUuids.some(
+    (uuid, i) => uuid !== previousHoveredUuids[i]
+  ) || deepestUuid !== previousDeepestUuid;
+  let hoveredEditableFieldRect = null;
+  const editableRects = directive.getVisible("editable");
+  for (let i = 0; i < editableRects.length; i++) {
+    const editableRect = editableRects[i];
+    if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
+      hoveredEditableFieldRect = editableRect;
+      break;
+    }
+  }
+  if (!hoveredChanged) {
+    const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
+    if (!editableFieldChanged) {
+      return false;
+    }
+  }
+  const shouldHighlightDeepest = deepestUuid && unselectedHoveredUuids.includes(deepestUuid);
+  hoverState.visible.fill(0);
+  const nestingMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < unselectedHoveredUuids.length; i++) {
+    const uuid = unselectedHoveredUuids[i];
+    const level = Math.min(state.getNestingLevel(uuid), 9);
+    if (!nestingMap.has(level)) {
+      nestingMap.set(level, uuid);
+    }
+  }
+  for (const [level, uuid] of nestingMap) {
+    const rect = dom.getBlockRect(uuid);
+    const block = blocks.getBlock(uuid);
+    if (!rect || !block) continue;
+    const el = dom.getDragElement(block);
+    if (!el) continue;
+    const style = theme.getDraggableStyle(el);
+    const isDeepest = shouldHighlightDeepest && uuid === deepestUuid;
+    hoverState.positions[level * 4 + 0] = rect.x;
+    hoverState.positions[level * 4 + 1] = rect.y;
+    hoverState.positions[level * 4 + 2] = rect.width;
+    hoverState.positions[level * 4 + 3] = rect.height;
+    hoverState.radii[level * 4 + 0] = style.radius[0];
+    hoverState.radii[level * 4 + 1] = style.radius[1];
+    hoverState.radii[level * 4 + 2] = style.radius[2];
+    hoverState.radii[level * 4 + 3] = style.radius[3];
+    let type = 0;
+    if (isDeepest) {
+      const isFromLibrary = state.fromLibraryUuids.value.includes(uuid);
+      if (isFromLibrary) {
+        type = 4;
+      } else {
+        type = style.isInverted ? 3 : 1;
+      }
+    }
+    hoverState.types[level] = type;
+    hoverState.visible[level] = 1;
+  }
+  if (hoveredEditableFieldRect) {
+    const inset = 2;
+    hoverState.positions[10 * 4 + 0] = hoveredEditableFieldRect.x + inset;
+    hoverState.positions[10 * 4 + 1] = hoveredEditableFieldRect.y + inset;
+    hoverState.positions[10 * 4 + 2] = hoveredEditableFieldRect.width - inset * 2;
+    hoverState.positions[10 * 4 + 3] = hoveredEditableFieldRect.height - inset * 2;
+    hoverState.radii[10 * 4 + 0] = 0;
+    hoverState.radii[10 * 4 + 1] = 0;
+    hoverState.radii[10 * 4 + 2] = 0;
+    hoverState.radii[10 * 4 + 3] = 0;
+    hoverState.types[10] = 2;
+    hoverState.visible[10] = 1;
+  }
+  previousHoveredUuids = unselectedHoveredUuids;
+  previousDeepestUuid = deepestUuid;
+  previousEditableFieldRect = hoveredEditableFieldRect;
+  isHoveringEditableField.value = hoveredEditableFieldRect !== null;
+  isHoveringSelectedBlock.value = deepestUuid !== null && selectedUuids.includes(deepestUuid);
+  return true;
+}
+const uniforms = computed(() => {
+  return {
+    u_color_mono: theme.mono.value[300],
+    u_color_accent: theme.accent.value[600],
+    u_color_teal: theme.teal.value.normal,
+    u_color_white: [255, 255, 255],
+    u_color_lime: theme.lime.value.normal
+  };
+});
+onBlokkliEvent("state:reloaded", () => {
+  resetHoverState();
+});
+onBlokkliEvent("ui:resized", () => {
+  resetHoverState();
+});
+const { collector } = defineRenderer("hover-overlay", {
+  zIndex: 200,
+  collector: () => {
+    const c = new HoverRectangleBufferCollector();
+    for (let i = 0; i < MAX_RECTS; i++) {
+      c.addRectangle(
+        {
+          id: `hover-rect-${i}`,
+          x: 0,
+          y: 0,
+          width: 100,
+          height: 100,
+          radius: [0, 0, 0, 0]
+        },
+        0
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  cursor: () => {
+    if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
+      return "text";
+    }
+    if (isHoveringSelectedBlock.value && state.editMode.value === "editing") {
+      return "grab";
+    }
+    return null;
+  },
+  render: (ctx, gl, program) => {
+    const bufferInfo = collector.getBufferInfo(gl);
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_color_mono: toShaderColor(uniforms.value.u_color_mono),
+      u_color_accent: toShaderColor(uniforms.value.u_color_accent),
+      u_color_teal: toShaderColor(uniforms.value.u_color_teal),
+      u_color_white: toShaderColor(uniforms.value.u_color_white),
+      u_color_lime: toShaderColor(uniforms.value.u_color_lime),
+      u_hover_positions: hoverState.positions,
+      u_hover_radii: hoverState.radii,
+      u_hover_types: hoverState.types,
+      u_hover_visible: hoverState.visible,
+      u_opacity: ctx.changeOptionsTransition
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfo);
+    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const rgbaToCss = (rgb, alpha) => {
+      return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+    };
+    const colors = uniforms.value;
+    const borderThickness = 1.5 * ctx.dpi;
+    const dashLength = 7 * ctx.dpi;
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    for (let i = 0; i < MAX_RECTS; i++) {
+      if (hoverState.visible[i] !== 1) {
+        continue;
+      }
+      const x = hoverState.positions[i * 4 + 0];
+      const y = hoverState.positions[i * 4 + 1];
+      const width = hoverState.positions[i * 4 + 2];
+      const height = hoverState.positions[i * 4 + 3];
+      const radiusTopLeft = hoverState.radii[i * 4 + 0];
+      const radiusTopRight = hoverState.radii[i * 4 + 1];
+      const radiusBottomRight = hoverState.radii[i * 4 + 2];
+      const radiusBottomLeft = hoverState.radii[i * 4 + 3];
+      const viewportX = (x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = height * ctx.artboardScale * ctx.dpi;
+      const type = hoverState.types[i];
+      if (type === 2) {
+        ctx2d.fillStyle = rgbaToCss(colors.u_color_teal, 0.2);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        ctx2d.beginPath();
+        ctx2d.moveTo(viewportX + rtl, viewportY);
+        ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+        if (rtr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY,
+            viewportX + viewportWidth,
+            viewportY + rtr,
+            rtr
+          );
+        }
+        ctx2d.lineTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight - rbr
+        );
+        if (rbr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY + viewportHeight,
+            viewportX + viewportWidth - rbr,
+            viewportY + viewportHeight,
+            rbr
+          );
+        }
+        ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+        if (rbl > 0) {
+          ctx2d.arcTo(
+            viewportX,
+            viewportY + viewportHeight,
+            viewportX,
+            viewportY + viewportHeight - rbl,
+            rbl
+          );
+        }
+        ctx2d.lineTo(viewportX, viewportY + rtl);
+        if (rtl > 0) {
+          ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+        }
+        ctx2d.closePath();
+        ctx2d.fill();
+        ctx2d.strokeStyle = rgbToCss(colors.u_color_teal);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([]);
+        ctx2d.stroke();
+      } else {
+        let strokeColor = colors.u_color_mono;
+        if (type === 4) {
+          strokeColor = colors.u_color_lime;
+        } else if (type === 3) {
+          strokeColor = colors.u_color_white;
+        } else if (type === 1) {
+          strokeColor = colors.u_color_accent;
+        }
+        ctx2d.strokeStyle = rgbToCss(strokeColor);
+        ctx2d.lineWidth = borderThickness;
+        ctx2d.setLineDash([dashLength, dashLength]);
+        const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+        const rtl = Math.min(
+          radiusTopLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rtr = Math.min(
+          radiusTopRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbr = Math.min(
+          radiusBottomRight * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        const rbl = Math.min(
+          radiusBottomLeft * ctx.artboardScale * ctx.dpi,
+          maxRadius
+        );
+        ctx2d.beginPath();
+        ctx2d.moveTo(viewportX + rtl, viewportY);
+        ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+        if (rtr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY,
+            viewportX + viewportWidth,
+            viewportY + rtr,
+            rtr
+          );
+        }
+        ctx2d.lineTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight - rbr
+        );
+        if (rbr > 0) {
+          ctx2d.arcTo(
+            viewportX + viewportWidth,
+            viewportY + viewportHeight,
+            viewportX + viewportWidth - rbr,
+            viewportY + viewportHeight,
+            rbr
+          );
+        }
+        ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+        if (rbl > 0) {
+          ctx2d.arcTo(
+            viewportX,
+            viewportY + viewportHeight,
+            viewportX,
+            viewportY + viewportHeight - rbl,
+            rbl
+          );
+        }
+        ctx2d.lineTo(viewportX, viewportY + rtl);
+        if (rtl > 0) {
+          ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+        }
+        ctx2d.closePath();
+        ctx2d.stroke();
+      }
+      ctx2d.setLineDash([]);
+    }
+    ctx2d.globalAlpha = 1;
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "HoverOverlay"
+};
+</script>

package/dist/runtime/editor/features/hover/Renderer/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/hover/index.d.vue.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/hover/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <ErrorBoundary v-model="isLocked" :label="$t('feature_hover_label', 'Hover')">
+    <Renderer v-if="isVisible" :key="animation.renderKey.value" />
+  </ErrorBoundary>
+</template>
+
+<script setup>
+import Renderer from "./Renderer/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { ErrorBoundary } from "#blokkli/editor/components";
+defineBlokkliFeature({
+  id: "hover",
+  icon: "bk_mdi_arrow_selector_tool",
+  label: "Hover",
+  description: "Renders a border around blocks that are currently being hovered."
+});
+const { selection, ui, dom, animation, $t } = useBlokkli();
+const isLocked = ref(false);
+const isVisible = computed(
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+);
+</script>
+
+<script>
+export default {
+  name: "Hover"
+};
+</script>

package/dist/runtime/editor/features/hover/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/Dialog/index.d.vue.ts

@@ -0,0 +1,15 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,122 @@
+<template>
+  <DialogModal
+    id="import-existing"
+    class="bk-import-existing-dialog"
+    :title="$t('importExistingDialogTitle', 'Import from existing page')"
+    :lead="
+  $t(
+    'importExistingDialogLead',
+    'Import content from an existing page. The items will be added to the end of the list. This action can be undone.'
+  )
+"
+    :width="800"
+    :submit-label="$t('importExistingDialogSubmit', 'Import content')"
+    :can-submit="!!(sourceEntityUuid && selectedFields.length)"
+    :is-loading="isLoading"
+    @submit="onSubmit"
+    @cancel="$emit('cancel')"
+  >
+    <div class="bk">
+      <ConfigForm v-model="filters" :config>
+        <template #before>
+          <li class="bk-form-item">
+            <FormCheckboxes
+              id="import-existing-fields"
+              v-model="selectedFields"
+              :label="
+  $t(
+    'importExistingFieldsLabel',
+    'Which content would you like to import?'
+  )
+"
+              :options="fieldOptions"
+              inline
+            />
+          </li>
+        </template>
+      </ConfigForm>
+      <div class="bk-import-existing-dialog-results">
+        <div class="bk-form-label">
+          {{ $t("importExistingPagesTitle", "Select page") }}
+        </div>
+        <label v-for="item in items" :key="item.uuid" class="bk-radio">
+          <input
+            v-model="sourceEntityUuid"
+            type="radio"
+            :value="item.uuid"
+            name="entity"
+          />
+          <span>{{ item.label }}</span>
+          <div v-if="item.description" class="bk-radio-description">
+            {{ item.description }}
+          </div>
+        </label>
+      </div>
+    </div>
+    <template #pre-footer>
+      <Pagination v-model="page" :total-pages />
+    </template>
+  </DialogModal>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, useAsyncData, watch } from "#imports";
+import {
+  DialogModal,
+  ConfigForm,
+  Pagination,
+  FormCheckboxes
+} from "#blokkli/editor/components";
+const { adapter, $t, types, context } = useBlokkli();
+const emit = defineEmits(["confirm", "cancel"]);
+const sourceEntityUuid = ref("");
+const selectedFields = ref([]);
+const isLoading = ref(false);
+const page = ref(0);
+const filters = ref({});
+watch(
+  () => ({ ...filters.value }),
+  () => {
+    page.value = 0;
+  }
+);
+const args = computed(() => {
+  return {
+    page: page.value,
+    filters: { ...filters.value }
+  };
+});
+const { data } = useAsyncData(
+  () => {
+    return adapter.getImportItems(args.value);
+  },
+  {
+    watch: [args]
+  }
+);
+const items = computed(() => data.value?.items ?? []);
+const config = computed(() => data.value?.filters ?? []);
+const total = computed(() => data.value?.total ?? 0);
+const perPage = computed(() => data.value?.perPage ?? 16);
+const totalPages = computed(() => {
+  return Math.ceil(total.value / perPage.value);
+});
+function onSubmit() {
+  emit("confirm", {
+    sourceUuid: sourceEntityUuid.value,
+    fields: selectedFields.value
+  });
+  isLoading.value = true;
+}
+const fieldOptions = computed(
+  () => types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).map((field) => {
+    return {
+      value: field.name,
+      label: field.label
+    };
+  })
+);
+</script>

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

@@ -0,0 +1,15 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/import-existing/index.d.vue.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>;