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

package/dist/runtime/plugins/blokkliDirectives.js

@@ -78,7 +78,7 @@ function createDirective(type) {
       if (!fieldName) {
         return;
       }
-      app.directive.registerDirectiveElement(el, fieldName, entity, type);
+      app.directive.registerDirectiveElement(el, fieldName, entity, type, false);
     },
     beforeUnmount(el, binding, vnode) {
       if (!isEditing()) {

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;
 }
@@ -737,23 +738,6 @@ export interface DraggableMediaLibraryItem {
     mediaBundle: string;
 }
 export type DraggableItem = DraggableClipboardItem | DraggableNewItem | DraggableActionItem | DraggableExistingBlock | DraggableExistingStructureBlock | DraggableReusableItem | DraggableSearchContentItem | DraggableMediaLibraryItem;
-/**
- * Defines a droppable entity field.
- */
-export type DroppableEntityField = {
-    /**
-     * The droppable field element.
-     */
-    element: HTMLElement;
-    /**
-     * The host.
-     */
-    host: DraggableExistingBlock | EntityContext;
-    /**
-     * The name of the field on which entities can be dropped.
-     */
-    fieldName: string;
-};
 export type MoveBlockEvent = {
     afterUuid?: string;
     item: DraggableExistingBlock;
@@ -817,7 +801,7 @@ export type AnimationFrameEvent = {
     time: number;
 };
 export type Message = {
-    type: 'success' | 'error';
+    type: 'success' | 'error' | 'warning';
     message: string;
     additional?: string | Error | unknown;
     replace?: boolean;
@@ -832,7 +816,6 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
-    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
     mouseArtboard: Coord;
@@ -841,6 +824,7 @@ export type CanvasDrawEvent = {
     artboardSize: Size;
     time: number;
     selectedUuids: string[];
+    dpi: number;
 };
 export type MakeReusableEvent = {
     label: string;
@@ -880,7 +864,6 @@ export type ScrollIntoViewEvent = {
 export type PluginMountEvent = {
     type: 'ItemDropdown';
     id: string;
-    isRendering: ComputedRef<boolean>;
 };
 export type PluginUnmountEvent = {
     type: 'ItemDropdown';
@@ -927,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;
@@ -1024,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;
@@ -1031,6 +1014,7 @@ export type EventbusEvents = {
     'animationFrame:before': AnimationFrameBeforeEvent;
     'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
+    'state:reload:before': undefined;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
@@ -1043,11 +1027,9 @@ export type EventbusEvents = {
     'editable:focus': EditableFieldFocusEvent;
     'editable:update': EditableFieldUpdateEvent;
     'editable:save': undefined;
-    'droppable:focus': DroppableEntityField;
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;
-    'action:placed': ActionPlacedEvent;
     'action:selected': undefined;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;
@@ -1144,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;
@@ -1377,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;
@@ -1400,6 +1382,9 @@ export type RenderedFieldListItem = {
         libraryItemUuid: string;
         reusableBundle: string;
     } | null;
+    fragment: {
+        name: BlokkliFragmentName;
+    } | null;
     isNested: boolean;
     publishOn?: string | null;
     unpublishOn?: string | null;
@@ -1417,5 +1402,10 @@ 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.22",
+  "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/DroppableEdit/index.vue

@@ -1,56 +0,0 @@
-<template>
-  <Teleport to="body">
-    <BlokkliTransition name="slide-in">
-      <FormOverlay
-        v-if="isVisible"
-        :id="id"
-        :title="title"
-        :icon="icon"
-        @close="onClose"
-      >
-        <slot />
-        <template #footer>
-          <button class="bk-button bk-is-primary" @click="onSubmit">
-            {{ $t("droppableEditFormSave", "Save") }}
-          </button>
-        </template>
-      </FormOverlay>
-    </BlokkliTransition>
-  </Teleport>
-</template>
-
-<script setup>
-import { FormOverlay, BlokkliTransition } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { ref, useBlokkli } from "#imports";
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  icon: { type: null, required: true },
-  entityType: { type: String, required: true }
-});
-const emit = defineEmits(["save"]);
-const { $t, types, state } = useBlokkli();
-const droppable = ref(null);
-const isVisible = ref(false);
-const onClose = () => {
-  isVisible.value = false;
-};
-const onSubmit = () => {
-  if (droppable.value) {
-    emit("save", droppable.value.field);
-  }
-  isVisible.value = false;
-  droppable.value = null;
-};
-onBlokkliEvent("droppable:focus", (field) => {
-  if (state.editMode.value !== "editing") {
-    return;
-  }
-  const config = types.getDroppableFieldConfig(field.fieldName, field.host);
-  if (config.allowedEntityType === props.entityType) {
-    isVisible.value = true;
-    droppable.value = { field, config };
-  }
-});
-</script>

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

@@ -1,24 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { DroppableEntityField } from '#blokkli/types';
-type __VLS_Props = {
-    id: string;
-    title: string;
-    icon: BlokkliIcon;
-    entityType: string;
-};
-declare var __VLS_18: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_18) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    save: (data: DroppableEntityField) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSave?: ((data: DroppableEntityField) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,76 +0,0 @@
-<template>
-  <Teleport v-if="enabled" to="#bk-blokkli-item-actions-dropdown">
-    <div
-      v-show="items.length"
-      :style="{
-  order: weight
-}"
-    >
-      <ol>
-        <li v-for="item in itemsMapped" :key="item.id">
-          <button
-            class="bk-blokkli-item-actions-type-dropdown-button"
-            :disabled="!item.enabled"
-            @click.prevent="onClick(item)"
-          >
-            <div class="bk-blokkli-item-actions-type-dropdown-icon">
-              <Icon v-if="item.icon" :name="item.icon" />
-              <ItemIcon v-else-if="item.bundle" :bundle="item.bundle" />
-            </div>
-            <div>
-              <div>{{ item.label }}</div>
-            </div>
-            <div v-if="item.description" class="bk-tooltip">
-              {{ item.description }}
-            </div>
-          </button>
-        </li>
-      </ol>
-    </div>
-  </Teleport>
-</template>
-
-<script>
-import { Icon, ItemIcon } from "#blokkli/components";
-import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-</script>
-
-<script setup>
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  enabled: { type: Boolean, required: true },
-  items: { type: Array, required: true },
-  icon: { type: null, required: false },
-  weight: { type: [String, Number], required: false }
-});
-const emit = defineEmits(["select"]);
-const itemsMapped = computed(() => {
-  return props.items.map((item) => {
-    return {
-      ...item,
-      icon: item.icon ?? props.icon,
-      enabled: item.enabled !== false
-    };
-  });
-});
-const { eventBus } = useBlokkli();
-const isRendering = computed(() => props.enabled);
-function onClick(item) {
-  emit("select", item);
-  eventBus.emit("action:selected");
-}
-onMounted(() => {
-  eventBus.emit("plugin:mount", {
-    type: "ItemDropdown",
-    id: props.id,
-    isRendering
-  });
-});
-onBeforeUnmount(() => {
-  eventBus.emit("plugin:unmount", {
-    type: "ItemDropdown",
-    id: props.id
-  });
-});
-</script>

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

@@ -1,31 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-type Item = {
-    id: string;
-    label: string;
-    description?: string;
-    enabled?: boolean;
-    icon?: BlokkliIcon;
-    bundle?: string;
-};
-declare const _default: <T extends Item>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly onSelect?: ((item: T) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSelect"> & {
-        id: string;
-        title: string;
-        enabled: boolean;
-        items: T[];
-        icon?: BlokkliIcon;
-        weight?: string | number;
-    } & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {};
-    emit: (e: "select", item: T) => void;
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

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

@@ -1,66 +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 } = useBlokkli();
-const to = computed(
-  () => `#bk-menu-${props.secondary ? "secondary" : "primary"}`
-);
-function onClick() {
-  ui.menu.close();
-  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>

package/dist/runtime/components/Edit/Features/BlockAddList/docs.md

@@ -1,15 +0,0 @@
-## Selectable blocks
-
-Renders a list of block bundles that can be added to the current page.
-
-## Rendered bundles
-
-The component uses the data returned by [adapter.getAllBundles] to get a list of
-all block bundles. It then uses the value from [adapter.getFieldConfig] to only
-render block bundles that can actually be added in the current edit session.
-
-_can be added_ is defined as such:
-
-- It can be added to any of the fields directly inside `<BlokkliProvider>`
-- It can be added to any of the nested fields of blocks that are allowed on the
-  page