@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.24

package/dist/runtime/helpers/composables/defineAddAction.d.ts

@@ -0,0 +1,2 @@
+import type { AddAction } from '#blokkli/types';
+export default function (cb: () => AddAction | AddAction[] | undefined): void;

package/dist/runtime/helpers/composables/defineAddAction.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export default function(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("addAction", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("addAction", cb);
+  });
+}

package/dist/runtime/helpers/composables/defineItemDropdownAction.js

@@ -2,9 +2,9 @@ import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
 export default function(cb) {
   const { plugins } = useBlokkli();
   onMounted(() => {
-    plugins.addItemDropdownAction(cb);
+    plugins.add("itemDropdownAction", cb);
   });
   onBeforeUnmount(() => {
-    plugins.removeItemDropdownAction(cb);
+    plugins.remove("itemDropdownAction", cb);
   });
 }

package/dist/runtime/helpers/composables/defineMenuButton.d.ts

@@ -0,0 +1,2 @@
+import type { MenuButtonPlugin } from '../pluginProvider.js';
+export default function (cb: () => MenuButtonPlugin | MenuButtonPlugin[] | undefined): void;

package/dist/runtime/helpers/composables/defineMenuButton.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export default function(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("menuButton", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("menuButton", cb);
+  });
+}

package/dist/runtime/helpers/composables/useDialog.d.ts

@@ -0,0 +1,3 @@
+import type { GlobalUiDialog } from '#blokkli/types';
+import { type WritableComputedRef } from '#imports';
+export declare function useDialog(id: string, alignment: GlobalUiDialog['alignment']): WritableComputedRef<boolean>;

package/dist/runtime/helpers/composables/useDialog.js

@@ -0,0 +1,16 @@
+import { computed, useBlokkli } from "#imports";
+export function useDialog(id, alignment) {
+  const { ui } = useBlokkli();
+  return computed({
+    get() {
+      return ui.currentDialog.value?.id === id;
+    },
+    set(isOpen) {
+      if (isOpen) {
+        ui.openDialog({ id, alignment });
+      } else {
+        ui.closeDialog(id);
+      }
+    }
+  });
+}

package/dist/runtime/helpers/defineElementStyle.d.ts

@@ -0,0 +1,2 @@
+import { type ComputedRef } from '#imports';
+export declare function defineElementStyle(property: string, providedValue: ComputedRef<string | number> | (() => string | number), providedElement?: HTMLElement): void;

package/dist/runtime/helpers/defineElementStyle.js

@@ -0,0 +1,33 @@
+import {
+  onBeforeUnmount,
+  watch,
+  computed,
+  unref
+} from "#imports";
+export function defineElementStyle(property, providedValue, providedElement) {
+  const element = providedElement ?? document.documentElement;
+  const value = computed(() => {
+    if (typeof providedValue === "function") {
+      return providedValue();
+    }
+    return unref(providedValue);
+  });
+  const originalValue = element.style.getPropertyValue(property);
+  watch(
+    value,
+    function(newValue) {
+      const styleValue = typeof newValue === "number" ? newValue + "px" : newValue;
+      element.style.setProperty(property, styleValue);
+    },
+    {
+      immediate: true
+    }
+  );
+  onBeforeUnmount(() => {
+    if (originalValue) {
+      element.style.setProperty(property, originalValue);
+    } else {
+      element.style.removeProperty(property);
+    }
+  });
+}

package/dist/runtime/helpers/domProvider.d.ts

@@ -14,6 +14,7 @@ type MeasuredBlockRect = Rectangle & {
     time: number;
 };
 export type DomProvider = {
+    getBoundingClientRect: (element: HTMLElement) => DOMRect;
     /**
      * Return the droppable markup for a draggable item.
      */

package/dist/runtime/helpers/domProvider.js

@@ -27,6 +27,10 @@ export default function(ui, debug, definitions, state, element) {
   let initTimeout = null;
   const isInitalizing = ref(true);
   const observedElementCache = /* @__PURE__ */ new Map();
+  function getBoundingClientRect(element2) {
+    logger.log("getBoundingClientRect", element2);
+    return element2.getBoundingClientRect();
+  }
   const registeredBlockUuids = computed(() => {
     return Object.entries(registeredBlocks).map(([uuid, element2]) => {
       if (element2) {
@@ -219,7 +223,7 @@ export default function(ui, debug, definitions, state, element) {
     if (!el) {
       return "";
     }
-    if ("itemType" in item && item.itemType !== "new") {
+    if ("itemType" in item && item.itemType !== "existing_structure") {
       return el.outerHTML;
     }
     const childCount = element.queryAll(
@@ -551,6 +555,7 @@ export default function(ui, debug, definitions, state, element) {
     registeredBlockUuids,
     getDebugData,
     getRegisteredField,
-    registeredBlocks: computed(() => registeredBlocks)
+    registeredBlocks: computed(() => registeredBlocks),
+    getBoundingClientRect
   };
 }

package/dist/runtime/helpers/dropTargets/index.d.ts

@@ -3,4 +3,4 @@ export type Orientation = 'horizontal' | 'vertical';
 export declare const MIN_GAP = 20;
 export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
 export declare function getChildrenOrientation(element: HTMLElement): Orientation;
-export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[]): boolean;
+export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[], draggingFragments?: string[]): boolean;

package/dist/runtime/helpers/dropTargets/index.js

@@ -2,7 +2,7 @@ export const MIN_GAP = 20;
 export function getGapSize(orientation, element) {
   const computedStyle = window.getComputedStyle(element);
   if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
-    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
+    const gap = orientation === "vertical" ? computedStyle.rowGap || computedStyle.gridRowGap : computedStyle.columnGap || computedStyle.gridColumnGap;
     if (gap) {
       const gapParts = gap.split(" ");
       const gapValue = gapParts[0];
@@ -31,7 +31,7 @@ export function getChildrenOrientation(element) {
   }
   return "vertical";
 }
-export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles) {
+export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles, draggingFragments) {
   if (field.cardinality !== -1) {
     const childrenThatAreSelection = children.filter((child) => {
       const uuid = child.dataset.bkUuid;
@@ -45,5 +45,19 @@ export function determineCanAddChildren(field, children, uuids, currentCount, it
       return false;
     }
   }
-  return !draggingBundles?.length || draggingBundles.every((bundle) => field.allowedBundles.includes(bundle));
+  if (!draggingBundles?.length) {
+    return true;
+  }
+  const bundlesAllowed = draggingBundles.every(
+    (bundle) => field.allowedBundles.includes(bundle)
+  );
+  if (!bundlesAllowed) {
+    return false;
+  }
+  if (draggingFragments?.length && field.allowedFragments.length > 0) {
+    return draggingFragments.every(
+      (fragment) => field.allowedFragments.includes(fragment)
+    );
+  }
+  return true;
 }

package/dist/runtime/helpers/pluginProvider.d.ts

@@ -14,13 +14,32 @@ export type ItemDropdownAction = {
     callback: () => void;
 };
 type ItemDropdownActionFunction = PluginAddFunction<ItemDropdownAction>;
+export type MenuButtonPlugin = {
+    id: string;
+    title: string;
+    description: string;
+    icon?: BlokkliIcon;
+    type?: 'success' | 'danger' | 'yellow';
+    weight?: number;
+    secondary?: boolean;
+    disabled?: boolean;
+    callback: () => void;
+};
+type MenuButtonFunction = PluginAddFunction<MenuButtonPlugin>;
+type PluginFunctionMap = {
+    addAction: AddActionFunction;
+    itemDropdownAction: ItemDropdownActionFunction;
+    menuButton: MenuButtonFunction;
+};
+type PluginDataMap = {
+    addAction: AddAction;
+    itemDropdownAction: ItemDropdownAction;
+    menuButton: MenuButtonPlugin;
+};
 export type PluginProvider = {
-    addAddAction: (fn: AddActionFunction) => void;
-    removeAddAction: (fn: AddActionFunction) => void;
-    getAddActions: () => AddAction[];
-    addItemDropdownAction: (fn: ItemDropdownActionFunction) => void;
-    removeItemDropdownAction: (fn: ItemDropdownActionFunction) => void;
-    getItemDropdownActions: () => ItemDropdownAction[];
+    add<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    remove<T extends keyof PluginFunctionMap>(type: T, fn: PluginFunctionMap[T]): void;
+    get<T extends keyof PluginDataMap>(type: T): PluginDataMap[T][];
 };
 export default function (): PluginProvider;
 export {};

package/dist/runtime/helpers/pluginProvider.js

@@ -1,62 +1,64 @@
+import { ref } from "#imports";
 export default function() {
-  let addActions = [];
-  let itemDropdownActions = [];
-  function addAddAction(fn) {
-    addActions.push(fn);
-  }
-  function removeAddAction(fn) {
-    addActions = addActions.filter((v) => v !== fn);
-  }
-  function getAddActions() {
-    const actions = [];
-    for (let i = 0; i < addActions.length; i++) {
-      const callback = addActions[i];
-      if (!callback) {
-        continue;
-      }
-      const result = callback();
-      if (!result) {
-        continue;
-      }
-      if (Array.isArray(result)) {
-        actions.push(...result);
-      } else {
-        actions.push(result);
-      }
+  const addActionPlugins = ref([]);
+  const itemDropdownActionPlugins = ref([]);
+  const menuButtonPlugins = ref([]);
+  function add(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value.push(fn);
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value.push(fn);
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value.push(fn);
     }
-    return actions;
   }
-  function addItemDropdownAction(fn) {
-    itemDropdownActions.push(fn);
-  }
-  function removeItemDropdownAction(fn) {
-    itemDropdownActions = itemDropdownActions.filter((v) => v !== fn);
+  function remove(type, fn) {
+    if (type === "addAction") {
+      addActionPlugins.value = addActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "itemDropdownAction") {
+      itemDropdownActionPlugins.value = itemDropdownActionPlugins.value.filter(
+        (v) => v !== fn
+      );
+    } else if (type === "menuButton") {
+      menuButtonPlugins.value = menuButtonPlugins.value.filter(
+        (v) => v !== fn
+      );
+    }
   }
-  function getItemDropdownActions() {
-    const actions = [];
-    for (let i = 0; i < itemDropdownActions.length; i++) {
-      const callback = itemDropdownActions[i];
+  function get(type) {
+    let storage;
+    if (type === "addAction") {
+      storage = addActionPlugins.value;
+    } else if (type === "itemDropdownAction") {
+      storage = itemDropdownActionPlugins.value;
+    } else if (type === "menuButton") {
+      storage = menuButtonPlugins.value;
+    } else {
+      return [];
+    }
+    const result = [];
+    for (let i = 0; i < storage.length; i++) {
+      const callback = storage[i];
       if (!callback) {
         continue;
       }
-      const result = callback();
-      if (!result) {
+      const callbackResult = callback();
+      if (!callbackResult) {
         continue;
       }
-      if (Array.isArray(result)) {
-        actions.push(...result);
+      if (Array.isArray(callbackResult)) {
+        result.push(...callbackResult);
       } else {
-        actions.push(result);
+        result.push(callbackResult);
       }
     }
-    return actions;
+    return result;
   }
   return {
-    addAddAction,
-    removeAddAction,
-    getAddActions,
-    addItemDropdownAction,
-    removeItemDropdownAction,
-    getItemDropdownActions
+    add,
+    remove,
+    get
   };
 }

package/dist/runtime/helpers/providers/blocks.js

@@ -1,5 +1,6 @@
 import { itemEntityType } from "#blokkli-build/config";
 import onBlokkliEvent from "../composables/onBlokkliEvent.js";
+import { BUNDLE_BLOKKLI_FRAGMENT } from "#blokkli/constants";
 export default function(state, dom, context) {
   const renderedFieldListItemCache = /* @__PURE__ */ new Map();
   function getParentBlockBundle(field) {
@@ -26,6 +27,14 @@ export default function(state, dom, context) {
     }
     return null;
   }
+  function getFragmentData(item) {
+    if (item.bundle === BUNDLE_BLOKKLI_FRAGMENT && item.props.name) {
+      return {
+        name: item.props.name
+      };
+    }
+    return null;
+  }
   function getBlock(uuid) {
     const cached = renderedFieldListItemCache.get(uuid);
     if (cached) {
@@ -54,6 +63,7 @@ export default function(state, dom, context) {
       isNested: fieldList.entityType === itemEntityType,
       fieldListType: field?.fieldListType ?? "default",
       library: getLibraryData(item),
+      fragment: getFragmentData(item),
       parentBlockBundle,
       host: {
         type: fieldList.entityType,

package/dist/runtime/helpers/providers/fields.d.ts

@@ -3,6 +3,14 @@ import type { DomProvider } from '../domProvider.js';
 import type { StateProvider } from '../stateProvider.js';
 import type { BlockDefinitionProvider } from '../typesProvider.js';
 export type FieldsProvider = {
-    find: (uuid: string, fieldName: string) => BlokkliFieldElement | undefined;
+    find: (
+    /**
+     * The host entity UUID.
+     */
+    uuid: string, 
+    /**
+     * The name of the field.
+     */
+    fieldName: string) => BlokkliFieldElement | undefined;
 };
 export default function (state: StateProvider, dom: DomProvider, types: BlockDefinitionProvider): FieldsProvider;

package/dist/runtime/helpers/uiProvider.d.ts

@@ -1,8 +1,8 @@
-import { type Ref, type ComputedRef } from 'vue';
+import { type Ref, type ComputedRef } from '#imports';
+import type { ShallowRef } from 'vue';
 import type { StorageProvider } from './storageProvider.js';
-import type { AddListOrientation, Coord, Rectangle, SidebarRegion, Size } from '#blokkli/types';
+import type { Coord, GlobalUiDialog, Rectangle, SidebarRegion, Size } from '#blokkli/types';
 import type { Viewport } from '#blokkli/constants';
-import type { StateProvider } from './stateProvider.js';
 import type { AdapterContext } from '#blokkli/adapter';
 import type { ThemeColorName } from '#blokkli/types/theme';
 import type { ElementProvider } from './providers/element.js';
@@ -10,17 +10,15 @@ export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
     providerElement: HTMLElement;
-    menu: {
-        isOpen: Readonly<Ref<boolean>>;
-        close: () => void;
-        open: () => void;
-    };
     isMobile: ComputedRef<boolean>;
     isDesktop: ComputedRef<boolean>;
     isAnimating: Ref<boolean>;
     isAnalyzing: Ref<boolean>;
     isProxyMode: Ref<boolean>;
-    hasDialogOpen: Ref<boolean>;
+    hasDialogOpen: ComputedRef<boolean>;
+    currentDialog: Readonly<Ref<GlobalUiDialog | null>>;
+    openDialog: (dialog: GlobalUiDialog) => void;
+    closeDialog: (id?: string) => void;
     hasTooltipOpen: ComputedRef<boolean>;
     openTooltip: Ref<string>;
     selectionColor: ComputedRef<ThemeColorName | null>;
@@ -32,10 +30,8 @@ export type UiProvider = {
     transformLabel: ComputedRef<string>;
     useAnimations: ComputedRef<boolean>;
     lowPerformanceMode: ComputedRef<boolean>;
-    toolbarHeight: ComputedRef<number>;
     visibleViewport: ComputedRef<Rectangle>;
     visibleViewportPadded: ComputedRef<Rectangle>;
-    addListOrientation: ComputedRef<AddListOrientation>;
     setViewportBlockingRectangle: (key: string, rect?: Rectangle) => void;
     viewportBlockingRects: ComputedRef<Rectangle[]>;
     appViewport: ComputedRef<Viewport>;
@@ -56,5 +52,6 @@ export type UiProvider = {
     removeActiveSidebar: (region: SidebarRegion, id: string) => void;
     hasSidebarLeft: ComputedRef<boolean>;
     hasSidebarRight: ComputedRef<boolean>;
+    mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>;
 };
-export default function (providerElement: HTMLElement, storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>, element: ElementProvider): UiProvider;
+export default function (providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;