@pixodesk/svg-animator-vue 1.0.34 → 1.0.39

package/dist/index.d.cts

@@ -1,25 +1,12 @@
 import * as vue from 'vue';
 import { PropType, VNode } from 'vue';
-import { PxAnimatedSvgDocument, FillMode, StartOn, OutAction } from '@pixodesk/svg-animator-web';
+import { PxAnimatedSvgDocument, PxTimelinePatch, PxDiagnostic, PxDiagnosticKind, PxAnimatorHandle, PxStartOn, PxOutAction } from '@pixodesk/svg-animator-web';
 
-interface VueAnimatorApi {
-    /** Returns true if the animation is currently running. */
-    isPlaying(): boolean;
-    /** Starts or resumes the animation. */
-    play(): void;
-    /** Pauses the animation at its current state. */
-    pause(): void;
-    /** Stops the animation and resets it to its initial state. */
-    cancel(): void;
-    /** Jumps to the end of the animation and holds the final state. */
-    finish(): void;
-    /** Changes the speed of the animation. 1 is normal, 2 is double, -1 is reverse. */
-    setPlaybackRate(rate: number): void;
-    /** Returns the current playback time in milliseconds. */
-    getCurrentTime(): number | null;
-    /** Jumps to a specific time (in milliseconds) in the animation. */
-    setCurrentTime(time: number): void;
-}
+/**
+ * The imperative handle the template ref exposes — core's `PxAnimatorHandle` under this
+ * package's name (review §9). One definition for React, Vue and React Native.
+ */
+type VueAnimatorApi = PxAnimatorHandle;
 /**
  * Vue component for rendering and controlling Pixodesk SVG animations.
  *
@@ -52,36 +39,25 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
-    };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
+    timeline: {
+        type: PropType<PxTimelinePatch | string>;
     };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetTimeline: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -100,43 +76,42 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     time: {
         type: NumberConstructor;
     };
+    onWarn: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    onError: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    silent: {
+        type: PropType<boolean | ReadonlyArray<PxDiagnosticKind>>;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("play" | "pause" | "stop" | "cancel" | "finish" | "remove")[], "play" | "pause" | "stop" | "cancel" | "finish" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("finish" | "play" | "pause" | "cancel" | "stop" | "remove")[], "finish" | "play" | "pause" | "cancel" | "stop" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     doc: {
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
+    timeline: {
+        type: PropType<PxTimelinePatch | string>;
     };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
-    };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetTimeline: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -155,17 +130,29 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     time: {
         type: NumberConstructor;
     };
+    onWarn: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    onError: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    silent: {
+        type: PropType<boolean | ReadonlyArray<PxDiagnosticKind>>;
+        default: undefined;
+    };
 }>> & Readonly<{
+    onFinish?: ((...args: any[]) => any) | undefined;
     onPlay?: ((...args: any[]) => any) | undefined;
     onPause?: ((...args: any[]) => any) | undefined;
-    onStop?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
-    onFinish?: ((...args: any[]) => any) | undefined;
+    onStop?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
-    autoplay: boolean;
     play: boolean;
     pause: boolean;
+    autoplay: boolean;
+    resetTimeline: boolean;
+    silent: boolean | readonly PxDiagnosticKind[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -197,34 +184,53 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
  *   - `'mouseOver'`      — plays on hover
  *   - `'click'`          — plays on click, toggles on second click
  *   - `'scrollIntoView'` — plays when the element enters the viewport
+ *   - `'programmatic'`   — **not supported here.** This wrapper exposes no `play()`, so there is
+ *                          nothing to wait for and the animation never starts. The prop keeps the
+ *                          shared `PxStartOn` type (one enum per wire key), so the value type-checks
+ *                          — it simply has no effect. Use `PixodeskSvgAnimator` (the JSON player)
+ *                          when you need to start an animation from code.
  * @prop outAction - What happens when the trigger ends (hover/scroll out, second click):
  *   - `'continue'` — keeps playing (default)
  *   - `'pause'`    — pauses at the current frame
  *   - `'reset'`    — resets to the beginning
+ *   - `'reverse'`  — **acts as `'continue'` here.** A CSS class toggle cannot run keyframes
+ *                    backwards. Accepted so the prop keeps the shared `PxOutAction` type.
+ * @prop scrollIntoViewThreshold - For `'scrollIntoView'`: how much of the element must be
+ *   visible (0–1) before it starts, and below which the out action applies. Defaults to the
+ *   wire default (`0`, any pixel) — the same as the JSON player, not a private `0.1`.
  */
 declare const PixodeskSvgCssAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     startOn: {
-        type: PropType<StartOn>;
+        type: PropType<PxStartOn>;
         default: string;
     };
     outAction: {
-        type: PropType<OutAction>;
+        type: PropType<PxOutAction>;
         default: string;
     };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+        default: 0;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     startOn: {
-        type: PropType<StartOn>;
+        type: PropType<PxStartOn>;
         default: string;
     };
     outAction: {
-        type: PropType<OutAction>;
+        type: PropType<PxOutAction>;
         default: string;
     };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+        default: 0;
+    };
 }>> & Readonly<{}>, {
-    startOn: StartOn;
-    outAction: OutAction;
+    startOn: PxStartOn;
+    outAction: PxOutAction;
+    scrollIntoViewThreshold: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { PixodeskSvgAnimator, PixodeskSvgCssAnimator, type VueAnimatorApi };

package/dist/index.d.ts

@@ -1,25 +1,12 @@
 import * as vue from 'vue';
 import { PropType, VNode } from 'vue';
-import { PxAnimatedSvgDocument, FillMode, StartOn, OutAction } from '@pixodesk/svg-animator-web';
+import { PxAnimatedSvgDocument, PxTimelinePatch, PxDiagnostic, PxDiagnosticKind, PxAnimatorHandle, PxStartOn, PxOutAction } from '@pixodesk/svg-animator-web';
 
-interface VueAnimatorApi {
-    /** Returns true if the animation is currently running. */
-    isPlaying(): boolean;
-    /** Starts or resumes the animation. */
-    play(): void;
-    /** Pauses the animation at its current state. */
-    pause(): void;
-    /** Stops the animation and resets it to its initial state. */
-    cancel(): void;
-    /** Jumps to the end of the animation and holds the final state. */
-    finish(): void;
-    /** Changes the speed of the animation. 1 is normal, 2 is double, -1 is reverse. */
-    setPlaybackRate(rate: number): void;
-    /** Returns the current playback time in milliseconds. */
-    getCurrentTime(): number | null;
-    /** Jumps to a specific time (in milliseconds) in the animation. */
-    setCurrentTime(time: number): void;
-}
+/**
+ * The imperative handle the template ref exposes — core's `PxAnimatorHandle` under this
+ * package's name (review §9). One definition for React, Vue and React Native.
+ */
+type VueAnimatorApi = PxAnimatorHandle;
 /**
  * Vue component for rendering and controlling Pixodesk SVG animations.
  *
@@ -52,36 +39,25 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
-    };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
+    timeline: {
+        type: PropType<PxTimelinePatch | string>;
     };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetTimeline: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -100,43 +76,42 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     time: {
         type: NumberConstructor;
     };
+    onWarn: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    onError: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    silent: {
+        type: PropType<boolean | ReadonlyArray<PxDiagnosticKind>>;
+        default: undefined;
+    };
 }>, () => VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("play" | "pause" | "stop" | "cancel" | "finish" | "remove")[], "play" | "pause" | "stop" | "cancel" | "finish" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("finish" | "play" | "pause" | "cancel" | "stop" | "remove")[], "finish" | "play" | "pause" | "cancel" | "stop" | "remove", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     doc: {
         type: PropType<PxAnimatedSvgDocument>;
         required: true;
     };
-    mode: {
-        type: PropType<"waapi" | "frames" | "auto">;
+    timeline: {
+        type: PropType<PxTimelinePatch | string>;
     };
-    delay: {
-        type: NumberConstructor;
-    };
-    fill: {
-        type: PropType<FillMode>;
-    };
-    iterations: {
-        type: PropType<number | "infinite">;
+    resetTimeline: {
+        type: BooleanConstructor;
+        default: undefined;
     };
     duration: {
         type: NumberConstructor;
     };
-    direction: {
-        type: PropType<PlaybackDirection>;
-    };
-    frameRate: {
+    delay: {
         type: NumberConstructor;
     };
+    iterations: {
+        type: PropType<number | "infinite">;
+    };
     startOn: {
         type: PropType<"load" | "mouseOver" | "click" | "scrollIntoView" | "programmatic">;
     };
-    outAction: {
-        type: PropType<"continue" | "pause" | "reset" | "reverse">;
-    };
-    scrollIntoViewThreshold: {
-        type: NumberConstructor;
-    };
     autoplay: {
         type: BooleanConstructor;
         default: undefined;
@@ -155,17 +130,29 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     time: {
         type: NumberConstructor;
     };
+    onWarn: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    onError: {
+        type: PropType<(diagnostic: PxDiagnostic) => void>;
+    };
+    silent: {
+        type: PropType<boolean | ReadonlyArray<PxDiagnosticKind>>;
+        default: undefined;
+    };
 }>> & Readonly<{
+    onFinish?: ((...args: any[]) => any) | undefined;
     onPlay?: ((...args: any[]) => any) | undefined;
     onPause?: ((...args: any[]) => any) | undefined;
-    onStop?: ((...args: any[]) => any) | undefined;
     onCancel?: ((...args: any[]) => any) | undefined;
-    onFinish?: ((...args: any[]) => any) | undefined;
+    onStop?: ((...args: any[]) => any) | undefined;
     onRemove?: ((...args: any[]) => any) | undefined;
 }>, {
-    autoplay: boolean;
     play: boolean;
     pause: boolean;
+    autoplay: boolean;
+    resetTimeline: boolean;
+    silent: boolean | readonly PxDiagnosticKind[];
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -197,34 +184,53 @@ declare const PixodeskSvgAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
  *   - `'mouseOver'`      — plays on hover
  *   - `'click'`          — plays on click, toggles on second click
  *   - `'scrollIntoView'` — plays when the element enters the viewport
+ *   - `'programmatic'`   — **not supported here.** This wrapper exposes no `play()`, so there is
+ *                          nothing to wait for and the animation never starts. The prop keeps the
+ *                          shared `PxStartOn` type (one enum per wire key), so the value type-checks
+ *                          — it simply has no effect. Use `PixodeskSvgAnimator` (the JSON player)
+ *                          when you need to start an animation from code.
  * @prop outAction - What happens when the trigger ends (hover/scroll out, second click):
  *   - `'continue'` — keeps playing (default)
  *   - `'pause'`    — pauses at the current frame
  *   - `'reset'`    — resets to the beginning
+ *   - `'reverse'`  — **acts as `'continue'` here.** A CSS class toggle cannot run keyframes
+ *                    backwards. Accepted so the prop keeps the shared `PxOutAction` type.
+ * @prop scrollIntoViewThreshold - For `'scrollIntoView'`: how much of the element must be
+ *   visible (0–1) before it starts, and below which the out action applies. Defaults to the
+ *   wire default (`0`, any pixel) — the same as the JSON player, not a private `0.1`.
  */
 declare const PixodeskSvgCssAnimator: vue.DefineComponent<vue.ExtractPropTypes<{
     startOn: {
-        type: PropType<StartOn>;
+        type: PropType<PxStartOn>;
         default: string;
     };
     outAction: {
-        type: PropType<OutAction>;
+        type: PropType<PxOutAction>;
         default: string;
     };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+        default: 0;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     startOn: {
-        type: PropType<StartOn>;
+        type: PropType<PxStartOn>;
         default: string;
     };
     outAction: {
-        type: PropType<OutAction>;
+        type: PropType<PxOutAction>;
         default: string;
     };
+    scrollIntoViewThreshold: {
+        type: NumberConstructor;
+        default: 0;
+    };
 }>> & Readonly<{}>, {
-    startOn: StartOn;
-    outAction: OutAction;
+    startOn: PxStartOn;
+    outAction: PxOutAction;
+    scrollIntoViewThreshold: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
 export { PixodeskSvgAnimator, PixodeskSvgCssAnimator, type VueAnimatorApi };