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

package/dist/runtime/editor/features/library/ReusableDialog/index.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    uuid: string;
+    backgroundClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: (label: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onConfirm?: ((label: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/library/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/library/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <PluginItemAction
+    v-if="isReusable"
+    id="library_detach"
+    :title="$t('libraryDetach', 'Detach from library')"
+    icon="reusable-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/editor/plugins";
+import ReusableDialog from "./ReusableDialog/index.vue";
+import LibraryDialog from "./LibraryDialog/index.vue";
+import EditReusable from "./EditReusable/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { defineAddAction, onBlokkliEvent, useDialog } from "#blokkli/editor/composables";
+import { fromLibraryBlockBundle } from "#blokkli-build/config";
+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 === fromLibraryBlockBundle)
+);
+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 === fromLibraryBlockBundle)
+);
+const fromLibraryAllowedInList = computed(() => {
+  if (!selection.uuids.value.length) {
+    return !!types.generallyAvailableBundles.find(
+      (v) => v.id === fromLibraryBlockBundle
+    );
+  }
+  return types.allowedTypesInList.value.includes(fromLibraryBlockBundle);
+});
+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: fromLibraryBlockBundle,
+    callback: (data) => {
+      placedAction.value = data;
+    }
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Library"
+};
+</script>

package/dist/runtime/editor/features/library/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/library/types.d.ts

@@ -0,0 +1,80 @@
+import type { BlokkliAdapterSearchResults } from '#blokkli/editor/adapter';
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+import type { FieldListItem } from '#blokkli/types/field';
+export interface LibraryItemProps {
+    block?: FieldListItem;
+    label?: string;
+    uuid?: string;
+}
+export type MakeReusableEvent = {
+    label: string;
+    uuid: string;
+};
+export type DetachReusableBlockEvent = {
+    uuids: string[];
+};
+export type BlokkliAdapterGetLibraryItemsData = {
+    bundles: string[];
+    page: number;
+    filters: Record<string, any>;
+};
+export interface LibraryItem {
+    uuid: string;
+    label?: string;
+    bundle: string;
+    item: FieldListItem;
+}
+export type BlokkliAdapterGetLibraryItemsResult = BlokkliAdapterSearchResults<LibraryItem>;
+export type LibraryEditItemEvent = {
+    url: string;
+    uuid: string;
+    label?: string;
+};
+export type AddReusableItemEvent = {
+    libraryItemUuid: string;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export interface DraggableReusableItem {
+    itemType: 'reusable';
+    element: () => HTMLElement;
+    itemBundle: string;
+    libraryItemUuid: string;
+}
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Make an item reusable.
+         */
+        makeBlockReusable?: (e: MakeReusableEvent) => Promise<MutationResponseLike<T>>;
+        /**
+         * Detach a reusable block and add a copy of it in place.
+         */
+        detachReusableBlock?: (e: DetachReusableBlockEvent) => Promise<MutationResponseLike<T>>;
+        /**
+         * Get all library items.
+         */
+        getLibraryItems?: (data: BlokkliAdapterGetLibraryItemsData) => Promise<BlokkliAdapterGetLibraryItemsResult>;
+        /**
+         * Add a reusable item.
+         */
+        addLibraryItem?: (e: AddReusableItemEvent) => Promise<MutationResponseLike<T>>;
+        /**
+         * Build the URL to edit a library item.
+         */
+        getLibraryItemEditUrl?: (uuid: string) => string;
+    }
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        reusable: DraggableReusableItem;
+    }
+}
+declare module '#blokkli/editor/events' {
+    interface EventbusEvents {
+        /**
+         * Edit a library item.
+         */
+        'library:edit-item': LibraryEditItemEvent;
+    }
+}

package/dist/runtime/editor/features/media-library/Library/Item.d.vue.ts

@@ -0,0 +1,22 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    mediaId: string;
+    label: string;
+    context: string;
+    targetBundles: string[];
+    thumbnail?: string;
+    icon?: BlokkliIcon;
+    mediaBundle?: string;
+    isDisabled?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/Library/Item.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    :key="mediaId"
+    class="bk-media-library-items-item"
+    :class="{ 'bk-is-selected': isSelected, 'bk-is-disabled': isDisabled }"
+    :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 },
+  isDisabled: { type: Boolean, required: false }
+});
+const selected = defineModel({ type: Array });
+const isSelected = computed(() => selected.value?.includes(props.mediaId));
+</script>

package/dist/runtime/editor/features/media-library/Library/Item.vue.d.ts

@@ -0,0 +1,22 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    mediaId: string;
+    label: string;
+    context: string;
+    targetBundles: string[];
+    thumbnail?: string;
+    icon?: BlokkliIcon;
+    mediaBundle?: string;
+    isDisabled?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/Library/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    modelValue?: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/Library/index.vue

@@ -0,0 +1,195 @@
+<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.name">
+        <label v-if="filter.type === 'text'" class="bk-form-text">
+          <Icon name="bk_mdi_search" />
+          <input
+            v-model.lazy="filterValues[filter.name]"
+            type="text"
+            :placeholder="filter.placeholder"
+          />
+        </label>
+        <label v-else-if="filter.type === 'options'" class="bk-form-select">
+          <div v-if="!filterValues[filter.name]">
+            {{ filter.label }}
+          </div>
+          <select v-model="filterValues[filter.name]">
+            <option
+              v-for="option in filter.options"
+              :key="option.value"
+              :value="option.value"
+            >
+              {{ option.label }}
+            </option>
+          </select>
+        </label>
+        <FormToggle
+          v-else-if="filter.type === 'checkbox'"
+          v-model="filterValues[filter.name]"
+          :label="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"
+          :is-disabled="
+  !!firstSelectedBundle && item.mediaBundle !== firstSelectedBundle
+"
+        />
+      </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/editor/components";
+import Item from "./Item.vue";
+import { falsy } from "#blokkli/helpers";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+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 "bk_mdi_grid_view-fill";
+  }
+  return "bk_mdi_lists";
+});
+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 data.value?.filters ?? [];
+});
+const firstSelectedBundle = computed(() => {
+  if (selected.value.length) {
+    const item = items.value.find((v) => v.mediaId === selected.value[0]);
+    if (!item) {
+      return null;
+    }
+    return item.mediaBundle ?? null;
+  }
+  return null;
+});
+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 ?? "",
+    itemBundles: item.targetBundles,
+    element: () => element2
+  };
+}
+onBlokkliEvent("item:dropped", function() {
+  selected.value = [];
+});
+</script>

package/dist/runtime/editor/features/media-library/Library/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    modelValue?: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/media-library/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;