@pathscale/ui 1.1.42 → 1.1.44
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/components/disclosure/Disclosure.classes.d.ts +15 -0
- package/dist/components/disclosure/Disclosure.classes.js +16 -0
- package/dist/components/disclosure/Disclosure.css +84 -0
- package/dist/components/disclosure/Disclosure.d.ts +45 -0
- package/dist/components/disclosure/Disclosure.js +302 -0
- package/dist/components/disclosure/index.d.ts +11 -0
- package/dist/components/disclosure/index.js +9 -0
- package/dist/components/disclosure-group/DisclosureGroup.classes.d.ts +3 -0
- package/dist/components/disclosure-group/DisclosureGroup.classes.js +4 -0
- package/dist/components/disclosure-group/DisclosureGroup.css +9 -0
- package/dist/components/disclosure-group/DisclosureGroup.d.ts +25 -0
- package/dist/components/disclosure-group/DisclosureGroup.js +73 -0
- package/dist/components/disclosure-group/index.d.ts +9 -0
- package/dist/components/disclosure-group/index.js +6 -0
- package/dist/components/disclosure-group/useDisclosureGroupNavigation.d.ts +14 -0
- package/dist/components/disclosure-group/useDisclosureGroupNavigation.js +54 -0
- package/dist/components/icon/Icon.js +1 -2
- package/dist/components/immersive-landing/ImmersiveLanding.css +1 -1
- package/dist/components/input/Input.css +4 -0
- package/dist/components/meter/Meter.classes.d.ts +21 -0
- package/dist/components/meter/Meter.classes.js +22 -0
- package/dist/components/meter/Meter.css +89 -0
- package/dist/components/meter/Meter.d.ts +43 -0
- package/dist/components/meter/Meter.js +212 -0
- package/dist/components/meter/index.d.ts +1 -0
- package/dist/components/meter/index.js +8 -0
- package/dist/components/popover/Popover.classes.d.ts +10 -0
- package/dist/components/popover/Popover.classes.js +11 -0
- package/dist/components/popover/Popover.css +125 -0
- package/dist/components/popover/Popover.d.ts +47 -0
- package/dist/components/popover/Popover.js +310 -0
- package/dist/components/popover/index.d.ts +11 -0
- package/dist/components/popover/index.js +9 -0
- package/dist/components/range-calendar/RangeCalendar.classes.d.ts +11 -0
- package/dist/components/range-calendar/RangeCalendar.classes.js +12 -0
- package/dist/components/range-calendar/RangeCalendar.css +51 -0
- package/dist/components/range-calendar/RangeCalendar.d.ts +24 -0
- package/dist/components/range-calendar/RangeCalendar.js +110 -0
- package/dist/components/range-calendar/index.d.ts +1 -0
- package/dist/components/range-calendar/index.js +3 -0
- package/dist/components/scroll-shadow/ScrollShadow.classes.d.ts +13 -0
- package/dist/components/scroll-shadow/ScrollShadow.classes.js +14 -0
- package/dist/components/scroll-shadow/ScrollShadow.css +93 -0
- package/dist/components/scroll-shadow/ScrollShadow.d.ts +18 -0
- package/dist/components/scroll-shadow/ScrollShadow.js +87 -0
- package/dist/components/scroll-shadow/index.d.ts +2 -0
- package/dist/components/scroll-shadow/index.js +3 -0
- package/dist/components/scroll-shadow/useScrollShadow.d.ts +13 -0
- package/dist/components/scroll-shadow/useScrollShadow.js +97 -0
- package/dist/components/toggle/Toggle.css +9 -0
- package/dist/components/toolbar/Toolbar.classes.d.ts +10 -0
- package/dist/components/toolbar/Toolbar.classes.js +11 -0
- package/dist/components/toolbar/Toolbar.css +55 -0
- package/dist/components/toolbar/Toolbar.d.ts +15 -0
- package/dist/components/toolbar/Toolbar.js +96 -0
- package/dist/components/toolbar/index.d.ts +1 -0
- package/dist/components/toolbar/index.js +5 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +21 -1
- package/dist/purge-manifest.json +176 -0
- package/package.json +1 -1
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.scroll-shadow {
|
|
3
|
+
position: relative;
|
|
4
|
+
--scroll-shadow-size: 40px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.scroll-shadow--vertical {
|
|
8
|
+
overflow-y: auto;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.scroll-shadow--horizontal {
|
|
12
|
+
overflow-x: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.scroll-shadow--fade.scroll-shadow--vertical[data-top-scroll="true"] {
|
|
16
|
+
--scroll-linear-gradient:
|
|
17
|
+
0deg,
|
|
18
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
19
|
+
transparent;
|
|
20
|
+
|
|
21
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
22
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.scroll-shadow--fade.scroll-shadow--vertical[data-bottom-scroll="true"] {
|
|
26
|
+
--scroll-linear-gradient:
|
|
27
|
+
180deg,
|
|
28
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
29
|
+
transparent;
|
|
30
|
+
|
|
31
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
32
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.scroll-shadow--fade.scroll-shadow--vertical[data-top-bottom-scroll="true"] {
|
|
36
|
+
--scroll-linear-gradient:
|
|
37
|
+
#000,
|
|
38
|
+
#000,
|
|
39
|
+
transparent 0,
|
|
40
|
+
#000 var(--scroll-shadow-size),
|
|
41
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
42
|
+
transparent;
|
|
43
|
+
|
|
44
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
45
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.scroll-shadow--fade.scroll-shadow--horizontal[data-left-scroll="true"] {
|
|
49
|
+
--scroll-linear-gradient:
|
|
50
|
+
270deg,
|
|
51
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
52
|
+
transparent;
|
|
53
|
+
|
|
54
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
55
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.scroll-shadow--fade.scroll-shadow--horizontal[data-right-scroll="true"] {
|
|
59
|
+
--scroll-linear-gradient:
|
|
60
|
+
90deg,
|
|
61
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
62
|
+
transparent;
|
|
63
|
+
|
|
64
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
65
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.scroll-shadow--fade.scroll-shadow--horizontal[data-left-right-scroll="true"] {
|
|
69
|
+
--scroll-linear-gradient:
|
|
70
|
+
to right,
|
|
71
|
+
#000,
|
|
72
|
+
#000,
|
|
73
|
+
transparent 0,
|
|
74
|
+
#000 var(--scroll-shadow-size),
|
|
75
|
+
#000 calc(100% - var(--scroll-shadow-size)),
|
|
76
|
+
transparent;
|
|
77
|
+
|
|
78
|
+
mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
79
|
+
-webkit-mask-image: linear-gradient(var(--scroll-linear-gradient));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.scroll-shadow--hide-scrollbar {
|
|
83
|
+
scrollbar-width: none;
|
|
84
|
+
-ms-overflow-style: none;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.scroll-shadow--hide-scrollbar::-webkit-scrollbar {
|
|
88
|
+
display: none;
|
|
89
|
+
width: 0;
|
|
90
|
+
height: 0;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import "./ScrollShadow.css";
|
|
2
|
+
import { type JSX } from "solid-js";
|
|
3
|
+
import type { IComponentBaseProps } from "../types";
|
|
4
|
+
export type ScrollShadowVisibility = "auto" | "both" | "top" | "bottom" | "left" | "right" | "none";
|
|
5
|
+
export type ScrollShadowOrientation = "vertical" | "horizontal";
|
|
6
|
+
export type ScrollShadowVariant = "fade";
|
|
7
|
+
export type ScrollShadowProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> & {
|
|
8
|
+
size?: number;
|
|
9
|
+
offset?: number;
|
|
10
|
+
visibility?: ScrollShadowVisibility;
|
|
11
|
+
isEnabled?: boolean;
|
|
12
|
+
orientation?: ScrollShadowOrientation;
|
|
13
|
+
variant?: ScrollShadowVariant;
|
|
14
|
+
hideScrollBar?: boolean;
|
|
15
|
+
onVisibilityChange?: (visibility: ScrollShadowVisibility) => void;
|
|
16
|
+
};
|
|
17
|
+
declare const ScrollShadow: (props: ScrollShadowProps) => JSX.Element;
|
|
18
|
+
export default ScrollShadow;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
|
+
import "./ScrollShadow.css";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__ from "./ScrollShadow.classes.js";
|
|
6
|
+
import * as __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__ from "./useScrollShadow.js";
|
|
7
|
+
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
|
|
8
|
+
const ScrollShadow = (props)=>{
|
|
9
|
+
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
10
|
+
"children",
|
|
11
|
+
"class",
|
|
12
|
+
"className",
|
|
13
|
+
"dataTheme",
|
|
14
|
+
"style",
|
|
15
|
+
"size",
|
|
16
|
+
"offset",
|
|
17
|
+
"visibility",
|
|
18
|
+
"isEnabled",
|
|
19
|
+
"orientation",
|
|
20
|
+
"variant",
|
|
21
|
+
"hideScrollBar",
|
|
22
|
+
"onVisibilityChange",
|
|
23
|
+
"ref"
|
|
24
|
+
]);
|
|
25
|
+
let containerRef;
|
|
26
|
+
const size = ()=>local.size ?? 40;
|
|
27
|
+
const offset = ()=>local.offset ?? 0;
|
|
28
|
+
const variant = ()=>local.variant ?? "fade";
|
|
29
|
+
const visibility = ()=>local.visibility ?? "auto";
|
|
30
|
+
const orientation = ()=>local.orientation ?? "vertical";
|
|
31
|
+
const isEnabled = ()=>local.isEnabled ?? true;
|
|
32
|
+
(0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.useScrollShadow)({
|
|
33
|
+
containerRef: ()=>containerRef,
|
|
34
|
+
orientation,
|
|
35
|
+
offset,
|
|
36
|
+
visibility,
|
|
37
|
+
isEnabled,
|
|
38
|
+
onVisibilityChange: ()=>local.onVisibilityChange
|
|
39
|
+
});
|
|
40
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
41
|
+
const el = containerRef;
|
|
42
|
+
if (!el) return;
|
|
43
|
+
if (!isEnabled()) return void (0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.clearScrollShadowDataAttributes)(el);
|
|
44
|
+
const currentVisibility = visibility();
|
|
45
|
+
if ("auto" === currentVisibility) return;
|
|
46
|
+
(0, __WEBPACK_EXTERNAL_MODULE__useScrollShadow_js_5837647e__.applyControlledScrollShadowVisibility)(el, currentVisibility, orientation());
|
|
47
|
+
});
|
|
48
|
+
const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.orientation[orientation()], __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.variant[variant()], local.hideScrollBar && __WEBPACK_EXTERNAL_MODULE__ScrollShadow_classes_js_12f8416d__.CLASSES.flag.hideScrollBar, local.class, local.className));
|
|
49
|
+
const style = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
|
|
50
|
+
if ("string" == typeof local.style) {
|
|
51
|
+
const trimmed = local.style.trim();
|
|
52
|
+
const suffix = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
|
|
53
|
+
return `${trimmed}${suffix} --scroll-shadow-size: ${size()}px;`;
|
|
54
|
+
}
|
|
55
|
+
return {
|
|
56
|
+
...local.style ?? {},
|
|
57
|
+
"--scroll-shadow-size": `${size()}px`
|
|
58
|
+
};
|
|
59
|
+
});
|
|
60
|
+
return (()=>{
|
|
61
|
+
var _el$ = _tmpl$();
|
|
62
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
|
|
63
|
+
containerRef = el;
|
|
64
|
+
if ("function" == typeof local.ref) local.ref(el);
|
|
65
|
+
}, _el$);
|
|
66
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
|
|
67
|
+
class: classes()
|
|
68
|
+
}), {
|
|
69
|
+
get ["data-theme"] () {
|
|
70
|
+
return local.dataTheme;
|
|
71
|
+
},
|
|
72
|
+
get ["data-orientation"] () {
|
|
73
|
+
return orientation();
|
|
74
|
+
},
|
|
75
|
+
get ["data-scroll-shadow-size"] () {
|
|
76
|
+
return size();
|
|
77
|
+
},
|
|
78
|
+
get style () {
|
|
79
|
+
return style();
|
|
80
|
+
}
|
|
81
|
+
}), false, true);
|
|
82
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
|
|
83
|
+
return _el$;
|
|
84
|
+
})();
|
|
85
|
+
};
|
|
86
|
+
const scroll_shadow_ScrollShadow = ScrollShadow;
|
|
87
|
+
export { scroll_shadow_ScrollShadow as default };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type Accessor } from "solid-js";
|
|
2
|
+
import type { ScrollShadowOrientation, ScrollShadowVisibility } from "./ScrollShadow";
|
|
3
|
+
export interface UseScrollShadowProps {
|
|
4
|
+
containerRef: Accessor<HTMLElement | undefined>;
|
|
5
|
+
orientation: Accessor<ScrollShadowOrientation>;
|
|
6
|
+
offset: Accessor<number>;
|
|
7
|
+
visibility: Accessor<ScrollShadowVisibility>;
|
|
8
|
+
isEnabled: Accessor<boolean>;
|
|
9
|
+
onVisibilityChange?: Accessor<((visibility: ScrollShadowVisibility) => void) | undefined>;
|
|
10
|
+
}
|
|
11
|
+
export declare const clearScrollShadowDataAttributes: (el: HTMLElement) => void;
|
|
12
|
+
export declare const applyControlledScrollShadowVisibility: (el: HTMLElement, visibility: ScrollShadowVisibility, orientation: ScrollShadowOrientation) => void;
|
|
13
|
+
export declare const useScrollShadow: (props: UseScrollShadowProps) => void;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
2
|
+
const clearScrollShadowDataAttributes = (el)=>{
|
|
3
|
+
delete el.dataset.topScroll;
|
|
4
|
+
delete el.dataset.bottomScroll;
|
|
5
|
+
delete el.dataset.topBottomScroll;
|
|
6
|
+
delete el.dataset.leftScroll;
|
|
7
|
+
delete el.dataset.rightScroll;
|
|
8
|
+
delete el.dataset.leftRightScroll;
|
|
9
|
+
};
|
|
10
|
+
const applyControlledScrollShadowVisibility = (el, visibility, orientation)=>{
|
|
11
|
+
clearScrollShadowDataAttributes(el);
|
|
12
|
+
if ("both" === visibility) {
|
|
13
|
+
if ("vertical" === orientation) el.dataset.topBottomScroll = "true";
|
|
14
|
+
else el.dataset.leftRightScroll = "true";
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if ("none" === visibility || "auto" === visibility) return;
|
|
18
|
+
if ("top" === visibility) el.dataset.topScroll = "true";
|
|
19
|
+
else if ("bottom" === visibility) el.dataset.bottomScroll = "true";
|
|
20
|
+
else if ("left" === visibility) el.dataset.leftScroll = "true";
|
|
21
|
+
else if ("right" === visibility) el.dataset.rightScroll = "true";
|
|
22
|
+
};
|
|
23
|
+
const resolveVisibilityFromOverflow = (orientation, hasScrollBefore, hasScrollAfter)=>{
|
|
24
|
+
if (hasScrollBefore && hasScrollAfter) return "both";
|
|
25
|
+
if (hasScrollBefore) return "vertical" === orientation ? "top" : "left";
|
|
26
|
+
if (hasScrollAfter) return "vertical" === orientation ? "bottom" : "right";
|
|
27
|
+
return "none";
|
|
28
|
+
};
|
|
29
|
+
const applyAutoVisibilityDataAttributes = (el, orientation, hasScrollBefore, hasScrollAfter)=>{
|
|
30
|
+
if ("vertical" === orientation) {
|
|
31
|
+
if (hasScrollBefore && hasScrollAfter) {
|
|
32
|
+
el.dataset.topBottomScroll = "true";
|
|
33
|
+
delete el.dataset.topScroll;
|
|
34
|
+
delete el.dataset.bottomScroll;
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
el.dataset.topScroll = String(hasScrollBefore);
|
|
38
|
+
el.dataset.bottomScroll = String(hasScrollAfter);
|
|
39
|
+
delete el.dataset.topBottomScroll;
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
if (hasScrollBefore && hasScrollAfter) {
|
|
43
|
+
el.dataset.leftRightScroll = "true";
|
|
44
|
+
delete el.dataset.leftScroll;
|
|
45
|
+
delete el.dataset.rightScroll;
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
el.dataset.leftScroll = String(hasScrollBefore);
|
|
49
|
+
el.dataset.rightScroll = String(hasScrollAfter);
|
|
50
|
+
delete el.dataset.leftRightScroll;
|
|
51
|
+
};
|
|
52
|
+
const useScrollShadow = (props)=>{
|
|
53
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
54
|
+
const el = props.containerRef();
|
|
55
|
+
const isEnabled = props.isEnabled();
|
|
56
|
+
const visibility = props.visibility();
|
|
57
|
+
const orientation = props.orientation();
|
|
58
|
+
const offset = props.offset();
|
|
59
|
+
const onVisibilityChange = props.onVisibilityChange?.();
|
|
60
|
+
if (!el) return;
|
|
61
|
+
if (!isEnabled) return void clearScrollShadowDataAttributes(el);
|
|
62
|
+
if ("auto" !== visibility) return;
|
|
63
|
+
let prevState = null;
|
|
64
|
+
let rafId = null;
|
|
65
|
+
const checkOverflow = ()=>{
|
|
66
|
+
const scrollStart = "vertical" === orientation ? el.scrollTop : el.scrollLeft;
|
|
67
|
+
const scrollSize = "vertical" === orientation ? el.scrollHeight : el.scrollWidth;
|
|
68
|
+
const clientSize = "vertical" === orientation ? el.clientHeight : el.clientWidth;
|
|
69
|
+
const hasScrollBefore = scrollStart > offset;
|
|
70
|
+
const hasScrollAfter = scrollStart + clientSize + offset < scrollSize;
|
|
71
|
+
if (prevState && prevState.hasScrollBefore === hasScrollBefore && prevState.hasScrollAfter === hasScrollAfter) return;
|
|
72
|
+
prevState = {
|
|
73
|
+
hasScrollBefore,
|
|
74
|
+
hasScrollAfter
|
|
75
|
+
};
|
|
76
|
+
if (null !== rafId) cancelAnimationFrame(rafId);
|
|
77
|
+
rafId = requestAnimationFrame(()=>{
|
|
78
|
+
rafId = null;
|
|
79
|
+
applyAutoVisibilityDataAttributes(el, orientation, hasScrollBefore, hasScrollAfter);
|
|
80
|
+
onVisibilityChange?.(resolveVisibilityFromOverflow(orientation, hasScrollBefore, hasScrollAfter));
|
|
81
|
+
});
|
|
82
|
+
};
|
|
83
|
+
checkOverflow();
|
|
84
|
+
el.addEventListener("scroll", checkOverflow, {
|
|
85
|
+
passive: true
|
|
86
|
+
});
|
|
87
|
+
const resizeObserver = "undefined" != typeof ResizeObserver ? new ResizeObserver(()=>checkOverflow()) : void 0;
|
|
88
|
+
resizeObserver?.observe(el);
|
|
89
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
|
|
90
|
+
el.removeEventListener("scroll", checkOverflow);
|
|
91
|
+
resizeObserver?.disconnect();
|
|
92
|
+
if (null !== rafId) cancelAnimationFrame(rafId);
|
|
93
|
+
prevState = null;
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
};
|
|
97
|
+
export { applyControlledScrollShadowVisibility, clearScrollShadowDataAttributes, useScrollShadow };
|
|
@@ -14,6 +14,12 @@
|
|
|
14
14
|
--switch-control-bg-pressed: var(--switch-control-bg-hover);
|
|
15
15
|
--switch-control-bg-checked: var(--color-accent);
|
|
16
16
|
--switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
|
|
17
|
+
--switch-control-border: color-mix(in oklab, var(--color-base-content) 24%, transparent);
|
|
18
|
+
--switch-control-border-checked: color-mix(
|
|
19
|
+
in oklab,
|
|
20
|
+
var(--switch-control-bg-checked) 74%,
|
|
21
|
+
var(--color-base-content)
|
|
22
|
+
);
|
|
17
23
|
}
|
|
18
24
|
|
|
19
25
|
.toggle__input {
|
|
@@ -37,9 +43,11 @@
|
|
|
37
43
|
border-radius: 9999px;
|
|
38
44
|
height: 1.25rem;
|
|
39
45
|
width: 2.5rem;
|
|
46
|
+
border: 1px solid var(--switch-control-border);
|
|
40
47
|
background-color: var(--switch-control-bg);
|
|
41
48
|
transition:
|
|
42
49
|
background-color 250ms ease,
|
|
50
|
+
border-color 250ms ease,
|
|
43
51
|
box-shadow 150ms ease;
|
|
44
52
|
}
|
|
45
53
|
|
|
@@ -109,6 +117,7 @@
|
|
|
109
117
|
|
|
110
118
|
.toggle[data-selected="true"] .toggle__control {
|
|
111
119
|
background-color: var(--switch-control-bg-checked);
|
|
120
|
+
border-color: var(--switch-control-border-checked);
|
|
112
121
|
}
|
|
113
122
|
|
|
114
123
|
.toggle[data-selected="true"] .toggle__thumb {
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.toolbar {
|
|
3
|
+
display: grid;
|
|
4
|
+
width: fit-content;
|
|
5
|
+
grid-auto-flow: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
gap: 0.5rem;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.toolbar--horizontal {
|
|
11
|
+
grid-auto-flow: column;
|
|
12
|
+
align-items: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.toolbar--vertical {
|
|
16
|
+
grid-auto-flow: row;
|
|
17
|
+
align-items: flex-start;
|
|
18
|
+
justify-items: flex-start;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.toolbar--attached {
|
|
22
|
+
border-radius: 9999px;
|
|
23
|
+
background-color: var(--color-surface, var(--color-base-100));
|
|
24
|
+
padding: 0.25rem;
|
|
25
|
+
box-shadow: var(--shadow-overlay, 0 12px 28px color-mix(in oklab, black 12%, transparent));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.toolbar [data-slot="separator"][data-orientation="vertical"] {
|
|
29
|
+
height: 50%;
|
|
30
|
+
align-self: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.toolbar [data-slot="separator"][data-orientation="horizontal"] {
|
|
34
|
+
width: 50%;
|
|
35
|
+
justify-self: center;
|
|
36
|
+
align-self: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.toolbar--horizontal > [data-slot="separator"] {
|
|
40
|
+
width: 1px;
|
|
41
|
+
min-height: 1rem;
|
|
42
|
+
height: 50%;
|
|
43
|
+
align-self: center;
|
|
44
|
+
justify-self: center;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.toolbar--vertical > [data-slot="separator"] {
|
|
48
|
+
width: 50%;
|
|
49
|
+
min-height: 1px;
|
|
50
|
+
height: 1px;
|
|
51
|
+
align-self: center;
|
|
52
|
+
justify-self: center;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import "./Toolbar.css";
|
|
2
|
+
import { type Component, type JSX } from "solid-js";
|
|
3
|
+
import type { IComponentBaseProps } from "../types";
|
|
4
|
+
export type ToolbarOrientation = "horizontal" | "vertical";
|
|
5
|
+
export type ToolbarRootProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
orientation?: ToolbarOrientation;
|
|
7
|
+
isAttached?: boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const ToolbarRoot: Component<ToolbarRootProps>;
|
|
10
|
+
declare const Toolbar: Component<ToolbarRootProps> & {
|
|
11
|
+
Root: Component<ToolbarRootProps>;
|
|
12
|
+
};
|
|
13
|
+
export default Toolbar;
|
|
14
|
+
export { Toolbar, ToolbarRoot };
|
|
15
|
+
export type { ToolbarRootProps as ToolbarProps };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
|
+
import "./Toolbar.css";
|
|
3
|
+
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
4
|
+
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
|
+
import * as __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__ from "./Toolbar.classes.js";
|
|
6
|
+
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
|
|
7
|
+
const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
|
|
8
|
+
const isFocusableElement = (element)=>{
|
|
9
|
+
if ("true" === element.getAttribute("aria-disabled")) return false;
|
|
10
|
+
return !element.hasAttribute("disabled");
|
|
11
|
+
};
|
|
12
|
+
const isTypingContext = (target)=>{
|
|
13
|
+
if (!(target instanceof HTMLElement)) return false;
|
|
14
|
+
const tag = target.tagName.toLowerCase();
|
|
15
|
+
if ("input" === tag || "textarea" === tag || "select" === tag) return true;
|
|
16
|
+
return "true" === target.getAttribute("contenteditable");
|
|
17
|
+
};
|
|
18
|
+
const getFocusableElements = (root)=>Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusableElement);
|
|
19
|
+
const ToolbarRoot = (props)=>{
|
|
20
|
+
const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
|
|
21
|
+
"children",
|
|
22
|
+
"class",
|
|
23
|
+
"className",
|
|
24
|
+
"dataTheme",
|
|
25
|
+
"style",
|
|
26
|
+
"orientation",
|
|
27
|
+
"isAttached",
|
|
28
|
+
"onKeyDown",
|
|
29
|
+
"role",
|
|
30
|
+
"ref"
|
|
31
|
+
]);
|
|
32
|
+
let rootRef;
|
|
33
|
+
const orientation = ()=>local.orientation ?? "horizontal";
|
|
34
|
+
const handleKeyDown = (event)=>{
|
|
35
|
+
if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
|
|
36
|
+
if (event.defaultPrevented) return;
|
|
37
|
+
if (isTypingContext(event.target)) return;
|
|
38
|
+
const currentRoot = rootRef;
|
|
39
|
+
if (!currentRoot) return;
|
|
40
|
+
const isVertical = "vertical" === orientation();
|
|
41
|
+
const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
|
|
42
|
+
const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
|
|
43
|
+
const isMoveKey = event.key === nextKey || event.key === prevKey;
|
|
44
|
+
const isHomeEndKey = "Home" === event.key || "End" === event.key;
|
|
45
|
+
if (!isMoveKey && !isHomeEndKey) return;
|
|
46
|
+
const focusable = getFocusableElements(currentRoot);
|
|
47
|
+
if (0 === focusable.length) return;
|
|
48
|
+
const activeElement = document.activeElement;
|
|
49
|
+
const currentIndex = activeElement ? focusable.indexOf(activeElement) : -1;
|
|
50
|
+
let nextIndex = currentIndex;
|
|
51
|
+
if ("Home" === event.key) nextIndex = 0;
|
|
52
|
+
else if ("End" === event.key) nextIndex = focusable.length - 1;
|
|
53
|
+
else if (-1 === currentIndex) nextIndex = event.key === prevKey ? focusable.length - 1 : 0;
|
|
54
|
+
else {
|
|
55
|
+
const step = event.key === nextKey ? 1 : -1;
|
|
56
|
+
nextIndex = (currentIndex + step + focusable.length) % focusable.length;
|
|
57
|
+
}
|
|
58
|
+
event.preventDefault();
|
|
59
|
+
focusable[nextIndex]?.focus();
|
|
60
|
+
};
|
|
61
|
+
return (()=>{
|
|
62
|
+
var _el$ = _tmpl$();
|
|
63
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
|
|
64
|
+
rootRef = el;
|
|
65
|
+
if ("function" == typeof local.ref) local.ref(el);
|
|
66
|
+
}, _el$);
|
|
67
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
|
|
68
|
+
get role () {
|
|
69
|
+
return local.role ?? "toolbar";
|
|
70
|
+
},
|
|
71
|
+
get ["aria-orientation"] () {
|
|
72
|
+
return orientation();
|
|
73
|
+
},
|
|
74
|
+
"data-slot": "toolbar",
|
|
75
|
+
get ["data-orientation"] () {
|
|
76
|
+
return orientation();
|
|
77
|
+
},
|
|
78
|
+
get ["data-theme"] () {
|
|
79
|
+
return local.dataTheme;
|
|
80
|
+
},
|
|
81
|
+
get style () {
|
|
82
|
+
return local.style;
|
|
83
|
+
},
|
|
84
|
+
onKeyDown: handleKeyDown
|
|
85
|
+
}, ()=>({
|
|
86
|
+
class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.orientation[orientation()], local.isAttached && __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.flag.attached, local.class, local.className)
|
|
87
|
+
})), false, true);
|
|
88
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
|
|
89
|
+
return _el$;
|
|
90
|
+
})();
|
|
91
|
+
};
|
|
92
|
+
const Toolbar = Object.assign(ToolbarRoot, {
|
|
93
|
+
Root: ToolbarRoot
|
|
94
|
+
});
|
|
95
|
+
const toolbar_Toolbar = Toolbar;
|
|
96
|
+
export { Toolbar, ToolbarRoot, toolbar_Toolbar as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default, Toolbar, ToolbarRoot, type ToolbarProps, type ToolbarRootProps, type ToolbarOrientation, } from "./Toolbar";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import * as __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__ from "./Toolbar.js";
|
|
2
|
+
var __webpack_exports__Toolbar = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__.Toolbar;
|
|
3
|
+
var __webpack_exports__ToolbarRoot = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__.ToolbarRoot;
|
|
4
|
+
var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__["default"];
|
|
5
|
+
export { __webpack_exports__Toolbar as Toolbar, __webpack_exports__ToolbarRoot as ToolbarRoot, __webpack_exports__default as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -43,9 +43,14 @@ export { default as DateField, DateFieldRoot, DateFieldGroup, DateFieldInput, Da
|
|
|
43
43
|
export type { DateFieldProps, DateFieldRootProps, DateFieldGroupProps, DateFieldInputProps, DateFieldInputContainerProps, DateFieldSegmentProps, DateFieldPrefixProps, DateFieldSuffixProps, DateFieldVariant, DateFieldRenderProps, DateFieldSegmentValue, } from "./components/date-field";
|
|
44
44
|
export { default as DatePicker, type DatePickerProps, } from "./components/date-picker";
|
|
45
45
|
export { default as DateRangePicker, type DateRangePickerProps, type DateRangeValue, } from "./components/date-range-picker";
|
|
46
|
+
export { default as RangeCalendar, type RangeCalendarProps, type RangeCalendarValue, } from "./components/range-calendar";
|
|
46
47
|
export { default as Drawer, DrawerRoot, DrawerTrigger, DrawerBackdrop, DrawerContent, DrawerDialog, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, DrawerHandle, DrawerCloseTrigger, DrawerClose, } from "./components/drawer";
|
|
47
48
|
export type { DrawerPlacement, DrawerBackdropVariant, DrawerRootProps, DrawerTriggerProps, DrawerBackdropProps, DrawerContentProps, DrawerDialogProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, DrawerHandleProps, DrawerCloseTriggerProps, } from "./components/drawer";
|
|
48
49
|
export { default as Dropdown } from "./components/dropdown";
|
|
50
|
+
export { default as Disclosure } from "./components/disclosure";
|
|
51
|
+
export type { DisclosureProps, DisclosureRootProps, DisclosureHeadingProps, DisclosureTriggerProps, DisclosureContentProps, DisclosureBodyProps, DisclosureIndicatorProps, } from "./components/disclosure";
|
|
52
|
+
export { default as DisclosureGroup, useDisclosureGroupNavigation, } from "./components/disclosure-group";
|
|
53
|
+
export type { DisclosureGroupProps, DisclosureGroupRootProps, UseDisclosureGroupNavigationProps, UseDisclosureGroupNavigationReturn, } from "./components/disclosure-group";
|
|
49
54
|
export { EmptyState, type EmptyStateProps } from "./components/empty-state";
|
|
50
55
|
export { default as ErrorMessage, ErrorMessageRoot, } from "./components/error-message";
|
|
51
56
|
export type { ErrorMessageProps, ErrorMessageRootProps, } from "./components/error-message";
|
|
@@ -97,6 +102,8 @@ export { default as Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, M
|
|
|
97
102
|
export type { MenuProps, MenuRootProps, MenuSelectionMode, MenuItemProps, MenuItemRootProps, MenuItemIndicatorProps, MenuItemSubmenuIndicatorProps, MenuItemRenderProps, MenuItemVariant, MenuSectionProps, MenuSectionRootProps, } from "./components/menu";
|
|
98
103
|
export { default as Modal, ModalRoot, ModalTrigger, ModalBackdrop, ModalContent, ModalHeader, ModalHeading, ModalIcon, ModalBody, ModalFooter, ModalCloseTrigger, } from "./components/modal";
|
|
99
104
|
export type { ModalProps, DialogProps, ModalPlacement, ModalSize, ModalBackdropVariant, ModalScrollBehavior, ModalRootProps, ModalTriggerProps, ModalBackdropProps, ModalContentProps, ModalHeaderProps, ModalHeadingProps, ModalIconProps, ModalBodyProps, ModalFooterProps, ModalCloseTriggerProps, } from "./components/modal";
|
|
105
|
+
export { default as Meter, MeterRoot, MeterOutput, MeterTrack, MeterFill, } from "./components/meter";
|
|
106
|
+
export type { MeterProps, MeterRootProps, MeterOutputProps, MeterTrackProps, MeterFillProps, MeterSize, MeterColor, MeterRenderState, } from "./components/meter";
|
|
100
107
|
export { default as Navbar } from "./components/navbar";
|
|
101
108
|
export type { NavbarProps } from "./components/navbar";
|
|
102
109
|
export type { NavbarStackProps } from "./components/navbar/NavbarStack";
|
|
@@ -111,11 +118,15 @@ export { default as ProgressBar } from "./components/progress-bar";
|
|
|
111
118
|
export type { ProgressBarProps, ProgressBarSize, ProgressBarColor, } from "./components/progress-bar";
|
|
112
119
|
export { default as ProgressCircle } from "./components/progress-circle";
|
|
113
120
|
export type { ProgressCircleProps, ProgressCircleSize, ProgressCircleColor, } from "./components/progress-circle";
|
|
121
|
+
export { default as Popover } from "./components/popover";
|
|
122
|
+
export type { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverDialogProps, PopoverArrowProps, PopoverHeadingProps, } from "./components/popover";
|
|
114
123
|
export { default as Radio } from "./components/radio";
|
|
115
124
|
export { RadioGroup, type RadioGroupProps, type RadioGroupOrientation, type RadioGroupVariant, } from "./components/radio-group";
|
|
116
125
|
export { default as Select } from "./components/select";
|
|
117
126
|
export { default as SearchField, SearchFieldRoot, SearchFieldGroup, SearchFieldInput, SearchFieldSearchIcon, SearchFieldClearButton, } from "./components/search-field";
|
|
118
127
|
export type { SearchFieldProps, SearchFieldRootProps, SearchFieldGroupProps, SearchFieldInputProps, SearchFieldSearchIconProps, SearchFieldClearButtonProps, SearchFieldVariant, SearchFieldRenderProps, } from "./components/search-field";
|
|
128
|
+
export { default as ScrollShadow } from "./components/scroll-shadow";
|
|
129
|
+
export type { ScrollShadowProps, ScrollShadowVisibility, ScrollShadowOrientation, ScrollShadowVariant, } from "./components/scroll-shadow";
|
|
119
130
|
export { default as Separator } from "./components/separator";
|
|
120
131
|
export type { SeparatorProps, SeparatorOrientation, SeparatorVariant, } from "./components/separator";
|
|
121
132
|
export { default as Slider } from "./components/slider";
|
|
@@ -144,6 +155,8 @@ export { default as TimeField, TimeFieldRoot, TimeFieldGroup, TimeFieldInput, Ti
|
|
|
144
155
|
export type { TimeFieldProps, TimeFieldRootProps, TimeFieldGroupProps, TimeFieldInputProps, TimeFieldInputContainerProps, TimeFieldSegmentProps, TimeFieldPrefixProps, TimeFieldSuffixProps, TimeFieldVariant, TimeFieldRenderProps, TimeFieldSegmentValue, } from "./components/time-field";
|
|
145
156
|
export { SizePicker, createSizeStore, getDefaultSizeStore, } from "./components/size-picker";
|
|
146
157
|
export type { SizePickerProps, SizeStore, SizePreset, } from "./components/size-picker";
|
|
158
|
+
export { default as Toolbar, ToolbarRoot, } from "./components/toolbar";
|
|
159
|
+
export type { ToolbarProps, ToolbarRootProps, ToolbarOrientation, } from "./components/toolbar";
|
|
147
160
|
export { ThemeColorPicker, createHueShiftStore, getDefaultHueShiftStore, resetHueShift, } from "./components/theme-color-picker";
|
|
148
161
|
export type { ThemeColorPickerProps, HueShiftStore, } from "./components/theme-color-picker";
|
|
149
162
|
export { default as Toast, ToastRoot, ToastProvider, ToastContent, ToastIndicator, ToastTitle, ToastDescription, ToastActionButton, ToastCloseButton, ToastQueue, toast, toastQueue, DEFAULT_GAP as DEFAULT_TOAST_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR as DEFAULT_TOAST_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, } from "./components/toast";
|