@douxcode/vue-spring-bottom-sheet 3.1.0 → 3.2.0

package/README.md

@@ -145,6 +145,9 @@ For Nuxt 3, just wrap component in `<ClientOnly>`
 | headerClass         | String                      | ''               | Set header element class                                                  |
 | contentClass        | String                      | ''               | Set content element class                                                 |
 | footerClass         | String                      | ''               | Set footer element class                                                  |
+| forceMount          | Boolean                     | false            | Force mount the bottom sheet in the DOM                                   |
+
+Interactive content inside the sheet body keeps its native touch behavior. Inputs and editable content do not start sheet dragging, and custom widgets can opt out with data-vsbs-no-drag.
 
 ## Exposed methods
 

package/dist/BottomSheet.d.ts

@@ -44,6 +44,7 @@ declare const __VLS_component: import('vue').DefineComponent<BottomSheetProps, {
 }>, {
     blocking: boolean;
     duration: number;
+    forceMount: boolean;
     canSwipeClose: boolean;
     canBackdropClose: boolean;
     expandOnContentDrag: boolean;

package/dist/index.mjs

@@ -1,73 +1,73 @@
-import { ref as I, shallowRef as x, computed as H, defineComponent as Be, useCssVars as Oe, watch as A, nextTick as _, onMounted as Ae, toRef as F, onUnmounted as Fe, openBlock as $, createElementBlock as ee, Fragment as $e, createBlock as fe, Teleport as ve, createElementVNode as V, createVNode as he, Transition as ge, withCtx as me, unref as v, createCommentVNode as pe, normalizeStyle as Ve, normalizeClass as te, renderSlot as ne } from "vue";
-import { useScrollLock as Ne, useVModel as ze, useWindowSize as qe, useElementBounding as U } from "@vueuse/core";
-import { useFocusTrap as Ke } from "@vueuse/integrations/useFocusTrap";
-function Ue(e, t, o) {
-  let n = (r) => e(r, ...t);
-  return o === void 0 ? n : Object.assign(n, { lazy: o, lazyArgs: t });
+import { ref as H, shallowRef as y, computed as D, defineComponent as Ae, useCssVars as Fe, watch as A, nextTick as _, onMounted as $e, toRef as F, onUnmounted as Ve, openBlock as $, createElementBlock as ee, Fragment as ze, createBlock as fe, Teleport as ve, createElementVNode as V, createVNode as he, Transition as ge, withCtx as me, unref as f, withDirectives as pe, vShow as Se, createCommentVNode as be, normalizeStyle as Ne, normalizeClass as te, renderSlot as ne } from "vue";
+import { useScrollLock as qe, useVModel as Ke, useWindowSize as Ue, useElementBounding as U } from "@vueuse/core";
+import { useFocusTrap as We } from "@vueuse/integrations/useFocusTrap";
+function Ge(e, t, o) {
+  let a = (l) => e(l, ...t);
+  return o === void 0 ? a : Object.assign(a, { lazy: o, lazyArgs: t });
 }
-function We(e, t, o) {
-  let n = e.length - t.length;
-  if (n === 0) return e(...t);
-  if (n === 1) return Ue(e, t, o);
+function Qe(e, t, o) {
+  let a = e.length - t.length;
+  if (a === 0) return e(...t);
+  if (a === 1) return Ge(e, t, o);
   throw Error("Wrong number of arguments");
 }
-function E(...e) {
-  return We(Ge, e);
+function T(...e) {
+  return Qe(Xe, e);
 }
-const Ge = (e, { min: t, max: o }) => t !== void 0 && e < t ? t : o !== void 0 && e > o ? o : e, Te = /* @__PURE__ */ Symbol("funnel/voidReducer"), Qe = () => Te;
-function Xe(e, { triggerAt: t = "end", minQuietPeriodMs: o, maxBurstDurationMs: n, minGapMs: r, reducer: i = Qe }) {
-  let u, f, d, h, m = () => {
-    let g = d;
-    g !== void 0 && (d = void 0, g === Te ? e() : e(g), r !== void 0 && (f = setTimeout(P, r)));
+const Xe = (e, { min: t, max: o }) => t !== void 0 && e < t ? t : o !== void 0 && e > o ? o : e, ye = /* @__PURE__ */ Symbol("funnel/voidReducer"), je = () => ye;
+function Je(e, { triggerAt: t = "end", minQuietPeriodMs: o, maxBurstDurationMs: a, minGapMs: l, reducer: u = je }) {
+  let i, v, d, h, p = () => {
+    let m = d;
+    m !== void 0 && (d = void 0, m === ye ? e() : e(m), l !== void 0 && (v = setTimeout(P, l)));
   }, P = () => {
-    clearTimeout(f), f = void 0, u === void 0 && m();
+    clearTimeout(v), v = void 0, i === void 0 && p();
   }, C = () => {
-    clearTimeout(u), u = void 0, h = void 0, f === void 0 && m();
+    clearTimeout(i), i = void 0, h = void 0, v === void 0 && p();
   };
-  return { call: (...g) => {
-    let T = u === void 0 && f === void 0;
-    if ((t !== "start" || T) && (d = i(d, ...g)), !(u === void 0 && !T)) {
-      if (o !== void 0 || n !== void 0 || r === void 0) {
-        clearTimeout(u);
-        let y = Date.now();
-        h ??= y;
-        let Y = n === void 0 ? o ?? 0 : Math.min(o ?? n, Math.max(0, n - (y - h)));
-        u = setTimeout(C, Y);
+  return { call: (...m) => {
+    let k = i === void 0 && v === void 0;
+    if ((t !== "start" || k) && (d = u(d, ...m)), !(i === void 0 && !k)) {
+      if (o !== void 0 || a !== void 0 || l === void 0) {
+        clearTimeout(i);
+        let E = Date.now();
+        h ??= E;
+        let M = a === void 0 ? o ?? 0 : Math.min(o ?? a, Math.max(0, a - (E - h)));
+        i = setTimeout(C, M);
       }
-      t !== "end" && T && m();
+      t !== "end" && k && p();
     }
   }, cancel: () => {
-    clearTimeout(u), u = void 0, h = void 0, clearTimeout(f), f = void 0, d = void 0;
+    clearTimeout(i), i = void 0, h = void 0, clearTimeout(v), v = void 0, d = void 0;
   }, flush: () => {
     C(), P();
   }, get isIdle() {
-    return u === void 0 && f === void 0;
+    return i === void 0 && v === void 0;
   } };
 }
-const je = 5, Je = 30, Ze = 400;
-function _e() {
-  const e = I([]);
-  function t(r) {
-    e.value = [{ y: r, time: performance.now() }];
+const Ze = 5, _e = 30, et = 400;
+function tt() {
+  const e = H([]);
+  function t(l) {
+    e.value = [{ y: l, time: performance.now() }];
   }
-  function o(r) {
-    const i = e.value;
-    i.push({ y: r, time: performance.now() }), i.length > je && i.shift();
+  function o(l) {
+    const u = e.value;
+    u.push({ y: l, time: performance.now() }), u.length > Ze && u.shift();
   }
-  function n() {
-    const r = e.value;
-    if (r.length < 2)
+  function a() {
+    const l = e.value;
+    if (l.length < 2)
       return { direction: "none", velocity: 0, isSwipe: !1 };
-    const i = r[0], u = r[r.length - 1];
-    if (!i || !u)
+    const u = l[0], i = l[l.length - 1];
+    if (!u || !i)
       return { direction: "none", velocity: 0, isSwipe: !1 };
-    const f = i.y - u.y, d = (u.time - i.time) / 1e3, h = d > 0 ? Math.abs(f) / d : 0, m = Math.abs(f) >= Je && h >= Ze;
+    const v = u.y - i.y, d = (i.time - u.time) / 1e3, h = d > 0 ? Math.abs(v) / d : 0, p = Math.abs(v) >= _e && h >= et;
     let P = "none";
-    return m && (P = f > 0 ? "up" : "down"), e.value = [], { direction: P, velocity: h, isSwipe: m };
+    return p && (P = v > 0 ? "up" : "down"), e.value = [], { direction: P, velocity: h, isSwipe: p };
   }
-  return { start: t, update: o, end: n };
+  return { start: t, update: o, end: a };
 }
-function et(e, t) {
+function nt(e, t) {
   if (e === void 0)
     return t / 2;
   if (typeof e == "number")
@@ -78,109 +78,112 @@ function et(e, t) {
   }
   return t / 2;
 }
-const tt = 10, Se = 0.25;
-function be(e) {
-  const t = e, o = e instanceof HTMLAnchorElement || e instanceof HTMLButtonElement || e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e instanceof HTMLSelectElement || e instanceof HTMLLabelElement || e instanceof HTMLVideoElement || e instanceof HTMLAudioElement, n = e.hasAttribute("onclick") || e.hasAttribute("role"), r = t.tabIndex >= 0 || e.hasAttribute("tabindex"), i = t.isContentEditable || e instanceof HTMLInputElement && !e.disabled || e instanceof HTMLTextAreaElement && !e.disabled;
-  return o || n || r || i;
+const at = 10, we = 0.25;
+function Pe(e) {
+  return !!e.closest(
+    'input, textarea, [contenteditable="true"], [contenteditable=""], [data-vsbs-no-drag]'
+  );
 }
-function nt(e, t, o) {
+function ot(e, t, o) {
   return Math.max(t, Math.min(e, o));
 }
-function at(e, t) {
+function rt(e, t) {
   return Math.pow(e, t * 5);
 }
-function we(e, t, o) {
-  return t === 0 || Math.abs(t) === 1 / 0 ? at(e, o) : e * t * o / (t + o * e);
+function Ce(e, t, o) {
+  return t === 0 || Math.abs(t) === 1 / 0 ? rt(e, o) : e * t * o / (t + o * e);
 }
-function Pe(e, t, o, n = 0.15) {
-  return n === 0 ? nt(e, t, o) : e < t ? -we(t - e, o - t, n) + t : e > o ? +we(e - o, o - t, n) + o : e;
+function ke(e, t, o, a = 0.15) {
+  return a === 0 ? ot(e, t, o) : e < t ? -Ce(t - e, o - t, a) + t : e > o ? +Ce(e - o, o - t, a) + o : e;
 }
-const ot = (e) => {
-  const t = _e(), o = x(!1);
-  let n = !0, r = 0, i = 0, u = !1, f = 0, d = !1, h = 0;
-  const m = (a) => {
-    a > 0 ? e.onDraggingDown?.() : a < 0 && e.onDraggingUp?.();
+const lt = (e) => {
+  const t = tt(), o = y(!1);
+  let a = !0, l = 0, u = 0, i = !1, v = 0, d = !1, h = 0;
+  const p = (n) => {
+    n > 0 ? e.onDraggingDown?.() : n < 0 && e.onDraggingUp?.();
   }, P = () => {
-    if (u) return;
-    const a = document.activeElement;
-    a instanceof HTMLElement && a !== document.body && (a.blur(), u = !0);
-  }, C = (a) => {
-    typeof a.cancelable != "boolean" || a.cancelable ? n && a.preventDefault() : console.warn("The following event couldn't be canceled:");
-  }, g = (a, p) => {
-    const b = p === "header" ? e.sheetHeaderRef.value : e.sheetFooterRef.value;
-    b && a.button === 0 && (r = e.height.value, i = e.translateY.value, u = !1, h = 0, d = !1, n = !0, o.value = !0, t.start(a.clientY), b.setPointerCapture(a.pointerId));
-  }, T = (a) => {
-    e.sheetContentRef.value && a.button === 0 && e.expandOnContentDrag.value !== !1 && (be(a.target) || (r = e.height.value, i = e.translateY.value, f = a.clientY, u = !1, h = 0, d = !1, n = !0, o.value = !0, t.start(a.clientY), e.sheetContentRef.value.setPointerCapture(a.pointerId)));
-  }, y = (a) => {
+    if (i) return;
+    const n = document.activeElement;
+    n instanceof HTMLElement && n !== document.body && (n.blur(), i = !0);
+  }, C = (n) => {
+    const g = n.target;
+    g && Pe(g) && n.preventDefault(), typeof n.cancelable != "boolean" || n.cancelable ? a && n.preventDefault() : console.warn("The following event couldn't be canceled:");
+  }, m = (n, g) => {
+    const b = g === "header" ? e.sheetHeaderRef.value : e.sheetFooterRef.value;
+    b && n.button === 0 && (l = e.height.value, u = e.translateY.value, i = !1, h = 0, d = !1, a = !0, o.value = !0, t.start(n.clientY), b.setPointerCapture(n.pointerId));
+  }, k = (n) => {
+    const g = n.target;
+    e.sheetContentRef.value && n.button === 0 && e.expandOnContentDrag.value !== !1 && (g && Pe(g) || (l = e.height.value, u = e.translateY.value, v = n.clientY, i = !1, h = 0, d = !1, a = !0, o.value = !0, t.start(n.clientY), e.sheetContentRef.value.setPointerCapture(n.pointerId)));
+  }, E = (n) => {
     if (o.value) {
-      if (Math.abs(a.movementY) > 0 && P(), t.update(a.clientY), m(a.movementY), e.translateY.value > 0) {
-        e.canSwipeClose.value ? e.translateY.value = e.translateY.value + a.movementY : (i = i + a.movementY, e.translateY.value = Pe(
-          i,
+      if (Math.abs(n.movementY) > 0 && P(), t.update(n.clientY), p(n.movementY), e.translateY.value > 0) {
+        e.canSwipeClose.value ? e.translateY.value = e.translateY.value + n.movementY : (u = u + n.movementY, e.translateY.value = ke(
+          u,
           -e.minSnapPoint.value,
           0,
-          Se
+          we
         ));
         return;
       }
-      r = E(r - a.movementY, {
+      l = T(l - n.movementY, {
         min: e.minSnapPoint.value
-      }), e.height.value = Pe(
-        r,
+      }), e.height.value = ke(
+        l,
         0,
         e.maxSnapPoint.value,
-        Se
-      ), e.height.value <= e.minSnapPoint.value && (e.translateY.value = e.translateY.value + a.movementY);
+        we
+      ), e.height.value <= e.minSnapPoint.value && (e.translateY.value = e.translateY.value + n.movementY);
     }
-  }, Y = (a) => {
+  }, M = (n) => {
     if (h >= 2)
       return;
-    const p = e.sheetScrollRef.value, b = p?.scrollTop === 0, w = a.clientY - f > 0, S = e.flattenedSnapPoints.value.length === 1, z = 0.5 > Math.abs(e.height.value - e.maxSnapPoint.value), D = (p?.scrollHeight ?? 0) > (p?.clientHeight ?? 0);
+    const g = e.sheetScrollRef.value, b = g?.scrollTop === 0, w = n.clientY - v > 0, S = e.flattenedSnapPoints.value.length === 1, N = 0.5 > Math.abs(e.height.value - e.maxSnapPoint.value), R = (g?.scrollHeight ?? 0) > (g?.clientHeight ?? 0);
     if (S) {
       if (!e.expandOnContentDrag.value) {
-        n = !1;
+        a = !1;
         return;
       }
-      e.translateY.value === 0 && b && w && (n = !0), e.translateY.value === 0 && b && !w && (n = !1);
+      e.translateY.value === 0 && b && w && (a = !0), e.translateY.value === 0 && b && !w && (a = !1);
     } else
-      n = !0, z && (w && b && (n = !0), !w && b && (n = !1), b || (n = !1));
-    d = !D, h++;
-  }, R = (a) => {
-    if (!o.value || !e.sheetScrollRef.value || (Math.abs(a.movementY) > 0 && P(), Y(a), h <= 1)) return;
-    if (t.update(a.clientY), m(a.movementY), e.translateY.value > 0) {
-      e.canSwipeClose.value && (e.translateY.value = E(e.translateY.value + a.movementY, { min: 0 }));
+      a = !0, N && (w && b && (a = !0), !w && b && (a = !1), b || (a = !1));
+    d = !R, h++;
+  }, B = (n) => {
+    if (!o.value || !e.sheetScrollRef.value || (Math.abs(n.movementY) > 0 && P(), M(n), h <= 1)) return;
+    if (t.update(n.clientY), p(n.movementY), e.translateY.value > 0) {
+      e.canSwipeClose.value && (e.translateY.value = T(e.translateY.value + n.movementY, { min: 0 }));
       return;
     }
-    e.height.value = E(e.height.value - a.movementY, {
+    e.height.value = T(e.height.value - n.movementY, {
       min: e.minSnapPoint.value,
       max: e.maxSnapPoint.value
-    }), !(e.flattenedSnapPoints.value.length === 1) && e.height.value === e.maxSnapPoint.value && (n = !1), e.height.value <= e.minSnapPoint.value && (e.translateY.value = E(e.translateY.value + a.movementY, {
+    }), !(e.flattenedSnapPoints.value.length === 1) && e.height.value === e.maxSnapPoint.value && (a = !1), e.height.value <= e.minSnapPoint.value && (e.translateY.value = T(e.translateY.value + n.movementY, {
       min: 0,
       ...e.canSwipeClose.value === !1 ? { max: 0 } : {}
     }));
-  }, N = () => {
-    const a = t.end();
-    if (a.isSwipe && a.direction === "down" && e.canSwipeClose.value && e.height.value <= e.minSnapPoint.value + tt) {
+  }, z = () => {
+    const n = t.end();
+    if (n.isSwipe && n.direction === "down" && e.canSwipeClose.value && e.height.value <= e.minSnapPoint.value + at) {
       e.onClose();
       return;
     }
     if (e.canSwipeClose.value) {
-      const p = et(
+      const g = nt(
         e.swipeCloseThreshold.value,
         e.height.value
       );
-      if (e.translateY.value > p) {
+      if (e.translateY.value > g) {
         e.onClose();
         return;
       }
     }
-    if (a.isSwipe && e.flattenedSnapPoints.value.length > 1) {
-      const p = [...e.flattenedSnapPoints.value].sort((w, S) => w - S);
+    if (n.isSwipe && e.flattenedSnapPoints.value.length > 1) {
+      const g = [...e.flattenedSnapPoints.value].sort((w, S) => w - S);
       let b = e.closestSnapPointIndex.value;
-      if (a.direction === "up") {
-        const w = p.find((S) => S > e.height.value + 1);
+      if (n.direction === "up") {
+        const w = g.find((S) => S > e.height.value + 1);
         w !== void 0 && (b = e.flattenedSnapPoints.value.indexOf(w));
-      } else if (a.direction === "down") {
-        const w = [...p].reverse().find((S) => S < e.height.value - 1);
+      } else if (n.direction === "down") {
+        const w = [...g].reverse().find((S) => S < e.height.value - 1);
         w !== void 0 && (b = e.flattenedSnapPoints.value.indexOf(w));
       }
       e.onSnapToPoint(b), e.translateY.value = 0;
@@ -191,100 +194,101 @@ const ot = (e) => {
   return {
     isDragging: o,
     handleSheetScroll: C,
-    handlePointerDown: g,
-    handleContentPointerDown: T,
-    handlePointerMove: y,
-    handleContentPointerMove: R,
-    handleLostPointerCapture: (a, p) => {
-      o.value = !1, p === "header" ? e.sheetHeaderRef.value?.releasePointerCapture(a.pointerId) : p === "footer" ? e.sheetFooterRef.value?.releasePointerCapture(a.pointerId) : e.sheetContentRef.value?.releasePointerCapture(a.pointerId), h = 0, d = !1, u = !1, N();
+    handlePointerDown: m,
+    handleContentPointerDown: k,
+    handlePointerMove: E,
+    handleContentPointerMove: B,
+    handleLostPointerCapture: (n, g) => {
+      o.value = !1, g === "header" ? e.sheetHeaderRef.value?.releasePointerCapture(n.pointerId) : g === "footer" ? e.sheetFooterRef.value?.releasePointerCapture(n.pointerId) : e.sheetContentRef.value?.releasePointerCapture(n.pointerId), h = 0, d = !1, i = !1, z();
     },
-    handleTouchStart: (a) => {
-      be(a.target) || d && a.preventDefault();
+    handleTouchStart: (n) => {
+      d && n.preventDefault();
     }
   };
 };
-function rt(e) {
-  const { sheetRef: t, backdropRef: o, blocking: n, onEscape: r } = e, i = I(null), u = Ke([t, o], {
+function st(e) {
+  const { sheetRef: t, backdropRef: o, blocking: a, onEscape: l } = e, u = H(null), i = We([t, o], {
     immediate: !1,
     fallbackFocus: () => t.value || document.body
-  }), f = (g) => {
-    g.key === "Escape" && r();
+  }), v = (m) => {
+    m.key === "Escape" && l();
   }, d = () => {
-    t.value && (i.value = new MutationObserver((g) => {
-      for (const T of g)
-        T.type === "attributes" && T.attributeName === "aria-expanded" && (T.target.getAttribute("aria-expanded") === "true" ? u.pause() : t.value?.querySelector('[aria-expanded="true"]') || u.unpause());
-    }), i.value.observe(t.value, {
+    t.value && (u.value = new MutationObserver((m) => {
+      for (const k of m)
+        k.type === "attributes" && k.attributeName === "aria-expanded" && (k.target.getAttribute("aria-expanded") === "true" ? i.pause() : t.value?.querySelector('[aria-expanded="true"]') || i.unpause());
+    }), u.value.observe(t.value, {
       attributes: !0,
       attributeFilter: ["aria-expanded"],
       subtree: !0
     }));
   }, h = () => {
-    i.value && (i.value.disconnect(), i.value = null);
+    u.value && (u.value.disconnect(), u.value = null);
   };
   return {
     activate: () => {
-      n.value && (u.activate(), d()), window.addEventListener("keydown", f);
+      a.value && (i.activate(), d()), window.addEventListener("keydown", v);
     },
     deactivate: () => {
-      window.removeEventListener("keydown", f), h(), n.value && u.deactivate();
+      window.removeEventListener("keydown", v), h(), a.value && i.deactivate();
     },
     cleanup: () => {
-      h(), u.deactivate();
+      h(), i.deactivate();
     }
   };
 }
-function lt(e) {
-  const { blocking: t } = e, o = Ne(document.documentElement), n = () => {
+function ut(e) {
+  const { blocking: t } = e, o = qe(document.documentElement), a = () => {
     o.value = !0;
-  }, r = () => {
+  }, l = () => {
     o.value = !1;
   };
   return {
-    lock: n,
-    unlock: r,
+    lock: a,
+    unlock: l,
     lockIfBlocking: () => {
-      t.value && n();
+      t.value && a();
     },
     unlockIfBlocking: () => {
-      t.value && r();
+      t.value && l();
     },
     touchStartHandler: () => {
-      t.value || n();
+      t.value || a();
     },
     touchEndHandler: () => {
-      t.value || r();
+      t.value || l();
     }
   };
 }
-function ke(e, t) {
+function Te(e, t) {
   const o = parseFloat(e);
   return t * o / 100;
 }
-function st(e, t, o) {
-  const n = I(0), r = H(() => e.value.map((d) => typeof d == "string" ? ke(d, o.value) : d)), i = H(() => Math.min(...r.value)), u = H(() => Math.max(...r.value)), f = H(() => {
-    const d = r.value.reduce(
-      (h, m) => Math.abs(m - t.value) < Math.abs(h - t.value) ? m : h
+function it(e, t, o) {
+  const a = H(0), l = D(() => e.value.map((d) => typeof d == "string" ? Te(d, o.value) : d)), u = D(() => Math.min(...l.value)), i = D(() => Math.max(...l.value)), v = D(() => {
+    const d = l.value.reduce(
+      (h, p) => Math.abs(p - t.value) < Math.abs(h - t.value) ? p : h
     );
-    return r.value.indexOf(d);
+    return l.value.indexOf(d);
   });
   return {
-    currentSnapPointIndex: n,
-    flattenedSnapPoints: r,
-    minSnapPoint: i,
-    maxSnapPoint: u,
-    closestSnapPointIndex: f
+    currentSnapPointIndex: a,
+    flattenedSnapPoints: l,
+    minSnapPoint: u,
+    maxSnapPoint: i,
+    closestSnapPointIndex: v
   };
 }
-function Ce(e, t) {
-  return typeof e == "number" ? E(e, { max: t }) : ke(e, t);
+function xe(e, t) {
+  return typeof e == "number" ? T(e, { max: t }) : Te(e, t);
 }
-const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be({
+const ct = ["data-vsbs-shadow", "data-vsbs-sheet-show"], dt = /* @__PURE__ */ Ae({
   __name: "BottomSheet",
   props: {
     duration: { default: 250 },
     snapPoints: {},
     initialSnapPoint: {},
     blocking: { type: Boolean, default: !0 },
+    forceMount: { type: Boolean, default: !1 },
     canSwipeClose: { type: Boolean, default: !0 },
     swipeCloseThreshold: {},
     canBackdropClose: { type: Boolean, default: !0 },
@@ -298,146 +302,146 @@ const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be
   },
   emits: ["opened", "opening-started", "closed", "closing-started", "dragging-up", "dragging-down", "snapped", "instinctHeight", "update:modelValue"],
   setup(e, { expose: t, emit: o }) {
-    Oe((s) => ({
-      v7643c7ff: b.value
+    Fe((s) => ({
+      v5acd7ef8: b.value
     }));
-    const n = e, r = o, i = ze(n, "modelValue", r, {
+    const a = e, l = o, u = Ke(a, "modelValue", l, {
       passive: !0
     });
-    A(i, (s) => {
-      s ? j() : B();
-    }), A(i, async (s) => {
+    A(u, (s) => {
+      s ? j() : L();
+    }), A(u, async (s) => {
       if (!s) {
         C.value = 0;
         return;
       }
-      await _(), M();
-    }), Ae(() => {
-      De(), i.value && j();
+      await _(), Y();
+    }), $e(() => {
+      He(), u.value && j();
     });
-    const u = x(null), f = x(null), d = x(null), h = x(null), m = x(null), P = x(null), C = I(0), { height: g } = qe(), { height: T } = U(u), { height: y } = U(f), { height: Y } = U(m), { height: R } = U(d), N = H(() => E(
-      Math.ceil(Y.value + y.value + R.value),
-      { max: g.value }
-    )), ae = (s, l, c) => {
-      y.value = s, Y.value = l, R.value = c;
-    }, k = I(0), a = I(0), p = H(() => E(k.value + C.value, {
-      max: g.value
-    })), b = H(() => n.duration + "ms"), w = F(() => n.snapPoints), S = H(() => w.value ?? [N.value]), {
-      flattenedSnapPoints: z,
-      currentSnapPointIndex: D,
-      closestSnapPointIndex: xe,
+    const i = y(null), v = y(null), d = y(null), h = y(null), p = y(null), P = y(null), C = H(0), { height: m } = Ue(), { height: k } = U(i), { height: E } = U(v), { height: M } = U(p), { height: B } = U(d), z = D(() => T(
+      Math.ceil(M.value + E.value + B.value),
+      { max: m.value }
+    )), ae = (s, r, c) => {
+      E.value = s, M.value = r, B.value = c;
+    }, x = H(0), n = H(0), g = D(() => T(x.value + C.value, {
+      max: m.value
+    })), b = D(() => a.duration + "ms"), w = F(() => a.snapPoints), S = D(() => w.value ?? [z.value]), {
+      flattenedSnapPoints: N,
+      currentSnapPointIndex: R,
+      closestSnapPointIndex: Ee,
       minSnapPoint: W,
-      maxSnapPoint: Ee
-    } = st(S, k, g), oe = F(() => n.blocking), ye = F(() => n.canSwipeClose), Me = F(() => n.swipeCloseThreshold), He = F(() => n.expandOnContentDrag), L = lt({ blocking: oe }), G = rt({
-      sheetRef: u,
+      maxSnapPoint: Ye
+    } = it(S, x, m), oe = F(() => a.blocking), De = F(() => a.canSwipeClose), Me = F(() => a.swipeCloseThreshold), Re = F(() => a.expandOnContentDrag), I = ut({ blocking: oe }), G = st({
+      sheetRef: i,
       backdropRef: P,
       blocking: oe,
-      onEscape: () => B()
-    }), Q = x(!1), X = x(!1), Ye = () => {
-      n.canBackdropClose && B();
-    }, M = () => {
+      onEscape: () => L()
+    }), Q = y(!1), X = y(!1), Ie = () => {
+      a.canBackdropClose && L();
+    }, Y = () => {
       const s = window.visualViewport;
-      if (!s || !i.value) {
+      if (!s || !u.value) {
         C.value = 0;
         return;
       }
-      const l = Math.max(0, window.innerHeight - s.height - s.offsetTop);
-      C.value = Math.round(l);
+      const r = Math.max(0, window.innerHeight - s.height - s.offsetTop);
+      C.value = Math.round(r);
     };
     let re = null;
-    const De = () => {
+    const He = () => {
       const s = window.visualViewport;
-      s && (s.addEventListener("resize", M), s.addEventListener("scroll", M), window.addEventListener("resize", M), re = () => {
-        s.removeEventListener("resize", M), s.removeEventListener("scroll", M), window.removeEventListener("resize", M);
+      s && (s.addEventListener("resize", Y), s.addEventListener("scroll", Y), window.addEventListener("resize", Y), re = () => {
+        s.removeEventListener("resize", Y), s.removeEventListener("scroll", Y), window.removeEventListener("resize", Y);
       });
     }, j = async () => {
       if (Q.value) return;
-      i.value = !0, Q.value = !0, r("opening-started"), L.lockIfBlocking(), await _(), M();
-      const s = u.value;
-      T.value = s.getBoundingClientRect().height;
-      const l = s.querySelector("[data-vsbs-content]"), c = s.querySelector("[data-vsbs-header]"), K = s.querySelector("[data-vsbs-footer]");
+      u.value = !0, Q.value = !0, l("opening-started"), I.lockIfBlocking(), await _(), Y();
+      const s = i.value;
+      k.value = s.getBoundingClientRect().height;
+      const r = s.querySelector("[data-vsbs-content]"), c = s.querySelector("[data-vsbs-header]"), K = s.querySelector("[data-vsbs-footer]");
       if (ae(
         c.getBoundingClientRect().height,
-        l.getBoundingClientRect().height,
+        r.getBoundingClientRect().height,
         K.getBoundingClientRect().height
-      ), await _(), D.value = z.value.findIndex(
+      ), await _(), R.value = N.value.findIndex(
         (O) => O === W.value
-      ), n.initialSnapPoint !== void 0) {
-        const O = n.initialSnapPoint;
+      ), a.initialSnapPoint !== void 0) {
+        const O = a.initialSnapPoint;
         if (O < 0 || O >= S.value.length) {
           console.warn("Index out of bounds");
           return;
         }
         const de = S.value[O];
         if (!de) return;
-        k.value = Ce(de, g.value);
+        x.value = xe(de, m.value);
       } else
-        k.value = E(W.value, { max: g.value });
-      a.value = k.value, requestAnimationFrame(() => {
-        a.value = 0, n.blocking && setTimeout(() => {
-          i.value && (r("opened"), G.activate());
-        }, n.duration);
+        x.value = T(W.value, { max: m.value });
+      n.value = x.value, requestAnimationFrame(() => {
+        n.value = 0, a.blocking && setTimeout(() => {
+          u.value && (l("opened"), G.activate());
+        }, a.duration);
       }), Q.value = !1;
-    }, B = () => {
-      X.value || (i.value = !1, X.value = !0, r("closing-started"), L.unlockIfBlocking(), G.deactivate(), a.value = k.value, setTimeout(() => {
-        r("closed"), X.value = !1;
-      }, n.duration));
+    }, L = () => {
+      X.value || (u.value = !1, X.value = !0, l("closing-started"), I.unlockIfBlocking(), G.deactivate(), n.value = x.value, setTimeout(() => {
+        l("closed"), X.value = !1;
+      }, a.duration));
     }, J = (s) => {
       if (!S.value) return;
       if (s < 0 || s >= S.value.length) {
         console.warn("Index out of bounds");
         return;
       }
-      D.value = s;
-      const l = S.value[s];
-      l && (k.value = Ce(l, g.value), r("snapped", S.value.indexOf(l)));
+      R.value = s;
+      const r = S.value[s];
+      r && (x.value = xe(r, m.value), l("snapped", S.value.indexOf(r)));
     }, {
-      isDragging: Le,
+      isDragging: Be,
       handleSheetScroll: le,
       handlePointerDown: se,
-      handleContentPointerDown: ie,
+      handleContentPointerDown: ue,
       handlePointerMove: q,
-      handleContentPointerMove: ue,
+      handleContentPointerMove: ie,
       handleLostPointerCapture: Z,
       handleTouchStart: ce
-    } = ot({
-      sheetHeaderRef: f,
+    } = lt({
+      sheetHeaderRef: v,
       sheetFooterRef: d,
-      sheetContentRef: m,
+      sheetContentRef: p,
       sheetScrollRef: h,
-      height: k,
-      translateY: a,
+      height: x,
+      translateY: n,
       minSnapPoint: W,
-      maxSnapPoint: Ee,
-      closestSnapPointIndex: xe,
-      flattenedSnapPoints: z,
-      canSwipeClose: ye,
-      expandOnContentDrag: He,
+      maxSnapPoint: Ye,
+      closestSnapPointIndex: Ee,
+      flattenedSnapPoints: N,
+      canSwipeClose: De,
+      expandOnContentDrag: Re,
       swipeCloseThreshold: Me,
-      onClose: B,
+      onClose: L,
       onSnapToPoint: J,
-      onDraggingUp: () => r("dragging-up"),
-      onDraggingDown: () => r("dragging-down")
-    }), Ie = Xe((s) => J(s), {
-      minQuietPeriodMs: n.duration,
-      reducer: (s, l) => l
+      onDraggingUp: () => l("dragging-up"),
+      onDraggingDown: () => l("dragging-down")
+    }), Le = Je((s) => J(s), {
+      minQuietPeriodMs: a.duration,
+      reducer: (s, r) => r
     });
-    A(S, (s, l) => {
-      if (i.value === !1 || !s || !l) return;
-      const c = s[D.value], K = l[D.value];
-      !c || typeof c == "string" || !K || typeof K == "string" || (k.value = E(c, { max: g.value }));
-    }), A(g, () => {
-      Ie.call(D.value);
-    }), A(N, (s) => {
-      r("instinctHeight", s);
-    }), Fe(() => {
+    A(S, (s, r) => {
+      if (u.value === !1 || !s || !r) return;
+      const c = s[R.value], K = r[R.value];
+      !c || typeof c == "string" || !K || typeof K == "string" || (x.value = T(c, { max: m.value }));
+    }), A(m, () => {
+      Le.call(R.value);
+    }), A(z, (s) => {
+      l("instinctHeight", s);
+    }), Ve(() => {
       re?.(), G.cleanup();
     });
-    const Re = (s) => {
-      const l = s;
-      l.style.transition = `transform ${n.duration}ms ease, height ${n.duration}ms ease`, l.style.transform = `translateY(${p.value}px)`;
+    const Oe = (s) => {
+      const r = s;
+      r.style.transition = `transform ${a.duration}ms ease, height ${a.duration}ms ease`, r.style.transform = `translateY(${g.value}px)`;
     };
-    return t({ open: j, close: B, snapToPoint: J }), (s, l) => ($(), ee($e, null, [
+    return t({ open: j, close: L, snapToPoint: J }), (s, r) => ($(), ee(ze, null, [
       ($(), fe(ve, {
         to: e.teleportTo,
         defer: e.teleportDefer
@@ -445,13 +449,15 @@ const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be
         V("div", null, [
           he(ge, { name: "vsbs-backdrop" }, {
             default: me(() => [
-              v(i) && e.blocking ? ($(), ee("div", {
+              e.forceMount || f(u) && e.blocking ? pe(($(), ee("div", {
                 key: 0,
                 ref_key: "backdrop",
                 ref: P,
                 "data-vsbs-backdrop": "",
-                onClick: l[0] || (l[0] = (c) => Ye())
-              }, null, 512)) : pe("", !0)
+                onClick: r[0] || (r[0] = (c) => Ie())
+              }, null, 512)), [
+                [Se, f(u) && e.blocking]
+              ]) : be("", !0)
             ]),
             _: 1
           })
@@ -463,38 +469,38 @@ const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be
       }, [
         he(ge, {
           name: "vsbs-sheet",
-          onLeave: Re
+          onLeave: Oe
         }, {
           default: me(() => [
-            v(i) ? ($(), ee("div", {
+            e.forceMount || f(u) ? pe(($(), ee("div", {
               key: 0,
               ref_key: "sheet",
-              ref: u,
-              style: Ve({
-                transform: `translateY(${a.value}px)`,
-                height: `${p.value}px`,
+              ref: i,
+              style: Ne({
+                transform: `translateY(${n.value}px)`,
+                height: `${g.value}px`,
                 paddingBottom: `${C.value}px`,
-                transition: v(Le) ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
+                transition: f(Be) ? "none" : `transform ${e.duration}ms ease, height ${e.duration}ms ease`
               }),
               "data-vsbs-shadow": !e.blocking,
-              "data-vsbs-sheet-show": v(i),
+              "data-vsbs-sheet-show": f(u),
               "aria-modal": "true",
               "data-vsbs-sheet": "",
               tabindex: "-1",
-              onTouchstart: l[12] || (l[12] = //@ts-ignore
-              (...c) => v(L).touchStartHandler && v(L).touchStartHandler(...c)),
-              onTouchend: l[13] || (l[13] = //@ts-ignore
-              (...c) => v(L).touchEndHandler && v(L).touchEndHandler(...c))
+              onTouchstart: r[12] || (r[12] = //@ts-ignore
+              (...c) => f(I).touchStartHandler && f(I).touchStartHandler(...c)),
+              onTouchend: r[13] || (r[13] = //@ts-ignore
+              (...c) => f(I).touchEndHandler && f(I).touchEndHandler(...c))
             }, [
               V("div", {
                 ref_key: "sheetHeader",
-                ref: f,
+                ref: v,
                 "data-vsbs-header": "",
                 class: te(e.headerClass),
-                onPointerdown: l[1] || (l[1] = (c) => v(se)(c, "header")),
-                onPointermove: l[2] || (l[2] = //@ts-ignore
-                (...c) => v(q) && v(q)(...c)),
-                onLostpointercapture: l[3] || (l[3] = (c) => v(Z)(c, "header"))
+                onPointerdown: r[1] || (r[1] = (c) => f(se)(c, "header")),
+                onPointermove: r[2] || (r[2] = //@ts-ignore
+                (...c) => f(q) && f(q)(...c)),
+                onLostpointercapture: r[3] || (r[3] = (c) => f(Z)(c, "header"))
               }, [
                 ne(s.$slots, "header", {}, void 0, !0)
               ], 34),
@@ -502,19 +508,19 @@ const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be
                 ref_key: "sheetScroll",
                 ref: h,
                 "data-vsbs-scroll": "",
-                onTouchstart: l[4] || (l[4] = //@ts-ignore
-                (...c) => v(ce) && v(ce)(...c)),
-                onTouchmove: l[5] || (l[5] = //@ts-ignore
-                (...c) => v(le) && v(le)(...c)),
-                onPointerdown: l[6] || (l[6] = //@ts-ignore
-                (...c) => v(ie) && v(ie)(...c)),
-                onPointermove: l[7] || (l[7] = //@ts-ignore
-                (...c) => v(ue) && v(ue)(...c)),
-                onLostpointercapture: l[8] || (l[8] = (c) => v(Z)(c, "content"))
+                onTouchstart: r[4] || (r[4] = //@ts-ignore
+                (...c) => f(ce) && f(ce)(...c)),
+                onTouchmove: r[5] || (r[5] = //@ts-ignore
+                (...c) => f(le) && f(le)(...c)),
+                onPointerdown: r[6] || (r[6] = //@ts-ignore
+                (...c) => f(ue) && f(ue)(...c)),
+                onPointermove: r[7] || (r[7] = //@ts-ignore
+                (...c) => f(ie) && f(ie)(...c)),
+                onLostpointercapture: r[8] || (r[8] = (c) => f(Z)(c, "content"))
               }, [
                 V("div", {
                   ref_key: "sheetContent",
-                  ref: m,
+                  ref: p,
                   "data-vsbs-content": "",
                   class: te(e.contentClass)
                 }, [
@@ -526,26 +532,28 @@ const it = ["data-vsbs-shadow", "data-vsbs-sheet-show"], ut = /* @__PURE__ */ Be
                 ref: d,
                 "data-vsbs-footer": "",
                 class: te(e.footerClass),
-                onPointerdown: l[9] || (l[9] = (c) => v(se)(c, "footer")),
-                onPointermove: l[10] || (l[10] = //@ts-ignore
-                (...c) => v(q) && v(q)(...c)),
-                onLostpointercapture: l[11] || (l[11] = (c) => v(Z)(c, "footer"))
+                onPointerdown: r[9] || (r[9] = (c) => f(se)(c, "footer")),
+                onPointermove: r[10] || (r[10] = //@ts-ignore
+                (...c) => f(q) && f(q)(...c)),
+                onLostpointercapture: r[11] || (r[11] = (c) => f(Z)(c, "footer"))
               }, [
                 ne(s.$slots, "footer", {}, void 0, !0)
               ], 34)
-            ], 44, it)) : pe("", !0)
+            ], 44, ct)), [
+              [Se, f(u)]
+            ]) : be("", !0)
           ]),
           _: 3
         })
       ], 8, ["to", "defer"]))
     ], 64));
   }
-}), ct = (e, t) => {
+}), ft = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [n, r] of t)
-    o[n] = r;
+  for (const [a, l] of t)
+    o[a] = l;
   return o;
-}, ht = /* @__PURE__ */ ct(ut, [["__scopeId", "data-v-efbe17f6"]]);
+}, mt = /* @__PURE__ */ ft(dt, [["__scopeId", "data-v-1fe5991a"]]);
 export {
-  ht as default
+  mt as default
 };

package/dist/style.css

@@ -1 +1 @@
-[data-vsbs-backdrop][data-v-efbe17f6]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v7643c7ff)}[data-vsbs-shadow=true][data-v-efbe17f6]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-efbe17f6]{background-color:var(--vsbs-background, #fff);box-sizing:border-box;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-efbe17f6]{visibility:visible}[data-vsbs-header][data-v-efbe17f6]{touch-action:none;box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-efbe17f6]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-efbe17f6]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-efbe17f6]{touch-action:none;box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-efbe17f6]:empty{display:none}[data-vsbs-scroll][data-v-efbe17f6]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content][data-v-efbe17f6]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-efbe17f6],.vsbs-backdrop-leave-active[data-v-efbe17f6]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-efbe17f6],.vsbs-backdrop-leave-to[data-v-efbe17f6]{opacity:0}
+[data-vsbs-backdrop][data-v-1fe5991a]{background-color:var(--vsbs-backdrop-bg, rgba(0, 0, 0, .5));inset:0;pointer-events:auto;position:fixed;-webkit-user-select:none;user-select:none;will-change:opacity;--vsbs-duration: var(--v5acd7ef8)}[data-vsbs-shadow=true][data-v-1fe5991a]:before{content:"";z-index:-1;position:absolute;top:0;height:100lvh;width:100%;border-radius:var(--vsbs-border-radius, 16px);box-shadow:0 -5px 60px 0 var(--vsbs-shadow-color, rgba(89, 89, 89, .2))}[data-vsbs-sheet][data-v-1fe5991a]{background-color:var(--vsbs-background, #fff);box-sizing:border-box;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-right:1px solid var(--vsbs-outer-border-color, transparent);border-left:1px solid var(--vsbs-outer-border-color, transparent);bottom:0;display:flex;flex-direction:column;left:0;margin-left:auto;margin-right:auto;max-width:var(--vsbs-max-width, 640px);pointer-events:all;position:fixed;right:0;width:100%;will-change:height,transform}[data-vsbs-sheet-show=true][data-v-1fe5991a]{visibility:visible}[data-vsbs-header][data-v-1fe5991a]{touch-action:none;box-shadow:0 1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-shrink:0;padding:20px var(--vsbs-padding-x, 16px) 8px;-webkit-user-select:none;user-select:none;z-index:3;border-top-left-radius:var(--vsbs-border-radius, 16px);border-top-right-radius:var(--vsbs-border-radius, 16px);border-top:1px solid var(--vsbs-outer-border-color, transparent)}[data-vsbs-header][data-v-1fe5991a]:before{background-color:var(--vsbs-handle-background, rgba(0, 0, 0, .28));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:36px}[data-vsbs-header][data-v-1fe5991a]:empty{box-shadow:none;padding:14px var(--vsbs-padding-x, 16px) 10px}[data-vsbs-footer][data-v-1fe5991a]{touch-action:none;box-shadow:0 -1px 0 var(--vsbs-border-color, rgba(46, 59, 66, .125));flex-grow:0;flex-shrink:0;padding:16px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}[data-vsbs-footer][data-v-1fe5991a]:empty{display:none}[data-vsbs-scroll][data-v-1fe5991a]{flex-grow:1;overflow-y:auto;overscroll-behavior:none}[data-vsbs-content][data-v-1fe5991a]{display:grid;padding:8px var(--vsbs-padding-x, 16px);-webkit-user-select:none;user-select:none}.vsbs-backdrop-enter-active[data-v-1fe5991a],.vsbs-backdrop-leave-active[data-v-1fe5991a]{transition:opacity var(--vsbs-duration) ease}.vsbs-backdrop-enter-from[data-v-1fe5991a],.vsbs-backdrop-leave-to[data-v-1fe5991a]{opacity:0}

package/dist/types.d.ts

@@ -4,6 +4,7 @@ export interface BottomSheetProps {
     snapPoints?: Array<number | `${number}%`>;
     initialSnapPoint?: number;
     blocking?: boolean;
+    forceMount?: boolean;
     canSwipeClose?: boolean;
     swipeCloseThreshold?: string | number;
     canBackdropClose?: boolean;

package/package.json

@@ -30,7 +30,7 @@
     "url": "https://github.com/megaarmos/vue-spring-bottom-sheet/issues"
   },
   "private": false,
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "exports": {
     ".": {