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

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

@@ -1,40 +1,22 @@
 <template>
   <PluginContextMenu
-    :id="'add_list_item_' + id"
+    :id="'add_list_item_' + context + id"
     ref="el"
     tag="button"
-    class="bk-list-item"
-    data-element-type="action"
+    class="bk-add-item"
     :menu="menu"
     :data-sortli-id="id"
     :class="[
   {
     'bk-is-disabled': disabled
   },
-  'bk-is-' + orientation,
   'bk-is-' + color
 ]"
   >
-    <div class="bk-list-item-inner">
-      <AddListItemIcon :orientation :color :bundle :icon />
-      <div
-        class="bk-list-item-label"
-        :class="{
-  'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value
-}"
-      >
-        <span>{{ label }}</span>
-      </div>
+    <div class="bk-add-item-icon">
+      <ItemIconBox :color :bundle :icon />
     </div>
-
-    <div
-      class="bk-add-list-drop bk-drop-element"
-      :class="['bk-is-' + color, { 'bk-is-dark': isDark }]"
-    >
-      <div class="bk-add-list-drop-icon">
-        <ItemIcon v-if="bundle" :bundle="bundle" />
-        <Icon v-else-if="icon" :name="icon" />
-      </div>
+    <div class="bk-add-item-label">
       <span>{{ label }}</span>
     </div>
   </PluginContextMenu>
@@ -42,13 +24,13 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import { ItemIcon, Icon, AddListItemIcon } from "#blokkli/components";
+import { ItemIconBox } from "#blokkli/components";
 import { PluginContextMenu } from "#blokkli/plugins";
-const { ui, storage, $t } = useBlokkli();
+const { storage, $t } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
+  context: { type: String, required: true },
   label: { type: String, required: true },
-  orientation: { type: String, required: true },
   color: { type: String, required: false, default: "default" },
   bundle: { type: String, required: false, default: "" },
   icon: { type: null, required: false, default: void 0 },
@@ -58,9 +40,6 @@ const props = defineProps({
 const el = ref(null);
 const favorites = storage.use("blockFavorites", []);
 const isFavorite = computed(() => favorites.value.includes(props.id));
-const isDark = computed(
-  () => props.orientation !== "sidebar" && props.color === "default"
-);
 const toggleFavorite = () => {
   if (favorites.value.includes(props.id)) {
     favorites.value = favorites.value.filter((v) => v !== props.id);

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

@@ -1,9 +1,8 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { AddListOrientation } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     id: string;
+    context: string;
     label: string;
-    orientation: AddListOrientation;
     color?: "rose" | "lime" | "default" | "yellow" | "accent";
     bundle?: string;
     icon?: BlokkliIcon;
@@ -13,8 +12,8 @@ declare const _default: import("vue").DefineComponent<{
     getElement: () => HTMLElement | null;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     id: string;
+    context: string;
     label: string;
-    orientation: AddListOrientation;
     color?: "rose" | "lime" | "default" | "yellow" | "accent";
     bundle?: string;
     icon?: BlokkliIcon;

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

@@ -9,8 +9,7 @@
     @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,22 @@
 </template>
 
 <script setup>
-import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
+import {
+  useBlokkli,
+  onMounted,
+  computed,
+  ref,
+  onBeforeUnmount,
+  watch
+} from "#imports";
 import { Icon } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { ui, element } = useBlokkli();
 const emit = defineEmits(["submit", "cancel"]);
 const rootEl = ref(null);
 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 +79,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 {};
@@ -100,6 +113,14 @@ const getFocusableElements = () => {
     `Dialog "${props.title}" getFocusableElements`
   );
 };
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    emit("cancel");
+  }
+});
+onBlokkliEvent("overlay:close", () => {
+  emit("cancel");
+});
 const onKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
@@ -129,8 +150,8 @@ const onKeyDown = (e) => {
     e.preventDefault();
   }
 };
+ui.openDialog({ id: props.id, alignment: "center" });
 onMounted(() => {
-  ui.hasDialogOpen.value = true;
   const focusableElements = getFocusableElements();
   const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
   if (bestMatch) {
@@ -138,7 +159,7 @@ onMounted(() => {
   }
 });
 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/EditProvider.vue

@@ -1,35 +1,43 @@
 <template>
+  <Teleport to="#nuxt-root">
+    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
+  </Teleport>
+
   <Teleport to="body">
     <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
       <Loading v-if="showLoading" screen />
     </Transition>
 
-    <div id="bk-banner-container">
-      <div id="bk-banner-list" class="bk">
-        <Banner
-          v-if="!state.stateAvailable.value"
-          id="state-unavailable"
-          icon="sad"
-          scheme="red"
-          :text="stateNotAvailableText"
-        />
-        <Banner
-          v-if="viewOnlyBanner"
-          id="view-only"
-          :icon="viewOnlyBanner.icon"
-          scheme="yellow"
-          :text="viewOnlyBanner.text"
-        />
+    <div ref="mainLayoutElement" class="bk-main-layout">
+      <Toolbar @loaded="toolbarLoaded = true" />
+      <div ref="viewportElement" class="bk bk-viewport">
+        <Messages />
       </div>
-      <Messages />
+      <Actions v-if="!isInitializing" />
+      <div id="bk-banner-container" class="bk">
+        <div id="bk-banner-list">
+          <Banner
+            v-if="!state.stateAvailable.value"
+            id="state-unavailable"
+            icon="sad"
+            scheme="red"
+            :text="stateNotAvailableText"
+          />
+          <Banner
+            v-if="viewOnlyBanner"
+            id="view-only"
+            :icon="viewOnlyBanner.icon"
+            scheme="yellow"
+            :text="viewOnlyBanner.text"
+          />
+        </div>
+      </div>
+      <Konami />
+      <SystemRequirements />
+      <Overlay />
     </div>
   </Teleport>
-  <Teleport to="#nuxt-root">
-    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
-  </Teleport>
-  <Actions v-if="!isInitializing" />
-  <Toolbar @loaded="toolbarLoaded = true" />
-  <AppMenu v-if="toolbarLoaded" />
+
   <Indicators />
   <Features
     v-if="isReady"
@@ -37,12 +45,10 @@
     @loaded="featuresLoaded = true"
   />
   <AnimationCanvas v-if="!isInitializing" />
-  <Konami />
-  <SystemRequirements />
   <slot
     v-if="!isInitializing"
     :key="definitions.renderKey.value"
-    :mutated-entity="mutatedEntity"
+    :mutated-entity
   />
 </template>
 
@@ -58,7 +64,8 @@ import {
   nextTick,
   inject,
   onUnmounted,
-  watch
+  watch,
+  useTemplateRef
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
@@ -66,10 +73,10 @@ import Loading from "./Loading/index.vue";
 import Messages from "./Messages/index.vue";
 import Features from "./Features/index.vue";
 import Indicators from "./Indicators/index.vue";
-import AppMenu from "./AppMenu/index.vue";
 import DraggableList from "./DraggableList.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
+import Overlay from "./Overlay/index.vue";
 import Konami from "./Konami/index.vue";
 import Banner from "./Banner/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
@@ -110,6 +117,7 @@ import {
 } from "#blokkli/helpers/symbols";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { falsy } from "#blokkli/helpers";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -121,6 +129,8 @@ const props = defineProps({
   providerEl: { type: null, required: true }
 });
 defineSlots();
+const mainLayoutElement = useTemplateRef("mainLayoutElement");
+const viewportElement = useTemplateRef("viewportElement");
 const entityContext = computed(() => {
   return {
     uuid: props.entityUuid,
@@ -150,7 +160,7 @@ const state = await editStateProvider(
   context,
   $t,
   providerKey,
-  props.permissions
+  props.permissions.filter(falsy)
 );
 const storage = await storageProvider(adapter, context);
 const plugins = pluginProvider();
@@ -163,7 +173,14 @@ const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(props.providerEl, storage, state, context, element);
+const ui = uiProvider(
+  props.providerEl,
+  storage,
+  context,
+  element,
+  mainLayoutElement,
+  viewportElement
+);
 const dom = domProvider(ui, debug, definitions, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
@@ -181,7 +198,7 @@ const mutatedEntity = computed(() => {
   };
 });
 const isReady = computed(
-  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
+  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value && mainLayoutElement.value
 );
 watch(isReady, (v) => {
   if (v) {

package/dist/runtime/components/Edit/EditProvider.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         entityBundle: string;
         language?: string;
         isolate?: boolean;
-        permissions: EditPermission[];
+        permissions: Array<EditPermission | null>;
         providerEl: HTMLElement;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;

package/dist/runtime/components/Edit/Features/AddList/Actions/Action.vue

@@ -0,0 +1,52 @@
+<template>
+  <AddListItem
+    :id="action.id"
+    ref="item"
+    :key="action.id"
+    context="add-list-actions"
+    :label="action.title"
+    :bundle="action.itemBundle"
+    :icon="action.icon"
+    :color="action.color"
+    :disabled
+    no-context-menu
+  />
+</template>
+
+<script setup>
+import { AddListItem } from "#blokkli/components";
+import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+import { computed, useTemplateRef, useBlokkli } from "#imports";
+const props = defineProps({
+  action: { type: Object, required: true },
+  selectableBundles: { type: Array, required: true }
+});
+const { selection } = useBlokkli();
+const item = useTemplateRef("item");
+const bundleDisabled = computed(() => {
+  if (props.action.itemBundle) {
+    return !props.selectableBundles.includes(props.action.itemBundle);
+  }
+  return false;
+});
+const disabled = computed(() => {
+  if (bundleDisabled.value) {
+    return true;
+  }
+  if (props.action.enabled && selection.item.value) {
+    return !props.action.enabled(selection.item.value);
+  }
+  return false;
+});
+defineTourItem(() => {
+  if (!props.action.description) {
+    return;
+  }
+  return {
+    id: "plugin:add_action:" + props.action.id,
+    title: props.action.title,
+    text: props.action.description,
+    element: () => item.value?.getElement()
+  };
+});
+</script>

package/dist/runtime/components/Edit/Features/AddList/Actions/Action.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AddAction } from '#blokkli/types';
+type __VLS_Props = {
+    action: AddAction;
+    selectableBundles: string[];
+};
+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>;
+export default _default;

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

@@ -0,0 +1,41 @@
+<template>
+  <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction">
+    <ActionButton
+      v-for="action in actions"
+      :key="action.id"
+      :action="action"
+      :selectable-bundles
+    />
+  </Sortli>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Sortli } from "#blokkli/components";
+import ActionButton from "./Action.vue";
+defineProps({
+  selectableBundles: { type: Array, required: true }
+});
+const { plugins } = useBlokkli();
+const actions = computed(() => {
+  return plugins.get("addAction");
+});
+function buildItemAction(element) {
+  const actionType = element.dataset.sortliId;
+  if (!actionType) {
+    return;
+  }
+  const itemBundle = element.dataset.itemBundle;
+  const action = actions.value.find((v) => v.id === actionType);
+  if (!action) {
+    return;
+  }
+  return {
+    itemType: "action",
+    action,
+    actionType,
+    itemBundle,
+    element: () => element
+  };
+}
+</script>

package/dist/runtime/components/Edit/Features/AddList/Actions/index.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    selectableBundles: string[];
+};
+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>;
+export default _default;