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

package/dist/runtime/helpers/uiProvider.js

@@ -2,11 +2,14 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
-  computed
-} from "vue";
+  computed,
+  watch,
+  readonly
+} from "#imports";
 import { eventBus } from "./eventBus.js";
 import { falsy } from "./index.js";
 import { addElementClasses } from "./addElementClasses.js";
+import { defineElementStyle } from "./defineElementStyle.js";
 import { defaultLanguage, forceDefaultLanguage } from "#blokkli-build/config";
 const CLASS_PROXY_MODE = "bk-is-proxy-mode";
 const localeMap = {
@@ -15,7 +18,7 @@ const localeMap = {
   it: "it-CH",
   en: "en-GB"
 };
-export default function(providerElement, storage, state, context, element) {
+export default function(providerElement, storage, context, element, mainLayoutElement, visibleViewportElement) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
   const interfaceLanguage = computed(() => {
@@ -25,9 +28,14 @@ export default function(providerElement, storage, state, context, element) {
     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 menuIsOpen = ref(false);
-  const hasDialogOpen = ref(false);
+  const currentDialog = ref(null);
   const openTooltip = ref("");
   const hasTransformOverlayOpen = ref(false);
   const isAnimating = ref(false);
@@ -35,6 +43,15 @@ export default function(providerElement, storage, state, context, element) {
   const transformLabel = ref("");
   const openContextMenu = ref("");
   const banners = ref({});
+  function openDialog(dialog) {
+    currentDialog.value = dialog;
+  }
+  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;
   }
@@ -62,17 +79,42 @@ export default function(providerElement, storage, state, context, element) {
     y: 0
   });
   const artboardScale = ref(1);
-  const resizeObserver = new ResizeObserver((entries) => {
-    const entry = entries[0];
-    if (!entry) {
+  const resizeElementMap = /* @__PURE__ */ new WeakMap();
+  let visibleViewportResizeTimeout = null;
+  function updateVisibleViewport() {
+    if (!visibleViewportElement.value) {
       return;
     }
-    const size = entry.contentBoxSize[0];
-    if (!size) {
-      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);
+      }
     }
-    artboardSize.value.width = size.inlineSize;
-    artboardSize.value.height = size.blockSize;
   });
   const setViewportBlockingRectangle = (key, rect) => {
     if (!rect) {
@@ -117,8 +159,6 @@ export default function(providerElement, storage, state, context, element) {
     }
     return "desktop";
   });
-  const viewportWidth = ref(window.innerWidth);
-  const viewportHeight = ref(window.innerHeight);
   const isMobile = computed(() => appViewport.value === "mobile");
   const isDesktop = computed(() => appViewport.value === "desktop");
   let resizeTimeout = null;
@@ -130,12 +170,6 @@ export default function(providerElement, storage, state, context, element) {
       eventBus.emit("ui:resized");
     }, 400);
   };
-  const toolbarHeight = computed(() => {
-    if (isMobile.value) {
-      return 80;
-    }
-    return 50;
-  });
   const activeSidebarsLeft = ref([]);
   const activeSidebarsRight = ref([]);
   function setActiveSidebar(region, id) {
@@ -168,55 +202,10 @@ export default function(providerElement, storage, state, context, element) {
   const hasSidebarRight = computed(() => {
     return !!activeSidebarsRight.value.length;
   });
-  const settingsStorage = storage.use("feature:add-list:settings", {
-    orientation: "vertical"
-  });
-  const addListOrientation = computed(
-    () => isMobile.value ? "horizontal" : settingsStorage.value.orientation
-  );
-  const visibleViewportX = computed(() => {
-    let x = 0;
-    if (!isMobile.value) {
-      if (addListOrientation.value === "vertical" && state.editMode.value === "editing") {
-        x += 70;
-      }
-      if (hasSidebarLeft.value) {
-        x += 400;
-      }
-    }
-    return x;
-  });
-  const visibleViewportY = computed(() => {
-    return toolbarHeight.value;
-  });
-  const visibleViewportWidth = computed(() => {
-    if (isMobile.value) {
-      return viewportWidth.value;
-    }
-    let width = viewportWidth.value - visibleViewportX.value - 50;
-    if (hasSidebarRight.value) {
-      width -= 351;
-    }
-    return width;
-  });
-  const visibleViewportHeight = computed(() => {
-    let height = viewportHeight.value - visibleViewportY.value;
-    if (addListOrientation.value === "horizontal") {
-      if (isMobile.value) {
-        height -= 50;
-      } else {
-        height -= 70;
-      }
-    }
-    const bannerHeights = Object.values(banners.value).filter(Boolean);
-    bannerHeights.forEach((bannerHeight) => {
-      height -= bannerHeight;
-    });
-    height -= bannerHeights.length * 10;
-    return height;
-  });
   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) {
@@ -239,11 +228,12 @@ export default function(providerElement, storage, state, context, element) {
     };
   });
   const visibleViewportPadded = computed(() => {
+    const p = viewportPadding.value;
     return {
-      x: visibleViewportX.value + 10,
-      y: visibleViewportY.value + 10,
-      width: visibleViewportWidth.value - 10 - 16 - 10,
-      height: visibleViewportHeight.value - 20
+      x: visibleViewportX.value + p,
+      y: visibleViewportY.value + p,
+      width: visibleViewportWidth.value - 2 * p,
+      height: visibleViewportHeight.value - 2 * p
     };
   });
   const viewport = computed(() => {
@@ -303,18 +293,31 @@ export default function(providerElement, storage, state, context, element) {
   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();
-    resizeObserver.observe(artboard);
+    observeElement(artboard, "artboard");
   });
   onBeforeUnmount(() => {
     window.removeEventListener("resize", onResize);
     clearTimeout(resizeTimeout);
-    const artboard = artboardElement();
-    resizeObserver.unobserve(artboard);
     resizeObserver.disconnect();
   });
   const hasTooltipOpen = computed(() => !!openTooltip.value);
@@ -331,12 +334,9 @@ export default function(providerElement, storage, state, context, element) {
   const selectionColor = computed(() => {
     return selectionColors.value[selectionColors.value.length - 1]?.color ?? null;
   });
+  defineElementStyle("--bk-viewport-padding", viewportPadding);
+  defineElementStyle("--bk-scrollbar-width", scrollbarWidth);
   return {
-    menu: {
-      isOpen: menuIsOpen,
-      close: () => menuIsOpen.value = false,
-      open: () => menuIsOpen.value = true
-    },
     artboardElement,
     rootElement,
     providerElement,
@@ -350,8 +350,6 @@ export default function(providerElement, storage, state, context, element) {
     useAnimations,
     visibleViewport,
     visibleViewportPadded,
-    toolbarHeight,
-    addListOrientation,
     setViewportBlockingRectangle,
     viewportBlockingRects,
     appViewport,
@@ -380,6 +378,10 @@ export default function(providerElement, storage, state, context, element) {
     setActiveSidebar,
     removeActiveSidebar,
     hasSidebarLeft,
-    hasSidebarRight
+    hasSidebarRight,
+    mainLayoutElement,
+    openDialog,
+    closeDialog,
+    currentDialog: readonly(currentDialog)
   };
 }

package/dist/runtime/icons/click.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.76,8.69A0.76,0.76 0 0,0 10,9.45V20.9C10,21.32 10.34,21.66 10.76,21.66C10.95,21.66 11.11,21.6 11.24,21.5L13.15,19.95L14.81,23.57C14.94,23.84 15.21,24 15.5,24C15.61,24 15.72,24 15.83,23.92L18.59,22.64C18.97,22.46 19.15,22 18.95,21.63L17.28,18L19.69,17.55C19.85,17.5 20,17.43 20.12,17.29C20.39,16.97 20.35,16.5 20,16.21L11.26,8.86L11.25,8.87C11.12,8.76 10.95,8.69 10.76,8.69M15,10V8H20V10H15M13.83,4.76L16.66,1.93L18.07,3.34L15.24,6.17L13.83,4.76M10,0H12V5H10V0M3.93,14.66L6.76,11.83L8.17,13.24L5.34,16.07L3.93,14.66M3.93,3.34L5.34,1.93L8.17,4.76L6.76,6.17L3.93,3.34M7,10H2V8H7V10" /></svg>

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

@@ -707,6 +707,7 @@ export interface DraggableNewItem {
 export interface DraggableActionItem {
     itemType: 'action';
     actionType: string;
+    action: AddAction;
     itemBundle?: string;
     element: () => HTMLElement;
 }
@@ -909,8 +910,7 @@ export type BlokkliFieldElement = {
     dropAlignment: FieldDropAlignment | null;
 };
 export type FieldDropAlignment = 'vertical' | 'horizontal';
-export type ActionPlacedEvent = {
-    id: string;
+export type ActionPlacedData = {
     preceedingUuid?: string;
     host: DraggableHostData;
     field: BlokkliFieldElement;
@@ -1006,6 +1006,7 @@ export type EventbusEvents = {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
+    'overlay:close': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
     'item:doubleClick': RenderedFieldListItem;
@@ -1029,7 +1030,6 @@ export type EventbusEvents = {
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;
-    'action:placed': ActionPlacedEvent;
     'action:selected': undefined;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;
@@ -1126,7 +1126,6 @@ export type AssistantResultMarkup = {
     content: string;
 };
 export type AssistantResult = AssistantResultMarkup;
-export type AddListOrientation = 'horizontal' | 'vertical' | 'sidebar';
 export type AdapterMethods = keyof BlokkliAdapter<any>;
 export type FeatureDefinitionSettingRadiosOption = {
     label: string;
@@ -1359,7 +1358,8 @@ export type AddAction = {
     itemBundle?: string;
     title: string;
     description?: string;
-    enabled?: boolean;
+    callback: (action: ActionPlacedData) => void;
+    enabled?: (item: RenderedFieldListItem) => boolean;
 };
 export type BlockEditContext = {
     isPublished: boolean;
@@ -1382,6 +1382,9 @@ export type RenderedFieldListItem = {
         libraryItemUuid: string;
         reusableBundle: string;
     } | null;
+    fragment: {
+        name: BlokkliFragmentName;
+    } | null;
     isNested: boolean;
     publishOn?: string | null;
     unpublishOn?: string | null;
@@ -1400,5 +1403,9 @@ export type RegisteredField = {
 export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
 export type VueClassProp = string | Record<string, boolean> | VueClassProp[];
 export type SidebarRegion = 'left' | 'right';
+export type GlobalUiDialog = {
+    id: string;
+    alignment: 'left' | 'right' | 'center';
+};
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.23",
+  "version": "2.0.0-alpha.24",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",

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

@@ -1,96 +0,0 @@
-<template>
-  <Teleport v-if="shouldRender" :key="renderKey" to="#blokkli-add-list-actions">
-    <AddListItem
-      :id="type"
-      ref="item"
-      :label="title"
-      :icon="icon"
-      :orientation="ui.addListOrientation.value"
-      :color="color"
-      :disabled="disabled"
-      data-element-type="action"
-      :data-action-type="type"
-      :data-item-bundle="itemBundle"
-      no-context-menu
-    />
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  nextTick,
-  ref,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { AddListItem } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const props = defineProps({
-  type: { type: String, required: true },
-  title: { type: String, required: true },
-  icon: { type: null, required: true },
-  itemBundle: { type: String, required: false },
-  color: { type: String, required: true },
-  description: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  weight: { type: Number, required: false }
-});
-const item = ref(null);
-const emit = defineEmits(["placed"]);
-const { ui, state, features, plugins } = useBlokkli();
-const addListAvailable = computed(
-  () => !!features.mountedFeatures.value.find((v) => v.id === "add-list")
-);
-const shouldRender = computed(
-  () => addListAvailable.value && state.editMode.value === "editing"
-);
-const renderKey = ref("");
-onBlokkliEvent("add-list:change", () => {
-  nextTick(() => {
-    renderKey.value = Math.round(Math.random() * 1e9).toString();
-  });
-});
-onBlokkliEvent("action:placed", (e) => {
-  if (e.id !== props.type) {
-    return;
-  }
-  emit("placed", e);
-});
-defineTourItem(() => {
-  if (!props.description) {
-    return;
-  }
-  return {
-    id: "plugin:add_action:" + props.type,
-    title: props.title,
-    text: props.description,
-    element: () => item.value?.getElement()
-  };
-});
-function addActionFunction() {
-  return {
-    id: props.type,
-    icon: props.icon,
-    color: props.color,
-    itemBundle: props.itemBundle,
-    title: props.title,
-    description: props.description,
-    enabled: !props.disabled
-  };
-}
-onMounted(() => {
-  plugins.addAddAction(addActionFunction);
-});
-onBeforeUnmount(() => {
-  plugins.removeAddAction(addActionFunction);
-});
-</script>
-
-<script>
-export default {
-  name: "PluginAddAction"
-};
-</script>

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

@@ -1,26 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { ActionPlacedEvent } from '#blokkli/types';
-declare const _default: import("vue").DefineComponent<{
-    type: string;
-    title: string;
-    icon: BlokkliIcon;
-    itemBundle?: string;
-    color: "rose" | "lime" | "accent";
-    description?: string;
-    disabled?: boolean;
-    weight?: number;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    placed: (data: ActionPlacedEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    type: string;
-    title: string;
-    icon: BlokkliIcon;
-    itemBundle?: string;
-    color: "rose" | "lime" | "accent";
-    description?: string;
-    disabled?: boolean;
-    weight?: number;
-}> & Readonly<{
-    onPlaced?: ((data: ActionPlacedEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,68 +0,0 @@
-<template>
-  <Teleport :to="to">
-    <button
-      :id="'bk-menu-list-button-' + id"
-      class="bk-menu-list-button"
-      :disabled="disabled"
-      :class="type ? 'bk-is-' + type : ''"
-      :style="{ order: weight || 0 }"
-      @click.prevent.stop="onClick"
-    >
-      <div class="bk-menu-list-icon">
-        <slot>
-          <Icon v-if="icon" :name="icon" />
-        </slot>
-      </div>
-      <strong>{{ title }}</strong>
-      <span>{{ description }}</span>
-    </button>
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  description: { type: String, required: true },
-  disabled: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  type: { type: String, required: false },
-  weight: { type: Number, required: false },
-  secondary: { type: Boolean, required: false }
-});
-const emit = defineEmits(["click"]);
-const { ui, debug } = useBlokkli();
-const logger = debug.createLogger("PluginMenuButton");
-const to = computed(
-  () => `#bk-menu-${props.secondary ? "secondary" : "primary"}`
-);
-function onClick() {
-  ui.menu.close();
-  logger.log("Click " + props.id);
-  emit("click");
-}
-const commandCallback = () => {
-  if (!props.disabled) {
-    emit("click");
-  }
-};
-defineCommands(() => {
-  return {
-    id: "plugin:menu_button:" + props.id,
-    group: "action",
-    label: props.title,
-    icon: props.icon,
-    disabled: props.disabled,
-    callback: commandCallback
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "PluginMenuButton"
-};
-</script>

package/dist/runtime/components/Edit/AddListItemIcon/index.vue

@@ -1,19 +0,0 @@
-<template>
-  <div
-    class="bk-list-item-icon"
-    :class="['bk-is-' + color, 'bk-is-' + orientation]"
-  >
-    <Icon v-if="icon" :name="icon" />
-    <ItemIcon v-else-if="bundle" :bundle="bundle" />
-  </div>
-</template>
-
-<script setup>
-import { ItemIcon, Icon } from "#blokkli/components";
-defineProps({
-  icon: { type: null, required: false, default: void 0 },
-  bundle: { type: String, required: false, default: void 0 },
-  color: { type: String, required: false, default: "default" },
-  orientation: { type: String, required: false, default: "horizontal" }
-});
-</script>