@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/BlokkliProvider.vue

@@ -1,40 +1,43 @@
 <template>
   <div
+    ref="providerEl"
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
     :data-provider-entity-bundle="entityBundle"
-    :data-blokkli-provider-active="isInEditor || void 0"
+    :data-blokkli-provider-active="isInEditor ? 'true' : 'false'"
   >
     <BlokkliErrorBoundary v-if="isInEditor">
       <PreviewProvider
         v-if="isPreviewing"
         v-slot="{ mutatedEntity }"
-        :entity="entity"
-        :entity-type="entityType"
-        :entity-uuid="entityUuid"
-        :entity-bundle="entityBundle"
-        :language="language"
+        :entity
+        :entity-type
+        :entity-uuid
+        :entity-bundle
+        :language
       >
         <slot
           :entity="mutatedEntity"
-          :is-editing="isEditing"
-          :can-edit="canEdit"
+          :is-editing
+          :can-edit
           :is-preview="isPreviewing"
         />
       </PreviewProvider>
       <EditProvider
-        v-else-if="isEditing && shouldRender"
+        v-else-if="isEditing && shouldRender && providerEl"
         v-slot="{ mutatedEntity }"
-        :entity="entity"
-        :entity-type="entityType"
-        :entity-uuid="entityUuid"
-        :entity-bundle="entityBundle"
-        :language="language"
-        :isolate="isolate"
+        :provider-el
+        :entity
+        :entity-type
+        :entity-uuid
+        :entity-bundle
+        :language
+        :isolate
+        :permissions
       >
         <slot
-          :is-editing="isEditing"
-          :can-edit="canEdit"
+          :is-editing
+          :can-edit
           :is-preview="isPreviewing"
           :entity="mutatedEntity"
         />
@@ -43,18 +46,22 @@
 
     <slot
       v-else
-      :is-editing="isEditing"
-      :can-edit="canEdit"
+      :is-editing
+      :can-edit
       :is-preview="isPreviewing"
       :entity="entity"
     />
 
-    <EditIndicator
-      v-if="showIndicator"
-      :uuid="entityUuid"
-      :edit-label="editLabel"
-      @edit="edit"
-    />
+    <ClientOnly>
+      <EditIndicator
+        v-if="showIndicator"
+        :uuid="entityUuid"
+        :entity-type
+        :edit-label
+        :permissions
+        @edit="edit"
+      />
+    </ClientOnly>
   </div>
 </template>
 
@@ -66,13 +73,28 @@ import {
   useRouter,
   provide,
   ref,
-  onMounted
+  onMounted,
+  useTemplateRef
 } from "#imports";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
+const props = defineProps({
+  entityType: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  entityUuid: { type: String, 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 },
+  hostOptions: { type: Object, required: false, default: void 0 },
+  permissions: { type: Array, required: false, default: () => [] },
+  isolate: { type: Boolean, required: false },
+  entity: { type: null, required: false, default: void 0 }
+});
 defineSlots();
+const providerEl = useTemplateRef("providerEl");
 const PreviewProvider = defineAsyncComponent(
   () => import("./Edit/PreviewProvider.vue")
 );
@@ -87,30 +109,20 @@ const EditIndicator = defineAsyncComponent(
 );
 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)
 );
+const canEdit = computed(() => props.permissions.includes("edit"));
+const canUseBlokkli = computed(() => !!props.permissions.length);
 const isEditing = computed(
-  () => props.canEdit && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
+  () => canUseBlokkli.value && !!props.entityUuid && route.query.blokkliEditing === props.entityUuid
 );
 const isPreviewing = computed(
   () => !!props.entityUuid && route.query.blokkliPreview === props.entityUuid
 );
 const showIndicator = computed(
-  () => props.canEdit && !route.query.blokkliEditing && !route.query.blokkliPreview
+  () => !!props.permissions.length && !route.query.blokkliEditing && !route.query.blokkliPreview
 );
 function edit() {
   router.push({
@@ -131,12 +143,15 @@ const blokkliProviderEntityContext = computed(
     };
   }
 );
-provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext);
-provide(INJECT_ENTITY_CONTEXT, {
-  uuid: props.entityUuid,
-  type: props.entityType,
-  bundle: props.entityBundle
+const entityContext = computed(() => {
+  return {
+    uuid: props.entityUuid,
+    type: props.entityType,
+    bundle: props.entityBundle
+  };
 });
+provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext);
+provide(INJECT_ENTITY_CONTEXT, entityContext.value);
 onMounted(() => {
   shouldRender.value = true;
 });

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

@@ -1,19 +1,57 @@
-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;
+import type { EditPermission } from '#blokkli/types';
+declare const _default: <T>(__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> & ({
+        /**
+         * The entity type.
+         */
         entityType: string;
+        /**
+         * The entity bundle.
+         */
         entityBundle: string;
+        /**
+         * The entity UUID.
+         */
         entityUuid: string;
-        canEdit: boolean;
+        /**
+         * The tag to use for the root element.
+         */
         tag?: string;
+        /**
+         * The current language code.
+         */
         language?: string;
+        /**
+         * The override label for the edit button.
+         */
         editLabel?: string;
+        /**
+         * The path to use to open the editor. Defaults to the current route.path value.
+         */
         editPath?: string;
         /**
-         * When set to true, during editing, everything except the provider element will be hidden.
+         * The host options as a key value object.
+         */
+        hostOptions?: Record<string, any>;
+        /**
+         * The edit permissions.
+         */
+        permissions?: EditPermission[];
+        /**
+         * Whether to isolate the provider element during editing.
          */
         isolate?: boolean;
-    } & Partial<{}>> & import("vue").PublicProps;
+    } & ({
+        /**
+         * The entity data. Will be merged with the mutatedEntity data during editing.
+         */
+        entity: T;
+    } | {
+        /**
+         * The entity data. Will be merged with the mutatedEntity data during editing.
+         */
+        entity?: never;
+    })) & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
@@ -21,7 +59,7 @@ declare const _default: <T extends object>(__VLS_props: NonNullable<Awaited<type
             isEditing: boolean;
             canEdit: boolean;
             isPreview: boolean;
-            entity?: T | undefined;
+            entity: T;
         }): any;
     };
     emit: {};

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

@@ -3,7 +3,7 @@
     <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.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasTooltipOpen.value
 "
         ref="el"
         class="bk-blokkli-item-actions-inner"
@@ -20,7 +20,6 @@
             <button
               class="bk-blokkli-item-actions-type-button"
               :disabled="!shouldRenderButton"
-              :title="title"
               :class="{
   'is-open': showDropdown,
   'is-interactive': shouldRenderButton,
@@ -29,18 +28,35 @@
 }"
               @click.prevent="showDropdown = !showDropdown"
             >
-              <div class="bk-blokkli-item-actions-title-icon">
+              <div v-if="shouldRenderButton" class="bk-tooltip">
+                {{ $t("actionsDropdownToolip", "Further actions") }}
+              </div>
+              <div
+                v-show="!hasSelectedHost"
+                class="bk-blokkli-item-actions-title-icon"
+              >
                 <Icon v-if="ui.isTransforming.value" name="loader" />
                 <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
                 <Icon v-else name="selection" />
+                <div
+                  v-if="itemBundle?.id === 'from_library'"
+                  class="bk-blokkli-item-actions-title-icon-reusable"
+                >
+                  <Icon name="reusable" />
+                </div>
               </div>
               <span class="bk-blokkli-item-actions-title-label">{{
                 title
               }}</span>
               <span
-                v-if="selection.blocks.value.length > 1"
+                v-if="selection.items.value.length > 1"
                 class="bk-blokkli-item-actions-title-count"
-                >{{ selection.blocks.value.length }}</span
+                >{{ selection.items.value.length }}</span
+              >
+              <span
+                v-show="selectedIsNew"
+                class="bk-blokkli-item-actions-title-pill"
+                >{{ $t("selectedIsNew", "New") }}</span
               >
               <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
             </button>
@@ -51,9 +67,8 @@
             />
           </div>
 
-          <div id="bk-blokkli-item-actions-after" />
-
           <div
+            v-show="!selection.hasHostSelected.value"
             id="bk-blokkli-item-actions"
             class="bk-blokkli-item-actions-buttons"
           />
@@ -70,37 +85,58 @@ import {
   computed,
   useBlokkli,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  useTemplateRef
 } from "#imports";
-import { onlyUnique, findIdealRectPosition, falsy } from "#blokkli/helpers";
+import { 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 } = useBlokkli();
+import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
-const el = ref(null);
+let scrollWidth = 0;
+const el = useTemplateRef("el");
+const { shouldRender } = useStickyToolbar(el, {
+  getPlacementY: () => "top",
+  shouldUpdate: () => !selection.isChangingOptions.value,
+  getHeight: () => ACTIONS_HEIGHT,
+  getWidth: () => scrollWidth,
+  getMargin: () => 20,
+  allowHorizontalOverflow: true
+});
 const controlsEl = ref(null);
 const mountedPlugins = ref([]);
 const showDropdown = ref(false);
-watch(selection.blocks, () => {
+const hasAnythingSelected = computed(
+  () => selection.hasHostSelected.value || !!selection.items.value.length
+);
+watch(selection.items, () => {
+  showDropdown.value = false;
+});
+watch(selection.hasHostSelected, () => {
   showDropdown.value = false;
 });
 const bundleIcon = computed(() => {
   if (itemBundle.value?.id === "from_library") {
-    const reusableBundle = selection.blocks.value[0]?.reusableBundle;
+    const reusableBundle = selection.items.value[0]?.library?.reusableBundle;
     if (reusableBundle) {
       return reusableBundle;
     }
   }
   return itemBundle.value?.id;
 });
+const hasSelectedHost = computed(() => {
+  return selection.items.value.length === 0;
+});
 const title = computed(() => {
   if (ui.transformLabel.value) {
     return ui.transformLabel.value;
-  }
-  if (itemBundle.value) {
+  } else if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+    return selection.uuids.value[0];
+  } else if (itemBundle.value) {
     if (itemBundle.value.id === "blokkli_fragment") {
       const fragments = selection.uuids.value.map((uuid) => {
         const item = state.getFieldListItem(uuid);
@@ -118,40 +154,34 @@ const title = computed(() => {
         return fragments.join(", ");
       }
     } else if (itemBundle.value.id === "from_library") {
-      const title2 = selection.blocks.value[0]?.editTitle;
+      const title2 = selection.items.value[0]?.library?.label;
       if (title2) {
         return title2;
       }
     }
     return itemBundle.value.label;
+  } else if (!selection.items.value.length) {
+    return state.entity.value.label;
   }
   return $t("multipleItemsLabel", "Items");
 });
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
+const selectedIsNew = computed(() => {
+  if (selection.uuids.value.length !== 1) {
+    return false;
+  }
+  const uuid = selection.uuids.value[0];
+  if (!uuid) {
+    return false;
+  }
+  return !!state.getFieldListItem(uuid)?.editContext?.isNew;
+});
 const itemBundle = computed(() => {
-  if (itemBundleIds.value.length !== 1) {
+  if (selection.bundles.value.length !== 1) {
     return;
   }
-  const bundle = itemBundleIds.value[0];
+  const bundle = selection.bundles.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
-    ),
-    y: Math.min(
-      Math.max(padding.y, rect.y),
-      padding.height + padding.y - rect.height
-    )
-  };
-};
-let scrollWidth = 0;
 const observer = new ResizeObserver((entries) => {
   const size = entries[0]?.contentBoxSize?.[0];
   if (!size) {
@@ -170,48 +200,6 @@ onBeforeUnmount(() => {
     observer.disconnect();
   }
 });
-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);
-  if (!rects.length) {
-    return;
-  }
-  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;
-    if (i === 0 || rectX < minX) {
-      minX = rectX;
-    }
-    if (i === 0 || rectY < minY) {
-      minY = rectY;
-    }
-  }
-  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
-    },
-    padding
-  );
-  const ideal = findIdealRectPosition(
-    ui.viewportBlockingRects.value,
-    rect,
-    padding
-  );
-  if (el.value) {
-    el.value.style.transform = ui.isMobile.value ? "" : `translate3d(${ideal.x}px, ${ideal.y}px, 0)`;
-  }
-});
 const shouldRenderButton = computed(
   () => mountedPlugins.value.some((v) => v.isRendering)
 );
@@ -227,6 +215,9 @@ onBlokkliEvent("plugin:unmount", (e) => {
   }
   mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id);
 });
+onBlokkliEvent("action:selected", () => {
+  showDropdown.value = false;
+});
 watch(ui.isTransforming, function(isTransforming) {
   if (isTransforming) {
     showDropdown.value = false;

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

@@ -16,10 +16,7 @@
 ]"
   >
     <div class="bk-list-item-inner">
-      <div class="bk-list-item-icon">
-        <Icon v-if="icon" :name="icon" />
-        <ItemIcon v-else-if="bundle" :bundle="bundle" />
-      </div>
+      <AddListItemIcon :orientation :color :bundle :icon />
       <div
         class="bk-list-item-label"
         :class="{
@@ -45,7 +42,7 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import { ItemIcon, Icon } from "#blokkli/components";
+import { ItemIcon, Icon, AddListItemIcon } from "#blokkli/components";
 import { PluginContextMenu } from "#blokkli/plugins";
 const { ui, storage, $t } = useBlokkli();
 const props = defineProps({

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

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     noContextMenu?: boolean;
 }> & Readonly<{}>, {
     bundle: string;
-    color: "rose" | "lime" | "default" | "yellow" | "accent";
     icon: BlokkliIcon;
+    color: "rose" | "lime" | "default" | "yellow" | "accent";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="bk-list-item-icon"
+    :class="['bk-is-' + color, 'bk-is-' + orientation]"
+  >
+    <Icon v-if="icon" :name="icon" />
+    <ItemIcon v-else-if="bundle" :bundle="bundle" />
+  </div>
+</template>
+
+<script setup>
+import { ItemIcon, Icon } from "#blokkli/components";
+defineProps({
+  icon: { type: null, required: false, default: void 0 },
+  bundle: { type: String, required: false, default: void 0 },
+  color: { type: String, required: false, default: "default" },
+  orientation: { type: String, required: false, default: "horizontal" }
+});
+</script>

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

@@ -0,0 +1,15 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { AddListOrientation } from '#blokkli/types';
+type __VLS_Props = {
+    icon?: BlokkliIcon;
+    bundle?: string;
+    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
+    orientation?: AddListOrientation;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bundle: string;
+    icon: BlokkliIcon;
+    color: "rose" | "lime" | "default" | "yellow" | "accent";
+    orientation: AddListOrientation;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;