vaul-vue - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/controls.d.ts

@@ -51,2 +51,3 @@ import type { ComponentPublicInstance, Ref } from 'vue';
     (e: 'update:activeSnapPoint', val: string | number): void;
+    (e: 'animationEnd', open: boolean): void;
 }
@@ -53,0 +54,0 @@ export interface DialogEmitHandlers {

dist/DrawerRoot.d.ts

@@ -24,2 +24,3 @@ import { type DrawerRootProps } from './controls';
     "update:activeSnapPoint": (val: string | number) => void;
+    animationEnd: (open: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -83,2 +84,3 @@ activeSnapPoint?: string | number | null | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
 }, {
@@ -85,0 +87,0 @@ open: boolean;

dist/DrawerRootNested.d.ts

@@ -8,2 +8,3 @@ import type { DrawerRootProps } from './controls';
     "update:activeSnapPoint": (val: string | number) => void;
+    animationEnd: (open: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
@@ -39,2 +40,3 @@ activeSnapPoint?: string | number | null | undefined;
     "onUpdate:activeSnapPoint"?: ((val: string | number) => any) | undefined;
+    onAnimationEnd?: ((open: boolean) => any) | undefined;
 }, {} | {}, {}>, {
@@ -41,0 +43,0 @@ default?(_: {}): any;

dist/index.js

 (function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode('[vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32,.72,0,1)}[vaul-drawer][vaul-drawer-direction=bottom]{transform:translate3d(0,100%,0)}[vaul-drawer][vaul-drawer-direction=top]{transform:translate3d(0,-100%,0)}[vaul-drawer][vaul-drawer-direction=left]{transform:translate3d(-100%,0,0)}[vaul-drawer][vaul-drawer-direction=right]{transform:translate3d(100%,0,0)}.vaul-dragging .vaul-scrollable [vault-drawer-direction=top],.vaul-dragging .vaul-scrollable [vault-drawer-direction=bottom]{overflow-y:hidden!important}.vaul-dragging .vaul-scrollable [vault-drawer-direction=left],.vaul-dragging .vaul-scrollable [vault-drawer-direction=right]{overflow-x:hidden!important}[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=top],[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height, 0),0)}[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=left],[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height, 0),0,0)}[vaul-overlay]{opacity:0;transition:opacity .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][vaul-drawer-visible=true]{opacity:1}[vaul-drawer]:after{content:"";position:absolute;background:inherit;background-color:inherit}[vaul-drawer][vaul-drawer-direction=top]:after{top:initial;bottom:100%;left:0;right:0;height:200%}[vaul-drawer][vaul-drawer-direction=bottom]:after{top:100%;bottom:initial;left:0;right:0;height:200%}[vaul-drawer][vaul-drawer-direction=left]:after{left:initial;right:100%;top:0;bottom:0;width:200%}[vaul-drawer][vaul-drawer-direction=right]:after{left:100%;right:initial;top:0;bottom:0;width:200%}[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay=true]):not([data-state=closed]){opacity:0}[vaul-overlay][vaul-snap-points-overlay=true]:not([vaul-drawer-visible=false]){opacity:1}@keyframes fake-animation{}@media (hover: hover) and (pointer: fine){[vaul-drawer]{-webkit-user-select:none;user-select:none}}')),document.head.appendChild(r)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { getCurrentInstance as We, ref as P, watch as Y, nextTick as Oe, computed as V, onMounted as ze, onUnmounted as Te, watchEffect as ke, defineComponent as le, useSlots as Ie, toRefs as qe, openBlock as oe, createBlock as ie, unref as C, withCtx as se, renderSlot as ce, mergeProps as Ye, normalizeStyle as Xe } from "vue";
-import { createContext as Ge, DialogRoot as Je, useForwardPropsEmits as Ke, DialogOverlay as Qe, DialogContent as Ze } from "radix-vue";
-import { DialogClose as bt, DialogDescription as $t, DialogPortal as yt, DialogTitle as Dt, DialogTrigger as St } from "radix-vue";
-const Fe = typeof window < "u" && typeof document < "u";
+import { getCurrentInstance as ze, ref as E, watch as Y, nextTick as Oe, computed as W, onMounted as Te, onBeforeUnmount as Ie, onUnmounted as Ee, watchEffect as ke, defineComponent as oe, useSlots as qe, toRefs as Ye, openBlock as ie, createBlock as re, unref as A, withCtx as ce, renderSlot as ve, mergeProps as Xe, normalizeStyle as Ge } from "vue";
+import { createContext as Je, DialogRoot as Ke, useForwardPropsEmits as Qe, DialogOverlay as Ze, DialogContent as Fe } from "radix-vue";
+import { DialogClose as yt, DialogDescription as $t, DialogPortal as Dt, DialogTitle as St, DialogTrigger as Ot } from "radix-vue";
+const et = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const et = (t) => typeof t < "u";
-function tt(t) {
+const tt = (t) => typeof t < "u";
+function nt(t) {
   return JSON.parse(JSON.stringify(t));
 }
-function ye(t, n, v, s = {}) {
+function $e(t, n, v, r = {}) {
   var e, b, u;
   const {
-    clone: O = !1,
-    passive: x = !1,
-    eventName: d,
-    deep: l = !1,
-    defaultValue: w,
-    shouldEmit: R
-  } = s, A = We(), y = v || (A == null ? void 0 : A.emit) || ((e = A == null ? void 0 : A.$emit) == null ? void 0 : e.bind(A)) || ((u = (b = A == null ? void 0 : A.proxy) == null ? void 0 : b.$emit) == null ? void 0 : u.bind(A == null ? void 0 : A.proxy));
-  let i = d;
-  n || (n = "modelValue"), i = i || `update:${n.toString()}`;
-  const r = (p) => O ? typeof O == "function" ? O(p) : tt(p) : p, o = () => et(t[n]) ? r(t[n]) : w, f = (p) => {
-    R ? R(p) && y(i, p) : y(i, p);
+    clone: f = !1,
+    passive: _ = !1,
+    eventName: O,
+    deep: T = !1,
+    defaultValue: c,
+    shouldEmit: i
+  } = r, D = ze(), p = v || (D == null ? void 0 : D.emit) || ((e = D == null ? void 0 : D.$emit) == null ? void 0 : e.bind(D)) || ((u = (b = D == null ? void 0 : D.proxy) == null ? void 0 : b.$emit) == null ? void 0 : u.bind(D == null ? void 0 : D.proxy));
+  let o = O;
+  n || (n = "modelValue"), o = o || `update:${n.toString()}`;
+  const U = (l) => f ? typeof f == "function" ? f(l) : nt(l) : l, C = () => tt(t[n]) ? U(t[n]) : c, s = (l) => {
+    i ? i(l) && p(o, l) : p(o, l);
   };
-  if (x) {
-    const p = o(), T = P(p);
-    let D = !1;
+  if (_) {
+    const l = C(), m = E(l);
+    let S = !1;
     return Y(
       () => t[n],
-      (S) => {
-        D || (D = !0, T.value = r(S), Oe(() => D = !1));
+      (y) => {
+        S || (S = !0, m.value = U(y), Oe(() => S = !1));
       }
     ), Y(
-      T,
-      (S) => {
-        !D && (S !== t[n] || l) && f(S);
+      m,
+      (y) => {
+        !S && (y !== t[n] || T) && s(y);
       },
-      { deep: l }
-    ), T;
+      { deep: T }
+    ), m;
   } else
-    return V({
+    return W({
       get() {
-        return o();
+        return C();
       },
-      set(p) {
-        f(p);
+      set(l) {
+        s(l);
       }
     });
 }
-const [ve, nt] = Ge("DrawerRoot"), Pe = /* @__PURE__ */ new WeakMap();
+const [de, at] = Je("DrawerRoot"), Re = /* @__PURE__ */ new WeakMap();
 function $(t, n, v = !1) {
   if (!t || !(t instanceof HTMLElement) || !n)
     return;
-  const s = {};
+  const r = {};
   Object.entries(n).forEach(([e, b]) => {
@@ -61,22 +61,22 @@ if (e.startsWith("--")) {
     }
-    s[e] = t.style[e], t.style[e] = b;
-  }), !v && Pe.set(t, s);
+    r[e] = t.style[e], t.style[e] = b;
+  }), !v && Re.set(t, r);
 }
-function ne(t, n) {
+function ae(t, n) {
   if (!t || !(t instanceof HTMLElement))
     return;
-  const v = Pe.get(t);
-  v && (n ? t.style[n] = v[n] : Object.entries(v).forEach(([s, e]) => {
-    t.style[s] = e;
+  const v = Re.get(t);
+  v && (n ? t.style[n] = v[n] : Object.entries(v).forEach(([r, e]) => {
+    t.style[r] = e;
   }));
 }
-function ae(t, n) {
-  const v = window.getComputedStyle(t), s = v.transform || v.webkitTransform || v.mozTransform;
-  let e = s.match(/^matrix3d\((.+)\)$/);
-  return e ? Number.parseFloat(e[1].split(", ")[N(n) ? 13 : 12]) : (e = s.match(/^matrix\((.+)\)$/), e ? Number.parseFloat(e[1].split(", ")[N(n) ? 5 : 4]) : null);
+function le(t, n) {
+  const v = window.getComputedStyle(t), r = v.transform || v.webkitTransform || v.mozTransform;
+  let e = r.match(/^matrix3d\((.+)\)$/);
+  return e ? Number.parseFloat(e[1].split(", ")[P(n) ? 13 : 12]) : (e = r.match(/^matrix\((.+)\)$/), e ? Number.parseFloat(e[1].split(", ")[P(n) ? 5 : 4]) : null);
 }
-function at(t) {
+function lt(t) {
   return 8 * (Math.log(t + 1) - 2);
 }
-function N(t) {
+function P(t) {
   switch (t) {
@@ -93,11 +93,11 @@ case "top":
 }
-const g = {
+const w = {
   DURATION: 0.5,
   EASE: [0.32, 0.72, 0, 1]
-}, Re = 0.4;
-function lt({
+}, Pe = 0.4;
+function ot({
   activeSnapPoint: t,
   snapPoints: n,
   drawerRef: v,
-  overlayRef: s,
+  overlayRef: r,
   fadeFromIndex: e,
@@ -107,54 +107,69 @@ onSnapPointChange: b,
 }) {
-  const O = V(
+  const f = E(typeof window < "u" ? {
+    innerWidth: window.innerWidth,
+    innerHeight: window.innerHeight
+  } : void 0);
+  function _() {
+    f.value = {
+      innerWidth: window.innerWidth,
+      innerHeight: window.innerHeight
+    };
+  }
+  Te(() => {
+    typeof window < "u" && window.addEventListener("resize", _);
+  }), Ie(() => {
+    typeof window < "u" && window.removeEventListener("resize", _);
+  });
+  const O = W(
     () => (n.value && t.value === n.value[n.value.length - 1]) ?? null
-  ), x = V(
+  ), T = W(
     () => n.value && n.value.length > 0 && ((e == null ? void 0 : e.value) || (e == null ? void 0 : e.value) === 0) && !Number.isNaN(e == null ? void 0 : e.value) && n.value[(e == null ? void 0 : e.value) ?? -1] === t.value || !n.value
-  ), d = V(
+  ), c = W(
     () => {
-      var r;
-      return ((r = n.value) == null ? void 0 : r.findIndex((o) => o === t.value)) ?? null;
+      var s;
+      return ((s = n.value) == null ? void 0 : s.findIndex((l) => l === t.value)) ?? null;
     }
-  ), l = V(
+  ), i = W(
     () => {
-      var r;
-      return ((r = n.value) == null ? void 0 : r.map((o) => {
-        const f = typeof window < "u", p = typeof o == "string";
-        let T = 0;
-        if (p && (T = Number.parseInt(o, 10)), N(u.value)) {
-          const S = p ? T : f ? o * window.innerHeight : 0;
-          return f ? u.value === "bottom" ? window.innerHeight - S : -window.innerHeight + S : S;
+      var s;
+      return ((s = n.value) == null ? void 0 : s.map((l) => {
+        const m = typeof l == "string";
+        let S = 0;
+        if (m && (S = Number.parseInt(l, 10)), P(u.value)) {
+          const x = m ? S : f.value ? l * f.value.innerHeight : 0;
+          return f.value ? u.value === "bottom" ? f.value.innerHeight - x : -f.value.innerHeight + x : x;
         }
-        const D = p ? T : f ? o * window.innerWidth : 0;
-        return f ? u.value === "right" ? window.innerWidth - D : -window.innerWidth + D : D;
+        const y = m ? S : f.value ? l * f.value.innerWidth : 0;
+        return f.value ? u.value === "right" ? f.value.innerWidth - y : -f.value.innerWidth + y : y;
       })) ?? [];
     }
-  ), w = V(
+  ), D = W(
     () => {
-      var r;
-      return d.value !== null ? (r = l.value) == null ? void 0 : r[d.value] : null;
+      var s;
+      return c.value !== null ? (s = i.value) == null ? void 0 : s[c.value] : null;
     }
-  ), R = (r) => {
-    var f, p, T, D;
-    const o = ((f = l.value) == null ? void 0 : f.findIndex((S) => S === r)) ?? null;
+  ), p = (s) => {
+    var m, S, y, x;
+    const l = ((m = i.value) == null ? void 0 : m.findIndex((M) => M === s)) ?? null;
     Oe(() => {
-      var S;
-      b(o, l.value), $((S = v.value) == null ? void 0 : S.$el, {
-        transition: `transform ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
-        transform: N(u.value) ? `translate3d(0, ${r}px, 0)` : `translate3d(${r}px, 0, 0)`
+      var M;
+      b(l, i.value), $((M = v.value) == null ? void 0 : M.$el, {
+        transition: `transform ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
+        transform: P(u.value) ? `translate3d(0, ${s}px, 0)` : `translate3d(${s}px, 0, 0)`
       });
-    }), l.value && o !== l.value.length - 1 && o !== (e == null ? void 0 : e.value) ? $((p = s.value) == null ? void 0 : p.$el, {
-      transition: `opacity ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
+    }), i.value && l !== i.value.length - 1 && l !== (e == null ? void 0 : e.value) ? $((S = r.value) == null ? void 0 : S.$el, {
+      transition: `opacity ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
       opacity: "0"
-    }) : $((T = s.value) == null ? void 0 : T.$el, {
-      transition: `opacity ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
+    }) : $((y = r.value) == null ? void 0 : y.$el, {
+      transition: `opacity ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
       opacity: "1"
-    }), t.value = o !== null ? ((D = n.value) == null ? void 0 : D[o]) ?? null : null;
+    }), t.value = l !== null ? ((x = n.value) == null ? void 0 : x[l]) ?? null : null;
   };
   Y(
-    [t, l, n],
+    [t, i, n],
     () => {
-      var r;
+      var s;
       if (t.value) {
-        const o = ((r = n.value) == null ? void 0 : r.findIndex((f) => f === t.value)) ?? -1;
-        l.value && o !== -1 && typeof l.value[o] == "number" && R(l.value[o]);
+        const l = ((s = n.value) == null ? void 0 : s.findIndex((m) => m === t.value)) ?? -1;
+        i.value && l !== -1 && typeof i.value[l] == "number" && p(i.value[l]);
       }
@@ -167,74 +182,74 @@ },
   );
-  function A({
-    draggedDistance: r,
-    closeDrawer: o,
-    velocity: f,
-    dismissible: p
+  function o({
+    draggedDistance: s,
+    closeDrawer: l,
+    velocity: m,
+    dismissible: S
   }) {
-    var W, X, z;
-    if (e === void 0)
+    var z, F, d;
+    if (e.value === void 0)
       return;
-    const T = u.value === "bottom" || u.value === "right" ? (w.value ?? 0) - r : (w.value ?? 0) + r, D = d.value === (e.value ?? 0) - 1, S = d.value === 0, L = r > 0;
-    if (D && $((W = s.value) == null ? void 0 : W.$el, {
-      transition: `opacity ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`
-    }), f > 2 && !L) {
-      p ? o() : R(l.value[0]);
+    const y = u.value === "bottom" || u.value === "right" ? (D.value ?? 0) - s : (D.value ?? 0) + s, x = c.value === e.value - 1, M = c.value === 0, j = s > 0;
+    if (x && $((z = r.value) == null ? void 0 : z.$el, {
+      transition: `opacity ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`
+    }), m > 2 && !j) {
+      S ? l() : p(i.value[0]);
       return;
     }
-    if (f > 2 && L && l && n.value) {
-      R(l.value[n.value.length - 1]);
+    if (m > 2 && j && i && n.value) {
+      p(i.value[n.value.length - 1]);
       return;
     }
-    const Z = (X = l.value) == null ? void 0 : X.reduce((U, c) => typeof U != "number" || typeof c != "number" ? U : Math.abs(c - T) < Math.abs(U - T) ? c : U), j = N(u.value) ? window.innerHeight : window.innerWidth;
-    if (f > Re && Math.abs(r) < j * 0.4) {
-      const U = L ? 1 : -1;
-      if (U > 0 && O) {
-        R(l.value[(((z = n.value) == null ? void 0 : z.length) ?? 0) - 1]);
+    const X = (F = i.value) == null ? void 0 : F.reduce((L, B) => typeof L != "number" || typeof B != "number" ? L : Math.abs(B - y) < Math.abs(L - y) ? B : L), K = P(u.value) ? window.innerHeight : window.innerWidth;
+    if (m > Pe && Math.abs(s) < K * 0.4) {
+      const L = j ? 1 : -1;
+      if (L > 0 && O) {
+        p(i.value[(((d = n.value) == null ? void 0 : d.length) ?? 0) - 1]);
         return;
       }
-      if (S && U < 0 && p && o(), d.value === null)
+      if (M && L < 0 && S && l(), c.value === null)
         return;
-      R(l.value[d.value + U]);
+      p(i.value[c.value + L]);
       return;
     }
-    R(Z);
+    p(X);
   }
-  function y({ draggedDistance: r }) {
-    var f;
-    if (w.value === null)
+  function U({ draggedDistance: s }) {
+    var m;
+    if (D.value === null)
       return;
-    const o = u.value === "bottom" || u.value === "right" ? (w.value ?? 0) - r : (w.value ?? 0) + r;
-    (u.value === "bottom" || u.value === "right") && o < l.value[l.value.length - 1] || (u.value === "top" || u.value === "left") && o > l.value[l.value.length - 1] || $((f = v.value) == null ? void 0 : f.$el, {
-      transform: N(u.value) ? `translate3d(0, ${o}px, 0)` : `translate3d(${o}px, 0, 0)`
+    const l = u.value === "bottom" || u.value === "right" ? D.value - s : D.value + s;
+    (u.value === "bottom" || u.value === "right") && l < i.value[i.value.length - 1] || (u.value === "top" || u.value === "left") && l > i.value[i.value.length - 1] || $((m = v.value) == null ? void 0 : m.$el, {
+      transform: P(u.value) ? `translate3d(0, ${l}px, 0)` : `translate3d(${l}px, 0, 0)`
     });
   }
-  function i(r, o) {
-    if (!n || typeof d.value != "number" || !l.value || e === void 0)
+  function C(s, l) {
+    if (!n.value || typeof c.value != "number" || !i.value || e.value === void 0)
       return null;
-    const f = d.value === (e.value ?? 0) - 1;
-    if (d.value >= (e.value ?? 0) && o)
+    const m = c.value === e.value - 1;
+    if (c.value >= e.value && l)
       return 0;
-    if (f && !o)
+    if (m && !l)
       return 1;
-    if (!x.value && !f)
+    if (!T.value && !m)
       return null;
-    const T = f ? d.value + 1 : d.value - 1, D = f ? l.value[T] - l.value[T - 1] : l.value[T + 1] - l.value[T], S = r / Math.abs(D);
-    return f ? 1 - S : S;
+    const y = m ? c.value + 1 : c.value - 1, x = m ? i.value[y] - i.value[y - 1] : i.value[y + 1] - i.value[y], M = s / Math.abs(x);
+    return m ? 1 - M : M;
   }
   return {
     isLastSnapPoint: O,
-    shouldFade: x,
-    getPercentageDragged: i,
-    activeSnapPointIndex: d,
-    onRelease: A,
-    onDrag: y,
-    snapPointsOffset: l
+    shouldFade: T,
+    getPercentageDragged: C,
+    activeSnapPointIndex: c,
+    onRelease: o,
+    onDrag: U,
+    snapPointsOffset: i
   };
 }
-let Q = null;
-function ot(t) {
-  const { isOpen: n, modal: v, nested: s, hasBeenOpened: e } = t, b = P(typeof window < "u" ? window.location.href : ""), u = P(0);
-  function O() {
-    if (Q === null && n.value) {
-      Q = {
+let Z = null;
+function it(t) {
+  const { isOpen: n, modal: v, nested: r, hasBeenOpened: e } = t, b = E(typeof window < "u" ? window.location.href : ""), u = E(0);
+  function f() {
+    if (Z === null && n.value) {
+      Z = {
         position: document.body.style.position,
@@ -245,7 +260,7 @@ top: document.body.style.top,
       };
-      const { scrollX: d, innerHeight: l } = window;
-      document.body.style.position = "fixed", document.body.style.top = `-${u.value}px`, document.body.style.left = `-${d}px`, document.body.style.right = "0px", document.body.style.height = "auto", setTimeout(() => {
+      const { scrollX: O, innerHeight: T } = window;
+      document.body.style.position = "fixed", document.body.style.top = `-${u.value}px`, document.body.style.left = `-${O}px`, document.body.style.right = "0px", document.body.style.height = "auto", setTimeout(() => {
         requestAnimationFrame(() => {
-          const w = l - window.innerHeight;
-          w && u.value >= l && (document.body.style.top = `-${u.value + w}px`);
+          const c = T - window.innerHeight;
+          c && u.value >= T && (document.body.style.top = `-${u.value + c}px`);
         });
@@ -255,6 +270,6 @@ }, 300);
   }
-  function x() {
-    if (Q !== null) {
-      const d = -Number.parseInt(document.body.style.top, 10), l = -Number.parseInt(document.body.style.left, 10);
-      Object.assign(document.body.style, Q), requestAnimationFrame(() => {
+  function _() {
+    if (Z !== null) {
+      const O = -Number.parseInt(document.body.style.top, 10), T = -Number.parseInt(document.body.style.left, 10);
+      Object.assign(document.body.style, Z), requestAnimationFrame(() => {
         if (b.value !== window.location.href) {
@@ -264,96 +279,96 @@ b.value = window.location.href;
         }
-        window.scrollTo(l, d);
-      }), Q = null;
+        window.scrollTo(T, O);
+      }), Z = null;
     }
   }
-  return ze(() => {
-    function d() {
+  return Te(() => {
+    function O() {
       u.value = window.scrollY;
     }
-    d(), window.addEventListener("scroll", d), Te(() => {
-      window.removeEventListener("scroll", d);
+    O(), window.addEventListener("scroll", O), Ee(() => {
+      window.removeEventListener("scroll", O);
     });
   }), Y([n, e, b], () => {
-    s.value || !e.value || (n.value ? (!window.matchMedia("(display-mode: standalone)").matches && O(), v.value || setTimeout(() => {
-      x();
-    }, 500)) : x());
-  }), { restorePositionSetting: x };
+    r.value || !e.value || (n.value ? (!window.matchMedia("(display-mode: standalone)").matches && f(), v.value || setTimeout(() => {
+      _();
+    }, 500)) : _());
+  }), { restorePositionSetting: _ };
 }
-const it = 0.25, rt = 100, De = 8, q = 16, ut = 26, Se = "vaul-dragging";
-function st(t, n) {
+const rt = 0.25, ut = 100, De = 8, q = 16, st = 26, Se = "vaul-dragging";
+function ct(t, n) {
   return t && t.value ? t : n;
 }
-function ct(t) {
+function vt(t) {
   const {
     emitDrag: n,
     emitRelease: v,
-    emitClose: s,
+    emitClose: r,
     emitOpenChange: e,
     open: b,
     dismissible: u,
-    nested: O,
-    fixed: x,
-    modal: d,
-    shouldScaleBackground: l,
-    scrollLockTimeout: w,
-    closeThreshold: R,
-    activeSnapPoint: A,
-    fadeFromIndex: y,
-    direction: i
-  } = t, r = P(b.value ?? !1), o = P(!1), f = P(!1), p = P(!1), T = P(!1), D = P(null), S = P(null), L = P(null), Z = P(null), j = P(null), W = P(!0), X = P(null), z = P(0), U = P(!1);
-  P(0);
-  const c = P(null);
-  P(0);
-  const de = V(() => {
+    nested: f,
+    fixed: _,
+    modal: O,
+    shouldScaleBackground: T,
+    scrollLockTimeout: c,
+    closeThreshold: i,
+    activeSnapPoint: D,
+    fadeFromIndex: p,
+    direction: o
+  } = t, U = E(b.value ?? !1), C = E(!1), s = E(!1), l = E(!1), m = E(!1), S = E(null), y = E(null), x = E(null), M = E(null), j = E(null), X = E(!0), K = E(null), z = E(0), F = E(!1);
+  E(0);
+  const d = E(null);
+  E(0);
+  const L = W(() => {
     var a;
-    return ((a = c.value) == null ? void 0 : a.$el.getBoundingClientRect().height) || 0;
-  }), H = st(
+    return ((a = d.value) == null ? void 0 : a.$el.getBoundingClientRect().height) || 0;
+  }), B = ct(
     t.snapPoints,
-    P(void 0)
+    E(void 0)
   ), {
     activeSnapPointIndex: fe,
-    onRelease: Ee,
-    snapPointsOffset: Ne,
-    onDrag: Ae,
+    onRelease: Ne,
+    snapPointsOffset: Ae,
+    onDrag: _e,
     shouldFade: pe,
-    getPercentageDragged: _e
-  } = lt({
-    snapPoints: H,
-    activeSnapPoint: A,
-    drawerRef: c,
-    fadeFromIndex: y,
-    overlayRef: D,
-    onSnapPointChange: Ce,
-    direction: i
+    getPercentageDragged: Ce
+  } = ot({
+    snapPoints: B,
+    activeSnapPoint: D,
+    drawerRef: d,
+    fadeFromIndex: p,
+    overlayRef: S,
+    onSnapPointChange: xe,
+    direction: o
   });
-  function Ce(a, m) {
-    H.value && a === m.length - 1 && (S.value = /* @__PURE__ */ new Date());
+  function xe(a, g) {
+    B.value && a === g.length - 1 && (y.value = /* @__PURE__ */ new Date());
   }
-  const { restorePositionSetting: xe } = ot({
-    isOpen: r,
-    modal: d,
-    nested: O,
-    hasBeenOpened: o
+  const { restorePositionSetting: Be } = it({
+    isOpen: U,
+    modal: O,
+    nested: f,
+    hasBeenOpened: C
   });
   function G() {
-    return (window.innerWidth - ut) / window.innerWidth;
+    return (window.innerWidth - st) / window.innerWidth;
   }
-  function me(a, m) {
-    var M;
+  function me(a, g) {
+    var V;
     if (!a)
       return !1;
     let h = a;
-    const _ = (M = window.getSelection()) == null ? void 0 : M.toString(), E = c.value ? ae(c.value.$el, i.value) : null, B = /* @__PURE__ */ new Date();
+    const N = (V = window.getSelection()) == null ? void 0 : V.toString(), R = d.value ? le(d.value.$el, o.value) : null, H = /* @__PURE__ */ new Date();
     if (h.hasAttribute("data-vaul-no-drag") || h.closest("[data-vaul-no-drag]"))
       return !1;
-    if (i.value === "right" || i.value === "left")
+    if (o.value === "right" || o.value === "left")
       return !0;
-    if (S.value && B.getTime() - S.value.getTime() < 500)
+    if (y.value && H.getTime() - y.value.getTime() < 500)
       return !1;
-    if (E !== null && (i.value === "bottom" ? E > 0 : E < 0))
+    if (R !== null && (o.value === "bottom" ? R > 0 : R < 0))
       return !0;
-    if (_ && _.length > 0)
+    if (N && N.length > 0)
       return !1;
-    if (j.value && B.getTime() - j.value.getTime() < w.value && E === 0 || m)
-      return j.value = B, !1;
+    if (j.value && H.getTime() - j.value.getTime() < c.value && R === 0 || g)
+      return j.value = H, !1;
     for (; h; ) {
@@ -370,30 +385,30 @@ if (h.scrollHeight > h.clientHeight) {
   }
-  function Be(a) {
-    !u.value && !H.value || c.value && !c.value.$el.contains(a.target) || (p.value = !0, L.value = /* @__PURE__ */ new Date(), a.target.setPointerCapture(a.pointerId), z.value = N(i.value) ? a.clientY : a.clientX);
+  function He(a) {
+    !u.value && !B.value || d.value && !d.value.$el.contains(a.target) || (l.value = !0, x.value = /* @__PURE__ */ new Date(), a.target.setPointerCapture(a.pointerId), z.value = P(o.value) ? a.clientY : a.clientX);
   }
-  function He(a) {
-    var m, h, _, E, B, M;
-    if (c.value && p.value) {
-      const J = i.value === "bottom" || i.value === "right" ? 1 : -1, F = (z.value - (N(i.value) ? a.clientY : a.clientX)) * J, ee = F > 0, we = H.value && !u.value && !ee;
+  function Ue(a) {
+    var g, h, N, R, H, V;
+    if (d.value && l.value) {
+      const J = o.value === "bottom" || o.value === "right" ? 1 : -1, ee = (z.value - (P(o.value) ? a.clientY : a.clientX)) * J, te = ee > 0, we = B.value && !u.value && !te;
       if (we && fe.value === 0)
         return;
-      const ue = Math.abs(F), he = document.querySelector("[vaul-drawer-wrapper]");
-      let k = ue / de.value;
-      const be = _e(ue, ee);
-      if (be !== null && (k = be), we && k >= 1 || !W.value && !me(a.target, ee))
+      const se = Math.abs(ee), he = document.querySelector("[vaul-drawer-wrapper]");
+      let I = se / L.value;
+      const be = Ce(se, te);
+      if (be !== null && (I = be), we && I >= 1 || !X.value && !me(a.target, te))
         return;
-      if ((m = c == null ? void 0 : c.value) == null || m.$el.classList.add(Se), W.value = !0, $((h = c.value) == null ? void 0 : h.$el, {
+      if ((g = d == null ? void 0 : d.value) == null || g.$el.classList.add(Se), X.value = !0, $((h = d.value) == null ? void 0 : h.$el, {
         transition: "none"
-      }), $((_ = D.value) == null ? void 0 : _.$el, {
+      }), $((N = S.value) == null ? void 0 : N.$el, {
         transition: "none"
-      }), H.value && Ae({ draggedDistance: F }), ee && !H.value) {
-        const I = at(F), te = Math.min(I * -1, 0) * J;
-        $((E = c.value) == null ? void 0 : E.$el, {
-          transform: N(i.value) ? `translate3d(0, ${te}px, 0)` : `translate3d(${te}px, 0, 0)`
+      }), B.value && _e({ draggedDistance: ee }), te && !B.value) {
+        const k = lt(ee), ne = Math.min(k * -1, 0) * J;
+        $((R = d.value) == null ? void 0 : R.$el, {
+          transform: P(o.value) ? `translate3d(0, ${ne}px, 0)` : `translate3d(${ne}px, 0, 0)`
         });
         return;
       }
-      const je = 1 - k;
-      if ((pe.value || y.value && fe.value === y.value - 1) && (n(k), $(
-        (B = D.value) == null ? void 0 : B.$el,
+      const je = 1 - I;
+      if ((pe.value || p.value && fe.value === p.value - 1) && (n(I), $(
+        (H = S.value) == null ? void 0 : H.$el,
         {
@@ -404,9 +419,9 @@ opacity: `${je}`,
         !0
-      )), he && D.value && l.value) {
-        const I = Math.min(G() + k * (1 - G()), 1), te = 8 - k * 8, $e = Math.max(0, 14 - k * 14);
+      )), he && S.value && T.value) {
+        const k = Math.min(G() + I * (1 - G()), 1), ne = 8 - I * 8, ye = Math.max(0, 14 - I * 14);
         $(
           he,
           {
-            borderRadius: `${te}px`,
-            transform: N(i.value) ? `scale(${I}) translate3d(0, ${$e}px, 0)` : `scale(${I}) translate3d(${$e}px, 0, 0)`,
+            borderRadius: `${ne}px`,
+            transform: P(o.value) ? `scale(${k}) translate3d(0, ${ye}px, 0)` : `scale(${k}) translate3d(${ye}px, 0, 0)`,
             transition: "none"
@@ -417,6 +432,6 @@ },
       }
-      if (!H.value) {
-        const I = ue * J;
-        $((M = c.value) == null ? void 0 : M.$el, {
-          transform: N(i.value) ? `translate3d(0, ${I}px, 0)` : `translate3d(${I}px, 0, 0)`
+      if (!B.value) {
+        const k = se * J;
+        $((V = d.value) == null ? void 0 : V.$el, {
+          transform: P(o.value) ? `translate3d(0, ${k}px, 0)` : `translate3d(${k}px, 0, 0)`
         });
@@ -428,12 +443,12 @@ }
     var h;
-    if (!c.value)
+    if (!d.value)
       return;
-    const a = document.querySelector("[vaul-drawer-wrapper]"), m = ae(c.value.$el, i.value);
-    $(c.value.$el, {
+    const a = document.querySelector("[vaul-drawer-wrapper]"), g = le(d.value.$el, o.value);
+    $(d.value.$el, {
       transform: "translate3d(0, 0, 0)",
-      transition: `transform ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`
-    }), $((h = D.value) == null ? void 0 : h.$el, {
-      transition: `opacity ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
+      transition: `transform ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`
+    }), $((h = S.value) == null ? void 0 : h.$el, {
+      transition: `opacity ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
       opacity: "1"
-    }), l.value && m && m > 0 && r.value && $(
+    }), T.value && g && g > 0 && U.value && $(
       a,
@@ -443,3 +458,3 @@ {
         overflow: "hidden",
-        ...N(i.value) ? {
+        ...P(o.value) ? {
           transform: `scale(${G()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
@@ -452,4 +467,4 @@ transformOrigin: "top"
         transitionProperty: "transform, border-radius",
-        transitionDuration: `${g.DURATION}s`,
-        transitionTimingFunction: `cubic-bezier(${g.EASE.join(",")})`
+        transitionDuration: `${w.DURATION}s`,
+        transitionTimingFunction: `cubic-bezier(${w.EASE.join(",")})`
       },
@@ -459,42 +474,42 @@ !0
   }
-  function K() {
+  function Q() {
     var a;
-    c.value && ($(c.value.$el, {
-      transform: N(i.value) ? `translate3d(0, ${i.value === "bottom" ? "100%" : "-100%"}, 0)` : `translate3d(${i.value === "right" ? "100%" : "-100%"}, 0, 0)`,
-      transition: `transform ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`
-    }), $((a = D.value) == null ? void 0 : a.$el, {
+    d.value && (r(), $(d.value.$el, {
+      transform: P(o.value) ? `translate3d(0, ${o.value === "bottom" ? "100%" : "-100%"}, 0)` : `translate3d(${o.value === "right" ? "100%" : "-100%"}, 0, 0)`,
+      transition: `transform ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`
+    }), $((a = S.value) == null ? void 0 : a.$el, {
       opacity: "0",
-      transition: `opacity ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`
-    }), re(!1), window.setTimeout(() => {
-      f.value = !1, r.value = !1;
+      transition: `opacity ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`
+    }), ue(!1), window.setTimeout(() => {
+      s.value = !1, U.value = !1;
     }, 300), window.setTimeout(() => {
-      H.value && (A.value = H.value[0]);
-    }, g.DURATION * 1e3));
+      B.value && (D.value = B.value[0]);
+    }, w.DURATION * 1e3));
   }
   ke(() => {
-    if (!r.value && l.value && Fe) {
+    if (!U.value && T.value && et) {
       const a = setTimeout(() => {
-        ne(document.body);
+        ae(document.body);
       }, 200);
       return () => clearTimeout(a);
     }
-  }), Te(() => {
-    re(!1), xe();
+  }), Ee(() => {
+    ue(!1), Be();
   });
-  function Ue(a) {
-    if (!p.value || !c.value)
+  function Me(a) {
+    if (!l.value || !d.value)
       return;
-    c.value.$el.classList.remove(Se), W.value = !1, p.value = !1, Z.value = /* @__PURE__ */ new Date();
-    const m = ae(c.value.$el, i.value);
-    if (!me(a.target, !1) || !m || Number.isNaN(m) || L.value === null)
+    d.value.$el.classList.remove(Se), X.value = !1, l.value = !1, M.value = /* @__PURE__ */ new Date();
+    const g = le(d.value.$el, o.value);
+    if (!me(a.target, !1) || !g || Number.isNaN(g) || x.value === null)
       return;
-    const h = Z.value.getTime() - L.value.getTime(), _ = z.value - (N(i.value) ? a.clientY : a.clientX), E = Math.abs(_) / h;
-    if (E > 0.05 && (T.value = !0, window.setTimeout(() => {
-      T.value = !1;
-    }, 200)), H.value) {
-      const M = i.value === "bottom" || i.value === "right" ? 1 : -1;
-      Ee({
-        draggedDistance: _ * M,
-        closeDrawer: K,
-        velocity: E,
+    const h = M.value.getTime() - x.value.getTime(), N = z.value - (P(o.value) ? a.clientY : a.clientX), R = Math.abs(N) / h;
+    if (R > 0.05 && (m.value = !0, window.setTimeout(() => {
+      m.value = !1;
+    }, 200)), B.value) {
+      const V = o.value === "bottom" || o.value === "right" ? 1 : -1;
+      Ne({
+        draggedDistance: N * V,
+        closeDrawer: Q,
+        velocity: R,
         dismissible: u.value
@@ -504,16 +519,16 @@ }), v(!0);
     }
-    if (i.value === "bottom" || i.value === "right" ? _ > 0 : _ < 0) {
+    if (o.value === "bottom" || o.value === "right" ? N > 0 : N < 0) {
       ge(), v(!0);
       return;
     }
-    if (E > Re) {
-      K(), v(!1);
+    if (R > Pe) {
+      Q(), v(!1);
       return;
     }
-    const B = Math.min(
-      c.value.$el.getBoundingClientRect().height ?? 0,
+    const H = Math.min(
+      d.value.$el.getBoundingClientRect().height ?? 0,
       window.innerHeight
     );
-    if (m >= B * R.value) {
-      K(), v(!1);
+    if (g >= H * i.value) {
+      Q(), v(!1);
       return;
@@ -523,10 +538,10 @@ }
   }
-  Y(r, (a) => {
-    a && (S.value = /* @__PURE__ */ new Date(), re(!0)), e(a);
+  Y(U, (a) => {
+    a && (y.value = /* @__PURE__ */ new Date(), ue(!0)), e(a);
   }, { immediate: !0 }), Y(b, (a) => {
-    a ? (r.value = a, o.value = !0) : K();
+    a ? (U.value = a, C.value = !0) : Q();
   }, { immediate: !0 });
-  function re(a) {
-    const m = document.querySelector("[vaul-drawer-wrapper]");
-    !m || !l.value || (a ? ($(document.body, {
+  function ue(a) {
+    const g = document.querySelector("[vaul-drawer-wrapper]");
+    !g || !T.value || (a ? ($(document.body, {
       background: document.body.style.backgroundColor || document.body.style.background
@@ -539,6 +554,6 @@ }), $(
       !0
-    ), $(m, {
+    ), $(g, {
       borderRadius: `${De}px`,
       overflow: "hidden",
-      ...N(i.value) ? {
+      ...P(o.value) ? {
         transform: `scale(${G()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
@@ -551,22 +566,22 @@ transformOrigin: "top"
       transitionProperty: "transform, border-radius",
-      transitionDuration: `${g.DURATION}s`,
-      transitionTimingFunction: `cubic-bezier(${g.EASE.join(",")})`
-    })) : (ne(m, "overflow"), ne(m, "transform"), ne(m, "borderRadius"), $(m, {
+      transitionDuration: `${w.DURATION}s`,
+      transitionTimingFunction: `cubic-bezier(${w.EASE.join(",")})`
+    })) : (ae(g, "overflow"), ae(g, "transform"), ae(g, "borderRadius"), $(g, {
       transitionProperty: "transform, border-radius",
-      transitionDuration: `${g.DURATION}s`,
-      transitionTimingFunction: `cubic-bezier(${g.EASE.join(",")})`
+      transitionDuration: `${w.DURATION}s`,
+      transitionTimingFunction: `cubic-bezier(${w.EASE.join(",")})`
     })));
   }
-  function Me(a) {
-    var _, E;
-    const m = a ? (window.innerWidth - q) / window.innerWidth : 1, h = a ? -q : 0;
-    X.value && window.clearTimeout(X.value), $((_ = c.value) == null ? void 0 : _.$el, {
-      transition: `transform ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
-      transform: `scale(${m}) translate3d(0, ${h}px, 0)`
-    }), !a && ((E = c.value) != null && E.$el) && (X.value = window.setTimeout(() => {
-      var M, J;
-      const B = ae((M = c.value) == null ? void 0 : M.$el, i.value);
-      $((J = c.value) == null ? void 0 : J.$el, {
+  function Le(a) {
+    var N, R;
+    const g = a ? (window.innerWidth - q) / window.innerWidth : 1, h = a ? -q : 0;
+    K.value && window.clearTimeout(K.value), $((N = d.value) == null ? void 0 : N.$el, {
+      transition: `transform ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
+      transform: `scale(${g}) translate3d(0, ${h}px, 0)`
+    }), !a && ((R = d.value) != null && R.$el) && (K.value = window.setTimeout(() => {
+      var V, J;
+      const H = le((V = d.value) == null ? void 0 : V.$el, o.value);
+      $((J = d.value) == null ? void 0 : J.$el, {
         transition: "none",
-        transform: N(i.value) ? `translate3d(0, ${B}px, 0)` : `translate3d(${B}px, 0, 0)`
+        transform: P(o.value) ? `translate3d(0, ${H}px, 0)` : `translate3d(${H}px, 0, 0)`
       });
@@ -576,17 +591,17 @@ }, 500));
   function Ve(a) {
-    var B;
+    var H;
     if (a < 0)
       return;
-    const m = N(i.value) ? window.innerHeight : window.innerWidth, h = (m - q) / m, _ = h + a * (1 - h), E = -q + a * q;
-    $((B = c.value) == null ? void 0 : B.$el, {
-      transform: N(i.value) ? `scale(${_}) translate3d(0, ${E}px, 0)` : `scale(${_}) translate3d(${E}px, 0, 0)`,
+    const g = P(o.value) ? window.innerHeight : window.innerWidth, h = (g - q) / g, N = h + a * (1 - h), R = -q + a * q;
+    $((H = d.value) == null ? void 0 : H.$el, {
+      transform: P(o.value) ? `scale(${N}) translate3d(0, ${R}px, 0)` : `scale(${N}) translate3d(${R}px, 0, 0)`,
       transition: "none"
     });
   }
-  function Le(a) {
-    var E;
-    const m = N(i.value) ? window.innerHeight : window.innerWidth, h = a ? (m - q) / m : 1, _ = a ? -q : 0;
-    a && $((E = c.value) == null ? void 0 : E.$el, {
-      transition: `transform ${g.DURATION}s cubic-bezier(${g.EASE.join(",")})`,
-      transform: N(i.value) ? `scale(${h}) translate3d(0, ${_}px, 0)` : `scale(${h}) translate3d(${_}px, 0, 0)`
+  function We(a) {
+    var R;
+    const g = P(o.value) ? window.innerHeight : window.innerWidth, h = a ? (g - q) / g : 1, N = a ? -q : 0;
+    a && $((R = d.value) == null ? void 0 : R.$el, {
+      transition: `transform ${w.DURATION}s cubic-bezier(${w.EASE.join(",")})`,
+      transform: P(o.value) ? `scale(${h}) translate3d(0, ${N}px, 0)` : `scale(${h}) translate3d(${N}px, 0, 0)`
     });
@@ -596,43 +611,43 @@ }
     open: b,
-    isOpen: r,
-    modal: d,
-    keyboardIsOpen: U,
-    hasBeenOpened: o,
-    isVisible: f,
-    drawerRef: c,
-    drawerHeightRef: de,
-    overlayRef: D,
-    isDragging: p,
-    dragStartTime: L,
-    isAllowedToDrag: W,
-    snapPoints: H,
-    activeSnapPoint: A,
+    isOpen: U,
+    modal: O,
+    keyboardIsOpen: F,
+    hasBeenOpened: C,
+    isVisible: s,
+    drawerRef: d,
+    drawerHeightRef: L,
+    overlayRef: S,
+    isDragging: l,
+    dragStartTime: x,
+    isAllowedToDrag: X,
+    snapPoints: B,
+    activeSnapPoint: D,
     pointerStart: z,
     dismissible: u,
-    snapPointsOffset: Ne,
-    direction: i,
+    snapPointsOffset: Ae,
+    direction: o,
     shouldFade: pe,
-    fadeFromIndex: y,
-    shouldScaleBackground: l,
-    onPress: Be,
-    onDrag: He,
-    onRelease: Ue,
-    closeDrawer: K,
+    fadeFromIndex: p,
+    shouldScaleBackground: T,
+    onPress: He,
+    onDrag: Ue,
+    onRelease: Me,
+    closeDrawer: Q,
     onNestedDrag: Ve,
-    onNestedRelease: Le,
-    onNestedOpenChange: Me,
-    emitClose: s,
+    onNestedRelease: We,
+    onNestedOpenChange: Le,
+    emitClose: r,
     emitDrag: n,
     emitRelease: v,
     emitOpenChange: e,
-    nested: O
+    nested: f
   };
 }
-const vt = /* @__PURE__ */ le({
+const dt = /* @__PURE__ */ oe({
   __name: "DrawerRoot",
   props: {
     activeSnapPoint: { default: void 0 },
-    closeThreshold: { default: it },
+    closeThreshold: { default: rt },
     shouldScaleBackground: { type: Boolean, default: void 0 },
-    scrollLockTimeout: { default: rt },
+    scrollLockTimeout: { default: ut },
     fixed: { type: Boolean, default: void 0 },
@@ -648,23 +663,25 @@ dismissible: { type: Boolean, default: !0 },
   },
-  emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint"],
+  emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"],
   setup(t, { expose: n, emit: v }) {
-    const s = t, e = v;
-    Ie();
-    const b = V(() => s.fadeFromIndex ?? (s.snapPoints && s.snapPoints.length - 1)), u = ye(s, "open", e, {
-      defaultValue: s.defaultOpen,
-      passive: s.open === void 0
-    }), O = ye(s, "activeSnapPoint", e, {
-      passive: s.activeSnapPoint === void 0
-    }), x = {
-      emitDrag: (y) => e("drag", y),
-      emitRelease: (y) => e("release", y),
+    const r = t, e = v;
+    qe();
+    const b = W(() => r.fadeFromIndex ?? (r.snapPoints && r.snapPoints.length - 1)), u = $e(r, "open", e, {
+      defaultValue: r.defaultOpen,
+      passive: r.open === void 0
+    }), f = $e(r, "activeSnapPoint", e, {
+      passive: r.activeSnapPoint === void 0
+    }), _ = {
+      emitDrag: (p) => e("drag", p),
+      emitRelease: (p) => e("release", p),
       emitClose: () => e("close"),
-      emitOpenChange: (y) => {
-        e("update:open", y);
+      emitOpenChange: (p) => {
+        e("update:open", p), setTimeout(() => {
+          e("animationEnd", p);
+        }, w.DURATION * 1e3);
       }
-    }, { closeDrawer: d, hasBeenOpened: l, modal: w, isOpen: R } = nt(
-      ct({
-        ...x,
-        ...qe(s),
-        activeSnapPoint: O,
+    }, { closeDrawer: O, hasBeenOpened: T, modal: c, isOpen: i } = at(
+      vt({
+        ..._,
+        ...Ye(r),
+        activeSnapPoint: f,
         fadeFromIndex: b,
@@ -674,18 +691,18 @@ open: u
     );
-    function A(y) {
+    function D(p) {
       if (u.value !== void 0) {
-        x.emitOpenChange(y);
+        _.emitOpenChange(p);
         return;
       }
-      y ? (l.value = !0, R.value = y) : d();
+      p ? (T.value = !0, i.value = p) : O();
     }
     return n({
-      open: R
-    }), (y, i) => (oe(), ie(C(Je), {
-      open: C(R),
-      modal: C(w),
-      "onUpdate:open": A
+      open: i
+    }), (p, o) => (ie(), re(A(Ke), {
+      open: A(i),
+      modal: A(c),
+      "onUpdate:open": D
     }, {
-      default: se(() => [
-        ce(y.$slots, "default", { open: C(R) })
+      default: ce(() => [
+        ve(p.$slots, "default", { open: A(i) })
       ]),
@@ -695,3 +712,3 @@ _: 3
   }
-}), pt = /* @__PURE__ */ le({
+}), mt = /* @__PURE__ */ oe({
   __name: "DrawerRootNested",
@@ -713,24 +730,24 @@ props: {
   },
-  emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint"],
+  emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint", "animationEnd"],
   setup(t, { emit: n }) {
-    const v = t, s = n, { onNestedDrag: e, onNestedOpenChange: b, onNestedRelease: u } = ve();
-    function O() {
+    const v = t, r = n, { onNestedDrag: e, onNestedOpenChange: b, onNestedRelease: u } = de();
+    function f() {
       b(!1);
     }
-    function x(w) {
-      e(w);
+    function _(c) {
+      e(c);
     }
-    function d(w) {
-      w && b(w), s("update:open", w);
+    function O(c) {
+      c && b(c), r("update:open", c);
     }
-    const l = Ke(v, s);
-    return (w, R) => (oe(), ie(vt, Ye(C(l), {
+    const T = Qe(v, r);
+    return (c, i) => (ie(), re(dt, Xe(A(T), {
       nested: "",
-      onClose: O,
-      onDrag: x,
-      onRelease: C(u),
-      "onUpdate:open": d
+      onClose: f,
+      onDrag: _,
+      onRelease: A(u),
+      "onUpdate:open": O
     }), {
-      default: se(() => [
-        ce(w.$slots, "default")
+      default: ce(() => [
+        ve(c.$slots, "default")
       ]),
@@ -740,19 +757,19 @@ _: 3
   }
-}), mt = /* @__PURE__ */ le({
+}), gt = /* @__PURE__ */ oe({
   __name: "DrawerOverlay",
   setup(t) {
-    const { overlayRef: n, snapPoints: v, isVisible: s, isOpen: e, shouldFade: b } = ve(), u = V(() => {
-      var O;
-      return v && (((O = v.value) == null ? void 0 : O.length) ?? 0) > 0;
+    const { overlayRef: n, snapPoints: v, isVisible: r, isOpen: e, shouldFade: b } = de(), u = W(() => {
+      var f;
+      return v && (((f = v.value) == null ? void 0 : f.length) ?? 0) > 0;
     });
-    return (O, x) => (oe(), ie(C(Qe), {
+    return (f, _) => (ie(), re(A(Ze), {
       ref_key: "overlayRef",
       ref: n,
-      "vaul-drawer-visible": C(s) ? "true" : "false",
+      "vaul-drawer-visible": A(r) ? "true" : "false",
       "vaul-overlay": "",
-      "vaul-snap-points": C(e) && u.value ? "true" : "false",
-      "vaul-snap-points-overlay": C(e) && C(b) ? "true" : "false"
+      "vaul-snap-points": A(e) && u.value ? "true" : "false",
+      "vaul-snap-points-overlay": A(e) && A(b) ? "true" : "false"
     }, null, 8, ["vaul-drawer-visible", "vaul-snap-points", "vaul-snap-points-overlay"]));
   }
-}), gt = /* @__PURE__ */ le({
+}), wt = /* @__PURE__ */ oe({
   __name: "DrawerContent",
@@ -763,47 +780,47 @@ setup(t) {
       isOpen: v,
-      isVisible: s,
+      isVisible: r,
       snapPointsOffset: e,
       drawerRef: b,
       onPress: u,
-      onDrag: O,
-      onRelease: x,
-      modal: d,
-      emitOpenChange: l,
-      dismissible: w,
-      keyboardIsOpen: R,
-      closeDrawer: A,
-      direction: y
-    } = ve(), i = V(() => e.value && e.value.length > 0 ? `${e.value[0]}px` : "0");
-    function r(o) {
-      if (!d.value || o.defaultPrevented) {
-        o.preventDefault();
+      onDrag: f,
+      onRelease: _,
+      modal: O,
+      emitOpenChange: T,
+      dismissible: c,
+      keyboardIsOpen: i,
+      closeDrawer: D,
+      direction: p
+    } = de(), o = W(() => e.value && e.value.length > 0 ? `${e.value[0]}px` : "0");
+    function U(C) {
+      if (!O.value || C.defaultPrevented) {
+        C.preventDefault();
         return;
       }
-      R.value && (R.value = !1), o.preventDefault(), w.value && l(!1), !(!w.value || n.value !== void 0) && A();
+      i.value && (i.value = !1), C.preventDefault(), c.value && T(!1), !(!c.value || n.value !== void 0) && D();
     }
     return Y(
       v,
-      (o) => {
-        o && setTimeout(() => {
-          s.value = !0;
+      (C) => {
+        C && setTimeout(() => {
+          r.value = !0;
         }, 1);
       },
       { immediate: !0 }
-    ), (o, f) => (oe(), ie(C(Ze), {
+    ), (C, s) => (ie(), re(A(Fe), {
       ref_key: "drawerRef",
       ref: b,
       "vaul-drawer": "",
-      "vaul-drawer-direction": C(y),
-      "vaul-drawer-visible": C(s) ? "true" : "false",
-      style: Xe({ "--snap-point-height": i.value }),
-      onPointerdown: C(u),
-      onPointermove: C(O),
-      onPointerup: C(x),
-      onPointerDownOutside: r,
-      onEscapeKeyDown: f[0] || (f[0] = (p) => {
-        C(w) || p.preventDefault();
+      "vaul-drawer-direction": A(p),
+      "vaul-drawer-visible": A(r) ? "true" : "false",
+      style: Ge({ "--snap-point-height": o.value }),
+      onPointerdown: A(u),
+      onPointermove: A(f),
+      onPointerup: A(_),
+      onPointerDownOutside: U,
+      onEscapeKeyDown: s[0] || (s[0] = (l) => {
+        A(c) || l.preventDefault();
       })
     }, {
-      default: se(() => [
-        ce(o.$slots, "default")
+      default: ce(() => [
+        ve(C.$slots, "default")
       ]),
@@ -815,11 +832,11 @@ _: 3
 export {
-  bt as DrawerClose,
-  gt as DrawerContent,
+  yt as DrawerClose,
+  wt as DrawerContent,
   $t as DrawerDescription,
-  mt as DrawerOverlay,
-  yt as DrawerPortal,
-  vt as DrawerRoot,
-  pt as DrawerRootNested,
-  Dt as DrawerTitle,
-  St as DrawerTrigger
+  gt as DrawerOverlay,
+  Dt as DrawerPortal,
+  dt as DrawerRoot,
+  mt as DrawerRootNested,
+  St as DrawerTitle,
+  Ot as DrawerTrigger
 };

package.json

 {
   "name": "vaul-vue",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "repository": "https://github.com/Elliot-Alexander/vaul-vue",
@@ -6,0 +6,0 @@ "keywords": [

Fixed alerts

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70745

increased by3.35%

Number of package files

17

increased by6.25%

Number of low license alerts

0

decreased by-100%

Lines of code

1308

increased by1.87%

No dependency changes