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

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 {};

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

@@ -11,20 +11,21 @@ import type { StateProvider } from '../helpers/stateProvider.js';
 import type { TextProvider } from '../helpers/textProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
 import type { BlockOptionDefinition } from './blokkOptions.js';
-import type { BlokkliAdapter, AdapterContext, MutationResponseLike } from './../adapter.js';
+import type { BlokkliAdapter, AdapterContext, MutationResponseLike } from './../adapter/index.js';
 import type { BroadcastProvider } from '#blokkli/helpers/broadcastProvider';
 import type { FeaturesProvider } from '#blokkli/helpers/featuresProvider';
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
-import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys } from '#blokkli-build/generated-types';
-import type { globalOptions } from '#blokkli-build/definitions';
+import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
 import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
+import type { GlobalOptionsType } from '#blokkli-build/definitions';
 import type { CommandsProvider } from '#blokkli/helpers/commandsProvider';
 import type { TourProvider } from '#blokkli/helpers/tourProvider';
 import type { DropAreaProvider } from '#blokkli/helpers/dropAreaProvider';
 import type { RGB } from './theme.js';
 import type { DebugProvider } from '#blokkli/helpers/debugProvider';
 import type getVideoId from 'get-video-id';
+import type { DefinitionProvider } from '../helpers/definitionProvider.js';
 export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string, successMessage?: string) => Promise<boolean>;
 type GetType<T> = T extends {
     options: infer O;
@@ -43,10 +44,10 @@ export type BlockDefinitionOptionsInput = {
 type WithOptions<T extends BlockDefinitionOptionsInput> = {
     [K in keyof T]: GetType<T[K]>;
 };
-type GlobalOptionsType = typeof globalOptions;
 type GlobalOptionsKeyTypes<T extends ValidGlobalConfigKeys> = {
     [K in T[number]]: GetType<GlobalOptionsType[K]>;
 };
+export type BundleKey = keyof BundleProps;
 export type DefineBlokkliContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends ValidGlobalConfigKeys | undefined = undefined> = {
     /**
      * The UUID of the item.
@@ -83,25 +84,29 @@ export type DefineBlokkliContext<T extends BlockDefinitionOptionsInput = BlockDe
      * options.
      */
     options: ComputedRef<(T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object)>;
+    /**
+     * The provider context.
+     */
+    provider: ComputedRef<BlokkliProviderEntityContext | null>;
 };
-type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined> = {
+type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined, B extends BundleKey | string = string> = {
     options: (T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object);
     parentType: BlockBundleWithNested | undefined;
     fieldListType: ValidFieldListTypes;
-    props: Record<string, any>;
+    props: B extends BundleKey ? BundleProps[B] : Record<string, any>;
     entity: AdapterContext;
 };
 type ExtractGlobalOptions<G extends GlobalOptionsKey[]> = G[number] extends GlobalOptionsKey ? G[number] : never;
 type CombineKeysAndGlobalOptions<T extends BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined> = keyof T | ExtractGlobalOptions<NonNullable<G>>;
 export type BlokkliDefinitionAddBehaviour = 'no-form' | 'form' | `editable:${string}`;
-export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = {
+export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string> = {
     /**
      * Determine which options should be visible in the editor based on the
      * given context.
      *
      * If a method is defined, it is called whenever any of the options change.
      */
-    determineVisibleOptions?: (ctx: DetermineVisibleOptionsContext<Options, GlobalOptions>) => Array<CombineKeysAndGlobalOptions<Options, GlobalOptions>>;
+    determineVisibleOptions?: (ctx: DetermineVisibleOptionsContext<Options, GlobalOptions, Bundle>) => Array<CombineKeysAndGlobalOptions<Options, GlobalOptions>>;
     /**
      * Disable editing for blocks that don't have any editable fields.
      *
@@ -244,11 +249,11 @@ export type BlockDefinitionRenderForFieldListType = {
     fieldListType: ValidFieldListTypes;
 };
 export type BlockDefinitionRenderFor = BlockDefinitionRenderForParent | BlockDefinitionRenderForFieldList | BlockDefinitionRenderForFieldListType;
-export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = []> = {
+export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = [], Bundle extends BundleKey | string = string> = {
     /**
      * The bundle ID of the block, e.g. "text" or "section_title".
      */
-    bundle: string;
+    bundle: Bundle;
     /**
      * Define the name of a block bundle that supports nested blocks.
      * If a bundle is defined, then this component will be rendered if the
@@ -277,19 +282,51 @@ export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = B
     /**
      * Settings for the behaviour in the editor.
      */
-    editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions>;
+    editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions, Bundle>;
+    /**
+     * Map which component prop maps to which field name.
+     *
+     * For example, if the field is named "field_paragraphs_header" and the prop
+     * is named "headerParagraphs", you would define it as such:
+     *
+     * @example
+     * ```vue
+     * <template>
+     *   <div>
+     *     <BlokkliField :list="headerParagraphs" name="field_paragraphs_header" />
+     *   </div>
+     * <template>
+     *
+     * <script lang="ts" setup>
+     * import type { ParagraphTwoColumnsFragment } from '#graphql-operations'
+     *
+     * defineProps<{
+     *   headerParagraphs: ParagraphTwoColumnsFragment['headerParagraphs']
+     * }>()
+     *
+     * defineBlokkli({
+     *   bundle: 'section',
+     *   propsFieldMapping: {
+     *     headerParagraphs: 'field_paragraphs_header',
+     *   }
+     * })
+     * </script>
+     * ```
+     */
+    propsFieldMapping?: Bundle extends BundleKey ? Partial<Record<keyof BundleProps[Bundle], string>> : never;
 };
 export type RuntimeBlockDefinitionInput = {
     bundle: string;
 };
-export type InjectedBlokkliItem = ComputedRef<{
+export type InjectedBlokkliItem = {
     index: ComputedRef<number>;
     uuid: string;
     options?: Record<string, string> | undefined;
     isEditing: boolean;
     parentType?: BlockBundleWithNested;
     fieldListType?: ValidFieldListTypes;
-}>;
+    fragmentName?: string;
+};
 export type FieldListItem = {
     uuid: string;
     bundle: string;
@@ -864,6 +901,11 @@ export type LibraryEditItemEvent = {
     uuid: string;
     label?: string;
 };
+export type AnimationFrameBeforeEvent = {
+    time: number;
+    mouseX: number;
+    mouseY: number;
+};
 export type EventbusEvents = {
     select: string | string[];
     'select:unselect': undefined;
@@ -893,7 +935,7 @@ export type EventbusEvents = {
     'block:append': BlockAppendEvent;
     'item:doubleClick': DraggableExistingBlock;
     scrollIntoView: ScrollIntoViewEvent;
-    'animationFrame:before': number;
+    'animationFrame:before': AnimationFrameBeforeEvent;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
@@ -929,6 +971,8 @@ export type ItemEditContext = {
     eventBus: Eventbus;
     mutatedOptions: MutatedOptions;
     dom?: DomProvider;
+    definitions: DefinitionProvider;
+    useBlockRegistration?: (dom: DomProvider, uuid: string) => void;
 };
 export interface BlokkliApp {
     /**
@@ -947,6 +991,7 @@ export interface BlokkliApp {
     keyboard: KeyboardProvider;
     ui: UiProvider;
     animation: AnimationProvider;
+    definitions: DefinitionProvider;
     state: StateProvider;
     context: ComputedRef<AdapterContext>;
     $t: TextProvider;
@@ -1012,7 +1057,7 @@ export type FeatureDefinitionSettingSlider = {
 export type FeatureDefinitionSettingMethod = {
     type: 'method';
     label: string;
-    method: () => void;
+    method: (app: BlokkliApp) => void;
     group?: SettingsGroup;
     viewports?: Viewport[];
 };
@@ -1161,5 +1206,17 @@ export interface LibraryItemProps {
     label?: string;
     uuid?: string;
 }
+export type PublishOptions = {
+    canPublish: boolean;
+    isRevisionable: boolean;
+    hasRevisionLogMessage: boolean;
+    lastChanged?: string | null;
+};
+export type GetEditStatesItem = {
+    hostEntityType: string;
+    hostEntityUuid: string;
+    entity: EditEntity;
+    currentUserIsOwner: boolean;
+};
 declare const _default: {};
 export default _default;