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

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

@@ -12,84 +12,58 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { ContextMenu } from '#blokkli/types'
-import { Icon } from '#blokkli/components'
+<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: ContextMenu[]
-  x: number
-  y: number
-}>()
-
-const emit = defineEmits(['close'])
-
-const { ui, selection } = useBlokkli()
-
-const rootEl = ref<HTMLDivElement | null>(null)
-
+  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 }
-
+  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,
+    ...vertical
+  };
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    emit("close");
   }
-})
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === 'Escape') {
-    emit('close')
+});
+watch(selection.uuids, () => emit("close"));
+const onClick = (index) => {
+  const item = props.menu[index];
+  if (item && item.type === "button") {
+    item.callback();
   }
-})
-
-watch(selection.uuids, () => emit('close'))
-
-const onClick = (index: number) => {
-  const item = props.menu[index]
-  if (item && item.type === 'button') {
-    item.callback()
-  }
-  emit('close')
-}
-
-const onMouseDown = (e: MouseEvent) => {
+  emit("close");
+};
+const onMouseDown = (e) => {
   if (!rootEl.value) {
-    return
+    return;
   }
-
-  if (
-    (e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
-    !e.target.contains(rootEl.value)
-  ) {
-    emit('close')
+  if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.contains(rootEl.value)) {
+    emit("close");
   }
-}
-
+};
 onMounted(() => {
-  window.addEventListener('click', onMouseDown)
-})
-
+  window.addEventListener("click", onMouseDown);
+});
 onBeforeUnmount(() => {
-  window.removeEventListener('click', onMouseDown)
-})
+  window.removeEventListener("click", onMouseDown);
+});
 </script>

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

@@ -0,0 +1,12 @@
+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

@@ -15,35 +15,24 @@
   </Component>
 </template>
 
-<script lang="ts" setup>
-import type { ContextMenu } from '#blokkli/types'
-import { ref, computed, useBlokkli } from '#imports'
-import ContextMenuMenu from './Menu/index.vue'
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    menu: ContextMenu[]
-    tag?: string
-  }>(),
-  {
-    tag: 'div',
-  },
-)
-
-const { ui } = useBlokkli()
-
-const isVisible = computed(() => ui.openContextMenu.value === props.id)
-
-const x = ref(0)
-const y = ref(0)
-
-const onContextMenu = (e: MouseEvent) => {
-  if (!props.id || typeof props.id !== 'string' || !props.menu.length) {
-    return
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import ContextMenuMenu from "./Menu/index.vue";
+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
-}
+  x.value = e.clientX;
+  y.value = e.clientY;
+  ui.openContextMenu.value = props.id;
+};
 </script>

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

@@ -0,0 +1,37 @@
+import type { ContextMenu } from '#blokkli/types';
+import ContextMenuMenu from './Menu/index.vue.js';
+type __VLS_Props = {
+    id: string;
+    menu: ContextMenu[];
+    tag?: string;
+};
+declare const ui: import("../../helpers/uiProvider.js").UiProvider;
+declare const isVisible: import("vue").ComputedRef<boolean>;
+declare const x: import("vue").Ref<number, number>;
+declare const y: import("vue").Ref<number, number>;
+declare const onContextMenu: (e: MouseEvent) => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_10: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_10) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    ContextMenuMenu: typeof ContextMenuMenu;
+    ui: typeof ui;
+    isVisible: typeof isVisible;
+    x: typeof x;
+    y: typeof y;
+    onContextMenu: typeof onContextMenu;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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

@@ -4,31 +4,23 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, useBlokkli } from '#imports'
-
-const props = defineProps<{
-  id: string
-  title: string
-}>()
-
-const { debug } = useBlokkli()
-
+<script setup>
+import { computed, onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true }
+});
+const { debug } = useBlokkli();
 const isVisible = computed(
-  () =>
-    debug.isEnabled.value &&
-    debug.overlays.value.find((v) => v.id === props.id)?.active,
-)
-
+  () => debug.isEnabled.value && debug.overlays.value.find((v) => v.id === props.id)?.active
+);
 onMounted(() => {
-  debug.registerOverlay(props.id, props.title)
-})
-
+  debug.registerOverlay(props.id, props.title);
+});
 onBeforeUnmount(() => {
-  debug.unregisterOverlay(props.id)
-})
-
+  debug.unregisterOverlay(props.id);
+});
 defineOptions({
-  name: 'DebugOverlay',
-})
+  name: "DebugOverlay"
+});
 </script>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    id: string;
+    title: string;
+};
+declare const isVisible: import("vue").ComputedRef<boolean | undefined>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_5: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    isVisible: typeof isVisible;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/DroppableEdit/index.vue

@@ -19,55 +19,38 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { FormOverlay } from '#blokkli/components'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import type { DroppableEntityField, DroppableFieldConfig } from '#blokkli/types'
-import { ref, useBlokkli } from '#imports'
-
-const props = defineProps<{
-  id: string
-  title: string
-  icon: BlokkliIcon
-  entityType: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'save', data: DroppableEntityField): void
-}>()
-
-const { $t, types, state } = useBlokkli()
-
-type DroppableField = {
-  field: DroppableEntityField
-  config: DroppableFieldConfig
-}
-
-const droppable = ref<DroppableField | null>(null)
-
-const isVisible = ref(false)
-
+<script setup>
+import { FormOverlay } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { ref, useBlokkli } from "#imports";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  icon: { type: null, required: true },
+  entityType: { type: String, required: true }
+});
+const emit = defineEmits(["save"]);
+const { $t, types, state } = useBlokkli();
+const droppable = ref(null);
+const isVisible = ref(false);
 const onClose = () => {
-  isVisible.value = false
-}
-
+  isVisible.value = false;
+};
 const onSubmit = () => {
   if (droppable.value) {
-    emit('save', droppable.value.field)
+    emit("save", droppable.value.field);
   }
-  isVisible.value = false
-  droppable.value = null
-}
-
-onBlokkliEvent('droppable:focus', (field) => {
-  if (state.editMode.value !== 'editing') {
-    return
+  isVisible.value = false;
+  droppable.value = null;
+};
+onBlokkliEvent("droppable:focus", (field) => {
+  if (state.editMode.value !== "editing") {
+    return;
   }
-  const config = types.getDroppableFieldConfig(field.fieldName, field.host)
+  const config = types.getDroppableFieldConfig(field.fieldName, field.host);
   if (config.allowedEntityType === props.entityType) {
-    isVisible.value = true
-    droppable.value = { field, config }
+    isVisible.value = true;
+    droppable.value = { field, config };
   }
-})
+});
 </script>

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

@@ -0,0 +1,41 @@
+import { FormOverlay } from '#blokkli/components';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { DroppableEntityField } from '#blokkli/types';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    icon: BlokkliIcon;
+    entityType: string;
+};
+declare const $t: import("../../helpers/textProvider.js").TextProvider;
+declare const isVisible: import("vue").Ref<boolean, boolean>;
+declare const onClose: () => void;
+declare const onSubmit: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_18: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_18) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    FormOverlay: typeof FormOverlay;
+    $t: typeof $t;
+    isVisible: typeof isVisible;
+    onClose: typeof onClose;
+    onSubmit: typeof onSubmit;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    save: (data: DroppableEntityField) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((data: DroppableEntityField) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    save: (data: DroppableEntityField) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSave?: ((data: DroppableEntityField) => 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/ItemAction/index.vue

@@ -4,7 +4,7 @@
       ref="el"
       :disabled="isDisabled"
       :class="{ 'bk-is-active': active, 'bk-is-last': weight === 'last' }"
-      :style="weight !== 'last' ? { order: weight || 0 } : undefined"
+      :style="weight !== 'last' ? { order: weight || 0 } : void 0"
       @click.prevent.stop="onClick"
     >
       <slot name="icon">
@@ -28,105 +28,59 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { computed, ref, useBlokkli } from '#imports'
-
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import { Icon, ShortcutIndicator } from '#blokkli/components'
-import type { DraggableExistingBlock } from '#blokkli/types'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
-
-const { selection } = useBlokkli()
-
-const el = ref<HTMLElement | null>(null)
-
-const uuids = computed(() => selection.uuids.value)
-
-const props = defineProps<{
-  id: string
-  /**
-   * The title of the action.
-   */
-  title: string
-
-  /**
-   * Whether the action is disabled.
-   */
-  disabled?: boolean
-
-  /**
-   * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
-   */
-  active?: boolean
-
-  /**
-   * The key code to use for the shortcut.
-   */
-  keyCode?: string
-
-  /**
-   * Wheter the shortcut needs the meta modifier key.
-   */
-  meta?: boolean
-
-  /**
-   * Whether the action supports multiple items.
-   */
-  multiple?: boolean
-
-  /**
-   * The weight, used for positioning the button.
-   */
-  weight?: number | string | 'last'
-
-  icon?: BlokkliIcon
-
-  tourText?: string
-}>()
-
+<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 } = 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 },
+  weight: { type: [Number, String], required: false },
+  icon: { type: null, required: false },
+  tourText: { type: String, required: false }
+});
 const isDisabled = computed(
-  () =>
-    props.disabled || (!props.multiple && selection.blocks.value.length > 1),
-)
-
-const emit = defineEmits<{
-  (e: 'click', items: DraggableExistingBlock[]): void
-}>()
-
+  () => props.disabled || !props.multiple && selection.blocks.value.length > 1
+);
+const emit = defineEmits(["click"]);
 const onClick = () => {
   if (isDisabled.value || !uuids.value.length) {
-    return
+    return;
   }
-
-  emit('click', selection.blocks.value)
-}
-
+  emit("click", selection.blocks.value);
+};
 defineCommands(() => ({
-  id: 'plugin:item_action:' + props.id,
-  group: 'selection',
+  id: "plugin:item_action:" + props.id,
+  group: "selection",
   label: props.title,
   icon: props.icon,
   disabled: props.disabled || !selection.blocks.value.length,
-  callback: onClick,
-}))
-
+  callback: onClick
+}));
 defineTourItem(() => {
   if (!props.tourText) {
-    return
+    return;
   }
-
   return {
-    id: 'plugin:item_action:' + props.id,
+    id: "plugin:item_action:" + props.id,
     title: props.title,
     text: props.tourText,
-    element: () => el.value,
-  }
-})
+    element: () => el.value
+  };
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'PluginItemAction',
-}
+  name: "PluginItemAction"
+};
 </script>

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

@@ -0,0 +1,83 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { DraggableExistingBlock } from '#blokkli/types';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+    /**
+     * The title of the action.
+     */
+    title: string;
+    /**
+     * Whether the action is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
+     */
+    active?: boolean;
+    /**
+     * The key code to use for the shortcut.
+     */
+    keyCode?: string;
+    /**
+     * Wheter the shortcut needs the meta modifier key.
+     */
+    meta?: boolean;
+    /**
+     * Whether the action supports multiple items.
+     */
+    multiple?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     */
+    weight?: number | string | "last";
+    icon?: BlokkliIcon;
+    tourText?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (items: DraggableExistingBlock[]) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    /**
+     * The title of the action.
+     */
+    title: string;
+    /**
+     * Whether the action is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
+     */
+    active?: boolean;
+    /**
+     * The key code to use for the shortcut.
+     */
+    keyCode?: string;
+    /**
+     * Wheter the shortcut needs the meta modifier key.
+     */
+    meta?: boolean;
+    /**
+     * Whether the action supports multiple items.
+     */
+    multiple?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     */
+    weight?: number | string | "last";
+    icon?: BlokkliIcon;
+    tourText?: string;
+}> & Readonly<{
+    onClick?: ((items: DraggableExistingBlock[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: ((props: {}) => any) | undefined;
+    default?: ((props: {
+        items: DraggableExistingBlock[];
+        uuids: string[];
+    }) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};