svg-scroll-draw 2.16.1 → 2.17.0

package/dist/vue/index.d.ts

@@ -1,12 +1,19 @@
 import * as vue from 'vue';
+import { Ref } from 'vue';
 import { a as ScrollDrawOptions } from '../types-DHU1zNEw.js';
 import { S as ScrollAnimateOptions } from '../engine-6AXEX8CL.js';
 import { S as ScrollCounterOptions } from '../index-DxjUOIbK.js';
 import { ScrollVideoOptions } from '../video/index.js';
 import { ScrollTextOptions } from '../text/index.js';
 
-/** Composable — attach to any container ref. */
-declare function useScrollDraw(options?: ScrollDrawOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+/** Options as a plain object, a ref, or a getter — the getter or ref keeps them live. */
+type MaybeRefOrGetter<T> = T | Ref<T> | (() => T);
+/**
+ * Composable — attach the returned ref to any container. Pass a getter or a ref
+ * to keep options live: `useScrollDraw(() => ({ speed: speed.value }))` rebuilds
+ * the draw when `speed` changes. A plain object is read once.
+ */
+declare function useScrollDraw(options?: MaybeRefOrGetter<ScrollDrawOptions>): Ref<HTMLElement | null, HTMLElement | null>;
 /** Component — wraps children in a <div> and initialises the engine. */
 declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
     selector: {
@@ -100,7 +107,7 @@ declare const ScrollDraw: vue.DefineComponent<vue.ExtractPropTypes<{
  * </script>
  * <div :ref="el">...</div>
  */
-declare function useScrollAnimate(options: ScrollAnimateOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+declare function useScrollAnimate(options: MaybeRefOrGetter<ScrollAnimateOptions>): Ref<HTMLElement | null, HTMLElement | null>;
 /**
  * Component — accepts a single `:options` prop and wraps children in a <div>.
  *
@@ -132,7 +139,7 @@ declare const ScrollAnimate: vue.DefineComponent<vue.ExtractPropTypes<{
  * </script>
  * <span :ref="el" />
  */
-declare function useScrollCounter(options: ScrollCounterOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+declare function useScrollCounter(options: MaybeRefOrGetter<ScrollCounterOptions>): Ref<HTMLElement | null, HTMLElement | null>;
 /**
  * Component — renders a <span> that counts from `from` to `to` on scroll.
  *
@@ -206,7 +213,7 @@ declare const ScrollCounter: vue.DefineComponent<vue.ExtractPropTypes<{
  * </script>
  * <video :ref="vid" src="..." muted playsinline preload="auto" />
  */
-declare function useScrollVideo(options?: ScrollVideoOptions): vue.Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
+declare function useScrollVideo(options?: MaybeRefOrGetter<ScrollVideoOptions>): Ref<HTMLVideoElement | null, HTMLVideoElement | null>;
 /**
  * Component — renders a <video> scrubbed by scroll position.
  *
@@ -267,7 +274,7 @@ declare const ScrollVideo: vue.DefineComponent<vue.ExtractPropTypes<{
  * </script>
  * <h2 :ref="el">Animate on scroll.</h2>
  */
-declare function useScrollText(options?: ScrollTextOptions): vue.Ref<HTMLElement | null, HTMLElement | null>;
+declare function useScrollText(options?: MaybeRefOrGetter<ScrollTextOptions>): Ref<HTMLElement | null, HTMLElement | null>;
 /**
  * Component — wraps text content in a <p> (or any tag) and animates it on scroll.
  *
@@ -298,4 +305,4 @@ declare const ScrollText: vue.DefineComponent<vue.ExtractPropTypes<{
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { ScrollAnimate, ScrollAnimateOptions, ScrollCounter, ScrollCounterOptions, ScrollDraw, ScrollDrawOptions, ScrollText, ScrollTextOptions, ScrollVideo, ScrollVideoOptions, useScrollAnimate, useScrollCounter, useScrollDraw, useScrollText, useScrollVideo };
+export { type MaybeRefOrGetter, ScrollAnimate, ScrollAnimateOptions, ScrollCounter, ScrollCounterOptions, ScrollDraw, ScrollDrawOptions, ScrollText, ScrollTextOptions, ScrollVideo, ScrollVideoOptions, useScrollAnimate, useScrollCounter, useScrollDraw, useScrollText, useScrollVideo };

package/dist/vue/index.mjs

@@ -1 +1 @@
-export{d as ScrollAnimate,f as ScrollCounter,b as ScrollDraw,j as ScrollText,h as ScrollVideo,c as useScrollAnimate,e as useScrollCounter,a as useScrollDraw,i as useScrollText,g as useScrollVideo}from'../chunk-E4M2PB7B.mjs';import'../chunk-JC5BD4RB.mjs';import'../chunk-SNCRC6BA.mjs';import'../chunk-4MH5SQTH.mjs';import'../chunk-QJ4H2HW3.mjs';import'../chunk-WDIHLRZZ.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';
+export{d as ScrollAnimate,f as ScrollCounter,b as ScrollDraw,j as ScrollText,h as ScrollVideo,c as useScrollAnimate,e as useScrollCounter,a as useScrollDraw,i as useScrollText,g as useScrollVideo}from'../chunk-ZZCTLVGT.mjs';import'../chunk-XSVTHCLO.mjs';import'../chunk-JC5BD4RB.mjs';import'../chunk-SNCRC6BA.mjs';import'../chunk-4MH5SQTH.mjs';import'../chunk-QJ4H2HW3.mjs';import'../chunk-WDIHLRZZ.mjs';import'../chunk-OJFWQ6CU.mjs';import'../chunk-YWKPTYSG.mjs';import'../chunk-YZV4Z3EQ.mjs';import'../chunk-PEFR3ZB7.mjs';import'../chunk-DM6EDKWH.mjs';import'../chunk-4DOJSIEQ.mjs';import'../chunk-BCV4RAIX.mjs';import'../chunk-LFSU6LR3.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.16.1",
+  "version": "2.17.0",
   "description": "Scroll-driven animation for the web — draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",

package/dist/chunk-E4M2PB7B.mjs

@@ -1 +0,0 @@
-import {a as a$2}from'./chunk-JC5BD4RB.mjs';import {a as a$3}from'./chunk-SNCRC6BA.mjs';import {a as a$1}from'./chunk-4MH5SQTH.mjs';import {a}from'./chunk-QJ4H2HW3.mjs';import {b as b$1}from'./chunk-WDIHLRZZ.mjs';import {defineComponent,ref,onMounted,onUnmounted,h}from'vue';function x(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=b$1(t.value,e);onUnmounted(()=>n.destroy());}),t}var T=defineComponent({name:"ScrollDraw",props:{selector:{type:String},speed:{type:Number},fade:{type:Boolean},stagger:{type:Number},easing:{type:[String,Function]},direction:{type:String},trigger:{type:Object},onProgress:{type:Function},onStart:{type:Function},onComplete:{type:Function},once:{type:Boolean},debug:{type:Boolean}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let o={};e.selector!=null&&(o.selector=e.selector),e.speed!=null&&(o.speed=e.speed),e.fade!=null&&(o.fade=e.fade),e.stagger!=null&&(o.stagger=e.stagger),e.easing!=null&&(o.easing=e.easing),e.direction!=null&&(o.direction=e.direction),e.trigger!=null&&(o.trigger=e.trigger),e.once!=null&&(o.once=e.once),e.debug!=null&&(o.debug=e.debug),e.onProgress!=null&&(o.onProgress=e.onProgress),e.onStart!=null&&(o.onStart=e.onStart),e.onComplete!=null&&(o.onComplete=e.onComplete);let g=b$1(n.value,o);onUnmounted(()=>g.destroy());}),()=>h("div",{ref:n},t.default?.())}});function b(e){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=a(t.value,e);onUnmounted(()=>n.destroy());}),t}var w=defineComponent({name:"ScrollAnimate",props:{options:{type:Object,required:true}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let o=a(n.value,e.options);onUnmounted(()=>o.destroy());}),()=>h("div",{ref:n},t.default?.())}});function D(e){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=a$1(t.value,e);onUnmounted(()=>n.destroy());}),t}var E=defineComponent({name:"ScrollCounter",props:{to:{type:Number,required:true},from:{type:Number},format:{type:Function},easing:{type:[String,Function]},trigger:{type:Object},once:{type:Boolean},decimals:{type:Number},onComplete:{type:Function}},setup(e){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n={to:e.to};e.from!=null&&(n.from=e.from),e.format!=null&&(n.format=e.format),e.easing!=null&&(n.easing=e.easing),e.trigger!=null&&(n.trigger=e.trigger),e.once!=null&&(n.once=e.once),e.decimals!=null&&(n.decimals=e.decimals),e.onComplete!=null&&(n.onComplete=e.onComplete);let o=a$1(t.value,n);onUnmounted(()=>o.destroy());}),()=>h("span",{ref:t})}});function M(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=a$2(t.value,e);onUnmounted(()=>n.destroy());}),t}var H=defineComponent({name:"ScrollVideo",props:{src:{type:String,required:true},options:{type:Object},muted:{type:Boolean,default:true},playsInline:{type:Boolean,default:true},class:{type:String}},setup(e){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=a$2(t.value,e.options??{});onUnmounted(()=>n.destroy());}),()=>h("video",{ref:t,src:e.src,muted:e.muted,playsinline:e.playsInline,preload:"auto",class:e.class})}});function L(e={}){let t=ref(null);return onMounted(()=>{if(!t.value)return;let n=a$3(t.value,e);onUnmounted(()=>n.destroy());}),t}var R=defineComponent({name:"ScrollText",props:{options:{type:Object},tag:{type:String,default:"p"}},setup(e,{slots:t}){let n=ref(null);return onMounted(()=>{if(!n.value)return;let o=a$3(n.value,e.options??{});onUnmounted(()=>o.destroy());}),()=>h(e.tag,{ref:n},t.default?.())}});export{x as a,T as b,b as c,w as d,D as e,E as f,M as g,H as h,L as i,R as j};