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

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

@@ -17,16 +17,9 @@
 </template>
 
 <script setup>
-import {
-  useBlokkli,
-  defineBlokkliFeature,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginViewOption } from "#blokkli/plugins";
-const HIDE_CLASS = "bk-hide-non-editable";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 defineBlokkliFeature({
   id: "editable-mask",
   icon: "texturebox",
@@ -36,17 +29,7 @@ defineBlokkliFeature({
 });
 const { $t } = useBlokkli();
 const isActive = ref(false);
-const setRootClass = () => {
-  document.documentElement.classList.remove(HIDE_CLASS);
-  if (isActive.value) {
-    document.documentElement.classList.add(HIDE_CLASS);
-  }
-};
-watch(isActive, setRootClass);
-onMounted(setRootClass);
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(HIDE_CLASS);
-});
+addElementClasses(document.documentElement, "bk-hide-non-editable", isActive);
 </script>
 
 <script>

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

@@ -19,14 +19,14 @@
   />
 
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <FragmentsDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddFragment"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -34,6 +34,7 @@
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { PluginAddAction } from "#blokkli/plugins";
 import FragmentsDialog from "./Dialog/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "fragments",
   icon: "fragment",

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

@@ -52,6 +52,7 @@ import {
 } from "#imports";
 import { PluginSidebar, PluginToolbarButton } from "#blokkli/plugins";
 import HistoryList from "./List/index.vue";
+import { MOUSE_BUTTON } from "#blokkli/helpers/dom";
 const { adapter, settings } = defineBlokkliFeature({
   id: "history",
   icon: "history",
@@ -69,31 +70,45 @@ const { adapter, settings } = defineBlokkliFeature({
     }
   }
 });
-const { state, $t, ui } = useBlokkli();
+const { state, $t, ui, selection, eventBus } = useBlokkli();
 const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
+const mutationsCount = computed(() => mutations.value.length);
 const useMouseForHistory = computed(() => settings.value.useMouseButtons);
 const canUndo = computed(() => currentMutationIndex.value >= 0);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutations.value.length - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1
 );
-function undo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value - 1)
-  );
+const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
+function updateCurrentHistorySelection() {
+  selectionAtHistoryIndex.set(currentMutationIndex.value, [
+    ...selection.uuids.value
+  ]);
 }
-function redo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value + 1)
-  );
+function setSelectionFromHistoryIndex(index) {
+  const selection2 = selectionAtHistoryIndex.get(index);
+  if (selection2) {
+    eventBus.emit("select", selection2);
+  }
+}
+async function setHistoryIndex(newIndex) {
+  updateCurrentHistorySelection();
+  await mutateWithLoadingState(() => adapter.setHistoryIndex(newIndex));
+  setSelectionFromHistoryIndex(newIndex);
+}
+async function undo() {
+  await setHistoryIndex(currentMutationIndex.value - 1);
+}
+async function redo() {
+  await setHistoryIndex(currentMutationIndex.value + 1);
 }
 const onMouseUp = (e) => {
-  if (e.button === 3) {
+  if (e.button === MOUSE_BUTTON.FOURTH) {
     e.preventDefault();
     e.stopPropagation();
     if (canUndo.value) {
       undo();
     }
-  } else if (e.button === 4) {
+  } else if (e.button === MOUSE_BUTTON.FIFTH) {
     e.preventDefault();
     e.stopPropagation();
     if (canRedo.value) {
@@ -108,6 +123,14 @@ const setupMouseListeners = () => {
   }
 };
 watch(useMouseForHistory, setupMouseListeners);
+watch(selection.uuids, updateCurrentHistorySelection);
+watch(mutationsCount, (count) => {
+  for (const [index] of selectionAtHistoryIndex) {
+    if (index >= count) {
+      selectionAtHistoryIndex.delete(index);
+    }
+  }
+});
 onMounted(() => {
   setupMouseListeners();
 });

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

@@ -51,8 +51,12 @@
         }}
       </div>
       <div
-        class="bk-radio-list"
-        :style="{ opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1 }"
+        :style="{
+  opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1,
+  height: '420px',
+  overflow: 'auto',
+  marginTop: '10px'
+}"
       >
         <label v-for="entity in entities" :key="entity.uuid" class="bk-radio">
           <input

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

@@ -13,13 +13,13 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <ExistingDialog
         v-if="showModal"
         @confirm="onSubmit($event.sourceUuid, $event.fields)"
         @cancel="showModal = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -32,6 +32,7 @@ import {
   defineBlokkliFeature
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import ExistingDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
   id: "import-existing",

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;