@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -12,7 +12,6 @@
       :option="plugin.option"
       :property="plugin.property"
       :mutated-value="currentValues[plugin.property]"
-      :uuids="uuids"
       class="bk-blokkli-item-options-item"
       :class="{
   'bk-is-disabled': isDisabled(plugin)
@@ -34,7 +33,6 @@
         :option="plugin.option"
         :property="plugin.property"
         :mutated-value="currentValues[plugin.property]"
-        :uuids="uuids"
         class="bk-blokkli-item-options-item"
         :class="{
   'bk-is-disabled': isDisabled(plugin)
@@ -57,6 +55,7 @@ import {
   BK_HIDDEN_GLOBALLY,
   BK_VISIBLE_LANGUAGES
 } from "#blokkli/helpers/symbols";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/runtime-helpers", () => {
   });
@@ -102,7 +101,7 @@ const {
   definitions
 } = useBlokkli();
 const props = defineProps({
-  uuids: { type: Array, required: true },
+  uuids: { type: [Array, String], required: true },
   definition: { type: null, required: true }
 });
 let pointerTimeout = null;
@@ -134,16 +133,18 @@ function stopChangingOptions() {
   if (!selection.isChangingOptions.value) {
     return;
   }
-  props.uuids.forEach((uuid) => {
-    dom.refreshBlockRect(uuid);
-    const block = dom.findBlock(uuid);
-    if (block) {
-      const el = dom.getDragElement(block);
-      if (el) {
-        theme.invalidateCachedStyle(el);
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      dom.refreshBlockRect(uuid);
+      const block = dom.findBlock(uuid);
+      if (block) {
+        const el = dom.getDragElement(block);
+        if (el) {
+          theme.invalidateCachedStyle(el);
+        }
       }
-    }
-  });
+    });
+  }
   selection.isChangingOptions.value = false;
 }
 class OptionCollector {
@@ -205,21 +206,28 @@ function getOptionValue(uuid, key, defaultValue) {
 }
 const currentValues = computed(() => {
   return availableOptions.value.reduce((acc, v) => {
-    const values = props.uuids.map((uuid) => {
-      return JSON.stringify(
-        getRuntimeOptionValue(
+    if (Array.isArray(props.uuids)) {
+      const values = props.uuids.map((uuid) => {
+        return JSON.stringify(
+          getRuntimeOptionValue(
+            v.option,
+            getOptionValue(uuid, v.property, v.option.default)
+          )
+        );
+      }).filter(onlyUnique);
+      if (values.length === 1) {
+        acc[v.property] = getRuntimeOptionValue(
           v.option,
-          getOptionValue(uuid, v.property, v.option.default)
-        )
-      );
-    }).filter(onlyUnique);
-    if (values.length === 1) {
+          getOptionValue(props.uuids[0], v.property, v.option.default)
+        );
+      } else {
+        acc[v.property] = "";
+      }
+    } else {
       acc[v.property] = getRuntimeOptionValue(
         v.option,
-        getOptionValue(props.uuids[0], v.property, v.option.default)
+        getOptionValue("HOST", v.property, v.option.default)
       );
-    } else {
-      acc[v.property] = "";
     }
     return acc;
   }, {});
@@ -234,7 +242,7 @@ function isInternalOption(property) {
   return property === BK_VISIBLE_LANGUAGES || property === BK_HIDDEN_GLOBALLY;
 }
 const visibleOptions = computed(() => {
-  if (!props.definition.editor?.determineVisibleOptions) {
+  if (!("editor" in props.definition) || !props.definition.editor?.determineVisibleOptions) {
     return availableOptions.value.filter(filterInternal);
   }
   const uuid = props.uuids[0];
@@ -244,7 +252,7 @@ const visibleOptions = computed(() => {
     return [];
   }
   const parentType = block?.hostType === runtimeConfig.itemEntityType ? block.parentBlockBundle : void 0;
-  const ctxProps = item?.bundle === "from_library" ? item?.props?.libraryItem?.block?.props : item?.props;
+  const ctxProps = item?.bundle === BUNDLE_FROM_LIBRARY ? item?.props?.libraryItem?.block?.props : item?.props;
   const visibleKeys = (
     // We have to cast to any here because the types are guaranteed to be correct.
     props.definition.editor.determineVisibleOptions({
@@ -289,30 +297,53 @@ const optionGroups = computed(() => {
   );
 });
 function setOptionValue(key, value) {
-  props.uuids.forEach((uuid) => {
-    updated.set(uuid, key, value);
-    if (!state.mutatedOptions[uuid]) {
-      state.mutatedOptions[uuid] = {};
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      updated.set(uuid, key, value);
+      if (!state.mutatedOptions[uuid]) {
+        state.mutatedOptions[uuid] = {};
+      }
+      state.mutatedOptions[uuid][key] = value;
+      eventBus.emit("option:update", { uuid, key, value });
+    });
+  } else {
+    updated.set("HOST", key, value);
+    if (!state.mutatedOptions.HOST) {
+      state.mutatedOptions.HOST = {};
     }
-    state.mutatedOptions[uuid][key] = value;
-    eventBus.emit("option:update", { uuid, key, value });
-  });
+    state.mutatedOptions.HOST[key] = value;
+  }
 }
 onMounted(() => {
-  props.uuids.forEach((uuid) => {
+  if (Array.isArray(props.uuids)) {
+    props.uuids.forEach((uuid) => {
+      availableOptions.value.forEach((option) => {
+        const currentValue = getOptionValue(
+          uuid,
+          option.property,
+          option.option.default
+        );
+        original.set(
+          uuid,
+          option.property,
+          optionValueToStorable(option.option, currentValue)
+        );
+      });
+    });
+  } else {
     availableOptions.value.forEach((option) => {
       const currentValue = getOptionValue(
-        uuid,
+        "HOST",
         option.property,
         option.option.default
       );
       original.set(
-        uuid,
+        "HOST",
         option.property,
         optionValueToStorable(option.option, currentValue)
       );
     });
-  });
+  }
 });
 onBeforeUnmount(() => {
   selection.isChangingOptions.value = false;
@@ -326,7 +357,20 @@ onBeforeUnmount(() => {
   if (!values.length) {
     return;
   }
-  state.mutateWithLoadingState(() => adapter.updateOptions(values));
+  if (Array.isArray(props.uuids)) {
+    state.mutateWithLoadingState(() => adapter.updateOptions(values));
+  } else {
+    state.mutateWithLoadingState(
+      () => adapter.updateHostOptions(
+        values.map((v) => {
+          return {
+            ...v,
+            uuid: void 0
+          };
+        })
+      )
+    );
+  }
 });
 </script>
 

package/dist/runtime/components/Edit/Features/Options/Form/index.vue.d.ts

@@ -1,9 +1,9 @@
-import type { BlockDefinitionInput, FragmentDefinitionInput } from '#blokkli/types';
+import type { BlockDefinitionInput, FragmentDefinitionInput, ProviderDefinitionInput } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
-    uuids: string[];
-    definition: BlockDefinitionInput | FragmentDefinitionInput;
+    uuids: string[] | "provider";
+    definition: BlockDefinitionInput | FragmentDefinitionInput | ProviderDefinitionInput;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    uuids: string[];
-    definition: BlockDefinitionInput | FragmentDefinitionInput;
+    uuids: string[] | "provider";
+    definition: BlockDefinitionInput | FragmentDefinitionInput | ProviderDefinitionInput;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,10 +1,12 @@
 <template>
   <Teleport to="#bk-blokkli-item-actions-controls">
     <OptionsForm
-      v-if="definition && !selection.isDragging.value && !ui.isAnimating.value"
-      :key="uuids.join('-') + state.refreshKey.value + ui.isAnimating.value"
-      :uuids="uuids"
-      :definition="definition"
+      v-if="
+  definition && !selection.isDragging.value && !ui.isAnimating.value && uuids
+"
+      :key="key + state.refreshKey.value + ui.isAnimating.value"
+      :uuids
+      :definition
     />
   </Teleport>
 </template>
@@ -20,9 +22,31 @@ defineBlokkliFeature({
   description: "Renders the options form for one or more blocks.",
   requiredAdapterMethods: ["updateOptions"]
 });
-const { selection, state, ui, definitions } = useBlokkli();
-const uuids = computed(() => selection.blocks.value.map((v) => v.uuid));
+const { selection, state, ui, definitions, context } = useBlokkli();
+const uuids = computed(() => {
+  const uuids2 = selection.blocks.value.map((v) => v.uuid);
+  if (uuids2.length) {
+    return uuids2;
+  } else if (selection.hasHostSelected.value) {
+    return "provider";
+  }
+  return null;
+});
+const key = computed(() => {
+  if (typeof uuids.value === "string") {
+    return uuids.value;
+  } else if (uuids.value && typeof uuids.value === "object") {
+    return uuids.value.join("-");
+  }
+  return "none";
+});
 const definition = computed(() => {
+  if (uuids.value === "provider") {
+    return definitions.getProviderDefinition(
+      context.value.entityType,
+      context.value.entityBundle
+    );
+  }
   const bundles = selection.blocks.value.map((v) => v.reusableBundle || v.itemBundle).filter(onlyUnique);
   if (bundles.length !== 1) {
     return;

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

@@ -16,7 +16,7 @@
   />
 
   <Teleport to="body">
-    <Transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="qrCodeVisible"
         :title="$t('previewDialogTitle', 'Preview with smartphone')"
@@ -35,7 +35,7 @@
       >
         <QrCode v-if="previewGrantUrl" :url="previewGrantUrl" />
       </DialogModal>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -43,7 +43,7 @@
 import { ref, watch, useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import QrCode from "./QrCode/index.vue";
-import { DialogModal } from "#blokkli/components";
+import { DialogModal, BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "preview-grant",
   label: "Preview Grant",

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

@@ -13,6 +13,7 @@
       <FormGroup title="Einstellungen" horizontal>
         <FormItem v-if="publishOptions?.hasRevisionLogMessage">
           <FormTextarea
+            id="revision-message"
             v-model="revisionMessage"
             label="Protokollnachricht der Revision"
             description="Beschreiben Sie kurz die vorgenommenen Änderungen"

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

@@ -10,7 +10,7 @@
     @click="onMenuClick"
   />
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <PublishDialog
         v-if="showDialog"
         v-model:states="additionalEditStates"
@@ -19,7 +19,7 @@
         @close="showDialog = false"
         @submit="onSubmit"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -32,6 +32,7 @@ import {
   ref
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import PublishDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
   id: "publish",

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

@@ -13,7 +13,7 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <DialogModal
         v-if="showConfirm"
         :title="$t('revertDialogTitle', 'Irrevocably discard changes')"
@@ -28,14 +28,14 @@
         @submit="onSubmit"
         @cancel="showConfirm = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, ref, defineBlokkliFeature } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
-import { DialogModal } from "#blokkli/components";
+import { DialogModal, BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "revert",
   icon: "revert",

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-search">
+    <BlokkliTransition name="search">
       <div
         v-if="isRendered"
         v-show="isVisible"
@@ -15,7 +15,7 @@
           @close="isVisible = false"
         />
       </div>
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
   <PluginToolbarButton
     id="search"
@@ -37,6 +37,7 @@
 <script setup>
 import { nextTick, ref, useBlokkli, defineBlokkliFeature } from "#imports";
 import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineBlokkliFeature({

package/dist/runtime/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    ref="button"
+    class="bk-selection-add-button bk-is-field"
+    tabindex="-1"
+    :data-title="title"
+    :style="{
+  transform: `translate(${left}px, ${top}px)`,
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+    @click="onClick"
+  >
+    <div>
+      <Icon name="plus" />
+    </div>
+  </button>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, ref, useTemplateRef } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  fieldKey: { type: null, required: true },
+  containerRect: { type: [Object, null], required: true },
+  title: { type: String, required: true }
+});
+const emit = defineEmits(["click"]);
+const { dom } = useBlokkli();
+const button = useTemplateRef("button");
+const left = ref(0);
+const top = ref(0);
+const isVisible = ref(false);
+const BUTTON_SIZE = 30;
+function onClick() {
+  if (button.value) {
+    emit("click", button.value);
+  }
+}
+onBlokkliEvent("canvas:draw", () => {
+  if (!props.fieldKey || !props.containerRect) {
+    isVisible.value = false;
+    return;
+  }
+  const fieldRect = dom.getFieldRect(props.fieldKey);
+  if (!fieldRect) {
+    isVisible.value = false;
+    return;
+  }
+  left.value = Math.round(fieldRect.x + fieldRect.width / 2 - BUTTON_SIZE / 2);
+  top.value = Math.round(fieldRect.y + fieldRect.height / 2 - BUTTON_SIZE / 2);
+  isVisible.value = true;
+});
+</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    fieldKey: string | undefined;
+    containerRect: {
+        x: number;
+        y: number;
+    } | null;
+    title: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (element: HTMLElement) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((element: HTMLElement) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    ref="el"
+    class="bk bk-selection-add-overlay"
+    :class="'bk-is-' + placementY"
+    :style="{
+  '--bk-caret-x': caretX
+}"
+  >
+    <div class="bk bk-selection-add-overlay-inner bk-caret-tooltip-inner">
+      <div v-if="label" class="bk-selection-add-overlay-label">
+        <div v-html="label" />
+        <button @click="$emit('close')">
+          <Icon name="close" />
+        </button>
+      </div>
+      <div
+        ref="listEl"
+        class="bk-selection-add-overlay-list bk-scrollbar-dark"
+        @wheel="onWheel"
+      >
+        <button
+          v-for="item in items"
+          :key="item.bundle"
+          tabindex="-1"
+          @click.prevent="$emit('select', item.bundle)"
+        >
+          <AddListItemIcon
+            :bundle="item.bundle"
+            :color="item.isFavorite ? 'yellow' : 'default'"
+          />
+          <span>{{ item.label }}</span>
+        </button>
+        <button
+          v-for="action in actions"
+          :key="'action:' + action.id"
+          tabindex="-1"
+          @click.prevent="$emit('action', action.id)"
+        >
+          <AddListItemIcon :icon="action.icon" :color="action.color" />
+          <span>{{ action.title }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+import {
+  useTemplateRef,
+  useBlokkli,
+  computed,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { Icon, AddListItemIcon } from "#blokkli/components";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
+const props = defineProps({
+  bundles: { type: Array, required: true },
+  anchorEl: { type: null, required: true },
+  label: { type: String, required: false }
+});
+defineEmits(["select", "action", "close"]);
+const el = useTemplateRef("el");
+const listEl = useTemplateRef("listEl");
+let hasScrollbar = null;
+const { types, ui, plugins, storage } = useBlokkli();
+const favorites = storage.use("blockFavorites", []);
+const { placementY, caretX } = useStickyToolbar(el, {
+  getAnchorElement() {
+    return props.anchorEl;
+  },
+  getPlacementY() {
+    return "auto";
+  },
+  getPlacementX() {
+    return "center";
+  },
+  getCaretWidth() {
+    return 30;
+  }
+});
+const items = computed(() => {
+  return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
+    return {
+      bundle,
+      label: types.getBlockBundleDefinition(bundle)?.label ?? bundle,
+      isFavorite: favorites.value.includes(bundle)
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const actions = computed(() => {
+  return plugins.getAddActions().filter((action) => {
+    if (!action.itemBundle) {
+      return true;
+    }
+    return props.bundles.includes(action.itemBundle);
+  });
+});
+const onWheel = (e) => {
+  if (hasScrollbar === null) {
+    const element = listEl.value;
+    hasScrollbar = element && element.scrollHeight > element.clientHeight;
+  }
+  if (hasScrollbar) {
+    e.stopPropagation();
+  }
+};
+onMounted(() => {
+  ui.hasAddTooltipOpen.value = true;
+});
+onBeforeUnmount(() => {
+  ui.hasAddTooltipOpen.value = false;
+});
+</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    bundles: string[];
+    anchorEl: HTMLElement;
+    label?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => void;
+    action: (id: string) => void;
+    close: () => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSelect?: ((id: string) => any) | undefined;
+    onAction?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;