@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/helpers/injections.js

@@ -0,0 +1,69 @@
+export const INJECT_APP = Symbol("blokkli_app");
+export const INJECT_EDIT_CONTEXT = Symbol(
+  "blokkli_edit_context"
+);
+export const INJECT_IS_EDITING = Symbol(
+  "blokkli_is_editing"
+);
+export const INJECT_IS_NESTED = Symbol(
+  "blokkli_is_nested"
+);
+export const INJECT_NESTING_LEVEL = Symbol(
+  "blokkli_nesting_level"
+);
+export const INJECT_IS_PREVIEW = Symbol("blokkli_is_preview");
+export const INJECT_IS_IN_REUSABLE = Symbol(
+  "blokkli_is_in_reusable"
+);
+export const INJECT_REUSABLE_OPTIONS = Symbol(
+  "blokkli_from_library_options"
+);
+export const INJECT_REUSABLE_UUID = Symbol(
+  "blokkli_from_library_uuid"
+);
+export const INJECT_FIELD_LIST_TYPE = Symbol(
+  "blokkli_field_list_type"
+);
+export const INJECT_FIELD_LIST_BLOCKS = Symbol(
+  "blokkli_field_list_blocks"
+);
+export const INJECT_FIELD_PROXY_MODE = Symbol(
+  "blokkli_field_proxy_mode"
+);
+export const INJECT_FIELD_USES_PROXY = Symbol(
+  "blokkli_field_uses_proxy"
+);
+export const INJECT_GLOBAL_PROXY_MODE = Symbol(
+  "blokkli_global_proxy_mode"
+);
+export const INJECT_PROVIDER_BLOCKS = Symbol(
+  "blokkli_provider_blocks"
+);
+export const INJECT_BLOCK_ITEM = Symbol("blokkli_block_item");
+export const INJECT_MUTATED_FIELDS_MAP = Symbol(
+  "blokkli_mutated_fields_map"
+);
+export const INJECT_ENTITY_CONTEXT = Symbol(
+  "blokkli_entity_context"
+);
+export const INJECT_PROVIDER_CONTEXT = Symbol(
+  "blokkli_provider_context"
+);
+export const INJECT_FRAGMENT_CONTEXT = Symbol(
+  "blokkli_fragment_context"
+);
+export const INJECT_PROVIDER_KEY = Symbol(
+  "blokkli_provider_key"
+);
+export const INJECT_EDIT_FIELD_LIST_COMPONENT = Symbol(
+  "blokkli_edit_field_list_component"
+);
+export const INJECT_ITEM_PROPS_OVERRIDE = Symbol(
+  "blokkli_edit_item_props_override"
+);
+export const INJECT_EDIT_LOGGER = Symbol(
+  "blokkli_edit_logger"
+);
+export const INJECT_ALL_COMPONENTS_CHUNK = Symbol(
+  "blokkli_all_components_chunk"
+);

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

@@ -5,8 +5,11 @@ import {
   bundlesWithVisibleLanguage,
   bundlesWithHiddenGlobally
 } from "#blokkli-build/default-global-options";
-import { BK_HIDDEN_GLOBALLY, BK_VISIBLE_LANGUAGES } from "../symbols.js";
-import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
+import {
+  BK_HIDDEN_GLOBALLY,
+  BK_VISIBLE_LANGUAGES
+} from "../../../global/constants";
+import { fromLibraryBlockBundle } from "#blokkli-build/config";
 export function mapCheckboxTrue(v) {
   return v === true || v === "1" || v === 1 || v === "true" ? "1" : "0";
 }
@@ -83,7 +86,7 @@ export function isVisibleByOptions(item, language) {
   return true;
 }
 export function getRuntimeOptions(item, context, fromLibraryOptions) {
-  if (item.bundle === BUNDLE_FROM_LIBRARY) {
+  if (item.bundle === fromLibraryBlockBundle) {
     if ("props" in item && item.props && "libraryItem" in item.props) {
       const actualBlock = item.props.libraryItem?.block;
       if (actualBlock) {
@@ -117,7 +120,7 @@ export function getRuntimeOptions(item, context, fromLibraryOptions) {
   );
 }
 export function getActualBlock(item) {
-  if (item.bundle === BUNDLE_FROM_LIBRARY) {
+  if (item.bundle === fromLibraryBlockBundle) {
     const block = item.props.libraryItem?.block;
     if (!block) {
       return null;
@@ -134,7 +137,7 @@ export function getItemsforBundles(items, bundles) {
   const filtered = [];
   for (let i = 0; i < items.length; i++) {
     const item = items[i];
-    if (item.bundle === BUNDLE_FROM_LIBRARY) {
+    if (item.bundle === fromLibraryBlockBundle) {
       const actual = getActualBlock(item);
       if (actual && bundles.includes(actual.bundle)) {
         filtered.push(actual);

package/dist/runtime/plugins/blokkliDirectives.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/dist/runtime/plugins/blokkliDirectives.js

@@ -2,7 +2,7 @@ import {
   INJECT_APP,
   INJECT_ENTITY_CONTEXT,
   INJECT_IS_IN_REUSABLE
-} from "#blokkli/helpers/symbols";
+} from "#blokkli/helpers/injections";
 import { defineNuxtPlugin } from "#imports";
 function getInjectionFromProviderElement(symbol, el) {
   if (!el) {

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

@@ -1,349 +1,3 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-type DefinitionOptionText = {
-    /**
-     * The option type.
-     */
-    type: 'text';
-    /**
-     * The default value.
-     */
-    default: string;
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * The HTML input type.
-     *
-     * @default 'text'
-     */
-    inputType?: 'text' | 'number' | 'date';
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionNumber = {
-    /**
-     * The option type.
-     */
-    type: 'number';
-    /**
-     * The default value.
-     */
-    default: number;
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * Minimum allowed value.
-     */
-    min: number;
-    /**
-     * Maximum allowed value.
-     */
-    max: number;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionRange = {
-    /**
-     * The option type.
-     */
-    type: 'range';
-    /**
-     * The default value.
-     */
-    default: number;
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * Minimum allowed value.
-     */
-    min: number;
-    /**
-     * Maximum allowed value.
-     */
-    max: number;
-    /**
-     * The step increment.
-     */
-    step: number;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionDateTimeLocal = {
-    /**
-     * The option type.
-     */
-    type: 'datetime-local';
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * The default value as an ISO 8601 datetime string.
-     *
-     * @example '2024-03-15T14:30:00'
-     */
-    default?: string;
-    /**
-     * Minimum allowed datetime as an ISO 8601 string.
-     */
-    min?: string;
-    /**
-     * Maximum allowed datetime as an ISO 8601 string.
-     */
-    max?: string;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionCheckbox = {
-    /**
-     * The option type.
-     */
-    type: 'checkbox';
-    /**
-     * The default value.
-     */
-    default: boolean;
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionColor = {
-    /**
-     * The option type.
-     */
-    type: 'color';
-    /**
-     * The default value as a HEX color string.
-     *
-     * @example '#ff0000'
-     */
-    default: `#${string}`;
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionCheckboxes = {
-    /**
-     * The option type.
-     */
-    type: 'checkboxes';
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * The default values.
-     */
-    default: string[];
-    /**
-     * Available options.
-     *
-     * Key is the option value, value is the display label.
-     */
-    options: Record<string, string>;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-};
-type DefinitionOptionRadiosGridOption = {
-    /**
-     * Column widths as flex-grow values.
-     *
-     * @example [1, 2] for a 1:2 ratio
-     */
-    columns: number[];
-    /**
-     * The label displayed for this option.
-     */
-    label: string;
-};
-type DefinitionOptionRadiosGrid = {
-    /**
-     * Display options as grid layouts.
-     */
-    displayAs: 'grid';
-    /**
-     * Available options.
-     *
-     * Key is the option value, value is the grid configuration.
-     */
-    options: Record<string, DefinitionOptionRadiosGridOption>;
-};
-type DefinitionOptionRadiosColorsOption = {
-    /**
-     * Optional HEX color value.
-     *
-     * @example '#ff0000'
-     */
-    hex?: `#${string}`;
-    /**
-     * Optional CSS class for the color.
-     *
-     * Used as fallback when hex is not provided.
-     */
-    class?: string;
-    /**
-     * The label displayed for this option.
-     */
-    label: string;
-};
-type DefinitionOptionRadiosColors = {
-    /**
-     * Display options as color swatches.
-     */
-    displayAs: 'colors';
-    /**
-     * Available color options.
-     *
-     * Key is the option value, value is the color configuration.
-     */
-    options: Record<string, DefinitionOptionRadiosColorsOption>;
-};
-type DefinitionOptionRadiosRadios = {
-    /**
-     * Display options as radio buttons.
-     *
-     * @default 'radios'
-     */
-    displayAs?: 'radios' | undefined;
-    /**
-     * Available options.
-     *
-     * Key is the option value, value is the display label.
-     */
-    options: Record<string, string>;
-};
-type DefinitionOptionRadiosIconsOption = {
-    /**
-     * The icon to display.
-     *
-     * Icon files must be in the same folder as the component and start with 'icon-blokkli-'.
-     */
-    icon: BlokkliIcon;
-    /**
-     * The label displayed for this option.
-     */
-    label: string;
-};
-type DefinitionOptionRadiosIcons = {
-    /**
-     * Display options as icons.
-     */
-    displayAs: 'icons';
-    /**
-     * Available icon options.
-     *
-     * Key is the option value, value is the icon configuration.
-     */
-    options: Record<string, DefinitionOptionRadiosIconsOption>;
-};
-type DefinitionOptionRadios = {
-    /**
-     * The option type.
-     */
-    type: 'radios';
-    /**
-     * The label displayed in the editor.
-     */
-    label: string;
-    /**
-     * Optional description providing additional context.
-     *
-     * Displayed below the option label in the editor.
-     */
-    description?: string;
-    /**
-     * The default value.
-     *
-     * Must be one of the option keys.
-     */
-    default: string;
-    /**
-     * Optional group name for organizing options.
-     *
-     * Options with the same group are displayed together in a dropdown.
-     */
-    group?: string;
-} & (DefinitionOptionRadiosColors | DefinitionOptionRadiosGrid | DefinitionOptionRadiosRadios | DefinitionOptionRadiosIcons);
-export type BlockOptionDefinition = DefinitionOptionColor | DefinitionOptionCheckbox | DefinitionOptionCheckboxes | DefinitionOptionRadios | DefinitionOptionText | DefinitionOptionRange | DefinitionOptionNumber | DefinitionOptionDateTimeLocal;
-export {};
+import type { BlockOptionDefinitionBase } from '../../global/types/blockOptions.js';
+export type BlockOptionDefinition = BlockOptionDefinitionBase<BlokkliIcon>;

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

@@ -0,0 +1,124 @@
+import type { ComputedRef } from 'vue';
+import type { BlockOptionDefinition } from './blockOptions.js';
+import type { AdapterContext } from '../editor/adapter/index.js';
+import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
+import type { BlockDefinitionInputBase, BlockDefinitionRenderForBase, BlockDefinitionRenderForFieldListBase, BlockDefinitionRenderForFieldListTypeBase, BlockDefinitionRenderForParentBase, BlokkliDefinitionInputEditorBase, FragmentDefinitionInputBase, ProviderDefinitionInputBase } from './../../global/types/definitions.js';
+import type { GlobalOptionsType } from '#blokkli-build/definitions';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { BlokkliProviderEntityContext } from './provider.js';
+type GetType<T> = T extends {
+    options: infer O;
+} ? T extends {
+    type: 'checkboxes';
+} ? Array<keyof O> : keyof O : T extends {
+    type: 'checkbox';
+} ? boolean : T extends {
+    type: 'range';
+} ? number : T extends {
+    type: 'number';
+} ? number : string;
+export type BlockDefinitionOptionsInput = {
+    [key: string]: BlockOptionDefinition;
+};
+type WithOptions<T extends BlockDefinitionOptionsInput> = {
+    [K in keyof T]: GetType<T[K]>;
+};
+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.
+     */
+    uuid: string;
+    /**
+     * The index of the item in the field list.
+     */
+    index: ComputedRef<number>;
+    /**
+     * Whether the item is being displayed in an editing context.
+     *
+     * Use `import.meta.blokkliEditing` instead, which will only
+     * include "editing related code" in the editor bundle and remove it from
+     * the main ("public") bundle.
+     *
+     * @deprecated
+     */
+    isEditing: boolean;
+    /**
+     * The item type name (e.g. "teaser_list") of the parent item if this item is nested.
+     */
+    parentType: ComputedRef<BlockBundleWithNested | undefined>;
+    /**
+     * The type of the field list the item is part of.
+     */
+    fieldListType: ComputedRef<ValidFieldListTypes>;
+    /**
+     * All sibling blocks (including this one) that are in the same field.
+     */
+    siblings: ComputedRef<FieldListItemTyped[]>;
+    /**
+     * All blocks that are in the root field (direct child of <BlokkliProvider>).
+     */
+    rootBlocks: ComputedRef<FieldListItemTyped[]>;
+    /**
+     * The reactive runtime options.
+     *
+     * This includes both the locally defined options and the inherited global
+     * options.
+     */
+    options: ComputedRef<(T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object)>;
+    /**
+     * The provider context.
+     */
+    provider: ComputedRef<BlokkliProviderEntityContext | null>;
+};
+export type DefineProviderContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends ValidGlobalConfigKeys | undefined = undefined> = {
+    /**
+     * The reactive runtime options.
+     *
+     * This includes both the locally defined options and the inherited global
+     * options.
+     */
+    options: ComputedRef<(T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object)>;
+};
+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: 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 BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string, PropsType = Bundle extends BundleKey ? BundleProps[Bundle] : Record<string, any>> = Omit<BlokkliDefinitionInputEditorBase<Options, BlokkliIcon, PropsType>, 'determineVisibleOptions'> & {
+    /**
+     * 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, Bundle>) => Array<CombineKeysAndGlobalOptions<Options, GlobalOptions>>;
+};
+export type BlockDefinitionRenderForParent = BlockDefinitionRenderForParentBase<BlockBundleWithNested>;
+export type BlockDefinitionRenderForFieldList = BlockDefinitionRenderForFieldListBase<ValidFieldListTypes>;
+export type BlockDefinitionRenderForFieldListType = BlockDefinitionRenderForFieldListTypeBase<ValidFieldListTypes>;
+export type BlockDefinitionRenderFor = BlockDefinitionRenderForBase<BlockBundleWithNested, ValidFieldListTypes>;
+export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = [], Bundle extends BundleKey | string = string> = Omit<BlockDefinitionInputBase<Options, GlobalOptions, Bundle, ValidChunkNames, BlockBundleWithNested, ValidFieldListTypes, BlokkliIcon, BundleProps>, 'editor'> & {
+    /**
+     * Settings for the behaviour in the editor.
+     */
+    editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions, Bundle>;
+};
+export type RuntimeBlockDefinitionInput = {
+    bundle: string;
+};
+export type FragmentDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = Omit<FragmentDefinitionInputBase<Options, GlobalOptions, ValidChunkNames, BlokkliIcon>, 'editor'> & {
+    /**
+     * Settings for the behaviour in the editor.
+     */
+    editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions>;
+};
+export type ProviderDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = ProviderDefinitionInputBase<Options, GlobalOptions>;
+export {};

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

@@ -0,0 +1 @@
+export type BlokkliDirectiveType = 'editable' | 'droppable';

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

@@ -0,0 +1,26 @@
+import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli-build/generated-types';
+import type { ComputedRef } from 'vue';
+export type FieldDropAlignment = 'vertical' | 'horizontal';
+export type BlockEditContext = {
+    isPublished: boolean;
+    isNew: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type FieldListItem = {
+    uuid: string;
+    bundle: string;
+    isVisible: boolean;
+    options?: Record<string, any>;
+    editContext?: BlockEditContext;
+    props?: Record<string, any>;
+};
+export type InjectedBlokkliItem = {
+    index: ComputedRef<number>;
+    uuid: string;
+    options?: Record<string, string> | undefined;
+    isEditing: boolean;
+    parentType?: BlockBundleWithNested;
+    fieldListType?: ValidFieldListTypes;
+    fragmentName?: string;
+};