antd-solid 0.0.35 → 0.0.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +39 -30
- package/dist/index.umd.js +1 -1
- package/es/Tooltip/index.js +39 -30
- package/package.json +1 -1
package/es/Tooltip/index.js
CHANGED
|
@@ -11,8 +11,8 @@ import useHover from '../hooks/useHover.js';
|
|
|
11
11
|
import Element$1 from '../Element/index.js';
|
|
12
12
|
import TooltipContext from './context.js';
|
|
13
13
|
|
|
14
|
-
var _tmpl$ = /*#__PURE__*/template(`<div>`),
|
|
15
|
-
_tmpl$2 = /*#__PURE__*/template(`<div
|
|
14
|
+
var _tmpl$ = /*#__PURE__*/template(`<div class="relative overflow-auto"><div>`),
|
|
15
|
+
_tmpl$2 = /*#__PURE__*/template(`<div>`);
|
|
16
16
|
const unwrapContent = (content, close) => {
|
|
17
17
|
return typeof content === 'function' ? content(close) : content;
|
|
18
18
|
};
|
|
@@ -312,7 +312,7 @@ const Tooltip = _props => {
|
|
|
312
312
|
switch (mainPlacement) {
|
|
313
313
|
case 'top':
|
|
314
314
|
translateY = _childrenRect.top - arrowOffset() - defaultOffset - _contentSize.height;
|
|
315
|
-
setMaxHeight(translateY);
|
|
315
|
+
setMaxHeight(translateY + _contentSize.height);
|
|
316
316
|
break;
|
|
317
317
|
case 'bottom':
|
|
318
318
|
translateY = _childrenRect.bottom + arrowOffset() + defaultOffset;
|
|
@@ -320,7 +320,7 @@ const Tooltip = _props => {
|
|
|
320
320
|
break;
|
|
321
321
|
case 'left':
|
|
322
322
|
translateX = _childrenRect.left - arrowOffset() - defaultOffset - _contentSize.width;
|
|
323
|
-
setMaxWidth(translateX);
|
|
323
|
+
setMaxWidth(translateX + _contentSize.width);
|
|
324
324
|
break;
|
|
325
325
|
case 'right':
|
|
326
326
|
translateX = _childrenRect.right + arrowOffset() + defaultOffset;
|
|
@@ -443,48 +443,58 @@ const Tooltip = _props => {
|
|
|
443
443
|
get children() {
|
|
444
444
|
return createComponent(Element$1, {
|
|
445
445
|
get ["class"]() {
|
|
446
|
-
return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]
|
|
446
|
+
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');
|
|
447
447
|
},
|
|
448
448
|
get style() {
|
|
449
449
|
return {
|
|
450
|
-
transform: `translate(${_translateX()}px, ${_translateY()}px)
|
|
451
|
-
'max-width': typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
|
|
452
|
-
'max-height': typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined
|
|
450
|
+
transform: `translate(${_translateX()}px, ${_translateY()}px)`
|
|
453
451
|
};
|
|
454
452
|
},
|
|
455
453
|
onClick: e => {
|
|
456
454
|
e.stopPropagation();
|
|
457
455
|
},
|
|
458
456
|
get children() {
|
|
459
|
-
|
|
460
|
-
_el$
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
457
|
+
return [(() => {
|
|
458
|
+
var _el$ = _tmpl$(),
|
|
459
|
+
_el$2 = _el$.firstChild;
|
|
460
|
+
use(setPopupRef, _el$2);
|
|
461
|
+
spread(_el$2, mergeProps$1(() => props.contentHTMLAttributes, {
|
|
462
|
+
get ["class"]() {
|
|
463
|
+
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)]');
|
|
464
|
+
}
|
|
465
|
+
}), false, true);
|
|
466
|
+
insert(_el$2, createComponent(TooltipContext.Provider, {
|
|
467
|
+
value: context,
|
|
468
|
+
get children() {
|
|
469
|
+
return unwrapContent(props.content, () => setOpen(false));
|
|
470
|
+
}
|
|
471
|
+
}));
|
|
472
|
+
effect(_p$ => {
|
|
473
|
+
var _v$ = typeof maxWidth() === 'number' ? `${maxWidth()}px` : undefined,
|
|
474
|
+
_v$2 = typeof maxHeight() === 'number' ? `${maxHeight()}px` : undefined;
|
|
475
|
+
_v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("max-width", _v$) : _el$.style.removeProperty("max-width"));
|
|
476
|
+
_v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("max-height", _v$2) : _el$.style.removeProperty("max-height"));
|
|
477
|
+
return _p$;
|
|
478
|
+
}, {
|
|
479
|
+
e: undefined,
|
|
480
|
+
t: undefined
|
|
481
|
+
});
|
|
482
|
+
return _el$;
|
|
483
|
+
})(), createComponent(Show, {
|
|
474
484
|
get when() {
|
|
475
485
|
return props.arrow;
|
|
476
486
|
},
|
|
477
487
|
get children() {
|
|
478
|
-
var _el$3 = _tmpl$();
|
|
488
|
+
var _el$3 = _tmpl$2();
|
|
479
489
|
effect(_p$ => {
|
|
480
|
-
var _v$ = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
|
|
481
|
-
_v$
|
|
490
|
+
var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
|
|
491
|
+
_v$4 = {
|
|
482
492
|
'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
|
|
483
493
|
'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
|
|
484
494
|
...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
|
|
485
495
|
};
|
|
486
|
-
_v$ !== _p$.e && className(_el$3, _p$.e = _v$);
|
|
487
|
-
_p$.t = style(_el$3, _v$
|
|
496
|
+
_v$3 !== _p$.e && className(_el$3, _p$.e = _v$3);
|
|
497
|
+
_p$.t = style(_el$3, _v$4, _p$.t);
|
|
488
498
|
return _p$;
|
|
489
499
|
}, {
|
|
490
500
|
e: undefined,
|
|
@@ -492,8 +502,7 @@ const Tooltip = _props => {
|
|
|
492
502
|
});
|
|
493
503
|
return _el$3;
|
|
494
504
|
}
|
|
495
|
-
})
|
|
496
|
-
return _el$;
|
|
505
|
+
})];
|
|
497
506
|
}
|
|
498
507
|
});
|
|
499
508
|
}
|