@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/runtime/editor/features/templates/ManageDialog/index.vue

@@ -8,74 +8,44 @@
     'View, edit and delete your block templates.'
   )
 "
-    :width="800"
+    :width="1200"
     icon="bk_mdi_dashboard"
     hide-buttons
     @cancel="$emit('cancel')"
   >
     <div ref="dialogEl" class="bk-templates-manage">
+      <div v-if="config.length" class="bk-form-group">
+        <ConfigForm v-model="filters" :config />
+      </div>
       <Loading v-if="status === 'pending'" />
-      <template v-else-if="items.length">
+      <template v-if="items.length">
         <table class="bk-table">
           <thead>
             <tr>
-              <th>{{ $t("templatesManageDialogLabelColumn", "Name") }}</th>
               <th>
-                {{
-                  $t("templatesManageDialogDescriptionColumn", "Description")
-                }}
+                {{ $t("nameDescription", "Name / Description") }}
               </th>
               <th>
-                {{ $t("templatesManageDialogColumnActions", "Actions") }}
+                {{ $t("createdBy", "Created by") }}
+              </th>
+              <th>
+                {{ $t("created", "Created") }}
+              </th>
+              <th>
+                {{ $t("dateUpdated", "Updated") }}
+              </th>
+              <th>
+                {{ $t("actions", "Actions") }}
               </th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="item in items" :key="item.uuid">
-              <td>{{ item.label }}</td>
-              <td>{{ item.description || "-" }}</td>
-              <td class="bk-templates-manage-table-actions">
-                <div>
-                  <template v-if="confirmDeleteUuid === item.uuid">
-                    <button
-                      class="bk-button bk-is-danger bk-is-small"
-                      :disabled="isDeleting"
-                      :class="{ 'bk-is-loading': isDeleting }"
-                      @click="onConfirmDelete(item.uuid)"
-                    >
-                      {{ $t("templatesManageDialogConfirmDelete", "Delete") }}
-                    </button>
-                    <button
-                      class="bk-button bk-is-small"
-                      :disabled="isDeleting"
-                      @click="confirmDeleteUuid = ''"
-                    >
-                      {{ $t("templatesManageDialogCancelDelete", "Cancel") }}
-                    </button>
-                  </template>
-                  <template v-else>
-                    <button
-                      v-if="
-  adapterHasEditMethod && item.permissions.includes('edit')
-"
-                      class="bk-button bk-is-small"
-                      @click.prevent="onEdit(item.uuid)"
-                    >
-                      <Icon name="bk_mdi_edit" />
-                      {{ $t("templatesManageDialogEdit", "Edit") }}
-                    </button>
-                    <button
-                      v-if="item.permissions.includes('delete')"
-                      class="bk-button bk-is-small"
-                      @click="confirmDeleteUuid = item.uuid"
-                    >
-                      <Icon name="bk_mdi_delete" />
-                      {{ $t("templatesManageDialogDelete", "Delete") }}
-                    </button>
-                  </template>
-                </div>
-              </td>
-            </tr>
+            <TabelRow
+              v-for="item in items"
+              :key="item.uuid"
+              v-bind="item"
+              @refresh="refresh"
+            />
           </tbody>
         </table>
         <div v-if="totalPages > 1">
@@ -86,13 +56,6 @@
         {{ $t("templatesManageDialogNoResults", "No templates found.") }}
       </p>
     </div>
-    <NestedEditorOverlay
-      v-if="itemBeingEdited"
-      v-bind="itemBeingEdited"
-      :element="dialogEl"
-      @close="onCloseNested"
-      @submit="onSubmitNested"
-    />
   </DialogModal>
 </template>
 
@@ -103,28 +66,24 @@ import {
   computed,
   useAsyncData,
   watch,
-  useTemplateRef
+  reactive
 } from "#imports";
 import {
   DialogModal,
   Pagination,
   Loading,
-  Icon,
-  NestedEditorOverlay
+  ConfigForm
 } from "#blokkli/editor/components";
+import TabelRow from "./Item.vue";
 defineEmits(["cancel"]);
-const { $t, adapter, state } = useBlokkli();
-const dialogEl = useTemplateRef("dialogEl");
+const { $t, adapter } = useBlokkli();
 const page = ref(0);
 const confirmDeleteUuid = ref("");
-const isDeleting = ref(false);
-const itemBeingEdited = ref(null);
-const adapterHasEditMethod = computed(
-  () => !!adapter.templatesGetEditUrl
-);
+const filters = reactive({});
 const searchParams = computed(() => ({
   page: page.value,
-  filters: {}
+  filters: { ...filters },
+  includeItems: false
 }));
 const { data, status, refresh } = await useAsyncData(
   () => adapter.templatesSearch(searchParams.value),
@@ -138,47 +97,11 @@ const { data, status, refresh } = await useAsyncData(
     })
   }
 );
-function onCloseNested() {
-  itemBeingEdited.value = null;
-}
-function onSubmitNested() {
-  itemBeingEdited.value = null;
-  refresh();
-}
 const perPage = computed(() => data.value.perPage);
 const totalPages = computed(() => Math.ceil(data.value.total / perPage.value));
 const items = computed(() => data.value.items);
+const config = computed(() => data.value.filters);
 watch(page, () => {
   confirmDeleteUuid.value = "";
 });
-function onEdit(templateUuid) {
-  const editUrl = adapter.templatesGetEditUrl({ templateUuid });
-  if (!editUrl) {
-    return;
-  }
-  const template = items.value.find((v) => v.uuid === templateUuid);
-  if (!template) {
-    return;
-  }
-  itemBeingEdited.value = {
-    url: editUrl,
-    uuid: templateUuid,
-    title: $t("templatesEditOverlayTitle", "Edit template"),
-    label: template.label
-  };
-}
-async function onConfirmDelete(uuid) {
-  if (!adapter.templatesDelete) {
-    return;
-  }
-  isDeleting.value = true;
-  await state.mutateWithLoadingState(
-    () => adapter.templatesDelete({ templateUuid: uuid }),
-    $t("templatesDeleteError", "Failed to delete template."),
-    $t("templatesDeleteSuccess", "Template deleted successfully.")
-  );
-  isDeleting.value = false;
-  confirmDeleteUuid.value = "";
-  await refresh();
-}
 </script>

package/dist/runtime/editor/features/templates/index.vue

@@ -49,7 +49,7 @@ const { adapter } = defineBlokkliFeature({
   label: "Templates",
   description: "Add blocks from templates.",
   requiredAdapterMethods: ["templatesAdd", "templatesSearch"],
-  dependencies: ["add-list"]
+  dependencies: ["add-list", "entity-title"]
 });
 const { state, $t, ui, selection } = useBlokkli();
 const placedAction = ref(null);
@@ -77,7 +77,7 @@ async function onCreateTemplateConfirm(label, description, isDefault) {
   if (!adapter.templatesCreate || !createTemplateUuids.value.length) {
     return;
   }
-  await state.mutateWithLoadingState(
+  const isSuccess = await state.mutateWithLoadingState(
     () => adapter.templatesCreate({
       label,
       description: description || void 0,
@@ -90,7 +90,9 @@ async function onCreateTemplateConfirm(label, description, isDefault) {
       'Successfully created template "@label"'
     ).replace("@label", label)
   );
-  closeCreateDialog();
+  if (isSuccess) {
+    closeCreateDialog();
+  }
 }
 function onCreateTemplate() {
   const uuids = selection.uuids.value;
@@ -110,11 +112,11 @@ defineAddAction(() => {
     id: "template",
     icon: "bk_mdi_dashboard",
     color: "rose",
-    title: $t("templatesAddTemplate", "Add template"),
+    title: $t("templatesAddTemplate", "Template"),
     weight: 10,
     description: $t(
       "templatesAddTemplateDescription",
-      "<p>Drag the icon into the page to add blocks from a template.</p>"
+      "<p>Drag the icon into the page to add blocks from a template.</p><p>Templates are copied to your page and can be changed without affecting other pages.</p>"
     ),
     callback: (action) => {
       placedAction.value = action;

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

@@ -1,6 +1,6 @@
 import type { BlokkliAdapterSearchResults, AdapterSearchArguments } from '#blokkli/editor/adapter';
 import type { BlokkliItemHost } from '#blokkli/editor/types/field';
-import type { FieldListItem } from '#blokkli/types';
+import type { EntityMetadata, FieldListItem } from '#blokkli/types';
 import type { EditPermission } from '#blokkli/types/provider';
 export type AdapterAddTemplate = {
     templateUuid: string;
@@ -17,13 +17,17 @@ export type TemplateItem = {
     uuid: string;
     label: string;
     description?: string;
-    items: FieldListItem[];
+    items?: FieldListItem[];
+    itemBundles: string[];
     isDefault: boolean;
+    translationLanguages: string[];
     permissions: EditPermission[];
+    metadata: EntityMetadata | null;
 };
 export type AdapterTemplatesGetResult = BlokkliAdapterSearchResults<TemplateItem>;
 export type TemplatesSearchArguments = {
     host?: BlokkliItemHost;
+    includeItems: boolean;
 } & AdapterSearchArguments;
 export type AdapterDeleteTemplate = {
     templateUuid: string;
@@ -55,3 +59,8 @@ declare module '#blokkli/editor/adapter' {
         templatesGetEditUrl?: (e: AdapterTemplatesGetEditUrl) => string;
     }
 }
+declare module '#blokkli/editor/types/permissions' {
+    interface UserPermissionMap {
+        manage_default_templates: 'Manage default block templates.';
+    }
+}

package/dist/runtime/editor/features/transform/Dialog/index.vue

@@ -64,7 +64,12 @@ import {
   onMounted,
   onBeforeUnmount
 } from "#imports";
-import { ConfigForm, DiffViewerState, Icon, Loading } from "#blokkli/editor/components";
+import {
+  ConfigForm,
+  DiffViewerState,
+  Icon,
+  Loading
+} from "#blokkli/editor/components";
 const props = defineProps({
   plugin: { type: Object, required: true },
   uuids: { type: Array, required: false }

package/dist/runtime/editor/features/transform/index.vue

@@ -23,7 +23,10 @@ import {
 } from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import TransformDialog from "./Dialog/index.vue";
-import { defineCommands, defineItemDropdownAction } from "#blokkli/editor/composables";
+import {
+  defineCommands,
+  defineItemDropdownAction
+} from "#blokkli/editor/composables";
 function filterTransforms(plugins2, selectedItems, selectedBundles, allowedBundles) {
   return plugins2.filter((plugin) => {
     if (selectedItems.length < plugin.min) {
@@ -39,7 +42,7 @@ function filterTransforms(plugins2, selectedItems, selectedBundles, allowedBundl
     return selectedBundles.every((bundle) => plugin.bundles.includes(bundle));
   });
 }
-const { adapter } = defineBlokkliFeature({
+const { adapters } = defineBlokkliFeature({
   id: "transform",
   icon: "bk_mdi_function",
   label: "Transform",
@@ -56,7 +59,7 @@ const {
   status
 } = await useLazyAsyncData(
   () => {
-    return adapter.getTransformPlugins();
+    return adapters.getAggregated("getTransformPlugins");
   },
   {
     immediate: false,
@@ -77,10 +80,7 @@ const {
   execute: executeHostPlugins
 } = await useLazyAsyncData(
   () => {
-    if (adapter.getHostTransformPlugins) {
-      return adapter.getHostTransformPlugins();
-    }
-    return Promise.resolve([]);
+    return adapters.getAggregated("getHostTransformPlugins");
   },
   {
     immediate: !openPlugin.value,
@@ -118,7 +118,9 @@ function cancelTransform() {
 }
 watch(selection.uuids, async () => {
   if (status.value === "idle") {
-    execute();
+    execute().then(() => {
+      console.log(plugins.value);
+    });
   }
 });
 watch(selection.hasHostSelected, () => {
@@ -151,11 +153,14 @@ async function onTransformBlock(plugin, uuids, values) {
   ui.setTransform(plugin.label);
   openPlugin.value = null;
   await state.mutateWithLoadingState(
-    () => adapter.applyTransformPlugin({
-      uuids,
-      pluginId: plugin.id,
-      config: values
-    }),
+    () => (
+      // Route to correct source (base adapter or extension) based on plugin ID namespace
+      adapters.callNamespaced("applyTransformPlugin", {
+        uuids,
+        pluginId: plugin.id,
+        config: values
+      })
+    ),
     $t(
       "failedToTransform",
       'The action "@name" could not be executed.'
@@ -174,16 +179,16 @@ function onSubmitDialog(values) {
   }
 }
 async function onTransformHost(plugin, values) {
-  if (!adapter.applyHostTransformPlugin) {
-    return;
-  }
   ui.setTransform(plugin.label);
   openPlugin.value = null;
   await state.mutateWithLoadingState(
-    () => adapter.applyHostTransformPlugin({
-      pluginId: plugin.id,
-      config: values
-    }),
+    () => (
+      // Route to correct source (base adapter or extension) based on plugin ID namespace
+      adapters.callNamespaced("applyHostTransformPlugin", {
+        pluginId: plugin.id,
+        config: values
+      })
+    ),
     $t(
       "failedToTransform",
       'The action "@name" could not be executed.'

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

@@ -1,10 +1,10 @@
 import type { PluginConfigInput, PluginConfigInputItem } from '#blokkli/editor/types/pluginConfig';
-type AdapterApplyTransformPlugin = {
+export type AdapterApplyTransformPlugin = {
     pluginId: string;
     uuids: string[];
     config?: PluginConfigInputItem[];
 };
-type AdapterApplyHostTransformPlugin = {
+export type AdapterApplyHostTransformPlugin = {
     pluginId: string;
     config?: PluginConfigInputItem[];
 };
@@ -63,7 +63,10 @@ export interface HostTransformPlugin {
     preview?: boolean;
 }
 declare module '#blokkli/editor/adapter' {
-    interface BlokkliAdapter<T> {
+    /**
+     * Extensible transform methods - available on both base adapter and extensions.
+     */
+    interface AdapterExtensionMethods<T> {
         /**
          * Get all possible transform plugins.
          */
@@ -102,4 +105,3 @@ declare module '#blokkli/editor/adapter' {
         previewHostTransformPlugin?: (e: AdapterApplyHostTransformPlugin) => Promise<MutationResponseLike<T>>;
     }
 }
-export {};

package/dist/runtime/editor/features/validations/index.vue

@@ -35,7 +35,12 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, computed, useTemplateRef } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  useTemplateRef
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
 import { Icon } from "#blokkli/editor/components";
 import ValidationOverlay from "./Overlay/index.vue";

package/dist/runtime/editor/helpers/date/index.d.ts

@@ -0,0 +1 @@
+export declare function isValidDate(d: Date): boolean;

package/dist/runtime/editor/helpers/date/index.js

@@ -0,0 +1,3 @@
+export function isValidDate(d) {
+  return d instanceof Date && !isNaN(+d);
+}

package/dist/runtime/editor/helpers/options/index.d.ts

@@ -0,0 +1,20 @@
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { BlockDefinitionOptionsInput } from '#blokkli/types/definitions';
+export type OptionItem = {
+    property: string;
+    option: BlockOptionDefinition;
+};
+/**
+ * Get available options for a block definition by merging
+ * block-specific options with referenced global options.
+ */
+export declare function getAvailableOptions(definitionOptions: BlockDefinitionOptionsInput | undefined, globalOptionKeys: string[] | undefined, globalOptionsMap: Record<string, BlockOptionDefinition>): OptionItem[];
+/**
+ * Get the current value for an option, checking mutated options first,
+ * then falling back to the default value.
+ */
+export declare function getMutatedOptionValue(mutatedOptions: Record<string, Record<string, string>> | undefined, uuid: string, key: string, defaultValue: string | boolean | string[] | number | undefined): string | boolean | string[] | number | undefined;
+/**
+ * Convert a typed option value to the string format expected by the adapter.
+ */
+export declare function optionValueToStorable(definition: BlockOptionDefinition, value: string | string[] | boolean | undefined | null | number): string;

package/dist/runtime/editor/helpers/options/index.js

@@ -0,0 +1,60 @@
+export function getAvailableOptions(definitionOptions, globalOptionKeys, globalOptionsMap) {
+  const options = definitionOptions || {};
+  const global = (globalOptionKeys || []).reduce(
+    (acc, key) => {
+      const globalDefinition = globalOptionsMap[key];
+      if (globalDefinition) {
+        acc[key] = globalDefinition;
+      }
+      return acc;
+    },
+    {}
+  );
+  return Object.entries({ ...options, ...global }).map(
+    ([property, option]) => ({
+      property,
+      option
+    })
+  );
+}
+export function getMutatedOptionValue(mutatedOptions, uuid, key, defaultValue) {
+  if (!uuid) {
+    return "";
+  }
+  const blockMutatedOptions = mutatedOptions?.[uuid];
+  if (blockMutatedOptions !== void 0 && blockMutatedOptions[key] !== void 0) {
+    return blockMutatedOptions[key];
+  }
+  return defaultValue;
+}
+export function optionValueToStorable(definition, value) {
+  if (definition.type === "checkbox") {
+    if (typeof value === "string" && (value === "1" || value === "0")) {
+      return value;
+    } else if (typeof value === "boolean") {
+      return value === true ? "1" : "0";
+    }
+    return "0";
+  } else if (definition.type === "text" || definition.type === "radios" || definition.type === "datetime-local") {
+    if (typeof value === "string") {
+      return value;
+    }
+  } else if (definition.type === "checkboxes") {
+    if (Array.isArray(value)) {
+      return value.join(",");
+    } else if (typeof value === "string") {
+      return value;
+    }
+  } else if (definition.type === "number" || definition.type === "range") {
+    if (typeof value === "number") {
+      return String(value);
+    } else if (typeof value === "string") {
+      return value;
+    }
+  } else if (definition.type === "color") {
+    if (typeof value === "string") {
+      return value;
+    }
+  }
+  return "";
+}

package/dist/runtime/editor/helpers/webgl/index.d.ts

@@ -5,6 +5,7 @@ type RectangleBufferRect = Rectangle & {
     index: number;
     radius?: [number, number, number, number];
     state?: number;
+    nestingLevel?: number;
 };
 type RectangleBufferCollectorOptions = {
     padding?: number;
@@ -12,6 +13,7 @@ type RectangleBufferCollectorOptions = {
 };
 type PlacedRectangle = Rectangle & {
     originalY: number;
+    nestingLevel?: number;
 };
 type PendingRect<T> = {
     rect: Omit<T, 'index'>;
@@ -35,7 +37,9 @@ export declare class RectangleBufferCollector<T extends RectangleBufferRect> {
     pendingRects: PendingRect<T>[];
     constructor(options?: RectangleBufferCollectorOptions);
     reset(): void;
-    getIdealPosition(x: number, y: number, width: number, height: number, isEmptyField?: boolean): Rectangle;
+    getIdealPosition(x: number, y: number, width: number, height: number, isEmptyField?: boolean, nestingLevel?: number): Rectangle & {
+        nestingLevel?: number;
+    };
     addRectangle(rect: Omit<T, 'index'>, type: number, checkOverlap?: boolean): void;
     processPendingRects(): void;
     getIndex(id: string): number | undefined;

package/dist/runtime/editor/helpers/webgl/index.js

@@ -35,14 +35,15 @@ export class RectangleBufferCollector {
     this.bufferInfo = null;
     this.pendingRects = [];
   }
-  getIdealPosition(x, y, width, height, isEmptyField = false) {
+  getIdealPosition(x, y, width, height, isEmptyField = false, nestingLevel) {
     const MIN_HEIGHT = 5;
     const rect = {
       x,
       y,
       width,
       height,
-      originalY: y
+      originalY: y,
+      nestingLevel
     };
     const intersections = [];
     for (let i = 0; i < this.placedRects.length; i++) {
@@ -52,7 +53,17 @@ export class RectangleBufferCollector {
         ...placed,
         height: Math.max(placed.height, MIN_HEIGHT)
       };
-      if (intersects(testRect, testPlaced)) {
+      if (isEmptyField) {
+        const buffer = 1;
+        const bufferedRect = {
+          ...testRect,
+          y: testRect.y - buffer,
+          height: testRect.height + buffer * 2
+        };
+        if (intersects(bufferedRect, testPlaced)) {
+          intersections.push(placed);
+        }
+      } else if (intersects(testRect, testPlaced)) {
         intersections.push(placed);
       }
     }
@@ -62,19 +73,39 @@ export class RectangleBufferCollector {
     }
     intersections.sort((a, b) => a.originalY - b.originalY);
     if (isEmptyField) {
+      const MAX_DISPLACEMENT = 100;
       for (let i = 0; i < intersections.length; i++) {
         const existingRect = intersections[i];
-        const rectsAbove = this.placedRects.filter(
-          (r) => r.y + r.height <= existingRect.y && r.x < x + width && r.x + r.width > x
-        );
-        let prevBottom = 0;
-        if (rectsAbove.length > 0) {
-          prevBottom = Math.max(...rectsAbove.map((r) => r.y + r.height));
+        const intersectionIsAbove = existingRect.y < y;
+        let gapStart;
+        let gapEnd;
+        if (intersectionIsAbove) {
+          gapStart = existingRect.y + existingRect.height;
+          const rectsBelow = this.placedRects.filter(
+            (r) => r.y >= gapStart && r.y <= y + MAX_DISPLACEMENT && r.x < x + width && r.x + r.width > x
+          );
+          if (rectsBelow.length > 0) {
+            gapEnd = Math.min(...rectsBelow.map((r) => r.y));
+          } else {
+            gapEnd = y + MAX_DISPLACEMENT;
+          }
+        } else {
+          gapEnd = existingRect.y;
+          const rectsAbove = this.placedRects.filter(
+            (r) => r.y + r.height <= gapEnd && r.y + r.height >= y - MAX_DISPLACEMENT && r.x < x + width && r.x + r.width > x
+          );
+          if (rectsAbove.length > 0) {
+            gapStart = Math.max(...rectsAbove.map((r) => r.y + r.height));
+          } else {
+            gapStart = Math.max(0, y - MAX_DISPLACEMENT);
+          }
         }
-        const nextTop = existingRect.y;
-        const availableSpace = nextTop - prevBottom;
+        const availableSpace = gapEnd - gapStart;
         if (availableSpace >= height) {
-          const centeredY = prevBottom + (availableSpace - height) / 2;
+          const centeredY = gapStart + (availableSpace - height) / 2;
+          if (Math.abs(centeredY - y) > MAX_DISPLACEMENT) {
+            continue;
+          }
           const centeredRect = { ...rect, y: centeredY };
           let hasIntersection = false;
           for (const placed of this.placedRects) {
@@ -210,7 +241,8 @@ export class RectangleBufferCollector {
             rect.y,
             rect.width,
             rect.height,
-            isEmptyField
+            isEmptyField,
+            rect.nestingLevel
           );
         } else {
           finalPosition = {

package/dist/runtime/editor/icons/svg/stars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74" /></svg>

package/dist/runtime/editor/plugins/Sidebar/Detached/index.d.vue.ts

@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
         width: number;
         height: number;
     };
-    minWidth: number;
     minHeight: number;
+    minWidth: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;