@ssgoi/vue 5.0.0 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +32 -159
  2. package/dist/context.d.ts +5 -2
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.d.ts +1 -2
  5. package/dist/index.js +6 -16
  6. package/dist/ssgoi-transition.vue.cjs +1 -0
  7. package/dist/ssgoi-transition.vue.d.ts +1 -0
  8. package/dist/ssgoi-transition.vue.js +29 -0
  9. package/dist/ssgoi.vue.cjs +1 -0
  10. package/dist/ssgoi.vue.d.ts +4 -2
  11. package/dist/ssgoi.vue.js +19 -0
  12. package/dist/types.cjs +1 -1
  13. package/dist/types.js +1 -9
  14. package/dist/view-transitions.cjs +1 -0
  15. package/dist/view-transitions.d.ts +1 -0
  16. package/dist/view-transitions.js +1 -0
  17. package/package.json +7 -19
  18. package/dist/core/dist/types.cjs +0 -1
  19. package/dist/core/dist/types.js +0 -72
  20. package/dist/presets/index.cjs +0 -1
  21. package/dist/presets/index.d.ts +0 -1
  22. package/dist/presets/index.js +0 -1
  23. package/dist/transition-scope.vue.d.ts +0 -21
  24. package/dist/transition.d.ts +0 -9
  25. package/dist/transitions/index.cjs +0 -1
  26. package/dist/transitions/index.d.ts +0 -1
  27. package/dist/transitions/index.js +0 -1
  28. package/dist/view-transitions/index.cjs +0 -1
  29. package/dist/view-transitions/index.d.ts +0 -1
  30. package/dist/view-transitions/index.js +0 -1
  31. package/dist/vue/src/lib/ssgoi-transition.vue.cjs +0 -1
  32. package/dist/vue/src/lib/ssgoi-transition.vue.js +0 -31
  33. package/dist/vue/src/lib/ssgoi.vue.cjs +0 -1
  34. package/dist/vue/src/lib/ssgoi.vue.js +0 -26
  35. package/dist/vue/src/lib/transition-scope.vue.cjs +0 -1
  36. package/dist/vue/src/lib/transition-scope.vue.js +0 -23
  37. package/dist/vue/src/lib/transition-scope.vue2.cjs +0 -1
  38. package/dist/vue/src/lib/transition-scope.vue2.js +0 -4
  39. package/dist/vue/src/lib/transition.cjs +0 -1
  40. package/dist/vue/src/lib/transition.js +0 -21
  41. /package/dist/{vue/src/lib/context.cjs → context.cjs} +0 -0
  42. /package/dist/{vue/src/lib/context.js → context.js} +0 -0
  43. /package/dist/{vue/src/lib/ssgoi-transition.vue2.cjs → ssgoi-transition.vue2.cjs} +0 -0
  44. /package/dist/{vue/src/lib/ssgoi-transition.vue2.js → ssgoi-transition.vue2.js} +0 -0
  45. /package/dist/{vue/src/lib/ssgoi.vue2.cjs → ssgoi.vue2.cjs} +0 -0
  46. /package/dist/{vue/src/lib/ssgoi.vue2.js → ssgoi.vue2.js} +0 -0
package/README.md CHANGED
@@ -16,7 +16,7 @@ SSGOI brings native app-like page transitions to the web. Transform your static
16
16
  - **🚀 SSR Ready** - Perfect compatibility with Nuxt. No hydration issues, SEO-friendly
17
17
  - **🎯 Use Your Router** - Keep your existing routing. Vue Router, Nuxt - all work seamlessly
18
18
  - **💾 State Persistence** - Remembers animation state during navigation, even with browser back/forward
19
- - **🖖 Vue Optimized** - Built specifically for Vue 3 with Composition API and custom directives
19
+ - **🖖 Vue Optimized** - Built specifically for Vue 3 with Composition API components
20
20
 
21
21
  ## Installation
22
22
 
@@ -43,11 +43,11 @@ pnpm add @ssgoi/vue
43
43
  </template>
44
44
 
45
45
  <script setup>
46
- import { Ssgoi } from '@ssgoi/vue';
47
- import { fade } from '@ssgoi/vue/view-transitions';
46
+ import { Ssgoi } from "@ssgoi/vue";
47
+ import { fade } from "@ssgoi/vue/view-transitions";
48
48
 
49
49
  const config = {
50
- defaultTransition: fade()
50
+ transitions: [fade({ paths: ["/", "/about"] })],
51
51
  };
52
52
  </script>
53
53
  ```
@@ -63,11 +63,11 @@ const config = {
63
63
  </template>
64
64
 
65
65
  <script setup>
66
- import { SsgoiTransition } from '@ssgoi/vue';
66
+ import { SsgoiTransition } from "@ssgoi/vue";
67
67
  </script>
68
68
  ```
69
69
 
70
- **That's it!** Your pages now transition smoothly with a fade effect.
70
+ **That's it!** Your pages now transition smoothly with the configured effect.
71
71
 
72
72
  ## Advanced Transitions
73
73
 
@@ -79,102 +79,18 @@ Define different transitions for different routes:
79
79
  const config = {
80
80
  transitions: [
81
81
  // Scroll between tabs
82
- { from: '/home', to: '/about', transition: scroll({ direction: 'up' }) },
83
- { from: '/about', to: '/home', transition: scroll({ direction: 'down' }) },
84
-
82
+ scroll({ paths: ["/home", "/about"] }),
83
+
85
84
  // Drill in when entering details
86
- { from: '/products', to: '/products/*', transition: drill({ direction: 'enter' }) },
87
-
88
- // Pinterest-style image transitions
89
- { from: '/gallery', to: '/photo/*', transition: pinterest() }
85
+ drill({ enter: "/products/*", exit: "/products" }),
86
+
87
+ // Shared element image transitions
88
+ zoom({ paths: ["/gallery", "/photo/*"], type: "expand" }),
90
89
  ],
91
- defaultTransition: fade()
92
90
  };
93
91
  ```
94
92
 
95
- ### Symmetric Transitions
96
-
97
- Automatically create bidirectional transitions:
98
-
99
- ```javascript
100
- {
101
- from: '/home',
102
- to: '/about',
103
- transition: scroll({ direction: 'up' }),
104
- symmetric: true // Automatically creates reverse transition
105
- }
106
- ```
107
-
108
- ### Individual Element Animations
109
-
110
- Animate specific elements during mount/unmount:
111
-
112
- #### Method 1: Using Vue Directive (Recommended)
113
-
114
- ```vue
115
- <template>
116
- <div v-transition="{
117
- key: 'card',
118
- in: fade(),
119
- out: slide({ direction: 'up' })
120
- }">
121
- <h2>Animated Card</h2>
122
- </div>
123
- </template>
124
-
125
- <script setup>
126
- import { vTransition as vTransitionDirective } from '@ssgoi/vue';
127
- import { fade, slide } from '@ssgoi/vue/transitions';
128
-
129
- // Local directive registration
130
- const vTransition = vTransitionDirective;
131
- </script>
132
- ```
133
-
134
- **Global Registration (in your main.ts/app.ts):**
135
- ```javascript
136
- import { createApp } from 'vue';
137
- import { vTransition } from '@ssgoi/vue';
138
- import App from './App.vue';
139
-
140
- const app = createApp(App);
141
-
142
- // Register the directive globally
143
- app.directive('transition', vTransition);
144
-
145
- app.mount('#app');
146
- ```
147
-
148
- #### Method 2: Using Composition API
149
-
150
- ```vue
151
- <template>
152
- <div ref="cardRef">
153
- <h2>Animated Card</h2>
154
- </div>
155
- </template>
156
-
157
- <script setup>
158
- import { ref, onMounted, onUnmounted } from 'vue';
159
- import { transition } from '@ssgoi/vue';
160
- import { fade, slide } from '@ssgoi/vue/transitions';
161
-
162
- const cardRef = ref();
163
- let cleanup;
164
-
165
- onMounted(() => {
166
- cleanup = transition({
167
- key: 'card',
168
- in: fade(),
169
- out: slide({ direction: 'up' })
170
- })(cardRef.value);
171
- });
172
-
173
- onUnmounted(() => {
174
- cleanup?.();
175
- });
176
- </script>
177
- ```
93
+ The route helpers return path transition groups, so nested arrays are accepted in `config.transitions`.
178
94
 
179
95
  ## Nuxt 3 Example
180
96
 
@@ -189,11 +105,11 @@ onUnmounted(() => {
189
105
  </template>
190
106
 
191
107
  <script setup>
192
- import { Ssgoi } from '@ssgoi/vue';
193
- import { scroll } from '@ssgoi/vue/view-transitions';
108
+ import { Ssgoi } from "@ssgoi/vue";
109
+ import { scroll } from "@ssgoi/vue/view-transitions";
194
110
 
195
111
  const config = {
196
- defaultTransition: scroll({ direction: 'up' })
112
+ transitions: [scroll({ paths: ["/", "/about", "/products"] })],
197
113
  };
198
114
  </script>
199
115
 
@@ -205,7 +121,7 @@ const config = {
205
121
  </template>
206
122
 
207
123
  <script setup>
208
- import { SsgoiTransition } from '@ssgoi/vue';
124
+ import { SsgoiTransition } from "@ssgoi/vue";
209
125
  </script>
210
126
  ```
211
127
 
@@ -214,6 +130,7 @@ import { SsgoiTransition } from '@ssgoi/vue';
214
130
  ### Components
215
131
 
216
132
  #### `<Ssgoi>`
133
+
217
134
  The provider component that manages transition context.
218
135
 
219
136
  ```vue
@@ -223,9 +140,12 @@ The provider component that manages transition context.
223
140
  ```
224
141
 
225
142
  Props:
143
+
226
144
  - `config` - Transition configuration object
145
+ - `host` - Optional external playback host for debug tooling
227
146
 
228
147
  #### `<SsgoiTransition>`
148
+
229
149
  Wrapper component for pages that should transition.
230
150
 
231
151
  ```vue
@@ -235,76 +155,28 @@ Wrapper component for pages that should transition.
235
155
  ```
236
156
 
237
157
  Props:
238
- - `id` - Unique identifier for the page (required)
239
-
240
- ### Composables
241
-
242
- #### `useSsgoi()`
243
- Access transition context and state.
244
-
245
- ```javascript
246
- import { useSsgoi } from '@ssgoi/vue';
247
-
248
- const ssgoi = useSsgoi();
249
- ```
250
-
251
- ### Directives
252
-
253
- #### `v-transition`
254
- Apply transitions to individual elements.
255
-
256
- ```vue
257
- <div v-transition="{
258
- key: 'unique-key',
259
- in: fade(),
260
- out: fade()
261
- }">
262
- Content
263
- </div>
264
- ```
265
-
266
- ### Functions
267
-
268
- #### `transition()`
269
- Apply transitions programmatically.
270
158
 
271
- ```javascript
272
- const cleanup = transition({
273
- key: 'unique-key',
274
- in: fade(),
275
- out: fade()
276
- })(element);
277
- ```
159
+ - `id` - Unique identifier for the page (required)
278
160
 
279
161
  ## Built-in Transitions
280
162
 
281
163
  ### Page Transitions (`@ssgoi/vue/view-transitions`)
164
+
282
165
  - `fade()` - Smooth opacity transition
283
166
  - `scroll()` - Vertical scrolling (up/down)
284
167
  - `drill()` - Drill in/out effect (enter/exit)
285
168
  - `hero()` - Shared element transitions
286
- - `pinterest()` - Pinterest-style expand effect
169
+ - `slide()` - Ordered horizontal page transitions
170
+ - `zoom()` - Shared element zoom transitions
287
171
 
288
- ### Element Transitions (`@ssgoi/vue/transitions`)
289
- - `fade()` - Fade in/out effect
290
- - `slide({ direction })` - Slide animation with direction: 'up', 'down', 'left', 'right'
291
- - `scale()` - Scale in/out effect
292
- - `bounce()` - Bounce animation
293
- - `blur()` - Blur effect
294
- - `rotate()` - Rotation animation
172
+ ## Typed Preset Configuration
295
173
 
296
- ## Spring Physics Configuration
297
-
298
- All transitions use spring physics for natural motion:
174
+ Transition presets are fully typed and use the core animation engine internally:
299
175
 
300
176
  ```javascript
301
177
  slide({
302
- direction: 'left',
303
- spring: {
304
- stiffness: 300, // 1-1000, higher = faster
305
- damping: 30 // 0-100, higher = less oscillation
306
- }
307
- })
178
+ paths: ["/products/all", "/products/fashion"],
179
+ });
308
180
  ```
309
181
 
310
182
  ## TypeScript Support
@@ -312,7 +184,7 @@ slide({
312
184
  SSGOI is written in TypeScript and provides full type definitions:
313
185
 
314
186
  ```typescript
315
- import type { SsgoiConfig, TransitionConfig } from '@ssgoi/vue';
187
+ import type { SsgoiConfig, TransitionConfig } from "@ssgoi/vue";
316
188
 
317
189
  const config: SsgoiConfig = {
318
190
  // Full type safety
@@ -336,6 +208,7 @@ const config: SsgoiConfig = {
336
208
  ## Documentation
337
209
 
338
210
  Visit [https://ssgoi.dev](https://ssgoi.dev) for:
211
+
339
212
  - Complete API reference
340
213
  - Interactive examples
341
214
  - Advanced patterns
@@ -347,4 +220,4 @@ We welcome contributions! Please see our [contributing guide](https://github.com
347
220
 
348
221
  ## License
349
222
 
350
- MIT © [MeurSyphus](https://github.com/meursyphus)
223
+ MIT © [MeurSyphus](https://github.com/meursyphus)
package/dist/context.d.ts CHANGED
@@ -1,3 +1,6 @@
1
+ import { ComputedRef } from 'vue';
1
2
  import { SsgoiContext } from './types';
2
- export declare const provideSsgoi: (context: SsgoiContext) => void;
3
- export declare const useSsgoi: () => SsgoiContext;
3
+ type SsgoiContextRef = ComputedRef<SsgoiContext>;
4
+ export declare const provideSsgoi: (context: SsgoiContextRef) => void;
5
+ export declare const useSsgoi: () => SsgoiContextRef;
6
+ export {};
package/dist/index.cjs CHANGED
@@ -1 +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"),s=require("./vue/src/lib/transition-scope.vue.cjs");exports.transition=n.transition;exports.vTransition=n.vTransition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;exports.Ssgoi=t.default;exports.SsgoiTransition=e.default;exports.TransitionScope=s.default;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.vue.cjs"),s=require("./ssgoi-transition.vue.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.default;exports.SsgoiTransition=s.default;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
package/dist/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- export { transition, vTransition } from './transition';
2
1
  export * from './types';
3
2
  export { default as Ssgoi } from './ssgoi.vue';
4
3
  export { default as SsgoiTransition } from './ssgoi-transition.vue';
5
- export { default as TransitionScope } from './transition-scope.vue';
4
+ export * from '@ssgoi/core';
package/dist/index.js CHANGED
@@ -1,18 +1,8 @@
1
- import { transition as n, vTransition as t } from "./vue/src/lib/transition.js";
2
- import { isCssAnimation as r, isMultiAnimation as s, isSingleAnimation as e, isTickAnimation as m, normalizeSchedule as l, normalizeToMultiAnimation as f } from "./core/dist/types.js";
3
- import { default as u } from "./vue/src/lib/ssgoi.vue.js";
4
- import { default as A } from "./vue/src/lib/ssgoi-transition.vue.js";
5
- import { default as T } from "./vue/src/lib/transition-scope.vue.js";
1
+ export * from "@ssgoi/core/types";
2
+ import { default as e } from "./ssgoi.vue.js";
3
+ import { default as a } from "./ssgoi-transition.vue.js";
4
+ export * from "@ssgoi/core";
6
5
  export {
7
- u as Ssgoi,
8
- A as SsgoiTransition,
9
- T as TransitionScope,
10
- r as isCssAnimation,
11
- s as isMultiAnimation,
12
- e as isSingleAnimation,
13
- m as isTickAnimation,
14
- l as normalizeSchedule,
15
- f as normalizeToMultiAnimation,
16
- n as transition,
17
- t as vTransition
6
+ e as Ssgoi,
7
+ a as SsgoiTransition
18
8
  };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./context.cjs"),l=e.defineComponent({__name:"ssgoi-transition",props:{id:{},as:{default:"div"},class:{default:void 0}},setup(t){const n=t,i=r.useSsgoi(),c=s=>{const o=s,a=s instanceof HTMLElement?s:o?.$el;a instanceof HTMLElement&&i.value.refFor(n.id)(a)};return(s,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{ref:c,"data-ssgoi-transition":t.id,class:e.normalizeClass(n.class)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["data-ssgoi-transition","class"]))}});exports.default=l;
@@ -14,6 +14,7 @@ declare function __VLS_template(): {
14
14
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
15
15
  declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
16
16
  as: keyof HTMLElementTagNameMap;
17
+ class: string;
17
18
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
18
19
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
19
20
  export default _default;
@@ -0,0 +1,29 @@
1
+ import { defineComponent as r, createBlock as c, openBlock as l, resolveDynamicComponent as d, normalizeClass as f, withCtx as m, renderSlot as u } from "vue";
2
+ import { useSsgoi as p } from "./context.js";
3
+ const C = /* @__PURE__ */ r({
4
+ __name: "ssgoi-transition",
5
+ props: {
6
+ id: {},
7
+ as: { default: "div" },
8
+ class: { default: void 0 }
9
+ },
10
+ setup(t) {
11
+ const o = t, a = p(), i = (s) => {
12
+ const n = s, e = s instanceof HTMLElement ? s : n?.$el;
13
+ e instanceof HTMLElement && a.value.refFor(o.id)(e);
14
+ };
15
+ return (s, n) => (l(), c(d(t.as), {
16
+ ref: i,
17
+ "data-ssgoi-transition": t.id,
18
+ class: f(o.class)
19
+ }, {
20
+ default: m(() => [
21
+ u(s.$slots, "default")
22
+ ]),
23
+ _: 3
24
+ }, 8, ["data-ssgoi-transition", "class"]));
25
+ }
26
+ });
27
+ export {
28
+ C as default
29
+ };
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./context.cjs"),i=require("@ssgoi/core/internal"),c=e.defineComponent({__name:"ssgoi",props:{config:{},host:{}},setup(o){const t=o,n=e.computed(()=>i.createSggoiTransitionContext(t.config,{host:t.host}));return s.provideSsgoi(n),(r,u)=>e.renderSlot(r.$slots,"default")}});exports.default=c;
@@ -1,6 +1,8 @@
1
1
  import { SsgoiConfig } from './types';
2
+ import { HostAnimation } from '@ssgoi/core/internal';
2
3
  interface Props {
3
4
  config: SsgoiConfig;
5
+ host?: HostAnimation;
4
6
  }
5
7
  declare function __VLS_template(): {
6
8
  attrs: Partial<{}>;
@@ -8,10 +10,10 @@ declare function __VLS_template(): {
8
10
  default?(_: {}): any;
9
11
  };
10
12
  refs: {};
11
- rootEl: HTMLDivElement;
13
+ rootEl: any;
12
14
  };
13
15
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
14
- declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
16
+ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
15
17
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
16
18
  export default _default;
17
19
  type __VLS_WithTemplateSlots<T, S> = T & {
@@ -0,0 +1,19 @@
1
+ import { defineComponent as n, computed as s, renderSlot as i } from "vue";
2
+ import { provideSsgoi as p } from "./context.js";
3
+ import { createSggoiTransitionContext as c } from "@ssgoi/core/internal";
4
+ const d = /* @__PURE__ */ n({
5
+ __name: "ssgoi",
6
+ props: {
7
+ config: {},
8
+ host: {}
9
+ },
10
+ setup(t) {
11
+ const o = t, e = s(
12
+ () => c(o.config, { host: o.host })
13
+ );
14
+ return p(e), (r, m) => i(r.$slots, "default");
15
+ }
16
+ });
17
+ export {
18
+ d as default
19
+ };
package/dist/types.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core/dist/types.cjs");exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
package/dist/types.js CHANGED
@@ -1,9 +1 @@
1
- import { isCssAnimation as o, isMultiAnimation as m, isSingleAnimation as t, isTickAnimation as a, normalizeSchedule as e, normalizeToMultiAnimation as l } from "./core/dist/types.js";
2
- export {
3
- o as isCssAnimation,
4
- m as isMultiAnimation,
5
- t as isSingleAnimation,
6
- a as isTickAnimation,
7
- e as normalizeSchedule,
8
- l as normalizeToMultiAnimation
9
- };
1
+ export * from "@ssgoi/core/types";
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
@@ -0,0 +1 @@
1
+ export * from '@ssgoi/core';
@@ -0,0 +1 @@
1
+ export * from "@ssgoi/core";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssgoi/vue",
3
- "version": "5.0.0",
3
+ "version": "6.0.0",
4
4
  "description": "Vue bindings for SSGOI - Native app-like page transitions for Vue applications",
5
5
  "private": false,
6
6
  "type": "module",
@@ -19,33 +19,21 @@
19
19
  "require": "./dist/index.cjs",
20
20
  "default": "./dist/index.js"
21
21
  },
22
- "./transitions": {
23
- "types": "./dist/transitions/index.d.ts",
24
- "import": "./dist/transitions/index.js",
25
- "require": "./dist/transitions/index.cjs",
26
- "default": "./dist/transitions/index.js"
27
- },
28
- "./view-transitions": {
29
- "types": "./dist/view-transitions/index.d.ts",
30
- "import": "./dist/view-transitions/index.js",
31
- "require": "./dist/view-transitions/index.cjs",
32
- "default": "./dist/view-transitions/index.js"
33
- },
34
22
  "./types": {
35
23
  "types": "./dist/types.d.ts",
36
24
  "import": "./dist/types.js",
37
25
  "require": "./dist/types.cjs",
38
26
  "default": "./dist/types.js"
39
27
  },
40
- "./presets": {
41
- "types": "./dist/presets/index.d.ts",
42
- "import": "./dist/presets/index.js",
43
- "require": "./dist/presets/index.cjs",
44
- "default": "./dist/presets/index.js"
28
+ "./view-transitions": {
29
+ "types": "./dist/view-transitions.d.ts",
30
+ "import": "./dist/view-transitions.js",
31
+ "require": "./dist/view-transitions.cjs",
32
+ "default": "./dist/view-transitions.js"
45
33
  }
46
34
  },
47
35
  "dependencies": {
48
- "@ssgoi/core": "^5.0.0"
36
+ "@ssgoi/core": "^6.0.0"
49
37
  },
50
38
  "peerDependencies": {
51
39
  "vue": "^3.5.0"
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(n){return("tick"in n||"css"in n)&&!("items"in n)}function a(n){return"items"in n}function d(n){return"css"in n&&typeof n.css=="function"}function f(n){return"tick"in n&&typeof n.tick=="function"}async function p(n){const e=await n;return a(e)?{prepare:e.prepare,wait:e.wait,onReady:e.onReady,onStart:e.onStart,onEnd:e.onEnd,items:e.items,schedule:e.schedule}:{prepare:e.prepare,wait:e.wait,onReady:e.onReady,onStart:e.onStart,onEnd:e.onEnd,items:[{physics:e.physics,tick:e.tick,css:e.css}],schedule:"parallel"}}function y(n,e){const o=n.schedule??"parallel",c=n.items.map(s=>{let t;switch(o){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:k,...l}=s,u=i?typeof i=="function"?e?{element:e,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...l,css:u,normalizedOffset:t}}),{schedule:h,...r}=n;return{...r,items:c}}exports.isCssAnimation=d;exports.isMultiAnimation=a;exports.isSingleAnimation=m;exports.isTickAnimation=f;exports.normalizeSchedule=y;exports.normalizeToMultiAnimation=p;
@@ -1,72 +0,0 @@
1
- function d(n) {
2
- return ("tick" in n || "css" in n) && !("items" in n);
3
- }
4
- function u(n) {
5
- return "items" in n;
6
- }
7
- function p(n) {
8
- return "css" in n && typeof n.css == "function";
9
- }
10
- function y(n) {
11
- return "tick" in n && typeof n.tick == "function";
12
- }
13
- async function h(n) {
14
- const e = await n;
15
- return u(e) ? {
16
- prepare: e.prepare,
17
- wait: e.wait,
18
- onReady: e.onReady,
19
- onStart: e.onStart,
20
- onEnd: e.onEnd,
21
- items: e.items,
22
- schedule: e.schedule
23
- } : {
24
- prepare: e.prepare,
25
- wait: e.wait,
26
- onReady: e.onReady,
27
- onStart: e.onStart,
28
- onEnd: e.onEnd,
29
- items: [
30
- {
31
- physics: e.physics,
32
- tick: e.tick,
33
- css: e.css
34
- }
35
- ],
36
- schedule: "parallel"
37
- };
38
- }
39
- function k(n, e) {
40
- const a = n.schedule ?? "parallel", o = n.items.map(
41
- (s) => {
42
- let t;
43
- switch (a) {
44
- case "parallel":
45
- t = 0;
46
- break;
47
- case "sequential":
48
- t = 1;
49
- break;
50
- case "stagger":
51
- t = Math.max(0, Math.min(1, s.offset ?? 0));
52
- break;
53
- default:
54
- t = 0;
55
- }
56
- const { css: i, offset: f, ...r } = s, l = i ? typeof i == "function" ? e ? { element: e, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
57
- return { ...r, css: l, normalizedOffset: t };
58
- }
59
- ), { schedule: m, ...c } = n;
60
- return {
61
- ...c,
62
- items: o
63
- };
64
- }
65
- export {
66
- p as isCssAnimation,
67
- u as isMultiAnimation,
68
- d as isSingleAnimation,
69
- y as isTickAnimation,
70
- k as normalizeSchedule,
71
- h as normalizeToMultiAnimation
72
- };
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/presets");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
@@ -1 +0,0 @@
1
- export * from '@ssgoi/core/presets';
@@ -1 +0,0 @@
1
- export * from "@ssgoi/core/presets";
@@ -1,21 +0,0 @@
1
- declare function __VLS_template(): {
2
- attrs: Partial<{}>;
3
- slots: {
4
- default?(_: {}): any;
5
- };
6
- refs: {
7
- scopeRef: HTMLDivElement;
8
- };
9
- rootEl: HTMLDivElement;
10
- };
11
- type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
12
- declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
13
- scopeRef: HTMLDivElement;
14
- }, HTMLDivElement>;
15
- declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
16
- export default _default;
17
- type __VLS_WithTemplateSlots<T, S> = T & {
18
- new (): {
19
- $slots: S;
20
- };
21
- };
@@ -1,9 +0,0 @@
1
- import { transition as _transition, Transition, TransitionKey, TransitionScope } from '@ssgoi/core';
2
- import { Directive } from 'vue';
3
- export declare const transition: typeof _transition;
4
- type TransitionConfig = Transition & {
5
- key: TransitionKey;
6
- scope?: TransitionScope;
7
- };
8
- export declare const vTransition: Directive<HTMLElement, TransitionConfig | undefined>;
9
- export {};
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/transitions");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
@@ -1 +0,0 @@
1
- export * from '@ssgoi/core/transitions';
@@ -1 +0,0 @@
1
- export * from "@ssgoi/core/transitions";
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/view-transitions");Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
@@ -1 +0,0 @@
1
- export * from '@ssgoi/core/view-transitions';
@@ -1 +0,0 @@
1
- export * from "@ssgoi/core/view-transitions";
@@ -1 +0,0 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),a=require("./transition.cjs"),r=require("./context.cjs"),c=t.defineComponent({__name:"ssgoi-transition",props:{id:{},as:{default:"div"},class:{}},setup(e){const s=e,i=r.useSsgoi(),o=t.computed(()=>({...i(s.id),key:s.id}));return(n,u)=>t.withDirectives((t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.as),{"data-ssgoi-transition":e.id,class:t.normalizeClass(s.class)},{default:t.withCtx(()=>[t.renderSlot(n.$slots,"default")]),_:3},8,["data-ssgoi-transition","class"])),[[t.unref(a.vTransition),o.value]])}});exports.default=c;
@@ -1,31 +0,0 @@
1
- import { defineComponent as a, computed as e, withDirectives as r, createBlock as c, openBlock as l, resolveDynamicComponent as d, normalizeClass as m, withCtx as u, renderSlot as f, unref as p } from "vue";
2
- import { vTransition as g } from "./transition.js";
3
- import { useSsgoi as v } from "./context.js";
4
- const x = /* @__PURE__ */ a({
5
- __name: "ssgoi-transition",
6
- props: {
7
- id: {},
8
- as: { default: "div" },
9
- class: {}
10
- },
11
- setup(t) {
12
- const s = t, n = v(), o = e(() => ({
13
- ...n(s.id),
14
- key: s.id
15
- }));
16
- return (i, C) => r((l(), c(d(t.as), {
17
- "data-ssgoi-transition": t.id,
18
- class: m(s.class)
19
- }, {
20
- default: u(() => [
21
- f(i.$slots, "default")
22
- ]),
23
- _: 3
24
- }, 8, ["data-ssgoi-transition", "class"])), [
25
- [p(g), o.value]
26
- ]);
27
- }
28
- });
29
- export {
30
- x as default
31
- };
@@ -1 +0,0 @@
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,{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;
@@ -1,26 +0,0 @@
1
- import { defineComponent as r, computed as c, watchEffect as s, createElementBlock as i, openBlock as a, renderSlot as p } from "vue";
2
- import { provideSsgoi as f } from "./context.js";
3
- import { createSggoiTransitionContext as l } from "@ssgoi/core";
4
- const _ = /* @__PURE__ */ r({
5
- __name: "ssgoi",
6
- props: {
7
- config: {}
8
- },
9
- setup(o) {
10
- const e = o, t = c(
11
- () => l(e.config, {
12
- // Vue directive uses unmounted hook for cleanup,
13
- // so OUT and IN can arrive in any order
14
- outFirst: !1
15
- })
16
- );
17
- return s(() => {
18
- f(t.value);
19
- }), (n, m) => (a(), i("div", null, [
20
- p(n.$slots, "default")
21
- ]));
22
- }
23
- });
24
- export {
25
- _ as default
26
- };
@@ -1 +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;
@@ -1,23 +0,0 @@
1
- import { defineComponent as t, ref as r, onMounted as s, onUnmounted as c, createElementBlock as l, openBlock as a, renderSlot as p } from "vue";
2
- import { createTransitionScope as f } from "@ssgoi/core";
3
- const _ = /* @__PURE__ */ t({
4
- __name: "transition-scope",
5
- setup(i) {
6
- const e = r(null);
7
- let o;
8
- return s(() => {
9
- e.value && (o = f()(e.value));
10
- }), c(() => {
11
- o?.();
12
- }), (n, u) => (a(), l("div", {
13
- ref_key: "scopeRef",
14
- ref: e,
15
- style: { display: "contents" }
16
- }, [
17
- p(n.$slots, "default")
18
- ], 512));
19
- }
20
- });
21
- export {
22
- _ as default
23
- };
@@ -1 +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;
@@ -1,4 +0,0 @@
1
- import f from "./transition-scope.vue.js";
2
- export {
3
- f as default
4
- };
@@ -1 +0,0 @@
1
- "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;
@@ -1,21 +0,0 @@
1
- import { transition as s } from "@ssgoi/core";
2
- const e = s, r = {
3
- mounted(n, o) {
4
- if (!o.value) {
5
- console.warn(
6
- "[SSGOI] v-transition directive requires a configuration object"
7
- );
8
- return;
9
- }
10
- const t = o.value, i = e(t)(n);
11
- n._ssgoiCleanup = i;
12
- },
13
- unmounted(n) {
14
- const o = n._ssgoiCleanup;
15
- o && (o(), delete n._ssgoiCleanup);
16
- }
17
- };
18
- export {
19
- e as transition,
20
- r as vTransition
21
- };
File without changes
File without changes