@ssgoi/vue 3.0.0 → 3.1.0

package/README.md

@@ -115,8 +115,8 @@ Animate specific elements during mount/unmount:
 <template>
   <div v-transition="{
     key: 'card',
-    in: fadeIn(),
-    out: slideUp()
+    in: fade(),
+    out: slide({ direction: 'up' })
   }">
     <h2>Animated Card</h2>
   </div>
@@ -124,7 +124,7 @@ Animate specific elements during mount/unmount:
 
 <script setup>
 import { vTransition as vTransitionDirective } from '@ssgoi/vue';
-import { fadeIn, slideUp } from '@ssgoi/vue/transitions';
+import { fade, slide } from '@ssgoi/vue/transitions';
 
 // Local directive registration
 const vTransition = vTransitionDirective;
@@ -157,7 +157,7 @@ app.mount('#app');
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
 import { transition } from '@ssgoi/vue';
-import { fadeIn, slideUp } from '@ssgoi/vue/transitions';
+import { fade, slide } from '@ssgoi/vue/transitions';
 
 const cardRef = ref();
 let cleanup;
@@ -165,8 +165,8 @@ let cleanup;
 onMounted(() => {
   cleanup = transition({
     key: 'card',
-    in: fadeIn(),
-    out: slideUp()
+    in: fade(),
+    out: slide({ direction: 'up' })
   })(cardRef.value);
 });
 
@@ -256,8 +256,8 @@ Apply transitions to individual elements.
 ```vue
 <div v-transition="{
   key: 'unique-key',
-  in: fadeIn(),
-  out: fadeOut()
+  in: fade(),
+  out: fade()
 }">
   Content
 </div>
@@ -271,8 +271,8 @@ Apply transitions programmatically.
 ```javascript
 const cleanup = transition({
   key: 'unique-key',
-  in: fadeIn(),
-  out: fadeOut()
+  in: fade(),
+  out: fade()
 })(element);
 ```
 
@@ -286,12 +286,12 @@ const cleanup = transition({
 - `pinterest()` - Pinterest-style expand effect
 
 ### Element Transitions (`@ssgoi/vue/transitions`)
-- `fadeIn()` / `fadeOut()`
-- `slideUp()` / `slideDown()` / `slideLeft()` / `slideRight()`
-- `scaleIn()` / `scaleOut()`
-- `bounce()`
-- `blur()`
-- `rotate()`
+- `fade()` - Fade in/out effect
+- `slide({ direction })` - Slide animation with direction: 'up', 'down', 'left', 'right'
+- `scale()` - Scale in/out effect
+- `bounce()` - Bounce animation
+- `blur()` - Blur effect
+- `rotate()` - Rotation animation
 
 ## Spring Physics Configuration
 

package/dist/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(n){return("tick"in n||"css"in n)&&!("springs"in n)}function r(n){return"springs"in n}function s(n){return"css"in n&&typeof n.css=="function"}function e(n){return"tick"in n&&typeof n.tick=="function"}function o(n){if(s(n)&&e(n))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function a(n){if(n.tick&&n.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}function f(n){return r(n)?(n.springs.forEach(a),n):(o(n),{prepare:n.prepare,wait:n.wait,onStart:n.onStart,onEnd:n.onEnd,springs:[{spring:n.spring,tick:n.tick,css:n.css}],schedule:"parallel"})}function g(n){const c=n.schedule??"parallel",l=n.springs.map(t=>{let i;switch(c){case"parallel":i=0;break;case"sequential":i=1;break;case"stagger":i=Math.max(0,Math.min(1,t.offset??0));break;default:i=0}return{...t,normalizedOffset:i}}),{schedule:d,...u}=n;return{...u,springs:l}}exports.isCssAnimation=s;exports.isMultiSpring=r;exports.isSingleSpring=p;exports.isTickAnimation=e;exports.normalizeMultiSpringSchedule=g;exports.normalizeToMultiSpring=f;exports.validateAnimationMode=o;exports.validateSpringItem=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e){return("tick"in e||"css"in e)&&!("springs"in e)}function s(e){return"springs"in e}function o(e){return"css"in e&&typeof e.css=="function"}function a(e){return"tick"in e&&typeof e.tick=="function"}function c(e){if(o(e)&&a(e))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(e){if(e.tick&&e.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function m(e){const n=await e;return s(n)?(n.springs.forEach(l),n):(c(n),{prepare:n.prepare,wait:n.wait,onStart:n.onStart,onEnd:n.onEnd,springs:[{spring:n.spring,tick:n.tick,css:n.css}],schedule:"parallel"})}function S(e,n){const u=e.schedule??"parallel",f=e.springs.map(r=>{let t;switch(u){case"parallel":t=0;break;case"sequential":t=1;break;case"stagger":t=Math.max(0,Math.min(1,r.offset??0));break;default:t=0}const{css:i,offset:w,...g}=r,d=i?typeof i=="function"?n?{element:n,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...g,css:d,normalizedOffset:t}}),{schedule:k,...p}=e;return{...p,springs:f}}exports.isCssAnimation=o;exports.isMultiSpring=s;exports.isSingleSpring=h;exports.isTickAnimation=a;exports.normalizeMultiSpringSchedule=S;exports.normalizeToMultiSpring=m;exports.validateAnimationMode=c;exports.validateSpringItem=l;

package/dist/core/dist/types.js

@@ -1,73 +1,77 @@
-function f(n) {
+function k(n) {
   return ("tick" in n || "css" in n) && !("springs" in n);
 }
-function e(n) {
+function f(n) {
   return "springs" in n;
 }
-function o(n) {
+function p(n) {
   return "css" in n && typeof n.css == "function";
 }
-function c(n) {
+function u(n) {
   return "tick" in n && typeof n.tick == "function";
 }
-function l(n) {
-  if (o(n) && c(n))
+function g(n) {
+  if (p(n) && u(n))
     throw new Error(
       "SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
     );
 }
-function p(n) {
+function d(n) {
   if (n.tick && n.css)
     throw new Error(
       "SpringItem cannot have both 'tick' and 'css' defined. Use one or the other."
     );
 }
-function g(n) {
-  return e(n) ? (n.springs.forEach(p), n) : (l(n), {
-    prepare: n.prepare,
-    wait: n.wait,
-    onStart: n.onStart,
-    onEnd: n.onEnd,
+async function S(n) {
+  const e = await n;
+  return f(e) ? (e.springs.forEach(d), e) : (g(e), {
+    prepare: e.prepare,
+    wait: e.wait,
+    onStart: e.onStart,
+    onEnd: e.onEnd,
     springs: [
       {
-        spring: n.spring,
-        tick: n.tick,
-        css: n.css
+        spring: e.spring,
+        tick: e.tick,
+        css: e.css
       }
     ],
     schedule: "parallel"
   });
 }
-function h(n) {
-  const r = n.schedule ?? "parallel", s = n.springs.map((t) => {
-    let i;
-    switch (r) {
-      case "parallel":
-        i = 0;
-        break;
-      case "sequential":
-        i = 1;
-        break;
-      case "stagger":
-        i = Math.max(0, Math.min(1, t.offset ?? 0));
-        break;
-      default:
-        i = 0;
+function w(n, e) {
+  const r = n.schedule ?? "parallel", a = n.springs.map(
+    (s) => {
+      let t;
+      switch (r) {
+        case "parallel":
+          t = 0;
+          break;
+        case "sequential":
+          t = 1;
+          break;
+        case "stagger":
+          t = Math.max(0, Math.min(1, s.offset ?? 0));
+          break;
+        default:
+          t = 0;
+      }
+      const { css: i, offset: m, ...c } = s, l = i ? typeof i == "function" ? e ? { element: e, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
+      return { ...c, css: l, normalizedOffset: t };
     }
-    return { ...t, normalizedOffset: i };
-  }), { schedule: u, ...a } = n;
+  ), { schedule: h, ...o } = n;
   return {
-    ...a,
-    springs: s
+    ...o,
+    springs: a
   };
 }
 export {
-  o as isCssAnimation,
-  e as isMultiSpring,
-  f as isSingleSpring,
-  c as isTickAnimation,
-  h as normalizeMultiSpringSchedule,
-  g as normalizeToMultiSpring,
-  l as validateAnimationMode,
-  p as validateSpringItem
+  p as isCssAnimation,
+  f as isMultiSpring,
+  k as isSingleSpring,
+  u as isTickAnimation,
+  w as normalizeMultiSpringSchedule,
+  S as normalizeToMultiSpring,
+  g as validateAnimationMode,
+  d as validateSpringItem
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vue/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),t=require("./vue/src/lib/ssgoi.vue.cjs"),e=require("./vue/src/lib/ssgoi-transition.vue.cjs");exports.transition=n.transition;exports.vTransition=n.vTransition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=t.default;exports.SsgoiTransition=e.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vue/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),e=require("./vue/src/lib/ssgoi.vue.cjs"),n=require("./vue/src/lib/ssgoi-transition.vue.cjs"),r=require("./vue/src/lib/transition-scope.vue.cjs");exports.transition=t.transition;exports.vTransition=t.vTransition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=e.default;exports.SsgoiTransition=n.default;exports.TransitionScope=r.default;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { transition, vTransition } from './transition';
 export * from './types';
 export { default as Ssgoi } from './ssgoi.vue';
 export { default as SsgoiTransition } from './ssgoi-transition.vue';
+export { default as TransitionScope } from './transition-scope.vue';

package/dist/index.js

@@ -1,18 +1,20 @@
-import { transition as o, vTransition as t } from "./vue/src/lib/transition.js";
-import { isCssAnimation as a, isMultiSpring as e, isSingleSpring as s, isTickAnimation as l, normalizeMultiSpringSchedule as m, normalizeToMultiSpring as p, validateAnimationMode as S, validateSpringItem as g } from "./core/dist/types.js";
-import { default as f } from "./vue/src/lib/ssgoi.vue.js";
+import { transition as n, vTransition as t } from "./vue/src/lib/transition.js";
+import { isCssAnimation as a, isMultiSpring as e, isSingleSpring as s, isTickAnimation as l, normalizeMultiSpringSchedule as m, normalizeToMultiSpring as p, validateAnimationMode as S, validateSpringItem as f } from "./core/dist/types.js";
+import { default as d } from "./vue/src/lib/ssgoi.vue.js";
 import { default as x } from "./vue/src/lib/ssgoi-transition.vue.js";
+import { default as M } from "./vue/src/lib/transition-scope.vue.js";
 export {
-  f as Ssgoi,
+  d as Ssgoi,
   x as SsgoiTransition,
+  M as TransitionScope,
   a as isCssAnimation,
   e as isMultiSpring,
   s as isSingleSpring,
   l as isTickAnimation,
   m as normalizeMultiSpringSchedule,
   p as normalizeToMultiSpring,
-  o as transition,
+  n as transition,
   t as vTransition,
   S as validateAnimationMode,
-  g as validateSpringItem
+  f as validateSpringItem
 };

package/dist/transition-scope.vue.d.ts

@@ -0,0 +1,21 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        scopeRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    scopeRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/transition.d.ts

@@ -1,6 +1,9 @@
-import { transition as _transition, Transition, TransitionKey } from '@ssgoi/core';
+import { transition as _transition, Transition, TransitionKey, TransitionScope } from '@ssgoi/core';
 import { Directive } from 'vue';
 export declare const transition: typeof _transition;
-export declare const vTransition: Directive<HTMLElement, (Transition & {
-    key?: TransitionKey;
-}) | undefined>;
+type TransitionConfig = Transition & {
+    key: TransitionKey;
+    scope?: TransitionScope;
+};
+export declare const vTransition: Directive<HTMLElement, TransitionConfig | undefined>;
+export {};

package/dist/vue/src/lib/ssgoi.vue.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("./context.cjs"),s=require("@ssgoi/core"),u=e.defineComponent({__name:"ssgoi",props:{config:{}},setup(t){const o=t,n=e.computed(()=>s.createSggoiTransitionContext(o.config));return e.watchEffect(()=>{c.provideSsgoi(n.value)}),(r,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(r.$slots,"default")]))}});exports.default=u;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("./context.cjs"),s=require("@ssgoi/core"),u=e.defineComponent({__name:"ssgoi",props:{config:{}},setup(t){const o=t,n=e.computed(()=>s.createSggoiTransitionContext(o.config,{outFirst:!1}));return e.watchEffect(()=>{c.provideSsgoi(n.value)}),(r,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.renderSlot(r.$slots,"default")]))}});exports.default=u;

package/dist/vue/src/lib/ssgoi.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as r, computed as c, watchEffect as i, createElementBlock as s, openBlock as p, renderSlot as a } from "vue";
+import { defineComponent as r, computed as c, watchEffect as s, createElementBlock as i, openBlock as a, renderSlot as p } from "vue";
 import { provideSsgoi as f } from "./context.js";
 import { createSggoiTransitionContext as l } from "@ssgoi/core";
 const _ = /* @__PURE__ */ r({
@@ -7,11 +7,17 @@ const _ = /* @__PURE__ */ r({
     config: {}
   },
   setup(o) {
-    const e = o, t = c(() => l(e.config));
-    return i(() => {
+    const e = o, t = c(
+      () => l(e.config, {
+        // Vue directive uses unmounted hook for cleanup,
+        // so OUT and IN can arrive in any order
+        outFirst: !1
+      })
+    );
+    return s(() => {
       f(t.value);
-    }), (n, m) => (p(), s("div", null, [
-      a(n.$slots, "default")
+    }), (n, m) => (a(), i("div", null, [
+      p(n.$slots, "default")
     ]));
   }
 });

package/dist/vue/src/lib/transition-scope.vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("@ssgoi/core"),s=e.defineComponent({__name:"transition-scope",setup(c){const t=e.ref(null);let n;return e.onMounted(()=>{t.value&&(n=r.createTransitionScope()(t.value))}),e.onUnmounted(()=>{n?.()}),(o,l)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"scopeRef",ref:t,style:{display:"contents"}},[e.renderSlot(o.$slots,"default")],512))}});exports.default=s;

package/dist/vue/src/lib/transition-scope.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent as t, ref as r, onMounted as s, onUnmounted as c, createElementBlock as l, openBlock as a, renderSlot as p } from "vue";
+import { createTransitionScope as f } from "@ssgoi/core";
+const _ = /* @__PURE__ */ t({
+  __name: "transition-scope",
+  setup(i) {
+    const e = r(null);
+    let o;
+    return s(() => {
+      e.value && (o = f()(e.value));
+    }), c(() => {
+      o?.();
+    }), (n, u) => (a(), l("div", {
+      ref_key: "scopeRef",
+      ref: e,
+      style: { display: "contents" }
+    }, [
+      p(n.$slots, "default")
+    ], 512));
+  }
+});
+export {
+  _ as default
+};

package/dist/vue/src/lib/transition-scope.vue2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./transition-scope.vue.cjs");exports.default=e.default;

package/dist/vue/src/lib/transition-scope.vue2.js

@@ -0,0 +1,4 @@
+import f from "./transition-scope.vue.js";
+export {
+  f as default
+};

package/dist/vue/src/lib/transition.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@ssgoi/core"),e=s.transition,r={mounted(n,t){if(!t.value){console.warn("[SSGOI] v-transition directive requires a configuration object");return}const o=t.value;setTimeout(()=>{const i=e({key:o.key,in:o.in,out:o.out,ref:n})(n);n._ssgoiCleanup=i},0)},unmounted(n){const t=n._ssgoiCleanup;t&&(t(),delete n._ssgoiCleanup)}};exports.transition=e;exports.vTransition=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@ssgoi/core"),o=s.transition,r={mounted(n,t){if(!t.value){console.warn("[SSGOI] v-transition directive requires a configuration object");return}const e=t.value,i=o(e)(n);n._ssgoiCleanup=i},unmounted(n){const t=n._ssgoiCleanup;t&&(t(),delete n._ssgoiCleanup)}};exports.transition=o;exports.vTransition=r;

package/dist/vue/src/lib/transition.js

@@ -1,29 +1,21 @@
-import { transition as e } from "@ssgoi/core";
-const s = e, r = {
-  mounted(n, t) {
-    if (!t.value) {
+import { transition as s } from "@ssgoi/core";
+const e = s, r = {
+  mounted(n, o) {
+    if (!o.value) {
       console.warn(
         "[SSGOI] v-transition directive requires a configuration object"
       );
       return;
     }
-    const o = t.value;
-    setTimeout(() => {
-      const i = s({
-        key: o.key,
-        in: o.in,
-        out: o.out,
-        ref: n
-      })(n);
-      n._ssgoiCleanup = i;
-    }, 0);
+    const t = o.value, i = e(t)(n);
+    n._ssgoiCleanup = i;
   },
   unmounted(n) {
-    const t = n._ssgoiCleanup;
-    t && (t(), delete n._ssgoiCleanup);
+    const o = n._ssgoiCleanup;
+    o && (o(), delete n._ssgoiCleanup);
   }
 };
 export {
-  s as transition,
+  e as transition,
   r as vTransition
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/vue",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Vue bindings for SSGOI - Native app-like page transitions for Vue applications",
   "private": false,
   "type": "module",
@@ -45,7 +45,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "3.0.0"
+    "@ssgoi/core": "^3.4.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"