@reelkit/vue - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/lib/composables/toVueRef.d.ts

+import { Ref } from 'vue';
+import { Subscribable } from '@reelkit/core';
+/**
+ * Bridges a core `Subscribable` reactive value into a Vue `Ref`.
+ *
+ * Subscribes to the source immediately and writes each new value into a
+ * shallow `ref`. The subscription is automatically disposed when the
+ * surrounding effect scope ends (typically component unmount), so this
+ * helper must be called inside a Vue `setup()` or other effect-scope-aware
+ * context.
+ *
+ * Use this whenever you need to render a core `Signal<T>` value inside a
+ * Vue component — direct reads of `signal.value` inside a render function
+ * will NOT trigger re-renders, because Vue's reactivity system has no
+ * knowledge of core signals.
+ *
+ * @param source - The core subscribable to bridge.
+ * @returns A read-only Vue ref that mirrors the source value.
+ *
+ * @example
+ * ```ts
+ * import { toVueRef, useSoundState } from '@reelkit/vue';
+ *
+ * const soundState = useSoundState();
+ * const muted = toVueRef(soundState.muted);
+ *
+ * return () => h('button', muted.value ? 'Unmute' : 'Mute');
+ * ```
+ */
+export declare function toVueRef<T>(source: Subscribable<T>): Readonly<Ref<T>>;

dist/index.d.ts

@@ -18,3 +18,3 @@ /**
  */
-export { createSignal, createComputed, reaction, batch, createDeferred, type Signal, type ComputedSignal, type Subscribable, type Listener, type Dispose, type Deferred, first, last, generate, abs, isNegative, clamp, lerp, extractRange, noop, animate, type AnimatedValue, observeDomEvent, createDisposableList, type DisposableList, captureFrame, createSharedVideo, type SharedVideoConfig, type SharedVideoInstance, createGestureController, type GestureController, type GestureControllerEvents, type GestureCommonEvent, type GestureEvent, slideTransition, flipTransition, cubeTransition, fadeTransition, zoomTransition, getSlideProgress, type TransitionTransformFn, type SlideTransformStyle, fullscreenSignal, requestFullscreen, exitFullscreen, createBodyLock, sharedBodyLock, type BodyLock, createSoundController, syncMutedToVideo, type SoundController, observeMediaLoading, type MediaLoadingCallbacks, createContentLoadingController, type ContentLoadingController, createContentPreloader, type ContentPreloader, type ContentPreloaderConfig, } from '@reelkit/core';
+export { createSignal, createComputed, reaction, batch, createDeferred, type Signal, type ComputedSignal, type Subscribable, type Listener, type Dispose, type Deferred, first, last, generate, abs, isNegative, clamp, lerp, extractRange, noop, animate, type AnimatedValue, observeDomEvent, createDisposableList, type DisposableList, captureFrame, createLruCache, createSharedVideo, type LruCache, type SharedVideoConfig, type SharedVideoInstance, createGestureController, type GestureController, type GestureControllerEvents, type GestureCommonEvent, type GestureEvent, slideTransition, flipTransition, cubeTransition, fadeTransition, zoomTransition, getSlideProgress, type TransitionTransformFn, type SlideTransformStyle, fullscreenSignal, requestFullscreen, exitFullscreen, createBodyLock, sharedBodyLock, type BodyLock, captureFocusForReturn, createFocusTrap, getFocusableElements, createSoundController, syncMutedToVideo, type SoundController, observeMediaLoading, type MediaLoadingCallbacks, createContentLoadingController, type ContentLoadingController, createContentPreloader, type ContentPreloader, type ContentPreloaderConfig, } from '@reelkit/core';
 export type { SliderDirection, SliderConfig, RangeExtractor, NavKey, } from '@reelkit/core';
@@ -25,2 +25,2 @@ export { Reel, createDefaultKeyExtractorForLoop, defaultRangeExtractor, type ReelExpose, type ReelProps, } from './lib/components';
 export { RK_REEL_KEY, useReelContext, type ReelContextValue, } from './lib/context';
-export { useBodyLock, useFullscreen, type UseFullscreenOptions, type UseFullscreenReturn, SoundProvider, RK_SOUND_KEY, useSoundState, } from './lib/composables';
+export { useBodyLock, useFullscreen, type UseFullscreenOptions, type UseFullscreenReturn, SoundProvider, RK_SOUND_KEY, useSoundState, toVueRef, } from './lib/composables';

dist/index.js

@@ -1,5 +0,12 @@
-import { noop as F, createSliderController as se, createSignal as ce, createDisposableList as te, animate as ue, first as A, last as V, slideTransition as de, clamp as X, createGestureController as ve, abs as Z, sharedBodyLock as fe, fullscreenSignal as M, exitFullscreen as W, requestFullscreen as he, createSoundController as ye } from "@reelkit/core";
-import { abs as Ie, animate as Le, batch as Me, captureFrame as Oe, clamp as Ae, createBodyLock as Ve, createComputed as pe, createContentLoadingController as Be, createContentPreloader as _e, createDeferred as je, createDisposableList as We, createGestureController as qe, createSharedVideo as Ge, createSignal as Ue, createSoundController as He, cubeTransition as Ye, defaultRangeExtractor as Je, exitFullscreen as Qe, extractRange as Xe, fadeTransition as Ze, first as et, flipTransition as tt, fullscreenSignal as nt, generate as at, getSlideProgress as it, isNegative as ot, last as lt, lerp as rt, noop as st, observeDomEvent as ct, observeMediaLoading as ut, reaction as dt, requestFullscreen as vt, sharedBodyLock as ft, slideTransition as ht, syncMutedToVideo as yt, zoomTransition as bt } from "@reelkit/core";
-import { inject as q, defineComponent as _, h as x, ref as S, shallowRef as ee, provide as ne, watch as C, onMounted as G, onUnmounted as O, computed as p, isRef as be } from "vue";
-const U = /* @__PURE__ */ Symbol("RK_REEL_KEY"), Ce = () => q(U, null), ge = (e) => e.toString(), me = {
+import { noop as K, createSliderController as se, createSignal as ce, createDisposableList as ee, animate as ue, first as O, last as A, slideTransition as de, clamp as X, createGestureController as ve, abs as Z, sharedBodyLock as fe, fullscreenSignal as M, exitFullscreen as W, requestFullscreen as he, createSoundController as ye } from "@reelkit/core";
+import { abs as pe, animate as Oe, batch as Ae, captureFocusForReturn as Ve, captureFrame as Be, clamp as _e, createBodyLock as je, createComputed as We, createContentLoadingController as qe, createContentPreloader as Ge, createDeferred as Ue, createDisposableList as He, createFocusTrap as Ye, createGestureController as Je, createLruCache as Qe, createSharedVideo as Xe, createSignal as Ze, createSoundController as et, cubeTransition as tt, defaultRangeExtractor as nt, exitFullscreen as at, extractRange as it, fadeTransition as ot, first as lt, flipTransition as rt, fullscreenSignal as st, generate as ct, getFocusableElements as ut, getSlideProgress as dt, isNegative as vt, last as ft, lerp as ht, noop as yt, observeDomEvent as bt, observeMediaLoading as gt, reaction as mt, requestFullscreen as xt, sharedBodyLock as St, slideTransition as wt, syncMutedToVideo as Dt, zoomTransition as Ct } from "@reelkit/core";
+import { inject as q, shallowRef as te, onScopeDispose as be, readonly as ge, defineComponent as _, h as x, ref as S, provide as ne, watch as C, onMounted as G, onUnmounted as p, computed as V, isRef as me } from "vue";
+const U = /* @__PURE__ */ Symbol("RK_REEL_KEY"), ke = () => q(U, null);
+function xe(e) {
+  const n = te(e.value), i = e.observe(() => {
+    n.value = e.value;
+  });
+  return be(i), ge(n);
+}
+const Se = (e) => e.toString(), we = {
   /** Total number of slides. */
@@ -136,9 +143,9 @@ count: { type: Number, required: !0 },
   }
-}, Ee = (e, o) => (l, c) => {
-  const r = `${o ?? ""}${l}`;
-  return e === 2 && [0, 1].includes(l) && c === 0 ? `${r}_cloned` : r;
-}, ke = _({
+}, Te = (e, n) => (i, c) => {
+  const r = `${n ?? ""}${i}`;
+  return e === 2 && [0, 1].includes(i) && c === 0 ? `${r}_cloned` : r;
+}, Fe = _({
   name: "Reel",
   inheritAttrs: !1,
-  props: me,
+  props: we,
   emits: [
@@ -155,11 +162,11 @@ "beforeChange",
   ],
-  setup(e, { emit: o, slots: l, expose: c }) {
+  setup(e, { emit: n, slots: i, expose: c }) {
     if (typeof window > "u")
       return c({
-        next: F,
-        prev: F,
+        next: K,
+        prev: K,
         goTo: () => Promise.resolve(),
-        adjust: F,
-        observe: F,
-        unobserve: F
+        adjust: K,
+        observe: K,
+        unobserve: K
       }), () => x("div", {
@@ -174,3 +181,3 @@ class: e.reelClass,
     let y = !0;
-    const f = () => e.size === void 0, h = () => f() ? b.value : e.size, u = () => e.transition ?? de, E = () => e.keyExtractor ?? ge, a = ee(0), d = ee([]), n = se(
+    const f = () => e.size === void 0, h = () => f() ? b.value : e.size, d = () => e.transition ?? de, E = () => e.keyExtractor ?? Se, o = te(0), a = se(
       {
@@ -190,15 +197,15 @@ count: e.count,
       {
-        onBeforeChange: (t, i, v) => {
-          o("beforeChange", t, i, v);
+        onBeforeChange: (t, l, v) => {
+          n("beforeChange", t, l, v);
         },
-        onAfterChange: (t, i) => {
-          y || (g.value = `Slide ${t + 1} of ${e.count}`), y = !1, o("afterChange", t, i);
+        onAfterChange: (t, l) => {
+          y || (g.value = `Slide ${t + 1} of ${e.count}`), y = !1, n("afterChange", t, l);
         },
-        onDragStart: (t) => o("slideDragStart", t),
-        onDragEnd: (t) => o("slideDragEnd", t),
-        onDragCanceled: (t) => o("slideDragCanceled", t),
-        onTap: (t) => o("tap", t),
-        onDoubleTap: (t) => o("doubleTap", t),
-        onLongPress: (t) => o("longPress", t),
-        onLongPressEnd: (t) => o("longPressEnd", t),
+        onDragStart: (t) => n("slideDragStart", t),
+        onDragEnd: (t) => n("slideDragEnd", t),
+        onDragCanceled: (t) => n("slideDragCanceled", t),
+        onTap: (t) => n("tap", t),
+        onDoubleTap: (t) => n("doubleTap", t),
+        onLongPress: (t) => n("longPress", t),
+        onLongPressEnd: (t) => n("longPressEnd", t),
         // Only forward to controller when consumer provides a handler —
@@ -208,23 +215,20 @@ // core treats its presence as an override of default navigation.
       }
-    ), k = ce(e.count), N = {
-      index: n.state.index,
-      count: k,
-      goTo: n.goTo
+    ), u = ce(e.count), F = {
+      index: a.state.index,
+      count: u,
+      goTo: a.goTo
     };
-    ne(U, N);
-    const K = te();
+    ne(U, F);
+    const z = xe(a.state.indexes), N = ee();
     let m = null;
-    d.value = n.state.indexes.value, K.push(
-      n.state.indexes.observe(() => {
-        d.value = n.state.indexes.value;
-      }),
-      n.state.axisValue.observe(() => {
-        const { value: t, duration: i, done: v } = n.state.axisValue.value;
-        if (m && (m(), m = null), i > 0) {
+    N.push(
+      a.state.axisValue.observe(() => {
+        const { value: t, duration: l, done: v } = a.state.axisValue.value;
+        if (m && (m(), m = null), l > 0) {
           m = ue({
-            from: a.value,
+            from: o.value,
             to: t,
-            duration: i,
-            onUpdate: (T) => {
-              a.value = T;
+            duration: l,
+            onUpdate: (k) => {
+              o.value = k;
             },
@@ -237,3 +241,3 @@ onComplete: () => {
         }
-        a.value = t, v?.();
+        o.value = t, v?.();
       })
@@ -253,3 +257,3 @@ ), C(
       () => {
-        k.value = e.count, n.updateConfig({
+        u.value = e.count, a.updateConfig({
           count: e.count,
@@ -269,4 +273,4 @@ direction: e.direction,
       (t) => {
-        const i = e.direction === "horizontal" ? A(t) : V(t);
-        n.setPrimarySize(i);
+        const l = e.direction === "horizontal" ? O(t) : A(t);
+        a.setPrimarySize(l);
       },
@@ -280,6 +284,6 @@ { flush: "post" }
       t && (s = new ResizeObserver(() => {
-        const i = t.clientWidth, v = t.clientHeight;
-        if (i > 0 && v > 0) {
-          const T = b.value;
-          (T[0] !== i || T[1] !== v) && (b.value = [i, v]);
+        const l = t.clientWidth, v = t.clientHeight;
+        if (l > 0 && v > 0) {
+          const k = b.value;
+          (k[0] !== l || k[1] !== v) && (b.value = [l, v]);
         }
@@ -297,15 +301,15 @@ }), s.observe(t));
       if (!r.value) return;
-      const t = h(), i = e.direction === "horizontal" ? A(t) : V(t);
-      n.setPrimarySize(i), n.attach(r.value), n.observe(), f() && w();
-    }), O(() => {
-      m && (m(), m = null), K.dispose(), n.unobserve(), n.detach(), R();
+      const t = h(), l = e.direction === "horizontal" ? O(t) : A(t);
+      a.setPrimarySize(l), a.attach(r.value), a.observe(), f() && w();
+    }), p(() => {
+      m && (m(), m = null), N.dispose(), a.unobserve(), a.detach(), R();
     }), c({
-      next: () => n.next(),
-      prev: () => n.prev(),
-      goTo: (t, i) => n.goTo(t, i),
-      adjust: () => n.adjust(),
-      observe: () => n.observe(),
-      unobserve: () => n.unobserve()
+      next: () => a.next(),
+      prev: () => a.prev(),
+      goTo: (t, l) => a.goTo(t, l),
+      adjust: () => a.adjust(),
+      observe: () => a.observe(),
+      unobserve: () => a.unobserve()
     }), () => {
-      const t = h(), i = e.direction === "horizontal", v = i ? A(t) : V(t), T = !f() || v > 0, j = u(), P = E(), ie = {
+      const t = h(), l = e.direction === "horizontal", v = l ? O(t) : A(t), k = !f() || v > 0, j = d(), P = E(), ie = {
         userSelect: "none",
@@ -315,3 +319,3 @@ WebkitUserSelect: "none",
         overflow: "hidden",
-        ...f() ? { width: "100%", height: "100%" } : { width: `${A(t)}px`, height: `${V(t)}px` },
+        ...f() ? { width: "100%", height: "100%" } : { width: `${O(t)}px`, height: `${A(t)}px` },
         ...e.reelStyle ?? {}
@@ -324,8 +328,8 @@ }, $ = [], H = {
         height: "100%"
-      }, Y = l.item;
-      if (T && Y) {
-        const I = d.value, oe = n.getRangeIndex(), Q = [];
-        for (let D = 0; D < I.length; D++) {
-          const z = j(
-            a.value,
+      }, Y = i.item;
+      if (k && Y) {
+        const L = z.value, oe = a.getRangeIndex(), Q = [];
+        for (let D = 0; D < L.length; D++) {
+          const T = j(
+            o.value,
             D,
@@ -335,12 +339,12 @@ oe,
             e.direction
-          ), L = {
+          ), I = {
             position: "absolute",
             top: "0",
             left: "0",
-            [i ? "width" : "height"]: `${v}px`,
-            [i ? "height" : "width"]: "100%",
+            [l ? "width" : "height"]: `${v}px`,
+            [l ? "height" : "width"]: "100%",
             backfaceVisibility: "hidden"
           };
-          z.transform && (L.transform = z.transform), z.transformOrigin && (L.transformOrigin = z.transformOrigin), z.opacity !== void 0 && (L.opacity = z.opacity), z.zIndex !== void 0 && (L.zIndex = z.zIndex);
-          const le = n.state.index.value, re = I[D] === le;
+          T.transform && (I.transform = T.transform), T.transformOrigin && (I.transformOrigin = T.transformOrigin), T.opacity !== void 0 && (I.opacity = T.opacity), T.zIndex !== void 0 && (I.zIndex = T.zIndex);
+          const le = a.state.index.value, re = L[D] === le;
           Q.push(
@@ -350,10 +354,10 @@ x(
               {
-                key: P(I[D], D),
-                "data-index": I[D],
+                key: P(L[D], D),
+                "data-index": L[D],
                 role: "tabpanel",
                 inert: re ? void 0 : !0,
-                style: L
+                style: I
               },
               Y({
-                index: I[D],
+                index: L[D],
                 indexInRange: D,
@@ -389,3 +393,3 @@ size: t
       );
-      const J = l.default;
+      const J = i.default;
       return J && $.push(...J()), x(
@@ -405,3 +409,3 @@ "div",
   }
-}), xe = {
+}), De = {
   /**
@@ -479,41 +483,41 @@ * Total number of slides. Auto-connected from the parent {@link Reel}
   }
-}, Re = _({
+}, ze = _({
   name: "ReelIndicator",
-  props: xe,
+  props: De,
   emits: ["dotClick"],
-  setup(e, { emit: o }) {
-    const l = q(U, null);
-    if (e.active === void 0 && !l)
+  setup(e, { emit: n }) {
+    const i = q(U, null);
+    if (e.active === void 0 && !i)
       throw new Error(
         'ReelIndicator: "active" prop is required when rendered outside a <Reel> component.'
       );
-    if (e.count === void 0 && !l)
+    if (e.count === void 0 && !i)
       throw new Error(
         'ReelIndicator: "count" prop is required when rendered outside a <Reel> component.'
       );
-    const c = S(e.active ?? l.index.value), r = S(e.count ?? l.count.value), b = te();
-    e.active === void 0 && l && b.push(
-      l.index.observe(() => {
-        c.value = l.index.value;
+    const c = S(e.active ?? i.index.value), r = S(e.count ?? i.count.value), b = ee();
+    e.active === void 0 && i && b.push(
+      i.index.observe(() => {
+        c.value = i.index.value;
       })
-    ), e.count === void 0 && l && b.push(
-      l.count.observe(() => {
-        r.value = l.count.value;
+    ), e.count === void 0 && i && b.push(
+      i.count.observe(() => {
+        r.value = i.count.value;
       })
     ), C(
       () => e.active,
-      (a) => {
-        a !== void 0 && (c.value = a);
+      (o) => {
+        o !== void 0 && (c.value = o);
       }
     ), C(
       () => e.count,
-      (a) => {
-        a !== void 0 && (r.value = a);
+      (o) => {
+        o !== void 0 && (r.value = o);
       }
-    ), O(() => {
+    ), p(() => {
       b.dispose();
     });
-    const g = (a) => {
-      e.onDotClick ? e.onDotClick(a) : l && l.goTo(a, !0), o("dotClick", a);
-    }, y = p(() => e.direction === "vertical"), f = p(() => e.radius * 2), h = p(() => f.value + e.gap), u = S(
+    const g = (o) => {
+      e.onDotClick ? e.onDotClick(o) : i && i.goTo(o, !0), n("dotClick", o);
+    }, y = V(() => e.direction === "vertical"), f = V(() => e.radius * 2), h = V(() => f.value + e.gap), d = S(
       r.value <= e.visible ? 0 : X(
@@ -527,14 +531,14 @@ c.value - Math.floor(e.visible / 2),
       () => c.value,
-      (a) => {
+      (o) => {
         if (r.value <= e.visible) {
-          u.value = 0;
+          d.value = 0;
           return;
         }
-        if (a < u.value) {
-          u.value = Math.max(0, a);
+        if (o < d.value) {
+          d.value = Math.max(0, o);
           return;
         }
-        a >= u.value + e.visible && (u.value = Math.min(
+        o >= d.value + e.visible && (d.value = Math.min(
           r.value - e.visible,
-          a - e.visible + 1
+          o - e.visible + 1
         ));
@@ -550,15 +554,15 @@ }
         if (r.value <= e.visible) {
-          u.value = 0;
+          d.value = 0;
           return;
         }
-        const a = r.value - e.visible, d = Math.max(0, c.value - e.visible + 1), n = Math.min(a, c.value);
-        u.value = X(u.value, d, n);
+        const o = r.value - e.visible, a = Math.max(0, c.value - e.visible + 1), u = Math.min(o, c.value);
+        d.value = X(d.value, a, u);
       }
     );
-    const E = p(() => {
-      let d = Math.min(e.visible, r.value) * h.value;
-      return r.value > e.visible && (d += h.value * 2), {
+    const E = V(() => {
+      let a = Math.min(e.visible, r.value) * h.value;
+      return r.value > e.visible && (a += h.value * 2), {
         position: "relative",
         overflow: "hidden",
-        [y.value ? "height" : "width"]: `${d}px`,
+        [y.value ? "height" : "width"]: `${a}px`,
         [y.value ? "width" : "height"]: `${h.value}px`,
@@ -569,10 +573,10 @@ ...e.indicatorStyle ?? {}
     return () => {
-      const a = r.value, d = c.value, n = Math.min(u.value + e.visible, a), k = u.value > 0, N = Math.max(0, u.value - 1), K = Math.min(a, n + 1), m = [];
-      for (let s = N; s < K; s++) {
-        const w = s === d;
+      const o = r.value, a = c.value, u = Math.min(d.value + e.visible, o), F = d.value > 0, z = Math.max(0, d.value - 1), N = Math.min(o, u + 1), m = [];
+      for (let s = z; s < N; s++) {
+        const w = s === a;
         let R = 1;
-        (s < u.value || s >= n) && (R = e.edgeScale);
+        (s < d.value || s >= u) && (R = e.edgeScale);
         let t;
-        s < u.value ? t = 0 : s >= n ? t = e.visible + 1 : t = s - u.value + 1, !k && t > 0 && (t -= 1);
-        const i = t * h.value, v = !!(e.onDotClick || l), T = {
+        s < d.value ? t = 0 : s >= u ? t = e.visible + 1 : t = s - d.value + 1, !F && t > 0 && (t -= 1);
+        const l = t * h.value, v = !!(e.onDotClick || i), k = {
           position: "absolute",
@@ -585,3 +589,3 @@ display: "flex",
           transition: "top 0.2s ease, left 0.2s ease",
-          [y.value ? "top" : "left"]: `${i}px`,
+          [y.value ? "top" : "left"]: `${l}px`,
           [y.value ? "left" : "top"]: "0"
@@ -607,3 +611,3 @@ }, j = {
               tabindex: w ? 0 : -1,
-              style: T,
+              style: k,
               onClick: () => g(s),
@@ -627,5 +631,5 @@ onKeydown: (P) => {
             const w = y.value, R = w ? "ArrowUp" : "ArrowLeft", t = w ? "ArrowDown" : "ArrowRight";
-            let i = null;
-            s.key === R ? i = Math.max(0, d - 1) : s.key === t ? i = Math.min(a - 1, d + 1) : s.key === "Home" ? i = 0 : s.key === "End" && (i = a - 1), i !== null && (s.preventDefault(), g(i), s.currentTarget?.querySelector(
-              `[data-reel-indicator="${i}"]`
+            let l = null;
+            s.key === R ? l = Math.max(0, a - 1) : s.key === t ? l = Math.min(o - 1, a + 1) : s.key === "Home" ? l = 0 : s.key === "End" && (l = o - 1), l !== null && (s.preventDefault(), g(l), s.currentTarget?.querySelector(
+              `[data-reel-indicator="${l}"]`
             )?.focus());
@@ -638,3 +642,3 @@ }
   }
-}), Se = {
+}), Ce = {
   /**
@@ -661,10 +665,10 @@ * Swipe direction that triggers dismiss. `'down'` for stories-style
   threshold: { type: Number, default: 0.2 }
-}, Te = _({
+}, Ne = _({
   name: "SwipeToClose",
-  props: Se,
+  props: Ce,
   emits: ["close"],
-  setup(e, { slots: o, emit: l }) {
+  setup(e, { slots: n, emit: i }) {
     const c = S(null), r = e.direction === "down", b = r ? 1 : -1, g = S(0), y = S(1), f = S(!1);
     let h = !1;
-    const u = () => {
+    const d = () => {
       f.value = !0, g.value = 0, y.value = 1, setTimeout(() => {
@@ -679,33 +683,33 @@ f.value = !1;
         },
-        onVerticalDragUpdate: (n) => {
-          if (r ? n.primaryDistance > 0 : n.primaryDistance < 0) {
-            g.value = n.primaryDistance;
-            const N = window.innerHeight, K = Math.min(
-              Z(n.primaryDistance) / (N * 0.3),
+        onVerticalDragUpdate: (u) => {
+          if (r ? u.primaryDistance > 0 : u.primaryDistance < 0) {
+            g.value = u.primaryDistance;
+            const z = window.innerHeight, N = Math.min(
+              Z(u.primaryDistance) / (z * 0.3),
               1
             );
-            y.value = 1 - K * 0.8;
+            y.value = 1 - N * 0.8;
           }
         },
-        onVerticalDragEnd: (n) => {
+        onVerticalDragEnd: (u) => {
           h = !0;
-          const k = window.innerHeight, N = k * e.threshold;
-          (r ? n.primaryDistance > 0 : n.primaryDistance < 0) && Z(n.primaryDistance) > N ? (f.value = !0, g.value = k * b, y.value = 0, setTimeout(() => l("close"), 300)) : u();
+          const F = window.innerHeight, z = F * e.threshold;
+          (r ? u.primaryDistance > 0 : u.primaryDistance < 0) && Z(u.primaryDistance) > z ? (f.value = !0, g.value = F * b, y.value = 0, setTimeout(() => i("close"), 300)) : d();
         },
         onDragEnd: () => {
-          !h && g.value !== 0 && u();
+          !h && g.value !== 0 && d();
         }
       }
-    ), a = () => {
-      const n = c.value;
-      !e.enabled || !n || (E.attach(n), E.observe());
-    }, d = () => {
+    ), o = () => {
+      const u = c.value;
+      !e.enabled || !u || (E.attach(u), E.observe());
+    }, a = () => {
       E.unobserve(), E.detach();
     };
-    return G(a), C(
+    return G(o), C(
       () => e.enabled,
-      (n) => {
-        n ? a() : d();
+      (u) => {
+        u ? o() : a();
       }
-    ), O(d), () => x(
+    ), p(a), () => x(
       "div",
@@ -722,26 +726,26 @@ {
       },
-      o.default?.()
+      n.default?.()
     );
   }
-}), ze = (e) => {
-  let o = null;
-  const l = () => {
-    o || (o = fe.lock());
+}), Ke = (e) => {
+  let n = null;
+  const i = () => {
+    n || (n = fe.lock());
   }, c = () => {
-    o && (o(), o = null);
+    n && (n(), n = null);
   };
-  be(e) ? C(
+  me(e) ? C(
     e,
     (r) => {
-      r ? l() : c();
+      r ? i() : c();
     },
     { immediate: !0 }
-  ) : e && l(), O(c);
-}, B = (e) => (o) => {
+  ) : e && i(), p(c);
+}, B = (e) => (n) => {
   console.log(
-    `Error attempting to ${e === "enter" ? "enable" : "exit"} full-screen mode: ${o.message} (${o.name})`
+    `Error attempting to ${e === "enter" ? "enable" : "exit"} full-screen mode: ${n.message} (${n.name})`
   );
-}, Ne = (e) => {
-  let o = null;
-  const l = async () => {
+}, Pe = (e) => {
+  let n = null;
+  const i = async () => {
     const b = e.elementRef.value;
@@ -752,16 +756,16 @@ b && (M.value && await W().catch(B("exit")), await he(b).catch(B("enter")));
   }, r = async () => {
-    M.value ? await c() : await l();
+    M.value ? await c() : await i();
   };
   return G(() => {
-    o = M.observe(F);
-  }), O(() => {
-    o?.(), M.value && W().catch(B("exit"));
-  }), { isFullscreen: M, request: l, exit: c, toggle: r };
-}, ae = /* @__PURE__ */ Symbol("RK_SOUND_KEY"), Ke = _({
+    n = M.observe(K);
+  }), p(() => {
+    n?.(), M.value && W().catch(B("exit"));
+  }), { isFullscreen: M, request: i, exit: c, toggle: r };
+}, ae = /* @__PURE__ */ Symbol("RK_SOUND_KEY"), $e = _({
   name: "SoundProvider",
-  setup(e, { slots: o }) {
-    const l = ye();
-    return ne(ae, l), () => o.default?.();
+  setup(e, { slots: n }) {
+    const i = ye();
+    return ne(ae, i), () => n.default?.();
   }
-}), Fe = () => {
+}), Le = () => {
   const e = q(ae, null);
@@ -775,48 +779,53 @@ if (!e)
   ae as RK_SOUND_KEY,
-  ke as Reel,
-  Re as ReelIndicator,
-  Ke as SoundProvider,
-  Te as SwipeToClose,
-  Ie as abs,
-  Le as animate,
-  Me as batch,
-  Oe as captureFrame,
-  Ae as clamp,
-  Ve as createBodyLock,
-  pe as createComputed,
-  Be as createContentLoadingController,
-  _e as createContentPreloader,
-  Ee as createDefaultKeyExtractorForLoop,
-  je as createDeferred,
-  We as createDisposableList,
-  qe as createGestureController,
-  Ge as createSharedVideo,
-  Ue as createSignal,
-  He as createSoundController,
-  Ye as cubeTransition,
-  Je as defaultRangeExtractor,
-  Qe as exitFullscreen,
-  Xe as extractRange,
-  Ze as fadeTransition,
-  et as first,
-  tt as flipTransition,
-  nt as fullscreenSignal,
-  at as generate,
-  it as getSlideProgress,
-  ot as isNegative,
-  lt as last,
-  rt as lerp,
-  st as noop,
-  ct as observeDomEvent,
-  ut as observeMediaLoading,
-  dt as reaction,
-  vt as requestFullscreen,
-  ft as sharedBodyLock,
-  ht as slideTransition,
-  yt as syncMutedToVideo,
-  ze as useBodyLock,
-  Ne as useFullscreen,
-  Ce as useReelContext,
-  Fe as useSoundState,
-  bt as zoomTransition
+  Fe as Reel,
+  ze as ReelIndicator,
+  $e as SoundProvider,
+  Ne as SwipeToClose,
+  pe as abs,
+  Oe as animate,
+  Ae as batch,
+  Ve as captureFocusForReturn,
+  Be as captureFrame,
+  _e as clamp,
+  je as createBodyLock,
+  We as createComputed,
+  qe as createContentLoadingController,
+  Ge as createContentPreloader,
+  Te as createDefaultKeyExtractorForLoop,
+  Ue as createDeferred,
+  He as createDisposableList,
+  Ye as createFocusTrap,
+  Je as createGestureController,
+  Qe as createLruCache,
+  Xe as createSharedVideo,
+  Ze as createSignal,
+  et as createSoundController,
+  tt as cubeTransition,
+  nt as defaultRangeExtractor,
+  at as exitFullscreen,
+  it as extractRange,
+  ot as fadeTransition,
+  lt as first,
+  rt as flipTransition,
+  st as fullscreenSignal,
+  ct as generate,
+  ut as getFocusableElements,
+  dt as getSlideProgress,
+  vt as isNegative,
+  ft as last,
+  ht as lerp,
+  yt as noop,
+  bt as observeDomEvent,
+  gt as observeMediaLoading,
+  mt as reaction,
+  xt as requestFullscreen,
+  St as sharedBodyLock,
+  wt as slideTransition,
+  Dt as syncMutedToVideo,
+  xe as toVueRef,
+  Ke as useBodyLock,
+  Pe as useFullscreen,
+  ke as useReelContext,
+  Le as useSoundState,
+  Ct as zoomTransition
 };

dist/lib/components/Reel.d.ts

@@ -551,2 +551,3 @@ import { ExtractPropTypes, PropType, VNode } from 'vue';
 }>, {
+    size: [number, number];
     initialIndex: number;
@@ -558,3 +559,2 @@ direction: SliderDirection;
     rangeExtractor: RangeExtractor;
-    size: [number, number];
     enableNavKeys: boolean;
@@ -561,0 +561,0 @@ enableWheel: boolean;

dist/lib/composables/index.d.ts

 export { useBodyLock } from './useBodyLock';
 export { useFullscreen, type UseFullscreenOptions, type UseFullscreenReturn, } from './useFullscreen';
 export { SoundProvider, RK_SOUND_KEY, useSoundState } from './useSoundState';
+export { toVueRef } from './toVueRef';

package.json

 {
   "name": "@reelkit/vue",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
@@ -56,3 +56,3 @@ "sideEffects": false,
   "dependencies": {
-    "@reelkit/core": "^0.4.0"
+    "@reelkit/core": "^0.5.0"
   },
@@ -59,0 +59,0 @@ "peerDependencies": {

README.md

@@ -5,7 +5,7 @@ # @reelkit/vue
   <a href="https://www.npmjs.com/package/@reelkit/vue"><img src="https://img.shields.io/npm/v/@reelkit/vue?color=6366f1&label=npm" alt="npm" /></a>
-  <img src="https://img.shields.io/badge/gzip-4.5%20kB-6366f1" alt="Bundle size" />
+  <img src="https://img.shields.io/badge/gzip-4.6%20kB-6366f1" alt="Bundle size" />
   <a href="https://github.com/KonstantinKai/reelkit"><img src="https://img.shields.io/github/stars/KonstantinKai/reelkit?style=social" alt="Star on GitHub" /></a>
 </p>
 
-Vue 3 bindings for `@reelkit/core`. Drop in a `<Reel>` component, give it a slide count and an item slot — it handles virtualization, gestures, and keyboard/wheel input. ~4.5 kB gzip.
+Vue 3 bindings for `@reelkit/core`. Drop in a `<Reel>` component, give it a slide count and an item slot — it handles virtualization, gestures, and keyboard/wheel input. ~4.6 kB gzip.
 
@@ -12,0 +12,0 @@ **[Live Demo](https://vue-demo.reelkit.dev/?utm_source=npm)** · **[Open in StackBlitz](https://stackblitz.com/github/KonstantinKai/reelkit-vue-starter)**

No alert changes

Improved metrics

Total package byte prevSize

73837

2.18%

Number of package files

16

6.67%

Lines of code

2016

2.13%

Dependency changes

• + Added

  @reelkit/core@0.5.0
  (transitive)

• - Removed

  @reelkit/core@0.4.0
  (transitive)

• Updated

  @reelkit/core@^0.5.0