@dreamonkey/quasar-app-extension-animate - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/composables/animate.js

 import { getCurrentInstance, onMounted } from "vue";
-import { animationFns, hideAnimatableElements, insersectionFns, } from "../internals";
+import { hideAnimatableElements } from "../shared";
 export function useAnimate() {
@@ -8,8 +8,4 @@ const vm = getCurrentInstance()?.proxy;
     });
-    return {
-        ...animationFns,
-        ...insersectionFns,
-    };
 }
 export default useAnimate;
 //# sourceMappingURL=animate.js.map

dist/exports.js

 export { default as AnimateMixin } from "./mixins/animate";
 export { default as useAnimate } from "./composables/animate";
+export * from "./shared";
 //# sourceMappingURL=exports.js.map

dist/mixins/animate.js

@@ -1,2 +0,2 @@
-import { animationFns, hideAnimatableElements, insersectionFns, } from "../internals";
+import { hideAnimatableElements } from "../shared";
 export default {
@@ -6,7 +6,3 @@ mounted() {
     },
-    methods: {
-        ...animationFns,
-        ...insersectionFns,
-    },
 };
 //# sourceMappingURL=animate.js.map

dist/types/composables/animate.d.ts

@@ -1,42 +0,2 @@
-export declare function useAnimate(): {
-    whenPastPercentage: (percentage: number, intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    whenPastEnd: (intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    whenPastHalf: (intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    whenPastQuarter: (intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    whenPastStart: (intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    whenPast: (percentageOrKeyword: number | "end" | "start" | "quarter" | "half", intersectionHandler: (el: HTMLElement) => void) => {
-        handler: (entry: IntersectionObserverEntry) => void;
-        cfg: {
-            threshold: number;
-        };
-    };
-    animate: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-    animateIn: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-    animateOut: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-};
+export declare function useAnimate(): void;
 export default useAnimate;

dist/types/exports.d.ts

 export { default as AnimateMixin } from "./mixins/animate";
 export { default as useAnimate } from "./composables/animate";
+export * from "./shared";

dist/types/mixins/animate.d.ts

 import { ComponentPublicInstance } from "vue";
 declare const _default: {
     mounted(this: ComponentPublicInstance): void;
-    methods: {
-        whenPastPercentage: (percentage: number, intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        whenPastEnd: (intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        whenPastHalf: (intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        whenPastQuarter: (intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        whenPastStart: (intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        whenPast: (percentageOrKeyword: number | "end" | "start" | "quarter" | "half", intersectionHandler: (el: HTMLElement) => void) => {
-            handler: (entry: IntersectionObserverEntry) => void;
-            cfg: {
-                threshold: number;
-            };
-        };
-        animate: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-        animateIn: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-        animateOut: (animationClass: string, options?: import("../internals").AnimateOptions) => (el: HTMLElement) => void;
-    };
 };
 export default _default;

package.json

 {
   "name": "@dreamonkey/quasar-app-extension-animate",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Extend Quasar animation system",
@@ -37,2 +37,6 @@ "keywords": [
   },
+  "peerDependencies": {
+    "quasar": "^2.0.0",
+    "vue": "^3.2.0"
+  },
   "publishConfig": {
@@ -39,0 +43,0 @@ "access": "public"

README.md

@@ -27,3 +27,7 @@ # Quasar animation system extension
 ```ts
-import { AnimateMixin } from "@dreamonkey/quasar-app-extension-animate";
+import {
+  AnimateMixin,
+  animateIn,
+  whenPastEnd,
+} from "@dreamonkey/quasar-app-extension-animate";
 
@@ -33,2 +37,6 @@ export default {
   mixins: [AnimateMixin],
+  methods: {
+    animateIn,
+    whenPastEnd,
+  },
 };
@@ -40,4 +48,8 @@ ```
 ```ts
-import { useAnimate } from "@dreamonkey/quasar-app-extension-animate";
-import { defineComponent, ref, Ref } from "@vue/composition-api";
+import {
+  useAnimate,
+  animateIn,
+  whenPastEnd,
+} from "@dreamonkey/quasar-app-extension-animate";
+import { defineComponent } from "vue";
 
@@ -47,3 +59,3 @@ export default defineComponent({
   setup() {
-    const { whenPastEnd, animateIn } = useAnimate();
+    useAnimate();
 
@@ -87,4 +99,4 @@ return { whenPastEnd, animateIn };
   v-intersection.once="
-        whenPastEnd(animateIn('fadeInDown', { duration: '800ms' }))
-    "
+    whenPastEnd(animateIn('fadeInDown', { duration: '800ms' }))
+  "
   data-animate
@@ -141,2 +153,4 @@ class="my-dog"
 ```js
+import { animateIn } from "@dreamonkey/quasar-app-extension-animate";
+
 export default {
@@ -150,10 +164,10 @@ // ...
       let i = 0;
-      this.animateIn("fadeInLeft", {
+      animateIn("fadeInLeft", {
         duration: `${TITLE_AND_SEPARATOR_ANIMATION_DURATION}ms`,
       })(title);
-      this.animateIn("scale-normal", {
+      animateIn("scale-normal", {
         duration: `${TITLE_AND_SEPARATOR_ANIMATION_DURATION}ms`,
       })(separator);
       elements.forEach((element) => {
-        this.animateIn("fadeInLeft", {
+        animateIn("fadeInLeft", {
           duration: `${PARAGRAPHS_ANIMATION_DURATION}ms`,
@@ -245,2 +259,2 @@ delay: DELAY_BEFORE_START + DELAY_BETWEEN_PARAGRAPHS_ANIMATION * i,
 
-If you appreciate the work that went into this App Extension, please consider [donating to Quasar](https://donate.quasar.dev).
+If you appreciate the work that went into this App Extension, please consider [donating](https://github.com/sponsors/dreamonkey).

src/composables/animate.ts

 import { getCurrentInstance, onMounted } from "vue";
-import {
-  animationFns,
-  hideAnimatableElements,
-  insersectionFns,
-} from "../internals";
+import { hideAnimatableElements } from "../shared";
 
@@ -14,9 +10,4 @@ export function useAnimate() {
   });
-
-  return {
-    ...animationFns,
-    ...insersectionFns,
-  };
 }
 
 export default useAnimate;

src/exports.ts

 export { default as AnimateMixin } from "./mixins/animate";
 export { default as useAnimate } from "./composables/animate";
+
+export * from "./shared";

src/mixins/animate.ts

 import { ComponentPublicInstance } from "vue";
-import {
-  animationFns,
-  hideAnimatableElements,
-  insersectionFns,
-} from "../internals";
+import { hideAnimatableElements } from "../shared";
 
@@ -12,6 +8,2 @@ export default {
   },
-  methods: {
-    ...animationFns,
-    ...insersectionFns,
-  },
 };

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

253

increased by5.86%

Worsened metrics

Total package byte prevSize

28144

decreased by-13.8%

Dependency count

2

increased byInfinity%

Lines of code

291

decreased by-30.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes