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

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

@@ -66,7 +66,7 @@
 
     <div v-if="selected.length" class="bk-media-library-cancel">
       <button class="bk-button bk-is-primary" @click.prevent="selected = []">
-        {{ $t('cancelSelection', 'Cancel selection') }}
+        {{ $t("cancelSelection", "Cancel selection") }}
       </button>
     </div>
 
@@ -74,136 +74,100 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useLazyAsyncData,
   useBlokkli,
   watch,
-  nextTick,
-} from '#imports'
-import { Sortli, Icon, Pagination } from '#blokkli/components'
-import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import Item from './Item.vue'
-import type { DraggableItem, DraggableMediaLibraryItem } from '#blokkli/types'
-import { buildDraggableItem, falsy } from '#blokkli/helpers'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
-defineProps<{
-  isSortli?: boolean
-  modelValue?: string
-}>()
-
-const { adapter, storage, $t } = useBlokkli()
-
-const selected = ref<string[]>([])
-const listEl = ref<HTMLDivElement | null>(null)
-const page = ref(0)
-const key = computed(() => Object.values(filterValues.value).join(','))
-
-function getDragItems(activeItem?: DraggableItem): DraggableItem[] | null {
+  nextTick
+} from "#imports";
+import { Sortli, Icon, Pagination } from "#blokkli/components";
+import Item from "./Item.vue";
+import { buildDraggableItem, falsy } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+defineProps({
+  isSortli: { type: Boolean, required: false },
+  modelValue: { type: String, required: false }
+});
+const { adapter, storage, $t } = useBlokkli();
+const selected = ref([]);
+const listEl = ref(null);
+const page = ref(0);
+const key = computed(() => Object.values(filterValues.value).join(","));
+function getDragItems(activeItem) {
   if (!selected.value.length || !listEl.value) {
-    return null
+    return null;
   }
-
-  const activeId =
-    activeItem?.itemType === 'media_library' ? activeItem.mediaId : null
-
-  const items: DraggableMediaLibraryItem[] = selected.value
-    .map((id) => {
-      const el = listEl.value?.querySelector(
-        `[data-sortli-id="media_library_${id}"]`,
-      )
-      if (!(el instanceof HTMLElement)) {
-        return null
-      }
-
-      const item = buildDraggableItem(el)
-      if (item?.itemType === 'media_library') {
-        return item
-      }
-
-      return null
-    })
-    .filter(falsy)
-
+  const activeId = activeItem?.itemType === "media_library" ? activeItem.mediaId : null;
+  const items2 = selected.value.map((id) => {
+    const el = listEl.value?.querySelector(
+      `[data-sortli-id="media_library_${id}"]`
+    );
+    if (!(el instanceof HTMLElement)) {
+      return null;
+    }
+    const item = buildDraggableItem(el);
+    if (item?.itemType === "media_library") {
+      return item;
+    }
+    return null;
+  }).filter(falsy);
   if (!activeId) {
-    return items
+    return items2;
   }
-
-  const activeIsInSelection = items.find((v) => v.mediaId === activeId)
-
+  const activeIsInSelection = items2.find((v) => v.mediaId === activeId);
   if (activeIsInSelection) {
-    return items
+    return items2;
   }
-
-  return null
+  return null;
 }
-
-type RenderedFilter = {
-  key: string
-  filter: MediaLibraryFilter
-}
-
-const listView = storage.use<'horizontal' | 'grid'>(
-  'mediaLibraryListView',
-  'grid',
-)
-
-const listViewIcon = computed<BlokkliIcon>(() => {
-  if (listView.value === 'grid') {
-    return 'list-view-grid'
+const listView = storage.use(
+  "mediaLibraryListView",
+  "grid"
+);
+const listViewIcon = computed(() => {
+  if (listView.value === "grid") {
+    return "list-view-grid";
   }
-
-  return 'list-view-horizontal'
-})
-
+  return "list-view-horizontal";
+});
 const toggleListView = () => {
-  listView.value = listView.value === 'grid' ? 'horizontal' : 'grid'
-}
-
-const filterValues = ref<Record<string, any>>({})
-
+  listView.value = listView.value === "grid" ? "horizontal" : "grid";
+};
+const filterValues = ref({});
 watch(key, () => {
-  page.value = 0
-})
-
-const { data, status } =
-  await useLazyAsyncData<MediaLibraryGetResults<any> | null>(
-    () => {
-      return adapter.mediaLibraryGetResults!({
-        filters: filterValues.value,
-        page: page.value,
-      })
-    },
-    { watch: [key, page] },
-  )
-
+  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
+      listEl.value.scrollTop = 0;
     }
-  })
-})
-
-const items = computed(() => data.value?.items || [])
-const filters = computed<RenderedFilter[]>(() => {
-  return Object.entries(data.value?.filters || {}).map(([key, filter]) => {
-    return { key, filter }
-  })
-})
-
-const total = computed(() => data.value?.total || 0)
-const perPage = computed(() => data.value?.perPage || 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)
-})
-
-onBlokkliEvent('item:dropped', function () {
-  selected.value = []
-})
+  return Math.ceil(total.value / perPage.value);
+});
+onBlokkliEvent("item:dropped", function() {
+  selected.value = [];
+});
 </script>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    isSortli?: boolean;
+    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

@@ -3,11 +3,11 @@
     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.',
-      )
-    "
+  $t(
+    'mediaLibraryTourText',
+    'Search for media like images and drag and drop them into the page.'
+  )
+"
     edit-only
     icon="image"
     weight="-100"
@@ -26,157 +26,124 @@
   </PluginDroppableEdit>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature, ref } from '#imports'
-import { PluginSidebar, PluginDroppableEdit } from '#blokkli/plugins'
-import Library from './Library/index.vue'
-import defineDropAreas from '#blokkli/helpers/composables/defineDropAreas'
-import { falsy } from '#blokkli/helpers'
-import type {
-  DraggableHostData,
-  DropArea,
-  DroppableEntityField,
-} from '#blokkli/types'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { PluginSidebar, PluginDroppableEdit } from "#blokkli/plugins";
+import Library from "./Library/index.vue";
+import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
+import { falsy } from "#blokkli/helpers";
 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, dom, adapter, state, runtimeConfig, types } = useBlokkli()
-
-const selected = ref('')
-
+  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, dom, adapter, state, runtimeConfig, types } = useBlokkli();
+const selected = ref("");
 const ERROR_MESSAGE = $t(
-  'mediaLibraryReplaceFailed',
-  'Failed to replace media.',
-)
-
-const onDroppableEditSave = async (e: DroppableEntityField) => {
+  "mediaLibraryReplaceFailed",
+  "Failed to replace media."
+);
+const onDroppableEditSave = async (e) => {
   if (!selected.value) {
-    return
+    return;
   }
-  if ('itemBundle' in e.host && adapter.mediaLibraryReplaceMedia) {
+  if ("itemBundle" in e.host && adapter.mediaLibraryReplaceMedia) {
     await state.mutateWithLoadingState(
-      () =>
-        adapter.mediaLibraryReplaceMedia!({
-          host: {
-            uuid: e.host.uuid,
-            type: runtimeConfig.itemEntityType,
-            fieldName: e.fieldName,
-          },
-          mediaId: selected.value,
-        }),
-      ERROR_MESSAGE,
-    )
-  } else if ('type' in e.host && adapter.mediaLibraryReplaceEntityMedia) {
-    const type = e.host.type
+      () => adapter.mediaLibraryReplaceMedia({
+        host: {
+          uuid: e.host.uuid,
+          type: runtimeConfig.itemEntityType,
+          fieldName: e.fieldName
+        },
+        mediaId: selected.value
+      }),
+      ERROR_MESSAGE
+    );
+  } else if ("type" in e.host && adapter.mediaLibraryReplaceEntityMedia) {
+    const type = e.host.type;
     await state.mutateWithLoadingState(
-      () =>
-        adapter.mediaLibraryReplaceEntityMedia!({
-          host: {
-            uuid: e.host.uuid,
-            type,
-            fieldName: e.fieldName,
-          },
-          mediaId: selected.value,
-        }),
-      ERROR_MESSAGE,
-    )
+      () => adapter.mediaLibraryReplaceEntityMedia({
+        host: {
+          uuid: e.host.uuid,
+          type,
+          fieldName: e.fieldName
+        },
+        mediaId: selected.value
+      }),
+      ERROR_MESSAGE
+    );
   }
-}
-
+};
 defineDropAreas((dragItems) => {
-  // Not supported by adapter.
   if (!adapter.mediaLibraryReplaceMedia) {
-    return
+    return;
   }
-
-  // Only a single item is supported.
   if (dragItems.length !== 1) {
-    return
+    return;
   }
-
-  const item = dragItems[0]
-
-  // Not a media library item.
-  if (item.itemType !== 'media_library') {
-    return
+  const item = dragItems[0];
+  if (item.itemType !== "media_library") {
+    return;
   }
-
-  // Generate a drop area for every matching droppable field.
-  return dom
-    .getAllDroppableFields()
-    .map<DropArea | undefined>((field: DroppableEntityField) => {
-      const config = types.getDroppableFieldConfig(field.fieldName, field.host)
-      // @TODO: This should be provided by the adapter on the item.
-      if (config.allowedEntityType !== 'media') {
-        return
-      }
-
-      if (!config.allowedBundles.includes(item.mediaBundle)) {
-        return
-      }
-      const isBlock = 'itemBundle' in field.host
-      const draggableHost: DraggableHostData = {
-        uuid: field.host.uuid,
-        type:
-          'itemBundle' in field.host
-            ? runtimeConfig.itemEntityType
-            : field.host.type,
-        fieldName: field.fieldName,
-      }
-      const label = $t('mediaLibraryReplaceMedia', 'Replace @field').replace(
-        '@field',
-        config.label,
-      )
-
-      if (adapter.mediaLibraryReplaceMedia && isBlock) {
-        return {
-          id: `replace-media:${field.host.uuid}:${field.fieldName}`,
-          label,
-          element: field.element,
-          icon: 'swap-horizontal',
-          onDrop: () => {
-            return state.mutateWithLoadingState(
-              () =>
-                adapter.mediaLibraryReplaceMedia!({
-                  host: draggableHost,
-                  mediaId: item.mediaId,
-                }),
-              ERROR_MESSAGE,
-            )
-          },
+  return dom.getAllDroppableFields().map((field) => {
+    const config = types.getDroppableFieldConfig(field.fieldName, field.host);
+    if (config.allowedEntityType !== "media") {
+      return;
+    }
+    if (!config.allowedBundles.includes(item.mediaBundle)) {
+      return;
+    }
+    const isBlock = "itemBundle" in field.host;
+    const draggableHost = {
+      uuid: field.host.uuid,
+      type: "itemBundle" in field.host ? runtimeConfig.itemEntityType : field.host.type,
+      fieldName: field.fieldName
+    };
+    const label = $t("mediaLibraryReplaceMedia", "Replace @field").replace(
+      "@field",
+      config.label
+    );
+    if (adapter.mediaLibraryReplaceMedia && isBlock) {
+      return {
+        id: `replace-media:${field.host.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.host.uuid}:${field.fieldName}`,
-          label,
-          element: field.element,
-          icon: 'swap-horizontal',
-          onDrop: () => {
-            return state.mutateWithLoadingState(
-              () =>
-                adapter.mediaLibraryReplaceEntityMedia!({
-                  host: draggableHost,
-                  mediaId: item.mediaId,
-                }),
-              ERROR_MESSAGE,
-            )
-          },
+      };
+    } else if (adapter.mediaLibraryReplaceEntityMedia && !isBlock) {
+      return {
+        id: `replace-entity-media:${field.host.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)
-})
+      };
+    }
+  }).filter(falsy);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'MediaLibrary',
-}
+  name: "MediaLibrary"
+};
 </script>

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