feat(hideOnOutsideClick): update component and action to support hideOnOutsideClick

Author: dysfunc

src/action-tooltip.svelte

@@ -1,8 +1,14 @@
 <script>
   // @ts-check
-
   import { onMount, onDestroy } from 'svelte';
-  import { computeTooltipPosition, formatVariableKey, getMinWidth, isElementInViewport } from './helpers';
+
+  import {
+    computeTooltipPosition,
+    formatVariableKey,
+    getMinWidth,
+    isElementInViewport
+  } from './helpers';
+
   import { inverse } from './constants';
 
   /** @type {HTMLElement | null} */
@@ -59,7 +65,7 @@
   /** @type {boolean} */
   let visible = false;
 
-  /** @type {{ bottom: number, top: number, right: number, left: number }} */
+  /** @type {any} */
   let coords = {
     bottom: 0,
     top: 0,
@@ -73,7 +79,11 @@
     if (tooltipRef !== null) {
       if (isComponent && !component) {
         // @ts-ignore
-        component = new content.component({ target: tooltipRef, props: { action, ...content.props } });
+        component = new content.component({
+          target: tooltipRef,
+          // @ts-ignore
+          props: { action, ...content.props }
+        });
       }
 
       minWidth = getMinWidth(tooltipRef, maxWidth);
@@ -88,13 +98,21 @@
       }
     }
 
-    // @ts-ignore
-    if (autoPosition && !isElementInViewport(tooltipRef, targetElement, position)) {
+    if (
+      autoPosition &&
+      // @ts-ignore
+      !isElementInViewport(tooltipRef, targetElement, position)
+    ) {
       // @ts-ignore
       position = inverse[position];
     }
 
-    coords = computeTooltipPosition(targetElement, tooltipRef, position, coords);
+    coords = computeTooltipPosition(
+      targetElement,
+      tooltipRef,
+      position,
+      coords
+    );
 
     if (animation) {
       animationEffect = animation;
@@ -112,12 +130,19 @@
 
   const onHandleResize = () => {
     if (visible) {
-      coords = computeTooltipPosition(targetElement, tooltipRef, position, coords);
+      coords = computeTooltipPosition(
+        targetElement,
+        tooltipRef,
+        position,
+        coords
+      );
     }
   };
 
   $: isComponent = typeof content === 'object';
-  $: tooltipRef && show ? setTimeout(() => (visible = true), animationDelay) : (visible = false);
+  $: tooltipRef && show
+    ? setTimeout(() => (visible = true), animationDelay)
+    : (visible = false);
 </script>
 
 {#if content}
@@ -146,8 +171,8 @@
     --tooltip-background-color: rgba(0, 0, 0, 0.9);
     --tooltip-border-radius: 4px;
     --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
-    --tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
-      'Helvetica Neue', sans-serif;
+    --tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+      Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
     --tooltip-font-size: 14px;
     --tooltip-font-weight: 500;
     --tooltip-line-height: 1.25rem;
@@ -219,7 +244,10 @@
   .tooltip.bottom {
     bottom: 0;
     left: 50%;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y)));
+    transform: translate(
+      calc(-50% + var(--tooltip-offset-x)),
+      calc(100% + var(--tooltip-offset-y))
+    );
   }
 
   .tooltip.bottom:after {
@@ -232,11 +260,15 @@
   .tooltip.top {
     left: 50%;
     top: 0;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y)));
+    transform: translate(
+      calc(-50% + var(--tooltip-offset-x)),
+      calc(-100% - var(--tooltip-offset-y))
+    );
   }
 
   .tooltip.top:after {
-    border-color: var(--tooltip-background-color) transparent transparent transparent;
+    border-color: var(--tooltip-background-color) transparent transparent
+      transparent;
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 99%);
@@ -245,11 +277,15 @@
   .tooltip.left {
     left: 0;
     top: 50%;
-    transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)));
+    transform: translate(
+      calc(-100% - var(--tooltip-offset-x)),
+      calc(-50% - var(--tooltip-offset-y))
+    );
   }
 
   .tooltip.left:after {
-    border-color: transparent transparent transparent var(--tooltip-background-color);
+    border-color: transparent transparent transparent
+      var(--tooltip-background-color);
     right: 0;
     top: 50%;
     transform: translate(99%, -50%);
@@ -258,11 +294,15 @@
   .tooltip.right {
     right: 0;
     top: 50%;
-    transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y)));
+    transform: translate(
+      calc(100% + var(--tooltip-offset-x)),
+      calc(-50% - var(--tooltip-offset-y))
+    );
   }
 
   .tooltip.right:after {
-    border-color: transparent var(--tooltip-background-color) transparent transparent;
+    border-color: transparent var(--tooltip-background-color) transparent
+      transparent;
     left: 0;
     top: 50%;
     transform: translate(-99%, -50%);
@@ -342,7 +382,11 @@
   .tooltip.left.animation-puff {
     filter: blur(2px);
     opacity: 0;
-    transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);
+    transform: translate(
+        calc(-100% - var(--tooltip-offset-x)),
+        calc(-50% - var(--tooltip-offset-y))
+      )
+      scale(2, 2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -353,13 +397,21 @@
   .tooltip.left.animation-puff.show {
     filter: blur(0);
     opacity: 1;
-    transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-100% - var(--tooltip-offset-x)),
+        calc(-50% - var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.right.animation-puff {
     filter: blur(2px);
     opacity: 0;
-    transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(2, 2);
+    transform: translate(
+        calc(100% + var(--tooltip-offset-x)),
+        calc(-50% - var(--tooltip-offset-y))
+      )
+      scale(2, 2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -370,13 +422,21 @@
   .tooltip.right.animation-puff.show {
     filter: blur(0);
     opacity: 1;
-    transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% - var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(100% + var(--tooltip-offset-x)),
+        calc(-50% - var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.top.animation-puff {
     filter: blur(2px);
     opacity: 0;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(2, 2);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(-100% - var(--tooltip-offset-y))
+      )
+      scale(2, 2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -387,13 +447,21 @@
   .tooltip.top.animation-puff.show {
     filter: blur(0);
     opacity: 1;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(-100% - var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.bottom.animation-puff {
     filter: blur(2px);
     opacity: 0;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(2, 2);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(100% + var(--tooltip-offset-y))
+      )
+      scale(2, 2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -404,14 +472,22 @@
   .tooltip.bottom.animation-puff.show {
     filter: blur(0);
     opacity: 1;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(100% + var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   /* Bounce */
 
   .tooltip.left.animation-bounce {
     opacity: 0;
-    transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
+    transform: translate(
+        calc(-100% - var(--tooltip-offset-x)),
+        calc(-50% + var(--tooltip-offset-y))
+      )
+      scale(1.2, 1.2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -420,12 +496,20 @@
 
   .tooltip.left.animation-bounce.show {
     opacity: 1;
-    transform: translate(calc(-100% - var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-100% - var(--tooltip-offset-x)),
+        calc(-50% + var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.right.animation-bounce {
     opacity: 0;
-    transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1.2, 1.2);
+    transform: translate(
+        calc(100% + var(--tooltip-offset-x)),
+        calc(-50% + var(--tooltip-offset-y))
+      )
+      scale(1.2, 1.2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -434,12 +518,20 @@
 
   .tooltip.right.animation-bounce.show {
     opacity: 1;
-    transform: translate(calc(100% + var(--tooltip-offset-x)), calc(-50% + var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(100% + var(--tooltip-offset-x)),
+        calc(-50% + var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.top.animation-bounce {
     opacity: 0;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(-100% - var(--tooltip-offset-y))
+      )
+      scale(1.2, 1.2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -448,12 +540,20 @@
 
   .tooltip.top.animation-bounce.show {
     opacity: 1;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(-100% - var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(-100% - var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 
   .tooltip.bottom.animation-bounce {
     opacity: 0;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(100% + var(--tooltip-offset-y))
+      )
+      scale(1.2, 1.2);
     transform-origin: 50% 50%;
     transition:
       opacity 0.25s ease-in-out,
@@ -462,6 +562,10 @@
 
   .tooltip.bottom.animation-bounce.show {
     opacity: 1;
-    transform: translate(calc(-50% + var(--tooltip-offset-x)), calc(100% + var(--tooltip-offset-y))) scale(1, 1);
+    transform: translate(
+        calc(-50% + var(--tooltip-offset-x)),
+        calc(100% + var(--tooltip-offset-y))
+      )
+      scale(1, 1);
   }
 </style>

src/action.js

@@ -1,4 +1,5 @@
 import Tooltip from './action-tooltip.svelte';
+import { onClickOutside } from './helpers';
 
 export const tooltip = (element, props) => {
   let component = null;
@@ -49,14 +50,18 @@ export const tooltip = (element, props) => {
 
       if (action === 'click') {
         element.addEventListener('click', onClick);
+
+        if (config.hideOnClickOutside) {
+          onClickOutside(element, onHide);
+        }
       }
 
       if (action === 'hover') {
         element.addEventListener('mouseenter', onShow);
         element.addEventListener('mouseleave', onHide);
       }
     }
-  }
+  };
 
   const removeListeners = () => {
     if (element !== null) {
@@ -77,4 +82,4 @@ export const tooltip = (element, props) => {
       }
     }
   };
-}
+};