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

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

@@ -32,13 +32,13 @@
 "
     icon="reusable"
     color="lime"
-    item-bundle="from_library"
+    :item-bundle="BUNDLE_FROM_LIBRARY"
     :disabled="!fromLibraryAllowedInList"
     @placed="placedAction = $event"
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up" :duration="300">
+    <BlokkliTransition name="slide-up">
       <ReusableDialog
         v-if="showReusableDialog && selectedItem"
         :uuid="selectedItem.uuid"
@@ -46,18 +46,18 @@
         @confirm="onMakeReusable"
         @cancel="showReusableDialog = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 
   <Teleport to="body">
-    <transition appear name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddLibraryItem"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
   <EditReusable
     v-if="editingLibraryItem"
@@ -73,7 +73,9 @@ import { PluginItemAction, PluginAddAction } from "#blokkli/plugins";
 import ReusableDialog from "./ReusableDialog/index.vue";
 import LibraryDialog from "./LibraryDialog/index.vue";
 import EditReusable from "./EditReusable/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { adapter } = defineBlokkliFeature({
   id: "library",
   icon: "reusable",
@@ -126,7 +128,7 @@ const itemBundle = computed(
   () => selectedItem?.value ? types.getBlockBundleDefinition(selectedItem.value.itemBundle) : null
 );
 const isReusable = computed(
-  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === "from_library")
+  () => selection.blocks.value.length && selection.blocks.value.every((v) => v.itemBundle === BUNDLE_FROM_LIBRARY)
 );
 async function onMakeReusable(label) {
   showReusableDialog.value = false;
@@ -143,15 +145,15 @@ async function onMakeReusable(label) {
   eventBus.emit("select:end");
 }
 const isSupportedOnEntity = computed(
-  () => types.generallyAvailableBundles.find((v) => v.id === "from_library")
+  () => types.generallyAvailableBundles.find((v) => v.id === BUNDLE_FROM_LIBRARY)
 );
 const fromLibraryAllowedInList = computed(() => {
   if (!selection.uuids.value.length) {
     return !!types.generallyAvailableBundles.find(
-      (v) => v.id === "from_library"
+      (v) => v.id === BUNDLE_FROM_LIBRARY
     );
   }
-  return types.allowedTypesInList.value.includes("from_library");
+  return types.allowedTypesInList.value.includes(BUNDLE_FROM_LIBRARY);
 });
 const canMakeReusable = computed(
   () => !isReusable.value && itemBundle?.value?.allowReusable && fromLibraryAllowedInList.value

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -35,14 +35,11 @@
             </option>
           </select>
         </label>
-        <label
+        <FormToggle
           v-else-if="filter.filter.type === 'checkbox'"
-          class="bk-checkbox-toggle"
-        >
-          <input v-model="filterValues[filter.key]" type="checkbox" />
-          <div />
-          <span>{{ filter.filter.label }}</span>
-        </label>
+          v-model="filterValues[filter.key]"
+          :label="filter.filter.label"
+        />
       </div>
     </div>
     <div
@@ -83,7 +80,7 @@ import {
   watch,
   nextTick
 } from "#imports";
-import { Sortli, Icon, Pagination } from "#blokkli/components";
+import { Sortli, Icon, Pagination, FormToggle } from "#blokkli/components";
 import Item from "./Item.vue";
 import { buildDraggableItem, falsy } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/fragment.glsl

@@ -1,6 +1,6 @@
 #version 300 es
 
-precision mediump float;
+precision highp float;
 
 in float v_intersecting;
 in float v_is_select_rect;

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/index.vue

@@ -25,6 +25,7 @@ const props = defineProps({
   isPressingControl: { type: Boolean, required: true },
   gl: { type: null, required: true }
 });
+const startTimestamp = Date.now();
 defineEmits(["select"]);
 class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
   getBufferInfo(offset, scale) {
@@ -95,7 +96,7 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new MultiSelectRectangleBufferCollector(props.gl);
-const thick = 100;
+const thick = 300;
 collector.addRectangle(
   {
     width: 1e3,
@@ -180,7 +181,6 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-const now = Date.now();
 onBlokkliEvent("canvas:draw", (e) => {
   mouseX = e.mouseX;
   mouseY = e.mouseY;
@@ -188,7 +188,7 @@ onBlokkliEvent("canvas:draw", (e) => {
   const { nested } = collector.getSelectedUuids(check);
   const shouldSelectAll = props.isPressingControl || !nested.length;
   props.gl.useProgram(programInfo.program);
-  const time = (Date.now() - now) / 1e3;
+  const time = (Date.now() - startTimestamp) / 1e3;
   setUniforms(programInfo, uniforms);
   setUniforms(programInfo, {
     u_select_all: shouldSelectAll ? 1 : 0,
@@ -223,7 +223,12 @@ function getUuidsToSelect() {
 }
 onBeforeUnmount(() => {
   props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-  eventBus.emit("select:end", getUuidsToSelect());
+  const diff = Date.now() - startTimestamp;
+  if (diff > 175) {
+    eventBus.emit("select:end", getUuidsToSelect());
+  } else {
+    eventBus.emit("select:end");
+  }
   logger.log("MultiSelectOverlay unmounted");
 });
 </script>

package/dist/runtime/components/Edit/Features/MultiSelect/Overlay/vertex.glsl

@@ -1,6 +1,6 @@
 #version 300 es
 
-precision mediump float;
+precision highp float;
 
 in vec3 a_position;
 in vec4 a_quad;

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

@@ -32,24 +32,18 @@ const onSelect = (uuids) => {
   shouldRender.value = false;
   eventBus.emit("select:end", uuids);
 };
-let startTimeout = null;
-onBlokkliEvent("mouse:down", (e) => {
-  if (!enabled.value || e.type !== "mouse" || selection.isDragging.value) {
+const startTimeout = null;
+onBlokkliEvent("multi-select:start", (e) => {
+  if (!enabled.value) {
     return;
   }
-  if (keyboard.isPressingSpace.value || keyboard.isPressingControl.value) {
-    return;
-  }
-  clearTimeout(startTimeout);
   downX.value = e.x;
   downY.value = e.y;
-  startTimeout = setTimeout(() => {
-    eventBus.emit("select:start", {
-      uuids: [],
-      mode: "mouse"
-    });
-    shouldRender.value = true;
-  }, 70);
+  eventBus.emit("select:start", {
+    uuids: [],
+    mode: "mouse"
+  });
+  shouldRender.value = true;
 });
 onBlokkliEvent("mouse:up", () => {
   shouldRender.value = false;

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

@@ -1,6 +1,6 @@
 <template>
   <label class="bk-blokkli-item-options-checkbox">
-    <input v-model="checked" type="checkbox" class="peer" />
+    <input v-model="checked" type="checkbox" class="peer" :required />
     <div />
     <span>{{ label }}</span>
   </label>
@@ -13,7 +13,8 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false }
+  modelValue: { type: String, required: false },
+  required: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const checked = computed({

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/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,7 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
+const description = computed(() => 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,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;