taos
Version:
TAOS - Tailwind CSS Animation on Scroll Library
2 lines (1 loc) • 2.21 kB
JavaScript
var TAOS=function(y,r){"use strict";function S(e){return r.getCurrentScope()?(r.onScopeDispose(e),!0):!1}function w(e){return typeof e=="function"?e():r.unref(e)}const h=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const A=Object.prototype.toString,b=e=>A.call(e)==="[object Object]",N=()=>{};function O(e){var t;const n=w(e);return(t=n==null?void 0:n.$el)!=null?t:n}const g=h?window:void 0;function C(...e){let t,n,o,s;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,o,s]=e,t=g):[t,n,o,s]=e,!t)return N;Array.isArray(n)||(n=[n]),Array.isArray(o)||(o=[o]);const l=[],a=()=>{l.forEach(c=>c()),l.length=0},i=(c,u,p,m)=>(c.addEventListener(u,p,m),()=>c.removeEventListener(u,p,m)),f=r.watch(()=>[O(t),w(s)],([c,u])=>{if(a(),!c)return;const p=b(u)?{...u}:u;l.push(...n.flatMap(m=>o.map(j=>i(c,m,j,p))))},{immediate:!0,flush:"post"}),d=()=>{f(),a()};return S(d),d}function T(e={}){const{window:t=g,behavior:n="auto"}=e;if(!t)return{x:r.ref(0),y:r.ref(0)};const o=r.ref(t.scrollX),s=r.ref(t.scrollY),l=r.computed({get(){return o.value},set(i){scrollTo({left:i,behavior:n})}}),a=r.computed({get(){return s.value},set(i){scrollTo({top:i,behavior:n})}});return C(t,"scroll",()=>{o.value=t.scrollX,s.value=t.scrollY},{capture:!1,passive:!0}),{x:l,y:a}}const v=r.defineComponent({name:"TAOS",inheritAttrs:!0,props:{as:{type:String,default:"div"},className:{type:String,default:""},offset:{type:Number,default:0}},setup(e){const t=r.ref(null);let n=r.ref(""),o=r.ref(null);const{y:s}=T(),l=d=>d.replaceAll("taos:",""),a=e.className+" taos-init",i=l(a);r.onMounted(()=>{n.value=l(e.className)+" !duration-[0ms] !delay-[0ms]",window.requestAnimationFrame(()=>o.value=t.value.getBoundingClientRect().top-window.innerHeight+e.offset+window.scrollY)});let f=!1;return r.onUpdated(()=>{if(!f){f=!0,window.requestAnimationFrame(()=>{n.value=a});return}}),r.watch(s,()=>{if(f&&s.value>o.value){n.value=a;return}n.value=i}),{root:t,className:n,y:s}},render(){var e,t;return r.h(this.as,{ref:"root",className:this.className},(t=(e=this.$slots).default)==null?void 0:t.call(e))}});return y.TAOS=v,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"}),y}({},Vue);