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

package/dist/runtime/components/Edit/Features/Clipboard/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/CommandPalette/Palette/Group/index.vue

@@ -23,39 +23,29 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { computed } from '#imports'
-import { Icon, ItemIcon, Highlight } from '#blokkli/components'
-import type { Command } from '#blokkli/types'
-
-const props = defineProps<{
-  label: string
-  commands: Array<Command & { _id: number }>
-  visibleIds: { id: number; positions: number[] }[] | undefined
-  focusedId: string
-}>()
-
-defineEmits<{
-  (e: 'close'): void
-  (e: 'focus' | 'select', id: string): void
-}>()
-
+<script setup>
+import { computed } from "#imports";
+import { Icon, ItemIcon, Highlight } from "#blokkli/components";
+const props = defineProps({
+  label: { type: String, required: true },
+  commands: { type: Array, required: true },
+  visibleIds: { type: null, required: true },
+  focusedId: { type: String, required: true }
+});
+defineEmits(["close", "focus", "select"]);
 const mapped = computed(() => {
-  return props.commands
-    .map((v) => {
-      const found = props.visibleIds?.find((w) => w.id === v._id)
-      return {
-        ...v,
-        visible: props.visibleIds === undefined || !!found,
-        positions: found?.positions,
-      }
-    })
-    .sort((a, b) => {
-      const indexA = props.visibleIds?.findIndex((w) => w.id === a._id) || -1
-      const indexB = props.visibleIds?.findIndex((w) => w.id === b._id) || -1
-      return indexA - indexB
-    })
-})
-
-const shouldRender = computed(() => mapped.value.some((v) => v.visible))
+  return props.commands.map((v) => {
+    const found = props.visibleIds?.find((w) => w.id === v._id);
+    return {
+      ...v,
+      visible: props.visibleIds === void 0 || !!found,
+      positions: found?.positions
+    };
+  }).sort((a, b) => {
+    const indexA = props.visibleIds?.findIndex((w) => w.id === a._id) || -1;
+    const indexB = props.visibleIds?.findIndex((w) => w.id === b._id) || -1;
+    return indexA - indexB;
+  });
+});
+const shouldRender = computed(() => mapped.value.some((v) => v.visible));
 </script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue.d.ts

@@ -0,0 +1,22 @@
+import type { Command } from '#blokkli/types';
+type __VLS_Props = {
+    label: string;
+    commands: Array<Command & {
+        _id: number;
+    }>;
+    visibleIds: {
+        id: number;
+        positions: number[];
+    }[] | undefined;
+    focusedId: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => void;
+    focus: (id: string) => void;
+    select: (id: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onFocus?: ((id: string) => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/index.vue

@@ -13,8 +13,8 @@
         v-model="text"
         type="text"
         :placeholder="
-          $t('commandPalette.inputPlaceholder', 'Search commands...')
-        "
+  $t('commandPalette.inputPlaceholder', 'Search commands...')
+"
       />
     </div>
     <div class="bk-command-palette-results bk-scrollbar-dark">
@@ -33,7 +33,7 @@
   </ScrollBoundary>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   onMounted,
@@ -41,257 +41,208 @@ import {
   useBlokkli,
   watch,
   nextTick,
-  onBeforeUnmount,
-} from '#imports'
-import { Icon, ScrollBoundary } from '#blokkli/components'
-import type { Command, CommandGroup } from '#blokkli/types'
-import Group from './Group/index.vue'
-import { falsy } from '#blokkli/helpers'
-import { Fzf } from 'fzf'
-
-const { commands, $t, selection } = useBlokkli()
-
-const emit = defineEmits(['close'])
-
-const inputEl = ref<HTMLInputElement | null>(null)
-const text = ref('')
-const focusedId = ref('')
-const hasUsedMouse = ref(false)
-
-function onFocus(id: string) {
+  onBeforeUnmount
+} from "#imports";
+import { Icon, ScrollBoundary } from "#blokkli/components";
+import Group from "./Group/index.vue";
+import { falsy } from "#blokkli/helpers";
+import { Fzf } from "fzf";
+const { commands, $t, selection } = useBlokkli();
+const emit = defineEmits(["close"]);
+const inputEl = ref(null);
+const text = ref("");
+const focusedId = ref("");
+const hasUsedMouse = ref(false);
+function onFocus(id) {
   if (!hasUsedMouse.value) {
-    return
+    return;
   }
-  focusedId.value = id
-}
-
-type GroupedCommands = {
-  id: CommandGroup
-  label: string
-  commands: Array<Command & { _id: number }>
+  focusedId.value = id;
 }
-
-const getGroupLabel = (id: CommandGroup): string => {
-  if (id === 'ui') {
-    return $t('commandGroup.ui', 'Interface')
-  } else if (id === 'add') {
-    return $t('commandGroup.add', 'Add new')
-  } else if (id === 'action') {
-    return $t('commandGroup.action', 'Actions')
-  } else if (id === 'selection') {
-    return $t('commandGroup.selection', 'Selection')
-  } else if (id === 'misc') {
-    return $t('commandGroup.misc', 'Miscellaneous')
+const getGroupLabel = (id) => {
+  if (id === "ui") {
+    return $t("commandGroup.ui", "Interface");
+  } else if (id === "add") {
+    return $t("commandGroup.add", "Add new");
+  } else if (id === "action") {
+    return $t("commandGroup.action", "Actions");
+  } else if (id === "selection") {
+    return $t("commandGroup.selection", "Selection");
+  } else if (id === "misc") {
+    return $t("commandGroup.misc", "Miscellaneous");
   }
-
-  return id
-}
-
-const groupOrder = computed<CommandGroup[]>(() => {
-  // When blocks are selected, the block actions should be first.
+  return id;
+};
+const groupOrder = computed(() => {
   if (selection.uuids.value.length) {
-    return ['selection', 'add']
+    return ["selection", "add"];
   }
-  return ['add']
-})
-
-const items = computed<Array<Command & { _id: number }>>(() =>
-  commands
-    .getCommands()
-    .filter((v) => !v.disabled)
-    .map((doc, index) => {
-      return {
-        ...doc,
-        _id: index,
-      }
-    }),
-)
-
+  return ["add"];
+});
+const items = computed(
+  () => commands.getCommands().filter((v) => !v.disabled).map((doc, index) => {
+    return {
+      ...doc,
+      _id: index
+    };
+  })
+);
 const fzf = new Fzf(items.value, {
   // With selector you tell FZF where it can find
   // the string that you want to query on
-  selector: (item) => item.label,
-})
-
-const visibleIds = computed<{ id: number; positions: number[] }[] | undefined>(
+  selector: (item) => item.label
+});
+const visibleIds = computed(
   () => {
     if (!text.value) {
-      return undefined
+      return void 0;
     }
-
-    const results = fzf.find(text.value)
+    const results = fzf.find(text.value);
     return results.map((v) => {
       return {
         id: v.item._id,
-        positions: [...v.positions],
-      }
-    })
-  },
-)
-
-const groups = computed<GroupedCommands[]>(() => {
+        positions: [...v.positions]
+      };
+    });
+  }
+);
+const groups = computed(() => {
   return Object.values(
-    items.value.reduce<Record<string, GroupedCommands>>((acc, command) => {
-      const group = command.group || 'misc'
+    items.value.reduce((acc, command) => {
+      const group = command.group || "misc";
       if (!acc[group]) {
         acc[group] = {
           id: group,
           label: getGroupLabel(group),
-          commands: [],
-        }
+          commands: []
+        };
       }
-
-      acc[group].commands.push(command)
-      return acc
-    }, {}),
+      acc[group].commands.push(command);
+      return acc;
+    }, {})
   ).sort((a, b) => {
-    const indexA = groupOrder.value.indexOf(a.id)
-    const indexB = groupOrder.value.indexOf(b.id)
-
+    const indexA = groupOrder.value.indexOf(a.id);
+    const indexB = groupOrder.value.indexOf(b.id);
     if (indexA === -1 && indexB === -1) {
-      return 0
+      return 0;
     } else if (indexA === -1) {
-      return 1
+      return 1;
     } else if (indexB === -1) {
-      return -1
+      return -1;
     }
-
-    return indexA - indexB
-  })
-})
-
+    return indexA - indexB;
+  });
+});
 watch(text, () => {
   nextTick(() => {
-    focusFirst()
-  })
-})
-
-watch(selection.uuids, () => emit('close'))
-
+    focusFirst();
+  });
+});
+watch(selection.uuids, () => emit("close"));
 const focusFirst = () => {
   const element = document.querySelector(
-    '.bk-command-palette .bk-command[data-command-visible="true"]',
-  )
+    '.bk-command-palette .bk-command[data-command-visible="true"]'
+  );
   if (element instanceof HTMLElement) {
-    focusedId.value = element.dataset.commandId || ''
+    focusedId.value = element.dataset.commandId || "";
   }
-}
-
+};
 const getCommandElements = () => {
   return [
     ...document.querySelectorAll(
-      '.bk-command-palette .bk-command[data-command-visible="true"]',
-    ),
-  ]
-    .map((el) => {
-      if (el instanceof HTMLElement) {
-        const id = el.dataset.commandId
-        if (id) {
-          return {
-            id,
-            el,
-            focused: focusedId.value === id,
-          }
-        }
+      '.bk-command-palette .bk-command[data-command-visible="true"]'
+    )
+  ].map((el) => {
+    if (el instanceof HTMLElement) {
+      const id = el.dataset.commandId;
+      if (id) {
+        return {
+          id,
+          el,
+          focused: focusedId.value === id
+        };
       }
-    })
-    .filter(falsy)
-}
-
+    }
+  }).filter(falsy);
+};
 const focusPrev = () => {
-  const elements = getCommandElements()
-  if (elements.length === -1) {
-    return
+  const elements = getCommandElements();
+  if (elements.length === 0) {
+    return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused)
-  // None or first is focused.
+  const focusedIndex = elements.findIndex((v) => v.focused);
   if (focusedIndex <= 0) {
-    // Focus last element.
-    focusedId.value = elements[elements.length - 1].id
+    focusedId.value = elements[elements.length - 1].id;
   } else {
-    focusedId.value = elements[focusedIndex - 1].id
+    focusedId.value = elements[focusedIndex - 1].id;
   }
-  scrollFocusedIntoView()
-}
-
+  scrollFocusedIntoView();
+};
 const focusNext = () => {
-  const elements = getCommandElements()
-  if (elements.length === -1) {
-    return
+  const elements = getCommandElements();
+  if (elements.length === 0) {
+    return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused)
-  // None or last is focused.
+  const focusedIndex = elements.findIndex((v) => v.focused);
   if (focusedIndex === -1 || focusedIndex === elements.length - 1) {
-    // Focus last element.
-    focusedId.value = elements[0].id
+    focusedId.value = elements[0].id;
   } else {
-    focusedId.value = elements[focusedIndex + 1].id
+    focusedId.value = elements[focusedIndex + 1].id;
   }
-
-  scrollFocusedIntoView()
-}
-
+  scrollFocusedIntoView();
+};
 const scrollFocusedIntoView = () => {
-  const element = getCommandElements().find((v) => v.focused)?.el
+  const element = getCommandElements().find((v) => v.focused)?.el;
   if (element) {
-    element.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
   }
-}
-
-const onSelect = (id: string) => {
-  const command = items.value.find((v) => v.id === id)
+};
+const onSelect = (id) => {
+  const command = items.value.find((v) => v.id === id);
   if (command) {
-    command.callback()
-    emit('close')
+    command.callback();
+    emit("close");
   }
-}
-
-const onKeyDown = (e: KeyboardEvent) => {
-  e.stopPropagation()
-  if (e.code === 'KeyK' && (e.ctrlKey || e.metaKey)) {
-    e.preventDefault()
-    emit('close')
-    return
+};
+const onKeyDown = (e) => {
+  e.stopPropagation();
+  if (e.code === "KeyK" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    emit("close");
+    return;
   }
-  if (e.code === 'Tab') {
-    e.preventDefault()
+  if (e.code === "Tab") {
+    e.preventDefault();
     if (e.shiftKey) {
-      focusPrev()
+      focusPrev();
     } else {
-      focusNext()
+      focusNext();
     }
-  } else if (
-    e.code === 'ArrowDown' ||
-    (e.code === 'KeyJ' && (e.ctrlKey || e.metaKey))
-  ) {
-    e.preventDefault()
-    focusNext()
-  } else if (e.code === 'ArrowUp') {
-    e.preventDefault()
-    focusPrev()
-  } else if (e.code === 'Enter') {
-    e.preventDefault()
-    onSelect(focusedId.value)
-  } else if (e.code === 'Escape') {
-    e.preventDefault()
-    emit('close')
+  } else if (e.code === "ArrowDown" || e.code === "KeyJ" && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    focusNext();
+  } else if (e.code === "ArrowUp") {
+    e.preventDefault();
+    focusPrev();
+  } else if (e.code === "Enter") {
+    e.preventDefault();
+    onSelect(focusedId.value);
+  } else if (e.code === "Escape") {
+    e.preventDefault();
+    emit("close");
   }
-}
-
+};
 const onWindowClick = () => {
-  emit('close')
-}
-
+  emit("close");
+};
 onMounted(() => {
   if (inputEl.value) {
-    inputEl.value.focus()
-    focusFirst()
+    inputEl.value.focus();
+    focusFirst();
   }
-
-  document.body.addEventListener('click', onWindowClick)
-})
-
+  document.body.addEventListener("click", onWindowClick);
+});
 onBeforeUnmount(() => {
-  document.body.removeEventListener('click', onWindowClick)
-})
+  document.body.removeEventListener("click", onWindowClick);
+});
 </script>

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

@@ -13,39 +13,34 @@
     key-code="K"
     region="before-sidebar"
     :tour-text="
-      $t(
-        'commandPaletteTourText',
-        'Easily perform actions using your keyboard by launching the command palette. Most of the features available using clicks is also available in the command palette.',
-      )
-    "
+  $t(
+    'commandPaletteTourText',
+    'Easily perform actions using your keyboard by launching the command palette. Most of the features available using clicks is also available in the command palette.'
+  )
+"
     icon="command"
     @click="isVisible = !isVisible"
   />
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature, ref, computed } from '#imports'
-import { PluginToolbarButton } from '#blokkli/plugins'
-import Palette from './Palette/index.vue'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
+import { PluginToolbarButton } from "#blokkli/plugins";
+import Palette from "./Palette/index.vue";
 defineBlokkliFeature({
-  id: 'command-palette',
-  icon: 'command',
-  label: 'Command Palette',
-  description:
-    'Provides a command palette with search to access most UI features with a keyboard.',
-  viewports: ['desktop'],
-})
-
-const { $t } = useBlokkli()
-
-const isVisible = ref(false)
-
-const label = computed(() => $t('commandPaletteOpen', 'Open Command Palette'))
+  id: "command-palette",
+  icon: "command",
+  label: "Command Palette",
+  description: "Provides a command palette with search to access most UI features with a keyboard.",
+  viewports: ["desktop"]
+});
+const { $t } = useBlokkli();
+const isVisible = ref(false);
+const label = computed(() => $t("commandPaletteOpen", "Open Command Palette"));
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'CommandPalette',
-}
+  name: "CommandPalette"
+};
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="bk-blokkli-item-actions-comment-dropdown" @keydown.capture.stop>
     <label for="comment_body" class="bk-form-label">{{
-      $t('commentBody', 'Comment')
+      $t("commentBody", "Comment")
     }}</label>
     <textarea
       id="comment_body"
@@ -12,21 +12,18 @@
       required
     />
     <button class="bk-button bk-is-primary" @click="$emit('add', comment)">
-      {{ $t('commentSave', 'Submit comment') }}
+      {{ $t("commentSave", "Submit comment") }}
     </button>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli } from '#imports'
-
-const comment = ref('')
-defineEmits(['add'])
-const { $t } = useBlokkli()
-
-const getComment = (): string => {
-  return comment.value
-}
-
-defineExpose({ getComment })
+<script setup>
+import { ref, useBlokkli } from "#imports";
+const comment = ref("");
+defineEmits(["add"]);
+const { $t } = useBlokkli();
+const getComment = () => {
+  return comment.value;
+};
+defineExpose({ getComment });
 </script>

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

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