@operato/utils - npm Package Compare versions

Comparing version 7.0.0-rc.0 to 7.0.0-rc.7

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+## [7.0.0-rc.7](https://github.com/hatiolab/operato/compare/v7.0.0-rc.6...v7.0.0-rc.7) (2024-06-28)
+
+
+### :bug: Bug Fix
+
+* tooltip 이 부모의 transform을 반영하지 못하는 문제 ([992d295](https://github.com/hatiolab/operato/commit/992d2950a5407a94254b910b4b2d0d6b83d5df59))
+
+
+
 ## [7.0.0-rc.0](https://github.com/hatiolab/operato/compare/v2.0.0-beta.35...v7.0.0-rc.0) (2024-06-21)
@@ -8,0 +17,0 @@

dist/src/reactive-controllers/tooltip-reactive-controller.d.ts

 import { ReactiveController, ReactiveControllerHost } from 'lit';
-/**
- * TooltipReactiveController is a controller that manages the display of tooltips
- * for elements with a specified attribute. It works in conjunction with TooltipStyles
- * to position and style the tooltips.
- */
 export declare class TooltipReactiveController implements ReactiveController {
@@ -11,8 +6,3 @@ private host;
     private content?;
-    /**
-     * @param host - The host element that this controller is associated with.
-     * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip.
-     *                  - content: The tooltip content, either a string or a function that returns a string based on the element.
-     *                  - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'.
-     */
+    private static tooltipContainer;
     constructor(host: ReactiveControllerHost & HTMLElement, options?: {
@@ -22,21 +12,6 @@ content?: string | ((element: HTMLElement) => string);
     });
-    /**
-     * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events.
-     */
     hostConnected(): void;
-    /**
-     * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events.
-     */
     hostDisconnected(): void;
-    /**
-     * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow.
-     * If both conditions are met, sets the tooltip content and calculates its position.
-     * @param e - The mouseover event.
-     */
     private handleMouseOver;
-    /**
-     * Handles the mouseout event. Removes the tooltip content and position properties from the target element.
-     * @param e - The mouseout event.
-     */
     private handleMouseOut;
 }

dist/src/reactive-controllers/tooltip-reactive-controller.js

 import { hasOverflow } from '../has-overflow';
-/**
- * TooltipReactiveController is a controller that manages the display of tooltips
- * for elements with a specified attribute. It works in conjunction with TooltipStyles
- * to position and style the tooltips.
- */
 export class TooltipReactiveController {
-    /**
-     * @param host - The host element that this controller is associated with.
-     * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip.
-     *                  - content: The tooltip content, either a string or a function that returns a string based on the element.
-     *                  - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'.
-     */
     constructor(host, options) {
-        /**
-         * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow.
-         * If both conditions are met, sets the tooltip content and calculates its position.
-         * @param e - The mouseover event.
-         */
         this.handleMouseOver = (e) => {
@@ -24,21 +8,19 @@ var _a;
             if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {
-                element.setAttribute('data-tooltip', typeof this.content === 'function'
+                const tooltipContent = typeof this.content === 'function'
                     ? this.content.call(this, element)
-                    : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '');
+                    : this.content || ((_a = element.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
                 const rect = element.getBoundingClientRect();
-                // Set CSS variables for position
-                element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`);
-                element.style.setProperty('--tooltip-left', `${rect.left}px`);
+                // Calculate the fixed position
+                const fixedTop = rect.top + rect.height;
+                const fixedLeft = rect.left;
+                // Set tooltip container position and content
+                TooltipReactiveController.tooltipContainer.style.top = `${fixedTop}px`;
+                TooltipReactiveController.tooltipContainer.style.left = `${fixedLeft}px`;
+                TooltipReactiveController.tooltipContainer.style.display = 'block';
+                TooltipReactiveController.tooltipContainer.textContent = tooltipContent;
             }
         };
-        /**
-         * Handles the mouseout event. Removes the tooltip content and position properties from the target element.
-         * @param e - The mouseout event.
-         */
         this.handleMouseOut = (e) => {
-            const element = e.target;
-            if (element.hasAttribute('data-tooltip')) {
-                element.removeAttribute('data-tooltip');
-                element.style.removeProperty('--tooltip-top');
-                element.style.removeProperty('--tooltip-left');
+            if (TooltipReactiveController.tooltipContainer) {
+                TooltipReactiveController.tooltipContainer.style.display = 'none';
             }
@@ -51,6 +33,25 @@ };
         host.addController(this);
+        // Create a tooltip container element if it doesn't exist
+        if (!TooltipReactiveController.tooltipContainer) {
+            TooltipReactiveController.tooltipContainer = document.createElement('div');
+            TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container';
+            TooltipReactiveController.tooltipContainer.style.position = 'fixed';
+            TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none';
+            TooltipReactiveController.tooltipContainer.style.zIndex = '1000';
+            // Set default styles using CSS variables
+            TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)';
+            TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)';
+            TooltipReactiveController.tooltipContainer.style.backgroundColor =
+                'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))';
+            TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)';
+            TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)';
+            TooltipReactiveController.tooltipContainer.style.boxShadow =
+                'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))';
+            TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)';
+            TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word';
+            TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap';
+            TooltipReactiveController.tooltipContainer.style.overflow = 'hidden';
+            document.body.appendChild(TooltipReactiveController.tooltipContainer);
+        }
     }
-    /**
-     * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events.
-     */
     hostConnected() {
@@ -62,5 +63,2 @@ var _a;
     }
-    /**
-     * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events.
-     */
     hostDisconnected() {
@@ -73,2 +71,3 @@ var _a;
 }
+TooltipReactiveController.tooltipContainer = null;
 //# sourceMappingURL=tooltip-reactive-controller.js.map

package.json

@@ -5,3 +5,3 @@ {
   "author": "heartyoh",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0-rc.7",
   "main": "dist/src/index.js",
@@ -123,3 +123,3 @@ "module": "dist/src/index.js",
   },
-  "gitHead": "6ea42336e40d8eae2c11a9ebdfc21dd1cbcefca1"
+  "gitHead": "e7397f319e71283841e2879b4eb9e7a3a3af55cf"
 }

src/reactive-controllers/tooltip-reactive-controller.ts

 import { ReactiveController, ReactiveControllerHost } from 'lit'
 import { hasOverflow } from '../has-overflow'
 
-/**
- * TooltipReactiveController is a controller that manages the display of tooltips
- * for elements with a specified attribute. It works in conjunction with TooltipStyles
- * to position and style the tooltips.
- */
 export class TooltipReactiveController implements ReactiveController {
   private host: ReactiveControllerHost & HTMLElement
-  private attributeName!: string
+  private attributeName: string
   private content?: string | ((element: HTMLElement) => string)
+  private static tooltipContainer: HTMLElement | null = null
 
-  /**
-   * @param host - The host element that this controller is associated with.
-   * @param options - An optional object containing the content of the tooltip and the attribute name that triggers the tooltip.
-   *                  - content: The tooltip content, either a string or a function that returns a string based on the element.
-   *                  - attributeName: The attribute name that triggers the tooltip. Defaults to 'data-reactive-tooltip'.
-   */
   constructor(
@@ -34,7 +24,27 @@ host: ReactiveControllerHost & HTMLElement,
     host.addController(this)
+
+    // Create a tooltip container element if it doesn't exist
+    if (!TooltipReactiveController.tooltipContainer) {
+      TooltipReactiveController.tooltipContainer = document.createElement('div')
+      TooltipReactiveController.tooltipContainer.className = 'ox-tooltip-container'
+      TooltipReactiveController.tooltipContainer.style.position = 'fixed'
+      TooltipReactiveController.tooltipContainer.style.pointerEvents = 'none'
+      TooltipReactiveController.tooltipContainer.style.zIndex = '1000'
+      // Set default styles using CSS variables
+      TooltipReactiveController.tooltipContainer.style.fontSize = 'var(--tooltip-font-size, 1.0em)'
+      TooltipReactiveController.tooltipContainer.style.color = 'var(--tooltip-color, #fff)'
+      TooltipReactiveController.tooltipContainer.style.backgroundColor =
+        'var(--tooltip-background-color, rgba(0, 0, 0, 0.7))'
+      TooltipReactiveController.tooltipContainer.style.padding = 'var(--tooltip-padding, 5px)'
+      TooltipReactiveController.tooltipContainer.style.borderRadius = 'var(--tooltip-border-radius, 3px)'
+      TooltipReactiveController.tooltipContainer.style.boxShadow =
+        'var(--tooltip-box-shadow, 0 2px 10px rgba(0, 0, 0, 0.2))'
+      TooltipReactiveController.tooltipContainer.style.maxWidth = 'var(--tooltip-max-width, 300px)'
+      TooltipReactiveController.tooltipContainer.style.wordWrap = 'break-word'
+      TooltipReactiveController.tooltipContainer.style.whiteSpace = 'pre-wrap'
+      TooltipReactiveController.tooltipContainer.style.overflow = 'hidden'
+      document.body.appendChild(TooltipReactiveController.tooltipContainer)
+    }
   }
 
-  /**
-   * Called when the host is connected to the DOM. Adds event listeners for mouseover and mouseout events.
-   */
   hostConnected() {
@@ -46,5 +56,2 @@ const target = this.host.shadowRoot ?? this.host
 
-  /**
-   * Called when the host is disconnected from the DOM. Removes event listeners for mouseover and mouseout events.
-   */
   hostDisconnected() {
@@ -56,37 +63,29 @@ const target = this.host.shadowRoot ?? this.host
 
-  /**
-   * Handles the mouseover event. Checks if the target element has the specified attribute and if it has overflow.
-   * If both conditions are met, sets the tooltip content and calculates its position.
-   * @param e - The mouseover event.
-   */
   private handleMouseOver = (e: Event) => {
     const element = e.target as HTMLElement
     if (element.hasAttribute(this.attributeName) && hasOverflow(element)) {
-      element.setAttribute(
-        'data-tooltip',
+      const tooltipContent =
         typeof this.content === 'function'
           ? this.content.call(this, element)
           : this.content || element.textContent?.trim() || ''
-      )
 
       const rect = element.getBoundingClientRect()
 
-      // Set CSS variables for position
-      element.style.setProperty('--tooltip-top', `${rect.top + rect.height}px`)
-      element.style.setProperty('--tooltip-left', `${rect.left}px`)
+      // Calculate the fixed position
+      const fixedTop = rect.top + rect.height
+      const fixedLeft = rect.left
+
+      // Set tooltip container position and content
+      TooltipReactiveController.tooltipContainer!.style.top = `${fixedTop}px`
+      TooltipReactiveController.tooltipContainer!.style.left = `${fixedLeft}px`
+      TooltipReactiveController.tooltipContainer!.style.display = 'block'
+      TooltipReactiveController.tooltipContainer!.textContent = tooltipContent
     }
   }
 
-  /**
-   * Handles the mouseout event. Removes the tooltip content and position properties from the target element.
-   * @param e - The mouseout event.
-   */
   private handleMouseOut = (e: Event) => {
-    const element = e.target as HTMLElement
-    if (element.hasAttribute('data-tooltip')) {
-      element.removeAttribute('data-tooltip')
-      element.style.removeProperty('--tooltip-top')
-      element.style.removeProperty('--tooltip-left')
+    if (TooltipReactiveController.tooltipContainer) {
+      TooltipReactiveController.tooltipContainer.style.display = 'none'
     }
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

302599

-0.07%

Lines of code

3398

-0.85%

No dependency changes