@blokkli/editor 1.0.0 → 1.0.2

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

@@ -50,7 +50,7 @@
   </Teleport>
 
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <transition name="bk-slide-up" :duration="200">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
@@ -59,6 +59,12 @@
       />
     </transition>
   </Teleport>
+  <EditReusable
+    v-if="editingLibraryItem"
+    v-bind="editingLibraryItem"
+    @submit="onSubmitLibraryItem"
+    @close="cancelLibraryItemEdit"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -66,8 +72,10 @@ 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 } from '#blokkli/types'
+import type { ActionPlacedEvent, LibraryEditItemEvent } from '#blokkli/types'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 const { adapter } = defineBlokkliFeature({
   id: 'library',
@@ -175,6 +183,21 @@ const canMakeReusable = computed(
     itemBundle?.value?.allowReusable &&
     fromLibraryAllowedInList.value,
 )
+
+const editingLibraryItem = ref<LibraryEditItemEvent | null>(null)
+
+onBlokkliEvent('library:edit-item', function (e) {
+  editingLibraryItem.value = e
+})
+
+function cancelLibraryItemEdit() {
+  editingLibraryItem.value = null
+}
+
+function onSubmitLibraryItem() {
+  eventBus.emit('reloadState')
+  cancelLibraryItemEdit()
+}
 </script>
 
 <script lang="ts">

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

@@ -98,7 +98,7 @@ import {
   nextTick,
 } from '#imports'
 import { Sortli, Icon } from '#blokkli/components'
-import type { MediaLibraryFilter } from './../types'
+import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
 import type { BlokkliIcon } from '#blokkli/icons'
 
 const props = defineProps<{
@@ -150,15 +150,16 @@ watch(key, () => {
   page.value = 0
 })
 
-const { data, status } = await useLazyAsyncData(
-  () => {
-    return adapter.mediaLibraryGetResults!({
-      filters: filterValues.value,
-      page: page.value,
-    })
-  },
-  { watch: [key, page] },
-)
+const { data, status } =
+  await useLazyAsyncData<MediaLibraryGetResults<any> | null>(
+    () => {
+      return adapter.mediaLibraryGetResults!({
+        filters: filterValues.value,
+        page: page.value,
+      })
+    },
+    { watch: [key, page] },
+  )
 
 watch(data, () => {
   nextTick(() => {

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

@@ -111,7 +111,7 @@ defineDropAreas((dragItems) => {
   // Generate a drop area for every matching droppable field.
   return dom
     .getAllDroppableFields()
-    .map<DropArea | undefined>((field) => {
+    .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') {

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

@@ -24,7 +24,7 @@ const { adapter } = defineBlokkliFeature({
     'Provides a menu button to publish the changes of the current entity.',
 })
 
-const { state, $t, eventBus } = useBlokkli()
+const { state, $t, eventBus, broadcast, context } = useBlokkli()
 const { mutations, canEdit, mutateWithLoadingState } = state
 
 const onClick = async () => {
@@ -39,7 +39,10 @@ const onClick = async () => {
     if (validations.length) {
       eventBus.emit('publish:failed')
     }
+    return
   }
+
+  broadcast.emit('published', { uuid: context.value.entityUuid })
 }
 </script>
 

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Content/index.vue

@@ -96,7 +96,7 @@ const doSearch = () => {
     // This component can only ever be rendered if this adapter method exists,
     // so we can safely assume it's there.
     adapter.getContentSearchResults!(props.tab, props.search).then(
-      (newItems) => {
+      (newItems: SearchContentItem[]) => {
         items.value = newItems
         itemsSearchTerm.value = searchTerm
         isLoading.value = false

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

@@ -72,6 +72,7 @@
   <PluginItemAction
     v-if="editMode === 'translating'"
     id="translate"
+    :disabled="!canTranslateBlock"
     :title="$t('translationsItemAction', 'Translate')"
     icon="translate"
     @click="onTranslate"
@@ -98,6 +99,7 @@ import type {
   Language,
 } from '#blokkli/types'
 import Banner from './Banner/index.vue'
+import { getDefinition } from '#blokkli/definitions'
 
 const { adapter } = defineBlokkliFeature({
   id: 'translations',
@@ -107,7 +109,7 @@ const { adapter } = defineBlokkliFeature({
   description: 'Adds support for block translations.',
 })
 
-const { eventBus, state, context, $t, ui } = useBlokkli()
+const { eventBus, state, context, $t, ui, selection } = useBlokkli()
 const { translation, editMode } = state
 
 const isOpen = ref(false)
@@ -152,6 +154,29 @@ const items = computed<TranslationStateItem[]>(() => {
     .filter(falsy)
 })
 
+const canTranslateBlock = computed(() => {
+  if (selection.blocks.value.length !== 1) {
+    return false
+  }
+  const block = selection.blocks.value[0]
+
+  if (block.libraryItemUuid) {
+    return false
+  }
+
+  const definition = getDefinition(
+    block.itemBundle,
+    block.hostFieldListType,
+    block.parentBlockBundle,
+  )
+
+  if (definition?.editor?.disableEdit) {
+    return false
+  }
+
+  return true
+})
+
 function onClick(item: TranslationStateItem, event: Event) {
   if (item.translation?.exists) {
     return adapter.changeLanguage(item.translation)