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

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue.d.ts

@@ -1,8 +1,14 @@
+import type { AnalyzeNodeTargetMapped } from '#blokkli/analyzer/types';
 type __VLS_Props = {
     resultId: string;
-    target: string | HTMLElement | {
-        uuid: string;
-    };
+    target: AnalyzeNodeTargetMapped;
 };
-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>;
+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) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Analyze/Summary/Chart.vue

@@ -1,11 +1,11 @@
 <template>
   <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`">
     <circle
-      v-if="data.length === 1"
+      v-if="dataWithValues.length === 1"
       :cx="radius"
       :cy="radius"
       :r="radius"
-      :fill="data[0]?.color"
+      :fill="dataWithValues[0]?.color"
     />
     <g v-else :transform="`translate(${radius}, ${radius})`">
       <path
@@ -40,11 +40,14 @@ const props = defineProps({
   percentage: { type: Number, required: false, default: void 0 }
 });
 const size = computed(() => props.radius * 2);
+const dataWithValues = computed(
+  () => props.data.filter((item) => item.value > 0)
+);
 const segments = computed(() => {
   const total = props.data.reduce((sum, item) => sum + item.value, 0);
   if (total === 0) return [];
   let currentAngle = -90;
-  return props.data.map((item) => {
+  return props.data.filter((item) => item.value > 0).map((item) => {
     const percentage = item.value / total;
     const angle = percentage * 360;
     const startAngle = currentAngle;
@@ -77,7 +80,8 @@ function createPieSegment(cx, cy, radius, startAngle, endAngle) {
   const largeArc = endAngle - startAngle > 180 ? 1 : 0;
   if (endAngle - startAngle >= 360) {
     return `
-      M ${cx + radius} ${cy}
+      M ${cx} ${cy}
+      L ${cx + radius} ${cy}
       A ${radius} ${radius} 0 1 1 ${cx + radius} ${cy + 1e-3}
       Z
     `;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/axe.js

@@ -54,6 +54,7 @@ export default defineAnalyzer((options) => {
   };
   return {
     id: "axe",
+    label: "Axe (Accessibility Check)",
     requireRawPage: true,
     init: function(context) {
       const locale = getLocale(context.interfaceLangcode) ?? {};

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.d.ts

@@ -1,6 +1,6 @@
 import type { FieldListItemTyped } from '#blokkli-build/generated-types';
-import type { StateProvider } from '#blokkli/helpers/stateProvider';
-import type { TextProvider } from '#blokkli/helpers/textProvider';
+import type { StateProvider } from '#blokkli/helpers/providers/state';
+import type { TextProvider } from '#blokkli/helpers/providers/texts';
 import type { MutatedField } from '#blokkli/types';
 import type { AnalyzeCategory, AnalyzeNode, AnalyzeResult, AnalyzeStatus } from '../types.js';
 import { type TextElement } from './collectTextElements.js';
@@ -10,12 +10,13 @@ export declare class AnalyzerContext {
     readonly providerRootElement: HTMLElement;
     private state;
     readonly $t: TextProvider;
+    readonly signal?: AbortSignal | undefined;
     readonly mutatedFields: Readonly<MutatedField[]>;
     /**
      * The collected text elements.
      */
     private textElements;
-    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider);
+    constructor(langcode: string, interfaceLangcode: string, providerRootElement: HTMLElement, state: StateProvider, $t: TextProvider, signal?: AbortSignal | undefined);
     /**
      * Get the field list item for a block UUID.
      */

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/Context.js

@@ -1,11 +1,12 @@
 import { collectTextElements } from "./collectTextElements.js";
 export class AnalyzerContext {
-  constructor(langcode, interfaceLangcode, providerRootElement, state, $t) {
+  constructor(langcode, interfaceLangcode, providerRootElement, state, $t, signal) {
     this.langcode = langcode;
     this.interfaceLangcode = interfaceLangcode;
     this.providerRootElement = providerRootElement;
     this.state = state;
     this.$t = $t;
+    this.signal = signal;
     this.mutatedFields = JSON.parse(JSON.stringify(state.mutatedFields.value));
   }
   mutatedFields;

package/dist/runtime/components/Edit/Features/Analyze/analyzers/readability.js

@@ -10,7 +10,7 @@ const LIX_BANDS = { easyMax: 40, okMax: 59 };
 const CLI_HARD_MIN = 12;
 const ARI_HARD_MIN = 12;
 const GULPEASE_BANDS = { easyMin: 80, okMin: 60 };
-const MIN_WORDS_FOR_CONFIDENCE = 30;
+const MIN_WORDS_FOR_CONFIDENCE = 5;
 function mapLang(langcode) {
   const lc = (langcode || "").toLowerCase();
   if (lc.startsWith("de")) return "de_CH";
@@ -70,22 +70,48 @@ function summarizeImpact(nodes) {
 function format(n, d = 1) {
   return typeof n === "number" && Number.isFinite(n) ? n.toFixed(d) : "\u2014";
 }
-function analyzeReadability(tr, blocks, langcode, $t) {
+function analyzeReadability(tr, blocks, langcode, $t, cache) {
   const lang = langcode ?? "en";
   const nodes = [];
   for (const b of blocks) {
     const text = (b.text || "").trim();
     if (!text) continue;
     const words = segmentWords(text);
-    if (words.length < MIN_WORDS_FOR_CONFIDENCE) continue;
-    const sentences = Math.max(1, countSentences(text));
-    const avgSentLen = words.length / sentences;
-    const lix = safe(() => tr.lix(text));
-    const cli = safe(() => tr.colemanLiauIndex(text));
-    const ari = safe(() => tr.automatedReadabilityIndex(text));
-    const gulpease = lang === "it" ? safe(() => tr.gulpeaseIndex(text)) : void 0;
-    const band = toBand(lang, { lix, cli, ari, gulpease });
-    if (band !== "hard") continue;
+    if (words.length < MIN_WORDS_FOR_CONFIDENCE) {
+      continue;
+    }
+    const cacheKey = `${langcode}:${text}`;
+    let scores;
+    const cached = cache.get(cacheKey);
+    if (cached) {
+      scores = cached;
+    } else {
+      const sentences = Math.max(1, countSentences(text));
+      const avgSentLen = words.length / sentences;
+      const lix = safe(() => tr.lix(text));
+      const cli = safe(() => tr.colemanLiauIndex(text));
+      const ari = safe(() => tr.automatedReadabilityIndex(text));
+      const gulpease = lang === "it" ? safe(() => tr.gulpeaseIndex(text)) : void 0;
+      scores = {
+        lix,
+        cli,
+        ari,
+        gulpease,
+        words: words.length,
+        sentences,
+        avgSentLen
+      };
+      cache.set(cacheKey, scores);
+    }
+    const band = toBand(lang, {
+      lix: scores.lix,
+      cli: scores.cli,
+      ari: scores.ari,
+      gulpease: scores.gulpease
+    });
+    if (band !== "hard") {
+      continue;
+    }
     const parts = [];
     parts.push(
       $t("analyzerReadabiliyHardToRead", `Hard to read (@lang).`).replace(
@@ -93,16 +119,21 @@ function analyzeReadability(tr, blocks, langcode, $t) {
         lang.toUpperCase()
       )
     );
-    if (lix != null) parts.push(`LIX ${format(lix)}`);
-    if (lang === "it" && gulpease != null)
-      parts.push(`Gulpease ${format(gulpease)}`);
-    if (cli != null) parts.push(`CLI ${format(cli)}`);
-    if (avgSentLen > 25) {
+    if (scores.lix != null) {
+      parts.push(`LIX ${format(scores.lix)}`);
+    }
+    if (lang === "it" && scores.gulpease != null) {
+      parts.push(`Gulpease ${format(scores.gulpease)}`);
+    }
+    if (scores.cli != null) {
+      parts.push(`CLI ${format(scores.cli)}`);
+    }
+    if (scores.avgSentLen > 25) {
       parts.push(
         $t(
           "analyzerReadabiliyAverageSentenceLength",
           `Average sentence length @length \u2192 split sentences.`
-        ).replace("@length", format(avgSentLen))
+        ).replace("@length", format(scores.avgSentLen))
       );
     } else {
       parts.push(
@@ -114,7 +145,7 @@ function analyzeReadability(tr, blocks, langcode, $t) {
     }
     nodes.push({
       description: parts.join(" \xB7 "),
-      impact: impactFor(lix),
+      impact: impactFor(scores.lix),
       targets: [b.element]
     });
   }
@@ -142,8 +173,16 @@ function safe(fn) {
 }
 export default defineAnalyzer(() => {
   let textReadability = null;
+  const cache = /* @__PURE__ */ new Map();
   return {
     id: "readability",
+    label: (langcode) => {
+      if (langcode === "de") {
+        return "Lesbarkeit";
+      }
+      return "Readability";
+    },
+    continuous: true,
     init: function(context) {
       textReadability = new TextReadability({
         lang: mapLang(context.langcode),
@@ -154,11 +193,13 @@ export default defineAnalyzer(() => {
       if (!isSupportedLangcode(context.langcode)) {
         return;
       }
+      const elements = context.getTextElements();
       return analyzeReadability(
         textReadability,
-        context.getTextElements(),
+        elements,
         context.langcode,
-        context.$t
+        context.$t,
+        cache
       );
     }
   };

package/dist/runtime/components/Edit/Features/Analyze/analyzers/types.d.ts

@@ -5,6 +5,10 @@ export type AnalyzeCategory = 'accessibility' | 'seo' | 'text' | 'content';
 export type AnalyzeNodeTarget = string | HTMLElement | {
     uuid: string;
 };
+export type AnalyzeNodeTargetMapped = {
+    target: AnalyzeNodeTarget;
+    globalIndex: number;
+};
 export type AnalyzeNode = {
     description?: string;
     impact?: AnalyzeImpact;
@@ -16,6 +20,9 @@ export type AnalyzeNode = {
      */
     targets: AnalyzeNodeTarget | AnalyzeNodeTarget[];
 };
+export type AnalyzeNodeMapped = Omit<AnalyzeNode, 'targets'> & {
+    targets: AnalyzeNodeTargetMapped[];
+};
 export type AnalyzeResult = {
     id: string;
     title: string;
@@ -30,15 +37,22 @@ export type AnalyzeResult = {
      */
     scoreTargets?: boolean;
 };
-export type AnalyzeResultMapped = AnalyzeResult & {
+export type AnalyzeResultMapped = Omit<AnalyzeResult, 'nodes'> & {
     plugin: string;
+    nodes: AnalyzeNodeMapped[];
 };
 export type Analyzer = {
     id: string;
+    label?: string | ((langcode: string) => string);
     /**
      * If true, the raw page (without editor UI) is required for this analyzer.
      */
     requireRawPage?: boolean;
+    /**
+     * If true, the analyzer is called automatically. This assumes it runs without
+     * blocking the main thread.
+     */
+    continuous?: boolean;
     init?: (context: AnalyzerContext) => void | Promise<void>;
     run: (context: AnalyzerContext) => undefined | null | AnalyzeResult | AnalyzeResult[] | Promise<undefined | null | AnalyzeResult | AnalyzeResult[]>;
 };

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

@@ -4,9 +4,27 @@
     :title="$t('analyzeSidebarTitle', 'Analyze')"
     :tour-text="$t('analyzeTourText', 'Analyze the content of your page')"
     icon="speedometer"
+    weight="10"
+    :is-loading="isRunning"
   >
+    <template #icon>
+      <AnalyzeIcon :is-running />
+    </template>
+    <div v-if="ui.isProxyMode.value" class="bk-sidebar-padding bk">
+      <InfoBox
+        :text="
+  $t(
+    'analyzeNotAvailableInStructureView',
+    'Analyze is not available in structure view.'
+  )
+"
+        icon="tree"
+      />
+    </div>
     <AnalyzerMain
+      v-else
       :key="animation.renderKey.value"
+      v-model="isRunning"
       :langcode="context.language"
       :analyzers
     />
@@ -14,9 +32,11 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginSidebar } from "#blokkli/plugins";
+import { InfoBox } from "#blokkli/components";
 import AnalyzerMain from "./Main.vue";
+import AnalyzeIcon from "./Icon.vue";
 const { adapter } = defineBlokkliFeature({
   id: "analyze",
   label: "Analyze",
@@ -25,6 +45,8 @@ const { adapter } = defineBlokkliFeature({
   description: "Analyze blocks and page for SEO, accessibility, etc.",
   viewports: []
 });
+const { $t, context, animation, ui } = useBlokkli();
+const isRunning = ref(false);
 function getAdapterAnalyzers() {
   const result = adapter.getAnalyzers();
   if (Array.isArray(result)) {
@@ -38,7 +60,6 @@ function getAdapterAnalyzers() {
   });
 }
 const analyzers = await getAdapterAnalyzers();
-const { $t, context, animation } = useBlokkli();
 </script>
 
 <script>

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

@@ -18,14 +18,16 @@
 </template>
 
 <script setup>
-import { overview } from "artboard-deluxe";
+import {
+  overview
+} from "artboard-deluxe";
 import {
   onBeforeUnmount,
   onMounted,
-  ref,
   useBlokkli,
   computed,
-  useTemplateRef
+  useTemplateRef,
+  watch
 } from "#imports";
 import { ViewportBlockingRect } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -40,9 +42,9 @@ const selectedColor = computed(() => {
   return theme.getColorString("accent", "700", 1);
 });
 const overviewEl = useTemplateRef("overviewEl");
-const overviewArtboardEl = ref();
-const overviewVisibleEl = ref();
-const canvas = ref();
+const overviewArtboardEl = useTemplateRef("overviewArtboardEl");
+const overviewVisibleEl = useTemplateRef("overviewVisibleEl");
+const canvas = useTemplateRef("canvas");
 let pluginOverview = null;
 function updateCanvas() {
   const ctx = canvas.value?.getContext("2d");
@@ -78,6 +80,13 @@ function updateCanvas() {
   }
 }
 onBlokkliEvent("animationFrame", updateCanvas);
+const overviewOptions = computed(() => {
+  return {
+    padding: 15,
+    autoHeight: true,
+    maxHeight: ui.visibleViewportPadded.value.height
+  };
+});
 onMounted(() => {
   if (overviewEl.value && overviewArtboardEl.value && overviewVisibleEl.value) {
     const el = overviewEl.value.$el;
@@ -87,13 +96,18 @@ onMounted(() => {
           element: el,
           artboardElement: overviewArtboardEl.value,
           visibleAreaElement: overviewVisibleEl.value,
-          padding: 20,
-          autoHeight: true
+          ...overviewOptions.value
         })
       );
     }
   }
 });
+watch(overviewOptions, (newOptions) => {
+  if (!pluginOverview) {
+    return;
+  }
+  pluginOverview.options.setMultiple(newOptions);
+});
 onBeforeUnmount(() => {
   if (pluginOverview) {
     props.artboard.removePlugin(pluginOverview);

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue

@@ -71,7 +71,7 @@ import {
   mouse,
   dom as domPlugin
 } from "artboard-deluxe";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 const props = defineProps({
   persist: { type: Boolean, required: true },
   momentum: { type: Boolean, required: true },

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

@@ -13,14 +13,19 @@
 
 <script setup>
 import { scrollbar } from "artboard-deluxe";
-import { onBeforeUnmount, onMounted, ref, useBlokkli } from "#imports";
+import {
+  onBeforeUnmount,
+  onMounted,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
 const props = defineProps({
   artboard: { type: Object, required: true },
   orientation: { type: String, required: true }
 });
 const { ui } = useBlokkli();
-const el = ref();
-const thumb = ref();
+const el = useTemplateRef("el");
+const thumb = useTemplateRef("thumb");
 let scrollbarPlugin = null;
 onMounted(() => {
   if (el.value && thumb.value) {

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

@@ -68,7 +68,7 @@
 
 <script setup>
 import { falsy } from "#blokkli/helpers";
-import { computed, useBlokkli, ref } from "#imports";
+import { computed, useBlokkli, ref, watch } from "#imports";
 import ScheduleSection from "./ScheduleSection.vue";
 import { DialogModal } from "#blokkli/components";
 const props = defineProps({
@@ -142,6 +142,15 @@ const publishOn = ref(
 const unpublishOn = ref(
   getCommonDate(unpublishOnItems.value, props.bundlesWithUnpublish)
 );
+watch(
+  () => [publishOn.value, unpublishOn.value],
+  () => {
+    ui.requireDialogCloseConfirm();
+  },
+  {
+    once: true
+  }
+);
 const tableRows = computed(() => {
   return items.value.map((item) => {
     const bundleDef = types.getBlockBundleDefinition(item.bundle);

package/dist/runtime/components/Edit/Features/Debug/Main.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+import type { DebugLogger } from '#blokkli/helpers/providers/debug';
 type __VLS_Props = {
     logger: DebugLogger;
 };

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

@@ -11,11 +11,11 @@
 </template>
 
 <script setup>
-import { useBlokkli, ref } from "#imports";
+import { useBlokkli, useTemplateRef } from "#imports";
 import { falsy, intersects } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { ui, dom, directive } = useBlokkli();
-const canvasRects = ref(null);
+const canvasRects = useTemplateRef("canvasRects");
 function drawRects(ctx, rects, scale, offset, viewport) {
   for (let i = 0; i < rects.length; i++) {
     const rect = rects[i];

package/dist/runtime/components/Edit/Features/Debug/Section/Logging.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+import type { DebugLogger } from '#blokkli/helpers/providers/debug';
 type __VLS_Props = {
     logger: DebugLogger;
 };

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

@@ -13,10 +13,16 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli, onUnmounted, onMounted } from "#imports";
+import {
+  ref,
+  useBlokkli,
+  onUnmounted,
+  onMounted,
+  useTemplateRef
+} from "#imports";
 import { Loading, BlokkliTransition } from "#blokkli/components";
 const { eventBus } = useBlokkli();
-const iframe = ref(null);
+const iframe = useTemplateRef("iframe");
 const isLoaded = ref(false);
 const emit = defineEmits(["close"]);
 const props = defineProps({

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

@@ -1,13 +1,7 @@
 <template>
   <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
-      <FormOverlay
-        v-if="form"
-        id="edit-form"
-        :bundle="bundle"
-        :title="title"
-        @close="onClose"
-      >
+      <FormOverlay v-if="form" id="edit-form" :bundle :title @close="onClose">
         <FormFrame
           v-if="formUrl"
           :url="formUrl"

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Plaintext/index.vue

@@ -12,7 +12,7 @@
       enterkeyhint="done"
       rows="2"
       v-bind="inputAttributes"
-      @keydown.stop.capture="onKeyDown"
+      @keydown.capture="onKeyDown"
       @blur="onBlur"
       @input="
   $emit('update:modelValue', $event.target.value)

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

@@ -64,7 +64,8 @@ import {
   onMounted,
   onBeforeUnmount,
   useBlokkli,
-  nextTick
+  nextTick,
+  useTemplateRef
 } from "#imports";
 import { falsy } from "#blokkli/helpers";
 import InputPlaintext from "./Plaintext/index.vue";
@@ -108,8 +109,8 @@ const loaded = ref(false);
 const originalText = ref(props.value || "");
 const modelValue = ref("");
 const inputStyle = ref({});
-const form = ref(null);
-const input = ref(null);
+const form = useTemplateRef("form");
+const input = useTemplateRef("input");
 const hasChanged = computed(() => modelValue.value !== originalText.value);
 const itemBundle = computed(() => props.host.bundle);
 const maxlength = computed(() => props.config.maxLength);

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

@@ -19,7 +19,7 @@
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginViewOption } from "#blokkli/plugins";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 defineBlokkliFeature({
   id: "editable-mask",
   icon: "texturebox",

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

@@ -51,7 +51,12 @@
 
 <script setup>
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
-import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+  useTemplateRef
+} from "#imports";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
 import { Icon } from "#blokkli/components";
 defineBlokkliFeature({
@@ -62,7 +67,7 @@ defineBlokkliFeature({
 });
 const { state, eventBus, $t, ui } = useBlokkli();
 const { entity, mutations } = state;
-const buttonEl = ref(null);
+const buttonEl = useTemplateRef("buttonEl");
 const scheduledDate = computed(() => state.publishOptions.value?.publishOn);
 const formattedScheduledDate = computed(() => {
   if (!scheduledDate.value) {

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

@@ -38,7 +38,7 @@
 
 <script setup>
 import onBroadcastEvent from "#blokkli/helpers/composables/onBroadcastEvent";
-import { ref, useBlokkli } from "#imports";
+import { ref, useBlokkli, useTemplateRef } from "#imports";
 import { Icon } from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
 const props = defineProps({
@@ -124,7 +124,7 @@ function onAfterLeave(el) {
     emit("close");
   }
 }
-const iframe = ref(null);
+const iframe = useTemplateRef("iframe");
 const isLoaded = ref(false);
 const isLoading = ref(true);
 const hasPublished = ref(false);

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

@@ -79,7 +79,14 @@ import {
   FormSelect
 } from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
-import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
+import {
+  ref,
+  useBlokkli,
+  useAsyncData,
+  computed,
+  watch,
+  useTemplateRef
+} from "#imports";
 import LibraryListItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -88,7 +95,7 @@ const { $t, adapter, types } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
 const searchText = ref("");
 const selectedBundle = ref("all");
-const listEl = ref(null);
+const listEl = useTemplateRef("listEl");
 const selectedItem = ref("");
 const page = ref(0);
 const allowedBundles = computed(() => {