antd-solid 0.0.34 → 0.0.35

package/dist/index.esm.js

@@ -592,7 +592,7 @@ const CompactContext = createContext({
 });
 
 var _tmpl$$Q = /*#__PURE__*/template(`<span class="i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]">`),
-  _tmpl$2$w = /*#__PURE__*/template(`<span>`),
+  _tmpl$2$x = /*#__PURE__*/template(`<span>`),
   _tmpl$3$l = /*#__PURE__*/template(`<span class="inline-block leading-inherit">`);
 const sizeClassMap = {
   large: 'px-15px py-7px h-40px leading-24px',
@@ -683,7 +683,7 @@ const Button$1 = _props => {
           return memo(() => !!resolvedChildren())() && !(props.hideChildrenWhenLoading && loading());
         },
         get children() {
-          var _el$2 = _tmpl$2$w();
+          var _el$2 = _tmpl$2$x();
           spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
             get ["class"]() {
               return cs('inline-block leading-inherit', props.contentHTMLAttributes?.class);
@@ -839,7 +839,7 @@ var css_248z$4 = ".ant-input-group > :first-child {\n  border-top-left-radius: v
 styleInject(css_248z$4);
 
 var _tmpl$$O = /*#__PURE__*/template(`<div>`),
-  _tmpl$2$v = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$2$w = /*#__PURE__*/template(`<span class="ml-4px i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
   _tmpl$3$k = /*#__PURE__*/template(`<div class="[display:var(--actions-display)] absolute top-0 bottom-0 right-0 h-[calc(100%-2px)] translate-y-1px -translate-x-1px">`),
   _tmpl$4$e = /*#__PURE__*/template(`<div><input>`);
 const statusClassDict$1 = {
@@ -1001,7 +1001,7 @@ function CommonInput(props) {
             return showClearBtn();
           },
           get children() {
-            var _el$5 = _tmpl$2$v();
+            var _el$5 = _tmpl$2$w();
             _el$5.$$click = e => {
               e.stopPropagation();
               inputRef.value = '';
@@ -1179,7 +1179,7 @@ const InputNumber = _props => {
 delegateEvents(["click"]);
 
 var _tmpl$$M = /*#__PURE__*/template(`<div class="flex relative"><div class="w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]"></div><div class=ml-[8px]>`),
-  _tmpl$2$u = /*#__PURE__*/template(`<div class="absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]">`);
+  _tmpl$2$v = /*#__PURE__*/template(`<div class="absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]">`);
 const Timeline = props => {
   return createComponent(Element$1, {
     "class": "flex flex-col gap-[16px]",
@@ -1194,7 +1194,7 @@ const Timeline = props => {
             _el$3 = _el$2.nextSibling;
           insert(_el$, (() => {
             var _c$ = memo(() => i() !== props.items.length - 1);
-            return () => _c$() && _tmpl$2$u();
+            return () => _c$() && _tmpl$2$v();
           })(), _el$2);
           insert(_el$3, () => item.children?.());
           return _el$;
@@ -1271,7 +1271,7 @@ function createTransition(target, when, props = {}) {
 }
 
 var _tmpl$$L = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)] shrink-0">`),
-  _tmpl$2$t = /*#__PURE__*/template(`<div class=ml-34px>`);
+  _tmpl$2$u = /*#__PURE__*/template(`<div class=ml-34px>`);
 function useModal() {
   const [open, setOpen] = createSignal(false);
   const [modalProps, setModalProps] = createSignal({});
@@ -1296,7 +1296,7 @@ function useModal() {
     },
     get children() {
       return (() => {
-        var _el$3 = _tmpl$2$t();
+        var _el$3 = _tmpl$2$u();
         insert(_el$3, () => modalProps().children);
         return _el$3;
       })();
@@ -1317,7 +1317,7 @@ function useModal() {
 }
 
 var _tmpl$$K = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)] shrink-0">`),
-  _tmpl$2$s = /*#__PURE__*/template(`<div class=ml-34px>`);
+  _tmpl$2$t = /*#__PURE__*/template(`<div class=ml-34px>`);
 function warning$1(props) {
   const div = document.createElement('div');
   document.body.appendChild(div);
@@ -1336,7 +1336,7 @@ function warning$1(props) {
     },
     get children() {
       return (() => {
-        var _el$3 = _tmpl$2$s();
+        var _el$3 = _tmpl$2$t();
         insert(_el$3, () => props.children);
         return _el$3;
       })();
@@ -1363,7 +1363,7 @@ function useLocale() {
 }
 
 var _tmpl$$J = /*#__PURE__*/template(`<div aria-label=mask>`),
-  _tmpl$2$r = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$2$s = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
   _tmpl$3$j = /*#__PURE__*/template(`<div class="inline-flex gap-8px">`),
   _tmpl$4$d = /*#__PURE__*/template(`<div class="mt-12px text-right">`),
   _tmpl$5$9 = /*#__PURE__*/template(`<div class="ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none"><div><div class="text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px"></div><div class=grow>`);
@@ -1501,7 +1501,7 @@ const Modal = _props => {
                                 props.onCancel?.();
                               },
                               get children() {
-                                return _tmpl$2$r();
+                                return _tmpl$2$s();
                               }
                             });
                           }
@@ -1588,7 +1588,7 @@ var css_248z$2 = ".ant-drawer-content-right {\n  top: 0;\n  bottom: 0;\n  right:
 styleInject(css_248z$2);
 
 var _tmpl$$I = /*#__PURE__*/template(`<div aria-label=mask>`),
-  _tmpl$2$q = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
+  _tmpl$2$r = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
   _tmpl$3$i = /*#__PURE__*/template(`<div class="w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]">`),
   _tmpl$4$c = /*#__PURE__*/template(`<div class=shrink-0>`),
   _tmpl$5$8 = /*#__PURE__*/template(`<div><div class="px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden"></div><div class="p-[--ant-drawer-body-padding] overflow-auto">`);
@@ -1716,7 +1716,7 @@ const Drawer = _props => {
                         props.onClose?.();
                       },
                       get children() {
-                        return _tmpl$2$q();
+                        return _tmpl$2$r();
                       }
                     });
                   }
@@ -1810,9 +1810,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
+    });
   });
 }
 
@@ -1877,7 +1881,8 @@ function useHover(target) {
 
 const TooltipContext = createContext();
 
-var _tmpl$$H = /*#__PURE__*/template(`<div>`);
+var _tmpl$$H = /*#__PURE__*/template(`<div>`),
+  _tmpl$2$q = /*#__PURE__*/template(`<div class=relative><div>`);
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -2005,7 +2010,6 @@ const getMinorPlacement = placement => {
   }
   return minorPlacement;
 };
-// TODO 超出范围滚动
 const Tooltip = _props => {
   const props = mergeProps({
     trigger: 'hover',
@@ -2100,7 +2104,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, {
@@ -2124,6 +2130,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(() => {
@@ -2172,15 +2182,19 @@ const Tooltip = _props => {
       switch (mainPlacement) {
         case 'top':
           translateY = _childrenRect.top - arrowOffset() - defaultOffset - _contentSize.height;
+          setMaxHeight(translateY);
           break;
         case 'bottom':
           translateY = _childrenRect.bottom + arrowOffset() + defaultOffset;
+          setMaxHeight(window.innerHeight - translateY);
           break;
         case 'left':
           translateX = _childrenRect.left - arrowOffset() - defaultOffset - _contentSize.width;
+          setMaxWidth(translateX);
           break;
         case 'right':
           translateX = _childrenRect.right + arrowOffset() + defaultOffset;
+          setMaxWidth(window.innerWidth - translateX);
           break;
       }
     };
@@ -2202,12 +2216,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;
@@ -2257,8 +2271,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;
@@ -2298,37 +2312,40 @@ 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] overflow-auto', open() ? 'block' : 'hidden');
             },
-            style: {
-              transform: 'translate(var(--translate-x), var(--translate-y))'
+            get style() {
+              return {
+                transform: `translate(${_translateX()}px, ${_translateY()}px)`,
+                'max-width': typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
+                'max-height': typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined
+              };
             },
             onClick: e => {
               e.stopPropagation();
             },
             get children() {
-              return [(() => {
-                var _el$ = _tmpl$$H();
-                spread(_el$, 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, {
-                  value: context,
-                  get children() {
-                    return unwrapContent(props.content, () => setOpen(false));
-                  }
-                }));
-                return _el$;
-              })(), createComponent(Show, {
+              var _el$ = _tmpl$2$q(),
+                _el$2 = _el$.firstChild;
+              use(setPopupRef, _el$);
+              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$2, createComponent(TooltipContext.Provider, {
+                value: context,
+                get children() {
+                  return unwrapContent(props.content, () => setOpen(false));
+                }
+              }));
+              insert(_el$, createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  var _el$2 = _tmpl$$H();
+                  var _el$3 = _tmpl$$H();
                   effect(_p$ => {
                     var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
                       _v$2 = {
@@ -2336,16 +2353,17 @@ const Tooltip = _props => {
                         '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$ !== _p$.e && className(_el$3, _p$.e = _v$);
+                    _p$.t = style(_el$3, _v$2, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$2;
+                  return _el$3;
                 }
-              })];
+              }), null);
+              return _el$;
             }
           });
         }