@blokkli/editor 2.0.0-alpha.27 → 2.0.0-alpha.29

package/dist/runtime/editor/providers/ui.js

@@ -0,0 +1,406 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  computed,
+  watch,
+  readonly
+} from "#imports";
+import { falsy } from "../../helpers/index.js";
+import {
+  addElementClasses,
+  defineElementStyle
+} from "#blokkli/editor/composables";
+import {
+  defaultLanguage,
+  forceDefaultLanguage
+} from "#blokkli-build/editor-config";
+const CLASS_PROXY_MODE = "bk-is-proxy-mode";
+const localeMap = {
+  de: "de-CH",
+  fr: "fr-CH",
+  it: "it-CH",
+  en: "en-GB"
+};
+export default function(eventBus, providerElement, storage, context, element, mainLayoutElement, visibleViewportElement) {
+  let cachedRootElement = null;
+  let cachedArtboardElement = null;
+  const interfaceLanguage = computed(() => {
+    return forceDefaultLanguage ? defaultLanguage : context.value.language;
+  });
+  const locale = computed(() => {
+    const lang = interfaceLanguage.value;
+    return localeMap[lang] || lang;
+  });
+  const viewportWidth = ref(window.innerWidth);
+  const viewportHeight = ref(window.innerHeight);
+  const visibleViewportWidth = ref(0);
+  const visibleViewportHeight = ref(0);
+  const visibleViewportX = ref(0);
+  const visibleViewportY = ref(0);
+  const isProxyMode = ref(false);
+  const currentDialog = ref(null);
+  const openTooltip = ref("");
+  const hasTransformOverlayOpen = ref(false);
+  const isAnimating = ref(false);
+  const isAnalyzing = ref(false);
+  const transformLabel = ref("");
+  const openContextMenu = ref("");
+  const banners = ref({});
+  function openDialog(dialog) {
+    currentDialog.value = dialog;
+  }
+  function requireDialogCloseConfirm() {
+    if (currentDialog.value) {
+      currentDialog.value.confirmClose = true;
+    }
+  }
+  function closeDialog(id) {
+    if (!id || currentDialog.value?.id === id) {
+      currentDialog.value = null;
+    }
+  }
+  const hasDialogOpen = computed(() => currentDialog.value !== null);
+  function setBannerHeight(id, height) {
+    banners.value[id] = height;
+  }
+  function removeBanner(id) {
+    banners.value[id] = 0;
+  }
+  const selectionTopLeft = ref({ x: 0, y: 0 });
+  const baseSettings = storage.use("feature:settings:settings", {});
+  const lowPerformanceMode = computed(
+    () => baseSettings.value.lowPerformanceMode
+  );
+  const useAnimations = computed(
+    () => baseSettings.value.useAnimations !== false
+  );
+  const viewportBlockingRectsMap = ref(
+    {}
+  );
+  const isTransforming = computed(() => !!transformLabel.value);
+  const artboardSize = ref({
+    width: 1,
+    height: 1
+  });
+  const artboardOffset = ref({
+    x: 0,
+    y: 0
+  });
+  const artboardScale = ref(1);
+  const resizeElementMap = /* @__PURE__ */ new WeakMap();
+  let visibleViewportResizeTimeout = null;
+  function updateVisibleViewport() {
+    if (!visibleViewportElement.value) {
+      return;
+    }
+    const rect = visibleViewportElement.value.getBoundingClientRect();
+    visibleViewportWidth.value = rect.width;
+    visibleViewportHeight.value = rect.height;
+    visibleViewportX.value = rect.x;
+    visibleViewportY.value = rect.y;
+  }
+  const resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const size = entry.contentBoxSize[0];
+      if (!size) {
+        return;
+      }
+      const key = resizeElementMap.get(entry.target);
+      if (!key) {
+        return;
+      }
+      if (key === "artboard") {
+        artboardSize.value.width = size.inlineSize;
+        artboardSize.value.height = size.blockSize;
+      } else if (key === "visible-viewport") {
+        visibleViewportWidth.value = size.inlineSize;
+        visibleViewportHeight.value = size.blockSize;
+        if (visibleViewportResizeTimeout) {
+          window.clearTimeout(visibleViewportResizeTimeout);
+        }
+        visibleViewportResizeTimeout = window.setTimeout(() => {
+          updateVisibleViewport();
+        }, 50);
+      }
+    }
+  });
+  const setViewportBlockingRectangle = (key, rect) => {
+    if (!rect) {
+      viewportBlockingRectsMap.value[key] = void 0;
+      return;
+    }
+    viewportBlockingRectsMap.value[key] = rect;
+  };
+  const artboardElement = () => {
+    if (cachedArtboardElement) {
+      return cachedArtboardElement;
+    }
+    const el = element.query(
+      document.documentElement,
+      ".bk-main-canvas",
+      "Get main canvas."
+    );
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate artboard element.");
+    }
+    cachedArtboardElement = el;
+    return el;
+  };
+  const rootElement = () => {
+    if (cachedRootElement) {
+      return cachedRootElement;
+    }
+    const el = element.query(
+      document.documentElement,
+      "#nuxt-root",
+      "Get Nuxt root element."
+    );
+    if (!el || !(el instanceof HTMLElement)) {
+      throw new Error("Failed to locate root Nuxt element.");
+    }
+    cachedRootElement = el;
+    return el;
+  };
+  const appViewport = computed(() => {
+    if (viewportWidth.value < 1024) {
+      return "mobile";
+    }
+    return "desktop";
+  });
+  const isMobile = computed(() => appViewport.value === "mobile");
+  const isDesktop = computed(() => appViewport.value === "desktop");
+  let resizeTimeout = null;
+  const onResize = () => {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(() => {
+      viewportWidth.value = window.innerWidth;
+      viewportHeight.value = window.innerHeight;
+      eventBus.emit("ui:resized");
+    }, 400);
+  };
+  const activeSidebarsLeft = ref([]);
+  const activeSidebarsRight = ref([]);
+  function setActiveSidebar(region, id) {
+    if (region === "left") {
+      if (activeSidebarsLeft.value.includes(id)) {
+        return;
+      }
+      activeSidebarsLeft.value.push(id);
+    } else {
+      if (activeSidebarsRight.value.includes(id)) {
+        return;
+      }
+      activeSidebarsRight.value.push(id);
+    }
+  }
+  function removeActiveSidebar(region, id) {
+    if (region === "left") {
+      activeSidebarsLeft.value = activeSidebarsLeft.value.filter(
+        (v) => v !== id
+      );
+    } else {
+      activeSidebarsRight.value = activeSidebarsRight.value.filter(
+        (v) => v !== id
+      );
+    }
+  }
+  const hasSidebarLeft = computed(() => {
+    return !!activeSidebarsLeft.value.length;
+  });
+  const hasSidebarRight = computed(() => {
+    return !!activeSidebarsRight.value.length;
+  });
+  const blockingPaddingX = computed(() => 15);
+  const blockingPaddingY = computed(() => 50);
+  const viewportPadding = computed(() => 10);
+  const scrollbarWidth = computed(() => 16);
+  const viewportBlockingRects = computed(() => {
+    return Object.values(viewportBlockingRectsMap.value).map((rect) => {
+      if (!rect) {
+        return;
+      }
+      return {
+        x: rect.x - blockingPaddingX.value,
+        y: rect.y - blockingPaddingY.value,
+        width: rect.width + blockingPaddingX.value * 2,
+        height: rect.height + blockingPaddingY.value * 2
+      };
+    }).filter(falsy);
+  });
+  const visibleViewport = computed(() => {
+    return {
+      x: visibleViewportX.value,
+      y: visibleViewportY.value,
+      width: visibleViewportWidth.value,
+      height: visibleViewportHeight.value
+    };
+  });
+  const visibleViewportPadded = computed(() => {
+    const p = viewportPadding.value;
+    return {
+      x: visibleViewportX.value + p,
+      y: visibleViewportY.value + p,
+      width: visibleViewportWidth.value - 2 * p,
+      height: visibleViewportHeight.value - 2 * p
+    };
+  });
+  const viewport = computed(() => {
+    return {
+      width: viewportWidth.value,
+      height: viewportHeight.value
+    };
+  });
+  function getAbsoluteElementRect(v, providedScale, providedOffset) {
+    const rect = v instanceof HTMLElement ? v.getBoundingClientRect() : v;
+    const scale = providedScale || artboardScale.value;
+    const offset = providedOffset || artboardOffset.value;
+    return {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      // Force at least a size of 24.
+      width: Math.max(rect.width / scale, 24),
+      height: Math.max(rect.height / scale, 24)
+    };
+  }
+  function toArtboardCoords(coords, providedScale, providedOffset) {
+    const scale = providedScale || artboardScale.value;
+    const offset = providedOffset || artboardOffset.value;
+    return {
+      x: coords.x / scale - offset.x / scale,
+      y: coords.y / scale - offset.y / scale
+    };
+  }
+  function getViewportRelativeRect(rect) {
+    const scale = artboardScale.value;
+    const offset = artboardOffset.value;
+    return {
+      x: rect.x * scale + offset.x,
+      y: rect.y * scale + offset.y,
+      width: rect.width * scale,
+      height: rect.height * scale
+    };
+  }
+  function setTransform(label) {
+    transformLabel.value = label || "";
+  }
+  function formatDate(date, options) {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const defaultOptions = {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit"
+    };
+    return dateObj.toLocaleString(locale.value, options || defaultOptions);
+  }
+  addElementClasses(document.documentElement, "bk-is-animating", isAnimating);
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-left",
+    hasSidebarLeft
+  );
+  addElementClasses(
+    document.documentElement,
+    "bk-has-sidebar-right",
+    hasSidebarRight
+  );
+  addElementClasses(document.documentElement, ["bk-html-root"]);
+  addElementClasses(document.body, "bk-body");
+  addElementClasses(document.documentElement, CLASS_PROXY_MODE, isProxyMode);
+  addElementClasses(document.documentElement, "bk-is-analyzing", isAnalyzing);
+  function observeElement(element2, key) {
+    resizeElementMap.set(element2, key);
+    resizeObserver.observe(element2);
+  }
+  watch(
+    visibleViewportElement,
+    (el) => {
+      if (el) {
+        observeElement(el, "visible-viewport");
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  onMounted(() => {
+    viewportWidth.value = window.innerWidth;
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener("resize", onResize);
+    const artboard = artboardElement();
+    observeElement(artboard, "artboard");
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", onResize);
+    clearTimeout(resizeTimeout);
+    resizeObserver.disconnect();
+  });
+  const hasTooltipOpen = computed(() => !!openTooltip.value);
+  const selectionColors = ref([]);
+  function setSelectionColor(id, color) {
+    selectionColors.value = [
+      ...selectionColors.value.filter((v) => v.id !== id),
+      { id, color }
+    ];
+  }
+  function removeSelectionColor(id) {
+    selectionColors.value = selectionColors.value.filter((v) => v.id !== id);
+  }
+  const selectionColor = computed(() => {
+    return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
+  });
+  defineElementStyle("--bk-viewport-padding", viewportPadding);
+  defineElementStyle("--bk-scrollbar-width", scrollbarWidth);
+  return {
+    artboardElement,
+    rootElement,
+    providerElement,
+    isMobile,
+    isDesktop,
+    isAnimating,
+    isAnalyzing,
+    isTransforming,
+    setTransform,
+    transformLabel: computed(() => transformLabel.value),
+    useAnimations,
+    visibleViewport,
+    visibleViewportPadded,
+    setViewportBlockingRectangle,
+    viewportBlockingRects,
+    appViewport,
+    openContextMenu,
+    viewport,
+    artboardSize: computed(() => artboardSize.value),
+    isProxyMode,
+    artboardScale,
+    artboardOffset,
+    selectionTopLeft,
+    lowPerformanceMode,
+    getAbsoluteElementRect,
+    getViewportRelativeRect,
+    interfaceLanguage,
+    locale,
+    formatDate,
+    hasDialogOpen,
+    hasTransformOverlayOpen,
+    hasTooltipOpen,
+    openTooltip,
+    selectionColor,
+    setSelectionColor,
+    removeSelectionColor,
+    setBannerHeight,
+    removeBanner,
+    setActiveSidebar,
+    removeActiveSidebar,
+    hasSidebarLeft,
+    hasSidebarRight,
+    mainLayoutElement,
+    openDialog,
+    closeDialog,
+    currentDialog: readonly(currentDialog),
+    requireDialogCloseConfirm,
+    toArtboardCoords
+  };
+}

package/dist/runtime/editor/types/actions.d.ts

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlokkliFieldElement, BlokkliItemHost, RenderedFieldListItem } from './field.js';
+export type AddActionColor = 'rose' | 'lime' | 'accent';
+export type ActionPlacedData = {
+    preceedingUuid: string | null;
+    host: BlokkliItemHost;
+    field: BlokkliFieldElement;
+};
+export type AddAction = {
+    id: string;
+    icon: BlokkliIcon;
+    color: AddActionColor;
+    itemBundle?: string;
+    title: string;
+    description?: string;
+    callback: (action: ActionPlacedData) => void;
+    enabled?: (item: RenderedFieldListItem) => boolean;
+};

package/dist/runtime/editor/types/app.d.ts

@@ -0,0 +1,59 @@
+import type { ComputedRef } from 'vue';
+import type { DomProvider } from '../providers/dom.js';
+import type { AdapterContext, BlokkliAdapter } from '#blokkli/editor/adapter';
+import type { Eventbus } from '../events/index.js';
+import type { StorageProvider } from '../providers/storage.js';
+import type { BlockDefinitionProvider } from '../providers/types.js';
+import type { SelectionProvider } from '../providers/selection.js';
+import type { KeyboardProvider } from '../providers/keyboard.js';
+import type { UiProvider } from '../providers/ui.js';
+import type { AnimationProvider } from '../providers/animation.js';
+import type { StateProvider } from '../providers/state.js';
+import type { IconsProvider } from '../providers/icons.js';
+import type { DirectiveProvider } from '../providers/directive.js';
+import type { TextProvider } from '../providers/texts.js';
+import type { PluginProvider } from '../providers/plugin.js';
+import type { BroadcastProvider } from '../providers/broadcast.js';
+import type { FeaturesProvider } from '../providers/features.js';
+import type { DebugProvider } from '../providers/debug.js';
+import type { IndicatorsProvider } from '../providers/indicators.js';
+import type { BlocksProvider } from '../providers/blocks.js';
+import type { FieldsProvider } from '../providers/fields.js';
+import type { ElementProvider } from '../providers/element.js';
+import type { CommandsProvider } from '../providers/commands.js';
+import type { TourProvider } from '../providers/tour.js';
+import type { DropAreaProvider } from '../providers/dropArea.js';
+import type { ThemeProvider } from '../providers/theme.js';
+import type { DefinitionProvider } from '../providers/definition.js';
+export interface BlokkliApp {
+    /**
+     * The adapter.
+     */
+    adapter: BlokkliAdapter<any>;
+    eventBus: Eventbus;
+    dom: DomProvider;
+    storage: StorageProvider;
+    types: BlockDefinitionProvider;
+    selection: SelectionProvider;
+    blocks: BlocksProvider;
+    keyboard: KeyboardProvider;
+    element: ElementProvider;
+    ui: UiProvider;
+    animation: AnimationProvider;
+    definitions: DefinitionProvider;
+    state: StateProvider;
+    context: ComputedRef<AdapterContext>;
+    $t: TextProvider;
+    broadcast: BroadcastProvider;
+    features: FeaturesProvider;
+    theme: ThemeProvider;
+    commands: CommandsProvider;
+    tour: TourProvider;
+    dropAreas: DropAreaProvider;
+    debug: DebugProvider;
+    indicators: IndicatorsProvider;
+    plugins: PluginProvider;
+    directive: DirectiveProvider;
+    fields: FieldsProvider;
+    icons: IconsProvider;
+}

package/dist/runtime/editor/types/definitions.d.ts

@@ -0,0 +1,18 @@
+export interface BlockBundleDefinition {
+    id: string;
+    label: string;
+    description?: string;
+    allowReusable?: boolean;
+    isTranslatable?: boolean;
+    hasPublishOn?: boolean;
+    hasUnpublishOn?: boolean;
+}
+export type FieldConfig = {
+    name: string;
+    entityType: string;
+    entityBundle: string;
+    label: string;
+    cardinality: number;
+    canEdit: boolean;
+    allowedBundles: string[];
+};

package/dist/runtime/editor/types/draggable.d.ts

@@ -0,0 +1,9 @@
+import type { RenderedFieldListItem } from './field.js';
+export interface DraggableExistingBlock {
+    itemType: 'existing';
+    block: RenderedFieldListItem;
+}
+export interface DraggableItemTypes {
+    existing: DraggableExistingBlock;
+}
+export type DraggableItem = DraggableItemTypes[keyof DraggableItemTypes];

package/dist/runtime/editor/types/features.d.ts

@@ -0,0 +1,9 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { FeatureDefinitionBase, FeatureDefinitionSettingCheckbox, FeatureDefinitionSettingMethod, FeatureDefinitionSettingRadios, FeatureDefinitionSettingSlider } from './../../../global/types/features.js';
+import type { AdapterMethods } from '#blokkli/editor/adapter';
+import type { BlokkliApp } from './app.js';
+export type FeatureDefinitionSetting = FeatureDefinitionSettingCheckbox | FeatureDefinitionSettingRadios<BlokkliIcon> | FeatureDefinitionSettingMethod<BlokkliApp> | FeatureDefinitionSettingSlider;
+export type FeatureDefinition<Methods extends AdapterMethods[] = [], T extends string = ''> = Omit<FeatureDefinitionBase<AdapterMethods, BlokkliIcon, T>, 'requiredAdapterMethods' | 'settings'> & {
+    requiredAdapterMethods?: [...Methods];
+    settings?: Record<string, FeatureDefinitionSetting>;
+};

package/dist/runtime/editor/types/field.d.ts

@@ -0,0 +1,58 @@
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli-build/generated-types';
+import type { EntityContext } from '#blokkli/types';
+import type { FieldDropAlignment } from '#blokkli/types/field';
+export interface BlokkliItemHost {
+    type: string;
+    uuid: string;
+    fieldName: string;
+}
+export type BlokkliFieldElement = {
+    key: string;
+    name: string;
+    label: string;
+    isNested: boolean;
+    nestingLevel: number;
+    fieldListType: ValidFieldListTypes;
+    hostEntityType: string;
+    hostEntityBundle: string;
+    hostEntityUuid: string;
+    allowedBundles: string[];
+    allowedFragments: string[];
+    cardinality: number;
+    element: HTMLElement;
+    dropAlignment: FieldDropAlignment | null;
+};
+export type RegisteredField = {
+    element: HTMLElement;
+    entity: EntityContext;
+    fieldName: string;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[];
+    isNested: boolean;
+    nestingLevel: number;
+    dropAlignment: FieldDropAlignment | null;
+};
+export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
+export type RenderedFieldListItem = {
+    uuid: string;
+    bundle: string;
+    isNew: boolean;
+    isPublished: boolean;
+    host: BlokkliItemHost & {
+        bundle: string;
+    };
+    fieldListType: ValidFieldListTypes;
+    parentBlockBundle: BlockBundleWithNested | null;
+    library: {
+        label: string;
+        libraryItemUuid: string;
+        reusableBundle: string;
+    } | null;
+    fragment: {
+        name: BlokkliFragmentName;
+    } | null;
+    isNested: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};

package/dist/runtime/editor/types/geometry.d.ts

@@ -0,0 +1,9 @@
+export type Size = {
+    width: number;
+    height: number;
+};
+export type Coord = {
+    x: number;
+    y: number;
+};
+export type Rectangle = Size & Coord;

package/dist/runtime/editor/types/index.d.ts

@@ -0,0 +1 @@
+export type CursorKeyword = 'alias' | 'all-scroll' | 'auto' | 'cell' | 'col-resize' | 'context-menu' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'no-drop' | 'none' | 'not-allowed' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out';

package/dist/runtime/editor/types/pluginConfig.d.ts

@@ -0,0 +1,48 @@
+export type PluginConfigInputText = {
+    type: 'text';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    minLength?: number;
+    maxLength?: number;
+    placeholder?: string;
+    pattern?: string;
+    multiline?: boolean;
+    rows?: number;
+};
+export type PluginConfigInputSeed = {
+    type: 'seed';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+};
+export type PluginConfigInputCheckbox = {
+    type: 'checkbox';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    checkboxLabel?: string;
+    defaultValue: boolean;
+};
+export type PluginConfigInputOptions = {
+    type: 'options';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    variant: 'select' | 'radio';
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+export type PluginConfigInput = PluginConfigInputText | PluginConfigInputSeed | PluginConfigInputCheckbox | PluginConfigInputOptions;
+export type PluginConfigInputItem = {
+    name: string;
+    value: string;
+};

package/dist/runtime/editor/types/selection.d.ts

@@ -0,0 +1,6 @@
+import type { Rectangle } from './geometry.js';
+import type { DraggableStyle } from './style.js';
+export type SelectedRect = Rectangle & {
+    uuid: string;
+    style: DraggableStyle;
+};