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

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,39 +73,40 @@ 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";
-import keyboardProvider from "./../../helpers/keyboardProvider";
-import selectionProvider from "./../../helpers/selectionProvider";
-import editStateProvider from "./../../helpers/stateProvider";
-import typesProvider from "./../../helpers/typesProvider";
+import animationProvider from "../../helpers/providers/animation";
+import keyboardProvider from "../../helpers/providers/keyboard";
+import selectionProvider from "../../helpers/providers/selection";
+import editStateProvider from "../../helpers/providers/state";
+import typesProvider from "../../helpers/providers/types";
 import elementProvider from "./../../helpers/providers/element";
-import domProvider from "./../../helpers/domProvider";
-import textProvider from "./../../helpers/textProvider";
-import storageProvider from "./../../helpers/storageProvider";
-import uiProvider from "./../../helpers/uiProvider";
-import broadcastProvider from "./../../helpers/broadcastProvider";
-import featuresProvider from "./../../helpers/featuresProvider";
-import themeProvider from "./../../helpers/themeProvider";
-import commandsProvider from "./../../helpers/commandsProvider";
-import tourProvider from "./../../helpers/tourProvider";
-import debugProvider from "./../../helpers/debugProvider";
-import definitionProvider from "./../../helpers/definitionProvider";
-import dropAreasProvider from "./../../helpers/dropAreaProvider";
+import domProvider from "../../helpers/providers/dom";
+import textProvider from "../../helpers/providers/texts";
+import storageProvider from "../../helpers/providers/storage";
+import uiProvider from "../../helpers/providers/ui";
+import broadcastProvider from "../../helpers/providers/broadcast";
+import featuresProvider from "../../helpers/providers/features";
+import themeProvider from "../../helpers/providers/theme";
+import commandsProvider from "../../helpers/providers/commands";
+import tourProvider from "../../helpers/providers/tour";
+import debugProvider from "./../../helpers/providers/debug";
+import definitionProvider from "../../helpers/providers/definition";
+import dropAreasProvider from "../../helpers/providers/dropArea";
 import blocksProvider from "./../../helpers/providers/blocks";
-import indicatorsProvider from "./../../helpers/indicatorsProvider";
-import pluginProvider from "./../../helpers/pluginProvider";
+import indicatorsProvider from "../../helpers/providers/indicators";
+import pluginProvider from "../../helpers/providers/plugin";
 import directiveProvider from "./../../helpers/providers/directive";
 import fieldsProvider from "./../../helpers/providers/fields";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
 import {
+  INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_APP,
   INJECT_EDIT_CONTEXT,
   INJECT_EDIT_FIELD_LIST_COMPONENT,
@@ -109,7 +117,9 @@ import {
   INJECT_PROVIDER_KEY
 } from "#blokkli/helpers/symbols";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
+import { allComponents } from "#blokkli-build/chunk-editing";
+import { falsy } from "#blokkli/helpers";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -121,6 +131,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 +162,7 @@ const state = await editStateProvider(
   context,
   $t,
   providerKey,
-  props.permissions
+  props.permissions.filter(falsy)
 );
 const storage = await storageProvider(adapter, context);
 const plugins = pluginProvider();
@@ -163,17 +175,24 @@ const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(props.providerEl, storage, state, context, element);
-const dom = domProvider(ui, debug, definitions, state, element);
+const ui = uiProvider(
+  props.providerEl,
+  storage,
+  context,
+  element,
+  mainLayoutElement,
+  viewportElement
+);
+const dom = domProvider(ui, debug, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
 const selection = selectionProvider(blocks);
-const animation = animationProvider(ui, storage, selection, debug);
-const keyboard = keyboardProvider(animation);
+const keyboard = keyboardProvider();
+const animation = animationProvider(ui, storage, selection, debug, keyboard);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
-const fields = fieldsProvider(state, dom, types);
+const fields = fieldsProvider(dom, types);
 const mutatedEntity = computed(() => {
   return {
     ...props.entity ?? {},
@@ -181,7 +200,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) {
@@ -218,6 +237,7 @@ function setElementSymbolProperty(el, symbol, value) {
   el[symbol] = value;
 }
 provide(INJECT_EDIT_LOGGER, baseLogger);
+provide(INJECT_ALL_COMPONENTS_CHUNK, allComponents);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
 provide(INJECT_IS_EDITING, true);
 provide(INJECT_EDIT_CONTEXT, {

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,53 @@
+<template>
+  <AddListItem
+    :id="action.id"
+    ref="item"
+    :key="action.id"
+    class="bk-is-action"
+    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;

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

@@ -1,19 +1,20 @@
 <template>
   <Sortli v-if="shouldRender" id="blokkli-add-list-blocks" :build-item>
     <AddListItem
-      v-for="(type, i) in sortedList"
+      v-for="type in sortedList"
       v-show="type.isVisible"
       :id="type.id"
-      :key="i + (type.id || 'undefined') + renderKey"
+      :key="type.id"
+      context="add-list-blocks"
       :label="type.label"
       :bundle="type.id"
-      :orientation="ui.addListOrientation.value"
       :disabled="type.isDisabled"
       :color="type.isFavorite ? 'yellow' : 'default'"
       data-element-type="new"
       :data-item-bundle="type.id"
     />
   </Sortli>
+
   <PluginTourItem
     v-if="shouldRender"
     id="block-add-list"
@@ -34,21 +35,22 @@ import { AddListItem, Sortli } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
-import { getFieldKey, onlyUnique } from "#blokkli/helpers";
+import { getFieldKey } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
-  hideDisabledBlocks: { type: Boolean, required: false }
+  hideDisabledBlocks: { type: Boolean, required: false },
+  selectableBundles: { type: Array, required: true },
+  generallyAvailableBundles: { type: Array, required: true }
 });
 const {
   selection,
   storage,
   types,
   context,
-  runtimeConfig,
   ui,
   eventBus,
   $t,
   state,
-  dom,
   definitions,
   blocks
 } = useBlokkli();
@@ -65,47 +67,9 @@ function buildItem(element) {
 }
 const shouldRender = computed(() => state.editMode.value === "editing");
 const searchText = ref("");
-const itemEntityType = runtimeConfig.itemEntityType;
 const favorites = storage.use("blockFavorites", []);
-const getAllowedTypesForSelected = (p) => {
-  if (types.itemBundlesWithNested.includes(p.bundle)) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
-  }
-  if (p.host.type === itemEntityType) {
-    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.host.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
-  } else {
-    return types.getFieldConfig(
-      context.value.entityType,
-      context.value.entityBundle,
-      p.host.fieldName
-    )?.allowedBundles || [];
-  }
-};
-const bundlesForRenderedFields = computed(() => {
-  return dom.registeredFieldTypes.value.flatMap((field) => {
-    return types.getFieldConfig(
-      field.entityType,
-      field.entityBundle,
-      field.fieldName
-    )?.allowedBundles || [];
-  }).filter(onlyUnique);
-});
-const generallyAvailableBundles = computed(
-  () => types.generallyAvailableBundles.filter(
-    (v) => (
-      // Exclude bundles for which no field is currently being rendered.
-      bundlesForRenderedFields.value.includes(v.id)
-    )
-  )
-);
-const selectableBundles = computed(() => {
-  if (selection.items.value.length) {
-    return selection.items.value.flatMap((v) => getAllowedTypesForSelected(v));
-  }
-  return generallyAvailableBundles.value.map((v) => v.id || "");
-});
 function determineVisibility(bundle, label) {
-  if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
+  if (ui.isMobile.value && !props.selectableBundles.includes(bundle)) {
     return false;
   }
   if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
@@ -119,9 +83,9 @@ function determineVisibility(bundle, label) {
   return true;
 }
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value].filter((v) => !isInternalBundle(v.id)).map((v) => {
+  return [...props.generallyAvailableBundles].filter((v) => !isInternalBundle(v.id)).map((v) => {
     const isVisible = determineVisibility(v.id, v.label);
-    const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
+    const isDisabled = !v.id || !props.selectableBundles.includes(v.id);
     return {
       ...v,
       isDisabled,
@@ -134,7 +98,6 @@ const sortedList = computed(() => {
     return a.label.localeCompare(b.label);
   });
 });
-const renderKey = ref("");
 const getBundlesForAppendCommands = () => {
   const item = selection.item.value;
   if (!item) {
@@ -252,7 +215,7 @@ const getInsertCommands = (block) => {
       });
     }
   );
-  if (block.host.type === runtimeConfig.itemEntityType) {
+  if (block.host.type === itemEntityType) {
     const parentBlock = blocks.getBlock(block.host.uuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {

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

@@ -1,6 +1,11 @@
+import type { BlockBundleDefinition } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;