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

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -1,8 +1,8 @@
 <template>
   <ViewportBlockingRect
     :id="storageKey"
-    ref="el"
-    class="bk-sidebar-detached"
+    ref="root"
+    class="bk-sidebar-detached bk-sidebar-inner"
     :class="{ 'bk-is-focused': focusedSidebar === id }"
     :style="style"
     tabindex="10"
@@ -26,10 +26,10 @@
             <Icon :name="isMinimized ? 'window-maximize' : 'window-minimize'" />
           </button>
           <button
-            @click.prevent.stop.capture="$emit('close')"
+            @click.prevent.stop.capture="$emit('attach')"
             @mousedown.capture.stop
           >
-            <Icon name="close" />
+            <Icon :name="region === 'left' ? 'dock-left' : 'dock-right'" />
           </button>
         </div>
       </div>
@@ -65,7 +65,8 @@ import {
   onBeforeUnmount,
   computed,
   watch,
-  useState
+  useState,
+  useTemplateRef
 } from "#imports";
 import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -76,10 +77,15 @@ const props = defineProps({
   icon: { type: null, required: true },
   minWidth: { type: Number, required: false, default: 300 },
   minHeight: { type: Number, required: false, default: 300 },
-  size: { type: Object, required: false, default: void 0 },
-  isLeft: { type: Boolean, required: false }
+  region: { type: String, required: true },
+  size: { type: Object, required: false, default: void 0 }
 });
-defineEmits(["close"]);
+defineEmits(["attach"]);
+const root = useTemplateRef("root");
+function getRootElement() {
+  return root.value?.getRootElement() ?? null;
+}
+const isLeft = computed(() => props.region === "left");
 const { storage, ui, keyboard, selection } = useBlokkli();
 function onPointerMove(e) {
   if (keyboard.isPressingSpace.value || selection.isDragging.value) {
@@ -109,7 +115,7 @@ const offsetX = computed(() => {
   return 0;
 });
 const storedData = storage.use(storageKey, {
-  x: props.isLeft ? 0 : window.innerWidth - 360,
+  x: isLeft.value ? 0 : window.innerWidth - 360,
   y: 50,
   width: 360,
   height: 520,
@@ -205,10 +211,8 @@ const setCoordinates = (newX, newY) => {
 };
 const setSizes = (newWidth, newHeight) => {
   if (newWidth !== void 0) {
-    userWidth.value = Math.min(
-      Math.max(newWidth, props.minWidth),
-      window.innerWidth - 300
-    );
+    const maxWidth = ui.visibleViewport.value.x + ui.visibleViewport.value.width - x.value;
+    userWidth.value = Math.min(Math.max(newWidth, props.minWidth), maxWidth);
   }
   if (newHeight !== void 0) {
     userHeight.value = Math.min(
@@ -241,7 +245,6 @@ const onMouseUp = () => {
   window.removeEventListener("pointerup", onMouseUp, { capture: true });
   updateStored();
 };
-const el = ref(null);
 const recalculatePositions = () => {
   const storedViewportWidth = storedData.value.viewportWidth || window.innerWidth;
   const storedViewportHeight = storedData.value.viewportHeight || window.innerHeight;
@@ -267,4 +270,7 @@ onBeforeUnmount(() => {
   window.removeEventListener("pointermove", onMouseMove, { capture: true });
   window.removeEventListener("pointerup", onMouseUp, { capture: true });
 });
+defineExpose({
+  getRootElement
+});
 </script>

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue.d.ts

@@ -1,16 +1,18 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { SidebarRegion } from '#blokkli/types';
 type __VLS_Props = {
     id: string;
     title: string;
     icon: BlokkliIcon;
     minWidth?: number;
     minHeight?: number;
+    region: SidebarRegion;
     size?: {
         width: number;
         height: number;
     };
-    isLeft?: boolean;
 };
+declare function getRootElement(): HTMLElement | null;
 declare var __VLS_16: {}, __VLS_30: {
     width: number;
     height: number;
@@ -21,10 +23,12 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    getRootElement: typeof getRootElement;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    attach: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((...args: any[]) => any) | undefined;
+    onAttach?: (() => any) | undefined;
 }>, {
     size: {
         width: number;

package/dist/runtime/blokkliPlugins/Sidebar/index.vue

@@ -4,7 +4,10 @@
       :id="'bk-sidebar-button-' + id"
       ref="tourElement"
       class="bk-toolbar-button"
-      :class="[{ 'is-active': activeSidebar === id }, 'bk-is-' + region]"
+      :class="[
+  { 'bk-is-active': activeSidebar === id && !isDisabled },
+  'bk-is-' + region
+]"
       :disabled="isDisabled"
       :style="{ order: weight }"
       @click.prevent.stop="toggleSidebar"
@@ -17,9 +20,9 @@
         <span>{{ title }}</span>
         <ShortcutIndicator
           v-if="keyCode"
-          :meta="meta"
-          :shift="shift"
-          :key-code="keyCode"
+          :meta
+          :shift
+          :key-code
           :label="title"
           @pressed="toggleSidebar"
         />
@@ -35,16 +38,15 @@
   >
     <SidebarDetached
       v-if="isRenderedDetached"
-      :id="id"
-      ref="tourElement"
-      :title="title"
-      :icon="icon"
-      :min-width="minWidth"
-      :min-height="minHeight"
-      :size="size"
-      :is-left="region === 'left'"
-      class="bk-sidebar-inner"
-      @close="onAttach"
+      :id
+      ref="sidebarDetached"
+      :title
+      :icon
+      :min-width
+      :min-height
+      :size
+      :region
+      @attach="onAttachDetached"
     >
       <template #icon>
         <slot name="icon" />
@@ -54,12 +56,12 @@
           <div ref="sidebarContent" class="bk-sidebar-content">
             <slot
               :key="isRenderedDetached ? 'detached' : 'attached'"
-              :scrolled-to-end="scrolledToEnd"
+              :scrolled-to-end
               :is-detached="isRenderedDetached"
-              :width="width"
-              :height="height"
-              :toggle-sidebar="toggleSidebar"
-              :is-resizing="isResizing"
+              :width
+              :height
+              :toggle-sidebar
+              :is-resizing
             />
           </div>
         </div>
@@ -75,7 +77,7 @@
           <span>{{ title }}</span>
           <div v-if="beta" class="bk-beta-indicator">BETA</div>
           <button v-if="!ui.isMobile.value" @click.prevent.stop="onDetach">
-            <Icon name="expand" />
+            <Icon name="dock-window" />
           </button>
           <button @click.prevent.stop="toggleSidebar">
             <Icon name="close" />
@@ -100,7 +102,14 @@
 </template>
 
 <script setup>
-import { computed, watch, ref, useBlokkli } from "#imports";
+import {
+  computed,
+  watch,
+  ref,
+  useBlokkli,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
 import { Icon, ShortcutIndicator, ScrollBoundary } from "#blokkli/components";
 import SidebarDetached from "./Detached/index.vue";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
@@ -127,14 +136,31 @@ const props = defineProps({
 });
 const emit = defineEmits(["updated"]);
 const { storage, state, ui, $t } = useBlokkli();
-const tourElement = ref(null);
+const tourElement = useTemplateRef("tourElement");
+const sidebarDetached = useTemplateRef("sidebarDetached");
 const detachedKey = computed(() => "sidebar:detached:" + props.id);
 const storageKey = computed(() => "sidebar:active:" + props.region);
 const isDetached = storage.use(detachedKey, false, true);
 const isDisabled = computed(
-  () => props.editOnly && state.editMode.value !== "editing" && !props.disabled
+  () => props.editOnly && state.editMode.value !== "editing" || props.disabled
 );
 const activeSidebar = storage.use(storageKey, "", true);
+const isRendered = computed(
+  () => activeSidebar.value === props.id && !isDisabled.value
+);
+watch(
+  isRendered,
+  (isRendered2) => {
+    if (isRendered2) {
+      ui.setActiveSidebar(props.region, props.id);
+    } else {
+      ui.removeActiveSidebar(props.region, props.id);
+    }
+  },
+  {
+    immediate: true
+  }
+);
 const isRenderedDetached = computed(
   () => isDetached.value && !ui.isMobile.value
 );
@@ -148,8 +174,9 @@ const onDetach = () => {
   activeSidebar.value = "";
   emit("updated");
 };
-const onAttach = () => {
+const onAttachDetached = () => {
   isDetached.value = false;
+  activeSidebar.value = props.id;
   emit("updated");
 };
 const toggleSidebar = () => {
@@ -220,9 +247,12 @@ defineTourItem(() => {
     id: "plugin:sidebar:" + props.id,
     title: props.title,
     text: props.tourText,
-    element: () => tourElement.value
+    element: () => tourElement.value ?? sidebarDetached.value?.getRootElement()
   };
 });
+onBeforeUnmount(() => {
+  ui.removeActiveSidebar(props.region, props.id);
+});
 </script>
 
 <script>

package/dist/runtime/blokkliPlugins/Sidebar/index.vue.d.ts

@@ -1,4 +1,5 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { SidebarRegion } from '#blokkli/types';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     id: string;
     title: string;
@@ -8,7 +9,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     weight?: string | number;
     renderAlways?: boolean;
     disabled?: boolean;
-    region?: "left" | "right";
+    region?: SidebarRegion;
     minWidth?: number;
     minHeight?: number;
     size?: {
@@ -32,7 +33,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     weight?: string | number;
     renderAlways?: boolean;
     disabled?: boolean;
-    region?: "left" | "right";
+    region?: SidebarRegion;
     minWidth?: number;
     minHeight?: number;
     size?: {
@@ -55,7 +56,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     tourText: string;
     minWidth: number;
     minHeight: number;
-    region: "left" | "right";
+    region: SidebarRegion;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue

@@ -29,7 +29,7 @@
 
 <script setup>
 import { ShortcutIndicator, Icon } from "#blokkli/components";
-import { ref } from "#imports";
+import { ref, useBlokkli } from "#imports";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
 const props = defineProps({
@@ -47,12 +47,15 @@ const props = defineProps({
   tourText: { type: String, required: false },
   weight: { type: [Number, String], required: false }
 });
+const { debug } = useBlokkli();
+const logger = debug.createLogger("PluginToolbar");
 const emit = defineEmits(["click"]);
 const el = ref(null);
 function onClick() {
   if (props.disabled) {
     return;
   }
+  logger.log(`Click ${props.id}`);
   emit("click");
 }
 defineCommands(() => {

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -34,7 +34,7 @@ import { useBlokkli, computed, ref, watch } from "#imports";
 import { ShortcutIndicator, Icon } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
-const { storage, ui, eventBus } = useBlokkli();
+const { storage, ui, eventBus, debug } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: true },
@@ -48,6 +48,7 @@ const props = defineProps({
   weight: { type: [Number, String], required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
+const logger = debug.createLogger("PluginViewOption");
 const storageKey = "view_option_" + props.id;
 const button = ref(null);
 const isActiveStorage = storage.use(storageKey, false, true);
@@ -67,6 +68,7 @@ emit("update:modelValue", isActiveStorage.value);
 const title = computed(() => isActive.value ? props.titleOff : props.titleOn);
 const onClick = () => {
   isActive.value = !isActive.value;
+  logger.log("Toggle " + props.id, isActive.value);
 };
 defineCommands(() => {
   return {

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

@@ -2,12 +2,10 @@ import PluginAddAction from './AddAction/index.vue.js';
 import PluginBlockIndicator from './BlockIndicator/index.vue.js';
 import PluginContextMenu from './ContextMenu/index.vue.js';
 import PluginDebugOverlay from './DebugOverlay/index.vue.js';
-import PluginDroppableEdit from './DroppableEdit/index.vue.js';
 import PluginItemAction from './ItemAction/index.vue.js';
-import PluginItemDropdown from './ItemDropdown/index.vue.js';
 import PluginMenuButton from './MenuButton/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
 import PluginViewOption from './ViewOption/index.vue.js';
-export { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginDroppableEdit, PluginItemAction, PluginItemDropdown, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };
+export { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/blokkliPlugins/index.js

@@ -2,9 +2,7 @@ import PluginAddAction from "./AddAction/index.vue";
 import PluginBlockIndicator from "./BlockIndicator/index.vue";
 import PluginContextMenu from "./ContextMenu/index.vue";
 import PluginDebugOverlay from "./DebugOverlay/index.vue";
-import PluginDroppableEdit from "./DroppableEdit/index.vue";
 import PluginItemAction from "./ItemAction/index.vue";
-import PluginItemDropdown from "./ItemDropdown/index.vue";
 import PluginMenuButton from "./MenuButton/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
@@ -15,9 +13,7 @@ export {
   PluginBlockIndicator,
   PluginContextMenu,
   PluginDebugOverlay,
-  PluginDroppableEdit,
   PluginItemAction,
-  PluginItemDropdown,
   PluginMenuButton,
   PluginSidebar,
   PluginToolbarButton,

package/dist/runtime/components/Blocks/FromLibrary/index.vue

@@ -4,11 +4,6 @@
     :key="item.uuid"
     v-bind="item"
     :index
-    :data-reusable-bundle="item.bundle"
-    :data-reusable-uuid="item.uuid"
-    :data-bk-library-label="libraryItem?.label"
-    :data-bk-library-item-uuid="libraryItem?.uuid"
-    data-blokkli-is-reusable="true"
     :parent-type
     :is-editing
   />

package/dist/runtime/components/BlokkliEditable.vue

@@ -36,6 +36,9 @@ const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
 if (!entity) {
   throw new Error("Missing entity context.");
 }
+function getValueCallback() {
+  return props.value;
+}
 const renderedValue = computed(() => valueOverride.value || props.value || "");
 const onEditableUpdateValue = (e) => {
   if (e.name === props.name && e.entityUuid === entity.uuid) {
@@ -52,7 +55,9 @@ onMounted(() => {
       root.value,
       props.name,
       entity,
-      "editable"
+      "editable",
+      true,
+      getValueCallback
     );
   }
 });

package/dist/runtime/components/BlokkliField.vue

@@ -42,7 +42,7 @@
       :key="item.uuid + fieldListType"
       v-bind="item"
       :parent-type="isNested ? entity?.bundle : ''"
-      :data-uuid="isPreview ? item.uuid : void 0"
+      :data-bk-uuid="isPreview ? item.uuid : void 0"
       :index="i"
     />
   </component>

package/dist/runtime/components/BlokkliProvider.vue

@@ -6,7 +6,7 @@
     :data-provider-entity-bundle="entityBundle"
     :data-blokkli-provider-active="isInEditor ? 'true' : 'false'"
   >
-    <BlokkliErrorBoundary v-if="isInEditor">
+    <BlokkliRootErrorBoundary v-if="isInEditor">
       <PreviewProvider
         v-if="isPreviewing"
         v-slot="{ mutatedEntity }"
@@ -42,7 +42,7 @@
           :entity="mutatedEntity"
         />
       </EditProvider>
-    </BlokkliErrorBoundary>
+    </BlokkliRootErrorBoundary>
 
     <slot
       v-else
@@ -101,8 +101,8 @@ const PreviewProvider = defineAsyncComponent(
 const EditProvider = defineAsyncComponent(
   () => import("./Edit/EditProvider.vue")
 );
-const BlokkliErrorBoundary = defineAsyncComponent(
-  () => import("./Edit/BlokkliErrorBoundary.vue")
+const BlokkliRootErrorBoundary = defineAsyncComponent(
+  () => import("./Edit/BlokkliRootErrorBoundary.vue")
 );
 const EditIndicator = defineAsyncComponent(
   () => import("./Edit/EditIndicator.vue")

package/dist/runtime/components/Edit/Actions/ItemDropdown.vue

@@ -0,0 +1,66 @@
+<template>
+  <div
+    id="bk-blokkli-item-actions-dropdown"
+    class="bk-blokkli-item-actions-type-dropdown"
+  >
+    <div v-for="group in groups" :key="group.name">
+      <ol>
+        <li v-for="action in group.actions" :key="action.id">
+          <button
+            class="bk-blokkli-item-actions-type-dropdown-button"
+            :disabled="action.enabled === false"
+            @click.prevent="onActionClick(action)"
+          >
+            <div class="bk-blokkli-item-actions-type-dropdown-icon">
+              <Icon v-if="action.icon" :name="action.icon" />
+              <ItemIcon v-else-if="action.bundle" :bundle="action.bundle" />
+            </div>
+            <div>
+              <div>{{ action.label }}</div>
+            </div>
+            <div v-if="action.description" class="bk-tooltip">
+              {{ action.description }}
+            </div>
+          </button>
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { ItemIcon, Icon } from "#blokkli/components";
+const emit = defineEmits(["close"]);
+const { plugins } = useBlokkli();
+function getGroupedActions() {
+  const actions = plugins.getItemDropdownActions();
+  const groups2 = /* @__PURE__ */ new Map();
+  for (const action of actions) {
+    const groupName = action.group;
+    if (!groups2.has(groupName)) {
+      groups2.set(groupName, {
+        name: groupName,
+        weight: action.weight ?? 100,
+        actions: []
+      });
+    }
+    groups2.get(groupName).actions.push(action);
+  }
+  return Array.from(groups2.values()).sort((a, b) => a.weight - b.weight);
+}
+const groups = getGroupedActions();
+function onActionClick(action) {
+  if (action.enabled === false) {
+    return;
+  }
+  action.callback();
+  emit("close");
+}
+</script>
+
+<script>
+export default {
+  name: "EditActionsItemDropdown"
+};
+</script>

package/dist/runtime/components/Edit/Actions/ItemDropdown.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -19,6 +19,7 @@
           <div id="bk-blokkli-item-actions-title">
             <button
               class="bk-blokkli-item-actions-type-button"
+              tabindex="-1"
               :disabled="!shouldRenderButton"
               :class="{
   'is-open': showDropdown,
@@ -60,10 +61,9 @@
               >
               <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
             </button>
-            <div
-              v-show="showDropdown && editingEnabled"
-              id="bk-blokkli-item-actions-dropdown"
-              class="bk-blokkli-item-actions-type-dropdown"
+            <EditActionsItemDropdown
+              v-if="showDropdown && editingEnabled"
+              @close="showDropdown = false"
             />
           </div>
 
@@ -79,36 +79,26 @@
 </template>
 
 <script setup>
-import {
-  watch,
-  ref,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  useTemplateRef
-} from "#imports";
+import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
 import { falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+import EditActionsItemDropdown from "./ItemDropdown.vue";
 const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
-let scrollWidth = 0;
 const el = useTemplateRef("el");
 const { shouldRender } = useStickyToolbar(el, {
   getPlacementY: () => "top",
   shouldUpdate: () => !selection.isChangingOptions.value,
   getHeight: () => ACTIONS_HEIGHT,
-  getWidth: () => scrollWidth,
   getMargin: () => 20,
   allowHorizontalOverflow: true
 });
 const controlsEl = ref(null);
-const mountedPlugins = ref([]);
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
@@ -182,39 +172,7 @@ const itemBundle = computed(() => {
   const bundle = selection.bundles.value[0];
   return types.getBlockBundleDefinition(bundle);
 });
-const observer = new ResizeObserver((entries) => {
-  const size = entries[0]?.contentBoxSize?.[0];
-  if (!size) {
-    return;
-  }
-  scrollWidth = size.inlineSize;
-});
-onMounted(() => {
-  if (controlsEl.value) {
-    observer.observe(controlsEl.value);
-  }
-});
-onBeforeUnmount(() => {
-  if (controlsEl.value) {
-    observer.unobserve(controlsEl.value);
-    observer.disconnect();
-  }
-});
-const shouldRenderButton = computed(
-  () => mountedPlugins.value.some((v) => v.isRendering)
-);
-onBlokkliEvent("plugin:mount", (e) => {
-  if (e.type !== "ItemDropdown") {
-    return;
-  }
-  mountedPlugins.value.push(e);
-});
-onBlokkliEvent("plugin:unmount", (e) => {
-  if (e.type !== "ItemDropdown") {
-    return;
-  }
-  mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id);
-});
+const shouldRenderButton = computed(() => true);
 onBlokkliEvent("action:selected", () => {
   showDropdown.value = false;
 });