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

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

@@ -2,11 +2,11 @@
   <DialogModal
     :title="$t('libraryDialogTitle', 'Add to library')"
     :lead="
-      $t(
-        'libraryDialogLead',
-        'When you add an item to the library, you can use it on multiple pages at the same time. Changes to this item are then immediately published on all pages.',
-      )
-    "
+  $t(
+    'libraryDialogLead',
+    'When you add an item to the library, you can use it on multiple pages at the same time. Changes to this item are then immediately published on all pages.'
+  )
+"
     :width="1200"
     icon="reusable"
     :submit-label="$t('libraryDialogSubmit', 'Add to library')"
@@ -17,14 +17,14 @@
     <div class="bk-reusable-dialog-form">
       <InfoBox
         :text="
-          $t(
-            'libraryDialogReusableInfo',
-            'The library item will be available for placement on other pages once this page has been published.',
-          )
-        "
+  $t(
+    'libraryDialogReusableInfo',
+    'The library item will be available for placement on other pages once this page has been published.'
+  )
+"
       />
       <label for="reusable_label" class="bk-form-label">{{
-        $t('libraryDialogDescriptionLabel', 'Description')
+        $t("libraryDialogDescriptionLabel", "Description")
       }}</label>
       <input
         id="reusable_label"
@@ -32,13 +32,13 @@
         type="text"
         class="bk-form-input"
         :placeholder="
-          $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
-        "
+  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
+"
         required
       />
     </div>
     <div class="bk-form-label">
-      {{ $t('libraryPreviewLabel', 'Preview') }}
+      {{ $t("libraryPreviewLabel", "Preview") }}
     </div>
     <div
       class="bk-dialog-content-element"
@@ -50,46 +50,36 @@
   </DialogModal>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli, onMounted } from '#imports'
-import { DialogModal, InfoBox } from '#blokkli/components'
-import { realBackgroundColor } from '#blokkli/helpers'
-
-defineEmits<{
-  (e: 'confirm', label: string): void
-  (e: 'cancel'): void
-}>()
-
-const { dom, $t } = useBlokkli()
-
-const props = defineProps<{
-  uuid: string
-  backgroundClass?: string
-}>()
-
-const label = ref('')
-const width = ref(450)
-const previewEl = ref<HTMLDivElement | null>(null)
-const backgroundColor = ref('')
-
+<script setup>
+import { ref, useBlokkli, onMounted } from "#imports";
+import { DialogModal, InfoBox } from "#blokkli/components";
+import { realBackgroundColor } from "#blokkli/helpers";
+defineEmits(["confirm", "cancel"]);
+const { dom, $t } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  backgroundClass: { type: String, required: false }
+});
+const label = ref("");
+const width = ref(450);
+const previewEl = ref(null);
+const backgroundColor = ref("");
 onMounted(() => {
   if (previewEl.value) {
-    const item = dom.findBlock(props.uuid)
+    const item = dom.findBlock(props.uuid);
     if (!item) {
-      return
+      return;
     }
-
     if (item.editTitle) {
-      label.value = item.editTitle.substring(0, 40)
+      label.value = item.editTitle.substring(0, 40);
     }
-
-    const element = item.element()
-    const markup = dom.getDropElementMarkup(item)
-    width.value = element.getBoundingClientRect().width + 40
-    const clone = document.createElement('div')
-    clone.innerHTML = markup
-    previewEl.value.appendChild(clone)
-    backgroundColor.value = realBackgroundColor(element)
+    const element = item.element();
+    const markup = dom.getDropElementMarkup(item);
+    width.value = element.getBoundingClientRect().width + 40;
+    const clone = document.createElement("div");
+    clone.innerHTML = markup;
+    previewEl.value.appendChild(clone);
+    backgroundColor.value = realBackgroundColor(element);
   }
-})
+});
 </script>

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    uuid: string;
+    backgroundClass?: string;
+};
+declare const _default: 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>;
+export default _default;

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

@@ -20,16 +20,16 @@
 
   <PluginAddAction
     v-if="
-      adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
-    "
+  adapter.addLibraryItem && adapter.getLibraryItems && isSupportedOnEntity
+"
     type="library"
     :title="$t('libraryAddFromLibrary', 'Add from library')"
     :description="
-      $t(
-        'libraryAddDescription',
-        'Add a reusable block from the block library.',
-      )
-    "
+  $t(
+    'libraryAddDescription',
+    'Add a reusable block from the block library.'
+  )
+"
     icon="reusable"
     color="lime"
     item-bundle="from_library"
@@ -67,141 +67,109 @@
   />
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, useBlokkli, defineBlokkliFeature } from '#imports'
-import { PluginItemAction, PluginAddAction } from '#blokkli/plugins'
-import ReusableDialog from './ReusableDialog/index.vue'
-import LibraryDialog from './LibraryDialog/index.vue'
-import EditReusable from './EditReusable/index.vue'
-import { getDefinition } from '#blokkli-build/definitions'
-import type { ActionPlacedEvent, LibraryEditItemEvent } from '#blokkli/types'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
+<script setup>
+import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
+import ReusableDialog from "./ReusableDialog/index.vue";
+import LibraryDialog from "./LibraryDialog/index.vue";
+import EditReusable from "./EditReusable/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter } = defineBlokkliFeature({
-  id: 'library',
-  icon: 'reusable',
-  label: 'Library',
-  description:
-    'Implements support for a block library to manage reusable blocks.',
-  requiredAdapterMethods: ['makeBlockReusable', 'detachReusableBlock'],
-})
-
-const { selection, state, types, $t, eventBus } = useBlokkli()
-const showReusableDialog = ref(false)
-
+  id: "library",
+  icon: "reusable",
+  label: "Library",
+  description: "Implements support for a block library to manage reusable blocks.",
+  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"]
+});
+const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
+const showReusableDialog = ref(false);
 const selectedItem = computed(() => {
   if (selection.blocks.value.length !== 1) {
-    return
+    return;
   }
-
-  return selection.blocks.value[0]
-})
-
+  return selection.blocks.value[0];
+});
 const onDetach = async () => {
   if (!adapter.detachReusableBlock || !selection.uuids.value.length) {
-    return
+    return;
   }
-  await state.mutateWithLoadingState(() =>
-    adapter.detachReusableBlock({
-      uuids: selection.uuids.value,
-    }),
-  )
-
-  eventBus.emit('select:end')
-}
-
-const placedAction = ref<ActionPlacedEvent | null>(null)
-const onAddLibraryItem = async (uuid: string) => {
+  await state.mutateWithLoadingState(
+    () => adapter.detachReusableBlock({
+      uuids: selection.uuids.value
+    })
+  );
+  eventBus.emit("select:end");
+};
+const placedAction = ref(null);
+const onAddLibraryItem = async (uuid) => {
   if (!placedAction.value || !adapter.addLibraryItem) {
-    return
+    return;
   }
-
-  await state.mutateWithLoadingState(() =>
-    adapter.addLibraryItem({
+  await state.mutateWithLoadingState(
+    () => adapter.addLibraryItem({
       libraryItemUuid: uuid,
-      host: placedAction.value!.host,
-      afterUuid: placedAction.value!.preceedingUuid,
-    }),
-  )
-  placedAction.value = null
-}
-
-const definition = computed(() =>
-  selectedItem?.value
-    ? getDefinition(
-        selectedItem.value.itemBundle,
-        selectedItem.value.hostFieldListType,
-        selectedItem.value.parentBlockBundle,
-      )
-    : null,
-)
-
-const itemBundle = computed(() =>
-  selectedItem?.value
-    ? types.getBlockBundleDefinition(selectedItem.value.itemBundle)
-    : null,
-)
-
+      host: placedAction.value.host,
+      afterUuid: placedAction.value.preceedingUuid
+    })
+  );
+  placedAction.value = null;
+};
+const definition = computed(
+  () => selectedItem?.value ? definitions.getBlockDefinition(
+    selectedItem.value.itemBundle,
+    selectedItem.value.hostFieldListType,
+    selectedItem.value.parentBlockBundle
+  ) : null
+);
+const itemBundle = computed(
+  () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
+);
 const isReusable = computed(
-  () =>
-    selection.blocks.value.length &&
-    selection.blocks.value.every((v) => v.itemBundle === 'from_library'),
-)
-
-async function onMakeReusable(label: string) {
-  showReusableDialog.value = false
+  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === "from_library")
+);
+async function onMakeReusable(label) {
+  showReusableDialog.value = false;
   if (!selectedItem?.value?.uuid) {
-    return
+    return;
   }
   await state.mutateWithLoadingState(
-    () =>
-      adapter.makeBlockReusable({
-        label,
-        uuid: selectedItem.value!.uuid,
-      }),
-    $t('libraryError', 'Failed to add block to library.'),
-  )
-  eventBus.emit('select:end')
+    () => adapter.makeBlockReusable({
+      label,
+      uuid: selectedItem.value.uuid
+    }),
+    $t("libraryError", "Failed to add block to library.")
+  );
+  eventBus.emit("select:end");
 }
-
-const isSupportedOnEntity = computed(() =>
-  types.generallyAvailableBundles.find((v) => v.id === 'from_library'),
-)
-
+const isSupportedOnEntity = computed(
+  () => types.generallyAvailableBundles.find((v) => v.id === "from_library")
+);
 const fromLibraryAllowedInList = computed(() => {
   if (!selection.uuids.value.length) {
     return !!types.generallyAvailableBundles.find(
-      (v) => v.id === 'from_library',
-    )
+      (v) => v.id === "from_library"
+    );
   }
-  return types.allowedTypesInList.value.includes('from_library')
-})
-
+  return types.allowedTypesInList.value.includes("from_library");
+});
 const canMakeReusable = computed(
-  () =>
-    !isReusable.value &&
-    itemBundle?.value?.allowReusable &&
-    fromLibraryAllowedInList.value,
-)
-
-const editingLibraryItem = ref<LibraryEditItemEvent | null>(null)
-
-onBlokkliEvent('library:edit-item', function (e) {
-  editingLibraryItem.value = e
-})
-
+  () => !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
+  editingLibraryItem.value = null;
 }
-
 function onSubmitLibraryItem() {
-  eventBus.emit('reloadState')
-  cancelLibraryItemEdit()
+  eventBus.emit("reloadState");
+  cancelLibraryItemEdit();
 }
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Library',
-}
+  name: "Library"
+};
 </script>

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

@@ -24,23 +24,17 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import type { BlokkliIcon } from '#blokkli-build/icons'
-import { computed } from '#imports'
-
-const props = defineProps<{
-  mediaId: string
-  label: string
-  context: string
-  targetBundles: string[]
-  thumbnail?: string
-  icon?: BlokkliIcon
-  mediaBundle?: string
-}>()
-
-const selected = defineModel<string[]>()
-
-const isSelected = computed(() => selected.value?.includes(props.mediaId))
-
-// @TODO: Shift-click to select all media items inbetween.
+<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

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

@@ -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>