@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.10

package/dist/runtime/components/BlokkliProvider.vue

@@ -3,7 +3,7 @@
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
     :data-provider-entity-bundle="entityBundle"
-    :data-blokkli-provider-active="isInEditor || undefined"
+    :data-blokkli-provider-active="isInEditor || void 0"
   >
     <BlokkliErrorBoundary v-if="isInEditor">
       <PreviewProvider
@@ -58,7 +58,7 @@
   </div>
 </template>
 
-<script lang="ts" setup generic="T">
+<script setup>
 import {
   computed,
   defineAsyncComponent,
@@ -66,114 +66,78 @@ import {
   useRouter,
   provide,
   ref,
-  onMounted,
-} from '#imports'
+  onMounted
+} from "#imports";
 import {
   INJECT_ENTITY_CONTEXT,
-  INJECT_PROVIDER_CONTEXT,
-} from '../helpers/symbols'
-import type { BlokkliProviderEntityContext } from '#blokkli/types'
-
+  INJECT_PROVIDER_CONTEXT
+} from "../helpers/symbols";
+defineSlots();
 const PreviewProvider = defineAsyncComponent(
-  () => import('./Edit/PreviewProvider.vue'),
-)
-
+  () => import("./Edit/PreviewProvider.vue")
+);
 const EditProvider = defineAsyncComponent(
-  () => import('./Edit/EditProvider.vue'),
-)
-
+  () => import("./Edit/EditProvider.vue")
+);
 const BlokkliErrorBoundary = defineAsyncComponent(
-  () => import('./Edit/BlokkliErrorBoundary.vue'),
-)
-
+  () => import("./Edit/BlokkliErrorBoundary.vue")
+);
 const EditIndicator = defineAsyncComponent(
-  () => import('./Edit/EditIndicator.vue'),
-)
-
-const route = useRoute()
-const router = useRouter()
-
-const props = withDefaults(
-  defineProps<{
-    entity?: T
-    entityType: string
-    entityBundle: string
-    entityUuid: string
-    canEdit: boolean
-    tag?: string
-    language?: string
-    editLabel?: string
-    editPath?: string
-
-    /**
-     * When set to true, during editing, everything except the provider element will be hidden.
-     */
-    isolate?: boolean
-  }>(),
-  {
-    tag: 'div',
-    language: '',
-    editLabel: '',
-    entity: undefined,
-    editPath: undefined,
-  },
-)
-
-const shouldRender = ref(false)
-
+  () => import("./Edit/EditIndicator.vue")
+);
+const route = useRoute();
+const router = useRouter();
+const props = defineProps({
+  entity: { type: null, required: false, default: void 0 },
+  entityType: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  entityUuid: { type: String, required: true },
+  canEdit: { type: Boolean, required: true },
+  tag: { type: String, required: false, default: "div" },
+  language: { type: String, required: false, default: "" },
+  editLabel: { type: String, required: false, default: "" },
+  editPath: { type: String, required: false, default: void 0 },
+  isolate: { type: Boolean, required: false }
+});
+const shouldRender = ref(false);
 const isInEditor = computed(
-  () =>
-    props.entityUuid &&
-    props.entityType &&
-    props.entityBundle &&
-    (isPreviewing.value || isEditing.value),
-)
-
+  () => props.entityUuid && props.entityType && props.entityBundle && (isPreviewing.value || isEditing.value)
+);
 const isEditing = computed(
-  () =>
-    props.canEdit &&
-    !!props.entityUuid &&
-    route.query.blokkliEditing === props.entityUuid,
-)
-
+  () => props.canEdit && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
+);
 const isPreviewing = computed(
-  () => props.entityUuid && route.query.blokkliPreview === props.entityUuid,
-)
-
+  () => !!props.entityUuid && route.query.blokkliPreview === props.entityUuid
+);
 const showIndicator = computed(
-  () =>
-    props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview,
-)
-
+  () => props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview
+);
 function edit() {
   router.push({
     path: props.editPath || route.path,
     query: {
       blokkliEditing: props.entityUuid,
-      language: props.language,
-    },
-  })
+      language: props.language
+    }
+  });
 }
-
-const blokkliProviderEntityContext = computed<BlokkliProviderEntityContext>(
+const blokkliProviderEntityContext = computed(
   () => {
     return {
       uuid: props.entityUuid,
       type: props.entityType,
       bundle: props.entityBundle,
-      language: props.language,
-    }
-  },
-)
-
-provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext)
+      language: props.language
+    };
+  }
+);
+provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext);
 provide(INJECT_ENTITY_CONTEXT, {
   uuid: props.entityUuid,
   type: props.entityType,
-  bundle: props.entityBundle,
-})
-
+  bundle: props.entityBundle
+});
 onMounted(() => {
-  shouldRender.value = true
-})
+  shouldRender.value = true;
+});
 </script>

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+        entity?: T;
+        entityType: string;
+        entityBundle: string;
+        entityUuid: string;
+        canEdit: boolean;
+        tag?: string;
+        language?: string;
+        editLabel?: string;
+        editPath?: string;
+        /**
+         * When set to true, during editing, everything except the provider element will be hidden.
+         */
+        isolate?: boolean;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default(props: {
+            isEditing: boolean;
+            canEdit: boolean;
+            isPreview: boolean;
+            entity?: T | undefined;
+        }): any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -3,11 +3,8 @@
     <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
       <div
         v-show="
-          selection.blocks.value.length &&
-          !selection.isDragging.value &&
-          !selection.editableActive.value &&
-          !ui.isAnimating.value
-        "
+  selection.blocks.value.length && !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value
+"
         ref="el"
         class="bk-blokkli-item-actions-inner"
       >
@@ -16,8 +13,8 @@
           ref="controlsEl"
           class="bk-blokkli-item-actions-controls"
           :class="{
-            'bk-is-locked': ui.isTransforming.value,
-          }"
+  'bk-is-locked': ui.isTransforming.value
+}"
         >
           <div id="bk-blokkli-item-actions-title">
             <button
@@ -25,11 +22,11 @@
               :disabled="!shouldRenderButton"
               :title="title"
               :class="{
-                'is-open': showDropdown,
-                'is-interactive': shouldRenderButton,
-                'bk-is-reusable': itemBundle?.id === 'from_library',
-                'bk-is-fragment': itemBundle?.id === 'blokkli_fragment',
-              }"
+  'is-open': showDropdown,
+  'is-interactive': shouldRenderButton,
+  'bk-is-reusable': itemBundle?.id === 'from_library',
+  'bk-is-fragment': itemBundle?.id === 'blokkli_fragment'
+}"
               @click.prevent="showDropdown = !showDropdown"
             >
               <div class="bk-blokkli-item-actions-title-icon">
@@ -66,224 +63,182 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   watch,
   ref,
   computed,
   useBlokkli,
   onMounted,
-  onBeforeUnmount,
-} from '#imports'
-import { onlyUnique, findIdealRectPosition, falsy } from '#blokkli/helpers'
-import type { Rectangle, PluginMountEvent } from '#blokkli/types'
-import { ItemIcon, Icon } from '#blokkli/components'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { getFragmentDefinition } from '#blokkli-build/definitions'
-
-const { selection, $t, types, state, ui, dom } = useBlokkli()
-
+  onBeforeUnmount
+} from "#imports";
+import { onlyUnique, findIdealRectPosition, falsy } from "#blokkli/helpers";
+import { ItemIcon, Icon } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const { selection, $t, types, state, ui, dom, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
-  () =>
-    state.editMode.value === 'editing' ||
-    state.editMode.value === 'translating',
-)
-
-const ACTIONS_HEIGHT = 50
-
-const el = ref<HTMLDivElement | null>(null)
-
-const controlsEl = ref<HTMLElement | null>(null)
-const mountedPlugins = ref<PluginMountEvent[]>([])
-const showDropdown = ref(false)
-
+  () => state.editMode.value === "editing" || state.editMode.value === "translating"
+);
+const ACTIONS_HEIGHT = 52;
+const el = ref(null);
+const controlsEl = ref(null);
+const mountedPlugins = ref([]);
+const showDropdown = ref(false);
 watch(selection.blocks, () => {
-  showDropdown.value = false
-})
-
+  showDropdown.value = false;
+});
 const bundleIcon = computed(() => {
-  if (itemBundle.value?.id === 'from_library') {
-    const reusableBundle = selection.blocks.value[0]?.reusableBundle
+  if (itemBundle.value?.id === "from_library") {
+    const reusableBundle = selection.blocks.value[0]?.reusableBundle;
     if (reusableBundle) {
-      return reusableBundle
+      return reusableBundle;
     }
   }
-
-  return itemBundle.value?.id
-})
-
+  return itemBundle.value?.id;
+});
 const title = computed(() => {
   if (ui.transformLabel.value) {
-    return ui.transformLabel.value
+    return ui.transformLabel.value;
+  }
+  if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
   }
   if (itemBundle.value) {
-    if (itemBundle.value.id === 'blokkli_fragment') {
-      const fragments = selection.uuids.value
-        .map((uuid) => {
-          const item = state.getFieldListItem(uuid)
-          if (!item) {
-            return
-          }
-          const name = item.props?.name
-          if (!name) {
-            return
-          }
-          const definition = getFragmentDefinition(name)
-          return definition?.label
-        })
-        .filter(falsy)
-
+    if (itemBundle.value.id === "blokkli_fragment") {
+      const fragments = selection.uuids.value.map((uuid) => {
+        const item = state.getFieldListItem(uuid);
+        if (!item) {
+          return;
+        }
+        const name = item.props?.name;
+        if (!name) {
+          return;
+        }
+        const definition = definitions.getFragmentDefinition(name);
+        return definition?.label;
+      }).filter(falsy);
       if (fragments.length && fragments.length < 3) {
-        return fragments.join(', ')
+        return fragments.join(", ");
       }
-    } else if (itemBundle.value.id === 'from_library') {
-      const title = selection.blocks.value[0]?.editTitle
-      if (title) {
-        return title
+    } else if (itemBundle.value.id === "from_library") {
+      const title2 = selection.blocks.value[0]?.editTitle;
+      if (title2) {
+        return title2;
       }
     }
-    return itemBundle.value.label
+    return itemBundle.value.label;
   }
-
-  return $t('multipleItemsLabel', 'Items')
-})
-
-const itemBundleIds = computed(() =>
-  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
-)
-
+  return $t("multipleItemsLabel", "Items");
+});
+const itemBundleIds = computed(
+  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
+);
 const itemBundle = computed(() => {
   if (itemBundleIds.value.length !== 1) {
-    return
+    return;
   }
-  const bundle = itemBundleIds.value[0]
-  return types.getBlockBundleDefinition(bundle)
-})
-
-const limitPlacedRect = (rect: Rectangle, padding: Rectangle): Rectangle => {
+  const bundle = itemBundleIds.value[0];
+  return types.getBlockBundleDefinition(bundle);
+});
+const limitPlacedRect = (rect, padding) => {
   return {
     width: rect.width,
     height: rect.height,
     x: Math.min(
       Math.max(rect.x, padding.x),
-      padding.x + padding.width - rect.width,
+      padding.x + padding.width - rect.width
     ),
     y: Math.min(
       Math.max(padding.y, rect.y),
-      padding.height + padding.y - rect.height,
-    ),
-  }
-}
-
-let scrollWidth = 0
-
+      padding.height + padding.y - rect.height
+    )
+  };
+};
+let scrollWidth = 0;
 const observer = new ResizeObserver((entries) => {
-  const size = entries[0]?.contentBoxSize?.[0]
+  const size = entries[0]?.contentBoxSize?.[0];
   if (!size) {
-    return
+    return;
   }
-
-  scrollWidth = size.inlineSize
-})
-
+  scrollWidth = size.inlineSize;
+});
 onMounted(() => {
   if (controlsEl.value) {
-    observer.observe(controlsEl.value)
+    observer.observe(controlsEl.value);
   }
-})
-
+});
 onBeforeUnmount(() => {
   if (controlsEl.value) {
-    observer.unobserve(controlsEl.value)
-    observer.disconnect()
+    observer.unobserve(controlsEl.value);
+    observer.disconnect();
   }
-})
-
-onBlokkliEvent('canvas:draw', () => {
-  if (
-    !selection.blocks.value.length ||
-    ui.isMobile.value ||
-    selection.isChangingOptions.value
-  ) {
-    return
+});
+onBlokkliEvent("canvas:draw", () => {
+  if (!selection.blocks.value.length || ui.isMobile.value || selection.isChangingOptions.value) {
+    return;
   }
-
-  let minX = 0
-  let minY = 0
-  const rects = selection.uuids.value
-    .map((uuid) => dom.getBlockRect(uuid))
-    .filter(falsy)
-
+  let minX = 0;
+  let minY = 0;
+  const rects = selection.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy);
   if (!rects.length) {
-    return
+    return;
   }
-
-  const offset = ui.artboardOffset.value
-  const scale = ui.artboardScale.value
-
+  const offset = ui.artboardOffset.value;
+  const scale = ui.artboardScale.value;
   for (let i = 0; i < rects.length; i++) {
-    const { x, y } = rects[i]
-    const rectX = (x + offset.x / scale) * scale
-    const rectY = (y + offset.y / scale) * scale
+    const { x, y } = rects[i];
+    const rectX = (x + offset.x / scale) * scale;
+    const rectY = (y + offset.y / scale) * scale;
     if (i === 0 || rectX < minX) {
-      minX = rectX
+      minX = rectX;
     }
     if (i === 0 || rectY < minY) {
-      minY = rectY
+      minY = rectY;
     }
   }
-
-  const padding = ui.visibleViewportPadded.value
+  const padding = ui.visibleViewportPadded.value;
   const rect = limitPlacedRect(
     {
       x: minX - 5 * Math.min(scale, 1),
       y: minY - ACTIONS_HEIGHT - 15 * Math.min(scale, 1),
       width: scrollWidth,
-      height: ACTIONS_HEIGHT,
+      height: ACTIONS_HEIGHT
     },
-    padding,
-  )
-
+    padding
+  );
   const ideal = findIdealRectPosition(
     ui.viewportBlockingRects.value,
     rect,
-    padding,
-  )
-
+    padding
+  );
   if (el.value) {
-    el.value.style.transform = ui.isMobile.value
-      ? ''
-      : `translate3d(${ideal.x}px, ${ideal.y}px, 0)`
+    el.value.style.transform = ui.isMobile.value ? "" : `translate3d(${ideal.x}px, ${ideal.y}px, 0)`;
   }
-})
-
-const shouldRenderButton = computed(() =>
-  mountedPlugins.value.some((v) => v.isRendering),
-)
-
-onBlokkliEvent('plugin:mount', (e) => {
-  if (e.type !== 'ItemDropdown') {
-    return
+});
+const shouldRenderButton = computed(
+  () => mountedPlugins.value.some((v) => v.isRendering)
+);
+onBlokkliEvent("plugin:mount", (e) => {
+  if (e.type !== "ItemDropdown") {
+    return;
   }
-  mountedPlugins.value.push(e as any)
-})
-
-onBlokkliEvent('plugin:unmount', (e) => {
-  if (e.type !== 'ItemDropdown') {
-    return
+  mountedPlugins.value.push(e);
+});
+onBlokkliEvent("plugin:unmount", (e) => {
+  if (e.type !== "ItemDropdown") {
+    return;
   }
-  mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id)
-})
-
-watch(ui.isTransforming, function (isTransforming) {
+  mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id);
+});
+watch(ui.isTransforming, function(isTransforming) {
   if (isTransforming) {
-    showDropdown.value = false
+    showDropdown.value = false;
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ItemActions',
-}
+  name: "ItemActions"
+};
 </script>

package/dist/runtime/components/Edit/Actions/index.vue.d.ts

@@ -0,0 +1,2 @@
+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;