@surdeddd/bottom-sheet 0.4.1 → 0.6.0

package/dist/vue.cjs

@@ -2897,11 +2897,54 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
+  contentTargets() {
+    const scroller = this.scrollContainer;
+    if (!scroller) return [];
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const out = [];
+    for (const child of Array.from(scroller.children)) {
+      if (hasSlot && child instanceof HTMLSlotElement) {
+        for (const el of child.assignedElements()) out.push(el);
+      } else {
+        out.push(child);
+      }
+    }
+    return out;
+  }
+  measureContentExtent(vertical) {
+    const content = this.scrollContainer;
+    if (!content) return 0;
+    const targets = this.contentTargets();
+    if (targets.length === 0) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    for (const el of targets) {
+      const r = el.getBoundingClientRect();
+      if (vertical) {
+        if (r.top < min) min = r.top;
+        if (r.bottom > max) max = r.bottom;
+      } else {
+        if (r.left < min) min = r.left;
+        if (r.right > max) max = r.right;
+      }
+    }
+    if (!isFinite(min) || !isFinite(max) || max <= min) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    let pad = 0;
+    if (typeof getComputedStyle !== "undefined") {
+      const cs = getComputedStyle(content);
+      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+    }
+    return max - min + pad;
+  }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
     const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
     const content = this.scrollContainer;
-    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
     if (typeof window === "undefined") return natural;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
     return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2910,22 +2953,62 @@ var BottomSheetEngine = class {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
       return;
-    const targets = [this.handle];
-    if (this.scrollContainer && this.scrollContainer !== this.handle) {
-      targets.push(this.scrollContainer);
-    }
     let raf = 0;
-    const ro = new ResizeObserver(() => {
+    const schedule = () => {
       if (raf) return;
       raf = requestAnimationFrame(() => {
         raf = 0;
         if (this.destroyed || this.gesture?.isDragging) return;
         this.recompute();
       });
-    });
-    for (const t of targets) ro.observe(t);
+    };
+    const ro = new ResizeObserver(schedule);
+    ro.observe(this.handle);
+    const scroller = this.scrollContainer;
+    const observed = /* @__PURE__ */ new Set();
+    const slots = /* @__PURE__ */ new Set();
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const onSlotChange = () => resync();
+    const trackSlots = () => {
+      if (!scroller || !hasSlot) return;
+      for (const child of Array.from(scroller.children)) {
+        if (child instanceof HTMLSlotElement && !slots.has(child)) {
+          child.addEventListener("slotchange", onSlotChange);
+          slots.add(child);
+        }
+      }
+    };
+    const resync = () => {
+      trackSlots();
+      const targets = this.contentTargets();
+      for (const el of observed) {
+        if (!targets.includes(el)) {
+          ro.unobserve(el);
+          observed.delete(el);
+        }
+      }
+      for (const el of targets) {
+        if (!observed.has(el)) {
+          ro.observe(el);
+          observed.add(el);
+        }
+      }
+      schedule();
+    };
+    let mo;
+    if (scroller) {
+      resync();
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(resync);
+        mo.observe(scroller, { childList: true });
+      }
+    }
     this.teardowns.add(() => {
       ro.disconnect();
+      mo?.disconnect();
+      for (const slot of slots) {
+        slot.removeEventListener("slotchange", onSlotChange);
+      }
       if (raf) cancelAnimationFrame(raf);
     });
   }
@@ -3346,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 = vue.ref(null);
@@ -3362,13 +3477,20 @@ function useBottomSheet(opts) {
     isAnimating: false,
     progress: 0
   });
+  let restoreTeleport = null;
   const sync = () => {
     if (!engine) return;
     Object.assign(state, engine.state);
   };
   vue.onMounted(() => {
     if (!sheetRef.value) return;
-    const { onSnap, ...engineOpts } = opts;
+    const {
+      onSnap,
+      teleportTo,
+      backdropColor,
+      backdropOpacity,
+      ...engineOpts
+    } = opts;
     engine = new BottomSheetEngine({
       ...engineOpts,
       element: sheetRef.value,
@@ -3378,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);
@@ -3393,6 +3526,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   vue.onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3621,6 +3756,23 @@ var _sfc_main = /* @__PURE__ */ vue.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
@@ -3653,11 +3805,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3665,14 +3812,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [
@@ -3900,23 +4039,27 @@ var _hoisted_4 = [
   "aria-valuetext"
 ];
 var _hoisted_5 = {
+  key: 0,
+  class: "bs-header"
+};
+var _hoisted_6 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_6 = {
-  key: 0,
+var _hoisted_7 = {
+  key: 1,
   class: "bs-footer"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
-var _hoisted_8 = ["data-mode"];
 var _hoisted_9 = ["data-mode"];
+var _hoisted_10 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Teleport, {
     to: $props.teleportTo,
@@ -3962,18 +4105,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_4),
+      }, null, 8, _hoisted_4),
+      _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "header", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode(
         "div",
-        _hoisted_5,
+        _hoisted_6,
         [vue.renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : vue.createCommentVNode("v-if", true),
       vue.createElementVNode(
         "span",
-        _hoisted_7,
+        _hoisted_8,
         vue.toDisplayString($setup.state.activeId),
         1
         /* TEXT */
@@ -3984,13 +4128,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "bs-button-slot",
       "data-side": "left",
       "data-mode": $setup.props.mode ?? "bottom"
-    }, [vue.renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_8)) : vue.createCommentVNode("v-if", true),
+    }, [vue.renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_9)) : vue.createCommentVNode("v-if", true),
     _ctx.$slots["button-right"] ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 2,
       class: "bs-button-slot",
       "data-side": "right",
       "data-mode": $setup.props.mode ?? "bottom"
-    }, [vue.renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_9)) : vue.createCommentVNode("v-if", true)
+    }, [vue.renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_10)) : vue.createCommentVNode("v-if", true)
   ]), (vue.openBlock(true), vue.createElementBlock(
     vue.Fragment,
     null,

package/dist/vue.js

@@ -2895,11 +2895,54 @@ var BottomSheetEngine = class {
       this.updateAriaSlider();
     }
   }
+  contentTargets() {
+    const scroller = this.scrollContainer;
+    if (!scroller) return [];
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const out = [];
+    for (const child of Array.from(scroller.children)) {
+      if (hasSlot && child instanceof HTMLSlotElement) {
+        for (const el of child.assignedElements()) out.push(el);
+      } else {
+        out.push(child);
+      }
+    }
+    return out;
+  }
+  measureContentExtent(vertical) {
+    const content = this.scrollContainer;
+    if (!content) return 0;
+    const targets = this.contentTargets();
+    if (targets.length === 0) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    let min = Infinity;
+    let max = -Infinity;
+    for (const el of targets) {
+      const r = el.getBoundingClientRect();
+      if (vertical) {
+        if (r.top < min) min = r.top;
+        if (r.bottom > max) max = r.bottom;
+      } else {
+        if (r.left < min) min = r.left;
+        if (r.right > max) max = r.right;
+      }
+    }
+    if (!isFinite(min) || !isFinite(max) || max <= min) {
+      return vertical ? content.scrollHeight : content.scrollWidth;
+    }
+    let pad = 0;
+    if (typeof getComputedStyle !== "undefined") {
+      const cs = getComputedStyle(content);
+      pad = vertical ? (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0) : (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+    }
+    return max - min + pad;
+  }
   measureFitSize() {
     const vertical = layoutAxis(this.mode) === "height";
     const handleSize = vertical ? this.handle.offsetHeight : this.handle.offsetWidth;
     const content = this.scrollContainer;
-    const natural = content ? handleSize + (vertical ? content.scrollHeight : content.scrollWidth) : handleSize;
+    const natural = content ? handleSize + this.measureContentExtent(vertical) : handleSize;
     if (typeof window === "undefined") return natural;
     const viewport = vertical ? window.innerHeight : window.innerWidth;
     return viewport > 0 ? Math.min(natural, viewport) : natural;
@@ -2908,22 +2951,62 @@ var BottomSheetEngine = class {
     if (typeof ResizeObserver === "undefined") return;
     if (!this.snapPointsRaw.some((p) => p.size === "fit" || p.size === "content"))
       return;
-    const targets = [this.handle];
-    if (this.scrollContainer && this.scrollContainer !== this.handle) {
-      targets.push(this.scrollContainer);
-    }
     let raf = 0;
-    const ro = new ResizeObserver(() => {
+    const schedule = () => {
       if (raf) return;
       raf = requestAnimationFrame(() => {
         raf = 0;
         if (this.destroyed || this.gesture?.isDragging) return;
         this.recompute();
       });
-    });
-    for (const t of targets) ro.observe(t);
+    };
+    const ro = new ResizeObserver(schedule);
+    ro.observe(this.handle);
+    const scroller = this.scrollContainer;
+    const observed = /* @__PURE__ */ new Set();
+    const slots = /* @__PURE__ */ new Set();
+    const hasSlot = typeof HTMLSlotElement !== "undefined";
+    const onSlotChange = () => resync();
+    const trackSlots = () => {
+      if (!scroller || !hasSlot) return;
+      for (const child of Array.from(scroller.children)) {
+        if (child instanceof HTMLSlotElement && !slots.has(child)) {
+          child.addEventListener("slotchange", onSlotChange);
+          slots.add(child);
+        }
+      }
+    };
+    const resync = () => {
+      trackSlots();
+      const targets = this.contentTargets();
+      for (const el of observed) {
+        if (!targets.includes(el)) {
+          ro.unobserve(el);
+          observed.delete(el);
+        }
+      }
+      for (const el of targets) {
+        if (!observed.has(el)) {
+          ro.observe(el);
+          observed.add(el);
+        }
+      }
+      schedule();
+    };
+    let mo;
+    if (scroller) {
+      resync();
+      if (typeof MutationObserver !== "undefined") {
+        mo = new MutationObserver(resync);
+        mo.observe(scroller, { childList: true });
+      }
+    }
     this.teardowns.add(() => {
       ro.disconnect();
+      mo?.disconnect();
+      for (const slot of slots) {
+        slot.removeEventListener("slotchange", onSlotChange);
+      }
       if (raf) cancelAnimationFrame(raf);
     });
   }
@@ -3344,6 +3427,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);
@@ -3360,13 +3475,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,
@@ -3376,6 +3498,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);
@@ -3391,6 +3524,8 @@ function useBottomSheet(opts) {
     pending.length = 0;
   });
   onBeforeUnmount(() => {
+    restoreTeleport?.();
+    restoreTeleport = null;
     engine?.destroy();
     engine = null;
   });
@@ -3619,6 +3754,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
@@ -3651,11 +3803,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       required: false,
       default: true
     },
-    teleportTo: {
-      type: null,
-      required: false,
-      default: "body"
-    },
     anchors: {
       type: Array,
       required: false
@@ -3663,14 +3810,6 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     scrimStages: {
       type: [Object, null],
       required: false
-    },
-    backdropColor: {
-      type: String,
-      required: false
-    },
-    backdropOpacity: {
-      type: Number,
-      required: false
     }
   },
   emits: [
@@ -3898,23 +4037,27 @@ var _hoisted_4 = [
   "aria-valuetext"
 ];
 var _hoisted_5 = {
+  key: 0,
+  class: "bs-header"
+};
+var _hoisted_6 = {
   ref: "contentRef",
   class: "bs-content",
   tabindex: "0",
   role: "region",
   "aria-label": "Sheet content"
 };
-var _hoisted_6 = {
-  key: 0,
+var _hoisted_7 = {
+  key: 1,
   class: "bs-footer"
 };
-var _hoisted_7 = {
+var _hoisted_8 = {
   class: "bs-sr-only",
   role: "status",
   "aria-live": "polite"
 };
-var _hoisted_8 = ["data-mode"];
 var _hoisted_9 = ["data-mode"];
+var _hoisted_10 = ["data-mode"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Teleport, {
     to: $props.teleportTo,
@@ -3960,18 +4103,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-valuenow": $setup.activeIdx,
         "aria-valuetext": $setup.state.activeId,
         "aria-label": "Resize sheet"
-      }, [renderSlot(_ctx.$slots, "header", { state: $setup.state })], 8, _hoisted_4),
+      }, null, 8, _hoisted_4),
+      _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "header", { state: $setup.state })])) : createCommentVNode("v-if", true),
       createElementVNode(
         "div",
-        _hoisted_5,
+        _hoisted_6,
         [renderSlot(_ctx.$slots, "default")],
         512
         /* NEED_PATCH */
       ),
-      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
+      _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer", { state: $setup.state })])) : createCommentVNode("v-if", true),
       createElementVNode(
         "span",
-        _hoisted_7,
+        _hoisted_8,
         toDisplayString($setup.state.activeId),
         1
         /* TEXT */
@@ -3982,13 +4126,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "bs-button-slot",
       "data-side": "left",
       "data-mode": $setup.props.mode ?? "bottom"
-    }, [renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_8)) : createCommentVNode("v-if", true),
+    }, [renderSlot(_ctx.$slots, "button-left")], 8, _hoisted_9)) : createCommentVNode("v-if", true),
     _ctx.$slots["button-right"] ? (openBlock(), createElementBlock("div", {
       key: 2,
       class: "bs-button-slot",
       "data-side": "right",
       "data-mode": $setup.props.mode ?? "bottom"
-    }, [renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_9)) : createCommentVNode("v-if", true)
+    }, [renderSlot(_ctx.$slots, "button-right")], 8, _hoisted_10)) : createCommentVNode("v-if", true)
   ]), (openBlock(true), createElementBlock(
     Fragment,
     null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "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",