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

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,110 @@
   />
 </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"],
+  dependencies: ["add-list"]
+});
+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;