@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -0,0 +1,102 @@
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { FieldListItem } from '#blokkli/types';
+import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { FieldDropAlignment } from '#blokkli/types/field';
+import type { VueClassProp } from '#blokkli/types/vue';
+type __VLS_Props = {
+    /**
+     * The name of the field.
+     */
+    name: string;
+    /**
+     * The field list items. Can be an array or a single item, also allows nullable values in an array.
+     */
+    list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    /**
+     * The tag to use for rendering the root element.
+     */
+    tag?: string;
+    /**
+     * The field list types. The available types can be defined in the "fieldListTypes" module option.
+     */
+    fieldListType?: ValidFieldListTypes;
+    /**
+     * If true, the field list items are only rendered in edit mode.
+     * In normal mode, you are responsible yourself to render the items.
+     */
+    editOnly?: boolean;
+    /**
+     * The classes to render for the list. Same as passing classes via the :class prop.
+     */
+    listClass?: VueClassProp;
+    /**
+     * Classes only applied during editing.
+     */
+    editClass?: VueClassProp;
+    /**
+     * Classes to apply if the field is not empty.
+     */
+    nonEmptyClass?: string;
+    /**
+     * Define which fragments are allowed in this field.
+     *
+     * Note that this is only used during editing. It defines which fragments
+     * can be added here. If you change this prop but there are existing
+     * fragments already in the field list, they will continue to be rendered.
+     *
+     * Note that in addition, also the "blokkli_fragment" block must be allowed
+     * as a bundle in this field.
+     */
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    /**
+     * Force an alignment during drag and drop interactions.
+     */
+    dropAlignment?: FieldDropAlignment;
+    /**
+     * The z-index of this field, used to resolve overlapping blocks at the same
+     * nesting level. Higher values take priority. Default is 0.
+     */
+    zIndex?: number | string;
+    /**
+     * Renders proxy blocks during editing.
+     *
+     * Doing this will *not* render the actual block components.
+     *
+     * During editing, a separate element is rendered with "position: absolute"
+     * that contains "proxy blocks" for drag and drop interactions. This means
+     * that you need to have a wrapper somewhere with "position: relative".
+     */
+    proxyMode?: boolean;
+    /**
+     * Determine whether an item should be rendered.
+     */
+    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
+};
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
+    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
+    listClass: VueClassProp;
+    editClass: VueClassProp;
+    nonEmptyClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/BlokkliField.vue

@@ -4,23 +4,24 @@
     :is="DraggableList"
     v-if="DraggableList && isEditing && canEdit && !isInReusable && entity"
     :list="filteredList"
-    :name="name"
-    :entity="entity"
-    :field-key="fieldKey"
-    :allowed-fragments="allowedFragments"
-    :nesting-level="nestingLevel"
-    :drop-alignment="dropAlignment"
-    :field-list-type="fieldListType"
+    :name
+    :entity
+    :field-key
+    :allowed-fragments
+    :nesting-level
+    :drop-alignment
+    :field-list-type
     :class="[
   attrs.class,
   listClass,
   editClass,
   { [nonEmptyClass]: filteredList.length }
 ]"
-    :is-nested="isNested"
+    :is-nested
+    :z-index
     :language="providerEntity?.language"
-    :proxy-mode="proxyMode"
-    :tag="tag"
+    :proxy-mode
+    :tag
     :global-proxy-mode="!!isGlobalProxyMode"
     :should-render-item="shouldRenderItem"
   />
@@ -42,7 +43,7 @@
       :key="item.uuid + fieldListType"
       v-bind="item"
       :parent-type="isNested ? entity?.bundle : ''"
-      :data-uuid="isPreview ? item.uuid : void 0"
+      :data-bk-uuid="isPreview ? item.uuid : void 0"
       :index="i"
     />
   </component>
@@ -50,18 +51,13 @@
 </template>
 
 <script setup>
-import {
-  computed,
-  useAttrs,
-  inject,
-  provide,
-  ref
-} from "#imports";
+import { computed, useAttrs, inject, provide, ref } from "#imports";
 import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
 import BlokkliItem from "./BlokkliItem.vue";
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
+  INJECT_FIELD_Z_INDEX,
   INJECT_IS_EDITING,
   INJECT_IS_IN_REUSABLE,
   INJECT_IS_NESTED,
@@ -76,66 +72,56 @@ import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_GLOBAL_PROXY_MODE,
   INJECT_FIELD_USES_PROXY
-} from "../helpers/symbols";
+} from "../helpers/injections";
 if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
   });
 }
-const DraggableList = inject(
-  INJECT_EDIT_FIELD_LIST_COMPONENT,
-  null
-);
+const props = defineProps({
+  name: { type: String, required: true },
+  list: { type: [Array, Object, null], required: false, default: () => [] },
+  tag: { type: String, required: false, default: "div" },
+  fieldListType: { type: null, required: false, default: "default" },
+  editOnly: { type: Boolean, required: false },
+  listClass: { type: [String, Object, Array], required: false, default: "" },
+  editClass: { type: [String, Object, Array], required: false, default: "" },
+  nonEmptyClass: { type: String, required: false, default: "" },
+  allowedFragments: { type: null, required: false, default: () => [] },
+  dropAlignment: { type: String, required: false, default: void 0 },
+  zIndex: { type: [Number, String], required: false, default: 0 },
+  proxyMode: { type: Boolean, required: false },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
+const DraggableList = inject(INJECT_EDIT_FIELD_LIST_COMPONENT, null);
 const attrs = useAttrs();
 defineOptions({
   inheritAttrs: false
 });
 defineSlots();
 const isEditing = inject(INJECT_IS_EDITING, false);
-const isGlobalProxyMode = inject(
-  INJECT_GLOBAL_PROXY_MODE,
-  null
-);
+const isGlobalProxyMode = inject(INJECT_GLOBAL_PROXY_MODE, null);
 const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
 const isPreview = inject(INJECT_IS_PREVIEW, null);
 const isNested = inject(INJECT_IS_NESTED, false);
 const nestingLevel = inject(INJECT_NESTING_LEVEL, 0);
-const mutatedFields = inject(
-  INJECT_MUTATED_FIELDS_MAP,
-  null
-);
+const mutatedFields = inject(INJECT_MUTATED_FIELDS_MAP, null);
 const editContext = inject(INJECT_EDIT_CONTEXT, null);
 const entity = inject(INJECT_ENTITY_CONTEXT);
 if (!entity) {
   throw new Error("Missing entity context.");
 }
-const providerEntity = inject(
-  INJECT_PROVIDER_CONTEXT
-);
+const providerEntity = inject(INJECT_PROVIDER_CONTEXT);
 if (!providerEntity) {
   throw new Error(
     "Missing bl\xF6kkli injection: " + INJECT_PROVIDER_CONTEXT.toString()
   );
 }
-const props = defineProps({
-  name: { type: String, required: true },
-  list: { type: [Array, Object, null], required: false, default: () => [] },
-  tag: { type: String, required: false, default: "div" },
-  fieldListType: { type: null, required: false, default: "default" },
-  editOnly: { type: Boolean, required: false },
-  listClass: { type: String, required: false, default: "" },
-  editClass: { type: String, required: false, default: "" },
-  nonEmptyClass: { type: String, required: false, default: "" },
-  allowedFragments: { type: Array, required: false, default: () => [] },
-  dropAlignment: { type: String, required: false, default: void 0 },
-  proxyMode: { type: Boolean, required: false },
-  shouldRenderItem: { type: Function, required: false, default: void 0 }
-});
 const canEdit = ref(true);
 const fieldKey = computed(() => {
   if (canEdit.value) {
     return entity.uuid + ":" + props.name;
   }
-  return void 0;
+  return "";
 });
 const fieldListType = computed(() => props.fieldListType);
 function filterVisible(item) {
@@ -145,6 +131,9 @@ function filterVisible(item) {
   if (isEditing) {
     return true;
   }
+  if (!item.isVisible) {
+    return false;
+  }
   const isVisible = isVisibleByOptions(item, providerEntity.value.language);
   const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
   return isVisible && isVisibleCustom;
@@ -152,11 +141,12 @@ function filterVisible(item) {
 const filteredList = computed(() => {
   if (mutatedFields && !isInReusable && editContext && fieldKey.value && (isPreview?.value || isEditing)) {
     return ((mutatedFields[fieldKey.value] || {}).list || []).map((v) => {
+      const mutatedOptions = editContext.mutatedOptions[v.uuid] || {};
       return {
         ...v,
         options: {
-          ...v.options
-          // ...mutatedOptions,
+          ...v.options,
+          ...mutatedOptions
         }
       };
     });
@@ -166,6 +156,7 @@ const filteredList = computed(() => {
 });
 provide(INJECT_IS_NESTED, true);
 provide(INJECT_NESTING_LEVEL, nestingLevel + 1);
+provide(INJECT_FIELD_Z_INDEX, Number(props.zIndex));
 provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 provide(INJECT_FIELD_LIST_BLOCKS, filteredList);
 if (props.proxyMode) {

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

@@ -1,27 +1,70 @@
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
 import type { FieldListItem } from '#blokkli/types';
 import type { ValidFieldListTypes, FieldListItemTyped } from '#blokkli-build/generated-types';
-type __VLS_Slots = {
-    default(props: {
-        items: FieldListItemTyped[];
-    }): any;
-    after(props: {
-        items: FieldListItemTyped[];
-    }): any;
-};
+import type { FieldDropAlignment } from '#blokkli/types/field';
+import type { VueClassProp } from '#blokkli/types/vue';
 type __VLS_Props = {
+    /**
+     * The name of the field.
+     */
     name: string;
+    /**
+     * The field list items. Can be an array or a single item, also allows nullable values in an array.
+     */
     list?: Array<FieldListItem | null | undefined> | FieldListItem | null;
+    /**
+     * The tag to use for rendering the root element.
+     */
     tag?: string;
+    /**
+     * The field list types. The available types can be defined in the "fieldListTypes" module option.
+     */
     fieldListType?: ValidFieldListTypes;
+    /**
+     * If true, the field list items are only rendered in edit mode.
+     * In normal mode, you are responsible yourself to render the items.
+     */
     editOnly?: boolean;
-    listClass?: string;
-    editClass?: string;
+    /**
+     * The classes to render for the list. Same as passing classes via the :class prop.
+     */
+    listClass?: VueClassProp;
+    /**
+     * Classes only applied during editing.
+     */
+    editClass?: VueClassProp;
+    /**
+     * Classes to apply if the field is not empty.
+     */
     nonEmptyClass?: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
+    /**
+     * Define which fragments are allowed in this field.
+     *
+     * Note that this is only used during editing. It defines which fragments
+     * can be added here. If you change this prop but there are existing
+     * fragments already in the field list, they will continue to be rendered.
+     *
+     * Note that in addition, also the "blokkli_fragment" block must be allowed
+     * as a bundle in this field.
+     */
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    /**
+     * Force an alignment during drag and drop interactions.
+     */
+    dropAlignment?: FieldDropAlignment;
+    /**
+     * The z-index of this field, used to resolve overlapping blocks at the same
+     * nesting level. Higher values take priority. Default is 0.
+     */
+    zIndex?: number | string;
     /**
      * Renders proxy blocks during editing.
+     *
+     * Doing this will *not* render the actual block components.
+     *
+     * During editing, a separate element is rendered with "position: absolute"
+     * that contains "proxy blocks" for drag and drop interactions. This means
+     * that you need to have a wrapper somewhere with "position: relative".
      */
     proxyMode?: boolean;
     /**
@@ -29,18 +72,28 @@ type __VLS_Props = {
      */
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
-    fieldListType: ValidFieldListTypes;
-    allowedFragments: BlokkliFragmentName[];
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     tag: string;
-    dropAlignment: "vertical" | "horizontal";
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
+    list: Array<FieldListItem | null | undefined> | FieldListItem | null;
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-    listClass: string;
-    editClass: string;
+    listClass: VueClassProp;
+    editClass: VueClassProp;
     nonEmptyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,31 @@
+import type { BlockEditContext } from '#blokkli/types/field';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid: string;
+    bundle: string;
+    isVisible?: boolean;
+    options?: any;
+    editContext?: BlockEditContext;
+    props?: any;
+    index?: number;
+    parentType?: string;
+    isEditing?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    bundle: string;
+    isVisible?: boolean;
+    options?: any;
+    editContext?: BlockEditContext;
+    props?: any;
+    index?: number;
+    parentType?: string;
+    isEditing?: boolean;
+}> & Readonly<{}>, {
+    isEditing: boolean;
+    props: any;
+    parentType: string;
+    options: any;
+    editContext: BlockEditContext;
+    index: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliItem.vue

@@ -2,68 +2,99 @@
   <Component
     :is="component"
     v-if="isProxyMode || isGlobalProxyMode"
+    :key="'component_' + renderKey"
     :bundle="bundle"
     :uuid="uuid"
     :field-list-type="fieldListType"
     :parent-type="parentType"
-    :item-props="props"
+    :item-props
   />
   <Component
     :is="component"
     v-else-if="component"
-    v-bind="props"
-    :data-bk-in-proxy="fieldUsesProxy || void 0"
+    v-bind="itemProps"
+    :key="'proxy_' + renderKey"
+    :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
+  />
+  <Component
+    :is="blockNotImplemented"
+    v-else-if="isEditingComponent && blockNotImplemented"
+    :uuid
+    :bundle
   />
-  <div v-else-if="isEditing">Block not implemented</div>
 </template>
 
 <script setup>
 import {
   computed,
   provide,
-  useRuntimeConfig,
   inject,
   defineAsyncComponent,
+  ref,
   getCurrentInstance,
-  onMounted
+  onMounted,
+  onBeforeUnmount
 } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
+  INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_BLOCK_ITEM,
+  INJECT_EDIT_CONTEXT,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
   INJECT_FIELD_PROXY_MODE,
   INJECT_FIELD_USES_PROXY,
-  INJECT_GLOBAL_PROXY_MODE
-} from "../helpers/symbols";
-const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
+  INJECT_GLOBAL_PROXY_MODE,
+  INJECT_ITEM_PROPS_OVERRIDE,
+  INJECT_PROVIDER_TYPE
+} from "../helpers/injections";
+import { fragmentBlockBundle, itemEntityType } from "#blokkli-build/config";
 const componentProps = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
-  isNew: { type: Boolean, required: false },
+  isVisible: { type: Boolean, required: false },
   options: { type: null, required: false, default: () => ({}) },
+  editContext: { type: Object, required: false, default: void 0 },
   props: { type: null, required: false, default: () => ({}) },
   index: { type: Number, required: false, default: 0 },
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });
-const instance = componentProps.isEditing ? getCurrentInstance() : null;
+const renderKey = ref(0);
+const isEditingComponent = import.meta.blokkliEditing;
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
+const mutatedItemProps = inject(INJECT_ITEM_PROPS_OVERRIDE, null);
+const allComponentsChunk = inject(INJECT_ALL_COMPONENTS_CHUNK, null);
 const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
-const isGlobalProxyMode = inject(
-  INJECT_GLOBAL_PROXY_MODE,
-  null
-);
-const fieldListType = inject(
-  INJECT_FIELD_LIST_TYPE,
-  void 0
-);
-const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent(() => import("./Edit/BlockProxy/index.vue")) : getComponent(
+const isGlobalProxyMode = inject(INJECT_GLOBAL_PROXY_MODE, null);
+const fieldListType = inject(INJECT_FIELD_LIST_TYPE, void 0);
+const providerType = inject(INJECT_PROVIDER_TYPE, void 0);
+const editingContext = inject(INJECT_EDIT_CONTEXT, null);
+const itemProps = computed(() => {
+  if (mutatedItemProps && componentProps.isEditing) {
+    const mutatedProps = mutatedItemProps[componentProps.uuid];
+    if (mutatedProps) {
+      return {
+        ...componentProps.props,
+        ...mutatedProps
+      };
+    }
+  }
+  return componentProps.props;
+});
+const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent(
+  () => import("./../editor/components/BlockProxy/index.vue")
+) : getComponent(
   "block",
   componentProps.bundle,
-  fieldListType?.value || "default",
-  componentProps.parentType
+  {
+    fieldListType: fieldListType?.value || "default",
+    parentBundle: componentProps.parentType,
+    providerType
+  },
+  allComponentsChunk
 );
+const blockNotImplemented = isEditingComponent ? defineAsyncComponent(() => import("./Blocks/NotImplemented/index.vue")) : null;
 const index = computed(() => componentProps.index);
 const item = computed(() => ({
   index,
@@ -71,7 +102,7 @@ const item = computed(() => ({
   options: componentProps.options || {},
   isEditing: componentProps.isEditing,
   parentType: componentProps.parentType,
-  fragmentName: componentProps.bundle === "blokkli_fragment" ? componentProps.props?.name : void 0
+  fragmentName: componentProps.bundle === fragmentBlockBundle ? componentProps.props?.name : void 0
 }));
 provide(INJECT_BLOCK_ITEM, item);
 provide(INJECT_ENTITY_CONTEXT, {
@@ -79,6 +110,22 @@ provide(INJECT_ENTITY_CONTEXT, {
   type: itemEntityType,
   bundle: componentProps.bundle
 });
+if (isEditingComponent && editingContext) {
+  const instance = getCurrentInstance();
+  if (instance) {
+    let onForceRerender = function(uuids) {
+      if (uuids.includes(componentProps.uuid)) {
+        renderKey.value++;
+      }
+    };
+    onMounted(() => {
+      editingContext.eventBus.on("block:rerender", onForceRerender);
+    });
+    onBeforeUnmount(() => {
+      editingContext.eventBus.off("block:rerender", onForceRerender);
+    });
+  }
+}
 </script>
 
 <script>

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

@@ -1,8 +1,12 @@
-declare const _default: import("vue").DefineComponent<{
+import type { BlockEditContext } from '#blokkli/types/field';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
+    isVisible?: boolean;
     options?: any;
+    editContext?: BlockEditContext;
     props?: any;
     index?: number;
     parentType?: string;
@@ -10,17 +14,18 @@ declare const _default: import("vue").DefineComponent<{
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
+    isVisible?: boolean;
     options?: any;
+    editContext?: BlockEditContext;
     props?: any;
     index?: number;
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
-    index: number;
-    options: any;
-    parentType: string;
     isEditing: boolean;
     props: any;
+    parentType: string;
+    options: any;
+    editContext: BlockEditContext;
+    index: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;