@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.41

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

@@ -1,123 +0,0 @@
-<template>
-  <PluginSidebar
-    id="history"
-    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.'
-  )
-"
-    icon="history"
-    weight="-800"
-  >
-    <HistoryList :scrolled-to-end="scrolledToEnd" />
-  </PluginSidebar>
-
-  <PluginToolbarButton
-    id="undo"
-    :title="$t('historyUndo', 'Undo')"
-    meta
-    key-code="Z"
-    region="before-title"
-    :disabled="!canUndo"
-    :tour-text="$t('historyUndoTourText', 'Undo the last change.')"
-    icon="undo"
-    @click="undo"
-  />
-
-  <PluginToolbarButton
-    id="redo"
-    :title="$t('historyRedo', 'Redo')"
-    meta
-    shift
-    key-code="Z"
-    region="before-title"
-    :disabled="!canRedo"
-    :tour-text="$t('historyRedoTourText', 'Redo the previous change.')"
-    icon="redo"
-    @click="redo"
-  />
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  watch,
-  defineBlokkliFeature,
-  onMounted,
-  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).",
-  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.",
-      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);
-const canRedo = computed(
-  () => currentMutationIndex.value < mutations.value.length - 1
-);
-function undo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value - 1)
-  );
-}
-function redo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value + 1)
-  );
-}
-const onMouseUp = (e) => {
-  if (e.button === 3) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (canUndo.value) {
-      undo();
-    }
-  } else if (e.button === 4) {
-    e.preventDefault();
-    e.stopPropagation();
-    if (canRedo.value) {
-      redo();
-    }
-  }
-};
-const setupMouseListeners = () => {
-  document.removeEventListener("mouseup", onMouseUp);
-  if (useMouseForHistory.value && ui.isDesktop.value) {
-    document.addEventListener("mouseup", onMouseUp);
-  }
-};
-watch(useMouseForHistory, setupMouseListeners);
-onMounted(() => {
-  setupMouseListeners();
-});
-onBeforeUnmount(() => {
-  document.removeEventListener("mouseup", onMouseUp);
-});
-</script>
-
-<script>
-export default {
-  name: "History"
-};
-</script>

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

@@ -1,2 +0,0 @@
-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

@@ -1,122 +0,0 @@
-<template>
-  <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.'
-  )
-"
-    :width="600"
-    :submit-label="$t('importExistingDialogSubmit', 'Import content')"
-    :can-submit="!!(sourceEntityUuid && selectedFields.length)"
-    :is-loading="isLoading"
-    @submit="onSubmit"
-    @cancel="$emit('cancel')"
-  >
-    <div class="bk">
-      <div class="bk-form-section">
-        <h3 class="bk-form-label">
-          {{
-            $t(
-  "importExistingFieldsLabel",
-  "Which content would you like to import?"
-)
-          }}
-        </h3>
-        <label v-for="field in fields" :key="field.name" class="bk-checkbox">
-          <input v-model="selectedFields" type="checkbox" :value="field.name" />
-          <span>{{ field.label }}</span>
-        </label>
-      </div>
-      <div class="bk-form-section">
-        <label for="pb_search_term" class="bk-form-label">{{
-          $t(
-  "importExistingPagesLabel",
-  "From which page would you like to import?"
-)
-        }}</label>
-        <input
-          id="pb_search_term"
-          v-model="searchTerm"
-          type="text"
-          class="bk-form-input"
-          :placeholder="$t('importExistingSearchPlaceholder', 'Search pages')"
-          required
-        />
-      </div>
-      <div>
-        {{
-          $t("importExistingResultsTitle", "@count of @total pages").replace("@count", entities.length.toString()).replace("@total", total.toString())
-        }}
-      </div>
-      <div
-        class="bk-radio-list"
-        :style="{ opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1 }"
-      >
-        <label v-for="entity in entities" :key="entity.uuid" class="bk-radio">
-          <input
-            v-model="sourceEntityUuid"
-            type="radio"
-            :value="entity.uuid"
-            name="entity"
-          />
-          <span>{{ entity.label }}</span>
-        </label>
-      </div>
-    </div>
-  </DialogModal>
-</template>
-
-<script setup>
-import {
-  computed,
-  watch,
-  ref,
-  useBlokkli,
-  onMounted,
-  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);
-  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;
-}
-function onSubmit() {
-  emit("confirm", {
-    sourceUuid: sourceEntityUuid.value,
-    fields: selectedFields.value
-  });
-  isLoading.value = true;
-}
-const fields = computed(
-  () => types.fieldConfig.forEntityTypeAndBundle(
-    context.value.entityType,
-    context.value.entityBundle
-  )
-);
-onMounted(() => {
-  loadResults();
-});
-onBeforeUnmount(() => {
-  clearTimeout(timeout);
-});
-</script>

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

@@ -1,14 +0,0 @@
-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

@@ -1,79 +0,0 @@
-<template>
-  <PluginMenuButton
-    v-if="state.mutatedFields.value.length"
-    id="import_existing"
-    :title="$t('importExistingTitle', 'Import...')"
-    :description="
-  $t('importExistingDescription', 'Import from an existing page')
-"
-    :disabled="state.editMode.value !== 'editing'"
-    :weight="50"
-    icon="import"
-    @click="showModal = true"
-  />
-
-  <Teleport to="body">
-    <transition appear name="bk-slide-up">
-      <ExistingDialog
-        v-if="showModal"
-        @confirm="onSubmit($event.sourceUuid, $event.fields)"
-        @cancel="showModal = false"
-      />
-    </transition>
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  useBlokkli,
-  onMounted,
-  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.",
-  settings: {
-    showDialogWhenEmpty: {
-      type: "checkbox",
-      default: true,
-      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, sourceFields) {
-  showModal.value = false;
-  state.mutateWithLoadingState(
-    () => adapter.importFromExisting({
-      sourceFields,
-      sourceUuid
-    }),
-    $t("importExistingError", "Content could not be imported."),
-    $t("importExistingSuccess", "Content imported successfully.")
-  );
-}
-onMounted(() => {
-  if (isEmpty.value && !state.mutations.value.length && settings.value.showDialogWhenEmpty && state.canEdit.value) {
-    showModal.value = true;
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "ImportExisting"
-};
-</script>

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

@@ -1,2 +0,0 @@
-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/Library/EditReusable/index.vue

@@ -1,168 +0,0 @@
-<template>
-  <Teleport to="body">
-    <Loading v-if="isLoading" />
-    <Transition name="bk-library-edit-header">
-      <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
-        <h2>
-          <span>{{
-            $t("libraryItemEditOverlayTitle", "Edit reusable block")
-          }}</span>
-          <span v-if="label">&nbsp;{{ label }}</span>
-        </h2>
-        <button @click.prevent="closeOverlay">
-          <Icon name="arrow-left" />
-          <span>{{ $t("libraryItemEditOverlayBack", "Back to page") }}</span>
-        </button>
-      </header>
-    </Transition>
-    <Transition
-      :css="false"
-      @enter="onEnter"
-      @after-enter="onAfter"
-      @enter-cancelled="onAfter"
-      @leave="onLeave"
-      @after-leave="onAfterLeave"
-      @leave-cancelled="onAfterLeave"
-    >
-      <div v-show="isLoaded" class="bk bk-library-edit-overlay">
-        <iframe
-          ref="iframe"
-          :src="url"
-          style="width: 100%; height: 100%"
-          @load="onLoad"
-        />
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<script setup>
-import onBroadcastEvent from "#blokkli/helpers/composables/onBroadcastEvent";
-import { ref, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
-import Loading from "./../../../Loading/index.vue";
-const props = defineProps({
-  url: { type: String, required: true },
-  uuid: { type: String, required: true },
-  label: { type: String, required: false }
-});
-const DURATION = 530;
-const emit = defineEmits(["submit", "close"]);
-function getOriginatingElement() {
-  const el = document.querySelector(
-    `[data-bk-library-item-uuid="${props.uuid}"]`
-  );
-  if (el instanceof HTMLElement) {
-    return el;
-  }
-  return null;
-}
-function onEnter(el, done) {
-  if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement();
-    if (!originating) {
-      done();
-      isLoading.value = false;
-      return;
-    }
-    const originatingRect = originating.getBoundingClientRect();
-    const overlayRect = el.getBoundingClientRect();
-    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
-    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
-    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
-    setTimeout(() => {
-      el.style.transitionDuration = DURATION + "ms";
-      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
-      el.style.transitionProperty = "transform";
-      el.style.transformOrigin = "0px 0px";
-      el.style.transform = "translate(0px, 0px)";
-    }, 10);
-    setTimeout(() => {
-      done();
-      isLoading.value = false;
-    }, DURATION);
-  }
-}
-function onAfter(el) {
-  if (el instanceof HTMLElement) {
-    el.style.transform = "";
-    el.style.transitionDuration = "";
-    el.style.opacity = "";
-    el.style.transitionProperty = "";
-    el.style.transitionTimingFunction = "";
-    el.style.transformOrigin = "";
-  }
-}
-function onLeave(el, done) {
-  if (el instanceof HTMLElement) {
-    const originating = getOriginatingElement();
-    if (!originating) {
-      done();
-      return;
-    }
-    const originatingRect = originating.getBoundingClientRect();
-    const overlayRect = el.getBoundingClientRect();
-    const offsetX = originatingRect.x - overlayRect.x + originatingRect.width / 2;
-    const offsetY = originatingRect.y - overlayRect.y + originatingRect.height / 2;
-    el.style.transform = "translate(0px, 0px)";
-    setTimeout(() => {
-      el.style.transitionDuration = DURATION + "ms";
-      el.style.transitionTimingFunction = "cubic-bezier(0.56, 0.04, 0.25, 1)";
-      el.style.transitionProperty = "transform";
-      el.style.transformOrigin = "0px 0px";
-      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`;
-    }, 10);
-    setTimeout(() => {
-      done();
-    }, DURATION);
-  }
-}
-function onAfterLeave(el) {
-  onAfter(el);
-  if (hasPublished.value) {
-    emit("submit");
-  } else {
-    emit("close");
-  }
-}
-const { $t } = useBlokkli();
-const iframe = ref(null);
-const isLoaded = ref(false);
-const isLoading = ref(true);
-const hasPublished = ref(false);
-let timeout = null;
-function onLibraryItemPublished({ uuid }) {
-  if (props.uuid === uuid) {
-    hasPublished.value = true;
-    isLoaded.value = false;
-  }
-}
-function onLoad() {
-  clearTimeout(timeout);
-  timeout = window.setTimeout(() => {
-    isLoaded.value = true;
-  }, 3e3);
-  if (!iframe.value) {
-    return;
-  }
-  iframe.value.focus();
-  iframe.value.contentWindow?.focus();
-}
-function closeOverlay() {
-  hasPublished.value = false;
-  isLoaded.value = false;
-}
-function onLibraryItemClose({ uuid }) {
-  if (props.uuid === uuid) {
-    closeOverlay();
-  }
-}
-function onEditorLoaded({ uuid }) {
-  if (props.uuid === uuid) {
-    isLoaded.value = true;
-  }
-}
-onBroadcastEvent("published", onLibraryItemPublished);
-onBroadcastEvent("closeEditor", onLibraryItemClose);
-onBroadcastEvent("editorLoaded", onEditorLoaded);
-</script>

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue.d.ts

@@ -1,13 +0,0 @@
-type __VLS_Props = {
-    url: string;
-    uuid: string;
-    label?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-    submit: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSubmit?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue

@@ -1,71 +0,0 @@
-<template>
-  <div
-    data-element-type="reusable"
-    :data-item-bundle="bundle"
-    :data-library-item-uuid="uuid"
-    :data-label="label"
-    :class="backgroundClass"
-    class="bk-library-list-item"
-  >
-    <div class="bk bk-library-list-item-header">
-      <div class="bk-blokkli-item-label">
-        <div class="bk-blokkli-item-label-icon">
-          <ItemIcon :bundle="bundle" />
-        </div>
-        <span>{{ bundleLabel }}: {{ label }}</span>
-      </div>
-    </div>
-    <div
-      v-if="renderPreview"
-      class="bk-library-list-item-inner"
-      :class="backgroundClass"
-    >
-      <ScaleToFit :width="previewWidth" :max-height="400">
-        <BlokkliItem
-          v-bind="item"
-          parent-type="nested"
-          class="bk-drop-element"
-        />
-      </ScaleToFit>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, provide, useBlokkli } from "#imports";
-import { ItemIcon, ScaleToFit } from "#blokkli/components";
-import {
-  INJECT_FIELD_LIST_BLOCKS,
-  INJECT_FIELD_LIST_TYPE,
-  INJECT_IS_EDITING,
-  INJECT_IS_IN_REUSABLE,
-  INJECT_PROVIDER_BLOCKS
-} from "#blokkli/helpers/symbols";
-const props = defineProps({
-  uuid: { type: String, required: true },
-  label: { type: String, required: false },
-  bundle: { type: String, required: true },
-  item: { type: Object, required: true }
-});
-const { types, definitions } = useBlokkli();
-const bundleLabel = computed(
-  () => types.getBlockBundleDefinition(props.bundle)?.label || props.bundle
-);
-const definition = computed(
-  () => definitions.getDefaultDefinition(props.bundle)
-);
-const previewWidth = computed(() => definition.value?.editor?.previewWidth);
-const renderPreview = computed(
-  () => definition.value?.editor?.noPreview !== true
-);
-const backgroundClass = computed(
-  () => definition.value?.editor?.previewBackgroundClass || ""
-);
-const blocks = computed(() => []);
-const fieldListType = computed(() => "default");
-provide(INJECT_IS_IN_REUSABLE, true);
-provide(INJECT_IS_EDITING, false);
-provide(INJECT_FIELD_LIST_BLOCKS, blocks);
-provide(INJECT_PROVIDER_BLOCKS, blocks);
-provide(INJECT_FIELD_LIST_TYPE, fieldListType);
-</script>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue.d.ts

@@ -1,9 +0,0 @@
-import type { FieldListItem } from '#blokkli/types';
-type __VLS_Props = {
-    uuid: string;
-    label?: string;
-    bundle: string;
-    item: FieldListItem;
-};
-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;