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

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

@@ -8,81 +8,63 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
-import { ref, computed } from '#imports'
-
-const props = defineProps<{
-  width?: number
-  maxHeight?: number
-}>()
-
-const rootEl = ref<HTMLDivElement | null>(null)
-const inner = ref<HTMLDivElement | null>(null)
-const wrapper = ref<HTMLDivElement | null>(null)
-const rootWidth = ref(260)
-const nativeWidth = ref(0)
-const nativeHeight = ref(0)
-const computedHeight = ref(0)
-
+<script setup>
+import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
+import { ref, computed } from "#imports";
+const props = defineProps({
+  width: { type: Number, required: false },
+  maxHeight: { type: Number, required: false }
+});
+const rootEl = ref(null);
+const inner = ref(null);
+const wrapper = ref(null);
+const rootWidth = ref(260);
+const nativeWidth = ref(0);
+const nativeHeight = ref(0);
+const computedHeight = ref(0);
 const scale = computed(() => {
-  const contentWidth = props.width || nativeWidth.value
-  const widthScale = Math.min(rootWidth.value, contentWidth) / contentWidth
-
+  const contentWidth = props.width || nativeWidth.value;
+  const widthScale = Math.min(rootWidth.value, contentWidth) / contentWidth;
   if (!props.maxHeight) {
-    return widthScale
+    return widthScale;
   }
-
-  const heightScale = props.maxHeight / nativeHeight.value
-
-  return Math.min(widthScale, heightScale)
-})
-
+  const heightScale = props.maxHeight / nativeHeight.value;
+  return Math.min(widthScale, heightScale);
+});
 const style = computed(() => {
-  const height = props.maxHeight
-    ? Math.min(computedHeight.value, props.maxHeight)
-    : computedHeight.value
-
+  const height = props.maxHeight ? Math.min(computedHeight.value, props.maxHeight) : computedHeight.value;
   return {
-    height: height + 'px',
-  }
-})
-
+    height: height + "px"
+  };
+});
 const innerStyle = computed(() => {
-  const currentScale = scale.value
-  const contentWidth = props.width || nativeWidth.value
-  const scaledWidth = contentWidth * currentScale
-  const scaledHeight = nativeHeight.value * currentScale
-
-  const leftOffset = Math.max(0, (rootWidth.value - scaledWidth) / 2)
-
-  const useVerticalCentering =
-    props.maxHeight && nativeHeight.value * scale.value > props.maxHeight
-  const topOffset = useVerticalCentering
-    ? (props.maxHeight - scaledHeight) / 2
-    : 0
-
+  const currentScale = scale.value;
+  const contentWidth = props.width || nativeWidth.value;
+  const scaledWidth = contentWidth * currentScale;
+  const scaledHeight = nativeHeight.value * currentScale;
+  const leftOffset = Math.max(0, (rootWidth.value - scaledWidth) / 2);
+  const useVerticalCentering = props.maxHeight && nativeHeight.value * scale.value > props.maxHeight;
+  const topOffset = useVerticalCentering ? (props.maxHeight - scaledHeight) / 2 : 0;
   return {
-    width: props.width ? props.width + 'px' : 'auto',
-    transform: `translate(${leftOffset}px, ${topOffset}px) scale(${currentScale})`,
-  }
-})
-
+    width: props.width ? props.width + "px" : "auto",
+    transform: `translate(${leftOffset}px, ${topOffset}px) scale(${currentScale})`
+  };
+});
 useAnimationFrame(() => {
   if (rootEl.value) {
-    rootWidth.value = rootEl.value.offsetWidth
+    rootWidth.value = rootEl.value.offsetWidth;
   }
   if (inner.value) {
-    const rect = inner.value.getBoundingClientRect()
-    nativeHeight.value = inner.value.offsetHeight
-    nativeWidth.value = Math.max(inner.value.offsetWidth, rootWidth.value)
-    computedHeight.value = rect.height
+    const rect = inner.value.getBoundingClientRect();
+    nativeHeight.value = inner.value.offsetHeight;
+    nativeWidth.value = Math.max(inner.value.offsetWidth, rootWidth.value);
+    computedHeight.value = rect.height;
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ScaleToFit',
-}
+  name: "ScaleToFit"
+};
 </script>

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

@@ -0,0 +1,15 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    width?: number;
+    maxHeight?: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    width?: number;
+    maxHeight?: number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -4,36 +4,20 @@
   </div>
 </template>
 
-<script setup lang="ts">
-/**
- * Provides a boundary for wheel events to make the slot scrollable.
- *
- * During a drag operation the wheel event is propagated so that the artboard
- * always becomes scrollable.
- */
-import { useBlokkli } from '#imports'
-
-const { selection } = useBlokkli()
-
-const props = defineProps<{
-  /**
-   * Allow scrolling during dragging.
-   */
-  dragging?: boolean
-}>()
-
-function onWheel(e: WheelEvent) {
-  // Unless allowed via prop, during dragging the only thing that should be
-  // scrollable is the artboard.
+<script setup>
+import { useBlokkli } from "#imports";
+const { selection } = useBlokkli();
+const props = defineProps({
+  dragging: { type: Boolean, required: false }
+});
+function onWheel(e) {
   if (selection.isDragging.value && !props.dragging) {
-    e.preventDefault()
-    return
+    e.preventDefault();
+    return;
   }
-
   if (e.ctrlKey || e.metaKey) {
-    return
+    return;
   }
-
-  e.stopImmediatePropagation()
+  e.stopImmediatePropagation();
 }
 </script>

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

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /**
+     * Allow scrolling during dragging.
+     */
+    dragging?: boolean;
+};
+declare function onWheel(e: WheelEvent): void;
+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, {
+    onWheel: typeof onWheel;
+}, {}, {}, {}, 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/ShortcutIndicator/index.vue

@@ -6,85 +6,73 @@
   </kbd>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli, onMounted, onBeforeUnmount } from '#imports'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
-
-const props = defineProps<{
-  group?: string
-  viewOnly?: boolean
-  meta?: boolean
-  shift?: boolean
-  keyCode: string
-  label: string
-}>()
-
-const emit = defineEmits(['pressed'])
-
-const { state } = useBlokkli()
-
-const key = computed(() =>
-  [props.meta, props.shift, props.keyCode.toLowerCase()].join('-'),
-)
-
+<script setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
+const props = defineProps({
+  group: { type: String, required: false },
+  viewOnly: { type: Boolean, required: false },
+  meta: { type: Boolean, required: false },
+  shift: { type: Boolean, required: false },
+  keyCode: { type: String, required: true },
+  label: { type: String, required: true }
+});
+const emit = defineEmits(["pressed"]);
+const { state } = useBlokkli();
+const key = computed(
+  () => [props.meta, props.shift, props.keyCode.toLowerCase()].join("-")
+);
 const keyLabel = computed(() => {
-  if (props.keyCode === 'Delete') {
-    return '⌫'
-  } else if (props.keyCode === 'ArrowDown') {
-    return '↓'
-  } else if (props.keyCode === 'ArrowUp') {
-    return '↑'
-  } else if (props.keyCode === 'ArrowRight') {
-    return '→'
-  } else if (props.keyCode === 'ArrowLeft') {
-    return '←'
-  } else if (props.keyCode === 'Digit0' || props.keyCode === '0') {
-    return ''
+  if (props.keyCode === "Delete") {
+    return "\u232B";
+  } else if (props.keyCode === "ArrowDown") {
+    return "\u2193";
+  } else if (props.keyCode === "ArrowUp") {
+    return "\u2191";
+  } else if (props.keyCode === "ArrowRight") {
+    return "\u2192";
+  } else if (props.keyCode === "ArrowLeft") {
+    return "\u2190";
+  } else if (props.keyCode === "Digit0" || props.keyCode === "0") {
+    return "\uE07B";
   }
-
-  return props.keyCode.toUpperCase()
-})
-
+  return props.keyCode.toUpperCase();
+});
 if (!props.viewOnly) {
   defineShortcut({
     meta: props.meta,
     shift: props.shift,
     code: props.keyCode,
     label: props.label,
-    group: props.group,
-  })
+    group: props.group
+  });
 }
-
-onBlokkliEvent('keyPressed', (e) => {
-  const checkKey = [e.meta, e.shift, e.code.toLowerCase()].join('-')
+onBlokkliEvent("keyPressed", (e) => {
+  const checkKey = [e.meta, e.shift, e.code.toLowerCase()].join("-");
   if (key.value !== checkKey) {
-    return
+    return;
   }
-
-  e.originalEvent.preventDefault()
-
+  e.originalEvent.preventDefault();
   if (state.isLoading.value) {
-    return
+    return;
   }
-  emit('pressed')
-})
-
+  emit("pressed");
+});
 onMounted(() => {
   if (props.viewOnly) {
-    return
+    return;
   }
-})
-
+});
 onBeforeUnmount(() => {
   if (props.viewOnly) {
-    return
+    return;
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ShortcutIndicator',
-}
+  name: "ShortcutIndicator"
+};
 </script>

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    group?: string;
+    viewOnly?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    keyCode: string;
+    label: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pressed: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    group?: string;
+    viewOnly?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    keyCode: string;
+    label: string;
+}> & Readonly<{
+    onPressed?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -8,90 +8,76 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type { Coord, DraggableItem } from '#blokkli/types'
-import { useBlokkli } from '#imports'
+<script setup>
+import { useBlokkli } from "#imports";
 import {
   buildDraggableItem,
   getDistance,
-  getInteractionCoordinates,
-} from '#blokkli/helpers'
-
-const { eventBus } = useBlokkli()
-
-const props = defineProps<{
-  getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null
-}>()
-
-let pointerStartCoords: Coord | null = null
-let activeItem: DraggableItem | null = null
-
-function onPointerDown(e: PointerEvent) {
+  getInteractionCoordinates
+} from "#blokkli/helpers";
+const { eventBus } = useBlokkli();
+const props = defineProps({
+  getDragItems: { type: Function, required: false }
+});
+let pointerStartCoords = null;
+let activeItem = null;
+function onPointerDown(e) {
   if (!(e.target instanceof HTMLElement || e.target instanceof SVGElement)) {
-    return
+    return;
   }
   if (e.button !== 0) {
-    pointerStartCoords = null
-    return
+    pointerStartCoords = null;
+    return;
   }
-  pointerStartCoords = getInteractionCoordinates(e)
-
-  const sortliItem = e.target.closest('[data-sortli-id]')
+  pointerStartCoords = getInteractionCoordinates(e);
+  const sortliItem = e.target.closest("[data-sortli-id]");
   if (!sortliItem) {
-    return
+    return;
   }
-
-  const item = buildDraggableItem(sortliItem)
-
+  const item = buildDraggableItem(sortliItem);
   if (!item) {
-    return
+    return;
   }
-
-  activeItem = item
+  activeItem = item;
 }
-
-function onPointerMove(e: PointerEvent) {
-  if (!pointerStartCoords || !activeItem || e.pointerType === 'touch') {
-    return
+function onPointerMove(e) {
+  if (!pointerStartCoords || !activeItem || e.pointerType === "touch") {
+    return;
   }
-
-  const coords = getInteractionCoordinates(e)
-  const distance = getDistance(coords, pointerStartCoords)
-
+  const coords = getInteractionCoordinates(e);
+  const distance = getDistance(coords, pointerStartCoords);
   if (distance > 7) {
-    const dragItems = props.getDragItems ? props.getDragItems(activeItem) : null
-    eventBus.emit('dragging:start', {
+    const dragItems = props.getDragItems ? props.getDragItems(activeItem) : null;
+    eventBus.emit("dragging:start", {
       items: dragItems && dragItems.length ? dragItems : [activeItem],
       coords,
-      mode: 'mouse',
-    })
-    activeItem = null
-    pointerStartCoords = null
+      mode: "mouse"
+    });
+    activeItem = null;
+    pointerStartCoords = null;
   }
 }
-
-function onPointerUp(e: PointerEvent) {
+function onPointerUp(e) {
   if (!pointerStartCoords || !activeItem) {
-    pointerStartCoords = null
-    activeItem = null
-    return
+    pointerStartCoords = null;
+    activeItem = null;
+    return;
   }
-  const coords = getInteractionCoordinates(e)
-  const distance = getDistance(coords, pointerStartCoords)
-  if (e.pointerType === 'touch' && distance < 5) {
-    eventBus.emit('dragging:start', {
+  const coords = getInteractionCoordinates(e);
+  const distance = getDistance(coords, pointerStartCoords);
+  if (e.pointerType === "touch" && distance < 5) {
+    eventBus.emit("dragging:start", {
       items: [activeItem],
       coords,
-      mode: 'touch',
-    })
+      mode: "touch"
+    });
   }
-
-  pointerStartCoords = null
+  pointerStartCoords = null;
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Sortli',
-}
+  name: "Sortli"
+};
 </script>

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

@@ -0,0 +1,14 @@
+import type { DraggableItem } from '#blokkli/types';
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -6,11 +6,11 @@
         :width="700"
         :submit-label="$t('systemRequirementsDialogButton', 'Continue anyway')"
         :lead="
-          $t(
-            'systemRequirementsDialogLead',
-            'blökkli has detected that your browser does not meet one or more system requirements. For the best experience, please use a browser that supports all the listed requirements.',
-          )
-        "
+  $t(
+    'systemRequirementsDialogLead',
+    'bl\xF6kkli has detected that your browser does not meet one or more system requirements. For the best experience, please use a browser that supports all the listed requirements.'
+  )
+"
         icon="sad"
         @submit="dismiss"
         @cancel="dismiss"
@@ -20,10 +20,10 @@
             v-for="requirement in requirements"
             :key="requirement.id"
             :class="{
-              'bk-is-success': requirement.supported === true,
-              'bk-is-error': requirement.supported === false,
-              'bk-is-warning': requirement.supported === null,
-            }"
+  'bk-is-success': requirement.supported === true,
+  'bk-is-error': requirement.supported === false,
+  'bk-is-warning': requirement.supported === null
+}"
           >
             <div>
               <h3>
@@ -40,9 +40,9 @@
         <p>
           {{
             $t(
-              'systemRequirementsDialogText',
-              'blökkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons.',
-            )
+  "systemRequirementsDialogText",
+  "bl\xF6kkli has been tested and optimized for the latest versions of Chrome, Firefox, Edge, and Safari. Features like WebGL are well supported, but they may sometimes be disabled for performance or security reasons."
+)
           }}
         </p>
       </DialogModal>
@@ -50,42 +50,28 @@
   </Teleport>
 </template>
 
-<script setup lang="ts">
-import { useBlokkli, computed } from '#imports'
-import { DialogModal, Icon } from '#blokkli/components'
-
-const { $t, storage, animation } = useBlokkli()
-
-const hasDismissed = storage.use('system_requirements_dismissed', false)
-
-type SystemRequirement = {
-  id: string
-  title: string
-  description: string
-  supported: boolean | null
-}
-
-const requirements = computed<SystemRequirement[]>(() => {
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { DialogModal, Icon } from "#blokkli/components";
+const { $t, storage, animation } = useBlokkli();
+const hasDismissed = storage.use("system_requirements_dismissed", false);
+const requirements = computed(() => {
   return [
     {
-      id: 'webgl',
-      title: 'WebGL',
+      id: "webgl",
+      title: "WebGL",
       description: $t(
-        'systemRequirementsWebglText',
-        'blökkli uses WebGL for fast rendering of UI elements such as selected blocks and drag-and-drop indicators. If WebGL is not supported, Blökkli will resort to fallback rendering, which is slower and lacks full feature support.',
+        "systemRequirementsWebglText",
+        "bl\xF6kkli uses WebGL for fast rendering of UI elements such as selected blocks and drag-and-drop indicators. If WebGL is not supported, Bl\xF6kkli will resort to fallback rendering, which is slower and lacks full feature support."
       ),
-      supported: animation.webglSupported.value,
-    },
-  ]
-})
-
+      supported: animation.webglSupported.value
+    }
+  ];
+});
 const showDialog = computed(
-  () =>
-    !hasDismissed.value &&
-    requirements.value.some((v) => v.supported === false),
-)
-
+  () => !hasDismissed.value && requirements.value.some((v) => v.supported === false)
+);
 function dismiss() {
-  hasDismissed.value = true
+  hasDismissed.value = true;
 }
 </script>

package/dist/runtime/components/Edit/SystemRequirements/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;