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

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

@@ -2,12 +2,14 @@ declare const _default: import("vue").DefineComponent<{
     label: string;
     property: string;
     modelValue?: string;
+    required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
     modelValue?: string;
+    required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,20 +1,11 @@
-import { Icon } from '#blokkli/components';
 type __VLS_Props = {
     label: string;
     isActive: boolean;
 };
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_5) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<__VLS_Props, {
-    Icon: typeof Icon;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{

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

@@ -4,7 +4,11 @@
       v-if="showLabel"
       :class="isGrouped ? 'bk-blokkli-item-options-item-label' : 'bk-tooltip'"
     >
-      <span>{{ label }}</span>
+      <div class="bk-is-label">
+        <span>{{ label }}</span>
+        <span v-if="hoveredOption">:&nbsp;{{ hoveredOption }}</span>
+      </div>
+      <span v-if="description">{{ description }}</span>
     </div>
     <div
       class="bk-blokkli-item-options-item-content"
@@ -15,6 +19,7 @@
       <OptionRadios
         v-if="option.type === 'radios'"
         v-model="value"
+        v-model:hovered="hoveredOption"
         :label="label"
         :options="option.options"
         :property="property"
@@ -74,7 +79,7 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
+import { ref, computed, useBlokkli } from "#imports";
 import OptionRadios from "./Radios/index.vue";
 import OptionCheckbox from "./Checkbox/index.vue";
 import OptionCheckboxes from "./Checkboxes/index.vue";
@@ -94,9 +99,9 @@ const props = defineProps({
   option: { type: Object, required: true },
   property: { type: String, required: true },
   mutatedValue: { type: null, required: true },
-  uuids: { type: Array, required: true },
   isGrouped: { type: Boolean, required: false }
 });
+const hoveredOption = ref("");
 const showLabel = computed(() => {
   if (props.isGrouped) {
     if (props.option.type === "checkbox") {
@@ -108,6 +113,12 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
+const description = computed(
+  () => $blokkliText(
+    `blockOption_${props.property}_description`,
+    props.option.description
+  )
+);
 const checkboxOptions = computed(() => {
   if (props.option.type !== "checkboxes") {
     return [];

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

@@ -3,7 +3,6 @@ type __VLS_Props = {
     option: BlockOptionDefinition;
     property: string;
     mutatedValue: any;
-    uuids: string[];
     isGrouped?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {

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

@@ -6,8 +6,13 @@
   'bk-is-grid': displayAs === 'grid',
   'bk-is-icons': displayAs === 'icons'
 }"
+    @mouseleave="onMouseLeave"
   >
-    <label v-for="option in mappedOptions" :key="option.key">
+    <label
+      v-for="option in mappedOptions"
+      :key="option.key"
+      @mouseenter="active = option.label"
+    >
       <div v-bind="getInputWrapperAttributes(option.value)">
         <input
           :id="option.key"
@@ -15,7 +20,7 @@
           :name="property"
           :value="option.key"
           :checked="modelValue === option.key"
-          @change="$emit('update:modelValue', option.key)"
+          @change="value = option.key"
         />
         <div
           v-if="
@@ -51,7 +56,7 @@
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
+import { computed, useBlokkli, onMounted } from "#imports";
 import { Icon } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 const { $t, state } = useBlokkli();
@@ -59,37 +64,45 @@ const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
   displayAs: { type: String, required: false },
-  options: { type: Object, required: true },
-  modelValue: { type: String, required: false }
+  options: { type: Object, required: true }
 });
-const emit = defineEmits(["update:modelValue"]);
-function getInputWrapperAttributes(value) {
-  if (props.displayAs === "colors" && typeof value !== "string") {
-    if (value.hex && value.hex.indexOf("#") === 0) {
+const value = defineModel({ type: String, ...{
+  default: ""
+} });
+const active = defineModel("hovered", { type: String, ...{
+  default: ""
+} });
+function getInputWrapperAttributes(value2) {
+  if (props.displayAs === "colors" && typeof value2 !== "string") {
+    if (value2.hex && value2.hex.indexOf("#") === 0) {
       return {
-        style: "background-color: " + value.hex
+        style: "background-color: " + value2.hex
       };
-    } else if (value.class) {
+    } else if (value2.class) {
       return {
-        class: value.class
+        class: value2.class
       };
     }
   }
   return {};
 }
 const mappedOptions = computed(() => {
-  return Object.entries(props.options).map(([key, value]) => {
-    return { key, value };
+  return Object.entries(props.options).map(([key, value2]) => {
+    const label = typeof value2 === "string" ? value2 : value2.label;
+    return { key, value: value2, label };
   });
 });
-const setValue = (value) => {
-  emit("update:modelValue", value);
-};
+const selectedLabel = computed(() => {
+  return mappedOptions.value.find((v) => v.key === value.value)?.label;
+});
+function onMouseLeave() {
+  active.value = selectedLabel.value ?? "";
+}
 defineCommands(() => {
   if (state.editMode.value !== "editing") {
     return;
   }
-  return mappedOptions.value.filter((v) => v.key !== props.modelValue).map((option) => {
+  return mappedOptions.value.filter((v) => v.key !== value.value).map((option) => {
     return {
       id: "options:" + props.property + option.key,
       label: $t(
@@ -98,10 +111,15 @@ defineCommands(() => {
       ).replace("@option", props.label).replace("@value", option.key),
       group: "selection",
       icon: "form",
-      callback: () => setValue(option.key)
+      callback: () => {
+        value.value = option.key;
+      }
     };
   });
 });
+onMounted(() => {
+  active.value = selectedLabel.value ?? "";
+});
 </script>
 
 <script>

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

@@ -9,9 +9,12 @@ declare const _default: import("vue").DefineComponent<{
         icon?: string;
         label: string;
     }>;
+} & {
     modelValue?: string;
+    hovered?: string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+    "update:modelValue": (value: string) => any;
+    "update:hovered": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
@@ -23,8 +26,11 @@ declare const _default: import("vue").DefineComponent<{
         icon?: string;
         label: string;
     }>;
+} & {
     modelValue?: string;
+    hovered?: string;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:hovered"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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,8 @@ import {
   BK_HIDDEN_GLOBALLY,
   BK_VISIBLE_LANGUAGES
 } from "#blokkli/helpers/symbols";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
+import { itemEntityType } from "#blokkli-build/config";
 if (import.meta.hot) {
   import.meta.hot.accept("#blokkli/runtime-helpers", () => {
   });
@@ -95,14 +95,14 @@ const {
   eventBus,
   state,
   selection,
-  runtimeConfig,
   dom,
   theme,
   context,
-  definitions
+  definitions,
+  blocks
 } = useBlokkli();
 const props = defineProps({
-  uuids: { type: Array, required: true },
+  uuids: { type: [Array, String], required: true },
   definition: { type: null, required: true }
 });
 let pointerTimeout = null;
@@ -134,17 +134,20 @@ 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 = blocks.getBlock(uuid);
+      if (block) {
+        const el = dom.getDragElement(block);
+        if (el) {
+          theme.invalidateCachedStyle(el);
+        }
       }
-    }
-  });
+    });
+  }
   selection.isChangingOptions.value = false;
+  eventBus.emit("option:finish-change");
 }
 class OptionCollector {
   options;
@@ -205,21 +208,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,17 +244,17 @@ 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];
   const item = state.getFieldListItem(uuid);
-  const block = selection.blocks.value.find((v) => v.uuid === uuid);
+  const block = selection.items.value.find((v) => v.uuid === uuid);
   if (!item) {
     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 parentType = block?.host.type === itemEntityType ? block.parentBlockBundle : void 0;
+  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({
@@ -252,7 +262,7 @@ const visibleOptions = computed(() => {
       parentType,
       props: ctxProps,
       entity: context.value,
-      fieldListType: block?.hostFieldListType || "default"
+      fieldListType: block?.fieldListType ?? "default"
     })
   );
   return availableOptions.value.filter(
@@ -289,30 +299,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 +359,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,17 +22,39 @@ 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.items.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(() => {
-  const bundles = selection.blocks.value.map((v) => v.reusableBundle || v.itemBundle).filter(onlyUnique);
+  if (uuids.value === "provider") {
+    return definitions.getProviderDefinition(
+      context.value.entityType,
+      context.value.entityBundle
+    );
+  }
+  const bundles = selection.items.value.map((v) => v.library?.reusableBundle || v.bundle).filter(onlyUnique);
   if (bundles.length !== 1) {
     return;
   }
   const bundle = bundles[0];
   if (bundle === "blokkli_fragment") {
-    const fragments = selection.blocks.value.filter(
-      (v) => v.itemBundle === "blokkli_fragment"
+    const fragments = selection.items.value.filter(
+      (v) => v.bundle === "blokkli_fragment"
     );
     const fragmentNames = fragments.map((v) => {
       const props = state.getFieldListItem(v.uuid)?.props;
@@ -43,10 +67,10 @@ const definition = computed(() => {
     }
     return definitions.getFragmentDefinition(fragmentNames[0]);
   }
-  return selection.blocks.value.map((block) => {
+  return selection.items.value.map((block) => {
     return definitions.getBlockDefinition(
       bundle,
-      block.hostFieldListType,
+      block.fieldListType,
       block.parentBlockBundle
     );
   }).filter(falsy).at(0);

package/dist/runtime/components/Edit/Features/Ownership/Renderer.vue

@@ -0,0 +1,35 @@
+<template>
+  <Banner
+    id="ownership"
+    icon="user"
+    :text
+    :button="$t('ownershipTakeOwnership', 'Assign to me')"
+    @click="$emit('submit')"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
+defineEmits(["submit"]);
+const { state, $t, ui } = useBlokkli();
+const name = computed(() => {
+  const v = state.owner.value?.name;
+  if (v) {
+    return `<strong>${v}</strong>`;
+  }
+  return "";
+});
+const text = computed(() => {
+  return $t(
+    "ownershipNote",
+    "This page is currently being edited by @name. Changes can only be made by one person at a time."
+  ).replace("@name", name.value);
+});
+onMounted(() => {
+  ui.setSelectionColor("ownership", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("ownership");
+});
+</script>

package/dist/runtime/components/Edit/Features/Ownership/Renderer.vue.d.ts

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

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

@@ -1,26 +1,12 @@
 <template>
-  <Teleport to="body">
-    <div
-      v-if="!state.owner.value?.currentUserIsOwner"
-      class="bk-owner-indicator"
-    >
-      <p
-        v-html="
-  $t(
-    'ownershipNote',
-    'This page is currently being edited by @name. Changes can only be made by one person at a time.'
-  ).replace('@name', name)
-"
-      />
-      <button class="bk-button bk-is-danger" @click="takeOwnership">
-        {{ $t("ownershipTakeOwnership", "Assign to me") }}
-      </button>
-    </div>
+  <Teleport to="#bk-banner-list">
+    <Renderer v-if="shouldRender" @submit="takeOwnership" />
   </Teleport>
 </template>
 
 <script setup>
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import Renderer from "./Renderer.vue";
 const { adapter } = defineBlokkliFeature({
   id: "ownership",
   icon: "user",
@@ -29,18 +15,14 @@ const { adapter } = defineBlokkliFeature({
   description: "Renders a large button to take ownership of the current edit state."
 });
 const { state, $t } = useBlokkli();
+const shouldRender = computed(
+  () => !state.owner.value?.currentUserIsOwner && state.permissions.value.includes("edit")
+);
 const takeOwnership = () => state.mutateWithLoadingState(
   () => adapter.takeOwnership(),
   $t("ownershipError", "Error in assigning"),
   $t("ownershipSuccess", "You are now the owner.")
 );
-const name = computed(() => {
-  const v = state.owner.value?.name;
-  if (v) {
-    return `<strong>${v}</strong>`;
-  }
-  return "";
-});
 </script>
 
 <script>