@blokkli/editor 2.0.0-alpha.27 → 2.0.0-alpha.29

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

@@ -1,197 +0,0 @@
-<template>
-  <PluginItemAction
-    v-if="isReusable"
-    id="library_detach"
-    :title="$t('libraryDetach', 'Detach from library')"
-    icon="detach"
-    edit-only
-    multiple
-    :weight="-70"
-    @click="onDetach"
-  />
-  <PluginItemAction
-    v-else-if="!isReusable"
-    id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library...')"
-    :disabled="!canMakeReusable"
-    edit-only
-    icon="reusable"
-    :weight="-70"
-    @click="showReusableDialog = true"
-  />
-
-  <Teleport :to="ui.mainLayoutElement.value">
-    <BlokkliTransition name="slide-up">
-      <ReusableDialog
-        v-if="showReusableDialog && selection.item.value"
-        :uuid="selection.item.value.uuid"
-        :background-class="definition?.editor?.previewBackgroundClass"
-        @confirm="onMakeReusable"
-        @cancel="showReusableDialog = false"
-      />
-    </BlokkliTransition>
-  </Teleport>
-
-  <Teleport :to="ui.mainLayoutElement.value">
-    <BlokkliTransition name="slide-in">
-      <LibraryDialog
-        v-if="placedAction && adapter.getLibraryItems"
-        :field="placedAction.field"
-        @close="placedAction = null"
-        @submit="onAddLibraryItem"
-      />
-    </BlokkliTransition>
-  </Teleport>
-  <EditReusable
-    v-if="editingLibraryItem"
-    v-bind="editingLibraryItem"
-    @submit="onSubmitLibraryItem"
-    @close="cancelLibraryItemEdit"
-  />
-</template>
-
-<script setup>
-import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginItemAction } from "#blokkli/plugins";
-import ReusableDialog from "./ReusableDialog/index.vue";
-import LibraryDialog from "./LibraryDialog/index.vue";
-import EditReusable from "./EditReusable/index.vue";
-import { BlokkliTransition } from "#blokkli/components";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineAddAction from "#blokkli/helpers/composables/defineAddAction";
-import { useDialog } from "#blokkli/helpers/composables/useDialog";
-import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
-const { adapter } = defineBlokkliFeature({
-  id: "library",
-  icon: "reusable",
-  label: "Library",
-  description: "Implements support for a block library to manage reusable blocks.",
-  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
-  dependencies: ["add-list"]
-});
-const { selection, state, types, $t, eventBus, definitions, ui } = useBlokkli();
-const showReusableDialog = useDialog("library-reusable", "center");
-async function selectNewlyAdded(cb) {
-  const uuidsBefore = state.getAllUuids();
-  await cb();
-  const uuidsAfter = state.getAllUuids();
-  const newUuid = uuidsAfter.find((uuid) => !uuidsBefore.includes(uuid));
-  if (!newUuid) {
-    return;
-  }
-  eventBus.emit("select", newUuid);
-}
-const onDetach = async () => {
-  if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
-    return;
-  }
-  await selectNewlyAdded(
-    () => state.mutateWithLoadingState(
-      () => adapter.detachReusableBlock({
-        uuids: selection.uuids.value
-      })
-    )
-  );
-};
-const placedAction = ref(null);
-const onAddLibraryItem = async (uuid) => {
-  if (!placedAction.value || !adapter.addLibraryItem) {
-    return;
-  }
-  await state.mutateWithLoadingState(
-    () => adapter.addLibraryItem({
-      libraryItemUuid: uuid,
-      host: placedAction.value.host,
-      afterUuid: placedAction.value.preceedingUuid
-    })
-  );
-  placedAction.value = null;
-};
-const definition = computed(() => {
-  const item = selection.item.value;
-  if (!item) {
-    return null;
-  }
-  return definitions.getBlockDefinition(
-    item.bundle,
-    item.fieldListType,
-    item.parentBlockBundle
-  );
-});
-const itemBundle = computed(() => {
-  const item = selection.item.value;
-  if (!item) {
-    return null;
-  }
-  return types.getBlockBundleDefinition(item.bundle);
-});
-const isReusable = computed(
-  () => selection.bundles.value.every((bundle) => bundle === BUNDLE_FROM_LIBRARY)
-);
-async function onMakeReusable(label) {
-  showReusableDialog.value = false;
-  const item = selection.item.value;
-  if (!item) {
-    return;
-  }
-  await selectNewlyAdded(
-    () => state.mutateWithLoadingState(
-      () => adapter.makeBlockReusable({
-        label,
-        uuid: item.uuid
-      }),
-      $t("libraryError", "Failed to add block to library.")
-    )
-  );
-}
-const isSupportedOnEntity = computed(
-  () => types.generallyAvailableBundles.find((v) => v.id === BUNDLE_FROM_LIBRARY)
-);
-const fromLibraryAllowedInList = computed(() => {
-  if (!selection.uuids.value.length) {
-    return !!types.generallyAvailableBundles.find(
-      (v) => v.id === BUNDLE_FROM_LIBRARY
-    );
-  }
-  return types.allowedTypesInList.value.includes(BUNDLE_FROM_LIBRARY);
-});
-const canMakeReusable = computed(
-  () => !isReusable.value && itemBundle?.value?.allowReusable && fromLibraryAllowedInList.value
-);
-const editingLibraryItem = ref(null);
-onBlokkliEvent("library:edit-item", function(e) {
-  editingLibraryItem.value = e;
-});
-function cancelLibraryItemEdit() {
-  editingLibraryItem.value = null;
-}
-function onSubmitLibraryItem() {
-  eventBus.emit("reloadState");
-  cancelLibraryItemEdit();
-}
-defineAddAction(() => {
-  if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value) {
-    return;
-  }
-  return {
-    id: "library",
-    title: $t("libraryAddFromLibrary", "Add from library"),
-    description: $t(
-      "libraryAddDescription",
-      "Add a reusable block from the block library."
-    ),
-    icon: "reusable",
-    color: "lime",
-    itemBundle: BUNDLE_FROM_LIBRARY,
-    callback: (data) => {
-      placedAction.value = data;
-    }
-  };
-});
-</script>
-
-<script>
-export default {
-  name: "Library"
-};
-</script>

package/dist/runtime/components/Edit/Features/Library/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/MediaLibrary/Library/Item.vue

@@ -1,40 +0,0 @@
-<template>
-  <div
-    :key="mediaId"
-    class="bk-media-library-items-item"
-    :class="{ 'bk-is-selected': isSelected }"
-    :data-sortli-id="mediaId"
-    data-element-type="media_library"
-    :data-item-bundle="targetBundles[0]"
-    :data-media-id="mediaId"
-    :data-media-bundle="mediaBundle"
-  >
-    <div class="bk-media-library-items-item-box">
-      <label @click.stop>
-        <input v-model="selected" type="checkbox" :value="mediaId" />
-      </label>
-      <div class="bk-media-library-items-item-image">
-        <img :src="thumbnail" />
-      </div>
-    </div>
-    <div class="bk-media-library-items-item-text">
-      <h3>{{ label }}</h3>
-      <p>{{ context }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from "#imports";
-const props = defineProps({
-  mediaId: { type: String, required: true },
-  label: { type: String, required: true },
-  context: { type: String, required: true },
-  targetBundles: { type: Array, required: true },
-  thumbnail: { type: String, required: false },
-  icon: { type: null, required: false },
-  mediaBundle: { type: String, required: false }
-});
-const selected = defineModel({ type: Array });
-const isSelected = computed(() => selected.value?.includes(props.mediaId));
-</script>

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

@@ -1,19 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-type __VLS_Props = {
-    mediaId: string;
-    label: string;
-    context: string;
-    targetBundles: string[];
-    thumbnail?: string;
-    icon?: BlokkliIcon;
-    mediaBundle?: string;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue?: string[];
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string[] | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -1,187 +0,0 @@
-<template>
-  <div class="bk bk-media-library">
-    <div v-if="status === 'pending'" class="bk-loading">
-      <Icon name="loader" />
-    </div>
-    <div class="bk-media-library-filters">
-      <div class="bk-media-library-filters-listview">
-        <button @click="toggleListView">
-          <Icon :name="listViewIcon" />
-        </button>
-      </div>
-      <div v-for="filter in filters" :key="filter.key">
-        <label v-if="filter.filter.type === 'text'" class="bk-form-text">
-          <Icon name="search" />
-          <input
-            v-model.lazy="filterValues[filter.key]"
-            type="text"
-            :placeholder="filter.filter.placeholder"
-          />
-        </label>
-        <label
-          v-else-if="filter.filter.type === 'select'"
-          class="bk-form-select"
-        >
-          <div v-if="!filterValues[filter.key]">
-            {{ Object.values(filter.filter.options)[0] }}
-          </div>
-          <select v-model="filterValues[filter.key]">
-            <option
-              v-for="option in Object.entries(filter.filter.options)"
-              :key="option[0]"
-              :value="option[0]"
-            >
-              {{ option[1] }}
-            </option>
-          </select>
-        </label>
-        <FormToggle
-          v-else-if="filter.filter.type === 'checkbox'"
-          v-model="filterValues[filter.key]"
-          :label="filter.filter.label"
-        />
-      </div>
-    </div>
-    <div
-      ref="listEl"
-      class="bk-media-library-items bk-scrollbar-light"
-      :class="'bk-is-' + listView"
-    >
-      <Sortli no-transition :get-drag-items="getDragItems" :build-item>
-        <Item
-          v-for="item in items"
-          :key="item.mediaId"
-          v-bind="item"
-          v-model="selected"
-          :class="'bk-is-' + listView"
-        />
-      </Sortli>
-    </div>
-
-    <div v-if="selected.length" class="bk-media-library-cancel">
-      <button class="bk-button bk-is-primary" @click.prevent="selected = []">
-        {{ $t("cancelSelection", "Cancel selection") }}
-      </button>
-    </div>
-
-    <Pagination v-model="page" :total-pages />
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  computed,
-  useLazyAsyncData,
-  useBlokkli,
-  watch,
-  nextTick,
-  useTemplateRef
-} from "#imports";
-import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
-import Item from "./Item.vue";
-import { falsy } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-defineProps({
-  modelValue: { type: String, required: false }
-});
-const { adapter, storage, $t, element } = useBlokkli();
-const selected = ref([]);
-const listEl = useTemplateRef("listEl");
-const page = ref(0);
-const key = computed(() => Object.values(filterValues.value).join(","));
-function getDragItems(activeItem) {
-  if (!selected.value.length || !listEl.value) {
-    return null;
-  }
-  const listElement = listEl.value;
-  const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
-  const items2 = selected.value.map((id) => {
-    const el = element.query(
-      listElement,
-      `[data-sortli-id="${id}"]`,
-      "Find media library drag item."
-    );
-    if (!(el instanceof HTMLElement)) {
-      return null;
-    }
-    const item = buildItem(el);
-    if (!item) {
-      return null;
-    }
-    return item;
-  }).filter(falsy);
-  if (!activeId) {
-    return items2;
-  }
-  const activeIsInSelection = items2.find((v) => v.mediaId === activeId);
-  if (activeIsInSelection) {
-    return items2;
-  }
-  return null;
-}
-const listView = storage.use(
-  "mediaLibraryListView",
-  "grid"
-);
-const listViewIcon = computed(() => {
-  if (listView.value === "grid") {
-    return "list-view-grid";
-  }
-  return "list-view-horizontal";
-});
-const toggleListView = () => {
-  listView.value = listView.value === "grid" ? "horizontal" : "grid";
-};
-const filterValues = ref({});
-watch(key, () => {
-  page.value = 0;
-});
-const { data, status } = await useLazyAsyncData(
-  () => {
-    return adapter.mediaLibraryGetResults({
-      filters: filterValues.value,
-      page: page.value
-    });
-  },
-  { watch: [key, page] }
-);
-watch(data, () => {
-  nextTick(() => {
-    if (listEl.value) {
-      listEl.value.scrollTop = 0;
-    }
-  });
-});
-const items = computed(() => data.value?.items || []);
-const filters = computed(() => {
-  return Object.entries(data.value?.filters || {}).map(([key2, filter]) => {
-    return { key: key2, filter };
-  });
-});
-const total = computed(() => data.value?.total || 0);
-const perPage = computed(() => data.value?.perPage || 0);
-const totalPages = computed(() => {
-  return Math.ceil(total.value / perPage.value);
-});
-function buildItem(element2) {
-  const id = element2.dataset.sortliId;
-  if (!id) {
-    return null;
-  }
-  const item = items.value.find((v) => v.mediaId === id);
-  if (!item) {
-    return null;
-  }
-  return {
-    itemType: "media_library",
-    mediaId: item.mediaId,
-    mediaBundle: item.mediaBundle ?? "",
-    itemBundle: item.targetBundles[0] ?? "",
-    element: () => element2
-  };
-}
-onBlokkliEvent("item:dropped", function() {
-  selected.value = [];
-});
-</script>

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

@@ -1,5 +0,0 @@
-type __VLS_Props = {
-    modelValue?: string;
-};
-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/MediaLibrary/index.vue

@@ -1,108 +0,0 @@
-<template>
-  <PluginSidebar
-    id="media_library"
-    :title="$t('mediaLibrary', 'Media Library')"
-    :tour-text="
-  $t(
-    'mediaLibraryTourText',
-    'Search for media like images and drag and drop them into the page.'
-  )
-"
-    edit-only
-    icon="image"
-    weight="-100"
-  >
-    <Library is-sortli />
-  </PluginSidebar>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
-import Library from "./Library/index.vue";
-import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
-import { falsy } from "#blokkli/helpers";
-import { itemEntityType } from "#blokkli-build/config";
-defineBlokkliFeature({
-  id: "media-library",
-  icon: "image",
-  label: "Media Library",
-  description: "Implements a media library to easily drag and drop media like images or videos.",
-  requiredAdapterMethods: ["mediaLibraryGetResults", "mediaLibraryAddBlock"]
-});
-const { $t, adapter, state, types, directive } = useBlokkli();
-const ERROR_MESSAGE = $t(
-  "mediaLibraryReplaceFailed",
-  "Failed to replace media."
-);
-defineDropAreas((dragItems) => {
-  if (!adapter.mediaLibraryReplaceMedia) {
-    return;
-  }
-  if (dragItems.length !== 1) {
-    return;
-  }
-  const item = dragItems[0];
-  if (item.itemType !== "media_library") {
-    return;
-  }
-  return directive.getDroppableElements().map((field) => {
-    const config = types.getDroppableFieldConfig(field.fieldName, field);
-    if (config.allowedEntityType !== "media") {
-      return;
-    }
-    if (!config.allowedBundles.includes(item.mediaBundle)) {
-      return;
-    }
-    const isBlock = field.type === itemEntityType;
-    const draggableHost = {
-      uuid: field.uuid,
-      type: field.type,
-      fieldName: field.fieldName
-    };
-    const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
-      "@field",
-      config.label
-    );
-    if (adapter.mediaLibraryReplaceMedia && isBlock) {
-      return {
-        id: `replace-media:${field.uuid}:${field.fieldName}`,
-        label,
-        element: field.element,
-        icon: "swap-horizontal",
-        onDrop: () => {
-          return state.mutateWithLoadingState(
-            () => adapter.mediaLibraryReplaceMedia({
-              host: draggableHost,
-              mediaId: item.mediaId
-            }),
-            ERROR_MESSAGE
-          );
-        }
-      };
-    } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
-      return {
-        id: `replace-entity-media:${field.uuid}:${field.fieldName}`,
-        label,
-        element: field.element,
-        icon: "swap-horizontal",
-        onDrop: () => {
-          return state.mutateWithLoadingState(
-            () => adapter.mediaLibraryReplaceEntityMedia({
-              host: draggableHost,
-              mediaId: item.mediaId
-            }),
-            ERROR_MESSAGE
-          );
-        }
-      };
-    }
-  }).filter(falsy);
-});
-</script>
-
-<script>
-export default {
-  name: "MediaLibrary"
-};
-</script>

package/dist/runtime/components/Edit/Features/MediaLibrary/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/MediaLibrary/types.d.ts

@@ -1,57 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-export type MediaLibraryFilterCheckbox = {
-    label: string;
-    type: 'checkbox';
-};
-export type MediaLibraryFilterCheckboxes = {
-    label: string;
-    type: 'checkboxes';
-    options: Record<string, string>;
-};
-export type MediaLibraryFilterText = {
-    label: string;
-    type: 'text';
-    placeholder: string;
-};
-export type MediaLibraryFilterSelect = {
-    label: string;
-    type: 'select';
-    default: string;
-    options: Record<string, string>;
-};
-export type MediaLibraryFilter = MediaLibraryFilterCheckbox | MediaLibraryFilterCheckboxes | MediaLibraryFilterText | MediaLibraryFilterSelect;
-export type MediaLibraryItem = {
-    mediaId: string;
-    label: string;
-    context: string;
-    targetBundles: string[];
-    thumbnail?: string;
-    icon?: BlokkliIcon;
-    mediaBundle?: string;
-};
-export type FilterTypes = 'checkbox' | 'checkboxes' | 'text' | 'select';
-export type MediaLibraryGetResults<F extends Record<string, FilterTypes>> = {
-    filters: {
-        [K in keyof F]: F[K] extends 'checkbox' ? MediaLibraryFilterCheckbox : F[K] extends 'checkboxes' ? MediaLibraryFilterCheckboxes : F[K] extends 'text' ? MediaLibraryFilterText : MediaLibraryFilterSelect;
-    };
-    items: MediaLibraryItem[];
-    total: number;
-    perPage: number;
-};
-type FilterValueTypes = {
-    checkbox: boolean;
-    checkboxes: string[];
-    text: string;
-    select: string;
-};
-export type MediaLibraryGetResultsData<F extends Record<string, FilterTypes>> = {
-    page: number;
-    filters: {
-        [K in keyof F]: FilterValueTypes[F[K]];
-    };
-};
-export type FilterTypeMapping = {
-    [key in FilterTypes]: MediaLibraryFilter;
-};
-export type GetMediaLibraryFunction<F extends Record<string, FilterTypes> = Record<string, FilterTypes>> = (e: MediaLibraryGetResultsData<F>) => Promise<MediaLibraryGetResults<F>>;
-export {};