@pathscale/ui 0.0.149 → 0.0.151
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.js +89 -38
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -10420,20 +10420,55 @@ function mapRange(value, inMin, inMax, outMin, outMax) {
|
|
|
10420
10420
|
const t = Math.max(0, Math.min(1, (value - inMin) / (inMax - inMin)));
|
|
10421
10421
|
return outMin + t * (outMax - outMin);
|
|
10422
10422
|
}
|
|
10423
|
-
const
|
|
10424
|
-
|
|
10425
|
-
|
|
10426
|
-
|
|
10427
|
-
|
|
10423
|
+
const TOOLTIP_OFFSET = 8;
|
|
10424
|
+
function computeTooltipPos(rect, dir) {
|
|
10425
|
+
const cx = rect.left + rect.width / 2;
|
|
10426
|
+
const cy = rect.top + rect.height / 2;
|
|
10427
|
+
switch(dir){
|
|
10428
|
+
case "top":
|
|
10429
|
+
return {
|
|
10430
|
+
left: `${cx}px`,
|
|
10431
|
+
top: `${rect.top - TOOLTIP_OFFSET}px`
|
|
10432
|
+
};
|
|
10433
|
+
case "bottom":
|
|
10434
|
+
return {
|
|
10435
|
+
left: `${cx}px`,
|
|
10436
|
+
top: `${rect.bottom + TOOLTIP_OFFSET}px`
|
|
10437
|
+
};
|
|
10438
|
+
case "left":
|
|
10439
|
+
return {
|
|
10440
|
+
left: `${rect.left - TOOLTIP_OFFSET}px`,
|
|
10441
|
+
top: `${cy}px`
|
|
10442
|
+
};
|
|
10443
|
+
case "right":
|
|
10444
|
+
return {
|
|
10445
|
+
left: `${rect.right + TOOLTIP_OFFSET}px`,
|
|
10446
|
+
top: `${cy}px`
|
|
10447
|
+
};
|
|
10448
|
+
}
|
|
10449
|
+
}
|
|
10450
|
+
const TOOLTIP_TRANSFORM = {
|
|
10451
|
+
top: "translate(-50%, -100%)",
|
|
10452
|
+
bottom: "translate(-50%, 0)",
|
|
10453
|
+
left: "translate(-100%, -50%)",
|
|
10454
|
+
right: "translate(0, -50%)"
|
|
10428
10455
|
};
|
|
10429
10456
|
const FloatingDock_DockItem = (props)=>{
|
|
10430
10457
|
let wrapRef;
|
|
10431
10458
|
let iconRef;
|
|
10432
10459
|
const [hovered, setHovered] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
|
|
10460
|
+
const [tooltipStyle, setTooltipStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
|
|
10461
|
+
top: "0",
|
|
10462
|
+
left: "0"
|
|
10463
|
+
});
|
|
10433
10464
|
const cfg = props.cfg;
|
|
10434
10465
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
|
|
10435
10466
|
if (wrapRef && iconRef) props.registerRefs(wrapRef, iconRef);
|
|
10436
10467
|
});
|
|
10468
|
+
const handleMouseEnter = ()=>{
|
|
10469
|
+
if (wrapRef) setTooltipStyle(computeTooltipPos(wrapRef.getBoundingClientRect(), cfg.tooltipDir));
|
|
10470
|
+
setHovered(true);
|
|
10471
|
+
};
|
|
10437
10472
|
const handleClick = (e)=>{
|
|
10438
10473
|
if (props.item.onClick) {
|
|
10439
10474
|
e.preventDefault();
|
|
@@ -10443,7 +10478,7 @@ const FloatingDock_DockItem = (props)=>{
|
|
|
10443
10478
|
const inner = (()=>{
|
|
10444
10479
|
var _el$ = FloatingDock_tmpl$2(), _el$3 = _el$.firstChild;
|
|
10445
10480
|
_el$.addEventListener("mouseleave", ()=>setHovered(false));
|
|
10446
|
-
_el$.addEventListener("mouseenter",
|
|
10481
|
+
_el$.addEventListener("mouseenter", handleMouseEnter);
|
|
10447
10482
|
var _ref$ = wrapRef;
|
|
10448
10483
|
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : wrapRef = _el$;
|
|
10449
10484
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
@@ -10451,20 +10486,36 @@ const FloatingDock_DockItem = (props)=>{
|
|
|
10451
10486
|
return hovered();
|
|
10452
10487
|
},
|
|
10453
10488
|
get children () {
|
|
10454
|
-
|
|
10455
|
-
|
|
10456
|
-
|
|
10457
|
-
|
|
10489
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
|
|
10490
|
+
get children () {
|
|
10491
|
+
var _el$2 = FloatingDock_tmpl$();
|
|
10492
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>props.item.title);
|
|
10493
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10494
|
+
var _v$ = twMerge("fixed w-fit rounded-md border border-base-300 bg-base-100 px-2 py-0.5 text-xs whitespace-pre text-base-content animate-fade-in z-[9999] pointer-events-none", cfg.tooltipClass), _v$2 = tooltipStyle().top, _v$3 = tooltipStyle().left, _v$4 = TOOLTIP_TRANSFORM[cfg.tooltipDir];
|
|
10495
|
+
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
|
|
10496
|
+
_v$2 !== _p$.t && (null != (_p$.t = _v$2) ? _el$2.style.setProperty("top", _v$2) : _el$2.style.removeProperty("top"));
|
|
10497
|
+
_v$3 !== _p$.a && (null != (_p$.a = _v$3) ? _el$2.style.setProperty("left", _v$3) : _el$2.style.removeProperty("left"));
|
|
10498
|
+
_v$4 !== _p$.o && (null != (_p$.o = _v$4) ? _el$2.style.setProperty("transform", _v$4) : _el$2.style.removeProperty("transform"));
|
|
10499
|
+
return _p$;
|
|
10500
|
+
}, {
|
|
10501
|
+
e: void 0,
|
|
10502
|
+
t: void 0,
|
|
10503
|
+
a: void 0,
|
|
10504
|
+
o: void 0
|
|
10505
|
+
});
|
|
10506
|
+
return _el$2;
|
|
10507
|
+
}
|
|
10508
|
+
});
|
|
10458
10509
|
}
|
|
10459
10510
|
}), _el$3);
|
|
10460
10511
|
var _ref$2 = iconRef;
|
|
10461
10512
|
"function" == typeof _ref$2 ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$2, _el$3) : iconRef = _el$3;
|
|
10462
10513
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>props.item.icon);
|
|
10463
10514
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10464
|
-
var _v$ = twMerge("relative flex items-center justify-center rounded-full bg-base-200 transition-[opacity,transform] duration-150 hover:opacity-100 active:scale-90 active:duration-75", "opacity-80", cfg.itemClass), _v$
|
|
10465
|
-
_v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
|
|
10466
|
-
_v$
|
|
10467
|
-
_v$
|
|
10515
|
+
var _v$5 = twMerge("relative flex items-center justify-center rounded-full bg-base-200 transition-[opacity,transform] duration-150 hover:opacity-100 active:scale-90 active:duration-75", "opacity-80", cfg.itemClass), _v$6 = `${cfg.baseSize}px`, _v$7 = `${cfg.baseSize}px`;
|
|
10516
|
+
_v$5 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$5);
|
|
10517
|
+
_v$6 !== _p$.t && (null != (_p$.t = _v$6) ? _el$.style.setProperty("width", _v$6) : _el$.style.removeProperty("width"));
|
|
10518
|
+
_v$7 !== _p$.a && (null != (_p$.a = _v$7) ? _el$.style.setProperty("height", _v$7) : _el$.style.removeProperty("height"));
|
|
10468
10519
|
return _p$;
|
|
10469
10520
|
}, {
|
|
10470
10521
|
e: void 0,
|
|
@@ -10487,9 +10538,9 @@ const FloatingDock_DockItem = (props)=>{
|
|
|
10487
10538
|
var _el$5 = FloatingDock_tmpl$4();
|
|
10488
10539
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, inner);
|
|
10489
10540
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10490
|
-
var _v$
|
|
10491
|
-
_v$
|
|
10492
|
-
_v$
|
|
10541
|
+
var _v$8 = props.item.href, _v$9 = props.item.title;
|
|
10542
|
+
_v$8 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "href", _p$.e = _v$8);
|
|
10543
|
+
_v$9 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", _p$.t = _v$9);
|
|
10493
10544
|
return _p$;
|
|
10494
10545
|
}, {
|
|
10495
10546
|
e: void 0,
|
|
@@ -10614,7 +10665,7 @@ const FloatingDockDesktop = (props)=>{
|
|
|
10614
10665
|
}
|
|
10615
10666
|
}));
|
|
10616
10667
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10617
|
-
var _v$
|
|
10668
|
+
var _v$0 = twMerge("mx-auto", "items-center", props.showContainer && "rounded-2xl bg-base-100 shadow-[0px_1px_0px_0px_var(--color-base-300)_inset,0px_1px_0px_0px_var(--color-base-100)]", isH() && props.showContainer && "px-4 py-2", !isH() && props.showContainer && "py-4 px-2", props.class), _v$1 = {
|
|
10618
10669
|
display: "flex",
|
|
10619
10670
|
"flex-direction": isH() ? "row" : "column",
|
|
10620
10671
|
gap: `${cfg.gap}px`,
|
|
@@ -10625,8 +10676,8 @@ const FloatingDockDesktop = (props)=>{
|
|
|
10625
10676
|
},
|
|
10626
10677
|
overflow: "visible"
|
|
10627
10678
|
};
|
|
10628
|
-
_v$
|
|
10629
|
-
_p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$
|
|
10679
|
+
_v$0 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.e = _v$0);
|
|
10680
|
+
_p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$6, _v$1, _p$.t);
|
|
10630
10681
|
return _p$;
|
|
10631
10682
|
}, {
|
|
10632
10683
|
e: void 0,
|
|
@@ -10679,10 +10730,10 @@ const FloatingDockMobile = (props)=>{
|
|
|
10679
10730
|
var _el$11 = _tmpl$0();
|
|
10680
10731
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$11, ()=>item.icon);
|
|
10681
10732
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10682
|
-
var _v$
|
|
10683
|
-
_v$
|
|
10684
|
-
_v$
|
|
10685
|
-
_v$
|
|
10733
|
+
var _v$20 = `${props.cfg.baseSize}px`, _v$21 = `${props.cfg.baseSize}px`, _v$22 = item.title;
|
|
10734
|
+
_v$20 !== _p$.e && (null != (_p$.e = _v$20) ? _el$11.style.setProperty("width", _v$20) : _el$11.style.removeProperty("width"));
|
|
10735
|
+
_v$21 !== _p$.t && (null != (_p$.t = _v$21) ? _el$11.style.setProperty("height", _v$21) : _el$11.style.removeProperty("height"));
|
|
10736
|
+
_v$22 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$11, "title", _p$.a = _v$22);
|
|
10686
10737
|
return _p$;
|
|
10687
10738
|
}, {
|
|
10688
10739
|
e: void 0,
|
|
@@ -10696,11 +10747,11 @@ const FloatingDockMobile = (props)=>{
|
|
|
10696
10747
|
var _el$10 = _tmpl$9();
|
|
10697
10748
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, ()=>item.icon);
|
|
10698
10749
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10699
|
-
var _v$
|
|
10700
|
-
_v$
|
|
10701
|
-
_v$
|
|
10702
|
-
_v$
|
|
10703
|
-
_v$
|
|
10750
|
+
var _v$16 = item.href, _v$17 = `${props.cfg.baseSize}px`, _v$18 = `${props.cfg.baseSize}px`, _v$19 = item.title;
|
|
10751
|
+
_v$16 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "href", _p$.e = _v$16);
|
|
10752
|
+
_v$17 !== _p$.t && (null != (_p$.t = _v$17) ? _el$10.style.setProperty("width", _v$17) : _el$10.style.removeProperty("width"));
|
|
10753
|
+
_v$18 !== _p$.a && (null != (_p$.a = _v$18) ? _el$10.style.setProperty("height", _v$18) : _el$10.style.removeProperty("height"));
|
|
10754
|
+
_v$19 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "title", _p$.o = _v$19);
|
|
10704
10755
|
return _p$;
|
|
10705
10756
|
}, {
|
|
10706
10757
|
e: void 0,
|
|
@@ -10717,10 +10768,10 @@ const FloatingDockMobile = (props)=>{
|
|
|
10717
10768
|
_el$1.$$click = (e)=>handleItemClick(item, e);
|
|
10718
10769
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>item.icon);
|
|
10719
10770
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10720
|
-
var _v$
|
|
10721
|
-
_v$
|
|
10722
|
-
_v$
|
|
10723
|
-
_v$
|
|
10771
|
+
var _v$13 = `${props.cfg.baseSize}px`, _v$14 = `${props.cfg.baseSize}px`, _v$15 = item.title;
|
|
10772
|
+
_v$13 !== _p$.e && (null != (_p$.e = _v$13) ? _el$1.style.setProperty("width", _v$13) : _el$1.style.removeProperty("width"));
|
|
10773
|
+
_v$14 !== _p$.t && (null != (_p$.t = _v$14) ? _el$1.style.setProperty("height", _v$14) : _el$1.style.removeProperty("height"));
|
|
10774
|
+
_v$15 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$1, "title", _p$.a = _v$15);
|
|
10724
10775
|
return _p$;
|
|
10725
10776
|
}, {
|
|
10726
10777
|
e: void 0,
|
|
@@ -10741,10 +10792,10 @@ const FloatingDockMobile = (props)=>{
|
|
|
10741
10792
|
_el$9.$$click = ()=>setOpen(!open());
|
|
10742
10793
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>props.toggleIcon ?? _tmpl$1());
|
|
10743
10794
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10744
|
-
var _v$
|
|
10745
|
-
_v$
|
|
10746
|
-
_v$
|
|
10747
|
-
_v$
|
|
10795
|
+
var _v$10 = twMerge("relative block md:hidden", props.class), _v$11 = `${props.cfg.baseSize}px`, _v$12 = `${props.cfg.baseSize}px`;
|
|
10796
|
+
_v$10 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$7, _p$.e = _v$10);
|
|
10797
|
+
_v$11 !== _p$.t && (null != (_p$.t = _v$11) ? _el$9.style.setProperty("width", _v$11) : _el$9.style.removeProperty("width"));
|
|
10798
|
+
_v$12 !== _p$.a && (null != (_p$.a = _v$12) ? _el$9.style.setProperty("height", _v$12) : _el$9.style.removeProperty("height"));
|
|
10748
10799
|
return _p$;
|
|
10749
10800
|
}, {
|
|
10750
10801
|
e: void 0,
|
|
@@ -10986,7 +11037,7 @@ const GlassPanel = (props)=>{
|
|
|
10986
11037
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "id", contentId);
|
|
10987
11038
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
|
|
10988
11039
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
|
|
10989
|
-
var _v$3 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$4 =
|
|
11040
|
+
var _v$3 = !local.collapsible || isOpen() ? "1fr" : "0fr", _v$4 = `${!local.collapsible || isOpen() ? "overflow-visible" : "overflow-hidden"} ${contentClasses()}`;
|
|
10990
11041
|
_v$3 !== _p$.e && (null != (_p$.e = _v$3) ? _el$5.style.setProperty("grid-template-rows", _v$3) : _el$5.style.removeProperty("grid-template-rows"));
|
|
10991
11042
|
_v$4 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$6, _p$.t = _v$4);
|
|
10992
11043
|
return _p$;
|