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

package/dist/runtime/components/Edit/Toolbar/index.vue

@@ -52,55 +52,40 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { onMounted, useBlokkli, onBeforeUnmount, computed } from '#imports'
-
-const { ui, selection, storage } = useBlokkli()
-
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { onMounted, useBlokkli, onBeforeUnmount, computed } from "#imports";
+const { ui, selection, storage } = useBlokkli();
 const showToolbar = computed(
-  () =>
-    !ui.isMobile.value ||
-    (!selection.isDragging.value && !selection.isMultiSelecting.value),
-)
-
+  () => !ui.isMobile.value || !selection.isDragging.value && !selection.isMultiSelecting.value
+);
 const sidebarVisible = computed(() => {
   if (ui.isMobile.value) {
-    return !selection.isDragging.value
+    return !selection.isDragging.value;
   }
-
-  return true
-})
-
-const activeSidebarLeft = storage.use('sidebar:active:left', '')
-const activeSidebarRight = storage.use('sidebar:active:right', '')
-const focusedSidebar = storage.use('sidebar:focused', '')
-
-const emit = defineEmits(['loaded'])
-
-const onWindowMouseDown = (e: MouseEvent) => {
-  if (
-    (e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
-    !e.target.closest('.bk-sidebar-detached')
-  ) {
-    focusedSidebar.value = ''
+  return true;
+});
+const activeSidebarLeft = storage.use("sidebar:active:left", "");
+const activeSidebarRight = storage.use("sidebar:active:right", "");
+const focusedSidebar = storage.use("sidebar:focused", "");
+const emit = defineEmits(["loaded"]);
+const onWindowMouseDown = (e) => {
+  if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.closest(".bk-sidebar-detached")) {
+    focusedSidebar.value = "";
   }
-}
-
-onBlokkliEvent('sidebar:close', () => (activeSidebarRight.value = ''))
-
+};
+onBlokkliEvent("sidebar:close", () => activeSidebarRight.value = "");
 onMounted(() => {
-  emit('loaded')
-  document.documentElement.addEventListener('mousedown', onWindowMouseDown)
-})
-
+  emit("loaded");
+  document.documentElement.addEventListener("mousedown", onWindowMouseDown);
+});
 onBeforeUnmount(() => {
-  document.documentElement.removeEventListener('mousedown', onWindowMouseDown)
-})
+  document.documentElement.removeEventListener("mousedown", onWindowMouseDown);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'BlokkliToolbar',
-}
+  name: "BlokkliToolbar"
+};
 </script>

package/dist/runtime/components/Edit/Toolbar/index.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    loaded: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onLoaded?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/ViewportBlockingRect/index.vue

@@ -4,72 +4,50 @@
   </div>
 </template>
 
-<script setup lang="ts">
-/**
- * A component to wrap viewport blocking elements.
- *
- * A viewport blocking element is one that is either draggable by the user to
- * any location or one that the app renders that blocks the usual viewport.
- *
- * These are registered in the UI provider, where other features can access
- * them to determine the ideal placement for other overlays.
- *
- * This is primarly used for the "actions" bar on selected blocks, which tries
- * to not collide the bar with any of the blocking rectangles.
- */
-import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+<script setup>
+import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
 import {
   useBlokkli,
   ref,
   computed,
   onMounted,
   onBeforeUnmount,
-  watch,
-} from '#imports'
-
-const props = defineProps<{
-  id: string
-}>()
-
-const { ui } = useBlokkli()
-
-const x = ref(0)
-const y = ref(0)
-const width = ref(0)
-const height = ref(0)
-
+  watch
+} from "#imports";
+const props = defineProps({
+  id: { type: String, required: true }
+});
+const { ui } = useBlokkli();
+const x = ref(0);
+const y = ref(0);
+const width = ref(0);
+const height = ref(0);
 const rect = computed(() => {
   return {
     x: x.value,
     y: y.value,
     width: width.value,
-    height: height.value,
-  }
-})
-
-const el = ref<HTMLDivElement | null>(null)
-
+    height: height.value
+  };
+});
+const el = ref(null);
 useAnimationFrame(() => {
   if (!el.value) {
-    return
+    return;
   }
-
-  const rect = el.value.getBoundingClientRect()
-  x.value = rect.x
-  y.value = rect.y
-  width.value = rect.width
-  height.value = rect.height
-})
-
+  const rect2 = el.value.getBoundingClientRect();
+  x.value = rect2.x;
+  y.value = rect2.y;
+  width.value = rect2.width;
+  height.value = rect2.height;
+});
 watch(rect, (v) => {
-  ui.setViewportBlockingRectangle(props.id, v)
-})
-
+  ui.setViewportBlockingRectangle(props.id, v);
+});
 onMounted(() => {
-  ui.setViewportBlockingRectangle(props.id, rect.value)
-})
-
+  ui.setViewportBlockingRectangle(props.id, rect.value);
+});
 onBeforeUnmount(() => {
-  ui.setViewportBlockingRectangle(props.id)
-})
+  ui.setViewportBlockingRectangle(props.id);
+});
 </script>

package/dist/runtime/components/Edit/ViewportBlockingRect/index.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    id: string;
+};
+declare const el: import("vue").Ref<HTMLDivElement | null, HTMLDivElement | null>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
+    el: typeof el;
+}, {}, {}, {}, 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/components/Edit/index.d.ts

@@ -14,4 +14,8 @@ import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
 import InfoBox from './InfoBox/index.vue.js';
 import Pagination from './Pagination/index.vue.js';
-export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, Pagination, };
+import FormToggle from './Form/Toggle/index.vue.js';
+import FormTextarea from './Form/Textarea/index.vue.js';
+import FormItem from './Form/Item/index.vue.js';
+import FormGroup from './Form/Group/index.vue.js';
+export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, Pagination, FormToggle, FormTextarea, FormItem, FormGroup, };

package/dist/runtime/components/Edit/index.js

@@ -14,6 +14,10 @@ import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
 import InfoBox from "./InfoBox/index.vue";
 import Pagination from "./Pagination/index.vue";
+import FormToggle from "./Form/Toggle/index.vue";
+import FormTextarea from "./Form/Textarea/index.vue";
+import FormItem from "./Form/Item/index.vue";
+import FormGroup from "./Form/Group/index.vue";
 export {
   ItemIcon,
   ShortcutIndicator,
@@ -30,5 +34,9 @@ export {
   ViewportBlockingRect,
   ScrollBoundary,
   InfoBox,
-  Pagination
+  Pagination,
+  FormToggle,
+  FormTextarea,
+  FormItem,
+  FormGroup
 };

package/dist/runtime/composables/defineBlokkli.d.ts

@@ -1,6 +1,6 @@
-import type { BlockDefinitionInput, BlockDefinitionOptionsInput, DefineBlokkliContext } from '#blokkli/types';
+import type { BlockDefinitionInput, BlockDefinitionOptionsInput, BundleKey, DefineBlokkliContext } from '#blokkli/types';
 import type { GlobalOptionsKey } from '#blokkli-build/generated-types';
 /**
  * Define a blokkli component.
  */
-export declare function defineBlokkli<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(arg: BlockDefinitionInput<T, G>): DefineBlokkliContext<T, G>;
+export declare function defineBlokkli<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined, B extends BundleKey | string = string>(arg: BlockDefinitionInput<T, G, B>): DefineBlokkliContext<T, G>;

package/dist/runtime/composables/defineBlokkli.js

@@ -4,14 +4,16 @@ import {
   INJECT_FIELD_LIST_BLOCKS,
   INJECT_FIELD_LIST_TYPE,
   INJECT_REUSABLE_OPTIONS,
-  INJECT_PROVIDER_BLOCKS
+  INJECT_PROVIDER_BLOCKS,
+  INJECT_PROVIDER_CONTEXT
 } from "../helpers/symbols.js";
 import { computed, inject } from "#imports";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
-import { BLOCK_OPTIONS } from "#blokkli-build/runtime-options";
+import {
+  OPTIONS
+} from "#blokkli-build/runtime-options";
 export function defineBlokkli(arg) {
-  const config = arg;
-  const bundle = config.bundle;
+  const [bundle, identifier] = arg.split("::", 2);
   const fieldListType = inject(
     INJECT_FIELD_LIST_TYPE,
     computed(() => "default")
@@ -28,7 +30,10 @@ export function defineBlokkli(arg) {
       return [];
     })
   );
-  const item = inject(INJECT_BLOCK_ITEM, null);
+  const item = inject(
+    INJECT_BLOCK_ITEM,
+    null
+  );
   const uuid = item?.value.uuid || "";
   const index = item?.value.index !== void 0 ? item.value.index : computed(() => 0);
   const fromLibraryOptions = inject(
@@ -36,15 +41,23 @@ export function defineBlokkli(arg) {
     null
   );
   const editContext = inject(INJECT_EDIT_CONTEXT, null);
-  const runtimeOptionDefinitions = BLOCK_OPTIONS[bundle] || {};
+  const provider = inject(
+    INJECT_PROVIDER_CONTEXT,
+    computed(() => null)
+  );
+  const parentType = computed(() => item?.value.parentType);
+  const isEditing = !!item?.value.isEditing;
   const options = computed(() => {
-    if (bundle === "from_library" || bundle === "blokkli_fragment") {
+    if (bundle === "from_library") {
       return {
         ...item?.value.options || {},
         ...editContext?.mutatedOptions[uuid] || {}
       };
     }
-    const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, definition]) => {
+    const optionKey = bundle === "blokkli_fragment" ? "fragment:" + item?.value.fragmentName + "__default" : identifier;
+    const runtimeOptionDefinitions = (editContext?.definitions.runtimeOptions.value || OPTIONS)[optionKey] || {};
+    const result = Object.entries(runtimeOptionDefinitions).reduce((acc, [key, v]) => {
+      const definition = v;
       if (editContext) {
         const overrideOptions = editContext.mutatedOptions[uuid] || {};
         if (overrideOptions[key] !== void 0 && overrideOptions[key] !== null) {
@@ -68,8 +81,12 @@ export function defineBlokkli(arg) {
     }, {});
     return result;
   });
-  const parentType = computed(() => item?.value.parentType);
-  const isEditing = !!item?.value.isEditing;
+  if (import.meta.hot) {
+    import.meta.hot.accept("#blokkli-build/runtime-options", () => {
+    });
+    import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+    });
+  }
   return {
     uuid,
     index,
@@ -79,6 +96,7 @@ export function defineBlokkli(arg) {
     parentType,
     fieldListType,
     siblings,
-    rootBlocks
+    rootBlocks,
+    provider
   };
 }

package/dist/runtime/composables/defineBlokkliFragment.d.ts

@@ -1,3 +1,3 @@
 import type { BlockDefinitionOptionsInput, DefineBlokkliContext, FragmentDefinitionInput } from '#blokkli/types';
 import type { GlobalOptionsKey } from '#blokkli-build/generated-types';
-export declare function defineBlokkliFragment<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(config: FragmentDefinitionInput<T, G>): DefineBlokkliContext<T, G>;
+export declare function defineBlokkliFragment<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined>(_config: FragmentDefinitionInput<T, G>): DefineBlokkliContext<T, G>;

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -1,30 +1,22 @@
 import { INJECT_FRAGMENT_CONTEXT } from "../helpers/symbols.js";
-import { getRuntimeOptionValue } from "../helpers/runtimeHelpers/index.js";
-import { computed, inject } from "#imports";
-import { globalOptionsDefaults } from "#blokkli-build/default-global-options";
-export function defineBlokkliFragment(config) {
+import { inject, computed } from "#imports";
+export function defineBlokkliFragment(_config) {
   const ctx = inject(
     INJECT_FRAGMENT_CONTEXT,
     null
   );
-  const optionKeys = [
-    ...Object.keys(config.options || {}),
-    ...config.globalOptions || []
-  ];
-  const options = computed(() => {
-    const result = optionKeys.reduce((acc, key) => {
-      acc[key] = ctx.options.value[key];
-      return acc;
-    }, {});
-    optionKeys.forEach((key) => {
-      const definition = config.options?.[key] || globalOptionsDefaults[key];
-      if (!definition) {
-        return;
-      }
-      const value = result[key] === void 0 || result[key] === null ? definition.default : result[key];
-      result[key] = getRuntimeOptionValue(definition, value);
-    });
-    return result;
-  });
-  return { ...ctx, options };
+  if (!ctx) {
+    return {
+      uuid: "",
+      index: computed(() => 0),
+      isEditing: false,
+      parentType: computed(() => void 0),
+      fieldListType: computed(() => "default"),
+      siblings: computed(() => []),
+      rootBlocks: computed(() => []),
+      options: computed(() => ({})),
+      provider: computed(() => null)
+    };
+  }
+  return ctx;
 }