@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/runtime/components/BlokkliProvider.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="providerEl"
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
     :data-provider-entity-bundle="entityBundle"
@@ -9,32 +10,34 @@
       <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,15 @@ import {
   useRouter,
   provide,
   ref,
-  onMounted
+  onMounted,
+  useTemplateRef
 } from "#imports";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols";
 defineSlots();
+const providerEl = useTemplateRef("providerEl");
 const PreviewProvider = defineAsyncComponent(
   () => import("./Edit/PreviewProvider.vue")
 );
@@ -92,26 +101,30 @@ const props = defineProps({
   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 },
   hostOptions: { type: null, required: false, default: void 0 },
+  permissions: { type: Array, required: false, default: () => {
+    return [];
+  } },
   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({

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

@@ -1,15 +1,16 @@
+import type { EditPermission } from '#blokkli/types';
 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;
         hostOptions?: any;
+        permissions?: EditPermission[];
         /**
          * When set to true, during editing, everything except the provider element will be hidden.
          */

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.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasAddTooltipOpen.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,
@@ -39,14 +38,25 @@
                 <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>
@@ -57,10 +67,8 @@
             />
           </div>
 
-          <div id="bk-blokkli-item-actions-after" />
-
           <div
-            v-show="selection.blocks.value.length"
+            v-show="!selection.hasHostSelected.value"
             id="bk-blokkli-item-actions"
             class="bk-blokkli-item-actions-buttons"
           />
@@ -80,7 +88,7 @@ import {
   onBeforeUnmount,
   useTemplateRef
 } from "#imports";
-import { onlyUnique, falsy } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
@@ -96,15 +104,16 @@ const { shouldRender } = useStickyToolbar(el, {
   shouldUpdate: () => !selection.isChangingOptions.value,
   getHeight: () => ACTIONS_HEIGHT,
   getWidth: () => scrollWidth,
-  getMargin: () => 20
+  getMargin: () => 20,
+  allowHorizontalOverflow: true
 });
 const controlsEl = ref(null);
 const mountedPlugins = ref([]);
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
-  () => selection.hasHostSelected.value || !!selection.blocks.value.length
+  () => selection.hasHostSelected.value || !!selection.items.value.length
 );
-watch(selection.blocks, () => {
+watch(selection.items, () => {
   showDropdown.value = false;
 });
 watch(selection.hasHostSelected, () => {
@@ -112,7 +121,7 @@ watch(selection.hasHostSelected, () => {
 });
 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;
     }
@@ -120,7 +129,7 @@ const bundleIcon = computed(() => {
   return itemBundle.value?.id;
 });
 const hasSelectedHost = computed(() => {
-  return selection.blocks.value.length === 0;
+  return selection.items.value.length === 0;
 });
 const title = computed(() => {
   if (ui.transformLabel.value) {
@@ -145,25 +154,32 @@ 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.blocks.value.length) {
+  } 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 observer = new ResizeObserver((entries) => {