@svelte-plugins/tooltips - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

package.json

 {
   "name": "@svelte-plugins/tooltips",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "license": "MIT",
@@ -8,2 +8,3 @@ "description": "A simple tooltip action and component designed for Svelte.",
   "svelte": "./src/index.js",
+  "types": "./src/index.d.ts",
   "main": "./lib/index.js",
@@ -67,4 +68,6 @@ "module": "./lib/index.mjs",
     "svelte": "^3.49.0",
-    "svelte-loader": "^3.0.0"
+    "svelte-check": "^3.5.1",
+    "svelte-loader": "^3.0.0",
+    "typescript": "^5.2.2"
   }
 }

README.md

@@ -45,2 +45,3 @@ # @svelte-plugins/tooltips
 | :----------- | :------------------------------------------------------------------ | :---------------------------------------------- |
+| action       | The action that triggers the tooltip (hover | click)                | `string` (default: `hover`)                     |
 | animation    | The animation to apply to the tooltip                               | `string` (default: ``)                          |
@@ -79,2 +80,3 @@ | arrow        | If `false`, the tooltip arrow will not be shown.                    | `boolean` (default: `true`)                     |
 ```css
+--tooltip-arrow-size: 10px;
 --tooltip-background-color: rgba(0, 0, 0, 0.9);
@@ -92,4 +94,5 @@ --tooltip-border-radius: 4px;
 --tooltip-padding: 12px;
+--tooltip-white-space-hidden: nowrap;
+--tooltip-white-space-shown: normal;
 --tooltip-z-index: 100;
---tooltip-arrow-size: 10px;
 ```
@@ -96,0 +99,0 @@

src/action.js

@@ -5,44 +5,73 @@ import Tooltip from './action-tooltip.svelte';
 
-	let component = null;
-	let title = element.getAttribute('title');
+  let component = null;
+  let title = element.getAttribute('title');
+  let action = props?.action || element.getAttribute('action') || 'hover';
 
-	if (title) {
-		element.removeAttribute('title');
+  if (title) {
+    element.removeAttribute('title');
 
-		props = {
-			content: title,
-			...props
-		}
-	}
+    props = {
+      content: title,
+      ...props
+    }
+  }
 
-	const onMouseEnter = () => {
-		if (!component) {
-			component = new Tooltip({
-				target: element,
-				props
-			});
-		}
-	};
+  const onClick = () => {
+    if (component) {
+      onMouseLeave();
+    } else {
+      onMouseEnter();
+    }
+  };
 
-	const onMouseLeave = () => {
-		if (component) {
-			component.$destroy();
-			component = null;
-		}
-	};
+  const onMouseEnter = () => {
+    if (!component) {
+      component = new Tooltip({
+        target: element,
+        props
+      });
+    }
+  };
 
-	element.addEventListener('mouseenter', onMouseEnter);
-	element.addEventListener('mouseleave', onMouseLeave);
-	element.style.position = 'relative';
+  const onMouseLeave = () => {
+    if (component) {
+      component.$destroy();
+      component = null;
+    }
+  };
 
-	return {
-		destroy() {
-			element.removeEventListener('mouseenter', onMouseEnter);
-			element.removeEventListener('mouseleave', onMouseLeave);
+  const addListeners = () => {
+    if (element !== null) {
+      removeListeners();
 
-			if (title) {
-				element.setAttribute('title', title);
-			}
-		}
-	};
+      if (action === 'click') {
+        element.addEventListener('click', onClick);
+      } else {
+        element.addEventListener('mouseenter', onMouseEnter);
+        element.addEventListener('mouseleave', onMouseLeave);
+      }
+    }
+  }
+
+  const removeListeners = () => {
+    if (element !== null) {
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('mouseenter', onMouseEnter);
+      element.removeEventListener('mouseleave', onMouseLeave);
+    }
+  };
+
+  addListeners();
+
+  element.style.position = 'relative';
+
+  return {
+    destroy() {
+      removeListeners();
+
+      if (title) {
+        element.setAttribute('title', title);
+      }
+    }
+  };
 }

src/tooltip.snap.js

@@ -18,4 +18,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP
     </span>
+    
   </div>
 </body>
 `;

Fixed 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

Total package byte prevSize

177653

12.33%

Number of package files

17

13.33%

Lines of code

1177

102.58%

Number of lines in readme file

130

2.36%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

30

7.14%

No dependency changes