@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -8,38 +8,60 @@
     @close="$emit('close')"
   >
     <div
-      ref="listEl"
-      class="bk-selection-add-overlay-list bk-scrollbar-dark"
-      @wheel="onWheel"
+      ref="scrollEl"
+      class="bk-selection-add-overlay-wrapper bk-scrollbar-dark"
     >
-      <button
-        v-for="item in items"
-        :key="item.bundle"
-        tabindex="-1"
-        @click.prevent="$emit('select', item.bundle)"
+      <div
+        class="bk-selection-add-overlay-form"
+        @pointerdown.stop
+        @keydown.capture.stop
+        @keyup.capture.stop
       >
-        <AddListItemIcon
-          :bundle="item.bundle"
-          :color="item.isFavorite ? 'yellow' : 'default'"
-        />
-        <span>{{ item.label }}</span>
-      </button>
-      <button
-        v-for="action in actions"
-        :key="'action:' + action.id"
-        tabindex="-1"
-        @click.prevent="$emit('action', action.id)"
+        <form
+          class="bk-selection-add-overlay-form-input"
+          @submit.prevent.stop="onSubmitForm"
+        >
+          <Icon name="search" />
+          <input
+            ref="inputEl"
+            v-model="searchText"
+            type="text"
+            :placeholder="$t('searchBoxPlaceholder', 'Enter search term')"
+          />
+          <button
+            v-if="searchText"
+            type="button"
+            tabindex="-1"
+            @click.prevent="onClearSearchText"
+          >
+            <Icon name="close" />
+          </button>
+        </form>
+      </div>
+      <div
+        ref="wrapperEl"
+        :style="{
+  width,
+  height
+}"
       >
-        <AddListItemIcon :icon="action.icon" :color="action.color" />
-        <span>{{ action.title }}</span>
-      </button>
+        <div class="bk-selection-add-overlay-list" @wheel="onWheel">
+          <AddListItem
+            v-for="item in items"
+            v-show="isVisible(item)"
+            :key="item.props.id"
+            v-bind="item.props"
+            @click.prevent="onClick(item)"
+          />
+        </div>
+      </div>
     </div>
   </ArtboardTooltip>
 </template>
 
 <script setup>
-import { useTemplateRef, useBlokkli, computed } from "#imports";
-import { AddListItemIcon, ArtboardTooltip } from "#blokkli/components";
+import { useTemplateRef, useBlokkli, computed, ref, watch } from "#imports";
+import { ArtboardTooltip, AddListItem, Icon } from "#blokkli/components";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 const props = defineProps({
   bundles: { type: Array, required: true },
@@ -47,12 +69,36 @@ const props = defineProps({
   anchorCoordinates: { type: Object, required: false },
   label: { type: String, required: true }
 });
-defineEmits(["select", "action", "close"]);
-const listEl = useTemplateRef("listEl");
+const emit = defineEmits(["select", "action", "close"]);
+const searchText = ref("");
+const width = ref("auto");
+const height = ref("auto");
+const wrapperEl = useTemplateRef("wrapperEl");
+const scrollEl = useTemplateRef("scrollEl");
+const inputEl = useTemplateRef("inputEl");
 let hasScrollbar = null;
-const { types, plugins, storage } = useBlokkli();
+watch(
+  searchText,
+  () => {
+    if (wrapperEl.value) {
+      const rect = wrapperEl.value.getBoundingClientRect();
+      width.value = rect.width + "px";
+      height.value = rect.height + "px";
+    }
+  },
+  {
+    once: true
+  }
+);
+function onClearSearchText() {
+  if (inputEl.value) {
+    inputEl.value.focus();
+  }
+  searchText.value = "";
+}
+const { types, plugins, storage, $t } = useBlokkli();
 const favorites = storage.use("blockFavorites", []);
-const items = computed(() => {
+const blocks = computed(() => {
   return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
     return {
       bundle,
@@ -63,23 +109,74 @@ const items = computed(() => {
     if (a.isFavorite && !b.isFavorite) return -1;
     if (!a.isFavorite && b.isFavorite) return 1;
     return a.label.localeCompare(b.label);
+  }).map((block) => {
+    return {
+      type: "block",
+      bundle: block.bundle,
+      searchText: block.label.toLowerCase(),
+      props: {
+        id: block.bundle,
+        label: block.label,
+        bundle: block.bundle,
+        color: block.isFavorite ? "yellow" : void 0,
+        context: "selection-add-buttons"
+      }
+    };
   });
 });
 const actions = computed(() => {
-  return plugins.getAddActions().filter((action) => {
+  return plugins.get("addAction").filter((action) => {
     if (!action.itemBundle) {
       return true;
     }
     return props.bundles.includes(action.itemBundle);
+  }).map((action) => {
+    return {
+      type: "action",
+      action,
+      searchText: action.title + " " + (action.description ?? ""),
+      props: {
+        id: action.id,
+        label: action.title,
+        color: action.color,
+        context: "selection-add-buttons",
+        icon: action.icon,
+        noContextMenu: true
+      }
+    };
   });
 });
+const items = computed(() => {
+  return [...blocks.value, ...actions.value];
+});
+function isVisible(item) {
+  if (!searchText.value) {
+    return true;
+  }
+  return item.searchText.includes(searchText.value);
+}
 const onWheel = (e) => {
   if (hasScrollbar === null) {
-    const element = listEl.value;
+    const element = scrollEl.value;
     hasScrollbar = element && element.scrollHeight > element.clientHeight;
   }
   if (hasScrollbar) {
-    e.stopPropagation();
+    if (!e.ctrlKey && !e.metaKey) {
+      e.stopPropagation();
+    }
   }
 };
+function onClick(item) {
+  if (item.type === "block") {
+    emit("select", item.bundle);
+  } else if (item.type === "action") {
+    emit("action", item.action);
+  }
+}
+function onSubmitForm() {
+  const firstResult = items.value.find((item) => isVisible(item));
+  if (firstResult) {
+    onClick(firstResult);
+  }
+}
 </script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue.d.ts

@@ -1,17 +1,17 @@
-import type { Coord } from '#blokkli/types';
+import type { AddAction, Coord } from '#blokkli/types';
 type __VLS_Props = {
     bundles: string[];
     anchorEl?: HTMLElement;
     anchorCoordinates?: Coord;
     label: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (id: string) => void;
-    action: (id: string) => void;
-    close: () => void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    action: (action: AddAction) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
-    onAction?: ((id: string) => any) | undefined;
+    onAction?: ((action: AddAction) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -188,12 +188,11 @@ function onSelectBundle(bundle) {
   });
   closeOverlay();
 }
-function onSelectAction(id) {
+function onSelectAction(action) {
   if (!addData.value) {
     return;
   }
-  eventBus.emit("action:placed", {
-    id,
+  action.callback({
     field: addData.value.field,
     preceedingUuid: addData.value.preceedingUuid,
     host: { ...addData.value.host }
@@ -291,9 +290,7 @@ onBlokkliEvent("state:reloaded", () => {
   }
 });
 function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
-  const allowedBundles = field.allowedBundles.filter(
-    (bundle) => !isInternalBundle(bundle)
-  );
+  const allowedBundles = field.allowedBundles;
   if (allowedBundles.length === 0) {
     return;
   }

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

@@ -14,7 +14,7 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
-import { useTransitionedValue } from "#blokkli/helpers/useTransitionedValue";
+import { useTransitionedValue } from "#blokkli/helpers/composables/useTransitionedValue";
 import { toShaderColor } from "#blokkli/helpers";
 const props = defineProps({
   blocks: { type: Array, required: true },

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

@@ -1,5 +1,6 @@
 <template>
   <DialogModal
+    id="settings"
     :title="$t('settingsDialogTitle', 'Change settings')"
     :width="900"
     hide-buttons

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

@@ -1,28 +1,18 @@
 <template>
-  <PluginMenuButton
-    id="settings"
-    :title="$t('settingsMenuTitle', 'Settings')"
-    :description="
-  $t('settingsMenuDescription', 'Personal settings for the editor')
-"
-    secondary
-    icon="cog"
-    @click="onClick"
-  />
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-up">
-      <SettingsDialog v-if="showSettings" @cancel="showSettings = false" />
+      <SettingsDialog v-if="showSettings" @cancel="onClose" />
     </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
-import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import SettingsDialog from "./Dialog/index.vue";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 import { BlokkliTransition } from "#blokkli/components";
-const { $t } = useBlokkli();
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
+const { ui, $t } = useBlokkli();
 const { settings } = defineBlokkliFeature({
   id: "settings",
   label: "Settings",
@@ -53,14 +43,32 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
-const showSettings = ref(false);
-const onClick = () => showSettings.value = true;
+const showSettings = computed(() => ui.currentDialog.value?.id === "settings");
+function onClick() {
+  ui.openDialog({ id: "settings", alignment: "center" });
+}
+function onClose() {
+  ui.closeDialog("settings");
+}
 const lowPerformanceMode = computed(() => settings.value.lowPerformanceMode);
 addElementClasses(
   document.documentElement,
   "bk-low-performance-mode",
   lowPerformanceMode
 );
+defineMenuButton(() => {
+  return {
+    id: "settings",
+    title: $t("settingsMenuTitle", "Settings"),
+    description: $t(
+      "settingsMenuDescription",
+      "Personal settings for the editor"
+    ),
+    icon: "cog",
+    secondary: true,
+    callback: onClick
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Structure/List/Field/index.vue

@@ -50,13 +50,13 @@
 
 <script setup>
 import {
-  ref,
   useBlokkli,
   computed,
   inject,
   onMounted,
   onBeforeUnmount,
-  nextTick
+  nextTick,
+  useTemplateRef
 } from "#imports";
 import Item from "./../Item/index.vue";
 const props = defineProps({
@@ -109,7 +109,7 @@ function onClickFieldLabel() {
     list.value.map((v) => v.uuid)
   );
 }
-const el = ref(null);
+const el = useTemplateRef("el");
 const observer = inject("bk_structure_observer");
 const isVisible = computed(() => !!props.visibleFieldKeys[key.value]);
 const bundlesAllowed = computed(

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="touch-bar">
       <Bar
         v-if="
@@ -24,7 +24,7 @@
 import { useBlokkli, defineBlokkliFeature } from "#imports";
 import { BlokkliTransition } from "#blokkli/components";
 import Bar from "./Bar/index.vue";
-const { eventBus, selection, $t } = useBlokkli();
+const { eventBus, selection, $t, ui } = useBlokkli();
 defineBlokkliFeature({
   id: "touch-action-bar",
   label: "Touch Action Bar",

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport v-if="activeItem" to="body">
+  <Teleport v-if="activeItem" :to="ui.mainLayoutElement.value">
     <div class="bk bk-tour" :style="tooltipStyle">
       <div class="bk-tour-inner">
         <div class="bk-tour-title">
@@ -51,7 +51,7 @@
 </template>
 
 <script setup>
-import { useBlokkli, computed, ref } from "#imports";
+import { useBlokkli, computed, ref, useTemplateRef } from "#imports";
 import { falsy, modulo } from "#blokkli/helpers";
 import { Icon, ShortcutIndicator } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -86,7 +86,7 @@ const tooltipStyle = computed(() => {
 });
 const { tour, ui, $t } = useBlokkli();
 const activeIndex = ref(0);
-const contentEl = ref(null);
+const contentEl = useTemplateRef("contentEl");
 const tooltipHeight = ref(100);
 const tooltipWidth = computed(() => {
   return ui.isMobile.value ? Math.min(window.innerWidth - 20, 400) : 400;

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
       <div class="bk-tour-popup-title">
         <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
@@ -29,6 +29,6 @@
 <script setup>
 import { Icon, ViewportBlockingRect } from "#blokkli/components";
 import { useBlokkli } from "#imports";
-const { $t } = useBlokkli();
+const { $t, ui } = useBlokkli();
 defineEmits(["start", "close"]);
 </script>

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

@@ -1,22 +1,13 @@
 <template>
   <Overlay v-if="tour.isTouring.value" @close="close" />
-  <PluginMenuButton
-    id="tour"
-    :title="$t('tourLabel', 'Take a tour')"
-    :description="$t('tourDescription', 'Explore the features of the editor')"
-    icon="tutor"
-    secondary
-    :weight="-10"
-    @click="start"
-  />
   <Popup v-if="showTourPopup" @close="close" @start="start" />
 </template>
 
 <script setup>
 import { defineBlokkliFeature, useBlokkli } from "#imports";
 import Overlay from "./Overlay/index.vue";
-import { PluginMenuButton } from "#blokkli/plugins";
 import Popup from "./Popup/index.vue";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 defineBlokkliFeature({
   id: "tour",
   label: "Tour",
@@ -33,6 +24,17 @@ const close = () => {
   showTourPopup.value = false;
   tour.isTouring.value = false;
 };
+defineMenuButton(() => {
+  return {
+    id: "tour",
+    title: $t("tourLabel", "Take a tour"),
+    description: $t("tourDescription", "Explore the features of the editor"),
+    icon: "tutor",
+    secondary: true,
+    weight: -10,
+    callback: start
+  };
+});
 </script>
 
 <script>

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

@@ -38,7 +38,7 @@
 }"
               @click.prevent="onClickPreview"
             >
-              {{ $t("transformDialogButtonPreview", "New suggestion") }}
+              {{ previewButtonLabel }}
             </button>
             <button
               class="bk-button bk-is-orange"
@@ -94,6 +94,12 @@ function mapValues(values) {
 const hasSeedInput = computed(
   () => !!props.plugin.configInputs?.find((v) => v.type === "seed")
 );
+const previewButtonLabel = computed(() => {
+  if (hasSeedInput.value) {
+    return $t("transformDialogButtonNewSuggestion", "New suggestion");
+  }
+  return $t("transformDialogButtonPreview", "Preview");
+});
 const isLocked = ref(false);
 const hasChanged = ref(false);
 const isPreviewing = ref(false);

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="transform-overlay">
       <TransformDialog
         v-if="openPluginDefinition"

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

@@ -52,18 +52,6 @@
     <Banner v-if="isTranslating" :active-language />
   </Teleport>
 
-  <PluginMenuButton
-    id="translations"
-    :title="$t('translationsBatchTranslateMenuTitle', 'Translate...')"
-    :description="
-  $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
-"
-    :disabled="!isTranslating"
-    :weight="60"
-    icon="translate"
-    @click="eventBus.emit('batchTranslate')"
-  />
-
   <PluginItemAction
     v-if="isTranslating"
     id="translate"
@@ -84,13 +72,10 @@ import {
   onMounted
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import {
-  PluginMenuButton,
-  PluginItemAction,
-  PluginTourItem
-} from "#blokkli/plugins";
+import { PluginItemAction, PluginTourItem } from "#blokkli/plugins";
 import Banner from "./Banner/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 const { adapter } = defineBlokkliFeature({
   id: "translations",
   label: "Translations",
@@ -202,6 +187,22 @@ onMounted(() => {
     }
   }
 });
+defineMenuButton(() => {
+  return {
+    id: "translations",
+    title: $t("translationsBatchTranslateMenuTitle", "Translate..."),
+    description: $t(
+      "translationsBatchTranslateMenuDescription",
+      "Translate all blocks"
+    ),
+    icon: "translate",
+    disabled: !isTranslating.value,
+    weight: 60,
+    callback: () => {
+      eventBus.emit("batchTranslate");
+    }
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Form/Textarea/index.vue

@@ -5,7 +5,7 @@
     </label>
     <textarea
       :id
-      v-model.lazy="value"
+      v-model="value"
       class="bk-form-input"
       :placeholder
       :required

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

@@ -6,7 +6,6 @@
     @keyup.stop
     @keydown.stop
   >
-    <div class="bk bk-form-overlay-background bk-overlay" />
     <Resizable :id="id" class="bk-form-overlay-resizable">
       <FormHeader
         :bundle="bundle"
@@ -27,16 +26,26 @@
 <script setup>
 import FormHeader from "./Header/index.vue";
 import { Resizable } from "#blokkli/components";
-defineProps({
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
   id: { type: String, required: true },
   bundle: { type: String, required: false },
   icon: { type: null, required: false },
   title: { type: String, required: true }
 });
+const { ui } = useBlokkli();
 const emit = defineEmits(["close"]);
-const onClose = () => {
+function onClose() {
   emit("close");
-};
+}
+onBlokkliEvent("overlay:close", onClose);
+onMounted(() => {
+  ui.openDialog({ id: props.id, alignment: "right", confirmClose: true });
+});
+onBeforeUnmount(() => {
+  ui.closeDialog(props.id);
+});
 </script>
 
 <script>

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

@@ -98,7 +98,7 @@ onBlokkliEvent("state:reloaded", () => {
   prevRects.clear();
 });
 onBlokkliEvent("scrollIntoView", (e) => {
-  if ("element" in e) {
+  if ("element" in e && e.highlight) {
     if (artboardElement.contains(e.element)) {
       highlighted.value = ui.getAbsoluteElementRect(e.element);
     } else {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="bk-info-box">
-    <Icon name="info" />
+    <Icon :name="icon" />
     <div>
       <slot>
         <p v-html="text" />
@@ -12,6 +12,7 @@
 <script setup>
 import { Icon } from "#blokkli/components";
 defineProps({
-  text: { type: String, required: false }
+  text: { type: String, required: false, default: void 0 },
+  icon: { type: null, required: false, default: "info" }
 });
 </script>

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

@@ -1,11 +1,16 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     text?: string;
+    icon?: BlokkliIcon;
 };
 declare var __VLS_5: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
 };
-declare const __VLS_component: 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>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    text: string;
+    icon: BlokkliIcon;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {