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

package/dist/runtime/components/Edit/Features/Comments/Comment/index.vue

@@ -14,40 +14,32 @@
       @click.capture.stop="$emit('resolve')"
     >
       <Icon name="check" />
-      <span>{{ $t('commentsMarkAsResolved', 'Resolve') }}</span>
+      <span>{{ $t("commentsMarkAsResolved", "Resolve") }}</span>
     </button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useBlokkli } from '#imports'
-import type { CommentItem } from '#blokkli/types'
-import { Icon, RelativeTime } from '#blokkli/components'
-
-const { adapter, $t } = useBlokkli()
-
-const resolveImplemeted = computed(() => !!adapter.resolveComment)
-
-defineEmits<{
-  (e: 'resolve' | 'clickComment'): void
-}>()
-
-const props = defineProps<{
-  uuid?: string | number
-  blockUuids?: string[]
-  resolved?: boolean
-  body?: string
-  created?: CommentItem['created']
-  user?: CommentItem['user']
-}>()
-
-const timestamp = computed(() =>
-  props.created ? Number.parseInt(props.created.toString()) : 0,
-)
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, RelativeTime } from "#blokkli/components";
+const { adapter, $t } = useBlokkli();
+const resolveImplemeted = computed(() => !!adapter.resolveComment);
+defineEmits(["resolve", "clickComment"]);
+const props = defineProps({
+  uuid: { type: [String, Number], required: false },
+  blockUuids: { type: Array, required: false },
+  resolved: { type: Boolean, required: false },
+  body: { type: String, required: false },
+  created: { type: [String, Number], required: false },
+  user: { type: Object, required: false }
+});
+const timestamp = computed(
+  () => props.created ? Number.parseInt(props.created.toString()) : 0
+);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Comment',
-}
+  name: "Comment"
+};
 </script>

package/dist/runtime/components/Edit/Features/Comments/Comment/index.vue.d.ts

@@ -0,0 +1,23 @@
+import type { CommentItem } from '#blokkli/types';
+declare const _default: import("vue").DefineComponent<{
+    uuid?: string | number;
+    blockUuids?: string[];
+    resolved?: boolean;
+    body?: string;
+    created?: CommentItem["created"];
+    user?: CommentItem["user"];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    resolve: () => void;
+    clickComment: () => void;
+}, string, import("vue").PublicProps, Readonly<{
+    uuid?: string | number;
+    blockUuids?: string[];
+    resolved?: boolean;
+    body?: string;
+    created?: CommentItem["created"];
+    user?: CommentItem["user"];
+}> & Readonly<{
+    onResolve?: (() => any) | undefined;
+    onClickComment?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Comments/Overlay/Item/index.vue

@@ -3,16 +3,16 @@
     class="bk-comments-overlay-item"
     :style="style"
     :class="{
-      'bk-is-active': showComments,
-      'bk-is-left': isLeft,
-      'bk-is-right': !isLeft,
-    }"
+  'bk-is-active': showComments,
+  'bk-is-left': isLeft,
+  'bk-is-right': !isLeft
+}"
   >
     <button
       class="bk-comments-overlay-item-button"
       :class="{
-        'bk-has-unresolved-comments': unresolvedCount > 0,
-      }"
+  'bk-has-unresolved-comments': unresolvedCount > 0
+}"
       @click="$emit('toggle')"
     >
       <Icon v-if="showComments" name="close" />
@@ -28,9 +28,7 @@
         <span
           >{{ comments.length }}
           {{
-            comments.length === 1
-              ? $t('singleComment', 'comment')
-              : $t('comments', 'Comments')
+            comments.length === 1 ? $t("singleComment", "comment") : $t("comments", "Comments")
           }}</span
         >
       </div>
@@ -51,50 +49,40 @@
           class="bk-button bk-is-primary bk-is-small"
           @click="addComment"
         >
-          {{ $t('commentAdd', 'Add comment') }}
+          {{ $t("commentAdd", "Add comment") }}
         </button>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, useBlokkli } from '#imports'
-import type { CommentItem } from '#blokkli/types'
-import { Icon } from '#blokkli/components'
-import Comment from './../../Comment/index.vue'
-
-const { $t } = useBlokkli()
-
-const commentText = ref('')
-const showFullForm = ref(false)
-const emit = defineEmits<{
-  (e: 'toggle'): void
-  (e: 'addComment' | 'resolveComment', text: string): void
-}>()
-
-const props = defineProps<{
-  isReduced: boolean
-  isLeft: boolean
-  uuids: string[]
-  comments: CommentItem[]
-  style: any
-  showComments: boolean
-}>()
-
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+import Comment from "./../../Comment/index.vue";
+const { $t } = useBlokkli();
+const commentText = ref("");
+const showFullForm = ref(false);
+const emit = defineEmits(["toggle", "addComment", "resolveComment"]);
+const props = defineProps({
+  isReduced: { type: Boolean, required: true },
+  isLeft: { type: Boolean, required: true },
+  uuids: { type: Array, required: true },
+  comments: { type: Array, required: true },
+  style: { type: null, required: true },
+  showComments: { type: Boolean, required: true }
+});
 const unresolvedCount = computed(
-  () => props.comments.filter((v) => !v.resolved).length,
-)
-
+  () => props.comments.filter((v) => !v.resolved).length
+);
 function addComment() {
-  emit('addComment', commentText.value)
-  showFullForm.value = false
-  commentText.value = ''
+  emit("addComment", commentText.value);
+  showFullForm.value = false;
+  commentText.value = "";
 }
-
-function resolveComment(uuid: string | undefined) {
+function resolveComment(uuid) {
   if (uuid) {
-    emit('resolveComment', uuid)
+    emit("resolveComment", uuid);
   }
 }
 </script>

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

@@ -0,0 +1,19 @@
+import type { CommentItem } from '#blokkli/types';
+type __VLS_Props = {
+    isReduced: boolean;
+    isLeft: boolean;
+    uuids: string[];
+    comments: CommentItem[];
+    style: any;
+    showComments: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => void;
+    addComment: (text: string) => void;
+    resolveComment: (text: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+    onAddComment?: ((text: string) => any) | undefined;
+    onResolveComment?: ((text: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Comments/Overlay/index.vue

@@ -16,118 +16,88 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli } from '#imports'
-import type { CommentItem } from '#blokkli/types'
-import { falsy, getBounds } from '#blokkli/helpers'
-import Item from './Item/index.vue'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
-type Indicator = {
-  id: string
-  comments: CommentItem[]
-  uuids: string[]
-  style: {
-    transform: string
-  }
-}
-
-const { eventBus, ui, dom } = useBlokkli()
-
-const props = defineProps<{
-  comments: CommentItem[]
-}>()
-
-defineEmits<{
-  (e: 'addComment', data: { uuids: string[]; body: string }): void
-  (e: 'resolveComment', uuid: string): void
-}>()
-
-const isReduced = ref(false)
-const isLeft = ref(false)
-const active = ref('')
-
-function toggle(item: Indicator) {
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import { falsy, getBounds } from "#blokkli/helpers";
+import Item from "./Item/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const { eventBus, ui, dom } = useBlokkli();
+const props = defineProps({
+  comments: { type: Array, required: true }
+});
+defineEmits(["addComment", "resolveComment"]);
+const isReduced = ref(false);
+const isLeft = ref(false);
+const active = ref("");
+function toggle(item) {
   if (active.value === item.id) {
-    active.value = ''
-    eventBus.emit('select:end', [])
+    active.value = "";
+    eventBus.emit("select:end", []);
   } else {
-    active.value = item.id
-    eventBus.emit('select:end', item.uuids)
+    active.value = item.id;
+    eventBus.emit("select:end", item.uuids);
   }
 }
-
-const indicators = ref<Indicator[]>([])
-
-onBlokkliEvent('canvas:draw', (e) => {
-  const scale = e.artboardScale
-  const offset = e.artboardOffset
-
+const indicators = ref([]);
+onBlokkliEvent("canvas:draw", (e) => {
+  const scale = e.artboardScale;
+  const offset = e.artboardOffset;
   const x = Math.min(
     offset.x + ui.artboardSize.value.width * scale + 10,
-    ui.visibleViewportPadded.value.x +
-      ui.visibleViewportPadded.value.width -
-      30,
-  )
-  isReduced.value = scale < 0.8
-  isLeft.value =
-    x + 300 <
-    ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width
-
-  const newIndicators: Record<string, Indicator> = {}
-  const yMap = new Set<number>()
-
-  const findY = (y: number): number => {
+    ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width - 30
+  );
+  isReduced.value = scale < 0.8;
+  isLeft.value = x + 300 < ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width;
+  const newIndicators = {};
+  const yMap = /* @__PURE__ */ new Set();
+  const findY = (y) => {
     if (yMap.has(y)) {
-      return findY(y + 60)
+      return findY(y + 60);
     }
-    yMap.add(y)
-    return y
-  }
-
+    yMap.add(y);
+    return y;
+  };
   for (let i = 0; i < props.comments.length; i++) {
-    const comment = props.comments[i]
-    const uuids = comment.blockUuids || []
-    const rects = uuids
-      .filter(falsy)
-      .map((uuid) => {
-        const blockRect = dom.getBlockRect(uuid)
-        if (!blockRect) {
-          return
-        }
-
-        const rect = ui.getViewportRelativeRect(blockRect)
-
-        return {
-          x: rect.x,
-          y: rect.y,
-          width: rect.width,
-          height: rect.height,
-          uuid,
-        }
-      })
-      .filter(falsy)
+    const comment = props.comments[i];
+    const uuids = comment.blockUuids || [];
+    const rects = uuids.filter(falsy).map((uuid) => {
+      const blockRect = dom.getBlockRect(uuid);
+      if (!blockRect) {
+        return;
+      }
+      const rect = ui.getViewportRelativeRect(blockRect);
+      return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width,
+        height: rect.height,
+        uuid
+      };
+    }).filter(falsy);
     if (rects.length) {
-      const bounds = getBounds(rects)
-      const id = uuids.join(',')
-      if (bounds && !newIndicators[id]) {
-        const y = findY(Math.round(bounds.y))
-        newIndicators[id] = {
-          id,
-          comments: [],
-          uuids,
-          style: {
-            // @TODO: Because the --bk-artboard-scale CSS variable was
-            // removed, the comment box now scaled with the artboard.
-            // This should be fixed by not positioning the box inside the
-            // artboard element so it does not scale.
-            transform: `translate(${x}px, ${y}px)`,
-          },
+      const bounds = getBounds(rects);
+      const id = uuids.join(",");
+      if (bounds) {
+        if (!newIndicators[id]) {
+          const y = findY(Math.round(bounds.y));
+          newIndicators[id] = {
+            id,
+            comments: [comment],
+            uuids,
+            style: {
+              // @TODO: Because the --bk-artboard-scale CSS variable was
+              // removed, the comment box now scaled with the artboard.
+              // This should be fixed by not positioning the box inside the
+              // artboard element so it does not scale.
+              transform: `translate(${x}px, ${y}px)`
+            }
+          };
+        } else {
+          newIndicators[id].comments.push(comment);
         }
       }
-      newIndicators[id].comments.push(comment)
     }
   }
-  indicators.value = Object.values(newIndicators)
-})
+  indicators.value = Object.values(newIndicators);
+});
 </script>

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

@@ -0,0 +1,18 @@
+import type { CommentItem } from '#blokkli/types';
+type __VLS_Props = {
+    comments: CommentItem[];
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    addComment: (data: {
+        uuids: string[];
+        body: string;
+    }) => any;
+    resolveComment: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAddComment?: ((data: {
+        uuids: string[];
+        body: string;
+    }) => any) | undefined;
+    onResolveComment?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -3,8 +3,8 @@
     id="comments"
     :title="$t('comments', 'Comments')"
     :tour-text="
-      $t('commentsTourText', 'Shows all comments for the current page.')
-    "
+  $t('commentsTourText', 'Shows all comments for the current page.')
+"
     icon="comment"
     weight="-20"
   >
@@ -46,65 +46,54 @@
   />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   watch,
   ref,
   useBlokkli,
   defineBlokkliFeature,
-  computed,
-} from '#imports'
-import { PluginSidebar, PluginItemAction } from '#blokkli/plugins'
-import Comment from './Comment/index.vue'
-import CommentAddForm from './AddForm/index.vue'
-import CommentsOverlay from './Overlay/index.vue'
-import type { CommentItem } from '#blokkli/types'
-
+  computed
+} from "#imports";
+import { PluginSidebar, PluginItemAction } from "#blokkli/plugins";
+import Comment from "./Comment/index.vue";
+import CommentAddForm from "./AddForm/index.vue";
+import CommentsOverlay from "./Overlay/index.vue";
 const { adapter } = defineBlokkliFeature({
-  id: 'comments',
-  icon: 'comment',
-  label: 'Comments',
-  requiredAdapterMethods: ['loadComments', 'addComment'],
-  description: 'Provides comment functionality for blocks.',
-  screenshot: 'feature-comments.jpg',
-})
-
-const { eventBus, $t, selection } = useBlokkli()
-
-const commentForm = ref<InstanceType<typeof CommentAddForm> | null>(null)
-const showAddComment = ref(false)
-
+  id: "comments",
+  icon: "comment",
+  label: "Comments",
+  requiredAdapterMethods: ["loadComments", "addComment"],
+  description: "Provides comment functionality for blocks.",
+  screenshot: "feature-comments.jpg"
+});
+const { eventBus, $t, selection } = useBlokkli();
+const commentForm = ref(null);
+const showAddComment = ref(false);
 watch(selection.uuids, () => {
   if (commentForm.value && !commentForm.value.getComment()) {
-    showAddComment.value = false
+    showAddComment.value = false;
   }
-})
-
-const comments = ref<CommentItem[]>([])
-comments.value = await adapter.loadComments()
-
+});
+const comments = ref([]);
+comments.value = await adapter.loadComments();
 const unresolvedCount = computed(
-  () => comments.value.filter((v) => !v.resolved).length,
-)
-
-const onAddComment = async (body: string, uuids: string[]) => {
-  comments.value = await adapter.addComment(uuids, body)
-  showAddComment.value = false
-}
-
-const onResolveComment = async (uuid: string) => {
+  () => comments.value.filter((v) => !v.resolved).length
+);
+const onAddComment = async (body, uuids) => {
+  comments.value = await adapter.addComment(uuids, body);
+  showAddComment.value = false;
+};
+const onResolveComment = async (uuid) => {
   if (!adapter.resolveComment) {
-    return
+    return;
   }
-  comments.value = await adapter.resolveComment(uuid)
-}
-
-const onClickComment = (comment: CommentItem) =>
-  eventBus.emit('select:end', comment.blockUuids || [])
+  comments.value = await adapter.resolveComment(uuid);
+};
+const onClickComment = (comment) => eventBus.emit("select:end", comment.blockUuids || []);
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Comments',
-}
+  name: "Comments"
+};
 </script>

package/dist/runtime/components/Edit/Features/Comments/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/Conversions/index.vue

@@ -17,82 +17,66 @@
   </PluginItemDropdown>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   useBlokkli,
   defineBlokkliFeature,
   useLazyAsyncData,
-  watch,
-} from '#imports'
-import { ItemIcon } from '#blokkli/components'
-import { PluginItemDropdown } from '#blokkli/plugins'
-import { falsy, onlyUnique } from '#blokkli/helpers'
-import type { BlockBundleDefinition } from '#blokkli/types'
-
+  watch
+} from "#imports";
+import { ItemIcon } from "#blokkli/components";
+import { PluginItemDropdown } from "#blokkli/plugins";
+import { falsy, onlyUnique } from "#blokkli/helpers";
 const { adapter } = defineBlokkliFeature({
-  id: 'conversions',
-  label: 'Conversions',
-  icon: 'convert',
-  requiredAdapterMethods: ['getConversions', 'convertBlocks'],
-  description:
-    'Provides block actions to convert one or more blocks to a different bundle.',
-})
-
-const { types, selection, state, $t } = useBlokkli()
-
+  id: "conversions",
+  label: "Conversions",
+  icon: "convert",
+  requiredAdapterMethods: ["getConversions", "convertBlocks"],
+  description: "Provides block actions to convert one or more blocks to a different bundle."
+});
+const { types, selection, state, $t } = useBlokkli();
 const {
   data: conversions,
   execute,
-  status,
+  status
 } = await useLazyAsyncData(() => adapter.getConversions(), {
   immediate: false,
-  default: () => [],
-})
-
+  default: () => []
+});
 watch(selection.uuids, () => {
-  if (status.value === 'idle') {
-    execute()
+  if (status.value === "idle") {
+    execute();
   }
-})
-
-async function onConvert(targetBundle?: string) {
+});
+async function onConvert(targetBundle) {
   if (!targetBundle) {
-    return
+    return;
   }
-
   await state.mutateWithLoadingState(
-    () =>
-      adapter.convertBlocks(
-        selection.blocks.value.map((v) => v.uuid),
-        targetBundle,
-      ),
-    $t('failedToConvert', 'The block could not be converted.'),
-  )
+    () => adapter.convertBlocks(
+      selection.blocks.value.map((v) => v.uuid),
+      targetBundle
+    ),
+    $t("failedToConvert", "The block could not be converted.")
+  );
 }
-
-const itemBundleIds = computed(() =>
-  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
-)
-
-const possibleConversions = computed<BlockBundleDefinition[]>(() => {
+const itemBundleIds = computed(
+  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
+);
+const possibleConversions = computed(() => {
   if (itemBundleIds.value.length !== 1) {
-    return []
+    return [];
   }
-  const sourceType = itemBundleIds.value[0]
-  return conversions.value
-    .filter(
-      (v) =>
-        v.sourceBundle === sourceType &&
-        types.allowedTypesInList.value.includes(v.targetBundle),
-    )
-    .map((v) => types.getBlockBundleDefinition(v.targetBundle))
-    .filter(falsy)
-})
+  const sourceType = itemBundleIds.value[0];
+  return conversions.value.filter(
+    (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)
+  ).map((v) => types.getBlockBundleDefinition(v.targetBundle)).filter(falsy);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Conversions',
-}
+  name: "Conversions"
+};
 </script>