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

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

@@ -8,12 +8,12 @@
     :menu="menu"
     :data-sortli-id="id"
     :class="[
-      {
-        'bk-is-disabled': disabled,
-      },
-      'bk-is-' + orientation,
-      'bk-is-' + color,
-    ]"
+  {
+    'bk-is-disabled': disabled
+  },
+  'bk-is-' + orientation,
+  'bk-is-' + color
+]"
   >
     <div class="bk-list-item-inner">
       <div class="bk-list-item-icon">
@@ -23,8 +23,8 @@
       <div
         class="bk-list-item-label"
         :class="{
-          'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value,
-        }"
+  'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value
+}"
       >
         <span>{{ label }}</span>
       </div>
@@ -43,74 +43,53 @@
   </PluginContextMenu>
 </template>
 
-<script lang="ts" setup>
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import type { AddListOrientation, ContextMenu } from '#blokkli/types'
-import { useBlokkli, computed, ref } from '#imports'
-import { ItemIcon, Icon } from '#blokkli/components'
-import { PluginContextMenu } from '#blokkli/plugins'
-
-const { ui, storage, $t } = useBlokkli()
-
-const props = withDefaults(
-  defineProps<{
-    id: string
-    label: string
-    orientation: AddListOrientation
-    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent'
-    bundle?: string
-    icon?: BlokkliIcon
-    disabled?: boolean
-    noContextMenu?: boolean
-  }>(),
-  {
-    color: 'default',
-    bundle: '',
-    icon: undefined,
-  },
-)
-
-const el = ref<InstanceType<typeof PluginContextMenu> | null>(null)
-
-const favorites = storage.use<string[]>('blockFavorites', [])
-
-const isFavorite = computed(() => favorites.value.includes(props.id))
-
+<script setup>
+import { useBlokkli, computed, ref } from "#imports";
+import { ItemIcon, Icon } from "#blokkli/components";
+import { PluginContextMenu } from "#blokkli/plugins";
+const { ui, storage, $t } = useBlokkli();
+const props = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  orientation: { type: String, required: true },
+  color: { type: String, required: false, default: "default" },
+  bundle: { type: String, required: false, default: "" },
+  icon: { type: null, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  noContextMenu: { type: Boolean, required: false }
+});
+const el = ref(null);
+const favorites = storage.use("blockFavorites", []);
+const isFavorite = computed(() => favorites.value.includes(props.id));
 const isDark = computed(
-  () => props.orientation !== 'sidebar' && props.color === 'default',
-)
-
+  () => props.orientation !== "sidebar" && props.color === "default"
+);
 const toggleFavorite = () => {
   if (favorites.value.includes(props.id)) {
-    favorites.value = favorites.value.filter((v) => v !== props.id)
+    favorites.value = favorites.value.filter((v) => v !== props.id);
   } else {
-    favorites.value = [...favorites.value, props.id]
+    favorites.value = [...favorites.value, props.id];
   }
-}
-
-const menu = computed<ContextMenu[]>(() => {
+};
+const menu = computed(() => {
   if (props.noContextMenu) {
-    return []
+    return [];
   }
   return [
     {
-      type: 'button',
-      label: isFavorite.value
-        ? $t('addListItemFavoriteRemove', 'Remove from favorites')
-        : $t('addListItemFavoriteAdd', 'Add to favorites'),
-      icon: isFavorite.value ? 'unstar' : 'star',
-      callback: toggleFavorite,
-    },
-  ]
-})
-
-const getElement = (): HTMLElement | null => el.value?.$el
-
-defineExpose({ getElement })
+      type: "button",
+      label: isFavorite.value ? $t("addListItemFavoriteRemove", "Remove from favorites") : $t("addListItemFavoriteAdd", "Add to favorites"),
+      icon: isFavorite.value ? "unstar" : "star",
+      callback: toggleFavorite
+    }
+  ];
+});
+const getElement = () => el.value?.$el;
+defineExpose({ getElement });
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'AddListItem',
-}
+  name: "AddListItem"
+};
 </script>

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

@@ -0,0 +1,28 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { AddListOrientation } from '#blokkli/types';
+declare const _default: import("vue").DefineComponent<{
+    id: string;
+    label: string;
+    orientation: AddListOrientation;
+    color?: "rose" | "lime" | "default" | "yellow" | "accent";
+    bundle?: string;
+    icon?: BlokkliIcon;
+    disabled?: boolean;
+    noContextMenu?: boolean;
+}, {
+    getElement: () => HTMLElement | null;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    label: string;
+    orientation: AddListOrientation;
+    color?: "rose" | "lime" | "default" | "yellow" | "accent";
+    bundle?: string;
+    icon?: BlokkliIcon;
+    disabled?: boolean;
+    noContextMenu?: boolean;
+}> & Readonly<{}>, {
+    bundle: string;
+    color: "rose" | "lime" | "default" | "yellow" | "accent";
+    icon: BlokkliIcon;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -4,120 +4,84 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { Rectangle } from '#blokkli/types'
-import { ref, computed, useBlokkli, onMounted, watch } from '#imports'
-
-const { ui, animation, eventBus } = useBlokkli()
-
-const canvasGl = ref<HTMLCanvasElement | null>(null)
-
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { ref, computed, useBlokkli, onMounted, watch } from "#imports";
+const { ui, animation, eventBus } = useBlokkli();
+const canvasGl = ref(null);
 const canvasAttributes = computed(() => {
   return {
     width: ui.viewport.value.width * animation.dpi.value,
     height: ui.viewport.value.height * animation.dpi.value,
     style: {
-      width: ui.viewport.value.width + 'px',
-      height: ui.viewport.value.height + 'px',
-    },
-  }
-})
-
-let gl: WebGLRenderingContext | null | undefined = null
-
+      width: ui.viewport.value.width + "px",
+      height: ui.viewport.value.height + "px"
+    }
+  };
+});
+let gl = null;
 function initGl() {
   if (!canvasGl.value) {
-    return
+    return;
   }
-  gl = animation.gl()
-
-  canvasGl.value.width = canvasAttributes.value.width
-  canvasGl.value.height = canvasAttributes.value.height
-
+  gl = animation.gl();
+  canvasGl.value.width = canvasAttributes.value.width;
+  canvasGl.value.height = canvasAttributes.value.height;
   if (!gl) {
-    return
+    return;
   }
-
-  gl.enable(gl.BLEND)
-  gl.enable(gl.SCISSOR_TEST)
-  gl.disable(gl.DEPTH_TEST)
-
-  gl.clearColor(0.0, 0.0, 0.0, 0.0)
-  gl.viewport(0, 0, canvasAttributes.value.width, canvasAttributes.value.height)
-  // gl.blendFunc(gl[source.value as any], gl[destination.value as any])
-  // gl.blendEquation(gl[equtation.value as any])
-  gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE)
-  gl.blendEquation(gl.FUNC_ADD)
-  setScissor(scissor.value)
+  gl.enable(gl.BLEND);
+  gl.enable(gl.SCISSOR_TEST);
+  gl.disable(gl.DEPTH_TEST);
+  gl.clearColor(0, 0, 0, 0);
+  gl.viewport(0, 0, canvasAttributes.value.width, canvasAttributes.value.height);
+  gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE);
+  gl.blendEquation(gl.FUNC_ADD);
+  setScissor(scissor.value);
 }
-
 const scissor = computed(() => {
-  const dpi = animation.dpi.value
+  const dpi = animation.dpi.value;
   return {
     x: ui.visibleViewport.value.x * dpi,
-    y:
-      canvasAttributes.value.height -
-      ui.visibleViewport.value.y * dpi -
-      ui.visibleViewport.value.height * dpi,
+    y: canvasAttributes.value.height - ui.visibleViewport.value.y * dpi - ui.visibleViewport.value.height * dpi,
     width: Math.max(ui.visibleViewport.value.width * dpi, 1),
-    height: Math.max(ui.visibleViewport.value.height * dpi, 1),
-  }
-})
-
-function setScissor(v: Rectangle) {
+    height: Math.max(ui.visibleViewport.value.height * dpi, 1)
+  };
+});
+function setScissor(v) {
   if (!gl) {
-    return
+    return;
   }
-
-  gl.scissor(v.x, v.y, v.width, v.height)
+  gl.scissor(v.x, v.y, v.width, v.height);
 }
-
-watch(scissor, setScissor)
-
-let lastCanvasWidth = 0
-let lastCanvasHeight = 0
-
-onBlokkliEvent('animationFrame', (e) => {
+watch(scissor, setScissor);
+let lastCanvasWidth = 0;
+let lastCanvasHeight = 0;
+onBlokkliEvent("animationFrame", (e) => {
   if (!canvasGl.value) {
-    return
+    return;
   }
-  const canvasWidth = canvasAttributes.value.width
-  const canvasHeight = canvasAttributes.value.height
-
-  // Only update width and height if they have changed.
+  const canvasWidth = canvasAttributes.value.width;
+  const canvasHeight = canvasAttributes.value.height;
   if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
-    canvasGl.value.width = canvasWidth
-    canvasGl.value.height = canvasHeight
+    canvasGl.value.width = canvasWidth;
+    canvasGl.value.height = canvasHeight;
     if (gl) {
-      gl.viewport(0, 0, canvasWidth, canvasHeight)
+      gl.viewport(0, 0, canvasWidth, canvasHeight);
     }
-    lastCanvasWidth = canvasWidth
-    lastCanvasHeight = canvasHeight
+    lastCanvasWidth = canvasWidth;
+    lastCanvasHeight = canvasHeight;
   }
-  const offset = ui.artboardOffset.value
-  const scale = ui.artboardScale.value
-  // const size = ui.artboardSize.value
-  // const dpi = animation.dpi.value
-  // Restrict drawing to area on and 20px around artboard.
-  // gl.scissor(
-  //   offset.x * dpi - 20,
-  //   canvasHeight - offset.y * dpi - 20 - size.height * dpi * scale,
-  //   size.width * scale * dpi + 40,
-  //   size.height * scale * dpi + 40,
-  // )
-  // gl.clearColor(1.0, 0.0, 0.0, 0.4)
-  // gl.clear(gl.COLOR_BUFFER_BIT)
-
-  eventBus.emit('canvas:draw', {
+  const offset = ui.artboardOffset.value;
+  const scale = ui.artboardScale.value;
+  eventBus.emit("canvas:draw", {
     ...e,
     artboardOffset: offset,
     artboardScale: scale,
-    time: e.time,
-  })
-})
-
+    time: e.time
+  });
+});
 onMounted(() => {
-  initGl()
-})
+  initGl();
+});
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -38,23 +38,20 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { computed, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import { blokkliVersion } from '#blokkli-build/config'
-
-const { ui, eventBus } = useBlokkli()
-
-const menuOpen = computed(() => ui.menu.isOpen.value)
-
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import { blokkliVersion } from "#blokkli-build/config";
+const { ui, eventBus } = useBlokkli();
+const menuOpen = computed(() => ui.menu.isOpen.value);
 const onClick = () => {
-  eventBus.emit('select', '')
-  ui.menu.open()
-}
+  eventBus.emit("select", "");
+  ui.menu.open();
+};
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'AppMenu',
-}
+  name: "AppMenu"
+};
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -13,8 +13,8 @@
         :key="i"
         class="bk-block-proxy-fields-row"
         :style="{
-          gridTemplateColumns: `repeat(${row.length}, 1fr)`,
-        }"
+  gridTemplateColumns: `repeat(${row.length}, 1fr)`
+}"
       >
         <div
           v-for="field in row"
@@ -29,98 +29,64 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import type {
-  BlockBundleWithNested,
-  ValidFieldListTypes,
-} from '#blokkli-build/generated-types'
-import { computed, useBlokkli, ref } from '#imports'
-import { getDefinition } from '#blokkli-build/definitions'
-import { getBlokkliItemProxyComponent } from '#blokkli-build/edit-components'
-
-import { ItemIcon } from '#blokkli/components'
-import type { FieldConfig, LibraryItemProps } from '#blokkli/types'
-import { buildAttributesForLibraryItem, falsy } from '#blokkli/helpers'
-
-const props = defineProps<{
-  uuid: string
-  bundle: string
-  fieldListType: ValidFieldListTypes
-  parentType: BlockBundleWithNested
-  itemProps?: any
-}>()
-
-// Props of the library item, if this is a 'from_library' block.
-const libraryItemProps = computed<LibraryItemProps | null>(() => {
-  if (props.bundle === 'from_library') {
-    const v = props.itemProps?.libraryItem
-    return v as LibraryItemProps
+<script setup>
+import { computed, useBlokkli, ref } from "#imports";
+import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
+import { ItemIcon } from "#blokkli/components";
+import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  bundle: { type: String, required: true },
+  fieldListType: { type: null, required: true },
+  parentType: { type: null, required: true },
+  itemProps: { type: null, required: false }
+});
+const libraryItemProps = computed(() => {
+  if (props.bundle === "from_library") {
+    const v = props.itemProps?.libraryItem;
+    return v;
   }
-
-  return null
-})
-
+  return null;
+});
 const proxyComponentProps = computed(() => {
-  if (props.bundle === 'from_library') {
-    // Pass the props of the reusable block to the proxy component.
-    return libraryItemProps.value?.block?.props
+  if (props.bundle === "from_library") {
+    return libraryItemProps.value?.block?.props;
   }
-
-  return props.itemProps
-})
-
+  return props.itemProps;
+});
 const rootProps = computed(() => {
   if (libraryItemProps.value) {
-    return buildAttributesForLibraryItem(libraryItemProps.value)
+    return buildAttributesForLibraryItem(libraryItemProps.value);
   }
-
-  return {}
-})
-
+  return {};
+});
 const proxyBundle = computed(
-  () => libraryItemProps.value?.block?.bundle || props.bundle,
-)
-
-const { types, runtimeConfig } = useBlokkli()
-
-const root = ref<HTMLElement | null>(null)
-
-const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value))
-
-const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value)
-
-const definition = getDefinition(
+  () => libraryItemProps.value?.block?.bundle || props.bundle
+);
+const { types, runtimeConfig, definitions } = useBlokkli();
+const root = ref(null);
+const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value));
+const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value);
+const definition = definitions.getBlockDefinition(
   proxyBundle.value,
   props.fieldListType,
-  props.parentType,
-)
-
-const fieldLayout = computed<FieldConfig[][]>(() => {
-  // Currently structure view does not work for reusable blocks with
-  // nested blocks. As a workaround no fields are displayed. Since the fields
-  // Are not editable anyway this is not that big of a problem. However, the
-  // proxy block will just display the name of the block with no context.
-  // @TOOD: Figure out how to render a non-editable structure view of reusable
-  // blocks.
+  props.parentType
+);
+const fieldLayout = computed(() => {
   if (libraryItemProps.value) {
-    return []
+    return [];
   }
   if (definition?.editor?.fieldLayout) {
     return definition.editor.fieldLayout.map((row) => {
-      return row
-        .map((fieldName) => {
-          return types.fieldConfig.forName(
-            runtimeConfig.itemEntityType,
-            proxyBundle.value,
-            fieldName,
-          )
-        })
-        .filter(falsy)
-    })
+      return row.map((fieldName) => {
+        return types.fieldConfig.forName(
+          runtimeConfig.itemEntityType,
+          proxyBundle.value,
+          fieldName
+        );
+      }).filter(falsy);
+    });
   }
-
-  return types.fieldConfig
-    .forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value)
-    .map((config) => [config])
-})
+  return types.fieldConfig.forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value).map((config) => [config]);
+});
 </script>

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

@@ -0,0 +1,10 @@
+import type { BlockBundleWithNested, ValidFieldListTypes } from '#blokkli-build/generated-types';
+type __VLS_Props = {
+    uuid: string;
+    bundle: string;
+    fieldListType: ValidFieldListTypes;
+    parentType: BlockBundleWithNested;
+    itemProps?: any;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue

@@ -15,17 +15,17 @@
         <div class="bk-fatal-error-overlay-info">
           <Icon name="sad" />
           <div>
-            <h2>{{ $t('fatalErrorTitle', 'blökkli has stopped working') }}</h2>
+            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
             <p>
               {{
                 $t(
-                  'fatalErrorText',
-                  'Unfortunately blökkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected.',
-                )
+  "fatalErrorText",
+  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
+)
               }}
             </p>
             <button class="bk-button bk-is-danger" @click="errors = []">
-              {{ $t('fatalErrorButton', 'Continue anyway...') }}
+              {{ $t("fatalErrorButton", "Continue anyway...") }}
             </button>
           </div>
         </div>
@@ -42,23 +42,19 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { computed, ref, onErrorCaptured } from '#imports'
-import { Icon } from '#blokkli/components'
-import textProvider from '#blokkli/helpers/textProvider'
-
-const errors = ref<Error[]>([])
-
-const $t = textProvider()
-
+<script setup>
+import { computed, ref, onErrorCaptured } from "#imports";
+import { Icon } from "#blokkli/components";
+import textProvider from "#blokkli/helpers/textProvider";
+const errors = ref([]);
+const $t = textProvider();
 onErrorCaptured((err) => {
-  errors.value.push(err)
-  return false
-})
-
+  errors.value.push(err);
+  return false;
+});
 const unique = computed(() => {
   return errors.value.filter((value, index, self) => {
-    return self.findIndex((v) => v.name === value.name) === index
-  })
-})
+    return self.findIndex((v) => v.name === value.name) === index;
+  });
+});
 </script>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue.d.ts

@@ -0,0 +1,23 @@
+import { Icon } from '#blokkli/components';
+declare const errors: import("vue").Ref<Error[], Error[]>;
+declare const $t: import("#blokkli/helpers/textProvider").TextProvider;
+declare const unique: import("vue").ComputedRef<Error[]>;
+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<{}, {
+    Icon: typeof Icon;
+    errors: typeof errors;
+    $t: typeof $t;
+    unique: typeof unique;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};