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

package/dist/runtime/blokkliPlugins/TourItem/index.vue.d.ts

@@ -4,12 +4,10 @@ type __VLS_Props = {
     text: string;
     selector?: string;
 };
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -30,11 +30,11 @@
 </template>
 
 <script setup>
-import { useBlokkli, computed, ref } from "#imports";
+import { useBlokkli, computed, ref, watch } from "#imports";
 import { ShortcutIndicator, Icon } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const { storage, ui } = useBlokkli();
+const { storage, ui, eventBus } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
@@ -50,7 +50,7 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const storageKey = "view_option_" + props.id;
 const button = ref(null);
-const isActiveStorage = storage.use(storageKey, false);
+const isActiveStorage = storage.use(storageKey, false, true);
 const isActive = computed({
   get() {
     return isActiveStorage.value;
@@ -60,6 +60,9 @@ const isActive = computed({
     emit("update:modelValue", v);
   }
 });
+watch(isActive, () => {
+  eventBus.emit("view-option:toggle", { id: props.id });
+});
 emit("update:modelValue", isActiveStorage.value);
 const title = computed(() => isActive.value ? props.titleOff : props.titleOn);
 const onClick = () => {

package/dist/runtime/blokkliPlugins/ViewOption/index.vue.d.ts

@@ -26,10 +26,11 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
 }> & Readonly<{
     "onUpdate:modelValue"?: ((data: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    icon?: ((props: {}) => any) | undefined;
-    default?: ((props: {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {
         isActive: boolean;
-    }) => any) | undefined;
+    }) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/blokkliPlugins/index.d.ts

@@ -1,12 +1,13 @@
-import PluginMenuButton from './MenuButton/index.vue.js';
+import PluginAddAction from './AddAction/index.vue.js';
+import PluginBlockIndicator from './BlockIndicator/index.vue.js';
+import PluginContextMenu from './ContextMenu/index.vue.js';
+import PluginDebugOverlay from './DebugOverlay/index.vue.js';
+import PluginDroppableEdit from './DroppableEdit/index.vue.js';
 import PluginItemAction from './ItemAction/index.vue.js';
 import PluginItemDropdown from './ItemDropdown/index.vue.js';
+import PluginMenuButton from './MenuButton/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
-import PluginViewOption from './ViewOption/index.vue.js';
-import PluginAddAction from './AddAction/index.vue.js';
-import PluginContextMenu from './ContextMenu/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
-import PluginDroppableEdit from './DroppableEdit/index.vue.js';
-import PluginDebugOverlay from './DebugOverlay/index.vue.js';
-export { PluginMenuButton, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginViewOption, PluginItemDropdown, PluginAddAction, PluginContextMenu, PluginTourItem, PluginDroppableEdit, PluginDebugOverlay, };
+import PluginViewOption from './ViewOption/index.vue.js';
+export { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginDroppableEdit, PluginItemAction, PluginItemDropdown, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/blokkliPlugins/index.js

@@ -1,24 +1,26 @@
-import PluginMenuButton from "./MenuButton/index.vue";
+import PluginAddAction from "./AddAction/index.vue";
+import PluginBlockIndicator from "./BlockIndicator/index.vue";
+import PluginContextMenu from "./ContextMenu/index.vue";
+import PluginDebugOverlay from "./DebugOverlay/index.vue";
+import PluginDroppableEdit from "./DroppableEdit/index.vue";
 import PluginItemAction from "./ItemAction/index.vue";
 import PluginItemDropdown from "./ItemDropdown/index.vue";
+import PluginMenuButton from "./MenuButton/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
-import PluginViewOption from "./ViewOption/index.vue";
-import PluginAddAction from "./AddAction/index.vue";
-import PluginContextMenu from "./ContextMenu/index.vue";
 import PluginTourItem from "./TourItem/index.vue";
-import PluginDroppableEdit from "./DroppableEdit/index.vue";
-import PluginDebugOverlay from "./DebugOverlay/index.vue";
+import PluginViewOption from "./ViewOption/index.vue";
 export {
-  PluginMenuButton,
+  PluginAddAction,
+  PluginBlockIndicator,
+  PluginContextMenu,
+  PluginDebugOverlay,
+  PluginDroppableEdit,
   PluginItemAction,
+  PluginItemDropdown,
+  PluginMenuButton,
   PluginSidebar,
   PluginToolbarButton,
-  PluginViewOption,
-  PluginItemDropdown,
-  PluginAddAction,
-  PluginContextMenu,
   PluginTourItem,
-  PluginDroppableEdit,
-  PluginDebugOverlay
+  PluginViewOption
 };

package/dist/runtime/components/Blocks/Fragment/icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>newspaper</title><path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z" /></svg>

package/dist/runtime/components/Blocks/FromLibrary/index.vue

@@ -18,16 +18,18 @@
 import { computed, provide, defineBlokkli } from "#imports";
 import {
   INJECT_IS_IN_REUSABLE,
-  INJECT_REUSABLE_OPTIONS
+  INJECT_REUSABLE_OPTIONS,
+  INJECT_REUSABLE_UUID
 } from "#blokkli/helpers/symbols";
 const props = defineProps({
   libraryItem: { type: Object, required: false }
 });
-const { index, options, parentType, isEditing } = defineBlokkli({
+const { index, options, parentType, isEditing, uuid } = defineBlokkli({
   bundle: "from_library"
 });
 provide(INJECT_REUSABLE_OPTIONS, options);
 provide(INJECT_IS_IN_REUSABLE, true);
+provide(INJECT_REUSABLE_UUID, uuid);
 const item = computed(() => {
   const v = props.libraryItem?.block;
   if (v && "uuid" in v) {

package/dist/runtime/components/BlokkliEditable.vue

@@ -1,54 +1,72 @@
 <template>
-  <component :is="tag" v-bind="attrs">
+  <component :is="tag" ref="root">
     <slot :value="renderedValue" />
   </component>
 </template>
 
 <script setup>
-import { ref, computed, inject, onMounted, onBeforeUnmount } from "#imports";
 import {
+  ref,
+  computed,
+  inject,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+import {
+  INJECT_APP,
   INJECT_EDIT_CONTEXT,
   INJECT_ENTITY_CONTEXT,
-  INJECT_IS_EDITING
+  INJECT_IS_EDITING,
+  INJECT_IS_IN_REUSABLE
 } from "#blokkli/helpers/symbols";
 const props = defineProps({
   name: { type: String, required: true },
-  value: { type: String, required: true },
+  value: { type: String, required: false, default: "" },
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();
+const root = useTemplateRef("root");
 const valueOverride = ref("");
 const isEditing = inject(INJECT_IS_EDITING, false);
 const entity = inject(INJECT_ENTITY_CONTEXT);
 const editContext = inject(INJECT_EDIT_CONTEXT, null);
+const app = inject(INJECT_APP, null);
+const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
 if (!entity) {
   throw new Error("Missing entity context.");
 }
-const renderedValue = computed(() => valueOverride.value || props.value);
-const attrs = computed(() => {
-  if (isEditing && props.name) {
-    return {
-      "data-blokkli-editable-field": props.name,
-      "data-blokkli-editable-component": "true",
-      "data-blokkli-editable-value": props.value
-    };
-  }
-  return void 0;
-});
+const renderedValue = computed(() => valueOverride.value || props.value || "");
 const onEditableUpdateValue = (e) => {
   if (e.name === props.name && e.entityUuid === entity.uuid) {
     valueOverride.value = e.value;
   }
 };
 onMounted(() => {
-  if (!isEditing || !editContext) {
+  if (!isEditing || !editContext || !app || isInReusable) {
     return;
   }
   editContext.eventBus.on("editable:update", onEditableUpdateValue);
+  if (root.value instanceof HTMLElement && entity) {
+    app.directive.registerDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
+  }
 });
 onBeforeUnmount(() => {
   if (editContext) {
     editContext.eventBus.off("editable:update", onEditableUpdateValue);
   }
+  if (app && root.value instanceof HTMLElement && entity) {
+    app.directive.unregisterDirectiveElement(
+      root.value,
+      props.name,
+      entity,
+      "editable"
+    );
+  }
 });
 </script>

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

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     name: string;
-    value: string;
+    value?: string;
     tag?: string;
 };
 type __VLS_Slots = {
@@ -9,6 +9,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/runtime/components/BlokkliField.vue

@@ -4,23 +4,23 @@
     :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
     :language="providerEntity?.language"
-    :proxy-mode="proxyMode"
-    :tag="tag"
+    :proxy-mode
+    :tag
     :global-proxy-mode="!!isGlobalProxyMode"
     :should-render-item="shouldRenderItem"
   />
@@ -81,6 +81,20 @@ if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
   });
 }
+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 },
+  proxyMode: { type: Boolean, required: false },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
 const DraggableList = inject(
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   null
@@ -116,26 +130,12 @@ if (!providerEntity) {
     "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 +145,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 +155,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
         }
       };
     });

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

@@ -1,27 +1,63 @@
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItem } from '#blokkli/types';
+import type { FieldListItem, FieldDropAlignment, VueClassProp } 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;
-};
 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;
     /**
      * 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,15 +65,23 @@ type __VLS_Props = {
      */
     shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
 };
+type __VLS_Slots = {
+    default(props: {
+        items: FieldListItemTyped[];
+    }): any;
+    after(props: {
+        items: FieldListItemTyped[];
+    }): any;
+};
 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[];
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
     tag: string;
-    dropAlignment: "vertical" | "horizontal";
     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>;

package/dist/runtime/components/BlokkliItem.vue

@@ -12,7 +12,7 @@
     :is="component"
     v-else-if="component"
     v-bind="props"
-    :data-bk-in-proxy="fieldUsesProxy || void 0"
+    :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
   <div v-else-if="isEditing">Block not implemented</div>
 </template>
@@ -38,10 +38,10 @@ const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
 const componentProps = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
-  isNew: { type: Boolean, required: false },
   options: { type: null, required: false, default: () => ({}) },
   props: { type: null, required: false, default: () => ({}) },
   index: { type: Number, required: false, default: 0 },
+  editContext: { type: Object, required: false, default: void 0 },
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });

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

@@ -1,19 +1,20 @@
+import type { BlockEditContext } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: any;
     props?: any;
     index?: number;
+    editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: any;
     props?: any;
     index?: number;
+    editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     options: any;
     parentType: string;
     isEditing: boolean;
+    editContext: BlockEditContext;
     props: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;