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

package/dist/runtime/components/Edit/Actions/index.vue

@@ -3,7 +3,7 @@
     <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
       <div
         v-show="
-  selection.blocks.value.length && !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value
+  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasAddTooltipOpen.value
 "
         ref="el"
         class="bk-blokkli-item-actions-inner"
@@ -29,7 +29,13 @@
 }"
               @click.prevent="showDropdown = !showDropdown"
             >
-              <div class="bk-blokkli-item-actions-title-icon">
+              <div v-if="shouldRenderButton" class="bk-tooltip">
+                {{ $t("actionsDropdownToolip", "Further actions") }}
+              </div>
+              <div
+                v-show="!hasSelectedHost"
+                class="bk-blokkli-item-actions-title-icon"
+              >
                 <Icon v-if="ui.isTransforming.value" name="loader" />
                 <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
                 <Icon v-else name="selection" />
@@ -54,6 +60,7 @@
           <div id="bk-blokkli-item-actions-after" />
 
           <div
+            v-show="selection.blocks.value.length"
             id="bk-blokkli-item-actions"
             class="bk-blokkli-item-actions-buttons"
           />
@@ -70,23 +77,39 @@ import {
   computed,
   useBlokkli,
   onMounted,
-  onBeforeUnmount
+  onBeforeUnmount,
+  useTemplateRef
 } from "#imports";
-import { onlyUnique, findIdealRectPosition, falsy } from "#blokkli/helpers";
+import { onlyUnique, falsy } from "#blokkli/helpers";
 import { ItemIcon, Icon } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { selection, $t, types, state, ui, dom, definitions, debug } = useBlokkli();
+import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
-const el = ref(null);
+let scrollWidth = 0;
+const el = useTemplateRef("el");
+const { shouldRender } = useStickyToolbar(el, {
+  getPlacementY: () => "top",
+  shouldUpdate: () => !selection.isChangingOptions.value,
+  getHeight: () => ACTIONS_HEIGHT,
+  getWidth: () => scrollWidth,
+  getMargin: () => 20
+});
 const controlsEl = ref(null);
 const mountedPlugins = ref([]);
 const showDropdown = ref(false);
+const hasAnythingSelected = computed(
+  () => selection.hasHostSelected.value || !!selection.blocks.value.length
+);
 watch(selection.blocks, () => {
   showDropdown.value = false;
 });
+watch(selection.hasHostSelected, () => {
+  showDropdown.value = false;
+});
 const bundleIcon = computed(() => {
   if (itemBundle.value?.id === "from_library") {
     const reusableBundle = selection.blocks.value[0]?.reusableBundle;
@@ -96,14 +119,15 @@ const bundleIcon = computed(() => {
   }
   return itemBundle.value?.id;
 });
+const hasSelectedHost = computed(() => {
+  return selection.blocks.value.length === 0;
+});
 const title = computed(() => {
   if (ui.transformLabel.value) {
     return ui.transformLabel.value;
-  }
-  if (debug.isEnabled.value && selection.uuids.value.length === 1) {
+  } else if (debug.isEnabled.value && selection.uuids.value.length === 1) {
     return selection.uuids.value[0];
-  }
-  if (itemBundle.value) {
+  } else if (itemBundle.value) {
     if (itemBundle.value.id === "blokkli_fragment") {
       const fragments = selection.uuids.value.map((uuid) => {
         const item = state.getFieldListItem(uuid);
@@ -127,6 +151,8 @@ const title = computed(() => {
       }
     }
     return itemBundle.value.label;
+  } else if (!selection.blocks.value.length) {
+    return state.entity.value.label;
   }
   return $t("multipleItemsLabel", "Items");
 });
@@ -140,21 +166,6 @@ const itemBundle = computed(() => {
   const bundle = itemBundleIds.value[0];
   return types.getBlockBundleDefinition(bundle);
 });
-const limitPlacedRect = (rect, padding) => {
-  return {
-    width: rect.width,
-    height: rect.height,
-    x: Math.min(
-      Math.max(rect.x, padding.x),
-      padding.x + padding.width - rect.width
-    ),
-    y: Math.min(
-      Math.max(padding.y, rect.y),
-      padding.height + padding.y - rect.height
-    )
-  };
-};
-let scrollWidth = 0;
 const observer = new ResizeObserver((entries) => {
   const size = entries[0]?.contentBoxSize?.[0];
   if (!size) {
@@ -173,48 +184,6 @@ onBeforeUnmount(() => {
     observer.disconnect();
   }
 });
-onBlokkliEvent("canvas:draw", () => {
-  if (!selection.blocks.value.length || ui.isMobile.value || selection.isChangingOptions.value) {
-    return;
-  }
-  let minX = 0;
-  let minY = 0;
-  const rects = selection.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy);
-  if (!rects.length) {
-    return;
-  }
-  const offset = ui.artboardOffset.value;
-  const scale = ui.artboardScale.value;
-  for (let i = 0; i < rects.length; i++) {
-    const { x, y } = rects[i];
-    const rectX = (x + offset.x / scale) * scale;
-    const rectY = (y + offset.y / scale) * scale;
-    if (i === 0 || rectX < minX) {
-      minX = rectX;
-    }
-    if (i === 0 || rectY < minY) {
-      minY = rectY;
-    }
-  }
-  const padding = ui.visibleViewportPadded.value;
-  const rect = limitPlacedRect(
-    {
-      x: minX - 5 * Math.min(scale, 1),
-      y: minY - ACTIONS_HEIGHT - 15 * Math.min(scale, 1),
-      width: scrollWidth,
-      height: ACTIONS_HEIGHT
-    },
-    padding
-  );
-  const ideal = findIdealRectPosition(
-    ui.viewportBlockingRects.value,
-    rect,
-    padding
-  );
-  if (el.value) {
-    el.value.style.transform = ui.isMobile.value ? "" : `translate3d(${ideal.x}px, ${ideal.y}px, 0)`;
-  }
-});
 const shouldRenderButton = computed(
   () => mountedPlugins.value.some((v) => v.isRendering)
 );
@@ -230,6 +199,9 @@ onBlokkliEvent("plugin:unmount", (e) => {
   }
   mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id);
 });
+onBlokkliEvent("action:selected", () => {
+  showDropdown.value = false;
+});
 watch(ui.isTransforming, function(isTransforming) {
   if (isTransforming) {
     showDropdown.value = false;

package/dist/runtime/components/Edit/AddListItem/index.vue

@@ -16,10 +16,7 @@
 ]"
   >
     <div class="bk-list-item-inner">
-      <div class="bk-list-item-icon">
-        <Icon v-if="icon" :name="icon" />
-        <ItemIcon v-else-if="bundle" :bundle="bundle" />
-      </div>
+      <AddListItemIcon :orientation :color :bundle :icon />
       <div
         class="bk-list-item-label"
         :class="{
@@ -45,7 +42,7 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import { ItemIcon, Icon } from "#blokkli/components";
+import { ItemIcon, Icon, AddListItemIcon } from "#blokkli/components";
 import { PluginContextMenu } from "#blokkli/plugins";
 const { ui, storage, $t } = useBlokkli();
 const props = defineProps({

package/dist/runtime/components/Edit/AddListItem/index.vue.d.ts

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     noContextMenu?: boolean;
 }> & Readonly<{}>, {
     bundle: string;
-    color: "rose" | "lime" | "default" | "yellow" | "accent";
     icon: BlokkliIcon;
+    color: "rose" | "lime" | "default" | "yellow" | "accent";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/AddListItemIcon/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="bk-list-item-icon"
+    :class="['bk-is-' + color, 'bk-is-' + orientation]"
+  >
+    <Icon v-if="icon" :name="icon" />
+    <ItemIcon v-else-if="bundle" :bundle="bundle" />
+  </div>
+</template>
+
+<script setup>
+import { ItemIcon, Icon } from "#blokkli/components";
+defineProps({
+  icon: { type: null, required: false, default: void 0 },
+  bundle: { type: String, required: false, default: void 0 },
+  color: { type: String, required: false, default: "default" },
+  orientation: { type: String, required: false, default: "horizontal" }
+});
+</script>

package/dist/runtime/components/Edit/AddListItemIcon/index.vue.d.ts

@@ -0,0 +1,15 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { AddListOrientation } from '#blokkli/types';
+type __VLS_Props = {
+    icon?: BlokkliIcon;
+    bundle?: string;
+    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
+    orientation?: AddListOrientation;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bundle: string;
+    icon: BlokkliIcon;
+    color: "rose" | "lime" | "default" | "yellow" | "accent";
+    orientation: AddListOrientation;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/AppMenu/index.vue

@@ -7,14 +7,14 @@
     </div>
   </Teleport>
   <Teleport to="body">
-    <transition name="bk-fade" :duration="200">
+    <BlokkliTransition name="fade">
       <div
         v-if="menuOpen"
         class="bk bk-menu-overlay bk-overlay"
         @click="ui.menu.close()"
       />
-    </transition>
-    <transition name="bk-menu" :duration="200">
+    </BlokkliTransition>
+    <BlokkliTransition name="menu">
       <div v-show="menuOpen" class="bk bk-menu-list">
         <button :class="{ 'bk-is-active': menuOpen }" @click="ui.menu.close">
           <Icon name="close" />
@@ -34,13 +34,13 @@
           </aside>
         </div>
       </div>
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/components";
+import { Icon, BlokkliTransition } from "#blokkli/components";
 import { blokkliVersion } from "#blokkli-build/config";
 const { ui, eventBus } = useBlokkli();
 const menuOpen = computed(() => ui.menu.isOpen.value);

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

@@ -50,7 +50,7 @@
 </template>
 
 <script setup>
-import { useBlokkli, onMounted, computed, ref } from "#imports";
+import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
 import { Icon } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
 const { ui } = useBlokkli();
@@ -125,12 +125,16 @@ const onKeyDown = (e) => {
   }
 };
 onMounted(() => {
+  ui.hasDialogOpen.value = true;
   const focusableElements = getFocusableElements();
   const bestMatch = focusableElements.find((el) => !(el instanceof HTMLButtonElement)) || focusableElements[0];
   if (bestMatch) {
     bestMatch.focus();
   }
 });
+onBeforeUnmount(() => {
+  ui.hasDialogOpen.value = false;
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Dialog/index.vue.d.ts

@@ -28,8 +28,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     onCancel?: ((...args: any[]) => any) | undefined;
     onSubmit?: ((...args: any[]) => any) | undefined;
 }>, {
-    width: number | string;
     icon: BlokkliIcon;
+    width: number | string;
     lead: string;
     submitLabel: string;
     canSubmit: boolean;

package/dist/runtime/components/Edit/DiffViewer/State.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="bk bk-diff-view">
+    <div class="bk-diff-mode-selector">
+      <FormRadioTabs
+        id="diff-viewer-state-display"
+        v-model="diffMode"
+        :options="diffModeOptions"
+        :label="$t('diffModeLabel', 'Display')"
+        :scheme
+      />
+    </div>
+    <div class="bk-diff-table" :data-diff-mode="diffMode">
+      <button
+        v-for="item in diffItems"
+        :key="item.uuid"
+        class="bk-diff-item"
+        :class="{
+  'bk-is-muted': showSelect && !selected?.includes(item.uuid)
+}"
+        @click.prevent="onClick(item.uuid)"
+      >
+        <div
+          class="bk-diff-item-header"
+          :disabled="item.status === 'removed' && !showSelect"
+          :class="{
+  'bk-is-selected': showSelect && selected?.includes(item.uuid)
+}"
+        >
+          <div class="bk-blokkli-item-label">
+            <div class="bk-blokkli-item-label-icon">
+              <ItemIcon :bundle="item.bundle" />
+            </div>
+            <span>{{ getLabel(item.bundle) }}</span>
+          </div>
+          <div class="bk-diff-status">
+            <div
+              v-if="item.status === 'added'"
+              class="bk-diff-status-label bk-is-added"
+            >
+              {{ $t("diffStatusAdded", "Added") }}
+            </div>
+            <div
+              v-else-if="item.status === 'removed'"
+              class="bk-diff-status-label bk-is-removed"
+            >
+              {{ $t("diffStatusDeleted", "Deleted") }}
+            </div>
+            <div
+              v-else-if="item.status === 'unchanged'"
+              class="bk-diff-status-label"
+            >
+              {{ $t("diffStatusUnchanged", "Unchanged") }}
+            </div>
+            <div v-else class="bk-diff-status-label">
+              {{ $t("diffStatusEdited", "Edited") }}
+            </div>
+          </div>
+        </div>
+        <div class="bk-diff-item-diffs">
+          <div
+            v-for="prop in item.props"
+            :key="prop.key"
+            class="bk-diff-prop-row"
+          >
+            <h3>{{ prop.key }}</h3>
+            <div class="bk-diff-monospace">
+              <div
+                v-if="diffMode === 'inline'"
+                class="bk-diff-prop-diff"
+                v-html="prop.diff"
+              />
+              <div
+                v-else-if="diffMode === 'side_by_side'"
+                class="bk-diff-prop-side-by-side"
+              >
+                <div class="bk-diff-prop-before">
+                  <div class="bk-diff-prop-label">
+                    {{ $t("diffBefore", "Before") }}
+                  </div>
+                  <div class="bk-diff-prop-content" v-html="prop.before" />
+                </div>
+                <div class="bk-diff-prop-after">
+                  <div class="bk-diff-prop-label">
+                    {{ $t("diffAfter", "After") }}
+                  </div>
+                  <div class="bk-diff-prop-content" v-html="prop.after" />
+                </div>
+              </div>
+              <div
+                v-else-if="diffMode === 'after'"
+                class="bk-diff-prop-after-only"
+              >
+                <div class="bk-diff-prop-content" v-html="prop.after" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { ItemIcon, FormRadioTabs } from "#blokkli/components";
+import diff from "html-diff-ts";
+const props = defineProps({
+  stateBefore: { type: Object, required: true },
+  stateAfter: { type: Object, required: true },
+  showSelect: { type: Boolean, required: false },
+  includeUuids: { type: Array, required: false },
+  selected: { type: Array, required: false },
+  scheme: { type: String, required: false }
+});
+const { types, $t, eventBus, dom, definitions, storage } = useBlokkli();
+const diffMode = storage.use(
+  "diffMode",
+  "inline"
+);
+const diffModeOptions = computed(() => [
+  {
+    value: "inline",
+    label: $t("diffModeInline", "Inline")
+  },
+  {
+    value: "side_by_side",
+    label: $t("diffModeSideBySide", "Both")
+  },
+  {
+    value: "after",
+    label: $t("diffModeAfter", "After")
+  }
+]);
+const emit = defineEmits(["toggle"]);
+function getProps(bundle, props2) {
+  const definition = definitions.getDefaultDefinition(bundle);
+  if (definition?.editor?.mapDiffProps) {
+    return definition.editor.mapDiffProps(props2);
+  }
+  if (typeof props2 === "object") {
+    return Object.entries(props2).reduce(
+      (acc, [key, value]) => {
+        if (typeof value === "string" || typeof value === "number") {
+          acc[key] = value.toString();
+        } else if (typeof value === "object") {
+          try {
+            const json = JSON.stringify(value, null, 2);
+            acc[key] = `<pre>${json}</pre>`;
+          } catch {
+          }
+        }
+        return acc;
+      },
+      {}
+    );
+  }
+  return {};
+}
+function buildDiffItems(fields) {
+  const items = (fields || []).flatMap((v) => v.list);
+  return items;
+}
+const itemsBefore = computed(
+  () => buildDiffItems(props.stateBefore.mutatedState?.fields)
+);
+const itemsAfter = computed(
+  () => buildDiffItems(props.stateAfter.mutatedState?.fields)
+);
+function toString(v) {
+  if (typeof v === "string") {
+    return v;
+  } else if (typeof v === "number") {
+    return v.toString();
+  }
+  return "";
+}
+const diffItems = computed(() => {
+  const diffMap = /* @__PURE__ */ new Map();
+  itemsBefore.value.forEach((beforeItem) => {
+    if (props.includeUuids && !props.includeUuids.includes(beforeItem.uuid)) {
+      return;
+    }
+    const afterItem = itemsAfter.value.find(
+      (item) => item.uuid === beforeItem.uuid
+    );
+    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
+    if (!afterItem) {
+      diffMap.set(beforeItem.uuid, {
+        uuid: beforeItem.uuid,
+        bundle: beforeItem.bundle,
+        status: "removed",
+        props: Object.entries(beforeProps).map(([key, value]) => ({
+          key,
+          diff: diff(toString(value), ""),
+          before: toString(value),
+          after: ""
+        }))
+      });
+    } else {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      const changedProps = [];
+      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
+        const afterValue = afterProps[key];
+        if (beforeValue !== afterValue) {
+          changedProps.push({
+            key,
+            diff: diff(toString(beforeValue), toString(afterValue)),
+            before: toString(beforeValue),
+            after: toString(afterValue)
+          });
+        }
+      });
+      Object.keys(afterProps).forEach((key) => {
+        if (!(key in beforeProps)) {
+          changedProps.push({
+            key,
+            diff: diff("", toString(afterProps[key])),
+            before: "",
+            after: toString(afterProps[key])
+          });
+        }
+      });
+      if (changedProps.length > 0) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "changed",
+          props: changedProps
+        });
+      } else if (props.includeUuids) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: "unchanged",
+          props: []
+        });
+      }
+    }
+  });
+  itemsAfter.value.forEach((afterItem) => {
+    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      diffMap.set(afterItem.uuid, {
+        uuid: afterItem.uuid,
+        bundle: afterItem.bundle,
+        status: "added",
+        props: Object.entries(afterProps).map(([key, value]) => ({
+          key,
+          diff: diff("", toString(value)),
+          before: "",
+          after: toString(value)
+        }))
+      });
+    }
+  });
+  return Array.from(diffMap.values()).sort((a, b) => {
+    const aY = dom.getBlockRect(a.uuid)?.y || 0;
+    const bY = dom.getBlockRect(b.uuid)?.y || 0;
+    return aY - bY;
+  });
+});
+function onClick(uuid) {
+  if (props.showSelect) {
+    emit("toggle", uuid);
+  } else {
+    scrollToBlock(uuid);
+  }
+}
+function getLabel(bundle) {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle;
+}
+function scrollToBlock(uuid) {
+  eventBus.emit("scrollIntoView", { uuid, center: true });
+  eventBus.emit("select", uuid);
+}
+</script>

package/dist/runtime/components/Edit/DiffViewer/State.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MappedState } from '#blokkli/types';
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    stateBefore: MappedState;
+    stateAfter: MappedState;
+    showSelect?: boolean;
+    includeUuids?: string[];
+    selected?: string[];
+    scheme?: ThemeColorName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (uuid: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: ((uuid: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;