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

package/dist/runtime/components/Edit/Features/History/List/index.vue

@@ -5,11 +5,11 @@
         v-for="item in mapped"
         :key="item.index"
         :class="{
-          'bk-is-not-active': item.index > currentMutationIndex,
-          'bk-is-active': item.index === currentMutationIndex,
-          'bk-is-disabled': !item.enabled,
-          'bk-is-applied': item.index < currentMutationIndex && item.enabled,
-        }"
+  'bk-is-not-active': item.index > currentMutationIndex,
+  'bk-is-active': item.index === currentMutationIndex,
+  'bk-is-disabled': !item.enabled,
+  'bk-is-applied': item.index < currentMutationIndex && item.enabled
+}"
       >
         <button
           :disabled="!canEdit"
@@ -41,10 +41,10 @@
         <button class="bk-history-item-button" @click="showAmount += 100">
           <strong
             >{{
-              $t('historyShowMore', 'Show @count more').replace(
-                '@count',
-                Math.min(totalMutations - showAmount, 100).toString(),
-              )
+              $t("historyShowMore", "Show @count more").replace(
+  "@count",
+  Math.min(totalMutations - showAmount, 100).toString()
+)
             }}
           </strong>
         </button>
@@ -52,14 +52,14 @@
       <li
         class="bk-is-last"
         :class="[
-          currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
-          { 'bk-has-shadow': !scrolledToEnd },
-        ]"
+  currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
+  { 'bk-has-shadow': !scrolledToEnd }
+]"
       >
         <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
           <div>
             <strong>{{
-              $t('historyCurrentRevision', 'Current revision')
+              $t("historyCurrentRevision", "Current revision")
             }}</strong>
           </div>
           <!-- @TODO: Pass in the timestamp of the entity's latest revision. -->
@@ -74,76 +74,55 @@
       </li>
     </ul>
     <div v-else class="bk-history-empty-message">
-      {{ $t('historyEmpty', 'There are now changes yet.') }}
+      {{ $t("historyEmpty", "There are now changes yet.") }}
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, useBlokkli, watch } from '#imports'
-import { RelativeTime, Icon } from '#blokkli/components'
-import type { MutationItem } from '#blokkli/types'
-
-defineProps<{
-  scrolledToEnd: boolean
-}>()
-
-const { state, $t, adapter } = useBlokkli()
-
-const { mutations, currentMutationIndex, canEdit, mutateWithLoadingState } =
-  state
-
-const canSetStatus = !!adapter.setMutationItemStatus
-
-const showAmount = ref(50)
-const totalMutations = computed(() => mutations.value.length)
-
+<script setup>
+import { ref, computed, useBlokkli, watch } from "#imports";
+import { RelativeTime, Icon } from "#blokkli/components";
+defineProps({
+  scrolledToEnd: { type: Boolean, required: true }
+});
+const { state, $t, adapter } = useBlokkli();
+const { mutations, currentMutationIndex, canEdit, mutateWithLoadingState } = state;
+const canSetStatus = !!adapter.setMutationItemStatus;
+const showAmount = ref(50);
+const totalMutations = computed(() => mutations.value.length);
 watch(totalMutations, (newTotal, previousTotal) => {
   if (newTotal !== previousTotal) {
-    showAmount.value = 50
+    showAmount.value = 50;
   }
-})
-
-type HistoryItem = {
-  index: number
-  mutation: MutationItem
-  timestamp: number
-  enabled: boolean
-}
-
-const mapped = computed<HistoryItem[]>(() =>
-  mutations.value
-    .map((mutation, index) => {
-      return {
-        index,
-        mutation,
-        timestamp: mutation.timestamp ? Number.parseInt(mutation.timestamp) : 0,
-        enabled: mutation.enabled !== false,
-      }
-    })
-    .sort((a, b) => {
-      return b.timestamp - a.timestamp
-    })
-    .filter((v, _i, arr) => {
-      return v.index >= arr.length - showAmount.value
-    }),
-)
-
-async function setHistoryIndex(index: number) {
+});
+const mapped = computed(
+  () => mutations.value.map((mutation, index) => {
+    return {
+      index,
+      mutation,
+      timestamp: mutation.timestamp ? Number.parseInt(mutation.timestamp) : 0,
+      enabled: mutation.enabled !== false
+    };
+  }).sort((a, b) => {
+    return b.timestamp - a.timestamp;
+  }).filter((v, _i, arr) => {
+    return v.index >= arr.length - showAmount.value;
+  })
+);
+async function setHistoryIndex(index) {
   if (!adapter.setHistoryIndex) {
-    return
+    return;
   }
   if (index !== currentMutationIndex.value) {
-    await mutateWithLoadingState(() => adapter.setHistoryIndex!(index))
+    await mutateWithLoadingState(() => adapter.setHistoryIndex(index));
   }
 }
-
-async function setMutationItemStatus(index: number, status: boolean) {
+async function setMutationItemStatus(index, status) {
   if (!adapter.setMutationItemStatus) {
-    return
+    return;
   }
-  await mutateWithLoadingState(() =>
-    adapter.setMutationItemStatus!(index, status),
-  )
+  await mutateWithLoadingState(
+    () => adapter.setMutationItemStatus(index, status)
+  );
 }
 </script>

package/dist/runtime/components/Edit/Features/History/List/index.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    scrolledToEnd: boolean;
+};
+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/Features/History/index.vue

@@ -4,11 +4,11 @@
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
     :tour-text="
-      $t(
-        'historyTourText',
-        'See a list of all changes made so far and switch back and forth between changes.',
-      )
-    "
+  $t(
+    'historyTourText',
+    'See a list of all changes made so far and switch back and forth between changes.'
+  )
+"
     icon="history"
     weight="-800"
   >
@@ -41,98 +41,83 @@
   />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   useBlokkli,
   watch,
   defineBlokkliFeature,
   onMounted,
-  onBeforeUnmount,
-} from '#imports'
-import { PluginSidebar, PluginToolbarButton } from '#blokkli/plugins'
-import HistoryList from './List/index.vue'
-
+  onBeforeUnmount
+} from "#imports";
+import { PluginSidebar, PluginToolbarButton } from "#blokkli/plugins";
+import HistoryList from "./List/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
-  id: 'history',
-  icon: 'history',
-  label: 'History',
-  requiredAdapterMethods: ['setHistoryIndex'],
-  description:
-    'Implements support for history features (undo, redo, list of mutations).',
+  id: "history",
+  icon: "history",
+  label: "History",
+  requiredAdapterMethods: ["setHistoryIndex"],
+  description: "Implements support for history features (undo, redo, list of mutations).",
   settings: {
     useMouseButtons: {
-      type: 'checkbox',
-      label: 'Use mouse buttons for undo/redo',
-      description:
-        'When enabled you can use the backwards/forwards buttons on your mouse to undo and redo.',
+      type: "checkbox",
+      label: "Use mouse buttons for undo/redo",
+      description: "When enabled you can use the backwards/forwards buttons on your mouse to undo and redo.",
       default: true,
-      group: 'behavior',
-      viewports: ['desktop'],
-    },
-  },
-})
-
-const { state, $t, ui } = useBlokkli()
-
-const { mutations, currentMutationIndex, mutateWithLoadingState } = state
-
-const useMouseForHistory = computed(() => settings.value.useMouseButtons)
-const canUndo = computed(() => currentMutationIndex.value >= 0)
+      group: "behavior",
+      viewports: ["desktop"]
+    }
+  }
+});
+const { state, $t, ui } = useBlokkli();
+const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
+const useMouseForHistory = computed(() => settings.value.useMouseButtons);
+const canUndo = computed(() => currentMutationIndex.value >= 0);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutations.value.length - 1,
-)
-
+  () => currentMutationIndex.value < mutations.value.length - 1
+);
 function undo() {
-  mutateWithLoadingState(() =>
-    adapter.setHistoryIndex(currentMutationIndex.value - 1),
-  )
+  mutateWithLoadingState(
+    () => adapter.setHistoryIndex(currentMutationIndex.value - 1)
+  );
 }
-
 function redo() {
-  mutateWithLoadingState(() =>
-    adapter.setHistoryIndex(currentMutationIndex.value + 1),
-  )
+  mutateWithLoadingState(
+    () => adapter.setHistoryIndex(currentMutationIndex.value + 1)
+  );
 }
-
-const onMouseUp = (e: MouseEvent) => {
+const onMouseUp = (e) => {
   if (e.button === 3) {
-    // History back button on the mouse.
-    e.preventDefault()
-    e.stopPropagation()
+    e.preventDefault();
+    e.stopPropagation();
     if (canUndo.value) {
-      undo()
+      undo();
     }
   } else if (e.button === 4) {
-    // History forward button on the mouse.
-    e.preventDefault()
-    e.stopPropagation()
+    e.preventDefault();
+    e.stopPropagation();
     if (canRedo.value) {
-      redo()
+      redo();
     }
   }
-}
-
+};
 const setupMouseListeners = () => {
-  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener("mouseup", onMouseUp);
   if (useMouseForHistory.value && ui.isDesktop.value) {
-    document.addEventListener('mouseup', onMouseUp)
+    document.addEventListener("mouseup", onMouseUp);
   }
-}
-
-watch(useMouseForHistory, setupMouseListeners)
-
+};
+watch(useMouseForHistory, setupMouseListeners);
 onMounted(() => {
-  setupMouseListeners()
-})
-
+  setupMouseListeners();
+});
 onBeforeUnmount(() => {
-  document.removeEventListener('mouseup', onMouseUp)
-})
+  document.removeEventListener("mouseup", onMouseUp);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'History',
-}
+  name: "History"
+};
 </script>

package/dist/runtime/components/Edit/Features/History/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/ImportExisting/Dialog/index.vue

@@ -2,11 +2,11 @@
   <DialogModal
     :title="$t('importExistingDialogTitle', 'Import from existing page')"
     :lead="
-      $t(
-        'importExistingDialogLead',
-        'Import content from an existing page. The items will be added to the end of the list. This action can be undone.',
-      )
-    "
+  $t(
+    'importExistingDialogLead',
+    'Import content from an existing page. The items will be added to the end of the list. This action can be undone.'
+  )
+"
     :width="600"
     :submit-label="$t('importExistingDialogSubmit', 'Import content')"
     :can-submit="!!(sourceEntityUuid && selectedFields.length)"
@@ -19,9 +19,9 @@
         <h3 class="bk-form-label">
           {{
             $t(
-              'importExistingFieldsLabel',
-              'Which content would you like to import?',
-            )
+  "importExistingFieldsLabel",
+  "Which content would you like to import?"
+)
           }}
         </h3>
         <label v-for="field in fields" :key="field.name" class="bk-checkbox">
@@ -32,9 +32,9 @@
       <div class="bk-form-section">
         <label for="pb_search_term" class="bk-form-label">{{
           $t(
-            'importExistingPagesLabel',
-            'From which page would you like to import?',
-          )
+  "importExistingPagesLabel",
+  "From which page would you like to import?"
+)
         }}</label>
         <input
           id="pb_search_term"
@@ -47,9 +47,7 @@
       </div>
       <div>
         {{
-          $t('importExistingResultsTitle', '@count of @total pages')
-            .replace('@count', entities.length.toString())
-            .replace('@total', total.toString())
+          $t("importExistingResultsTitle", "@count of @total pages").replace("@count", entities.length.toString()).replace("@total", total.toString())
         }}
       </div>
       <div
@@ -70,71 +68,55 @@
   </DialogModal>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   watch,
   ref,
   useBlokkli,
   onMounted,
-  onBeforeUnmount,
-} from '#imports'
-
-import { DialogModal } from '#blokkli/components'
-import type { ImportItem } from '#blokkli/types'
-
-const { adapter, $t, types, context } = useBlokkli()
-
-const emit = defineEmits<{
-  (e: 'confirm', data: { sourceUuid: string; fields: string[] }): void
-  (e: 'cancel'): void
-}>()
-
-const searchTerm = ref('')
-const resultsSearchTerm = ref('')
-const sourceEntityUuid = ref('')
-const selectedFields = ref<string[]>([])
-const isLoading = ref(false)
-const entities = ref<ImportItem[]>([])
-const total = ref(0)
-
-let timeout: any = null
-
+  onBeforeUnmount
+} from "#imports";
+import { DialogModal } from "#blokkli/components";
+const { adapter, $t, types, context } = useBlokkli();
+const emit = defineEmits(["confirm", "cancel"]);
+const searchTerm = ref("");
+const resultsSearchTerm = ref("");
+const sourceEntityUuid = ref("");
+const selectedFields = ref([]);
+const isLoading = ref(false);
+const entities = ref([]);
+const total = ref(0);
+let timeout = null;
 watch(searchTerm, (newTerm) => {
-  clearTimeout(timeout)
-
+  clearTimeout(timeout);
   timeout = setTimeout(() => {
-    loadResults(newTerm)
-  }, 300)
-})
-
-async function loadResults(userInput = '') {
-  const result = await adapter.getImportItems!(userInput)
-  entities.value = result.items
-  total.value = result.total
-  resultsSearchTerm.value = userInput
+    loadResults(newTerm);
+  }, 300);
+});
+async function loadResults(userInput = "") {
+  const result = await adapter.getImportItems(userInput);
+  entities.value = result.items;
+  total.value = result.total;
+  resultsSearchTerm.value = userInput;
 }
-
 function onSubmit() {
-  emit('confirm', {
+  emit("confirm", {
     sourceUuid: sourceEntityUuid.value,
-    fields: selectedFields.value,
-  })
-  isLoading.value = true
+    fields: selectedFields.value
+  });
+  isLoading.value = true;
 }
-
-const fields = computed(() =>
-  types.fieldConfig.forEntityTypeAndBundle(
+const fields = computed(
+  () => types.fieldConfig.forEntityTypeAndBundle(
     context.value.entityType,
-    context.value.entityBundle,
-  ),
-)
-
+    context.value.entityBundle
+  )
+);
 onMounted(() => {
-  loadResults()
-})
-
+  loadResults();
+});
 onBeforeUnmount(() => {
-  clearTimeout(timeout)
-})
+  clearTimeout(timeout);
+});
 </script>

package/dist/runtime/components/Edit/Features/ImportExisting/Dialog/index.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((data: {
+        sourceUuid: string;
+        fields: string[];
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -4,8 +4,8 @@
     id="import_existing"
     :title="$t('importExistingTitle', 'Import...')"
     :description="
-      $t('importExistingDescription', 'Import from an existing page')
-    "
+  $t('importExistingDescription', 'Import from an existing page')
+"
     :disabled="state.editMode.value !== 'editing'"
     :weight="50"
     icon="import"
@@ -23,73 +23,57 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useBlokkli,
   onMounted,
-  defineBlokkliFeature,
-} from '#imports'
-import { PluginMenuButton } from '#blokkli/plugins'
-import ExistingDialog from './Dialog/index.vue'
-
+  defineBlokkliFeature
+} from "#imports";
+import { PluginMenuButton } from "#blokkli/plugins";
+import ExistingDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
-  id: 'import-existing',
-  label: 'Import existing content',
-  icon: 'import',
-  requiredAdapterMethods: ['getImportItems', 'importFromExisting'],
-  description:
-    'Implements a menu action that renders a dialog to import blocks from another entity.',
-
+  id: "import-existing",
+  label: "Import existing content",
+  icon: "import",
+  requiredAdapterMethods: ["getImportItems", "importFromExisting"],
+  description: "Implements a menu action that renders a dialog to import blocks from another entity.",
   settings: {
     showDialogWhenEmpty: {
-      type: 'checkbox',
+      type: "checkbox",
       default: true,
-      label: 'Show import dialog at start',
-      description:
-        'Displays the import dialog when starting blökkli if the page is empty.',
-      group: 'behavior',
-    },
-  },
-})
-
-const { state, $t } = useBlokkli()
-
+      label: "Show import dialog at start",
+      description: "Displays the import dialog when starting bl\xF6kkli if the page is empty.",
+      group: "behavior"
+    }
+  }
+});
+const { state, $t } = useBlokkli();
 const isEmpty = computed(
-  () => !state.mutatedFields.value.find((v) => v.list?.length),
-)
-
-const showModal = ref(false)
-
-function onSubmit(sourceUuid: string, sourceFields: string[]) {
-  showModal.value = false
+  () => !state.mutatedFields.value.find((v) => v.list?.length)
+);
+const showModal = ref(false);
+function onSubmit(sourceUuid, sourceFields) {
+  showModal.value = false;
   state.mutateWithLoadingState(
-    () =>
-      adapter.importFromExisting({
-        sourceFields,
-        sourceUuid,
-      }),
-    $t('importExistingError', 'Content could not be imported.'),
-    $t('importExistingSuccess', 'Content imported successfully.'),
-  )
+    () => adapter.importFromExisting({
+      sourceFields,
+      sourceUuid
+    }),
+    $t("importExistingError", "Content could not be imported."),
+    $t("importExistingSuccess", "Content imported successfully.")
+  );
 }
-
 onMounted(() => {
-  // Show the import dialog when there are no items yet and no mutations.
-  if (
-    isEmpty.value &&
-    !state.mutations.value.length &&
-    settings.value.showDialogWhenEmpty &&
-    state.canEdit.value
-  ) {
-    showModal.value = true
+  if (isEmpty.value && !state.mutations.value.length && settings.value.showDialogWhenEmpty && state.canEdit.value) {
+    showModal.value = true;
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'ImportExisting',
-}
+  name: "ImportExisting"
+};
 </script>

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