@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.56

package/dist/runtime/editor/features/droppable-field-edit/Overlay/index.vue

@@ -0,0 +1,547 @@
+<template>
+  <ArtboardTooltip
+    id="droppable-field"
+    :title="title"
+    :anchor-el="element"
+    placement-y="top"
+    class="bk-droppable-field-edit"
+    close-icon="bk_mdi_check"
+    :close-disabled="!canConfirm"
+    @close="save"
+  >
+    <div
+      ref="listEl"
+      class="_bk_w-[680px] _bk_max-h-300 _bk_overflow-y-auto _bk_p-10 _bk_bg-mono-200"
+      @pointerup="onListPointerUp"
+    >
+      <GrowOnly class="_bk_bg-white">
+        <div
+          v-for="(item, i) in localItems"
+          :key="item.key"
+          class="_bk_grid _bk_grid-cols-[minmax(0,1fr)_auto] _bk_items-center _bk_relative _bk_border-b _bk_border-b-mono-200 _bk_last:border-b-0 _bk_bg-white"
+        >
+          <div
+            v-if="i === 0"
+            class="bk-droppable-field-edit-indicator _bk_col-span-2"
+            :class="{
+  'bk-is-visible': dragIndex !== null && dragIndex !== 0 || showExternalDropTargets,
+  'bk-is-active': activeIndicator === 0
+}"
+          />
+          <div
+            class="_bk_flex _bk_items-center _bk_gap-5 _bk_px-8 _bk_py-5 _bk_cursor-grab _bk_touch-none _bk_active:cursor-grabbing _bk_bg-white"
+            :class="{ '_bk_opacity-30': dragIndex === i }"
+            @pointerdown="onPointerDown($event, i)"
+          >
+            <div
+              class="_bk_size-50 _bk_rounded _bk_overflow-hidden _bk_flex _bk_items-center _bk_justify-center _bk_bg-mono-100 _bk_shrink-0 _bk_[&_img]:size-full _bk_[&_img]:object-cover _bk_[&_svg]:size-18 _bk_[&_svg]:fill-current _bk_[&_svg]:text-mono-400"
+            >
+              <img v-if="item.thumbnailSrc" :src="item.thumbnailSrc" alt="" />
+              <Icon v-else name="bk_mdi_image" />
+            </div>
+            <span class="_bk_flex-1 _bk_min-w-0 _bk_truncate _bk_text-sm _bk_text-mono-800">
+              {{ item.label }}
+            </span>
+          </div>
+          <button
+            type="button"
+            class="_bk_size-25 _bk_mr-8 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_shrink-0 _bk_text-mono-400 _bk_hover:bg-red-light _bk_hover:text-red-dark _bk_disabled:opacity-30 _bk_disabled:pointer-events-none _bk_[&_svg]:size-[14px] _bk_[&_svg]:fill-current"
+            @click.stop.prevent="removeItem(i)"
+          >
+            <Icon name="bk_mdi_close" />
+          </button>
+          <div
+            class="bk-droppable-field-edit-indicator _bk_col-span-2"
+            :class="{
+  'bk-is-visible': dragIndex !== null && i + 1 !== dragIndex && i + 1 !== dragIndex + 1 || showExternalDropTargets,
+  'bk-is-active': activeIndicator === i + 1
+}"
+          />
+        </div>
+
+        <div
+          v-if="canAddMore"
+          class="_bk_flex _bk_items-center _bk_gap-5 _bk_p-8 _bk_text-sm _bk_text-mono-400 _bk_[&_svg]:size-18 _bk_[&_svg]:fill-current _bk_[&_svg]:shrink-0"
+        >
+          <Icon name="bk_mdi_image" />
+          {{ $t("droppableFieldDropHint", "Drop image here") }}
+        </div>
+
+        <div
+          v-if="config.required && localItems.length === 0"
+          class="_bk_flex _bk_items-center _bk_gap-5 _bk_p-8 _bk_text-sm _bk_text-red-dark _bk_bg-red-light _bk_[&_svg]:size-18 _bk_[&_svg]:fill-current _bk_[&_svg]:shrink-0"
+        >
+          <Icon name="bk_mdi_warning" />
+          {{
+            $t(
+  "droppableFieldRequiredWarning",
+  "This field is required. Add an item before saving, or press Discard to abort."
+)
+          }}
+        </div>
+      </GrowOnly>
+    </div>
+
+    <div class="bk-artboard-tooltip-info">
+      <button
+        class="bk-artboard-tooltip-info-button bk-scheme-red"
+        :disabled="!hasChanged"
+        @click.prevent="discard"
+      >
+        {{ $t("editableFieldDiscard", "Discard") }}
+      </button>
+      <button
+        :disabled="!undoStack.length"
+        class="bk-artboard-tooltip-info-button bk-scheme-mono _bk_relative _bk_group/tooltip"
+        @click.prevent="undo"
+      >
+        <Icon name="bk_mdi_undo" />
+      </button>
+      <button
+        :disabled="!redoStack.length"
+        class="bk-artboard-tooltip-info-button bk-scheme-mono _bk_relative _bk_group/tooltip"
+        @click.prevent="redo"
+      >
+        <Icon name="bk_mdi_redo" />
+      </button>
+      <div class="_bk_px-10 _bk_text-sm _bk_text-mono-600 _bk_mr-auto">
+        <template v-if="config.cardinality > 0">
+          {{
+            $t("droppableFieldRemaining", "@count remaining").replace(
+  "@count",
+  String(config.cardinality - localItems.length)
+)
+          }}
+        </template>
+        <template v-else>
+          {{
+            $t("droppableFieldItemCount", "@count items").replace(
+  "@count",
+  String(localItems.length)
+)
+          }}
+        </template>
+      </div>
+      <button
+        v-if="canAddMore"
+        class="bk-artboard-tooltip-info-button bk-scheme-mono _bk_relative _bk_group/tooltip"
+        :disabled="ui.hasSidebarLeft.value"
+        @click.prevent="onAddClick"
+      >
+        <Icon name="bk_mdi_image" />
+        {{ $t("droppableFieldOpenLibrary", "Media Library") }}
+      </button>
+    </div>
+  </ArtboardTooltip>
+</template>
+
+<script setup>
+import { ArtboardTooltip, GrowOnly, Icon } from "#blokkli/editor/components";
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { cloneWithInlineStyles } from "#blokkli/editor/helpers/dom";
+const props = defineProps({
+  fieldName: { type: String, required: true },
+  entity: { type: Object, required: true },
+  element: { type: null, required: true },
+  config: { type: Object, required: true }
+});
+const emit = defineEmits(["close"]);
+const { $t, adapter, state, eventBus, keyboard, selection, ui } = useBlokkli();
+const localItems = ref([]);
+const originalItems = ref([]);
+const isClosing = ref(false);
+const undoStack = ref([]);
+const redoStack = ref([]);
+const KEYBOARD_LOCK_ID = "droppable-field-edit";
+function pushUndo() {
+  undoStack.value.push([...localItems.value]);
+  redoStack.value = [];
+}
+function undo() {
+  const prev = undoStack.value.pop();
+  if (prev) {
+    redoStack.value.push([...localItems.value]);
+    localItems.value = prev;
+  }
+}
+function redo() {
+  const next = redoStack.value.pop();
+  if (next) {
+    undoStack.value.push([...localItems.value]);
+    localItems.value = next;
+  }
+}
+function onKeyDown(e) {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.shiftKey) {
+      redo();
+    } else {
+      undo();
+    }
+  }
+}
+const dragIndex = ref(null);
+const dropIndex = ref(null);
+const externalDropIndex = ref(null);
+const listEl = useTemplateRef("listEl");
+const activeIndicator = computed(() => {
+  if (externalDropIndex.value !== null) return externalDropIndex.value;
+  if (dragIndex.value === null || dropIndex.value === null) return null;
+  if (isNoOpDrop(dragIndex.value, dropIndex.value)) return null;
+  return dropIndex.value;
+});
+const title = computed(
+  () => $t("droppableFieldEditLabel", "Edit @label").replace(
+    "@label",
+    props.config.label
+  )
+);
+const hasChanged = computed(() => {
+  if (localItems.value.length !== originalItems.value.length) return true;
+  return localItems.value.some((item, i) => {
+    const orig = originalItems.value[i];
+    if (!orig) return true;
+    return item.id !== orig.id;
+  });
+});
+const canAddMore = computed(() => {
+  if (props.config.cardinality === -1) {
+    return true;
+  }
+  return localItems.value.length < props.config.cardinality;
+});
+const canConfirm = computed(() => {
+  if (!hasChanged.value) return true;
+  return !(props.config.required && localItems.value.length === 0);
+});
+const host = computed(() => ({
+  type: props.entity.type,
+  uuid: props.entity.uuid,
+  fieldName: props.fieldName
+}));
+const showExternalDropTargets = computed(() => {
+  if (!selection.isDragging.value || !canAddMore.value) {
+    return false;
+  }
+  const items = selection.dragItems.value;
+  if (items.length !== 1) {
+    return false;
+  }
+  const item = items[0];
+  if (item.itemType !== "media_library") {
+    return false;
+  }
+  const allowedBundles = props.config.allowed.find(
+    (v) => v.type === "media"
+  )?.bundles;
+  return !!allowedBundles && allowedBundles.includes(item.mediaBundle);
+});
+watch(showExternalDropTargets, (active) => {
+  if (!active) {
+    externalDropIndex.value = null;
+  }
+});
+function onListPointerUp(e) {
+  if (!showExternalDropTargets.value) return;
+  const items = selection.dragItems.value;
+  if (items.length !== 1) return;
+  const item = items[0];
+  if (item.itemType !== "media_library") return;
+  const position = computeDropIndex(e.clientY);
+  eventBus.emit("dragging:end");
+  pushUndo();
+  const newItem = {
+    key: `new-${Date.now()}-${item.mediaId}`,
+    id: item.mediaId,
+    label: item.label,
+    thumbnailSrc: item.thumbnailSrc ?? null,
+    entityType: "media",
+    bundle: item.mediaBundle,
+    targetBundles: item.itemBundles
+  };
+  const newList = [...localItems.value];
+  newList.splice(position, 0, newItem);
+  localItems.value = newList;
+}
+async function loadItems() {
+  const items = await adapter.getDroppableFieldItems({ host: host.value });
+  localItems.value = items.map((item) => ({
+    key: item.id,
+    id: item.id,
+    label: item.label,
+    thumbnailSrc: item.thumbnailSrc ?? null,
+    entityType: item.entityType,
+    bundle: item.bundle,
+    targetBundles: item.targetBundles
+  }));
+  originalItems.value = [...localItems.value];
+}
+function isNoOpDrop(from, to) {
+  return to === from || to === from + 1;
+}
+function computeDropIndex(pointerY) {
+  if (!listEl.value) return 0;
+  const indicators = listEl.value.querySelectorAll(
+    ".bk-droppable-field-edit-indicator"
+  );
+  let closest = 0;
+  let closestDist = Infinity;
+  for (let i = 0; i < indicators.length; i++) {
+    const rect = indicators[i].getBoundingClientRect();
+    const y = rect.top + rect.height / 2;
+    const dist = Math.abs(pointerY - y);
+    if (dist < closestDist) {
+      closestDist = dist;
+      closest = i;
+    }
+  }
+  return closest;
+}
+let ghostEl = null;
+let ghostOffsetX = 0;
+let ghostOffsetY = 0;
+let dragHandleEl = null;
+let draggedOutIndex = null;
+function removeGhost() {
+  if (ghostEl) {
+    ghostEl.remove();
+    ghostEl = null;
+  }
+}
+function isPointerOutsideList(x, y) {
+  const rect = listEl.value?.getBoundingClientRect();
+  if (!rect) return false;
+  return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+}
+function createGhost(from, x, y) {
+  const rect = from.getBoundingClientRect();
+  const clone = cloneWithInlineStyles(from);
+  clone.style.position = "fixed";
+  clone.style.left = `${x - ghostOffsetX}px`;
+  clone.style.top = `${y - ghostOffsetY}px`;
+  clone.style.width = `${rect.width}px`;
+  clone.style.pointerEvents = "none";
+  clone.style.zIndex = "999999";
+  clone.style.background = "white";
+  clone.style.opacity = "0.8";
+  document.body.appendChild(clone);
+  ghostEl = clone;
+}
+function beginDragOut(x, y) {
+  if (dragIndex.value === null || !dragHandleEl) return;
+  const index = dragIndex.value;
+  const item = localItems.value[index];
+  if (!item) return;
+  removeGhost();
+  dragIndex.value = null;
+  dropIndex.value = null;
+  draggedOutIndex = index;
+  const source = dragHandleEl;
+  eventBus.emit("dragging:start", {
+    items: [
+      {
+        itemType: "droppable_field_item",
+        element: () => source,
+        itemBundles: item.targetBundles,
+        entityId: item.id,
+        entityType: item.entityType,
+        entityBundle: item.bundle,
+        label: item.label,
+        thumbnailSrc: item.thumbnailSrc ?? void 0
+      }
+    ],
+    coords: { x, y },
+    mode: "mouse"
+  });
+}
+function resumeInternalDrag(x, y) {
+  if (draggedOutIndex === null || !dragHandleEl) return;
+  const index = draggedOutIndex;
+  draggedOutIndex = null;
+  eventBus.emit("dragging:end");
+  dragIndex.value = index;
+  dropIndex.value = computeDropIndex(y);
+  createGhost(dragHandleEl, x, y);
+}
+const BOUNDARY_HYSTERESIS_MS = 500;
+let pendingSwitch = null;
+let lastPointerX = 0;
+let lastPointerY = 0;
+function cancelPendingSwitch() {
+  if (pendingSwitch !== null) {
+    clearTimeout(pendingSwitch);
+    pendingSwitch = null;
+  }
+}
+function onPointerMove(e) {
+  lastPointerX = e.clientX;
+  lastPointerY = e.clientY;
+  if (dragIndex.value !== null) {
+    const outside = isPointerOutsideList(e.clientX, e.clientY);
+    if (outside) {
+      if (pendingSwitch === null) {
+        pendingSwitch = setTimeout(() => {
+          pendingSwitch = null;
+          beginDragOut(lastPointerX, lastPointerY);
+        }, BOUNDARY_HYSTERESIS_MS);
+      }
+    } else {
+      cancelPendingSwitch();
+    }
+    dropIndex.value = computeDropIndex(e.clientY);
+    if (ghostEl) {
+      ghostEl.style.left = `${e.clientX - ghostOffsetX}px`;
+      ghostEl.style.top = `${e.clientY - ghostOffsetY}px`;
+    }
+    return;
+  }
+  if (draggedOutIndex !== null) {
+    const inside = !isPointerOutsideList(e.clientX, e.clientY);
+    if (inside) {
+      if (pendingSwitch === null) {
+        pendingSwitch = setTimeout(() => {
+          pendingSwitch = null;
+          resumeInternalDrag(lastPointerX, lastPointerY);
+        }, BOUNDARY_HYSTERESIS_MS);
+      }
+    } else {
+      cancelPendingSwitch();
+    }
+    return;
+  }
+  if (showExternalDropTargets.value) {
+    externalDropIndex.value = computeDropIndex(e.clientY);
+  }
+}
+function onDocumentPointerUp() {
+  document.removeEventListener("pointerup", onDocumentPointerUp);
+  cancelPendingSwitch();
+  removeGhost();
+  if (dragIndex.value === null || dropIndex.value === null) {
+    dragIndex.value = null;
+    dropIndex.value = null;
+    return;
+  }
+  const from = dragIndex.value;
+  let to = dropIndex.value;
+  if (!isNoOpDrop(from, to)) {
+    pushUndo();
+    const items = [...localItems.value];
+    const [item] = items.splice(from, 1);
+    if (to > from) {
+      to--;
+    }
+    items.splice(to, 0, item);
+    localItems.value = items;
+  }
+  dragIndex.value = null;
+  dropIndex.value = null;
+}
+function onPointerDown(e, index) {
+  if (e.button !== 0) {
+    return;
+  }
+  e.preventDefault();
+  const target = e.currentTarget;
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
+  const rect = target.getBoundingClientRect();
+  ghostOffsetX = e.clientX - rect.left;
+  ghostOffsetY = e.clientY - rect.top;
+  dragHandleEl = target;
+  dragIndex.value = index;
+  dropIndex.value = index;
+  createGhost(target, e.clientX, e.clientY);
+  document.addEventListener("pointerup", onDocumentPointerUp);
+}
+function removeItem(index) {
+  pushUndo();
+  localItems.value = localItems.value.filter((_, i) => i !== index);
+}
+function onAddClick() {
+  eventBus.emit("sidebar:open", "media_library");
+}
+async function save() {
+  if (isClosing.value) {
+    return;
+  }
+  if (!canConfirm.value) {
+    return;
+  }
+  isClosing.value = true;
+  if (hasChanged.value) {
+    const itemIds = localItems.value.map((item) => item.id);
+    await state.mutateWithLoadingState(
+      () => adapter.updateDroppableField({ host: host.value, itemIds }),
+      $t("droppableFieldSaveFailed", "Failed to save field.")
+    );
+  }
+  emit("close");
+}
+function discard() {
+  if (isClosing.value) {
+    return;
+  }
+  isClosing.value = true;
+  emit("close");
+}
+onBlokkliEvent("window:clickAway", () => {
+  if (selection.isDragging.value) {
+    return;
+  }
+  save();
+});
+onBlokkliEvent("dragging:end", () => {
+  draggedOutIndex = null;
+  cancelPendingSwitch();
+});
+onMounted(() => {
+  keyboard.lockKeyboardEvents(KEYBOARD_LOCK_ID);
+  document.addEventListener("keydown", onKeyDown, true);
+  document.addEventListener("pointermove", onPointerMove);
+  loadItems();
+});
+onBeforeUnmount(() => {
+  keyboard.unlockKeyboardEvents(KEYBOARD_LOCK_ID);
+  document.removeEventListener("keydown", onKeyDown, true);
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onDocumentPointerUp);
+  cancelPendingSwitch();
+  removeGhost();
+});
+</script>
+
+<style>
+.bk.bk-droppable-field-edit {
+  --bk-bg: white;
+  --bk-header-bg: rgb(var(--bk-theme-teal-normal) / 1);
+  --bk-header-text: rgb(var(--bk-theme-teal-dark) / 1);
+  --bk-border: rgb(var(--bk-theme-teal-normal) / 1);
+  --bk-header-hover: rgb(var(--bk-theme-teal-dark) / 0.2);
+}
+
+  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator {
+    height: 4px;
+  }
+
+  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator.bk-is-visible {
+  background-color: rgb(var(--bk-theme-teal-normal) / 0.3);
+}
+
+  .bk.bk-droppable-field-edit .bk-droppable-field-edit-indicator.bk-is-active {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-teal-normal) / var(--bk-tw-bg-opacity, 1));
+}
+</style>

package/dist/runtime/editor/features/droppable-field-edit/Overlay/index.vue.d.ts

@@ -0,0 +1,15 @@
+import type { EntityContext } from '#blokkli/types';
+import type { DroppableFieldConfig } from '#blokkli/editor/features/editable-field/types';
+type __VLS_Props = {
+    fieldName: string;
+    entity: EntityContext;
+    element: HTMLElement;
+    config: DroppableFieldConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/droppable-field-edit/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;