@surdeddd/bottom-sheet 0.5.0 → 0.6.1

package/dist/vue.js

@@ -2620,7 +2620,9 @@ var BottomSheetEngine = class {
     const previousSize = this.size;
     this.scrollCache.cache(previousId, previousSize, target.size);
     this.activeId = id;
-    if (wasClosed && target.size > 0) {
+    const rawTargetSize = this.snapPointsRaw.find((p) => p.id === id)?.size;
+    const opensToRest = id === "closed" || rawTargetSize === 0;
+    if (wasClosed && !opensToRest) {
       this.opening = true;
       sheetStack.promote(this.id);
     }
@@ -3427,6 +3429,38 @@ var BottomSheetEngine = class {
   }
 };
 
+// src/core/features/teleport.ts
+var resolveTeleportTarget = (target) => {
+  if (!target) return null;
+  if (typeof target !== "string") return target;
+  if (typeof document === "undefined") return null;
+  if (target === "body") return document.body;
+  return document.querySelector(target);
+};
+var teleportElements = (els, target) => {
+  const records = [];
+  for (const el of els) {
+    if (!el || el.parentNode === target) continue;
+    records.push({ el, parent: el.parentNode, next: el.nextSibling });
+    target.appendChild(el);
+  }
+  return () => {
+    for (let i = records.length - 1; i >= 0; i--) {
+      const { el, parent, next } = records[i];
+      if (parent && parent.isConnected) {
+        const before = next && next.parentNode === parent ? next : null;
+        try {
+          parent.insertBefore(el, before);
+        } catch {
+          el.parentNode?.removeChild(el);
+        }
+      } else {
+        el.parentNode?.removeChild(el);
+      }
+    }
+  };
+};
+
 // src/vue/useBottomSheet.ts
 function useBottomSheet(opts) {
   const sheetRef = ref(null);
@@ -3443,13 +3477,20 @@ function useBottomSheet(opts) {
     isAnimating: false,
     progress: 0
   });
+  let restoreTeleport = null;
   const sync = () => {
     if (!engine) return;
     Object.assign(state, engine.state);
   };
   onMounted(() => {
     if (!sheetRef.value) return;
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     engine = new BottomSheetEngine({
       ...engineOpts,
       element: sheetRef.value,
@@ -3459,6 +3500,17 @@ function useBottomSheet(opts) {
       scrim: screenRef.value ?? void 0
     });
     sync();
+    const target = resolveTeleportTarget(teleportTo);
+    if (target) {
+      restoreTeleport = teleportElements(
+        [backdropRef.value, screenRef.value, sheetRef.value],
+        target
+      );
+    }
+    if (backdropColor !== void 0) engine.setScrimColor(backdropColor);
+    if (backdropOpacity !== void 0) {
+      engine.setBackdropRange([0, backdropOpacity]);
+    }
     engine.on("snap", (payload) => {
       sync();
       onSnap?.(payload.id);
@@ -3474,6 +3526,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3702,6 +3756,23 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       type: null,
       required: false
     },
+    teleportTo: {
+      type: [
+        String,
+        null,
+        Object
+      ],
+      required: false,
+      default: "body"
+    },
+    backdropColor: {
+      type: String,
+      required: false
+    },
+    backdropOpacity: {
+      type: Number,
+      required: false
+    },
     onSnap: {
       type: Function,
       required: false
@@ -3734,11 +3805,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3746,14 +3812,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",