@foundit/micro-animations - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

CHANGELOG.md

 # @foundit/micro-animations
 
+## 0.1.5
+
+### Patch Changes
+
+- Added composit to options
+- Removed dependency on csstype
+- Added pseudoElement to options
+
 ## 0.1.4
@@ -4,0 +12,0 @@

dist/index.d.ts

@@ -1,3 +0,1 @@
-import { Property } from 'csstype';
-
 interface TargetElement extends Element {
@@ -7,2 +5,4 @@ currentAnimation?: Animation;
 interface MicroAnimationProps {
+    /** Optional -  takes 'replace', 'add' or 'accumulate'. See https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite for explanation. */
+    composite?: KeyframeAnimationOptions['composite'];
     /** Optional - Output values to console.log */
@@ -13,3 +13,3 @@ debug?: boolean;
     /** Optional - CSS easing. Default to 'linear' */
-    easing?: Property.TransitionTimingFunction;
+    easing?: KeyframeAnimationOptions['easing'];
     /** Mandatory - The element to animate. */
@@ -19,2 +19,4 @@ element: TargetElement;
     fill?: FillMode;
+    /** Optional - Accepts a string with your pseudo element. E.g '::after' */
+    pseudoElement?: KeyframeAnimationOptions['pseudoElement'];
     /** Mandatory - Keyframe object (or array of keyframe objects if it consit of multiple keyframe) with CSS properties to animate to. */
@@ -56,7 +58,4 @@ transformEnd: Keyframe | Keyframe[];
  */
-declare function microAnimation({ debug, duration, easing, element: element, fill, transformEnd, transformInit, }: MicroAnimationProps): Promise<unknown> | {
-    closeDialog: () => never;
-    openDialog: () => never;
-};
+declare function microAnimation({ composite, debug, duration, easing, element: element, fill, transformEnd, transformInit, pseudoElement, }: MicroAnimationProps): Promise<unknown>;
 
 export { MicroAnimationProps, TargetElement, microAnimation };

dist/index.js

@@ -27,2 +27,3 @@ "use strict";
 function microAnimation({
+  composite,
   debug = false,
@@ -34,12 +35,8 @@ duration = 300,
   transformEnd,
-  transformInit
+  transformInit,
+  pseudoElement
 }) {
   if (!element) {
-    const error = () => {
-      throw new Error("No element passed to microAnimation");
-    };
-    return {
-      closeDialog: error,
-      openDialog: error
-    };
+    const err = "No element passed to microAnimation";
+    throw new Error(err);
   }
@@ -76,5 +73,7 @@ const transformEndArr = Array.isArray(transformEnd) ? transformEnd : [transformEnd];
       {
+        composite,
         duration,
         easing,
-        fill
+        fill,
+        pseudoElement
       }
@@ -81,0 +80,0 @@ );

index.ts

@@ -1,3 +0,1 @@
-import { Property } from 'csstype'
-
 // =================================================================================================
@@ -12,2 +10,5 @@ // INTERFACE
 interface MicroAnimationProps {
+  /** Optional -  takes 'replace', 'add' or 'accumulate'. See https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite for explanation. */
+  composite?: KeyframeAnimationOptions['composite']
+
   /** Optional - Output values to console.log */
@@ -20,3 +21,3 @@ debug?: boolean
   /** Optional - CSS easing. Default to 'linear' */
-  easing?: Property.TransitionTimingFunction
+  easing?: KeyframeAnimationOptions['easing']
 
@@ -29,2 +30,5 @@ /** Mandatory - The element to animate. */
 
+  /** Optional - Accepts a string with your pseudo element. E.g '::after' */
+  pseudoElement?: KeyframeAnimationOptions['pseudoElement']
+
   /** Mandatory - Keyframe object (or array of keyframe objects if it consit of multiple keyframe) with CSS properties to animate to. */
@@ -73,2 +77,3 @@ transformEnd: Keyframe | Keyframe[]
 function microAnimation({
+  composite,
   debug = false,
@@ -81,11 +86,7 @@ duration = 300,
   transformInit,
+  pseudoElement,
 }: MicroAnimationProps) {
   if (!element) {
-    const error = () => {
-      throw new Error('No element passed to microAnimation')
-    }
-    return {
-      closeDialog: error,
-      openDialog: error,
-    }
+    const err = 'No element passed to microAnimation'
+    throw new Error(err)
   }
@@ -130,5 +131,7 @@ const transformEndArr = Array.isArray(transformEnd)
       {
+        composite: composite,
         duration: duration,
-        easing: easing as string | undefined,
+        easing: easing,
         fill: fill,
+        pseudoElement: pseudoElement,
       }
@@ -135,0 +138,0 @@ )

package.json

 {
   "name": "@foundit/micro-animations",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "",
@@ -30,5 +30,2 @@ "main": "dist/index.js",
   },
-  "dependencies": {
-    "csstype": "^3.1.2"
-  },
   "publishConfig": {
@@ -35,0 +32,0 @@ "access": "public"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36977

increased by2.53%

Dependency count

0

decreased by-100%

Dependency changes

• - Removedcsstype@^3.1.2

• - Removedcsstype@3.1.3(transitive)