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

package/dist/runtime/components/Edit/Features/TouchActionBar/Bar/index.vue

@@ -10,17 +10,16 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-  label: string
-  danger?: boolean
-}>()
-
-defineEmits(['click'])
+<script setup>
+defineProps({
+  label: { type: String, required: true },
+  danger: { type: Boolean, required: false }
+});
+defineEmits(["click"]);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'TouchActionBar',
-}
+  name: "TouchActionBar"
+};
 </script>

package/dist/runtime/components/Edit/Features/TouchActionBar/Bar/index.vue.d.ts

@@ -0,0 +1,12 @@
+declare const _default: import("vue").DefineComponent<{
+    label: string;
+    danger?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    label: string;
+    danger?: boolean;
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/TouchActionBar/index.vue

@@ -3,16 +3,15 @@
     <Transition name="bk-touch-bar">
       <Bar
         v-if="
-          selection.isMultiSelecting.value &&
-          selection.interactionMode.value === 'touch'
-        "
+  selection.isMultiSelecting.value && selection.interactionMode.value === 'touch'
+"
         :label="$t('touchBarFinishSelecting', 'Finish selecting')"
         @click="eventBus.emit('select:end', [...selection.uuids.value])"
       />
       <Bar
         v-else-if="
-          selection.isDragging.value && selection.draggingMode.value === 'touch'
-        "
+  selection.isDragging.value && selection.draggingMode.value === 'touch'
+"
         :label="$t('touchBarCancelDragging', 'Cancel dragging')"
         danger
         @click="eventBus.emit('dragging:end')"
@@ -21,22 +20,20 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-import Bar from './Bar/index.vue'
-
-const { eventBus, selection, $t } = useBlokkli()
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import Bar from "./Bar/index.vue";
+const { eventBus, selection, $t } = useBlokkli();
 defineBlokkliFeature({
-  id: 'touch-action-bar',
-  label: 'Touch Action Bar',
-  description: 'Renders a button on touch devices to cancel touch actions.',
-  icon: 'button-pointer',
-})
+  id: "touch-action-bar",
+  label: "Touch Action Bar",
+  description: "Renders a button on touch devices to cancel touch actions.",
+  icon: "button-pointer"
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'TouchActionBarBar',
-}
+  name: "TouchActionBarBar"
+};
 </script>

package/dist/runtime/components/Edit/Features/TouchActionBar/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/Features/Tour/Overlay/index.vue

@@ -11,8 +11,8 @@
         <div class="bk-tour-content">
           <div
             :style="{
-              height: tooltipHeight + 'px',
-            }"
+  height: tooltipHeight + 'px'
+}"
           >
             <div
               ref="contentEl"
@@ -25,7 +25,7 @@
       <div class="bk-tour-buttons">
         <button @click.stop.prevent="prev">
           <Icon name="chevron-left" />
-          <span>{{ $t('tourPrev', 'Previous') }}</span>
+          <span>{{ $t("tourPrev", "Previous") }}</span>
           <div class="bk-tooltip">
             <span>Arrow Right</span>
             <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
@@ -37,7 +37,7 @@
           <span>{{ items.length }}</span>
         </div>
         <button @click.stop.prevent="next">
-          <span>{{ $t('tourNext', 'Next') }}</span>
+          <span>{{ $t("tourNext", "Next") }}</span>
           <Icon name="chevron-right" />
           <div class="bk-tooltip">
             <span>Arrow Left</span>
@@ -50,221 +50,166 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, computed, ref } from '#imports'
-import { falsy, modulo } from '#blokkli/helpers'
-import { Icon, ShortcutIndicator } from '#blokkli/components'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
-
-const emit = defineEmits(['close'])
-
-type ItemPosition = 'top' | 'left' | 'bottom' | 'right'
-
+<script setup>
+import { useBlokkli, computed, ref } from "#imports";
+import { falsy, modulo } from "#blokkli/helpers";
+import { Icon, ShortcutIndicator } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
+const emit = defineEmits(["close"]);
 const rectStyle = computed(() => {
   return {
-    width: activeItem.value.rect.width + 'px',
-    height: activeItem.value.rect.height + 'px',
-    transform: `translate(${activeItem.value.rect.x}px, ${activeItem.value.rect.y}px)`,
-  }
-})
-
+    width: activeItem.value.rect.width + "px",
+    height: activeItem.value.rect.height + "px",
+    transform: `translate(${activeItem.value.rect.x}px, ${activeItem.value.rect.y}px)`
+  };
+});
 const tooltipStyle = computed(() => {
   const x = Math.max(
     Math.min(
       activeItem.value.x - tooltipWidth.value / 2,
-      ui.visibleViewportPadded.value.x +
-        ui.visibleViewportPadded.value.width -
-        tooltipWidth.value,
+      ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width - tooltipWidth.value
     ),
-    ui.visibleViewportPadded.value.x,
-  )
+    ui.visibleViewportPadded.value.x
+  );
   const y = Math.max(
     Math.min(
       activeItem.value.y - tooltipHeight.value / 2,
-      ui.visibleViewportPadded.value.y +
-        ui.visibleViewportPadded.value.height -
-        tooltipHeight.value -
-        100,
+      ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height - tooltipHeight.value - 100
     ),
-    ui.visibleViewportPadded.value.y,
-  )
+    ui.visibleViewportPadded.value.y
+  );
   return {
-    width: tooltipWidth.value + 'px',
-    transform: `translate(${x}px, ${y}px)`,
-  }
-})
-
-const { tour, ui, $t } = useBlokkli()
-
-const activeIndex = ref(0)
-const contentEl = ref<HTMLDivElement | null>(null)
-
-const tooltipHeight = ref(100)
+    width: tooltipWidth.value + "px",
+    transform: `translate(${x}px, ${y}px)`
+  };
+});
+const { tour, ui, $t } = useBlokkli();
+const activeIndex = ref(0);
+const contentEl = ref(null);
+const tooltipHeight = ref(100);
 const tooltipWidth = computed(() => {
-  return ui.isMobile.value ? Math.min(window.innerWidth - 20, 400) : 400
-})
-
-type PositionedTourItem = {
-  id: string
-  title: string
-  text: string
-  rect: DOMRect
-  x: number
-  y: number
-  position: ItemPosition
-}
-
-function calculateCenterPoint(rect: DOMRect): { x: number; y: number } {
+  return ui.isMobile.value ? Math.min(window.innerWidth - 20, 400) : 400;
+});
+function calculateCenterPoint(rect) {
   return {
     x: rect.x,
-    y: rect.y,
-  }
+    y: rect.y
+  };
 }
-
 const viewportCenter = computed(() => ({
   x: ui.viewport.value.width / 2,
-  y: ui.viewport.value.height / 2,
-}))
-
-const items = computed<PositionedTourItem[]>(() =>
-  tour
-    .getTourItems()
-    .map((item) => {
-      if (!item.element) {
-        return
-      }
-      const element =
-        typeof item.element === 'function' ? item.element() : item.element
-      if (!(element instanceof HTMLElement)) {
-        return
-      }
-      const rect = element.getBoundingClientRect()
-      const { x, y, position } = calculatePosition(rect)
-      return {
-        position,
-        id: item.id,
-        rect,
-        title: item.title,
-        text: item.text,
-        x,
-        y,
-      }
-    })
-    .filter(falsy)
-    .sort((a, b) => {
-      const centerA = calculateCenterPoint(a.rect)
-      const centerB = calculateCenterPoint(b.rect)
-
-      const angleA = Math.atan2(
-        centerA.y - viewportCenter.value.y,
-        centerA.x - viewportCenter.value.x,
-      )
-      const angleB = Math.atan2(
-        centerB.y - viewportCenter.value.y,
-        centerB.x - viewportCenter.value.x,
-      )
-
-      return angleA - angleB
-    }),
-)
-
-const activeItem = computed(() => items.value[activeIndex.value])
-
+  y: ui.viewport.value.height / 2
+}));
+const items = computed(
+  () => tour.getTourItems().map((item) => {
+    if (!item.element) {
+      return;
+    }
+    const element = typeof item.element === "function" ? item.element() : item.element;
+    if (!(element instanceof HTMLElement)) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const { x, y, position } = calculatePosition(rect);
+    return {
+      position,
+      id: item.id,
+      rect,
+      title: item.title,
+      text: item.text,
+      x,
+      y
+    };
+  }).filter(falsy).sort((a, b) => {
+    const centerA = calculateCenterPoint(a.rect);
+    const centerB = calculateCenterPoint(b.rect);
+    const angleA = Math.atan2(
+      centerA.y - viewportCenter.value.y,
+      centerA.x - viewportCenter.value.x
+    );
+    const angleB = Math.atan2(
+      centerB.y - viewportCenter.value.y,
+      centerB.x - viewportCenter.value.x
+    );
+    return angleA - angleB;
+  })
+);
+const activeItem = computed(
+  () => items.value[activeIndex.value]
+);
 const prev = () => {
-  activeIndex.value = modulo(activeIndex.value - 1, items.value.length)
-}
-
+  activeIndex.value = modulo(activeIndex.value - 1, items.value.length);
+};
 const next = () => {
-  activeIndex.value = modulo(activeIndex.value + 1, items.value.length)
-}
-
-const getIdealPosition = (rect: DOMRect): ItemPosition => {
+  activeIndex.value = modulo(activeIndex.value + 1, items.value.length);
+};
+const getIdealPosition = (rect) => {
   if (rect.y < 20) {
-    return 'bottom'
-  } else if (
-    rect.y >
-    ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height
-  ) {
-    return 'top'
+    return "bottom";
+  } else if (rect.y > ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height) {
+    return "top";
   }
-
-  // Calculate available space around the element
-  const availableSpace: Record<ItemPosition, number> = {
+  const availableSpace = {
     top: rect.top,
     bottom: ui.visibleViewportPadded.value.height - rect.bottom,
     left: rect.left,
-    right: ui.viewport.value.width - rect.right,
-  }
-
-  // Determine the best position for the tooltip
-  const sortedSpaces = (
-    Object.entries(availableSpace) as [ItemPosition, number][]
-  ).sort((a, b) => b[1] - a[1])
-
-  return sortedSpaces[0][0]
-}
-
-function calculatePosition(rect: DOMRect): {
-  x: number
-  y: number
-  position: ItemPosition
-} {
-  const position = getIdealPosition(rect)
-
+    right: ui.viewport.value.width - rect.right
+  };
+  const sortedSpaces = Object.entries(availableSpace).sort((a, b) => b[1] - a[1]);
+  return sortedSpaces[0][0];
+};
+function calculatePosition(rect) {
+  const position = getIdealPosition(rect);
   switch (position) {
-    case 'top':
+    case "top":
       return {
         position,
         y: ui.viewport.value.height,
-        x: rect.x + rect.width / 2,
-      }
-    case 'bottom':
+        x: rect.x + rect.width / 2
+      };
+    case "bottom":
       return {
         position,
         x: rect.x + rect.width / 2,
-        y: rect.bottom,
-      }
-    case 'left':
+        y: rect.bottom
+      };
+    case "left":
       return {
         position,
         y: rect.y + rect.height / 2,
-        x: rect.x,
-      }
+        x: rect.x
+      };
   }
-
   return {
     position,
     x: rect.right + 20,
-    y: Math.max(rect.top, 70),
-  }
+    y: Math.max(rect.top, 70)
+  };
 }
-
-onBlokkliEvent('keyPressed', (e) => {
-  if (e.code === 'Tab') {
-    e.originalEvent.preventDefault()
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Tab") {
+    e.originalEvent.preventDefault();
     if (e.shift) {
-      prev()
+      prev();
     } else {
-      next()
+      next();
     }
-  } else if (e.code === 'Escape') {
-    e.originalEvent.preventDefault()
-    emit('close')
-  } else if (e.code === 'ArrowLeft') {
-    e.originalEvent.preventDefault()
-    prev()
-  } else if (e.code === 'ArrowRight') {
-    e.originalEvent.preventDefault()
-    next()
+  } else if (e.code === "Escape") {
+    e.originalEvent.preventDefault();
+    emit("close");
+  } else if (e.code === "ArrowLeft") {
+    e.originalEvent.preventDefault();
+    prev();
+  } else if (e.code === "ArrowRight") {
+    e.originalEvent.preventDefault();
+    next();
   }
-})
-
+});
 useAnimationFrame(() => {
   if (!contentEl.value) {
-    return
+    return;
   }
-
-  tooltipHeight.value = contentEl.value.scrollHeight + 50
-})
+  tooltipHeight.value = contentEl.value.scrollHeight + 50;
+});
 </script>

package/dist/runtime/components/Edit/Features/Tour/Overlay/index.vue.d.ts

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

package/dist/runtime/components/Edit/Features/Tour/Popup/index.vue

@@ -2,7 +2,7 @@
   <Teleport to="body">
     <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
       <div class="bk-tour-popup-title">
-        <h2>{{ $t('tourLabel', 'Take a tour') }}</h2>
+        <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
         <button class="bk-tour-popup-close" @click="$emit('close')">
           <Icon name="close" />
         </button>
@@ -12,25 +12,23 @@
         <p>
           {{
             $t(
-              'tourIntro',
-              'Explore the most important features of the editor and learn how to get started using blökkli.',
-            )
+  "tourIntro",
+  "Explore the most important features of the editor and learn how to get started using bl\xF6kkli."
+)
           }}
         </p>
 
         <button class="bk-button" @click="$emit('start')">
-          {{ $t('tourStartButton', 'Start the tour') }}
+          {{ $t("tourStartButton", "Start the tour") }}
         </button>
       </div>
     </ViewportBlockingRect>
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { Icon, ViewportBlockingRect } from '#blokkli/components'
-import { useBlokkli } from '#imports'
-
-const { $t } = useBlokkli()
-
-defineEmits(['start', 'close'])
+<script setup>
+import { Icon, ViewportBlockingRect } from "#blokkli/components";
+import { useBlokkli } from "#imports";
+const { $t } = useBlokkli();
+defineEmits(["start", "close"]);
 </script>

package/dist/runtime/components/Edit/Features/Tour/Popup/index.vue.d.ts

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

package/dist/runtime/components/Edit/Features/Tour/index.vue

@@ -12,35 +12,31 @@
   <Popup v-if="showTourPopup" @close="close" @start="start" />
 </template>
 
-<script lang="ts" setup>
-import { defineBlokkliFeature, useBlokkli } from '#imports'
-import Overlay from './Overlay/index.vue'
-import { PluginMenuButton } from '#blokkli/plugins'
-import Popup from './Popup/index.vue'
-
+<script setup>
+import { defineBlokkliFeature, useBlokkli } from "#imports";
+import Overlay from "./Overlay/index.vue";
+import { PluginMenuButton } from "#blokkli/plugins";
+import Popup from "./Popup/index.vue";
 defineBlokkliFeature({
-  id: 'tour',
-  label: 'Tour',
-  icon: 'tutor',
-  description: 'Provides a tour overlay to get to know the editor.',
-})
-
-const { tour, $t, storage } = useBlokkli()
-
-const showTourPopup = storage.use('showTourPopup', true)
-
+  id: "tour",
+  label: "Tour",
+  icon: "tutor",
+  description: "Provides a tour overlay to get to know the editor."
+});
+const { tour, $t, storage } = useBlokkli();
+const showTourPopup = storage.use("showTourPopup", true);
 const start = () => {
-  showTourPopup.value = false
-  tour.isTouring.value = true
-}
+  showTourPopup.value = false;
+  tour.isTouring.value = true;
+};
 const close = () => {
-  showTourPopup.value = false
-  tour.isTouring.value = false
-}
+  showTourPopup.value = false;
+  tour.isTouring.value = false;
+};
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Tour',
-}
+  name: "Tour"
+};
 </script>

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