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

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue

@@ -1,75 +0,0 @@
-<template>
-  <div class="bk bk-context-menu" :style="{ left: x + 'px', top: y + 'px' }">
-    <div ref="rootEl" class="bk-context-menu-inner" :style="innerStyle">
-      <div v-for="(item, i) in menu" :key="i">
-        <hr v-if="item.type === 'rule'" />
-        <button v-else-if="item.type === 'button'" @click="onClick(i)">
-          <Icon :name="item.icon" />
-          <span>{{ item.label }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Icon } from "#blokkli/components";
-import {
-  watch,
-  ref,
-  computed,
-  onMounted,
-  useBlokkli,
-  onBeforeUnmount
-} from "#imports";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const props = defineProps({
-  menu: { type: Array, required: true },
-  x: { type: Number, required: true },
-  y: { type: Number, required: true }
-});
-const emit = defineEmits(["close"]);
-const { ui, selection } = useBlokkli();
-const rootEl = ref(null);
-const innerStyle = computed(() => {
-  const horizontal = props.x - 300 > ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width ? { right: 0 } : { left: 0 };
-  const vertical = props.y + 300 > ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height ? { bottom: 0 } : { top: 0 };
-  return {
-    ...horizontal,
-    ...vertical
-  };
-});
-onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
-    return;
-  }
-  if (e.code === "Escape") {
-    emit("close");
-  }
-});
-onBlokkliEvent("window:clickAway", () => {
-  emit("close");
-});
-watch(selection.uuids, () => emit("close"));
-const onClick = (index) => {
-  const item = props.menu[index];
-  if (item && item.type === "button") {
-    item.callback();
-  }
-  emit("close");
-};
-const onMouseDown = (e) => {
-  if (!rootEl.value) {
-    return;
-  }
-  if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.contains(rootEl.value)) {
-    emit("close");
-  }
-};
-onMounted(() => {
-  window.addEventListener("click", onMouseDown);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("click", onMouseDown);
-});
-</script>

package/dist/runtime/blokkliPlugins/ContextMenu/Menu/index.vue.d.ts

@@ -1,12 +0,0 @@
-import type { ContextMenu } from '#blokkli/types';
-type __VLS_Props = {
-    menu: ContextMenu[];
-    x: number;
-    y: number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,39 +0,0 @@
-<template>
-  <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
-    <slot />
-    <Teleport :to="ui.mainLayoutElement.value">
-      <BlokkliTransition name="context-menu">
-        <ContextMenuMenu
-          v-if="isVisible"
-          :menu="menu"
-          :x="x"
-          :y="y"
-          @close="ui.openContextMenu.value = ''"
-        />
-      </BlokkliTransition>
-    </Teleport>
-  </Component>
-</template>
-
-<script setup>
-import { ref, computed, useBlokkli } from "#imports";
-import ContextMenuMenu from "./Menu/index.vue";
-import { BlokkliTransition } from "#blokkli/components";
-const props = defineProps({
-  id: { type: String, required: true },
-  menu: { type: Array, required: true },
-  tag: { type: String, required: false, default: "div" }
-});
-const { ui } = useBlokkli();
-const isVisible = computed(() => ui.openContextMenu.value === props.id);
-const x = ref(0);
-const y = ref(0);
-const onContextMenu = (e) => {
-  if (!props.id || typeof props.id !== "string" || !props.menu.length) {
-    return;
-  }
-  x.value = e.clientX;
-  y.value = e.clientY;
-  ui.openContextMenu.value = props.id;
-};
-</script>

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

@@ -1,35 +0,0 @@
-import type { ContextMenu } from '#blokkli/types';
-type __VLS_Props = {
-    /**
-     * Unique identifier for this context menu.
-     *
-     * Used to track which menu is currently open.
-     */
-    id: string;
-    /**
-     * Array of menu items to display.
-     *
-     * Each item can have nested sub-menus.
-     */
-    menu: ContextMenu[];
-    /**
-     * The HTML tag to use for the wrapper element.
-     *
-     * @default 'div'
-     */
-    tag?: string;
-};
-declare var __VLS_10: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    tag: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,22 +0,0 @@
-type __VLS_Props = {
-    /**
-     * Unique identifier for this debug overlay.
-     */
-    id: string;
-    /**
-     * The title displayed in the debug overlay selector.
-     */
-    title: string;
-};
-declare var __VLS_5: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,94 +0,0 @@
-<template>
-  <Teleport to="#bk-blokkli-item-actions">
-    <button
-      v-if="shouldRender"
-      ref="el"
-      :disabled="isDisabled"
-      class="bk-item-action"
-      :class="[
-  { 'bk-is-active': active, 'bk-is-last': weight === 'last' },
-  $attrs.class
-]"
-      :style="weight !== 'last' ? { order: weight || 0 } : void 0"
-      @click.prevent.stop="onClick"
-    >
-      <slot name="icon">
-        <Icon v-if="icon" :name="icon" class="bk-item-action-icon" />
-      </slot>
-      <div class="bk-tooltip">
-        <span>{{ title }}</span>
-        <ShortcutIndicator
-          v-if="keyCode"
-          :meta="meta"
-          :label="title"
-          :key-code="keyCode"
-          group="blocks"
-          @pressed="onClick"
-        />
-      </div>
-    </button>
-  </Teleport>
-  <slot :items="selection.items.value" :uuids="uuids" />
-</template>
-
-<script setup>
-import { computed, ref, useBlokkli } from "#imports";
-import { Icon, ShortcutIndicator } from "#blokkli/components";
-import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const { selection, state } = useBlokkli();
-const el = ref(null);
-const uuids = computed(() => selection.uuids.value);
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  disabled: { type: Boolean, required: false },
-  active: { type: Boolean, required: false },
-  keyCode: { type: String, required: false },
-  meta: { type: Boolean, required: false },
-  multiple: { type: Boolean, required: false },
-  editOnly: { type: Boolean, required: false },
-  weight: { type: [Number, String], required: false },
-  icon: { type: null, required: false },
-  tourText: { type: String, required: false }
-});
-const isDisabled = computed(
-  () => props.disabled || !props.multiple && selection.items.value.length > 1
-);
-const shouldRender = computed(() => {
-  if (props.editOnly) {
-    return state.editMode.value === "editing";
-  }
-  return true;
-});
-const emit = defineEmits(["click"]);
-const onClick = () => {
-  if (isDisabled.value || !uuids.value.length) {
-    return;
-  }
-  emit("click", selection.items.value);
-};
-defineCommands(() => ({
-  id: "plugin:item_action:" + props.id,
-  group: "selection",
-  label: props.title,
-  icon: props.icon,
-  disabled: props.disabled || !selection.items.value.length,
-  callback: onClick
-}));
-defineTourItem(() => {
-  if (!props.tourText) {
-    return;
-  }
-  return {
-    id: "plugin:item_action:" + props.id,
-    title: props.title,
-    text: props.tourText,
-    element: () => el.value
-  };
-});
-defineOptions({
-  name: "PluginItemAction",
-  inheritAttrs: false
-});
-</script>

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

@@ -1,85 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { RenderedFieldListItem } from '#blokkli/types';
-type __VLS_Props = {
-    /**
-     * Unique identifier for this item action.
-     */
-    id: string;
-    /**
-     * The title of the action.
-     *
-     * Displayed in the tooltip and keyboard shortcut hints.
-     */
-    title: string;
-    /**
-     * Whether the action is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should be displayed in an active state.
-     *
-     * Useful when the action opens a dropdown or dialog.
-     */
-    active?: boolean;
-    /**
-     * The key code to use for the keyboard shortcut.
-     *
-     * @example 'c' for the "c" key
-     */
-    keyCode?: string;
-    /**
-     * Whether the shortcut needs the meta modifier key.
-     *
-     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
-     */
-    meta?: boolean;
-    /**
-     * Whether the action supports multiple items.
-     *
-     * If false, the action is disabled when more than one item is selected.
-     */
-    multiple?: boolean;
-    /**
-     * Whether the action is only available in edit mode.
-     *
-     * If true, the action is hidden in preview mode.
-     */
-    editOnly?: boolean;
-    /**
-     * The weight, used for positioning the button.
-     *
-     * Lower weights appear first. Use 'last' to always position at the end.
-     */
-    weight?: number | string | 'last';
-    /**
-     * Optional icon to display in the button.
-     */
-    icon?: BlokkliIcon;
-    /**
-     * Optional text for the interactive tour.
-     *
-     * If provided, this action will be included in the editor tour.
-     */
-    tourText?: string;
-};
-declare var __VLS_5: {}, __VLS_19: {
-    items: RenderedFieldListItem[];
-    uuids: string[];
-};
-type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_5) => any;
-} & {
-    default?: (props: typeof __VLS_19) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    click: (items: RenderedFieldListItem[]) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((items: RenderedFieldListItem[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -1,278 +0,0 @@
-<template>
-  <ViewportBlockingRect
-    :id="storageKey"
-    ref="root"
-    class="bk-sidebar-detached bk-sidebar-inner"
-    :class="{ 'bk-is-focused': focusedSidebar === id }"
-    :style="style"
-    tabindex="10"
-    @pointermove="onPointerMove"
-    @focus.capture="onFocus"
-  >
-    <ScrollBoundary>
-      <div class="bk">
-        <div
-          class="bk-sidebar-title"
-          @mousedown.stop="onMouseDown($event, 'move')"
-        >
-          <div class="bk-sidebar-title-icon">
-            <slot name="icon">
-              <Icon v-if="icon" :name="icon" />
-            </slot>
-          </div>
-          <span>{{ title }}</span>
-          <button
-            @click.prevent.stop.capture="isMinimized = !isMinimized"
-            @mousedown.capture.stop
-          >
-            <Icon :name="isMinimized ? 'window-maximize' : 'window-minimize'" />
-          </button>
-          <button
-            @click.prevent.stop.capture="$emit('attach')"
-            @mousedown.capture.stop
-          >
-            <Icon :name="region === 'left' ? 'dock-left' : 'dock-right'" />
-          </button>
-        </div>
-      </div>
-      <div class="bk-sidebar-detached-inner" :style="innerStyle">
-        <slot
-          :width="userWidth"
-          :height="userHeight"
-          :is-resizing="isResizing"
-        />
-        <template v-if="!size && !isMinimized">
-          <div
-            class="bk-sidebar-detached-handle bk-is-bottom"
-            @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom')"
-          />
-          <div
-            class="bk-sidebar-detached-handle bk-is-right"
-            @mousedown.stop.prevent="onMouseDown($event, 'resize-right')"
-          />
-          <div
-            class="bk-sidebar-detached-handle bk-is-bottom-right"
-            @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom-right')"
-          />
-        </template>
-      </div>
-    </ScrollBoundary>
-  </ViewportBlockingRect>
-</template>
-
-<script setup>
-import {
-  useBlokkli,
-  ref,
-  onBeforeUnmount,
-  computed,
-  watch,
-  useState,
-  useTemplateRef
-} from "#imports";
-import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
-const props = defineProps({
-  id: { type: String, required: true },
-  title: { type: String, required: true },
-  icon: { type: null, required: true },
-  minWidth: { type: Number, required: false, default: 300 },
-  minHeight: { type: Number, required: false, default: 300 },
-  region: { type: String, required: true },
-  size: { type: Object, required: false, default: void 0 }
-});
-defineEmits(["attach"]);
-const root = useTemplateRef("root");
-function getRootElement() {
-  return root.value?.getRootElement() ?? null;
-}
-const isLeft = computed(() => props.region === "left");
-const { storage, ui, keyboard, selection } = useBlokkli();
-function onPointerMove(e) {
-  if (keyboard.isPressingSpace.value || selection.isDragging.value) {
-    return;
-  }
-  e.stopPropagation();
-}
-const BASE_Z = 19e4;
-const isMinimized = storage.use(
-  computed(() => "sidebar:detached:minimized:" + props.id),
-  false
-);
-const storageKey = computed(() => "sidebar:detached:size:" + props.id);
-const focusedSidebar = storage.use("sidebar:focused", "");
-const zStorageKey = computed(() => "sidebar:detached:zIndex:" + props.id);
-const globalZ = useState("blokkli:zIndex", () => BASE_Z);
-const z = storage.use(zStorageKey.value, BASE_Z);
-if (z.value > globalZ.value) {
-  globalZ.value = z.value;
-}
-const offsetX = computed(() => {
-  if (x.value + width.value > ui.visibleViewport.value.x + ui.visibleViewport.value.width) {
-    return x.value + width.value - (ui.visibleViewport.value.x + ui.visibleViewport.value.width) + 15;
-  } else if (x.value < ui.visibleViewport.value.x) {
-    return x.value - ui.visibleViewport.value.x - 15;
-  }
-  return 0;
-});
-const storedData = storage.use(storageKey, {
-  x: isLeft.value ? 0 : window.innerWidth - 360,
-  y: 50,
-  width: 360,
-  height: 520,
-  viewportWidth: 0,
-  viewportHeight: 0
-});
-const isDragging = ref(false);
-const mouseMode = ref("");
-const isResizing = computed(() => mouseMode.value.includes("resize"));
-const x = ref(0);
-const y = ref(0);
-const userWidth = ref(storedData.value.width);
-const userHeight = ref(storedData.value.height);
-const width = computed(() => {
-  return props.size?.width || userWidth.value;
-});
-const height = computed(() => {
-  return props.size?.height || userHeight.value;
-});
-const headerHeight = computed(() => 40);
-const startMouseX = ref(0);
-const startMouseY = ref(0);
-const rootCursor = computed(() => {
-  switch (mouseMode.value) {
-    case "resize-bottom-right":
-      return "se-resize";
-    case "resize-bottom":
-      return "ns-resize";
-    case "resize-right":
-      return "ew-resize";
-    case "move":
-      return "move";
-  }
-  return "";
-});
-watch(rootCursor, (cursor) => {
-  document.documentElement.style.cursor = cursor;
-});
-addElementClasses(
-  document.documentElement,
-  "bk-is-sidebar-interacting",
-  mouseMode
-);
-const updateStored = () => {
-  storedData.value = {
-    x: x.value,
-    y: y.value,
-    width: width.value,
-    height: height.value,
-    viewportWidth: window.innerWidth,
-    viewportHeight: window.innerHeight
-  };
-};
-watch(
-  () => props.size,
-  () => {
-    updateStored();
-  }
-);
-const style = computed(() => {
-  return {
-    transform: `translate(${x.value - offsetX.value}px, ${y.value}px)`,
-    zIndex: z.value
-  };
-});
-const innerStyle = computed(() => {
-  return {
-    width: (props.size?.width || width.value) + "px",
-    height: isMinimized.value ? 0 : (props.size?.height || height.value) + "px"
-  };
-});
-const onFocus = () => {
-  focusedSidebar.value = props.id;
-  globalZ.value++;
-  z.value = globalZ.value;
-};
-const onMouseDown = (e, mode) => {
-  mouseMode.value = mode;
-  startMouseX.value = e.clientX;
-  startMouseY.value = e.clientY;
-  window.addEventListener("pointermove", onMouseMove, { capture: true });
-  window.addEventListener("pointerup", onMouseUp, { capture: true });
-};
-const setCoordinates = (newX, newY) => {
-  x.value = Math.min(
-    Math.max(newX, ui.visibleViewport.value.x),
-    ui.visibleViewport.value.width + ui.visibleViewport.value.x - width.value
-  );
-  y.value = Math.min(
-    Math.max(newY, ui.visibleViewport.value.y),
-    ui.visibleViewport.value.y + ui.visibleViewport.value.height - headerHeight.value
-  );
-};
-const setSizes = (newWidth, newHeight) => {
-  if (newWidth !== void 0) {
-    const maxWidth = ui.visibleViewport.value.x + ui.visibleViewport.value.width - x.value;
-    userWidth.value = Math.min(Math.max(newWidth, props.minWidth), maxWidth);
-  }
-  if (newHeight !== void 0) {
-    userHeight.value = Math.min(
-      Math.max(newHeight, props.minHeight),
-      window.innerHeight - 50
-    );
-  }
-};
-const onMouseMove = (e) => {
-  if (mouseMode.value === "move") {
-    setCoordinates(
-      storedData.value.x + e.clientX - startMouseX.value,
-      storedData.value.y + e.clientY - startMouseY.value
-    );
-  } else if (mouseMode.value === "resize-right") {
-    setSizes(storedData.value.width + e.clientX - startMouseX.value);
-  } else if (mouseMode.value === "resize-bottom") {
-    setSizes(void 0, storedData.value.height + e.clientY - startMouseY.value);
-  } else if (mouseMode.value === "resize-bottom-right") {
-    setSizes(
-      storedData.value.width + e.clientX - startMouseX.value,
-      storedData.value.height + e.clientY - startMouseY.value
-    );
-  }
-};
-const onMouseUp = () => {
-  isDragging.value = false;
-  mouseMode.value = "";
-  window.removeEventListener("pointermove", onMouseMove, { capture: true });
-  window.removeEventListener("pointerup", onMouseUp, { capture: true });
-  updateStored();
-};
-const recalculatePositions = () => {
-  const storedViewportWidth = storedData.value.viewportWidth || window.innerWidth;
-  const storedViewportHeight = storedData.value.viewportHeight || window.innerHeight;
-  const diffWidth = window.innerWidth - storedViewportWidth + width.value;
-  const diffHeight = window.innerHeight - storedViewportHeight;
-  if (x.value > window.innerWidth / 2) {
-    setCoordinates(x.value + diffWidth, y.value + diffHeight);
-  } else {
-    setCoordinates(storedData.value.x, storedData.value.y);
-  }
-  storedData.value.viewportWidth = window.innerWidth;
-  storedData.value.viewportHeight = window.innerHeight;
-};
-recalculatePositions();
-watch(offsetX, () => {
-  updateStored();
-});
-onBlokkliEvent("ui:resized", () => {
-  recalculatePositions();
-  updateStored();
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("pointermove", onMouseMove, { capture: true });
-  window.removeEventListener("pointerup", onMouseUp, { capture: true });
-});
-defineExpose({
-  getRootElement
-});
-</script>

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue.d.ts

@@ -1,46 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { SidebarRegion } from '#blokkli/types';
-type __VLS_Props = {
-    id: string;
-    title: string;
-    icon: BlokkliIcon;
-    minWidth?: number;
-    minHeight?: number;
-    region: SidebarRegion;
-    size?: {
-        width: number;
-        height: number;
-    };
-};
-declare function getRootElement(): HTMLElement | null;
-declare var __VLS_16: {}, __VLS_30: {
-    width: number;
-    height: number;
-    isResizing: boolean;
-};
-type __VLS_Slots = {} & {
-    icon?: (props: typeof __VLS_16) => any;
-} & {
-    default?: (props: typeof __VLS_30) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
-    getRootElement: typeof getRootElement;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    attach: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAttach?: (() => any) | undefined;
-}>, {
-    size: {
-        width: number;
-        height: number;
-    };
-    minWidth: number;
-    minHeight: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};