deja-vue 0.1.0 → 0.2.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.
- package/README.md +5 -1
- package/dist/index.d.ts +20 -22
- package/dist/index.js +52 -64
- package/package.json +5 -5
package/README.md
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -37,7 +37,6 @@ interface NestableAnimation {
|
|
|
37
37
|
}
|
|
38
38
|
interface WrappableAnimation {
|
|
39
39
|
group?: boolean;
|
|
40
|
-
initiallyHidden?: boolean;
|
|
41
40
|
tag?: string;
|
|
42
41
|
}
|
|
43
42
|
type BaseAnimation = ControllableAnimation & NestableAnimation & WrappableAnimation;
|
|
@@ -58,6 +57,25 @@ type TweenAnimationDefinition = ({
|
|
|
58
57
|
}) & Pick<NestableAnimation, 'position'>;
|
|
59
58
|
type TweenAnimation = BaseAnimation & TweenAnimationDefinition;
|
|
60
59
|
//#endregion
|
|
60
|
+
//#region src/composables/useAnimation.d.ts
|
|
61
|
+
declare function useAnimation(wrapper: Readonly<ShallowRef<HTMLElement | null>>, props: TimelineAnimation | TweenAnimation, emit: (event: typeof ANIMATION_EVENTS[number], timeline: gsap.core.Timeline) => void, options?: gsap.TimelineVars): {
|
|
62
|
+
animation: Animation;
|
|
63
|
+
controlled: _$vue.ComputedRef<boolean>;
|
|
64
|
+
parent: Animation | null;
|
|
65
|
+
ready: ShallowRef<boolean, boolean>;
|
|
66
|
+
};
|
|
67
|
+
//#endregion
|
|
68
|
+
//#region src/composables/useAnimationControls.d.ts
|
|
69
|
+
type AnimationControls<C = ControllableAnimation> = { [K in keyof C]?: MaybeRefOrGetter<C[K]> };
|
|
70
|
+
declare function useAnimationControls(animation: Animation, controls: AnimationControls): {
|
|
71
|
+
controlled: _$vue.ComputedRef<boolean>;
|
|
72
|
+
};
|
|
73
|
+
//#endregion
|
|
74
|
+
//#region src/composables/useAnimationNesting.d.ts
|
|
75
|
+
declare function useAnimationNesting(child?: Animation | gsap.Callback | string, options?: NestableAnimation): {
|
|
76
|
+
parent: Animation | null;
|
|
77
|
+
};
|
|
78
|
+
//#endregion
|
|
61
79
|
//#region src/components/Callback.vue.d.ts
|
|
62
80
|
type __VLS_Props$1 = NestableAnimation & {
|
|
63
81
|
fn: () => void;
|
|
@@ -114,7 +132,6 @@ declare const __VLS_base$1: _$vue.DefineComponent<TimelineAnimation, {
|
|
|
114
132
|
onUpdate?: ((...args: any[]) => any) | undefined;
|
|
115
133
|
}>, {
|
|
116
134
|
toggle: boolean;
|
|
117
|
-
initiallyHidden: boolean;
|
|
118
135
|
tag: string;
|
|
119
136
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
120
137
|
declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
|
|
@@ -144,23 +161,4 @@ type __VLS_WithSlots<T, S> = T & {
|
|
|
144
161
|
};
|
|
145
162
|
};
|
|
146
163
|
//#endregion
|
|
147
|
-
|
|
148
|
-
declare function useAnimation(wrapper: Readonly<ShallowRef<HTMLElement | null>>, props: TimelineAnimation | TweenAnimation, emit: (event: typeof ANIMATION_EVENTS[number], timeline: gsap.core.Timeline) => void, options?: gsap.TimelineVars): {
|
|
149
|
-
animation: Animation;
|
|
150
|
-
controlled: _$vue.ComputedRef<boolean>;
|
|
151
|
-
parent: Animation | null;
|
|
152
|
-
ready: ShallowRef<boolean, boolean>;
|
|
153
|
-
};
|
|
154
|
-
//#endregion
|
|
155
|
-
//#region src/composables/useAnimationControls.d.ts
|
|
156
|
-
type AnimationControls<C = ControllableAnimation> = { [K in keyof C]?: MaybeRefOrGetter<C[K]> };
|
|
157
|
-
declare function useAnimationControls(animation: Animation, controls: AnimationControls): {
|
|
158
|
-
controlled: _$vue.ComputedRef<boolean>;
|
|
159
|
-
};
|
|
160
|
-
//#endregion
|
|
161
|
-
//#region src/composables/useAnimationNesting.d.ts
|
|
162
|
-
declare function useAnimationNesting(child?: Animation | gsap.Callback | string, options?: NestableAnimation): {
|
|
163
|
-
parent: Animation | null;
|
|
164
|
-
};
|
|
165
|
-
//#endregion
|
|
166
|
-
export { ANIMATION_EVENTS, type Animation, BaseAnimation, _default as Callback, ControllableAnimation, NestableAnimation, _default$1 as PositionMarker, _default$2 as Timeline, TimelineAnimation, _default$3 as Tween, TweenAnimation, TweenAnimationDefinition, WrappableAnimation, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
|
|
164
|
+
export { ANIMATION_EVENTS, Animation, BaseAnimation, _default as Callback, ControllableAnimation, NestableAnimation, _default$1 as PositionMarker, _default$2 as Timeline, TimelineAnimation, _default$3 as Tween, TweenAnimation, TweenAnimationDefinition, WrappableAnimation, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Fragment, computed, createBlock, defineComponent, inject, nextTick, normalizeStyle, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
|
|
2
1
|
import { gsap } from "gsap";
|
|
2
|
+
import { Fragment, computed, createBlock, defineComponent, inject, nextTick, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
|
|
3
3
|
//#region src/constants.ts
|
|
4
4
|
const ANIMATION_EVENTS = [
|
|
5
5
|
"complete",
|
|
@@ -61,7 +61,7 @@ var Animation = class extends EventBus {
|
|
|
61
61
|
});
|
|
62
62
|
(options ? Object.entries(options).filter(([key]) => key.startsWith("on")) : []).forEach(([key, fn]) => {
|
|
63
63
|
const [firstChar, ...rest] = key.replace(/^on/, "");
|
|
64
|
-
const event = `${firstChar.toLowerCase()}${rest.join()}`;
|
|
64
|
+
const event = `${firstChar.toLowerCase()}${rest.join("")}`;
|
|
65
65
|
this.on(event, fn);
|
|
66
66
|
});
|
|
67
67
|
}
|
|
@@ -103,6 +103,23 @@ var Animation = class extends EventBus {
|
|
|
103
103
|
}
|
|
104
104
|
};
|
|
105
105
|
//#endregion
|
|
106
|
+
//#region src/composables/useAnimationControls.ts
|
|
107
|
+
function useAnimationControls(animation, controls) {
|
|
108
|
+
const progress = computed(() => toValue(controls.progress));
|
|
109
|
+
const toggle = computed(() => toValue(controls.toggle));
|
|
110
|
+
const controlled = computed(() => typeof progress.value === "number" || typeof toggle.value === "boolean");
|
|
111
|
+
if (controlled.value && toggle.value !== true) animation.timeline.pause();
|
|
112
|
+
watch(progress, (value) => {
|
|
113
|
+
if (typeof value !== "number") return;
|
|
114
|
+
animation.timeline.progress(value);
|
|
115
|
+
}, { immediate: true });
|
|
116
|
+
watch(toggle, (value) => {
|
|
117
|
+
if (typeof value !== "boolean") return;
|
|
118
|
+
animation.timeline[value ? "play" : "reverse"]();
|
|
119
|
+
});
|
|
120
|
+
return { controlled };
|
|
121
|
+
}
|
|
122
|
+
//#endregion
|
|
106
123
|
//#region src/composables/useAnimationNesting.ts
|
|
107
124
|
function useAnimationNesting(child, options) {
|
|
108
125
|
const parent = options?.parent === null ? null : options?.parent || inject(parentAnimationInjectionKey, null);
|
|
@@ -119,6 +136,33 @@ function useAnimationNesting(child, options) {
|
|
|
119
136
|
return { parent };
|
|
120
137
|
}
|
|
121
138
|
//#endregion
|
|
139
|
+
//#region src/composables/useAnimation.ts
|
|
140
|
+
function useAnimation(wrapper, props, emit, options) {
|
|
141
|
+
const animation = new Animation(options);
|
|
142
|
+
const ready = shallowRef(false);
|
|
143
|
+
const { controlled } = useAnimationControls(animation, {
|
|
144
|
+
progress: () => props.progress,
|
|
145
|
+
toggle: () => props.toggle
|
|
146
|
+
});
|
|
147
|
+
const { parent } = useAnimationNesting(animation, props);
|
|
148
|
+
ANIMATION_EVENTS.forEach((event) => animation.on(event, () => emit(event, animation.timeline)));
|
|
149
|
+
onMounted(() => {
|
|
150
|
+
if (wrapper.value) {
|
|
151
|
+
const target = props.group ? wrapper.value.children : wrapper.value;
|
|
152
|
+
const definition = "tweens" in props ? props.tweens || [] : props;
|
|
153
|
+
animation.compose(target, definition);
|
|
154
|
+
}
|
|
155
|
+
ready.value = true;
|
|
156
|
+
});
|
|
157
|
+
onUnmounted(() => animation.dispose());
|
|
158
|
+
return {
|
|
159
|
+
animation,
|
|
160
|
+
controlled,
|
|
161
|
+
parent,
|
|
162
|
+
ready
|
|
163
|
+
};
|
|
164
|
+
}
|
|
165
|
+
//#endregion
|
|
122
166
|
//#region src/components/Callback.vue
|
|
123
167
|
var Callback_default = /* @__PURE__ */ defineComponent({
|
|
124
168
|
__name: "Callback",
|
|
@@ -177,50 +221,6 @@ var PositionMarker_default = /* @__PURE__ */ defineComponent({
|
|
|
177
221
|
}
|
|
178
222
|
});
|
|
179
223
|
//#endregion
|
|
180
|
-
//#region src/composables/useAnimationControls.ts
|
|
181
|
-
function useAnimationControls(animation, controls) {
|
|
182
|
-
const progress = computed(() => toValue(controls.progress));
|
|
183
|
-
const toggle = computed(() => toValue(controls.toggle));
|
|
184
|
-
const controlled = computed(() => typeof progress.value === "number" || typeof toggle.value === "boolean");
|
|
185
|
-
if (controlled.value && toggle.value !== true) animation.timeline.pause();
|
|
186
|
-
watch(progress, (value) => {
|
|
187
|
-
if (typeof value !== "number") return;
|
|
188
|
-
animation.timeline.progress(value);
|
|
189
|
-
}, { immediate: true });
|
|
190
|
-
watch(toggle, (value) => {
|
|
191
|
-
if (typeof value !== "boolean") return;
|
|
192
|
-
animation.timeline[value ? "play" : "reverse"]();
|
|
193
|
-
});
|
|
194
|
-
return { controlled };
|
|
195
|
-
}
|
|
196
|
-
//#endregion
|
|
197
|
-
//#region src/composables/useAnimation.ts
|
|
198
|
-
function useAnimation(wrapper, props, emit, options) {
|
|
199
|
-
const animation = new Animation(options);
|
|
200
|
-
const ready = shallowRef(false);
|
|
201
|
-
const { controlled } = useAnimationControls(animation, {
|
|
202
|
-
progress: () => props.progress,
|
|
203
|
-
toggle: () => props.toggle
|
|
204
|
-
});
|
|
205
|
-
const { parent } = useAnimationNesting(animation, props);
|
|
206
|
-
ANIMATION_EVENTS.forEach((event) => animation.on(event, () => emit(event, animation.timeline)));
|
|
207
|
-
onMounted(() => {
|
|
208
|
-
if (wrapper.value) {
|
|
209
|
-
const target = props.group ? wrapper.value.children : wrapper.value;
|
|
210
|
-
const definition = "tweens" in props ? props.tweens || [] : props;
|
|
211
|
-
animation.compose(target, definition);
|
|
212
|
-
}
|
|
213
|
-
ready.value = true;
|
|
214
|
-
});
|
|
215
|
-
onUnmounted(() => animation.dispose());
|
|
216
|
-
return {
|
|
217
|
-
animation,
|
|
218
|
-
controlled,
|
|
219
|
-
parent,
|
|
220
|
-
ready
|
|
221
|
-
};
|
|
222
|
-
}
|
|
223
|
-
//#endregion
|
|
224
224
|
//#region src/components/Timeline.vue
|
|
225
225
|
var Timeline_default = /* @__PURE__ */ defineComponent({
|
|
226
226
|
__name: "Timeline",
|
|
@@ -247,11 +247,6 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
|
|
|
247
247
|
type: Boolean,
|
|
248
248
|
required: false
|
|
249
249
|
},
|
|
250
|
-
initiallyHidden: {
|
|
251
|
-
type: Boolean,
|
|
252
|
-
required: false,
|
|
253
|
-
default: true
|
|
254
|
-
},
|
|
255
250
|
tag: {
|
|
256
251
|
type: String,
|
|
257
252
|
required: false,
|
|
@@ -283,19 +278,18 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
|
|
|
283
278
|
}
|
|
284
279
|
});
|
|
285
280
|
watch(() => props.duration, (duration) => animation.timeline.data.totalDuration = Number(duration));
|
|
281
|
+
provide(parentAnimationInjectionKey, animation);
|
|
286
282
|
__expose({
|
|
287
283
|
animation,
|
|
288
284
|
controlled,
|
|
289
285
|
parent,
|
|
290
286
|
ready
|
|
291
287
|
});
|
|
292
|
-
provide(parentAnimationInjectionKey, animation);
|
|
293
288
|
return (_ctx, _cache) => {
|
|
294
289
|
return __props.tweens ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
|
|
295
290
|
key: 0,
|
|
296
291
|
ref_key: "wrapper",
|
|
297
|
-
ref: wrapper
|
|
298
|
-
style: normalizeStyle(__props.initiallyHidden && !unref(ready) ? { visibility: "hidden" } : void 0)
|
|
292
|
+
ref: wrapper
|
|
299
293
|
}, {
|
|
300
294
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
|
|
301
295
|
animation: unref(animation),
|
|
@@ -304,7 +298,7 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
|
|
|
304
298
|
ready: unref(ready)
|
|
305
299
|
})]),
|
|
306
300
|
_: 3
|
|
307
|
-
},
|
|
301
|
+
}, 512)) : renderSlot(_ctx.$slots, "default", {
|
|
308
302
|
key: 1,
|
|
309
303
|
animation: unref(animation),
|
|
310
304
|
controlled: unref(controlled),
|
|
@@ -341,11 +335,6 @@ var Tween_default = /* @__PURE__ */ defineComponent({
|
|
|
341
335
|
type: Boolean,
|
|
342
336
|
required: false
|
|
343
337
|
},
|
|
344
|
-
initiallyHidden: {
|
|
345
|
-
type: Boolean,
|
|
346
|
-
required: false,
|
|
347
|
-
default: true
|
|
348
|
-
},
|
|
349
338
|
tag: {
|
|
350
339
|
type: String,
|
|
351
340
|
required: false,
|
|
@@ -375,8 +364,7 @@ var Tween_default = /* @__PURE__ */ defineComponent({
|
|
|
375
364
|
return (_ctx, _cache) => {
|
|
376
365
|
return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
|
|
377
366
|
ref_key: "wrapper",
|
|
378
|
-
ref: wrapper
|
|
379
|
-
style: normalizeStyle(__props.initiallyHidden && !unref(ready) ? { visibility: "hidden" } : void 0)
|
|
367
|
+
ref: wrapper
|
|
380
368
|
}, {
|
|
381
369
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
|
|
382
370
|
animation: unref(animation),
|
|
@@ -385,9 +373,9 @@ var Tween_default = /* @__PURE__ */ defineComponent({
|
|
|
385
373
|
ready: unref(ready)
|
|
386
374
|
})]),
|
|
387
375
|
_: 3
|
|
388
|
-
},
|
|
376
|
+
}, 512);
|
|
389
377
|
};
|
|
390
378
|
}
|
|
391
379
|
});
|
|
392
380
|
//#endregion
|
|
393
|
-
export { ANIMATION_EVENTS, Callback_default as Callback, PositionMarker_default as PositionMarker, Timeline_default as Timeline, Tween_default as Tween, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
|
|
381
|
+
export { ANIMATION_EVENTS, Animation, Callback_default as Callback, PositionMarker_default as PositionMarker, Timeline_default as Timeline, Tween_default as Tween, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "deja-vue",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.2.0",
|
|
5
5
|
"description": "Declarative GSAP Animations for Vue 3",
|
|
6
6
|
"author": "Andrea 'Fiad' Fiadone <hello@fiad.one>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
},
|
|
26
26
|
"scripts": {
|
|
27
27
|
"build": "tsdown",
|
|
28
|
-
"dev": "tsdown --watch
|
|
28
|
+
"dev": "tsdown --watch",
|
|
29
29
|
"play": "vite",
|
|
30
30
|
"test": "vitest",
|
|
31
31
|
"typecheck": "vue-tsc --noEmit",
|
|
32
32
|
"release": "bumpp",
|
|
33
|
-
"prepublishOnly": "
|
|
33
|
+
"prepublishOnly": "npm run build",
|
|
34
34
|
"docs:dev": "vitepress dev docs",
|
|
35
35
|
"docs:build": "vitepress build docs",
|
|
36
36
|
"docs:preview": "vitepress preview docs"
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@semantic-release/changelog": "^6.0.3",
|
|
44
44
|
"@semantic-release/commit-analyzer": "^13.0.1",
|
|
45
45
|
"@semantic-release/git": "^10.0.1",
|
|
46
|
-
"@semantic-release/npm": "^
|
|
46
|
+
"@semantic-release/npm": "^13.1.5",
|
|
47
47
|
"@semantic-release/release-notes-generator": "^14.1.0",
|
|
48
48
|
"@tsdown/css": "^0.21.7",
|
|
49
49
|
"@types/node": "^25.5.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"bumpp": "^11.0.1",
|
|
53
53
|
"gsap": "^3.15.0",
|
|
54
54
|
"playwright": "^1.58.2",
|
|
55
|
-
"semantic-release": "^
|
|
55
|
+
"semantic-release": "^25.0.3",
|
|
56
56
|
"tsdown": "^0.21.7",
|
|
57
57
|
"typescript": "^6.0.2",
|
|
58
58
|
"unocss": "^66.6.8",
|