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

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;

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

@@ -10,6 +10,7 @@ import {
   isInsideRect
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { MOUSE_BUTTON, MOUSE_BUTTONS } from "#blokkli/helpers/dom";
 import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
 const { dom, eventBus, selection, keyboard, ui, state } = useBlokkli();
 const rootEl = ui.rootElement();
@@ -28,6 +29,8 @@ watch(dom.isReady, buildRects);
 let lastInteractedElement = null;
 let pointerDownElement = null;
 let mouseStartCoordinates = null;
+let pointerDownTimestamp = 0;
+let pointerUpTimestamp = 0;
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
   const elements = document.elementsFromPoint(x, y);
@@ -85,7 +88,7 @@ function getInteractedElement(e) {
   return null;
 }
 function onPointerMove(e) {
-  if (keyboard.isPressingSpace.value || state.editMode.value !== "editing") {
+  if (keyboard.isPressingSpace.value || state.editMode.value !== "editing" || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
   e.preventDefault();
@@ -94,14 +97,26 @@ function onPointerMove(e) {
   if (e.pointerType === "touch") {
     return onTouchMove(e);
   }
-  if (e.buttons !== 1) {
+  if (e.buttons !== MOUSE_BUTTONS.PRIMARY) {
     return;
   }
-  if (!pointerDownElement || !mouseStartCoordinates || selection.isDragging.value || keyboard.isPressingSpace.value || selection.isMultiSelecting.value) {
+  if (!mouseStartCoordinates || selection.isMultiSelecting.value || selection.isDragging.value || keyboard.isPressingSpace.value) {
     return;
   }
   const diffX = Math.abs(mouseStartCoordinates.x - e.clientX);
   const diffY = Math.abs(mouseStartCoordinates.y - e.clientY);
+  if (!pointerDownElement) {
+    const timeDelta = Date.now() - pointerDownTimestamp;
+    const maxMovement = Math.max(diffX, diffY);
+    if (maxMovement > 6 && timeDelta > 150 || maxMovement > 20) {
+      rootEl.removeEventListener("pointermove", onPointerMove);
+      eventBus.emit("multi-select:start", {
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    return;
+  }
   if (diffX < 6 && diffY < 6) {
     return;
   }
@@ -123,11 +138,13 @@ function onPointerMove(e) {
         });
       }
     }
+    rootEl.removeEventListener("pointermove", onPointerMove);
   }
 }
-let pointerDownTimestamp = 0;
-let pointerUpTimestamp = 0;
 function onPointerDown(e) {
+  if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
+    return;
+  }
   if (!keyboard.isPressingSpace.value) {
     e.preventDefault();
     e.stopPropagation();
@@ -145,10 +162,10 @@ function onPointerDown(e) {
   if (selection.isDragging.value) {
     return;
   }
+  pointerDownTimestamp = Date.now();
   const coords = { x: e.clientX, y: e.clientY };
-  if (!e.shiftKey && e.buttons !== 2) {
-    pointerDownTimestamp = Date.now();
-    mouseStartCoordinates = coords;
+  mouseStartCoordinates = coords;
+  if (!e.shiftKey && e.buttons === MOUSE_BUTTONS.PRIMARY) {
     const interacted = getInteractedElement(e);
     pointerDownElement = interacted;
     if (interacted) {
@@ -157,8 +174,23 @@ function onPointerDown(e) {
   }
   eventBus.emit("mouse:down", { ...coords, type: "mouse", distance: 0 });
 }
+function isClickInArtboard(coords) {
+  const size = ui.artboardSize.value;
+  const scale = ui.artboardScale.value;
+  const rect = {
+    x: ui.artboardOffset.value.x,
+    y: ui.artboardOffset.value.y,
+    width: size.width * scale,
+    height: size.height * scale
+  };
+  return isInsideRect(coords.x, coords.y, rect);
+}
 function onPointerUp(e) {
   rootEl.removeEventListener("pointermove", onPointerMove);
+  if (e.button === MOUSE_BUTTON.AUXILIARY) {
+    e.preventDefault();
+    return;
+  }
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
@@ -228,6 +260,11 @@ function onPointerUp(e) {
     return;
   }
   eventBus.emit("window:clickAway");
+  if (isClickInArtboard(coords)) {
+    eventBus.emit("select:host");
+  } else {
+    eventBus.emit("select:host:unselect");
+  }
 }
 let longPressTimeout = null;
 let touchStartInteraction = null;

package/dist/runtime/components/Edit/EditProvider.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-loading">
+    <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
       <Loading
         v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
         screen
@@ -29,6 +29,7 @@
   <Actions v-if="!isInitializing" />
   <Toolbar @loaded="toolbarLoaded = true" />
   <AppMenu v-if="toolbarLoaded" />
+  <Indicators />
   <Features
     v-if="!isInitializing && toolbarLoaded"
     :key="route.fullPath"
@@ -36,6 +37,7 @@
   />
   <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
+  <Konami />
   <SystemRequirements />
   <slot
     v-if="!isInitializing"
@@ -46,7 +48,6 @@
 
 <script setup>
 import {
-  watch,
   ref,
   computed,
   provide,
@@ -54,18 +55,21 @@ import {
   onBeforeUnmount,
   useRoute,
   useRuntimeConfig,
-  nextTick
+  nextTick,
+  inject
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
 import Loading from "./Loading/index.vue";
 import Messages from "./Messages/index.vue";
 import Features from "./Features/index.vue";
+import Indicators from "./Indicators/index.vue";
 import AppMenu from "./AppMenu/index.vue";
 import DraggableList from "./DraggableList.vue";
 import DragInteractions from "./DragInteractions/index.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
+import Konami from "./Konami/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
 import keyboardProvider from "./../../helpers/keyboardProvider";
 import selectionProvider from "./../../helpers/selectionProvider";
@@ -83,6 +87,8 @@ import tourProvider from "./../../helpers/tourProvider";
 import debugProvider from "./../../helpers/debugProvider";
 import definitionProvider from "./../../helpers/definitionProvider";
 import dropAreasProvider from "./../../helpers/dropAreaProvider";
+import indicatorsProvider from "./../../helpers/indicatorsProvider";
+import pluginProvider from "./../../helpers/pluginProvider";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -92,9 +98,11 @@ import {
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_EDIT_LOGGER,
   INJECT_GLOBAL_PROXY_MODE,
-  INJECT_IS_EDITING
+  INJECT_IS_EDITING,
+  INJECT_PROVIDER_KEY
 } from "#blokkli/helpers/symbols";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -113,6 +121,7 @@ const context = computed(() => {
   };
 });
 const adapter = await getAdapter(context);
+const providerKey = inject(INJECT_PROVIDER_KEY, "");
 const route = useRoute();
 const runtimeConfig = useRuntimeConfig().public.blokkli;
 const toolbarLoaded = ref(false);
@@ -120,8 +129,8 @@ const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider();
 const $t = textProvider(context);
-const state = await editStateProvider(adapter, context, $t);
-const storage = storageProvider();
+const state = await editStateProvider(adapter, context, $t, providerKey);
+const storage = await storageProvider(adapter);
 const debug = debugProvider(storage);
 const features = featuresProvider(storage);
 const theme = themeProvider();
@@ -129,12 +138,14 @@ const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(storage, state);
+const ui = uiProvider(storage, state, context);
 const dom = domProvider(ui, debug, definitions);
-const animation = animationProvider(ui);
+const animation = animationProvider(ui, storage);
 const keyboard = keyboardProvider(animation);
 const selection = selectionProvider(dom);
 const types = await typesProvider(adapter, selection, context);
+const indicators = indicatorsProvider();
+const plugins = pluginProvider();
 const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
 const onContextMenu = (e) => {
   e.preventDefault();
@@ -148,22 +159,22 @@ function onTouchStart(e) {
     e.preventDefault();
   }
 }
-const setRootClasses = (unmount) => {
-  document.documentElement.classList.remove("bk-use-animations");
-  if (ui.useAnimations.value && !unmount) {
-    document.documentElement.classList.add("bk-use-animations");
-  }
-};
-watch(ui.useAnimations, setRootClasses);
+const shouldIsolate = computed(() => props.isolate);
+addElementClasses(
+  document.documentElement,
+  "bk-use-animations",
+  ui.useAnimations
+);
+addElementClasses(
+  document.documentElement,
+  "bk-isolate-provider",
+  shouldIsolate
+);
 const baseLogger = debug.createLogger("EditProvider");
 onMounted(() => {
   window.addEventListener("contextmenu", onContextMenu);
-  if (props.isolate) {
-    document.documentElement.classList.add("bk-isolate-provider");
-  }
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
-  setRootClasses();
   baseLogger.log("EditProvider mounted");
   dom.init();
   isInitializing.value = false;
@@ -173,10 +184,8 @@ onBeforeUnmount(() => {
   window.removeEventListener("contextmenu", onContextMenu);
   isInitializing.value = true;
   toolbarLoaded.value = false;
-  document.documentElement.classList.remove("bk-isolate-provider");
   document.documentElement.removeEventListener("touchmove", onTouchMove);
   document.documentElement.removeEventListener("touchstart", onTouchStart);
-  setRootClasses(true);
 });
 provide(INJECT_EDIT_LOGGER, baseLogger);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
@@ -189,27 +198,29 @@ provide(INJECT_EDIT_CONTEXT, {
   useBlockRegistration
 });
 provide(INJECT_APP, {
+  $t,
   adapter,
+  animation,
+  broadcast,
+  commands,
+  context,
+  debug,
+  definitions,
+  dom,
+  dropAreas,
   eventBus,
+  features,
+  indicators,
+  keyboard,
+  plugins,
   runtimeConfig,
+  selection,
   state,
-  dom,
   storage,
-  types,
-  selection,
-  keyboard,
-  ui,
-  animation,
-  context,
-  $t,
-  broadcast,
-  features,
   theme,
-  commands,
   tour,
-  dropAreas,
-  debug,
-  definitions
+  types,
+  ui
 });
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);

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

@@ -50,13 +50,12 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
-  onBeforeUnmount,
   nextTick,
   defineBlokkliFeature
 } from "#imports";
 import { Sortli } from "#blokkli/components";
 import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
@@ -94,14 +93,10 @@ const hasContextMenuOpen = computed(
 const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
 const shouldRender = computed(() => state.editMode.value === "editing");
 watch(ui.addListOrientation, () => {
-  setRootClasses();
   nextTick(() => {
     eventBus.emit("add-list:change");
   });
 });
-watch(shouldRender, () => {
-  setRootClasses();
-});
 const CLASS_LEFT = "bk-has-add-list-left";
 const CLASS_BOTTOM = "bk-has-add-list-bottom";
 const wrapper = ref(null);
@@ -146,18 +141,6 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-function setRootClasses() {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-  if (!shouldRender.value) {
-    return;
-  }
-  if (ui.addListOrientation.value === "horizontal") {
-    document.documentElement.classList.add(CLASS_BOTTOM);
-  } else if (ui.addListOrientation.value === "vertical") {
-    document.documentElement.classList.add(CLASS_LEFT);
-  }
-}
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
   () => $t(
@@ -165,13 +148,20 @@ const tourText = computed(
     "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
   )
 );
-onMounted(() => {
-  setRootClasses();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-});
+addElementClasses(
+  document.documentElement,
+  CLASS_BOTTOM,
+  computed(
+    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
+  )
+);
+addElementClasses(
+  document.documentElement,
+  CLASS_LEFT,
+  computed(
+    () => ui.addListOrientation.value === "vertical" && shouldRender.value
+  )
+);
 </script>
 
 <script>