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

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

@@ -56,19 +56,28 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, onMounted } from "#imports";
+import { ref, useBlokkli, onMounted, useTemplateRef, watch } from "#imports";
 import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
-const { dom, $t, blocks } = useBlokkli();
+const { dom, $t, blocks, ui } = 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 previewEl = useTemplateRef("previewEl");
 const backgroundColor = ref("");
+watch(
+  label,
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
 onMounted(() => {
   if (previewEl.value) {
     const item = blocks.getBlock(props.uuid);

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

@@ -75,7 +75,8 @@ import {
   useLazyAsyncData,
   useBlokkli,
   watch,
-  nextTick
+  nextTick,
+  useTemplateRef
 } from "#imports";
 import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
 import Item from "./Item.vue";
@@ -86,7 +87,7 @@ defineProps({
 });
 const { adapter, storage, $t, element } = useBlokkli();
 const selected = ref([]);
-const listEl = ref(null);
+const listEl = useTemplateRef("listEl");
 const page = ref(0);
 const key = computed(() => Object.values(filterValues.value).join(","));
 function getDragItems(activeItem) {

package/dist/runtime/components/Edit/Features/Options/Form/Item.vue.d.ts

@@ -1,4 +1,4 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blokkOptions';
+import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
 type __VLS_Props = {
     option: BlockOptionDefinition;
     property: string;

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

@@ -4,6 +4,7 @@
     id="preview_with_smartphone"
     :title="$t('previewWithSmartphone', 'Preview (with smartphone)')"
     :disabled="!state.canEdit.value"
+    weight="20"
     :tour-text="
   $t(
     'previewWithSmartphoneTourText',

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

@@ -565,4 +565,13 @@ async function onSubmit() {
     emit("submit");
   }
 }
+watch(
+  () => [revisionMessage.value, publishMode.value, isMutating.value],
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
 </script>

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

@@ -25,7 +25,8 @@ import {
   onMounted,
   onBeforeUnmount,
   useRoute,
-  watch
+  watch,
+  useTemplateRef
 } from "#imports";
 import { Icon } from "#blokkli/components";
 import { frameEventBus } from "./../../../../../helpers/frameEventBus";
@@ -40,7 +41,7 @@ watch(selection.uuids, (selectedUuids) => {
   frameEventBus.emit("selectItems", selectedUuids);
 });
 const isLoading = ref(true);
-const iframe = ref(null);
+const iframe = useTemplateRef("iframe");
 const src = computed(
   () => route.fullPath.replace("blokkliEditing", "blokkliPreview")
 );

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

@@ -3,11 +3,12 @@
     id="mobile-preview"
     v-slot="{ width, height, isDetached, isResizing }"
     :title="$t('responsivePreviewTitle', 'Responsive Preview')"
-    :tour-text="tourText"
+    :tour-text
+    weight="10"
     :disabled="!state.canEdit.value"
     :min-width="375"
     :min-height="375"
-    :size="size"
+    :size
     icon="preview"
     region="left"
   >

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

@@ -52,10 +52,10 @@
 </template>
 
 <script setup>
-import { watch, ref, useBlokkli, onMounted } from "#imports";
+import { ref, watch, useBlokkli, onMounted, useTemplateRef } from "#imports";
 import { ItemIcon, Icon, Sortli } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
-const listItems = ref([]);
+const listItems = useTemplateRef("listItems");
 const props = defineProps({
   visible: { type: Boolean, required: true },
   search: { type: String, required: true },
@@ -123,6 +123,9 @@ const setIndex = (newIndex) => {
   scrollItemIntoView();
 };
 const clickItem = () => {
+  if (!listItems.value) {
+    return;
+  }
   const element = listItems.value[index.value];
   if (!element) {
     return;
@@ -143,6 +146,9 @@ const clickItem = () => {
   emit("close");
 };
 const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
   const item = listItems.value[index.value];
   if (item) {
     item.scrollIntoView({ block: "nearest", inline: "nearest" });

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

@@ -38,10 +38,17 @@
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli, onMounted, watch } from "#imports";
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  watch,
+  useTemplateRef
+} from "#imports";
 import { ItemIcon, Highlight } from "#blokkli/components";
 import { falsy, modulo } from "#blokkli/helpers";
-const listItems = ref([]);
+const listItems = useTemplateRef("listItems");
 const emit = defineEmits(["close"]);
 const props = defineProps({
   visible: { type: Boolean, required: true },
@@ -86,6 +93,9 @@ const clickItem = () => {
   emit("close");
 };
 const scrollItemIntoView = () => {
+  if (!listItems.value) {
+    return;
+  }
   const item = listItems.value[index.value];
   if (item) {
     item.scrollIntoView({ block: "nearest", inline: "nearest" });

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

@@ -66,7 +66,15 @@
 </template>
 
 <script setup>
-import { watch, ref, computed, useBlokkli, onMounted, nextTick } from "#imports";
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  nextTick,
+  useTemplateRef
+} from "#imports";
 import { Icon, ScrollBoundary } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
 import ResultsPage from "./Results/Page/index.vue";
@@ -105,8 +113,8 @@ const tabs = computed(() => Object.keys(tabsMap.value));
 const tabIndex = ref(0);
 const tab = computed(() => tabs.value[tabIndex.value]);
 const search = ref("");
-const input = ref(null);
-const resultsEl = ref(null);
+const input = useTemplateRef("input");
+const resultsEl = useTemplateRef("resultsEl");
 watch(search, () => {
   const component = getResultsComponent();
   if (component) {

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

@@ -8,40 +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"
     >
-      <AddListItem
-        v-for="item in items"
-        :id="item.bundle"
-        :key="item.bundle"
-        context="selection-add-buttons"
-        :label="item.label"
-        :bundle="item.bundle"
-        :color="item.isFavorite ? 'yellow' : void 0"
-        tabindex="-1"
-        @click.prevent="$emit('select', item.bundle)"
-      />
-      <AddListItem
-        v-for="action in actions"
-        :id="action.id"
-        :key="'action:' + action.id"
-        tabindex="-1"
-        context="selection-add-buttons"
-        :icon="action.icon"
-        :label="action.title"
-        :color="action.color"
-        no-context-menu
-        @click.prevent="$emit('action', action)"
-      />
+      <div
+        class="bk-selection-add-overlay-form"
+        @pointerdown.stop
+        @keydown.capture.stop
+        @keyup.capture.stop
+      >
+        <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
+}"
+      >
+        <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 { ArtboardTooltip, AddListItem } 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 },
@@ -49,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,
@@ -65,6 +109,19 @@ 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(() => {
@@ -73,11 +130,34 @@ const actions = computed(() => {
       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) {
@@ -86,4 +166,17 @@ const onWheel = (e) => {
     }
   }
 };
+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/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/index.vue

@@ -9,7 +9,7 @@
 <script setup>
 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";
 import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 const { ui, $t } = useBlokkli();

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/Tour/Overlay/index.vue

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

@@ -41,7 +41,7 @@ function onClose() {
 }
 onBlokkliEvent("overlay:close", onClose);
 onMounted(() => {
-  ui.openDialog({ id: props.id, alignment: "right" });
+  ui.openDialog({ id: props.id, alignment: "right", confirmClose: true });
 });
 onBeforeUnmount(() => {
   ui.closeDialog(props.id);

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 & {

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

@@ -43,6 +43,10 @@ function onClick() {
   if (clickTimeout) {
     return;
   }
+  if (!ui.currentDialog.value?.confirmClose) {
+    onDoubleClick();
+    return;
+  }
   clickTimeout = window.setTimeout(() => {
     showDoubleClickInfo.value = true;
   }, 500);

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

@@ -21,11 +21,11 @@ import {
   INJECT_MUTATED_FIELDS_MAP
 } from "#blokkli/helpers/symbols";
 import { frameEventBus } from "#blokkli/helpers/frameEventBus";
-import broadcastProvider from "#blokkli/helpers/broadcastProvider";
+import broadcastProvider from "#blokkli/helpers/providers/broadcast";
 import { getFieldKey, intersects } from "#blokkli/helpers";
 import { eventBus } from "#blokkli/helpers/eventBus";
-import definitionProvider from "../../helpers/definitionProvider";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import definitionProvider from "../../helpers/providers/definition";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 const props = defineProps({
   entity: { type: null, required: false },
   entityType: { type: String, required: true },

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

@@ -10,14 +10,14 @@
 
 <script setup>
 import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
-import { ref, computed } from "#imports";
+import { ref, computed, useTemplateRef } from "#imports";
 const props = defineProps({
   width: { type: Number, required: false },
   maxHeight: { type: Number, required: false }
 });
-const rootEl = ref(null);
-const inner = ref(null);
-const wrapper = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const inner = useTemplateRef("inner");
+const wrapper = useTemplateRef("wrapper");
 const rootWidth = ref(260);
 const nativeWidth = ref(0);
 const nativeHeight = ref(0);

package/dist/runtime/composables/defineBlokkliFeature.d.ts

@@ -2,7 +2,7 @@ import { type ComputedRef } from '#imports';
 import type { BlokkliAdapter, AdapterMethods } from '#blokkli/adapter';
 import type { FeatureDefinition } from '#blokkli/types';
 import type { ValidFeatureKey } from '#blokkli-build/features';
-import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+import type { DebugLogger } from '#blokkli/helpers/providers/debug';
 type SettingType<S> = S extends {
     type: 'checkbox';
 } ? boolean : S extends {

package/dist/runtime/composables/useBlokkli.d.ts

@@ -4,5 +4,10 @@ import type { BlokkliApp } from '#blokkli/types';
  *
  * The app is only available when the editor is mounted. Calling this
  * composable in normal rendering does not work.
+ *
+ * @param optional - If true, returns undefined instead of throwing when not in edit mode
+ * @returns The blokkli app, or undefined if optional is true and not in edit mode
+ * @throws Error if not in edit mode and optional is false/undefined
  */
-export declare function useBlokkli(): BlokkliApp;
+export declare function useBlokkli(optional: true): BlokkliApp | undefined;
+export declare function useBlokkli(optional?: false): BlokkliApp;

package/dist/runtime/composables/useBlokkli.js

@@ -1,8 +1,11 @@
 import { INJECT_APP } from "../helpers/symbols.js";
 import { inject } from "#imports";
-export function useBlokkli() {
+export function useBlokkli(optional) {
   const app = inject(INJECT_APP);
   if (!app) {
+    if (optional) {
+      return void 0;
+    }
     throw new Error(
       "The useBlokkli composable was called while not in edit mode."
     );