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

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

@@ -0,0 +1,349 @@
+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 {};

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

@@ -1,34 +1,34 @@
 import type { ComputedRef } from 'vue';
 import type { Emitter } from 'mitt';
-import type { DomProvider } from '../helpers/domProvider.js';
-import type { StorageProvider } from '../helpers/storageProvider.js';
-import type { BlockDefinitionProvider } from '../helpers/typesProvider.js';
-import type { SelectionProvider } from '../helpers/selectionProvider.js';
-import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
-import type { UiProvider } from '../helpers/uiProvider.js';
-import type { AnimationProvider } from '../helpers/animationProvider.js';
-import type { StateProvider } from '../helpers/stateProvider.js';
+import type { DomProvider } from '../helpers/providers/dom.js';
+import type { StorageProvider } from '../helpers/providers/storage.js';
+import type { BlockDefinitionProvider } from '../helpers/providers/types.js';
+import type { SelectionProvider } from '../helpers/providers/selection.js';
+import type { KeyboardProvider } from '../helpers/providers/keyboard.js';
+import type { UiProvider } from '../helpers/providers/ui.js';
+import type { AnimationProvider } from '../helpers/providers/animation.js';
+import type { StateProvider } from '../helpers/providers/state.js';
 import type { DirectiveProvider } from '../helpers/providers/directive.js';
-import type { TextProvider } from '../helpers/textProvider.js';
-import type { PluginProvider } from '../helpers/pluginProvider.js';
+import type { TextProvider } from '../helpers/providers/texts.js';
+import type { PluginProvider } from '../helpers/providers/plugin.js';
 import type { eventBus } from './../helpers/eventBus.js';
-import type { BlockOptionDefinition } from './blokkOptions.js';
+import type { BlockOptionDefinition } from './blockOptions.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 { BroadcastProvider } from '../helpers/providers/broadcast.js';
+import type { FeaturesProvider } from '../helpers/providers/features.js';
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
 import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
-import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
+import type { ThemeProvider } from '../helpers/providers/theme.js';
 import type { BlokkliFragmentName, 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 { CommandsProvider } from '../helpers/providers/commands.js';
+import type { TourProvider } from '../helpers/providers/tour.js';
+import type { DropAreaProvider } from '../helpers/providers/dropArea.js';
 import type { RGB } from './theme.js';
-import type { DebugProvider } from '#blokkli/helpers/debugProvider';
+import type { DebugProvider } from '../helpers/providers/debug.js';
 import type getVideoId from 'get-video-id';
-import type { DefinitionProvider } from '../helpers/definitionProvider.js';
-import type { IndicatorsProvider } from '#blokkli/helpers/indicatorsProvider';
+import type { DefinitionProvider } from '../helpers/providers/definition.js';
+import type { IndicatorsProvider } from '../helpers/providers/indicators.js';
 import type { BlocksProvider } from '#blokkli/helpers/providers/blocks';
 import type { FieldsProvider } from '#blokkli/helpers/providers/fields';
 import type { ElementProvider } from '#blokkli/helpers/providers/element';
@@ -204,12 +204,7 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
     /**
      * Get the drag element for the editor.
      *
-     * By default, the root element of the component is used for drag actions.
-     * Sometimes this might not be desirable however. For example, a button
-     * block might render a container as the root element and have the button
-     * as the child. In this case the whole container would be clickable and
-     * selectable. By providing the button as the drag element, only the button
-     * appears to be selectable/draggable.
+     * @deprecated Use a ref in the template to designate the draggable element (e.g. <div ref="blokkliDraggable">).
      */
     getDraggableElement?: (el: HTMLElement) => Element | undefined | null;
     /**
@@ -1406,6 +1401,7 @@ export type SidebarRegion = 'left' | 'right';
 export type GlobalUiDialog = {
     id: string;
     alignment: 'left' | 'right' | 'center';
+    confirmClose?: boolean;
 };
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.24",
+  "version": "2.0.0-alpha.26",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -57,7 +57,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/micromatch": "^4.0.9",
-    "artboard-deluxe": "^0.1.2",
+    "artboard-deluxe": "0.1.3",
     "estree-walker-ts": "^1.1.0",
     "flesch": "^2.0.1",
     "fzf": "^0.5.2",

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

@@ -1,9 +0,0 @@
-import type { Command } from '#blokkli/types';
-type CommandsProviderFunction = () => Command[] | Command | undefined;
-export type CommandsProvider = {
-    add: (fn: CommandsProviderFunction) => void;
-    remove: (fn: CommandsProviderFunction) => void;
-    getCommands: () => Command[];
-};
-export default function (): CommandsProvider;
-export {};

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

@@ -1,33 +0,0 @@
-import type { StorageProvider } from './storageProvider.js';
-import { type ComputedRef } from '#imports';
-export type DebugLogger = {
-    log: (message: string, ...v: any) => void;
-    error: (message: string, ...v: any) => void;
-};
-export type LogMessage = {
-    type: 'log' | 'error' | 'event';
-    name: string;
-    date: string;
-    message: string;
-    context?: string;
-};
-type RegisteredDebugOverlay = {
-    id: string;
-    label: string;
-    active: boolean;
-};
-export type DebugProvider = {
-    isEnabled: ComputedRef<boolean>;
-    toggle: () => void;
-    createLogger: (name: string) => DebugLogger;
-    registerOverlay: (id: string, label: string) => void;
-    unregisterOverlay: (id: string) => void;
-    overlays: ComputedRef<RegisteredDebugOverlay[]>;
-    toggleOverlay: (id: string) => void;
-    registeredLoggers: ComputedRef<string[]>;
-    enabledLoggers: ComputedRef<string[]>;
-    toggleLogger: (name: string) => void;
-    getMessages: () => LogMessage[];
-};
-export default function (storage: StorageProvider): DebugProvider;
-export {};

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

@@ -1,19 +0,0 @@
-import { type Ref, type ComputedRef } from '#imports';
-import type { BlockDefinition, FragmentDefinition, ProviderDefinition } 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 | null) => BlockDefinition | undefined;
-    getDefaultDefinition: (bundle: string) => BlockDefinition | undefined;
-    getFragmentDefinition: (name: string) => FragmentDefinition | undefined;
-    getProviderDefinition: (entityType: string, entityBundle: string) => ProviderDefinition | 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/domProvider.d.ts

@@ -1,91 +0,0 @@
-import { type ComputedRef } from '#imports';
-import type { DraggableExistingBlock, DraggableItem, EntityContext, Rectangle, RenderedFieldListItem, RegisteredField, RegisterFieldData } from '#blokkli/types';
-import type { UiProvider } from './uiProvider.js';
-import type { DebugProvider } from './debugProvider.js';
-import type { DefinitionProvider } from './definitionProvider.js';
-import type { StateProvider } from './stateProvider.js';
-import type { ElementProvider } from './providers/element.js';
-type RegisteredFieldType = {
-    entityType: string;
-    entityBundle: string;
-    fieldName: string;
-};
-type MeasuredBlockRect = Rectangle & {
-    time: number;
-};
-export type DomProvider = {
-    getBoundingClientRect: (element: HTMLElement) => DOMRect;
-    /**
-     * Return the droppable markup for a draggable item.
-     */
-    getDropElementMarkup(item: DraggableItem | RenderedFieldListItem, checkSize?: boolean): string;
-    registerBlock: (key: string, uuid: string, el: HTMLElement | null) => void;
-    unregisterBlock: (key: string, uuid: string) => void;
-    registerField: (entity: EntityContext, fieldName: string, instance: HTMLElement, data: RegisterFieldData) => void;
-    updateFieldElement: (entity: EntityContext, fieldName: string, element: HTMLElement, data: RegisterFieldData) => void;
-    unregisterField: (entity: EntityContext, fieldName: string) => void;
-    getRegisteredField: (uuid: string, fieldName: string) => RegisteredField | undefined;
-    registeredFieldTypes: ComputedRef<RegisteredFieldType[]>;
-    registeredBlockUuids: ComputedRef<string[]>;
-    getVisibleBlocks(): string[];
-    getVisibleFields(): string[];
-    isBlockVisible(uuid: string): boolean;
-    getBlockRects: () => Record<string, MeasuredBlockRect>;
-    getBlockRect: (uuid: string, refresh?: boolean) => MeasuredBlockRect | undefined;
-    refreshBlockRect: (uuid: string) => void;
-    getFieldRect: (key: string) => Rectangle | undefined;
-    registeredBlocks: ComputedRef<Record<string, HTMLElement | undefined>>;
-    updateVisibleRects: () => void;
-    isReady: ComputedRef<boolean>;
-    init: () => void;
-    /**
-     * Get the drag element for a block.
-     */
-    getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
-    /**
-     * Get debug data for troubleshooting.
-     */
-    getDebugData: () => {
-        registeredBlocks: Array<{
-            uuid: string;
-            hasElement: boolean;
-            hasObservedElement: boolean;
-            hasRect: boolean;
-            hasCurrentKey: boolean;
-            isVisible: boolean;
-            elementInfo?: {
-                tagName: string;
-                bundle?: string;
-                hostBundle?: string;
-                fieldListType?: string;
-            };
-        }>;
-        fields: Array<{
-            key: string;
-            isVisible: boolean;
-            hasRect: boolean;
-            entityType: string;
-            entityBundle: string;
-            fieldName: string;
-        }>;
-        summary: {
-            totalRegisteredBlocks: number;
-            totalBlocksWithElements: number;
-            totalObservedElements: number;
-            totalBlockRects: number;
-            totalVisibleBlocks: number;
-            totalRegisteredFields: number;
-            totalVisibleFields: number;
-            totalFieldRects: number;
-            isInitializing: boolean;
-            isReady: boolean;
-        };
-        orphanedData: {
-            rectsWithoutRegistration: string[];
-            observedElementsWithoutRegistration: string[];
-            keysWithoutRegistration: string[];
-        };
-    };
-};
-export default function (ui: UiProvider, debug: DebugProvider, definitions: DefinitionProvider, state: StateProvider, element: ElementProvider): DomProvider;
-export {};

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

@@ -1,9 +0,0 @@
-import type { DraggableItem, DropArea } from '#blokkli/types';
-type DropAreaProviderFunction = (items: DraggableItem[]) => DropArea[] | DropArea | undefined;
-export type DropAreaProvider = {
-    add: (fn: DropAreaProviderFunction) => void;
-    remove: (fn: DropAreaProviderFunction) => void;
-    getDropAreas: (items: DraggableItem[]) => DropArea[];
-};
-export default function (): DropAreaProvider;
-export {};

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

@@ -1,17 +0,0 @@
-import type { FeatureDefinition, AdapterMethods } from '#blokkli/types';
-import { type ValidFeatureKey } from '#blokkli-build/features';
-import { type ComputedRef } from '#imports';
-import type { StorageProvider } from './storageProvider.js';
-export type FeaturesProvider = {
-    features: ComputedRef<FeatureDefinition[]>;
-    mountedFeatures: ComputedRef<FeatureDefinition<AdapterMethods[], ValidFeatureKey>[]>;
-    betaFeatures: ComputedRef<{
-        id: ValidFeatureKey;
-        label: string;
-        description?: string;
-    }[]>;
-    enabledBetaFeatures: ComputedRef<ValidFeatureKey[]>;
-    mount: (feature: FeatureDefinition<AdapterMethods[], ValidFeatureKey>) => void;
-    unmount: (id: string) => void;
-};
-export default function (storage: StorageProvider): FeaturesProvider;

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

@@ -1,10 +0,0 @@
-import { type Ref } from 'vue';
-import type { BlockIndicator } from '../types/index.js';
-export type IndicatorsProvider = {
-    indicators: Ref<BlockIndicator[]>;
-    hovered: Ref<string>;
-    addIndicator: (indicator: BlockIndicator) => void;
-    removeIndicator: (id: string, uuid: string) => void;
-    setHovered: (uuid?: string | null) => void;
-};
-export default function (): IndicatorsProvider;

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

@@ -1,20 +0,0 @@
-import { type Ref, type ComputedRef } from 'vue';
-import type { AnimationProvider } from './animationProvider.js';
-import type { KeyboardShortcut } from '#blokkli/types';
-type RegisteredShortcut = {
-    key: string;
-    shortcut: KeyboardShortcut;
-};
-export type KeyboardProvider = {
-    isPressingSpace: Readonly<Ref<boolean>>;
-    isPressingControl: Readonly<Ref<boolean>>;
-    isPressingShift: Readonly<Ref<boolean>>;
-    setShortcutStateFromEvent: (e: MouseEvent | PointerEvent) => void;
-    shortcuts: ComputedRef<RegisteredShortcut[]>;
-    registerShortcut: (shortcut: KeyboardShortcut) => void;
-    unregisterShortcut: (shortcut: KeyboardShortcut) => void;
-    lockKeyboardEvents: (id: string) => void;
-    unlockKeyboardEvents: (id: string) => void;
-};
-export default function (animationProvider: AnimationProvider): KeyboardProvider;
-export {};