vaul-vue - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/DrawerRoot.d.ts

@@ -15,3 +15,5 @@ import { type DrawerRootProps } from './controls';
     scrollLockTimeout: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    open: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     drag: (percentageDragged: number) => void;
@@ -102,4 +104,10 @@ release: (open: boolean) => void;
     defaultOpen: boolean;
-}, {}>, {
-    default?(_: {}): any;
+}, {}>, Readonly<{
+    default: (props: {
+        open: boolean;
+    }) => any;
+}> & {
+    default: (props: {
+        open: boolean;
+    }) => any;
 }>;
@@ -106,0 +114,0 @@ export default _default;

dist/index.js

 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('[vaul-drawer]{touch-action:none;transform:translate3d(0,100%,0);transition:transform .5s cubic-bezier(.32,.72,0,1)}.vaul-dragging .vaul-scrollable{overflow-y:hidden!important}[vaul-drawer][vaul-drawer-visible=true]{transform:translate3d(0,var(--snap-point-height, 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;top:100%;background:inherit;background-color:inherit;left:0;right:0;height: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(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
-import { getCurrentInstance as He, ref as S, watch as z, nextTick as he, computed as H, onMounted as Le, onUnmounted as Me, watchEffect as je, defineComponent as Z, toRefs as Ve, openBlock as F, createBlock as ee, unref as N, withCtx as oe, renderSlot as ie, mergeProps as ze, normalizeStyle as We } from "vue";
-import { createContext as ke, DialogRoot as Ie, useForwardPropsEmits as Ye, DialogOverlay as qe, DialogContent as Ge } from "radix-vue";
-import { DialogClose as pt, DialogDescription as mt, DialogPortal as gt, DialogTitle as wt, DialogTrigger as ht } from "radix-vue";
-const Je = typeof window < "u" && typeof document < "u";
+import { getCurrentInstance as He, ref as O, watch as z, nextTick as he, computed as H, onMounted as Le, onUnmounted as Me, watchEffect as je, defineComponent as F, useSlots as Ve, toRefs as ze, openBlock as ee, createBlock as te, unref as N, withCtx as oe, renderSlot as ie, mergeProps as We, normalizeStyle as ke } from "vue";
+import { createContext as Ie, DialogRoot as Ye, useForwardPropsEmits as qe, DialogOverlay as Ge, DialogContent as Je } from "radix-vue";
+import { DialogClose as mt, DialogDescription as gt, DialogPortal as wt, DialogTitle as ht, DialogTrigger as bt } from "radix-vue";
+const Ke = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Ke = (t) => typeof t < "u";
-function Xe(t) {
-  return JSON.parse(JSON.stringify(t));
+const Xe = (n) => typeof n < "u";
+function Qe(n) {
+  return JSON.parse(JSON.stringify(n));
 }
-function me(t, e, i, s = {}) {
-  var n, w, b;
+function me(n, t, s, i = {}) {
+  var e, g, w;
   const {
     clone: $ = !1,
-    passive: g = !1,
+    passive: f = !1,
     eventName: o,
-    deep: y = !1,
-    defaultValue: d,
-    shouldEmit: C
-  } = s, u = He(), B = i || (u == null ? void 0 : u.emit) || ((n = u == null ? void 0 : u.$emit) == null ? void 0 : n.bind(u)) || ((b = (w = u == null ? void 0 : u.proxy) == null ? void 0 : w.$emit) == null ? void 0 : b.bind(u == null ? void 0 : u.proxy));
-  let r = o;
-  e || (e = "modelValue"), r = r || `update:${e.toString()}`;
-  const l = (f) => $ ? typeof $ == "function" ? $(f) : Xe(f) : f, c = () => Ke(t[e]) ? l(t[e]) : d, T = (f) => {
-    C ? C(f) && B(r, f) : B(r, f);
+    deep: b = !1,
+    defaultValue: v,
+    shouldEmit: _
+  } = i, R = He(), y = s || (R == null ? void 0 : R.emit) || ((e = R == null ? void 0 : R.$emit) == null ? void 0 : e.bind(R)) || ((w = (g = R == null ? void 0 : R.proxy) == null ? void 0 : g.$emit) == null ? void 0 : w.bind(R == null ? void 0 : R.proxy));
+  let l = o;
+  t || (t = "modelValue"), l = l || `update:${t.toString()}`;
+  const r = (c) => $ ? typeof $ == "function" ? $(c) : Qe(c) : c, u = () => Xe(n[t]) ? r(n[t]) : v, T = (c) => {
+    _ ? _(c) && y(l, c) : y(l, c);
   };
-  if (g) {
-    const f = c(), O = S(f);
-    let R = !1;
+  if (f) {
+    const c = u(), S = O(c);
+    let P = !1;
     return z(
-      () => t[e],
-      (A) => {
-        R || (R = !0, O.value = l(A), he(() => R = !1));
+      () => n[t],
+      (C) => {
+        P || (P = !0, S.value = r(C), he(() => P = !1));
       }
     ), z(
-      O,
-      (A) => {
-        !R && (A !== t[e] || y) && T(A);
+      S,
+      (C) => {
+        !P && (C !== n[t] || b) && T(C);
       },
-      { deep: y }
-    ), O;
+      { deep: b }
+    ), S;
   } else
     return H({
       get() {
-        return c();
+        return u();
       },
-      set(f) {
-        T(f);
+      set(c) {
+        T(c);
       }
     });
 }
-const [le, Qe] = ke("DrawerRoot"), be = /* @__PURE__ */ new WeakMap();
-function h(t, e, i = !1) {
-  if (!t || !(t instanceof HTMLElement) || !e)
+const [le, Ze] = Ie("DrawerRoot"), be = /* @__PURE__ */ new WeakMap();
+function h(n, t, s = !1) {
+  if (!n || !(n instanceof HTMLElement) || !t)
     return;
-  const s = {};
-  Object.entries(e).forEach(([n, w]) => {
-    if (n.startsWith("--")) {
-      t.style.setProperty(n, w);
+  const i = {};
+  Object.entries(t).forEach(([e, g]) => {
+    if (e.startsWith("--")) {
+      n.style.setProperty(e, g);
       return;
     }
-    s[n] = t.style[n], t.style[n] = w;
-  }), !i && be.set(t, s);
+    i[e] = n.style[e], n.style[e] = g;
+  }), !s && be.set(n, i);
 }
-function X(t, e) {
-  if (!t || !(t instanceof HTMLElement))
+function Q(n, t) {
+  if (!n || !(n instanceof HTMLElement))
     return;
-  const i = be.get(t);
-  i && (e ? t.style[e] = i[e] : Object.entries(i).forEach(([s, n]) => {
-    t.style[s] = n;
+  const s = be.get(n);
+  s && (t ? n.style[t] = s[t] : Object.entries(s).forEach(([i, e]) => {
+    n.style[i] = e;
   }));
 }
-function Q(t) {
-  const e = window.getComputedStyle(t), i = e.transform || e.webkitTransform || e.mozTransform;
-  let s = i.match(/^matrix3d\((.+)\)$/);
-  return s ? Number.parseFloat(s[1].split(", ")[13]) : (s = i.match(/^matrix\((.+)\)$/), s ? Number.parseFloat(s[1].split(", ")[5]) : null);
+function Z(n) {
+  const t = window.getComputedStyle(n), s = t.transform || t.webkitTransform || t.mozTransform;
+  let i = s.match(/^matrix3d\((.+)\)$/);
+  return i ? Number.parseFloat(i[1].split(", ")[13]) : (i = s.match(/^matrix\((.+)\)$/), i ? Number.parseFloat(i[1].split(", ")[5]) : null);
 }
-function Ze(t) {
-  return 8 * (Math.log(t + 1) - 2);
+function Fe(n) {
+  return 8 * (Math.log(n + 1) - 2);
 }
@@ -84,59 +84,59 @@ const m = {
 }, ye = 0.4;
-function Fe({
-  activeSnapPoint: t,
-  snapPoints: e,
-  drawerRef: i,
-  overlayRef: s,
-  fadeFromIndex: n,
-  onSnapPointChange: w
+function et({
+  activeSnapPoint: n,
+  snapPoints: t,
+  drawerRef: s,
+  overlayRef: i,
+  fadeFromIndex: e,
+  onSnapPointChange: g
 }) {
-  const b = H(
-    () => (e.value && t.value === e.value[e.value.length - 1]) ?? null
+  const w = H(
+    () => (t.value && n.value === t.value[t.value.length - 1]) ?? null
   ), $ = H(
-    () => e.value && e.value.length > 0 && ((n == null ? void 0 : n.value) || (n == null ? void 0 : n.value) === 0) && !Number.isNaN(n == null ? void 0 : n.value) && e.value[(n == null ? void 0 : n.value) ?? -1] === t.value || !e.value
-  ), g = H(
+    () => t.value && t.value.length > 0 && ((e == null ? void 0 : e.value) || (e == null ? void 0 : e.value) === 0) && !Number.isNaN(e == null ? void 0 : e.value) && t.value[(e == null ? void 0 : e.value) ?? -1] === n.value || !t.value
+  ), f = H(
     () => {
-      var r;
-      return ((r = e.value) == null ? void 0 : r.findIndex((l) => l === t.value)) ?? null;
+      var l;
+      return ((l = t.value) == null ? void 0 : l.findIndex((r) => r === n.value)) ?? null;
     }
   ), o = H(
     () => {
-      var r;
-      return ((r = e.value) == null ? void 0 : r.map((l) => {
-        const c = typeof window < "u", T = typeof l == "string";
-        let f = 0;
-        T && (f = Number.parseInt(l, 10));
-        const O = T ? f : c ? l * window.innerHeight : 0;
-        return c ? window.innerHeight - O : O;
+      var l;
+      return ((l = t.value) == null ? void 0 : l.map((r) => {
+        const u = typeof window < "u", T = typeof r == "string";
+        let c = 0;
+        T && (c = Number.parseInt(r, 10));
+        const S = T ? c : u ? r * window.innerHeight : 0;
+        return u ? window.innerHeight - S : S;
       })) ?? [];
     }
-  ), y = H(
+  ), b = H(
     () => {
-      var r;
-      return g.value !== null ? (r = o.value) == null ? void 0 : r[g.value] : null;
+      var l;
+      return f.value !== null ? (l = o.value) == null ? void 0 : l[f.value] : null;
     }
-  ), d = (r) => {
-    var c, T, f, O;
-    const l = ((c = o.value) == null ? void 0 : c.findIndex((R) => R === r)) ?? null;
+  ), v = (l) => {
+    var u, T, c, S;
+    const r = ((u = o.value) == null ? void 0 : u.findIndex((P) => P === l)) ?? null;
     he(() => {
-      var R;
-      w(l, o.value), h((R = i.value) == null ? void 0 : R.$el, {
+      var P;
+      g(r, o.value), h((P = s.value) == null ? void 0 : P.$el, {
         transition: `transform ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`,
-        transform: `translate3d(0, ${r}px, 0)`
+        transform: `translate3d(0, ${l}px, 0)`
       });
-    }), o.value && l !== o.value.length - 1 && l !== (n == null ? void 0 : n.value) ? h((T = s.value) == null ? void 0 : T.$el, {
+    }), o.value && r !== o.value.length - 1 && r !== (e == null ? void 0 : e.value) ? h((T = i.value) == null ? void 0 : T.$el, {
       transition: `opacity ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`,
       opacity: "0"
-    }) : h((f = s.value) == null ? void 0 : f.$el, {
+    }) : h((c = i.value) == null ? void 0 : c.$el, {
       transition: `opacity ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`,
       opacity: "1"
-    }), t.value = l !== null ? ((O = e.value) == null ? void 0 : O[l]) ?? null : null;
+    }), n.value = r !== null ? ((S = t.value) == null ? void 0 : S[r]) ?? null : null;
   };
   z(
-    [t, o, e],
+    [n, o, t],
     () => {
-      var r;
-      if (t.value) {
-        const l = ((r = e.value) == null ? void 0 : r.findIndex((c) => c === t.value)) ?? -1;
-        o.value && l !== -1 && typeof o.value[l] == "number" && d(o.value[l]);
+      var l;
+      if (n.value) {
+        const r = ((l = t.value) == null ? void 0 : l.findIndex((u) => u === n.value)) ?? -1;
+        o.value && r !== -1 && typeof o.value[r] == "number" && v(o.value[r]);
       }
@@ -149,65 +149,65 @@ },
   );
-  function C({
-    draggedDistance: r,
-    closeDrawer: l,
-    velocity: c,
+  function _({
+    draggedDistance: l,
+    closeDrawer: r,
+    velocity: u,
     dismissible: T
   }) {
     var L, j, W;
-    if (n === void 0)
+    if (e === void 0)
       return;
-    const f = (y.value ?? 0) - r, O = g.value === (n.value ?? 0) - 1, R = g.value === 0, A = r > 0;
-    if (O && h((L = s.value) == null ? void 0 : L.$el, {
+    const c = (b.value ?? 0) - l, S = f.value === (e.value ?? 0) - 1, P = f.value === 0, C = l > 0;
+    if (S && h((L = i.value) == null ? void 0 : L.$el, {
       transition: `opacity ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`
-    }), c > 2 && !A) {
-      T ? l() : d(o.value[0]);
+    }), u > 2 && !C) {
+      T ? r() : v(o.value[0]);
       return;
     }
-    if (c > 2 && A && o && e.value) {
-      d(o.value[e.value.length - 1]);
+    if (u > 2 && C && o && t.value) {
+      v(o.value[t.value.length - 1]);
       return;
     }
-    const G = (j = o.value) == null ? void 0 : j.reduce((_, I) => typeof _ != "number" || typeof I != "number" ? _ : Math.abs(I - f) < Math.abs(_ - f) ? I : _);
-    if (c > ye && Math.abs(r) < window.innerHeight * 0.4) {
-      const _ = A ? 1 : -1;
-      if (_ > 0 && b) {
-        d(o.value[(((W = e.value) == null ? void 0 : W.length) ?? 0) - 1]);
+    const G = (j = o.value) == null ? void 0 : j.reduce((B, I) => typeof B != "number" || typeof I != "number" ? B : Math.abs(I - c) < Math.abs(B - c) ? I : B);
+    if (u > ye && Math.abs(l) < window.innerHeight * 0.4) {
+      const B = C ? 1 : -1;
+      if (B > 0 && w) {
+        v(o.value[(((W = t.value) == null ? void 0 : W.length) ?? 0) - 1]);
         return;
       }
-      if (R && _ < 0 && T && l(), g.value === null)
+      if (P && B < 0 && T && r(), f.value === null)
         return;
-      d(o.value[g.value + _]);
+      v(o.value[f.value + B]);
       return;
     }
-    d(G);
+    v(G);
   }
-  function u({ draggedDistance: r }) {
-    var c;
-    if (y.value === null)
+  function R({ draggedDistance: l }) {
+    var u;
+    if (b.value === null)
       return;
-    const l = y.value - r;
-    h((c = i.value) == null ? void 0 : c.$el, {
-      transform: `translate3d(0, ${l}px, 0)`
+    const r = b.value - l;
+    h((u = s.value) == null ? void 0 : u.$el, {
+      transform: `translate3d(0, ${r}px, 0)`
     });
   }
-  function B(r, l) {
-    if (!e || typeof g.value != "number" || !o.value || n === void 0)
+  function y(l, r) {
+    if (!t || typeof f.value != "number" || !o.value || e === void 0)
       return null;
-    const c = g.value === (n.value ?? 0) - 1;
-    if (g.value >= (n.value ?? 0) && l)
+    const u = f.value === (e.value ?? 0) - 1;
+    if (f.value >= (e.value ?? 0) && r)
       return 0;
-    if (c && !l)
+    if (u && !r)
       return 1;
-    if (!$.value && !c)
+    if (!$.value && !u)
       return null;
-    const f = c ? g.value + 1 : g.value - 1, O = c ? o.value[f] - o.value[f - 1] : o.value[f + 1] - o.value[f], R = r / Math.abs(O);
-    return c ? 1 - R : R;
+    const c = u ? f.value + 1 : f.value - 1, S = u ? o.value[c] - o.value[c - 1] : o.value[c + 1] - o.value[c], P = l / Math.abs(S);
+    return u ? 1 - P : P;
   }
   return {
-    isLastSnapPoint: b,
+    isLastSnapPoint: w,
     shouldFade: $,
-    getPercentageDragged: B,
-    activeSnapPointIndex: g,
-    onRelease: C,
-    onDrag: u,
+    getPercentageDragged: y,
+    activeSnapPointIndex: f,
+    onRelease: _,
+    onDrag: R,
     snapPointsOffset: o
@@ -217,6 +217,6 @@ };
 let q = null;
-function et(t) {
-  const { isOpen: e, modal: i, nested: s, hasBeenOpened: n } = t, w = S(typeof window < "u" ? window.location.href : ""), b = S(0);
+function tt(n) {
+  const { isOpen: t, modal: s, nested: i, hasBeenOpened: e } = n, g = O(typeof window < "u" ? window.location.href : ""), w = O(0);
   function $() {
-    if (q === null && e.value) {
+    if (q === null && t.value) {
       q = {
@@ -228,7 +228,7 @@ position: document.body.style.position,
       };
-      const { scrollX: o, innerHeight: y } = window;
-      document.body.style.position = "fixed", document.body.style.top = `-${b.value}px`, document.body.style.left = `-${o}px`, document.body.style.right = "0px", document.body.style.height = "auto", setTimeout(() => {
+      const { scrollX: o, innerHeight: b } = window;
+      document.body.style.position = "fixed", document.body.style.top = `-${w.value}px`, document.body.style.left = `-${o}px`, document.body.style.right = "0px", document.body.style.height = "auto", setTimeout(() => {
         requestAnimationFrame(() => {
-          const d = y - window.innerHeight;
-          d && b.value >= y && (document.body.style.top = `-${b.value + d}px`);
+          const v = b - window.innerHeight;
+          v && w.value >= b && (document.body.style.top = `-${w.value + v}px`);
         });
@@ -238,11 +238,11 @@ }, 300);
   }
-  function g() {
+  function f() {
     if (q !== null) {
-      const o = -Number.parseInt(document.body.style.top, 10), y = -Number.parseInt(document.body.style.left, 10);
+      const o = -Number.parseInt(document.body.style.top, 10), b = -Number.parseInt(document.body.style.left, 10);
       Object.assign(document.body.style, q), requestAnimationFrame(() => {
-        if (w.value !== window.location.href) {
-          w.value = window.location.href;
+        if (g.value !== window.location.href) {
+          g.value = window.location.href;
           return;
         }
-        window.scrollTo(y, o);
+        window.scrollTo(b, o);
       }), q = null;
@@ -253,3 +253,3 @@ }
     function o() {
-      b.value = window.scrollY;
+      w.value = window.scrollY;
     }
@@ -259,38 +259,38 @@ o(), window.addEventListener("scroll", o), Me(() => {
     });
-  }), z([e, n, w], () => {
-    s.value || !n.value || (e.value ? ($(), i || setTimeout(() => {
-      g();
-    }, 500)) : g());
-  }), { restorePositionSetting: g };
+  }), z([t, e, g], () => {
+    i.value || !e.value || (t.value ? ($(), s || setTimeout(() => {
+      f();
+    }, 500)) : f());
+  }), { restorePositionSetting: f };
 }
-const tt = 0.25, nt = 100, ge = 8, V = 16, at = 26, we = "vaul-dragging";
-function ot(t, e) {
-  return t && t.value ? t : e;
+const nt = 0.25, at = 100, ge = 8, V = 16, ot = 26, we = "vaul-dragging";
+function it(n, t) {
+  return n && n.value ? n : t;
 }
-function it(t) {
+function lt(n) {
   const {
-    emitDrag: e,
-    emitRelease: i,
-    emitClose: s,
-    emitOpenChange: n,
-    open: w,
-    dismissible: b,
+    emitDrag: t,
+    emitRelease: s,
+    emitClose: i,
+    emitOpenChange: e,
+    open: g,
+    dismissible: w,
     nested: $,
-    fixed: g,
+    fixed: f,
     modal: o,
-    shouldScaleBackground: y,
-    scrollLockTimeout: d,
-    closeThreshold: C,
-    activeSnapPoint: u,
-    fadeFromIndex: B
-  } = t, r = S(w.value ?? !1), l = S(!1), c = S(!1), T = S(!1), f = S(!1), O = S(null), R = S(null), A = S(null), G = S(null), L = S(null), j = S(!0), W = S(null), _ = S(0), I = S(!1);
-  S(0);
-  const v = S(null);
-  S(0);
+    shouldScaleBackground: b,
+    scrollLockTimeout: v,
+    closeThreshold: _,
+    activeSnapPoint: R,
+    fadeFromIndex: y
+  } = n, l = O(g.value ?? !1), r = O(!1), u = O(!1), T = O(!1), c = O(!1), S = O(null), P = O(null), C = O(null), G = O(null), L = O(null), j = O(!0), W = O(null), B = O(0), I = O(!1);
+  O(0);
+  const d = O(null);
+  O(0);
   const re = H(() => {
     var a;
-    return ((a = v.value) == null ? void 0 : a.$el.getBoundingClientRect().height) || 0;
-  }), U = ot(
-    t.snapPoints,
-    S(void 0)
+    return ((a = d.value) == null ? void 0 : a.$el.getBoundingClientRect().height) || 0;
+  }), U = it(
+    n.snapPoints,
+    O(void 0)
   ), {
@@ -300,24 +300,24 @@ activeSnapPointIndex: se,
     snapPointsOffset: $e,
-    onDrag: Oe,
+    onDrag: Se,
     shouldFade: ue,
-    getPercentageDragged: Se
-  } = Fe({
+    getPercentageDragged: Oe
+  } = et({
     snapPoints: U,
-    activeSnapPoint: u,
-    drawerRef: v,
-    fadeFromIndex: B,
-    overlayRef: O,
+    activeSnapPoint: R,
+    drawerRef: d,
+    fadeFromIndex: y,
+    overlayRef: S,
     onSnapPointChange: Te
   });
   function Te(a, p) {
-    U.value && a === p.length - 1 && (R.value = /* @__PURE__ */ new Date());
+    U.value && a === p.length - 1 && (P.value = /* @__PURE__ */ new Date());
   }
-  const { restorePositionSetting: Re } = et({
-    isOpen: r,
+  const { restorePositionSetting: Re } = tt({
+    isOpen: l,
     modal: o,
     nested: $,
-    hasBeenOpened: l
+    hasBeenOpened: r
   });
   function J() {
-    return (window.innerWidth - at) / window.innerWidth;
+    return (window.innerWidth - ot) / window.innerWidth;
   }
@@ -329,10 +329,10 @@ function ce(a, p) {
     let D = a;
-    const P = (M = window.getSelection()) == null ? void 0 : M.toString(), E = v.value ? Q(v.value.$el) : null, x = /* @__PURE__ */ new Date();
-    if (D.hasAttribute("data-vaul-no-drag") || D.closest("[data-vaul-no-drag]") || R.value && x.getTime() - R.value.getTime() < 500)
+    const E = (M = window.getSelection()) == null ? void 0 : M.toString(), A = d.value ? Z(d.value.$el) : null, x = /* @__PURE__ */ new Date();
+    if (D.hasAttribute("data-vaul-no-drag") || D.closest("[data-vaul-no-drag]") || P.value && x.getTime() - P.value.getTime() < 500)
       return !1;
-    if (E && E > 0)
+    if (A && A > 0)
       return !0;
-    if (P && P.length > 0)
+    if (E && E.length > 0)
       return !1;
-    if (L.value && x.getTime() - L.value.getTime() < d.value && E === 0 || p)
+    if (L.value && x.getTime() - L.value.getTime() < v.value && A === 0 || p)
       return L.value = x, !1;
@@ -351,17 +351,17 @@ for (; D; ) {
   function Pe(a) {
-    !b.value && !U.value || v.value && !v.value.$el.contains(a.target) || (T.value = !0, A.value = /* @__PURE__ */ new Date(), a.target.setPointerCapture(a.pointerId), _.value = a.screenY);
+    !w.value && !U.value || d.value && !d.value.$el.contains(a.target) || (T.value = !0, C.value = /* @__PURE__ */ new Date(), a.target.setPointerCapture(a.pointerId), B.value = a.screenY);
   }
   function Ee(a) {
-    var p, D, P, E, x, M;
+    var p, D, E, A, x, M;
     if (T.value) {
-      const K = _.value - a.screenY, te = K > 0;
-      if (U.value && se.value === 0 && !b.value || !j.value && !ce(a.target, te))
+      const K = B.value - a.screenY, X = K > 0;
+      if (U.value && se.value === 0 && !w.value && !X || !j.value && !ce(a.target, X))
         return;
-      if ((p = v == null ? void 0 : v.value) == null || p.$el.classList.add(we), j.value = !0, h((D = v.value) == null ? void 0 : D.$el, {
+      if ((p = d == null ? void 0 : d.value) == null || p.$el.classList.add(we), j.value = !0, h((D = d.value) == null ? void 0 : D.$el, {
         transition: "none"
-      }), h((P = O.value) == null ? void 0 : P.$el, {
+      }), h((E = S.value) == null ? void 0 : E.$el, {
         transition: "none"
-      }), U.value && Oe({ draggedDistance: K }), te && !U.value) {
-        const ae = Ze(K);
-        h((E = v.value) == null ? void 0 : E.$el, {
+      }), U.value && Se({ draggedDistance: K }), X && !U.value) {
+        const ae = Fe(K);
+        h((A = d.value) == null ? void 0 : A.$el, {
           transform: `translate3d(0, ${Math.min(ae * -1, 0)}px, 0)`
@@ -373,10 +373,10 @@ });
       let k = ne / re.value;
-      const pe = Se(
+      const pe = Oe(
         ne,
-        te
+        X
       );
       pe !== null && (k = pe);
       const Be = 1 - k;
-      if ((ue.value || B.value && se.value === B.value - 1) && (e(k), h(
-        (x = O.value) == null ? void 0 : x.$el,
+      if ((ue.value || y.value && se.value === y.value - 1) && (t(k), h(
+        (x = S.value) == null ? void 0 : x.$el,
         {
@@ -387,3 +387,3 @@ opacity: `${Be}`,
         !0
-      )), ve && O.value && y.value) {
+      )), ve && S.value && b.value) {
         const ae = Math.min(J() + k * (1 - J()), 1), xe = 8 - k * 8, Ue = Math.max(0, 14 - k * 14);
@@ -400,3 +400,3 @@ h(
       }
-      U.value || h((M = v.value) == null ? void 0 : M.$el, {
+      U.value || h((M = d.value) == null ? void 0 : M.$el, {
         transform: `translate3d(0, ${ne}px, 0)`
@@ -408,12 +408,12 @@ });
     var D;
-    if (!v.value)
+    if (!d.value)
       return;
-    const a = document.querySelector("[vaul-drawer-wrapper]"), p = Q(v.value.$el);
-    h(v.value.$el, {
+    const a = document.querySelector("[vaul-drawer-wrapper]"), p = Z(d.value.$el);
+    h(d.value.$el, {
       transform: "translate3d(0, 0, 0)",
       transition: `transform ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`
-    }), h((D = O.value) == null ? void 0 : D.$el, {
+    }), h((D = S.value) == null ? void 0 : D.$el, {
       transition: `opacity ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`,
       opacity: "1"
-    }), y.value && p && p > 0 && r.value && h(
+    }), b.value && p && p > 0 && l.value && h(
       a,
@@ -434,18 +434,18 @@ {
     var a;
-    v.value && (h(v.value.$el, {
+    d.value && (h(d.value.$el, {
       transform: "translate3d(0, 100%, 0)",
       transition: `transform ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`
-    }), h((a = O.value) == null ? void 0 : a.$el, {
+    }), h((a = S.value) == null ? void 0 : a.$el, {
       opacity: "0",
       transition: `opacity ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`
     }), fe(!1), Re(), window.setTimeout(() => {
-      c.value = !1, r.value = !1;
+      u.value = !1, l.value = !1;
     }, 300), window.setTimeout(() => {
-      U.value && (u.value = U.value[0]);
+      U.value && (R.value = U.value[0]);
     }, m.DURATION * 1e3));
   }
   je(() => {
-    if (!r.value && y.value && Je) {
+    if (!l.value && b.value && Ke) {
       const a = setTimeout(() => {
-        X(document.body);
+        Q(document.body);
       }, 200);
@@ -456,46 +456,46 @@ return () => clearTimeout(a);
   function Ne(a) {
-    if (!T.value || !v.value)
+    if (!T.value || !d.value)
       return;
-    v.value.$el.classList.remove(we), j.value = !1, T.value = !1, G.value = /* @__PURE__ */ new Date();
-    const p = Q(v.value.$el);
-    if (!ce(a.target, !1) || !p || Number.isNaN(p) || A.value === null)
+    d.value.$el.classList.remove(we), j.value = !1, T.value = !1, G.value = /* @__PURE__ */ new Date();
+    const p = Z(d.value.$el);
+    if (!ce(a.target, !1) || !p || Number.isNaN(p) || C.value === null)
       return;
-    const D = G.value.getTime() - A.value.getTime(), P = _.value - a.screenY, E = Math.abs(P) / D;
-    if (E > 0.05 && (f.value = !0, window.setTimeout(() => {
-      f.value = !1;
+    const D = G.value.getTime() - C.value.getTime(), E = B.value - a.screenY, A = Math.abs(E) / D;
+    if (A > 0.05 && (c.value = !0, window.setTimeout(() => {
+      c.value = !1;
     }, 200)), U.value) {
       De({
-        draggedDistance: P,
+        draggedDistance: E,
         closeDrawer: Y,
-        velocity: E,
-        dismissible: b.value
-      }), i(!0);
+        velocity: A,
+        dismissible: w.value
+      }), s(!0);
       return;
     }
-    if (P > 0) {
-      de(), i(!0);
+    if (E > 0) {
+      de(), s(!0);
       return;
     }
-    if (E > ye) {
-      Y(), i(!1);
+    if (A > ye) {
+      Y(), s(!1);
       return;
     }
     const x = Math.min(
-      v.value.$el.getBoundingClientRect().height ?? 0,
+      d.value.$el.getBoundingClientRect().height ?? 0,
       window.innerHeight
     );
-    if (p >= x * C.value) {
-      Y(), i(!1);
+    if (p >= x * _.value) {
+      Y(), s(!1);
       return;
     }
-    i(!0), de();
+    s(!0), de();
   }
-  z(r, (a) => {
-    a && (R.value = /* @__PURE__ */ new Date(), fe(!0)), n(a);
-  }, { immediate: !0 }), z(w, (a) => {
-    a ? (r.value = a, l.value = !0) : Y();
+  z(l, (a) => {
+    a && (P.value = /* @__PURE__ */ new Date(), fe(!0)), e(a);
+  }, { immediate: !0 }), z(g, (a) => {
+    a ? (l.value = a, r.value = !0) : Y();
   }, { immediate: !0 });
   function fe(a) {
     const p = document.querySelector("[vaul-drawer-wrapper]");
-    !p || !y.value || (a ? (h(document.body, {
+    !p || !b.value || (a ? (h(document.body, {
       background: document.body.style.backgroundColor || document.body.style.background
@@ -516,3 +516,3 @@ }), h(
       transitionTimingFunction: `cubic-bezier(${m.EASE.join(",")})`
-    })) : (X(p, "overflow"), X(p, "transform"), X(p, "borderRadius"), h(p, {
+    })) : (Q(p, "overflow"), Q(p, "transform"), Q(p, "borderRadius"), h(p, {
       transitionProperty: "transform, border-radius",
@@ -524,12 +524,12 @@ transitionDuration: `${m.DURATION}s`,
   function Ae(a) {
-    var P, E;
+    var E, A;
     const p = a ? (window.innerWidth - V) / window.innerWidth : 1, D = a ? -V : 0;
-    W.value && window.clearTimeout(W.value), h((P = v.value) == null ? void 0 : P.$el, {
+    W.value && window.clearTimeout(W.value), h((E = d.value) == null ? void 0 : E.$el, {
       transition: `transform ${m.DURATION}s cubic-bezier(${m.EASE.join(",")})`,
       transform: `scale(${p}) translate3d(0, ${D}px, 0)`
-    }), !a && ((E = v.value) != null && E.$el) && (W.value = window.setTimeout(() => {
+    }), !a && ((A = d.value) != null && A.$el) && (W.value = window.setTimeout(() => {
       var x, M;
-      h((x = v.value) == null ? void 0 : x.$el, {
+      h((x = d.value) == null ? void 0 : x.$el, {
         transition: "none",
-        transform: `translate3d(0, ${Q((M = v.value) == null ? void 0 : M.$el)}px, 0)`
+        transform: `translate3d(0, ${Z((M = d.value) == null ? void 0 : M.$el)}px, 0)`
       });
@@ -539,8 +539,8 @@ }, 500));
   function _e(a) {
-    var E;
+    var A;
     if (a < 0)
       return;
-    const p = (window.innerWidth - V) / window.innerWidth, D = p + a * (1 - p), P = -V + a * V;
-    h((E = v.value) == null ? void 0 : E.$el, {
-      transform: `scale(${D}) translate3d(0, ${P}px, 0)`,
+    const p = (window.innerWidth - V) / window.innerWidth, D = p + a * (1 - p), E = -V + a * V;
+    h((A = d.value) == null ? void 0 : A.$el, {
+      transform: `scale(${D}) translate3d(0, ${E}px, 0)`,
       transition: "none"
@@ -550,5 +550,5 @@ });
   function Ce(a) {
-    var P;
+    var E;
     const p = a ? (window.innerWidth - V) / window.innerWidth : 1, D = a ? -V : 0;
-    a && h((P = v.value) == null ? void 0 : P.$el, {
+    a && h((E = d.value) == null ? void 0 : E.$el, {
       transition: `transform ${m.DURATION}s cubic-bezier(${m.EASE.join(
@@ -561,22 +561,22 @@ ","
   return {
-    open: w,
-    isOpen: r,
+    open: g,
+    isOpen: l,
     modal: o,
     keyboardIsOpen: I,
-    hasBeenOpened: l,
-    isVisible: c,
-    drawerRef: v,
+    hasBeenOpened: r,
+    isVisible: u,
+    drawerRef: d,
     drawerHeightRef: re,
-    overlayRef: O,
+    overlayRef: S,
     isDragging: T,
-    dragStartTime: A,
+    dragStartTime: C,
     isAllowedToDrag: j,
     snapPoints: U,
-    activeSnapPoint: u,
-    pointerStartY: _,
-    dismissible: b,
+    activeSnapPoint: R,
+    pointerStartY: B,
+    dismissible: w,
     snapPointsOffset: $e,
     shouldFade: ue,
-    fadeFromIndex: B,
-    shouldScaleBackground: y,
+    fadeFromIndex: y,
+    shouldScaleBackground: b,
     onPress: Pe,
@@ -589,16 +589,16 @@ onDrag: Ee,
     onNestedOpenChange: Ae,
-    emitClose: s,
-    emitDrag: e,
-    emitRelease: i,
-    emitOpenChange: n,
+    emitClose: i,
+    emitDrag: t,
+    emitRelease: s,
+    emitOpenChange: e,
     nested: $
   };
 }
-const lt = /* @__PURE__ */ Z({
+const rt = /* @__PURE__ */ F({
   __name: "DrawerRoot",
   props: {
     activeSnapPoint: { default: void 0 },
-    closeThreshold: { default: tt },
+    closeThreshold: { default: nt },
     shouldScaleBackground: { type: Boolean, default: void 0 },
-    scrollLockTimeout: { default: nt },
+    scrollLockTimeout: { default: at },
     fixed: { type: Boolean, default: void 0 },
@@ -614,38 +614,42 @@ dismissible: { type: Boolean, default: !0 },
   emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint"],
-  setup(t, { emit: e }) {
-    const i = t, s = e, n = H(() => i.fadeFromIndex ?? (i.snapPoints && i.snapPoints.length - 1)), w = me(i, "open", s, {
+  setup(n, { expose: t, emit: s }) {
+    const i = n, e = s;
+    Ve();
+    const g = H(() => i.fadeFromIndex ?? (i.snapPoints && i.snapPoints.length - 1)), w = me(i, "open", e, {
       defaultValue: i.defaultOpen,
       passive: i.open === void 0
-    }), b = me(i, "activeSnapPoint", s, {
+    }), $ = me(i, "activeSnapPoint", e, {
       passive: i.activeSnapPoint === void 0
-    }), $ = {
-      emitDrag: (u) => s("drag", u),
-      emitRelease: (u) => s("release", u),
-      emitClose: () => s("close"),
-      emitOpenChange: (u) => {
-        s("update:open", u);
+    }), f = {
+      emitDrag: (y) => e("drag", y),
+      emitRelease: (y) => e("release", y),
+      emitClose: () => e("close"),
+      emitOpenChange: (y) => {
+        e("update:open", y);
       }
-    }, { closeDrawer: g, hasBeenOpened: o, modal: y, isOpen: d } = Qe(
-      it({
-        ...$,
-        ...Ve(i),
-        activeSnapPoint: b,
-        fadeFromIndex: n,
+    }, { closeDrawer: o, hasBeenOpened: b, modal: v, isOpen: _ } = Ze(
+      lt({
+        ...f,
+        ...ze(i),
+        activeSnapPoint: $,
+        fadeFromIndex: g,
         open: w
       })
     );
-    function C(u) {
+    function R(y) {
       if (w.value !== void 0) {
-        $.emitOpenChange(u);
+        f.emitOpenChange(y);
         return;
       }
-      u ? (o.value = !0, d.value = u) : g();
+      y ? (b.value = !0, _.value = y) : o();
     }
-    return (u, B) => (F(), ee(N(Ie), {
-      open: N(d),
-      modal: N(y),
-      "onUpdate:open": C
+    return t({
+      open: _
+    }), (y, l) => (ee(), te(N(Ye), {
+      open: N(_),
+      modal: N(v),
+      "onUpdate:open": R
     }, {
       default: oe(() => [
-        ie(u.$slots, "default")
+        ie(y.$slots, "default", { open: N(_) })
       ]),
@@ -655,3 +659,3 @@ _: 3
   }
-}), ut = /* @__PURE__ */ Z({
+}), ct = /* @__PURE__ */ F({
   __name: "DrawerRootNested",
@@ -673,23 +677,23 @@ props: {
   emits: ["drag", "release", "close", "update:open", "update:activeSnapPoint"],
-  setup(t, { emit: e }) {
-    const i = t, s = e, { onNestedDrag: n, onNestedOpenChange: w, onNestedRelease: b } = le();
+  setup(n, { emit: t }) {
+    const s = n, i = t, { onNestedDrag: e, onNestedOpenChange: g, onNestedRelease: w } = le();
     function $() {
-      w(!1);
+      g(!1);
     }
-    function g(d) {
-      n(d);
+    function f(v) {
+      e(v);
     }
-    function o(d) {
-      d && w(d), s("update:open", d);
+    function o(v) {
+      v && g(v), i("update:open", v);
     }
-    const y = Ye(i, s);
-    return (d, C) => (F(), ee(lt, ze(N(y), {
+    const b = qe(s, i);
+    return (v, _) => (ee(), te(rt, We(N(b), {
       nested: "",
       onClose: $,
-      onDrag: g,
-      onRelease: N(b),
+      onDrag: f,
+      onRelease: N(w),
       "onUpdate:open": o
     }), {
       default: oe(() => [
-        ie(d.$slots, "default")
+        ie(v.$slots, "default")
       ]),
@@ -699,67 +703,67 @@ _: 3
   }
-}), ct = /* @__PURE__ */ Z({
+}), dt = /* @__PURE__ */ F({
   __name: "DrawerOverlay",
-  setup(t) {
-    const { overlayRef: e, snapPoints: i, isVisible: s, isOpen: n, shouldFade: w } = le(), b = H(() => {
+  setup(n) {
+    const { overlayRef: t, snapPoints: s, isVisible: i, isOpen: e, shouldFade: g } = le(), w = H(() => {
       var $;
-      return i && ((($ = i.value) == null ? void 0 : $.length) ?? 0) > 0;
+      return s && ((($ = s.value) == null ? void 0 : $.length) ?? 0) > 0;
     });
-    return ($, g) => (F(), ee(N(qe), {
+    return ($, f) => (ee(), te(N(Ge), {
       ref_key: "overlayRef",
-      ref: e,
-      "vaul-drawer-visible": N(s) ? "true" : "false",
+      ref: t,
+      "vaul-drawer-visible": N(i) ? "true" : "false",
       "vaul-overlay": "",
-      "vaul-snap-points": N(n) && b.value ? "true" : "false",
-      "vaul-snap-points-overlay": N(n) && N(w) ? "true" : "false"
+      "vaul-snap-points": N(e) && w.value ? "true" : "false",
+      "vaul-snap-points-overlay": N(e) && N(g) ? "true" : "false"
     }, null, 8, ["vaul-drawer-visible", "vaul-snap-points", "vaul-snap-points-overlay"]));
   }
-}), dt = /* @__PURE__ */ Z({
+}), ft = /* @__PURE__ */ F({
   __name: "DrawerContent",
-  setup(t) {
+  setup(n) {
     const {
-      open: e,
-      isOpen: i,
-      isVisible: s,
-      snapPointsOffset: n,
-      drawerRef: w,
-      onPress: b,
+      open: t,
+      isOpen: s,
+      isVisible: i,
+      snapPointsOffset: e,
+      drawerRef: g,
+      onPress: w,
       onDrag: $,
-      onRelease: g,
+      onRelease: f,
       modal: o,
-      emitOpenChange: y,
-      dismissible: d,
-      keyboardIsOpen: C,
-      closeDrawer: u
-    } = le(), B = H(() => n.value && n.value.length > 0 ? `${n.value[0]}px` : "0");
-    function r(l) {
-      if (!o.value || l.defaultPrevented) {
-        l.preventDefault();
+      emitOpenChange: b,
+      dismissible: v,
+      keyboardIsOpen: _,
+      closeDrawer: R
+    } = le(), y = H(() => e.value && e.value.length > 0 ? `${e.value[0]}px` : "0");
+    function l(r) {
+      if (!o.value || r.defaultPrevented) {
+        r.preventDefault();
         return;
       }
-      C.value && (C.value = !1), l.preventDefault(), d.value && y(!1), !(!d.value || e.value !== void 0) && u();
+      _.value && (_.value = !1), r.preventDefault(), v.value && b(!1), !(!v.value || t.value !== void 0) && R();
     }
     return z(
-      i,
-      (l) => {
-        l && setTimeout(() => {
-          s.value = !0;
+      s,
+      (r) => {
+        r && setTimeout(() => {
+          i.value = !0;
         }, 1);
       },
       { immediate: !0 }
-    ), (l, c) => (F(), ee(N(Ge), {
+    ), (r, u) => (ee(), te(N(Je), {
       ref_key: "drawerRef",
-      ref: w,
+      ref: g,
       "vaul-drawer": "",
-      "vaul-drawer-visible": N(s) ? "true" : "false",
-      style: We({ "--snap-point-height": B.value }),
-      onPointerdown: N(b),
+      "vaul-drawer-visible": N(i) ? "true" : "false",
+      style: ke({ "--snap-point-height": y.value }),
+      onPointerdown: N(w),
       onPointermove: N($),
-      onPointerup: N(g),
-      onPointerDownOutside: r,
-      onEscapeKeyDown: c[0] || (c[0] = (T) => {
-        N(d) || T.preventDefault();
+      onPointerup: N(f),
+      onPointerDownOutside: l,
+      onEscapeKeyDown: u[0] || (u[0] = (T) => {
+        N(v) || T.preventDefault();
       })
     }, {
       default: oe(() => [
-        ie(l.$slots, "default")
+        ie(r.$slots, "default")
       ]),
@@ -771,11 +775,11 @@ _: 3
 export {
-  pt as DrawerClose,
-  dt as DrawerContent,
-  mt as DrawerDescription,
-  ct as DrawerOverlay,
-  gt as DrawerPortal,
-  lt as DrawerRoot,
-  ut as DrawerRootNested,
-  wt as DrawerTitle,
-  ht as DrawerTrigger
+  mt as DrawerClose,
+  ft as DrawerContent,
+  gt as DrawerDescription,
+  dt as DrawerOverlay,
+  wt as DrawerPortal,
+  rt as DrawerRoot,
+  ct as DrawerRootNested,
+  ht as DrawerTitle,
+  bt as DrawerTrigger
 };

package.json

 {
   "name": "vaul-vue",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "repository": "https://github.com/Elliot-Alexander/vaul-vue",
@@ -27,2 +27,6 @@ "keywords": [
   ],
+  "peerDependencies": {
+    "radix-vue": "^1.4.0",
+    "vue": "^3.3.0"
+  },
   "dependencies": {
@@ -29,0 +33,0 @@ "@vueuse/core": "^10.8.0",

No alert changes

Improved metrics

Total package byte prevSize

60593

increased by0.64%

Lines of code

1208

increased by1.09%

Worsened metrics

Dependency count

5

increased by66.67%

No dependency changes