@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -0,0 +1,18 @@
+import { type Ref, type ComputedRef } from '#imports';
+import type { BlockDefinition, FragmentDefinition } from '#blokkli-build/definitions';
+import type { ValidFieldListTypes, BlockBundleWithNested } from '#blokkli-build/generated-types';
+import type { DeepReadonly } from 'vue';
+import type { BlockDefinitionOptionsInput } from '../types/index.js';
+import { type RuntimeBlockOptionArray } from '#blokkli-build/runtime-options';
+export type DefinitionProvider = {
+    getBlockDefinition: (bundle: string, fieldListType: ValidFieldListTypes, parentBundle?: BlockBundleWithNested) => BlockDefinition | undefined;
+    getDefaultDefinition: (bundle: string) => BlockDefinition | undefined;
+    getFragmentDefinition: (name: string) => FragmentDefinition | undefined;
+    getBlockIcon: (bundle: string) => string | undefined;
+    fragmentDefinitions: ComputedRef<FragmentDefinition[]>;
+    blockDefinitions: ComputedRef<BlockDefinition[]>;
+    globalOptions: DeepReadonly<Ref<BlockDefinitionOptionsInput>>;
+    runtimeOptions: DeepReadonly<Ref<Record<string, Record<string, RuntimeBlockOptionArray>>>>;
+    renderKey: DeepReadonly<Ref<string>>;
+};
+export default function (): DefinitionProvider;

package/dist/runtime/helpers/definitionProvider.js

@@ -0,0 +1,96 @@
+import { computed, ref, readonly } from "#imports";
+import definitions from "#blokkli-build/definitions";
+import {
+  OPTIONS
+} from "#blokkli-build/runtime-options";
+export default function() {
+  const blocks = ref(definitions.blocks);
+  const fragments = ref(definitions.fragments);
+  const renderKey = ref(definitions.renderKey);
+  const blockIcons = ref(definitions.icons);
+  const allGlobalOptions = ref(
+    definitions.globalOptions
+  );
+  const runtimeOptions = ref(OPTIONS);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/definitions", (mod) => {
+      const newDefinitions = mod;
+      renderKey.value = newDefinitions?.default.renderKey || "";
+      blocks.value = newDefinitions?.default?.blocks || [];
+      fragments.value = newDefinitions?.default?.fragments || [];
+      blockIcons.value = newDefinitions?.default?.icons || {};
+      allGlobalOptions.value = newDefinitions?.default?.globalOptions || {};
+    });
+    import.meta.hot.accept("#blokkli-build/runtime-options", (mod) => {
+      if (mod?.OPTIONS) {
+        runtimeOptions.value = mod.OPTIONS;
+      }
+    });
+  }
+  const blocksByKey = computed(
+    () => blocks.value.reduce((acc, definition) => {
+      const bundle = definition.bundle;
+      const renderForValue = definition.renderFor || [];
+      const renderForList = Array.isArray(renderForValue) ? renderForValue : [renderForValue];
+      if (renderForList.length) {
+        renderForList.forEach((renderFor) => {
+          if ("parentBundle" in renderFor) {
+            acc[bundle + "__parent:" + renderFor.parentBundle] = definition;
+          } else if ("fieldList" in renderFor) {
+            acc[bundle + "__field:" + renderFor.fieldList] = definition;
+          } else if ("fieldListType" in renderFor) {
+            acc[bundle + "__field:" + renderFor.fieldListType] = definition;
+          }
+        });
+      } else {
+        acc[bundle] = definition;
+      }
+      return acc;
+    }, {})
+  );
+  const fragmentsByName = computed(
+    () => fragments.value.reduce(
+      (acc, definition) => {
+        acc[definition.name] = definition;
+        return acc;
+      },
+      {}
+    )
+  );
+  function getBlockDefinition(bundle, fieldListType, parentBundle) {
+    const forFieldListType = bundle + "__field:" + fieldListType;
+    if (blocksByKey.value[forFieldListType]) {
+      return blocksByKey.value[forFieldListType];
+    }
+    if (parentBundle) {
+      const forParentBundle = bundle + "__parent:" + parentBundle;
+      if (blocksByKey.value[forParentBundle]) {
+        return blocksByKey.value[forParentBundle];
+      }
+    }
+    return blocksByKey.value[bundle];
+  }
+  function getFragmentDefinition(name) {
+    return fragmentsByName.value[name];
+  }
+  function getDefaultDefinition(bundle) {
+    return blocksByKey.value[bundle];
+  }
+  function getBlockIcon(bundle) {
+    return blockIcons.value[bundle];
+  }
+  return {
+    getBlockDefinition,
+    getFragmentDefinition,
+    getDefaultDefinition,
+    getBlockIcon,
+    fragmentDefinitions: computed(() => fragments.value),
+    blockDefinitions: computed(() => blocks.value),
+    globalOptions: readonly(allGlobalOptions),
+    runtimeOptions: readonly(runtimeOptions),
+    renderKey: readonly(renderKey)
+  };
+}
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

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

@@ -2,6 +2,7 @@ import { type ComputedRef } from '#imports';
 import type { DraggableExistingBlock, BlokkliFieldElement, DraggableItem, DroppableEntityField, EntityContext, Rectangle } from '#blokkli/types';
 import type { UiProvider } from './uiProvider.js';
 import type { DebugProvider } from './debugProvider.js';
+import type { DefinitionProvider } from './definitionProvider.js';
 type RegisteredFieldType = {
     entityType: string;
     entityBundle: string;
@@ -44,5 +45,5 @@ export type DomProvider = {
      */
     getDragElement: (block: DraggableExistingBlock) => HTMLElement | undefined;
 };
-export default function (ui: UiProvider, debug: DebugProvider): DomProvider;
+export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider): DomProvider;
 export {};

package/dist/runtime/helpers/domProvider.js

@@ -9,7 +9,6 @@ import {
 import { cloneElementWithStyles } from "./dom/index.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
 import useDelayedIntersectionObserver from "./composables/useDelayedIntersectionObserver.js";
-import { getDefinition } from "#blokkli-build/definitions";
 const buildFieldElement = (element) => {
   const key = element.dataset.fieldKey;
   const name = element.dataset.fieldName;
@@ -49,7 +48,7 @@ function rectWithTime(rect, time) {
     time: time || performance.now()
   };
 }
-export default function(ui, debug) {
+export default function(ui, debug, definitions) {
   const artboardElement = ui.artboardElement();
   const logger = debug.createLogger("DomProvider");
   const mutationsReady = ref(true);
@@ -177,7 +176,11 @@ export default function(ui, debug) {
     if (el.classList.contains("bk-block-proxy")) {
       return el;
     }
-    const definition = getDefinition(bundle, fieldListType, parentBlockBundle);
+    const definition = definitions.getBlockDefinition(
+      bundle,
+      fieldListType,
+      parentBlockBundle
+    );
     if (!definition) {
       throw new Error("Failed to load definition for bundle: " + bundle);
     }

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

@@ -0,0 +1,2 @@
+export declare function getBlokkliItemProxyComponent(bundle: string): any;
+export declare function getBlokkliItemDiffComponent(bundle: string): any;

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

@@ -0,0 +1,10 @@
+import {
+  PROXY_COMPONENTS,
+  DIFF_COMPONENTS
+} from "#blokkli-build/edit-components";
+export function getBlokkliItemProxyComponent(bundle) {
+  return PROXY_COMPONENTS[bundle];
+}
+export function getBlokkliItemDiffComponent(bundle) {
+  return DIFF_COMPONENTS[bundle];
+}

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

@@ -3,7 +3,8 @@ import { type ValidFeatureKey } from '#blokkli-build/features';
 import { type ComputedRef } from '#imports';
 import type { StorageProvider } from './storageProvider.js';
 export type FeaturesProvider = {
-    features: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
+    features: ComputedRef<FeatureDefinition[]>;
+    mountedFeatures: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
     betaFeatures: ComputedRef<{
         id: ValidFeatureKey;
         label: string;

package/dist/runtime/helpers/featuresProvider.js

@@ -1,10 +1,17 @@
 import {
-  featureComponents
+  featureDefinitions
 } from "#blokkli-build/features";
 import { computed, ref } from "#imports";
 import { falsy } from "./index.js";
 export default function(storage) {
+  const definitions = ref(featureDefinitions);
   const mountedFeatures = ref([]);
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/features", (mod) => {
+      const newDefinitions = mod;
+      definitions.value = newDefinitions?.featureDefinitions || [];
+    });
+  }
   const settingsSettings = storage.use(
     "feature:settings:settings",
     {}
@@ -18,15 +25,16 @@ export default function(storage) {
       return null;
     }).filter(falsy);
   });
-  const features = computed(() => mountedFeatures.value);
   const betaFeatures = computed(
-    () => featureComponents.filter((v) => v.beta).map((v) => {
-      return {
-        id: v.id,
-        label: v.label,
-        description: v.description
-      };
-    })
+    () => definitions.value.map((v) => {
+      if (v.beta && v.label) {
+        return {
+          id: v.id,
+          label: v.label,
+          description: v.description
+        };
+      }
+    }).filter(falsy)
   );
   const unmount = (id) => {
     mountedFeatures.value = mountedFeatures.value.filter((v) => v.id !== id);
@@ -35,7 +43,8 @@ export default function(storage) {
     mountedFeatures.value.push(feature);
   };
   return {
-    features,
+    features: computed(() => definitions.value),
+    mountedFeatures: computed(() => mountedFeatures.value),
     betaFeatures,
     enabledBetaFeatures,
     mount,

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

@@ -1,4 +1,4 @@
-import type { MutatedField, UpdateBlockOptionEvent } from '../types.js';
+import type { MutatedField, UpdateBlockOptionEvent } from '../types/index.js';
 type FrameEventBusEvents = {
     selectItems: string[];
     mutatedFields: MutatedField[];

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

@@ -0,0 +1 @@
+export declare function getComponent(type: 'block' | 'fragment', bundle: string, fieldListType?: string, parentBundle?: string): any;

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

@@ -0,0 +1,44 @@
+import { chunks, chunkMapping } from "#blokkli-build/imports";
+import { defineAsyncComponent } from "#imports";
+function objectOrImport(key) {
+  const chunkName = chunkMapping[key];
+  if (!chunkName) {
+    return;
+  }
+  const chunkEntry = chunks[chunkName];
+  if (!chunkEntry) {
+    return;
+  }
+  if (typeof chunkEntry === "function") {
+    return defineAsyncComponent(
+      () => chunkEntry().then((group) => {
+        const item2 = group[key];
+        if (item2 && "loadComponent" in item2) {
+          return item2.loadComponent();
+        }
+        return item2;
+      })
+    );
+  }
+  const item = chunkEntry[key];
+  if (item && "loadComponent" in item) {
+    return defineAsyncComponent(() => item.loadComponent());
+  }
+  return item;
+}
+export function getComponent(type, bundle, fieldListType, parentBundle) {
+  if (fieldListType) {
+    const key2 = `${type}:${bundle}__f:${fieldListType}`;
+    if (chunkMapping[key2]) {
+      return objectOrImport(key2);
+    }
+  }
+  if (parentBundle) {
+    const key2 = `${type}:${bundle}__p:${parentBundle}`;
+    if (chunkMapping[key2]) {
+      return objectOrImport(key2);
+    }
+  }
+  const key = `${type}:${bundle}`;
+  return objectOrImport(key);
+}

package/dist/runtime/helpers/index.js

@@ -1,6 +1,5 @@
 import { easeOutSine } from "./easing.js";
 import { useRuntimeConfig } from "#imports";
-import { getDefinition } from "#blokkli-build/definitions";
 export function falsy(value) {
   return value !== null && value !== void 0;
 }
@@ -24,13 +23,8 @@ export function buildDraggableItem(element) {
     const isNew = dataset.isNew === "true";
     const parentBlockBundle = hostType === itemEntityType ? hostBundle : void 0;
     if (uuid && hostType && hostUuid && hostFieldName && itemBundle && hostBundle && entityType && hostFieldListType) {
-      const definition = getDefinition(
-        itemBundle,
-        hostFieldListType,
-        parentBlockBundle
-      );
       const libraryLabel = dataset.bkLibraryLabel;
-      const editTitle = libraryLabel || (definition?.editor?.editTitle ? definition?.editor.editTitle(element) : void 0);
+      const editTitle = libraryLabel || "";
       return {
         itemType: "existing",
         element: () => document.querySelector(`[data-uuid="${uuid}"]`),
@@ -205,7 +199,10 @@ export function calculateIntersection(rectA, rectB) {
 }
 export function findClosestRectangle(x, y, rects) {
   let closestRect = rects[0];
-  let minDistance = distanceToClosestRectangleEdge(x, y, rects[0]);
+  if (!closestRect) {
+    throw new Error("Need at least one rect.");
+  }
+  let minDistance = distanceToClosestRectangleEdge(x, y, closestRect);
   for (let i = 1; i < rects.length; i++) {
     const rect = rects[i];
     const distance = distanceToClosestRectangleEdge(x, y, rect);

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

@@ -10,6 +10,7 @@ import type { FieldListItem } from '#blokkli/types';
  * Returns our "internal" value of a checkbox state.
  */
 export declare function mapCheckboxTrue(v?: unknown): '1' | '0';
+export declare function isValidDatetimeLocalValue(value: string): boolean;
 /**
  * Get the runtime value for an option.
  *
@@ -29,6 +30,10 @@ export declare function isVisibleByOptions(item?: FieldListItemTyped | FieldList
  */
 export declare function getRuntimeOptions<K extends keyof RuntimeBlockOptions>(item: FieldListItemTyped & {
     bundle: K;
+}, context?: {
+    parentType: string;
+} | {
+    fieldListType: string;
 }, fromLibraryOptions?: Record<string, any>): RuntimeBlockOptions[K];
 /**
  * Get the actual block for reusable blocks.

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

@@ -1,5 +1,5 @@
 import {
-  BLOCK_OPTIONS
+  OPTIONS
 } from "#blokkli-build/runtime-options";
 import {
   bundlesWithVisibleLanguage,
@@ -9,10 +9,17 @@ import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
+export function isValidDatetimeLocalValue(value) {
+  const pattern = (
+    // eslint-disable-next-line regexp/no-unused-capturing-group
+    /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])T([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d(\.\d{1,3})?)?$/
+  );
+  return pattern.test(value);
+}
 export function getRuntimeOptionValue(definition, value) {
   const type = Array.isArray(definition) ? definition[0] : definition.type;
   const defaultValue = Array.isArray(definition) ? definition[1] : definition.default;
-  if (value === null || value === void 0) {
+  if ((value === null || value === void 0) && defaultValue !== void 0) {
     return defaultValue;
   }
   if (type === "checkbox") {
@@ -46,6 +53,11 @@ export function getRuntimeOptionValue(definition, value) {
     }
   } else if (type === "text" && typeof value === "string") {
     return value;
+  } else if (type === "datetime-local" && typeof value === "string" && isValidDatetimeLocalValue(value)) {
+    return value;
+  }
+  if (defaultValue === void 0) {
+    return "";
   }
   return defaultValue;
 }
@@ -69,7 +81,7 @@ export function isVisibleByOptions(item, language) {
   }
   return true;
 }
-export function getRuntimeOptions(item, fromLibraryOptions) {
+export function getRuntimeOptions(item, context, fromLibraryOptions) {
   if (item.bundle === "from_library" && "libraryItem" in item.props) {
     const actualBlock = item.props.libraryItem?.block;
     if (!actualBlock) {
@@ -77,10 +89,11 @@ export function getRuntimeOptions(item, fromLibraryOptions) {
     }
     return getRuntimeOptions(
       actualBlock,
+      context,
       item.options
     );
   }
-  const availableOptions = BLOCK_OPTIONS[item.bundle] || {};
+  const availableOptions = OPTIONS["block:" + item.bundle] || {};
   return Object.entries(availableOptions).reduce(
     (acc, [key, definition]) => {
       if (fromLibraryOptions && fromLibraryOptions[key] !== void 0 && fromLibraryOptions[key] !== null) {

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

@@ -1,5 +1,5 @@
 import { type Ref, type ComputedRef } from 'vue';
-import type { BlokkliAdapter, AdapterContext } from '../adapter.js';
+import type { BlokkliAdapter, AdapterContext } from '../adapter/index.js';
 import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem } from '#blokkli/types';
 import type { TextProvider } from './textProvider.js';
 export type BlokkliOwner = {

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

@@ -1,4 +1,4 @@
 import { type ComputedRef } from 'vue';
-import type { AdapterContext } from '../adapter.js';
+import type { AdapterContext } from '../adapter/index.js';
 export type TextProvider = (key: string, defaultValue?: string) => string;
 export default function (context?: ComputedRef<AdapterContext>): TextProvider;

package/dist/runtime/helpers/themeProvider.js

@@ -85,7 +85,10 @@ export default function() {
       const meta = document.createElement("meta");
       meta.name = "theme-color";
       meta.content = THEME_COLOR;
-      document.getElementsByTagName("head")[0].appendChild(meta);
+      const head = document.getElementsByTagName("head")[0];
+      if (head) {
+        head.appendChild(meta);
+      }
     }
   });
   onBeforeUnmount(() => {

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

@@ -1,2 +1,2 @@
-import type { TransformPlugin } from '../types.js';
+import type { TransformPlugin } from '../types/index.js';
 export declare function filterTransforms(plugins: TransformPlugin[], selectedItems: any[], selectedBundles: string[], allowedBundles: string[]): TransformPlugin[];

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

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue';
-import type { FieldConfig, BlockBundleDefinition, EditableFieldConfig, BlockDefinitionInput, BlockDefinitionOptionsInput, DroppableFieldConfig, DraggableExistingBlock, EntityContext } from '../types.js';
-import type { AdapterContext, BlokkliAdapter } from '../adapter.js';
+import type { FieldConfig, BlockBundleDefinition, EditableFieldConfig, BlockDefinitionInput, BlockDefinitionOptionsInput, DroppableFieldConfig, DraggableExistingBlock, EntityContext } from '../types/index.js';
+import type { AdapterContext, BlokkliAdapter } from '../adapter/index.js';
 import type { SelectionProvider } from './selectionProvider.js';
 export type BlokkliBlockType = BlockBundleDefinition & {
     definition: BlockDefinitionInput<BlockDefinitionOptionsInput, never[]> | undefined;

package/dist/runtime/helpers/uiProvider.js

@@ -169,7 +169,6 @@ export default function(storage, state) {
     }
     return height;
   });
-  const viewportPadding = computed(() => 10);
   const blockingPaddingX = computed(() => 15);
   const blockingPaddingY = computed(() => 50);
   const viewportBlockingRects = computed(() => {
@@ -195,10 +194,10 @@ export default function(storage, state) {
   });
   const visibleViewportPadded = computed(() => {
     return {
-      x: visibleViewportX.value + viewportPadding.value,
-      y: visibleViewportY.value + viewportPadding.value,
-      width: visibleViewportWidth.value - 2 * viewportPadding.value,
-      height: visibleViewportHeight.value - 2 * viewportPadding.value
+      x: visibleViewportX.value + 10,
+      y: visibleViewportY.value + 10,
+      width: visibleViewportWidth.value - 10 - 16 - 10,
+      height: visibleViewportHeight.value - 20
     };
   });
   function setProxyModeClass() {

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

@@ -120,7 +120,7 @@ export class RectangleBufferCollector {
     this.index++;
   }
   getIndex(id) {
-    return this.rects[id].index || void 0;
+    return this.rects[id]?.index;
   }
   updateRectangle() {
   }

package/dist/runtime/icons/arrow-right-thin.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11V13H20L14.5 18.5L15.92 19.92L23.84 12L15.92 4.07996L14.5 5.49996L20 11H0Z" />
+</svg>

package/dist/runtime/public/_blokkli-assets/check.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"
+    fill="white"
+  />
+</svg>

package/dist/runtime/public/_blokkli-assets/loader.svg

@@ -0,0 +1 @@
+<svg fill="white" width="36" height="36" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_b2T7{animation:spinner_xe7Q .8s linear infinite}.spinner_YRVV{animation-delay:-.65s}.spinner_c9oY{animation-delay:-.5s}@keyframes spinner_xe7Q{93.75%,100%{r:3px}46.875%{r:.2px}}</style><circle class="spinner_b2T7" cx="4" cy="12" r="3"/><circle class="spinner_b2T7 spinner_YRVV" cx="12" cy="12" r="3"/><circle class="spinner_b2T7 spinner_c9oY" cx="20" cy="12" r="3"/></svg>

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

@@ -1,3 +1,4 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 type DefinitionOptionText = {
     type: 'text';
     default: string;
@@ -22,6 +23,14 @@ type DefinitionOptionRange = {
     step: number;
     group?: string;
 };
+type DefinitionOptionDateTimeLocal = {
+    type: 'datetime-local';
+    label: string;
+    default?: string;
+    min?: string;
+    max?: string;
+    group?: string;
+};
 type DefinitionOptionCheckbox = {
     type: 'checkbox';
     default: boolean;
@@ -66,7 +75,7 @@ type DefinitionOptionRadiosRadios = {
     options: Record<string, string>;
 };
 type DefinitionOptionRadiosIconsOption = {
-    icon: `icon-blokkli-option-${string}`;
+    icon: BlokkliIcon;
     label: string;
 };
 type DefinitionOptionRadiosIcons = {
@@ -79,5 +88,5 @@ type DefinitionOptionRadios = {
     default: string;
     group?: string;
 } & (DefinitionOptionRadiosColors | DefinitionOptionRadiosGrid | DefinitionOptionRadiosRadios | DefinitionOptionRadiosIcons);
-export type BlockOptionDefinition = DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadios | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber;
+export type BlockOptionDefinition = DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadios | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber | DefinitionOptionDateTimeLocal;
 export {};