antd-solid 0.0.34 → 0.0.36

package/es/Tooltip/index.js

@@ -1,4 +1,4 @@
-import { createComponent, memo, Dynamic, Portal, spread, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
+import { createComponent, memo, Dynamic, Portal, use, spread, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
 import { isEqual, compact } from 'lodash-es';
 import { mergeProps, createSignal, useContext, children, createMemo, createEffect, onCleanup, createRenderEffect, on, Show } from 'solid-js';
 import cs from 'classnames';
@@ -11,7 +11,8 @@ import useHover from '../hooks/useHover.js';
 import Element$1 from '../Element/index.js';
 import TooltipContext from './context.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`);
+var _tmpl$ = /*#__PURE__*/template(`<div class="relative overflow-auto"><div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -139,7 +140,6 @@ const getMinorPlacement = placement => {
   }
   return minorPlacement;
 };
-// TODO 超出范围滚动
 const Tooltip = _props => {
   const props = mergeProps({
     trigger: 'hover',
@@ -234,7 +234,9 @@ const Tooltip = _props => {
         _children.addEventListener('click', reverseOpen, {
           signal: abortController.signal
         });
-        useClickAway(hide, () => compact([...Object.values(subPopupElements()), contentRef(), _children]));
+        useClickAway(() => {
+          hide();
+        }, () => compact([...Object.values(subPopupElements()), contentRef(), _children]));
         break;
       case 'focus':
         _children.addEventListener('focusin', show, {
@@ -258,6 +260,10 @@ const Tooltip = _props => {
   }));
   const [reversedMainPlacement, setReversedMainPlacement] = createSignal('top');
   const [reversedMinorPlacement, setReversedMinorPlacement] = createSignal();
+  const [maxWidth, setMaxWidth] = createSignal();
+  const [maxHeight, setMaxHeight] = createSignal();
+  const [_translateX, setTranslateX] = createSignal(0);
+  const [_translateY, setTranslateY] = createSignal(0);
   const contentSize = useSize(contentRef);
   // 设置 content 显示时的 translate
   createEffect(() => {
@@ -306,15 +312,19 @@ const Tooltip = _props => {
       switch (mainPlacement) {
         case 'top':
           translateY = _childrenRect.top - arrowOffset() - defaultOffset - _contentSize.height;
+          setMaxHeight(translateY + _contentSize.height);
           break;
         case 'bottom':
           translateY = _childrenRect.bottom + arrowOffset() + defaultOffset;
+          setMaxHeight(window.innerHeight - translateY);
           break;
         case 'left':
           translateX = _childrenRect.left - arrowOffset() - defaultOffset - _contentSize.width;
+          setMaxWidth(translateX + _contentSize.width);
           break;
         case 'right':
           translateX = _childrenRect.right + arrowOffset() + defaultOffset;
+          setMaxWidth(window.innerWidth - translateX);
           break;
       }
     };
@@ -336,12 +346,12 @@ const Tooltip = _props => {
           }
           break;
         case 'bottom':
-          if (translateY + _contentSize.height > window.innerHeight) {
+          if (translateY > _contentSize.height && translateY + _contentSize.height > window.innerHeight) {
             reverseMainPlacement();
           }
           break;
         case 'left':
-          if (translateX + _contentSize.width > window.innerWidth) {
+          if (translateX > _contentSize.width && translateX + _contentSize.width > window.innerWidth) {
             reverseMainPlacement();
           }
           break;
@@ -391,8 +401,8 @@ const Tooltip = _props => {
     } else {
       updateTranslateByMainPlacement(mainPlacement);
     }
-    _contentRef.style.setProperty('--translate-x', `${translateX}px`);
-    _contentRef.style.setProperty('--translate-y', `${translateY}px`);
+    setTranslateX(translateX);
+    setTranslateY(translateY);
     // placement 为 top 和 bottom 时，tooltip 超出可视区域时对 content 进行偏移矫正
     if (props.placement === 'top' || props.placement === 'bottom') {
       let innerTranslateX = 0;
@@ -432,52 +442,65 @@ const Tooltip = _props => {
         },
         get children() {
           return createComponent(Element$1, {
-            ref: setPopupRef,
             get ["class"]() {
-              return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', open() ? 'block' : 'hidden');
+              return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]', open() ? 'block' : 'hidden');
             },
-            style: {
-              transform: 'translate(var(--translate-x), var(--translate-y))'
+            get style() {
+              return {
+                transform: `translate(${_translateX()}px, ${_translateY()}px)`
+              };
             },
             onClick: e => {
               e.stopPropagation();
             },
             get children() {
               return [(() => {
-                var _el$ = _tmpl$();
-                spread(_el$, mergeProps$1(() => props.contentHTMLAttributes, {
+                var _el$ = _tmpl$(),
+                  _el$2 = _el$.firstChild;
+                use(setPopupRef, _el$2);
+                spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
                   get ["class"]() {
                     return cs(props.contentHTMLAttributes?.class, 'px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto translate-x-[--inner-translate-x] translate-y-[--inner-translate-y]', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]');
                   }
                 }), false, true);
-                insert(_el$, createComponent(TooltipContext.Provider, {
+                insert(_el$2, createComponent(TooltipContext.Provider, {
                   value: context,
                   get children() {
                     return unwrapContent(props.content, () => setOpen(false));
                   }
                 }));
+                effect(_p$ => {
+                  var _v$ = typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
+                    _v$2 = typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined;
+                  _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("max-width", _v$) : _el$.style.removeProperty("max-width"));
+                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("max-height", _v$2) : _el$.style.removeProperty("max-height"));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined
+                });
                 return _el$;
               })(), createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  var _el$2 = _tmpl$();
+                  var _el$3 = _tmpl$2();
                   effect(_p$ => {
-                    var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
-                      _v$2 = {
+                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
+                      _v$4 = {
                         'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
                         'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
                         ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
                       };
-                    _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-                    _p$.t = style(_el$2, _v$2, _p$.t);
+                    _v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
+                    _p$.t = style(_el$3, _v$4, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$2;
+                  return _el$3;
                 }
               })];
             }

package/es/hooks/useClickAway.js

@@ -9,9 +9,13 @@ function useClickAway(onClickAway, target) {
       onClickAway(event);
     }
   };
-  window.addEventListener('click', onClick);
+  window.addEventListener('click', onClick, {
+    capture: true
+  });
   onCleanup(() => {
-    window.removeEventListener('click', onClick);
+    window.removeEventListener('click', onClick, {
+      capture: true
+    });
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-solid",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "description": "",
   "main": "dist/index.esm.js",
   "module": "es/index.js",