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

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

@@ -70,148 +70,104 @@
       </button>
     </div>
 
-    <div class="bk-pagination">
-      <button :disabled="page === 0" @click="page--">
-        <Icon name="arrow-left" />
-      </button>
-      <div>{{ page + 1 }} / {{ totalPages }}</div>
-      <button :disabled="page >= totalPages - 1" @click="page++">
-        <Icon name="arrow-right" />
-      </button>
-    </div>
+    <Pagination v-model="page" :total-pages />
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useLazyAsyncData,
   useBlokkli,
   watch,
-  nextTick,
-} from '#imports'
-import { Sortli, Icon } from '#blokkli/components'
-import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
-import type { BlokkliIcon } from '#blokkli/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
-}
-
-type RenderedFilter = {
-  key: string
-  filter: MediaLibraryFilter
+  return null;
 }
-
-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;