@blokkli/editor 1.1.3 → 1.3.0

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

@@ -43,12 +43,16 @@ const { settings } = defineBlokkliFeature({
       type: 'checkbox',
       default: true,
       label: 'Use animations',
+      description:
+        'Animates UI elements like dialogs or drawers or interactions like drag and drop or scroll changes.',
       group: 'advanced',
     },
     lowPerformanceMode: {
       type: 'checkbox',
       default: false,
       label: 'Enable low performance mode',
+      description:
+        'Reduces the animations and interactivity to a minimum for devices with low performance.',
       group: 'advanced',
     },
     resetAllSettings: {

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

@@ -44,7 +44,7 @@ const { adapter } = defineBlokkliFeature({
   screenshot: 'feature-transform.jpg',
 })
 
-const { types, selection, state, $t, dom } = useBlokkli()
+const { types, selection, state, $t, dom, ui } = useBlokkli()
 
 const {
   data: plugins,
@@ -64,6 +64,8 @@ watch(selection.uuids, async () => {
 })
 
 async function onTransform(plugin: TransformPlugin, uuids: string[]) {
+  ui.setTransform(plugin.label)
+
   await state.mutateWithLoadingState(
     () =>
       adapter.applyTransformPlugin({
@@ -75,6 +77,8 @@ async function onTransform(plugin: TransformPlugin, uuids: string[]) {
       'The action "@name" could not be executed.',
     ).replace('@name', plugin.label),
   )
+
+  ui.setTransform()
 }
 
 const itemBundleIds = computed(() =>

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

@@ -50,7 +50,7 @@
     </PluginTourItem>
   </Teleport>
 
-  <Teleport to="body">
+  <Teleport to="#bk-banner-container">
     <Banner
       v-if="state.editMode.value === 'translating'"
       :active-language="activeLanguage"
@@ -116,7 +116,20 @@ const { translation, editMode } = state
 
 const isOpen = ref(false)
 
-const isDropdown = computed(() => ui.isMobile.value || items.value.length > 5)
+const isDropdown = computed(() => {
+  // Always a dropdown on mobile.
+  if (ui.isMobile.value) {
+    return true
+  }
+
+  // It is a dropdown if all langcodes combined is greater than 15.
+  // That way up to 7 languages with 2-char langcodes are displayed as radio buttons.
+  // This handles cases where langcodes are e.g. 'en-US', 'en-GB', 'de-CH', etc.
+  // In this case it switches to a dropdown. This is better than relying on the number
+  // languages.
+  const allCodes = items.value.map((v) => v.code).join('')
+  return allCodes.length > 15
+})
 const activeLangcode = computed(() => context.value.language)
 const activeLanguage = computed<Language>(() => {
   return (
@@ -212,6 +225,15 @@ onBlokkliEvent('item:doubleClick', function (block) {
   }
 })
 
+onBlokkliEvent('entity:translated', (langcode) => {
+  const targetTranslation = translation.value.translations?.find(
+    (v) => v.id === langcode,
+  )
+  if (targetTranslation) {
+    adapter.changeLanguage(targetTranslation)
+  }
+})
+
 onMounted(() => {
   // Make sure the user is not trying to edit a translation that does not exist.
   const translationExists = !!translation.value.translations?.find(

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

@@ -48,6 +48,10 @@ const availableFeatures = computed(() => {
       return false
     }
 
+    if (v.beta && !features.enabledBetaFeatures.value.includes(v.id)) {
+      return false
+    }
+
     return !v.viewports.length || v.viewports.includes(ui.appViewport.value)
   })
 })

package/dist/runtime/components/Edit/InfoBox/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="bk-info-box">
+    <Icon name="info" />
+    <p v-html="text" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '#blokkli/components'
+
+defineProps<{
+  text: string
+}>()
+</script>

package/dist/runtime/components/Edit/Messages/index.vue

@@ -1,16 +1,14 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-messages">
-      <TransitionGroup name="bk-message">
-        <Item
-          v-for="(message, index) in messages"
-          v-bind="message"
-          :key="index"
-          @close="removeMessage(index)"
-        />
-      </TransitionGroup>
-    </div>
-  </Teleport>
+  <div class="bk bk-messages">
+    <TransitionGroup name="bk-message">
+      <Item
+        v-for="(message, index) in messages"
+        v-bind="message"
+        :key="index"
+        @close="removeMessage(index)"
+      />
+    </TransitionGroup>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -62,7 +62,7 @@ const mutatedEntity = computed(
   () => mutatedEntityFromState.value || props.entity,
 )
 
-const { data, refresh } = await useAsyncData(() =>
+const { data, refresh, error } = await useAsyncData(() =>
   adapter.loadState().then((v) => adapter.mapState(v)),
 )
 
@@ -94,8 +94,10 @@ const updateState = () => {
 
 updateState()
 
+const isPreview = computed(() => !error.value)
+
 provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap)
-provide(INJECT_IS_PREVIEW, true)
+provide(INJECT_IS_PREVIEW, isPreview)
 provide<ItemEditContext>(INJECT_EDIT_CONTEXT, {
   mutatedOptions,
   eventBus,
@@ -127,6 +129,11 @@ const onMouseDown = () => {
  * update.
  */
 function checkChangedDate() {
+  // State loading has failed, so we can return here; no need to poll.
+  if (!isPreview.value) {
+    return
+  }
+
   clearTimeout(timeout)
 
   const delay = adapter.getLastChanged ? 1000 : 5000

package/dist/runtime/components/Edit/Sortli/index.vue

@@ -19,6 +19,10 @@ import {
 
 const { eventBus } = useBlokkli()
 
+const props = defineProps<{
+  getDragItems?: (activeItem?: DraggableItem) => DraggableItem[] | null
+}>()
+
 let pointerStartCoords: Coord | null = null
 let activeItem: DraggableItem | null = null
 
@@ -55,8 +59,9 @@ function onPointerMove(e: PointerEvent) {
   const distance = getDistance(coords, pointerStartCoords)
 
   if (distance > 7) {
+    const dragItems = props.getDragItems ? props.getDragItems(activeItem) : null
     eventBus.emit('dragging:start', {
-      items: [activeItem],
+      items: dragItems && dragItems.length ? dragItems : [activeItem],
       coords,
       mode: 'mouse',
     })

package/dist/runtime/components/Edit/index.d.ts

@@ -12,4 +12,5 @@ import Loading from './Loading/index.vue.js';
 import Highlight from './Highlight/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
-export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, };
+import InfoBox from './InfoBox/index.vue.js';
+export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, };

package/dist/runtime/components/Edit/index.js

@@ -12,6 +12,7 @@ import Loading from "./Loading/index.vue";
 import Highlight from "./Highlight/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
+import InfoBox from "./InfoBox/index.vue";
 export {
   ItemIcon,
   ShortcutIndicator,
@@ -26,5 +27,6 @@ export {
   Loading,
   Highlight,
   ViewportBlockingRect,
-  ScrollBoundary
+  ScrollBoundary,
+  InfoBox
 };

package/dist/runtime/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavior", "advanced"];
+export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavior", "beta", "advanced"];
 export declare const VIEWPORT: readonly ["mobile", "desktop"];
 export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
 export type Viewport = (typeof VIEWPORT)[number];

package/dist/runtime/constants/index.js

@@ -2,6 +2,7 @@ export const SETTINGS_GROUP = [
   "appearance",
   "artboard",
   "behavior",
+  "beta",
   "advanced"
 ];
 export const VIEWPORT = ["mobile", "desktop"];