@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

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;
     /**
@@ -707,6 +702,7 @@ export interface DraggableNewItem {
 export interface DraggableActionItem {
     itemType: 'action';
     actionType: string;
+    action: AddAction;
     itemBundle?: string;
     element: () => HTMLElement;
 }
@@ -909,8 +905,7 @@ export type BlokkliFieldElement = {
     dropAlignment: FieldDropAlignment | null;
 };
 export type FieldDropAlignment = 'vertical' | 'horizontal';
-export type ActionPlacedEvent = {
-    id: string;
+export type ActionPlacedData = {
     preceedingUuid?: string;
     host: DraggableHostData;
     field: BlokkliFieldElement;
@@ -1006,6 +1001,7 @@ export type EventbusEvents = {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
+    'overlay:close': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
     'item:doubleClick': RenderedFieldListItem;
@@ -1029,7 +1025,6 @@ export type EventbusEvents = {
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;
-    'action:placed': ActionPlacedEvent;
     'action:selected': undefined;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;
@@ -1126,7 +1121,6 @@ export type AssistantResultMarkup = {
     content: string;
 };
 export type AssistantResult = AssistantResultMarkup;
-export type AddListOrientation = 'horizontal' | 'vertical' | 'sidebar';
 export type AdapterMethods = keyof BlokkliAdapter<any>;
 export type FeatureDefinitionSettingRadiosOption = {
     label: string;
@@ -1359,7 +1353,8 @@ export type AddAction = {
     itemBundle?: string;
     title: string;
     description?: string;
-    enabled?: boolean;
+    callback: (action: ActionPlacedData) => void;
+    enabled?: (item: RenderedFieldListItem) => boolean;
 };
 export type BlockEditContext = {
     isPublished: boolean;
@@ -1382,6 +1377,9 @@ export type RenderedFieldListItem = {
         libraryItemUuid: string;
         reusableBundle: string;
     } | null;
+    fragment: {
+        name: BlokkliFragmentName;
+    } | null;
     isNested: boolean;
     publishOn?: string | null;
     unpublishOn?: string | null;
@@ -1400,5 +1398,10 @@ export type RegisteredField = {
 export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
 export type VueClassProp = string | Record<string, boolean> | VueClassProp[];
 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.23",
+  "version": "2.0.0-alpha.25",
   "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/blokkliPlugins/AddAction/index.vue

@@ -1,96 +0,0 @@
-<template>
-  <Teleport v-if="shouldRender" :key="renderKey" to="#blokkli-add-list-actions">
-    <AddListItem
-      :id="type"
-      ref="item"
-      :label="title"
-      :icon="icon"
-      :orientation="ui.addListOrientation.value"
-      :color="color"
-      :disabled="disabled"
-      data-element-type="action"
-      :data-action-type="type"
-      :data-item-bundle="itemBundle"
-      no-context-menu
-    />
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  nextTick,
-  ref,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { AddListItem } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const props = defineProps({
-  type: { type: String, required: true },
-  title: { type: String, required: true },
-  icon: { type: null, required: true },
-  itemBundle: { type: String, required: false },
-  color: { type: String, required: true },
-  description: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  weight: { type: Number, required: false }
-});
-const item = ref(null);
-const emit = defineEmits(["placed"]);
-const { ui, state, features, plugins } = useBlokkli();
-const addListAvailable = computed(
-  () => !!features.mountedFeatures.value.find((v) => v.id === "add-list")
-);
-const shouldRender = computed(
-  () => addListAvailable.value && state.editMode.value === "editing"
-);
-const renderKey = ref("");
-onBlokkliEvent("add-list:change", () => {
-  nextTick(() => {
-    renderKey.value = Math.round(Math.random() * 1e9).toString();
-  });
-});
-onBlokkliEvent("action:placed", (e) => {
-  if (e.id !== props.type) {
-    return;
-  }
-  emit("placed", e);
-});
-defineTourItem(() => {
-  if (!props.description) {
-    return;
-  }
-  return {
-    id: "plugin:add_action:" + props.type,
-    title: props.title,
-    text: props.description,
-    element: () => item.value?.getElement()
-  };
-});
-function addActionFunction() {
-  return {
-    id: props.type,
-    icon: props.icon,
-    color: props.color,
-    itemBundle: props.itemBundle,
-    title: props.title,
-    description: props.description,
-    enabled: !props.disabled
-  };
-}
-onMounted(() => {
-  plugins.addAddAction(addActionFunction);
-});
-onBeforeUnmount(() => {
-  plugins.removeAddAction(addActionFunction);
-});
-</script>
-
-<script>
-export default {
-  name: "PluginAddAction"
-};
-</script>

package/dist/runtime/blokkliPlugins/AddAction/index.vue.d.ts

@@ -1,26 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { ActionPlacedEvent } from '#blokkli/types';
-declare const _default: import("vue").DefineComponent<{
-    type: string;
-    title: string;
-    icon: BlokkliIcon;
-    itemBundle?: string;
-    color: "rose" | "lime" | "accent";
-    description?: string;
-    disabled?: boolean;
-    weight?: number;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    placed: (data: ActionPlacedEvent) => any;
-}, string, import("vue").PublicProps, Readonly<{
-    type: string;
-    title: string;
-    icon: BlokkliIcon;
-    itemBundle?: string;
-    color: "rose" | "lime" | "accent";
-    description?: string;
-    disabled?: boolean;
-    weight?: number;
-}> & Readonly<{
-    onPlaced?: ((data: ActionPlacedEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/blokkliPlugins/MenuButton/index.vue

@@ -1,68 +0,0 @@
-<template>
-  <Teleport :to="to">
-    <button
-      :id="'bk-menu-list-button-' + id"
-      class="bk-menu-list-button"
-      :disabled="disabled"
-      :class="type ? 'bk-is-' + type : ''"
-      :style="{ order: weight || 0 }"
-      @click.prevent.stop="onClick"
-    >
-      <div class="bk-menu-list-icon">
-        <slot>
-          <Icon v-if="icon" :name="icon" />
-        </slot>
-      </div>
-      <strong>{{ title }}</strong>
-      <span>{{ description }}</span>
-    </button>
-  </Teleport>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  description: { type: String, required: true },
-  disabled: { type: Boolean, required: false },
-  icon: { type: null, required: false },
-  type: { type: String, required: false },
-  weight: { type: Number, required: false },
-  secondary: { type: Boolean, required: false }
-});
-const emit = defineEmits(["click"]);
-const { ui, debug } = useBlokkli();
-const logger = debug.createLogger("PluginMenuButton");
-const to = computed(
-  () => `#bk-menu-${props.secondary ? "secondary" : "primary"}`
-);
-function onClick() {
-  ui.menu.close();
-  logger.log("Click " + props.id);
-  emit("click");
-}
-const commandCallback = () => {
-  if (!props.disabled) {
-    emit("click");
-  }
-};
-defineCommands(() => {
-  return {
-    id: "plugin:menu_button:" + props.id,
-    group: "action",
-    label: props.title,
-    icon: props.icon,
-    disabled: props.disabled,
-    callback: commandCallback
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "PluginMenuButton"
-};
-</script>