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

package/dist/runtime/components/Edit/AppMenu/MenuButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <button
+    :id="'bk-menu-list-button-' + id"
+    class="bk-menu-list-button"
+    :disabled="disabled"
+    :class="type ? 'bk-is-' + type : ''"
+    @click.prevent.stop="onClick"
+  >
+    <div class="bk-menu-list-icon">
+      <slot>
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <strong>{{ title }}</strong>
+    <span>{{ description }}</span>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/components";
+defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  type: { type: String, required: false }
+});
+const emit = defineEmits(["click"]);
+function onClick() {
+  emit("click");
+}
+</script>
+
+<script>
+export default {
+  name: "MenuButton"
+};
+</script>

package/dist/runtime/{blokkliPlugins/MenuButton/index.vue.d.ts → components/Edit/AppMenu/MenuButton.vue.d.ts}

@@ -6,8 +6,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
-    weight?: number;
-    secondary?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,8 +15,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
-    weight?: number;
-    secondary?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -1,53 +1,75 @@
 <template>
-  <Teleport to="#bk-toolbar-menu">
-    <div class="bk-toolbar-menu">
-      <button class="bk-toolbar-menu-button" @click.prevent.stop="onClick">
-        <Icon name="menu" />
+  <BlokkliTransition name="menu">
+    <div v-if="menuOpen" class="bk bk-menu-list">
+      <button :class="{ 'bk-is-active': menuOpen }" @click="closeMenu">
+        <Icon name="close" />
       </button>
-    </div>
-  </Teleport>
-  <Teleport to="body">
-    <BlokkliTransition name="fade">
-      <div
-        v-if="menuOpen"
-        class="bk bk-menu-overlay bk-overlay"
-        @click="ui.menu.close()"
-      />
-    </BlokkliTransition>
-    <BlokkliTransition name="menu">
-      <div v-show="menuOpen" class="bk bk-menu-list">
-        <button :class="{ 'bk-is-active': menuOpen }" @click="ui.menu.close">
-          <Icon name="close" />
-        </button>
-        <div class="bk-menu-list-inner">
-          <div id="bk-menu-primary" />
-          <div id="bk-menu-secondary" />
-          <aside class="bk-menu-meta">
-            <div class="bk-menu-meta-logo">
-              <Icon name="logo" />
-              <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
-            </div>
-
-            <div>
-              <a href="https://www.blokk.li" target="_blank">blokk.li</a>
-            </div>
-          </aside>
+      <div class="bk-menu-list-inner">
+        <div id="bk-menu-primary">
+          <MenuButton
+            v-for="button in primaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
+        </div>
+        <div id="bk-menu-secondary">
+          <MenuButton
+            v-for="button in secondaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
         </div>
+        <aside class="bk-menu-meta">
+          <div class="bk-menu-meta-logo">
+            <Icon name="logo" />
+            <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
+          </div>
+
+          <div>
+            <a href="https://www.blokk.li" target="_blank">blokk.li</a>
+          </div>
+        </aside>
       </div>
-    </BlokkliTransition>
-  </Teleport>
+    </div>
+  </BlokkliTransition>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import { Icon, BlokkliTransition } from "#blokkli/components";
 import { blokkliVersion } from "#blokkli-build/config";
-const { ui, eventBus } = useBlokkli();
-const menuOpen = computed(() => ui.menu.isOpen.value);
-const onClick = () => {
-  eventBus.emit("select", "");
-  ui.menu.open();
-};
+import MenuButton from "./MenuButton.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const DIALOG_MENU = "menu";
+const { ui, plugins } = useBlokkli();
+const menuOpen = computed(() => ui.currentDialog.value?.id === DIALOG_MENU);
+function closeMenu() {
+  ui.closeDialog(DIALOG_MENU);
+}
+onBlokkliEvent("overlay:close", closeMenu);
+const allButtons = computed(() => plugins.get("menuButton"));
+const primaryButtons = computed(() => {
+  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+const secondaryButtons = computed(() => {
+  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+function onClick(button) {
+  button.callback();
+  closeMenu();
+}
 </script>
 
 <script>

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

@@ -6,6 +6,7 @@
     :style="{
   '--bk-caret-x': caretX
 }"
+    @keydown="onKeyDown"
   >
     <div class="bk bk-artboard-tooltip-inner bk-caret-tooltip-inner">
       <div class="bk-artboard-tooltip-header">
@@ -31,6 +32,7 @@ import {
 } from "#imports";
 import { Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useFocusTrap from "#blokkli/helpers/composables/useFocusTrap";
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
@@ -41,6 +43,10 @@ const props = defineProps({
 });
 const emit = defineEmits(["close"]);
 const el = useTemplateRef("el");
+const { onKeyDown } = useFocusTrap({
+  container: el,
+  debugLabel: "ArtboardTooltip: " + props.id
+});
 const { ui } = useBlokkli();
 const { placementY, caretX } = useStickyToolbar(el, {
   getAnchorElement() {

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

@@ -30,7 +30,7 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli, ref } from "#imports";
+import { computed, useBlokkli, useTemplateRef } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
 import { falsy } from "#blokkli/helpers";
@@ -59,7 +59,7 @@ const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );
 const { types, runtimeConfig, definitions, dom } = useBlokkli();
-const root = ref(null);
+const root = useTemplateRef("root");
 const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value));
 const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value);
 const definition = definitions.getBlockDefinition(

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

@@ -16,6 +16,9 @@ const isLocked = defineModel({ type: Boolean, ...{ default: false } });
 const emit = defineEmits(["error"]);
 onErrorCaptured((err) => {
   errors.value.push(err);
+  if (import.meta.dev) {
+    console.error(err);
+  }
   emit("error", err);
   globalBlokkli.pushMessage({
     type: "error",

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

@@ -45,13 +45,16 @@
 <script setup>
 import { computed, ref, onErrorCaptured } from "#imports";
 import { Icon } from "#blokkli/components";
-import textProvider from "#blokkli/helpers/textProvider";
+import textProvider from "#blokkli/helpers/providers/texts";
 import { useGlobalBlokkliObject } from "#blokkli/helpers/composables/useGlobalBlokkliObject";
 const errors = ref([]);
 const $t = textProvider();
 const globalBlokkli = useGlobalBlokkliObject();
 onErrorCaptured((err) => {
   errors.value.push(err);
+  if (import.meta.dev) {
+    console.error(err);
+  }
   globalBlokkli.pushMessage({
     type: "error",
     name: "RootErrorBoundary",

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

@@ -3,14 +3,13 @@
     ref="rootEl"
     class="bk bk-dialog bk-control"
     @wheel.passive.stop
-    @keydown.stop="onKeyDown"
+    @keydown.stop="handleKeyDown"
     @keyup.stop
     @touchstart.passive.stop
     @touchmove.stop
     @touchend.stop
   >
-    <div class="bk-dialog-background" @click="$emit('cancel')" />
-    <div class="bk-dialog-inner" :style="style">
+    <div class="bk-dialog-inner" :style>
       <div class="bk bk-overlay-header">
         <Icon v-if="icon" :name="icon" />
         <h3>{{ title }}</h3>
@@ -53,13 +52,21 @@
 </template>
 
 <script setup>
-import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
+import {
+  useBlokkli,
+  computed,
+  useTemplateRef,
+  onBeforeUnmount,
+  watch
+} from "#imports";
 import { Icon } from "#blokkli/components";
-import { modulo } from "#blokkli/helpers";
-const { ui, element } = useBlokkli();
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import useFocusTrap from "#blokkli/helpers/composables/useFocusTrap";
+const { ui } = useBlokkli();
 const emit = defineEmits(["submit", "cancel"]);
-const rootEl = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const props = defineProps({
+  id: { type: String, required: true },
   title: { type: String, required: true },
   lead: { type: String, required: false, default: "" },
   width: { type: [Number, String], required: false, default: 600 },
@@ -71,6 +78,11 @@ const props = defineProps({
   icon: { type: null, required: false, default: void 0 },
   fullScreen: { type: Boolean, required: false }
 });
+watch(ui.currentDialog, (dialog) => {
+  if (dialog?.id !== props.id) {
+    emit("cancel");
+  }
+});
 const style = computed(() => {
   if (ui.isMobile.value) {
     return {};
@@ -90,55 +102,29 @@ const style = computed(() => {
     width: props.width
   };
 });
-const getFocusableElements = () => {
-  if (!rootEl.value) {
-    return [];
-  }
-  return element.queryAll(
-    rootEl.value,
-    "input,select,button,textarea",
-    `Dialog "${props.title}" getFocusableElements`
-  );
-};
-const onKeyDown = (e) => {
+const { onKeyDown } = useFocusTrap({
+  container: rootEl,
+  debugLabel: `Dialog "${props.title}"`
+});
+const handleKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
     emit("cancel");
     return;
   }
-  if (!rootEl.value || e.code !== "Tab") {
-    return;
-  }
-  const prev = e.shiftKey;
-  const focusableElements = getFocusableElements().filter((el) => {
-    const style2 = window.getComputedStyle(el);
-    if (style2.pointerEvents === "none") {
-      return false;
-    }
-    return !el.disabled;
-  });
-  const activeIndex = Math.max(
-    focusableElements.findIndex((el) => document.activeElement === el),
-    0
-  );
-  const delta = prev ? -1 : 1;
-  const indexToFocus = modulo(activeIndex + delta, focusableElements.length);
-  const elementToFocus = focusableElements[indexToFocus];
-  if (elementToFocus) {
-    elementToFocus.focus();
-    e.preventDefault();
-  }
+  onKeyDown(e);
 };
-onMounted(() => {
-  ui.hasDialogOpen.value = true;
-  const focusableElements = getFocusableElements();
-  const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
-  if (bestMatch) {
-    bestMatch.focus();
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    emit("cancel");
   }
 });
+onBlokkliEvent("overlay:close", () => {
+  emit("cancel");
+});
+ui.openDialog({ id: props.id, alignment: "center" });
 onBeforeUnmount(() => {
-  ui.hasDialogOpen.value = false;
+  ui.closeDialog(props.id);
 });
 </script>
 

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

@@ -1,5 +1,6 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
     title: string;
     lead?: string;
     width?: number | string;
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     cancel: (...args: any[]) => void;
     submit: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
+    id: string;
     title: string;
     lead?: string;
     width?: number | string;

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

@@ -15,7 +15,7 @@
     >
       <BlokkliItem
         v-for="(item, i) in list"
-        :key="item.uuid + fieldListType + definitions.renderKey.value"
+        :key="item.uuid + fieldListType + definitions.renderKey.value + i"
         class="bk-field-list-item"
         :uuid="item.uuid"
         :bundle="item.bundle"
@@ -56,12 +56,12 @@
 import {
   computed,
   useBlokkli,
-  ref,
   onMounted,
   onBeforeUnmount,
   useAttrs,
   provide,
-  watch
+  watch,
+  useTemplateRef
 } from "#imports";
 import BlokkliItem from "./../BlokkliItem.vue";
 import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
@@ -70,7 +70,7 @@ import {
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
 const { dom, selection, definitions } = useBlokkli();
-const root = ref(null);
+const root = useTemplateRef("root");
 const props = defineProps({
   name: { type: String, required: true },
   fieldKey: { type: String, required: true },
@@ -116,13 +116,16 @@ const data = computed(() => {
     dropAlignment: props.dropAlignment ?? null
   };
 });
-watch(root, function(newRoot) {
-  if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
+watch(
+  () => root.value,
+  function(newRoot) {
+    if (newRoot instanceof HTMLElement) {
+      dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
+    }
   }
-});
+);
 onMounted(() => {
-  if (root.value) {
+  if (root.value instanceof HTMLElement) {
     dom.registerField(props.entity, props.name, root.value, data.value);
   }
 });

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

@@ -21,8 +21,15 @@
 </template>
 
 <script setup>
-import textProvider from "#blokkli/helpers/textProvider";
-import { ref, onMounted, onBeforeUnmount, useState, computed } from "#imports";
+import textProvider from "#blokkli/helpers/providers/texts";
+import {
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  useState,
+  computed,
+  useTemplateRef
+} from "#imports";
 import "#blokkli-build/styles.css";
 import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
 const props = defineProps({
@@ -47,8 +54,8 @@ const label = computed(() => {
 });
 defineEmits(["edit"]);
 const isHovering = ref(false);
-const button = ref(null);
-const overlay = ref(null);
+const button = useTemplateRef("button");
+const overlay = useTemplateRef("overlay");
 const targetElement = ref(null);
 const indicatorRegistry = useState(
   "blokkliEditIndicators",