@ensolid/radix 0.0.0
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/Accordion/Accordion.d.ts +79 -0
- package/dist/components/Accordion/Accordion.d.ts.map +1 -0
- package/dist/components/Accordion/Accordion.js +193 -0
- package/dist/components/Accordion/Accordion.js.map +1 -0
- package/dist/components/Accordion/index.d.ts +2 -0
- package/dist/components/Accordion/index.d.ts.map +1 -0
- package/dist/components/AlertDialog/AlertDialog.d.ts +89 -0
- package/dist/components/AlertDialog/AlertDialog.d.ts.map +1 -0
- package/dist/components/AlertDialog/AlertDialog.js +235 -0
- package/dist/components/AlertDialog/AlertDialog.js.map +1 -0
- package/dist/components/AlertDialog/index.d.ts +2 -0
- package/dist/components/AlertDialog/index.d.ts.map +1 -0
- package/dist/components/AspectRatio/AspectRatio.d.ts +14 -0
- package/dist/components/AspectRatio/AspectRatio.d.ts.map +1 -0
- package/dist/components/AspectRatio/AspectRatio.js +25 -0
- package/dist/components/AspectRatio/AspectRatio.js.map +1 -0
- package/dist/components/AspectRatio/index.d.ts +2 -0
- package/dist/components/AspectRatio/index.d.ts.map +1 -0
- package/dist/components/Avatar/Avatar.d.ts +41 -0
- package/dist/components/Avatar/Avatar.d.ts.map +1 -0
- package/dist/components/Avatar/Avatar.js +144 -0
- package/dist/components/Avatar/Avatar.js.map +1 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/Avatar/index.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.d.ts +27 -0
- package/dist/components/Checkbox/Checkbox.d.ts.map +1 -0
- package/dist/components/Checkbox/Checkbox.js +49 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Checkbox/index.d.ts.map +1 -0
- package/dist/components/Collapsible/Collapsible.d.ts +54 -0
- package/dist/components/Collapsible/Collapsible.d.ts.map +1 -0
- package/dist/components/Collapsible/Collapsible.js +110 -0
- package/dist/components/Collapsible/Collapsible.js.map +1 -0
- package/dist/components/Collapsible/index.d.ts +2 -0
- package/dist/components/Collapsible/index.d.ts.map +1 -0
- package/dist/components/ContextMenu/ContextMenu.d.ts +89 -0
- package/dist/components/ContextMenu/ContextMenu.d.ts.map +1 -0
- package/dist/components/ContextMenu/ContextMenu.js +263 -0
- package/dist/components/ContextMenu/ContextMenu.js.map +1 -0
- package/dist/components/ContextMenu/index.d.ts +2 -0
- package/dist/components/ContextMenu/index.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.d.ts +87 -0
- package/dist/components/Dialog/Dialog.d.ts.map +1 -0
- package/dist/components/Dialog/Dialog.js +218 -0
- package/dist/components/Dialog/Dialog.js.map +1 -0
- package/dist/components/Dialog/index.d.ts +2 -0
- package/dist/components/Dialog/index.d.ts.map +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +81 -0
- package/dist/components/DropdownMenu/DropdownMenu.d.ts.map +1 -0
- package/dist/components/DropdownMenu/DropdownMenu.js +244 -0
- package/dist/components/DropdownMenu/DropdownMenu.js.map +1 -0
- package/dist/components/DropdownMenu/index.d.ts +2 -0
- package/dist/components/DropdownMenu/index.d.ts.map +1 -0
- package/dist/components/HoverCard/HoverCard.d.ts +63 -0
- package/dist/components/HoverCard/HoverCard.d.ts.map +1 -0
- package/dist/components/HoverCard/HoverCard.js +199 -0
- package/dist/components/HoverCard/HoverCard.js.map +1 -0
- package/dist/components/HoverCard/index.d.ts +2 -0
- package/dist/components/HoverCard/index.d.ts.map +1 -0
- package/dist/components/Label/Label.d.ts +14 -0
- package/dist/components/Label/Label.d.ts.map +1 -0
- package/dist/components/Label/Label.js +23 -0
- package/dist/components/Label/Label.js.map +1 -0
- package/dist/components/Label/index.d.ts +2 -0
- package/dist/components/Label/index.d.ts.map +1 -0
- package/dist/components/Menubar/Menubar.d.ts +85 -0
- package/dist/components/Menubar/Menubar.d.ts.map +1 -0
- package/dist/components/Menubar/Menubar.js +299 -0
- package/dist/components/Menubar/Menubar.js.map +1 -0
- package/dist/components/Menubar/index.d.ts +2 -0
- package/dist/components/Menubar/index.d.ts.map +1 -0
- package/dist/components/NavigationMenu/NavigationMenu.d.ts +105 -0
- package/dist/components/NavigationMenu/NavigationMenu.d.ts.map +1 -0
- package/dist/components/NavigationMenu/NavigationMenu.js +320 -0
- package/dist/components/NavigationMenu/NavigationMenu.js.map +1 -0
- package/dist/components/NavigationMenu/index.d.ts +2 -0
- package/dist/components/NavigationMenu/index.d.ts.map +1 -0
- package/dist/components/Popover/Popover.d.ts +52 -0
- package/dist/components/Popover/Popover.d.ts.map +1 -0
- package/dist/components/Popover/Popover.js +176 -0
- package/dist/components/Popover/Popover.js.map +1 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Popover/index.d.ts.map +1 -0
- package/dist/components/Progress/Progress.d.ts +19 -0
- package/dist/components/Progress/Progress.d.ts.map +1 -0
- package/dist/components/Progress/Progress.js +44 -0
- package/dist/components/Progress/Progress.js.map +1 -0
- package/dist/components/Progress/index.d.ts +2 -0
- package/dist/components/Progress/index.d.ts.map +1 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts +54 -0
- package/dist/components/RadioGroup/RadioGroup.d.ts.map +1 -0
- package/dist/components/RadioGroup/RadioGroup.js +100 -0
- package/dist/components/RadioGroup/RadioGroup.js.map +1 -0
- package/dist/components/RadioGroup/index.d.ts +2 -0
- package/dist/components/RadioGroup/index.d.ts.map +1 -0
- package/dist/components/ScrollArea/ScrollArea.d.ts +58 -0
- package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -0
- package/dist/components/ScrollArea/ScrollArea.js +91 -0
- package/dist/components/ScrollArea/ScrollArea.js.map +1 -0
- package/dist/components/ScrollArea/index.d.ts +2 -0
- package/dist/components/ScrollArea/index.d.ts.map +1 -0
- package/dist/components/Select/Select.d.ts +80 -0
- package/dist/components/Select/Select.d.ts.map +1 -0
- package/dist/components/Select/Select.js +240 -0
- package/dist/components/Select/Select.js.map +1 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Select/index.d.ts.map +1 -0
- package/dist/components/Separator/Separator.d.ts +15 -0
- package/dist/components/Separator/Separator.d.ts.map +1 -0
- package/dist/components/Separator/Separator.js +30 -0
- package/dist/components/Separator/Separator.js.map +1 -0
- package/dist/components/Separator/index.d.ts +2 -0
- package/dist/components/Separator/index.d.ts.map +1 -0
- package/dist/components/Slider/Slider.d.ts +37 -0
- package/dist/components/Slider/Slider.d.ts.map +1 -0
- package/dist/components/Slider/Slider.js +63 -0
- package/dist/components/Slider/Slider.js.map +1 -0
- package/dist/components/Slider/index.d.ts +2 -0
- package/dist/components/Slider/index.d.ts.map +1 -0
- package/dist/components/Switch/Switch.d.ts +27 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -0
- package/dist/components/Switch/Switch.js +50 -0
- package/dist/components/Switch/Switch.js.map +1 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Switch/index.d.ts.map +1 -0
- package/dist/components/Tabs/Tabs.d.ts +72 -0
- package/dist/components/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/Tabs/Tabs.js +150 -0
- package/dist/components/Tabs/Tabs.js.map +1 -0
- package/dist/components/Tabs/index.d.ts +2 -0
- package/dist/components/Tabs/index.d.ts.map +1 -0
- package/dist/components/Toggle/Toggle.d.ts +22 -0
- package/dist/components/Toggle/Toggle.d.ts.map +1 -0
- package/dist/components/Toggle/Toggle.js +51 -0
- package/dist/components/Toggle/Toggle.js.map +1 -0
- package/dist/components/Toggle/index.d.ts +2 -0
- package/dist/components/Toggle/index.d.ts.map +1 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts +67 -0
- package/dist/components/ToggleGroup/ToggleGroup.d.ts.map +1 -0
- package/dist/components/ToggleGroup/ToggleGroup.js +119 -0
- package/dist/components/ToggleGroup/ToggleGroup.js.map +1 -0
- package/dist/components/ToggleGroup/index.d.ts +2 -0
- package/dist/components/ToggleGroup/index.d.ts.map +1 -0
- package/dist/components/Toolbar/Toolbar.d.ts +82 -0
- package/dist/components/Toolbar/Toolbar.d.ts.map +1 -0
- package/dist/components/Toolbar/Toolbar.js +110 -0
- package/dist/components/Toolbar/Toolbar.js.map +1 -0
- package/dist/components/Toolbar/index.d.ts +2 -0
- package/dist/components/Toolbar/index.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.d.ts +56 -0
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -0
- package/dist/components/Tooltip/Tooltip.js +155 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -0
- package/dist/components/Tooltip/index.d.ts +2 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.d.ts +9 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.js +23 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.js.map +1 -0
- package/dist/components/VisuallyHidden/index.d.ts +2 -0
- package/dist/components/VisuallyHidden/index.d.ts.map +1 -0
- package/dist/components/index.d.ts +28 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +140 -0
- package/dist/index.js.map +1 -0
- package/package.json +97 -0
|
@@ -0,0 +1,320 @@
|
|
|
1
|
+
import { delegateEvents, isServer, createComponent, template, spread, mergeProps, insert, setAttribute, Portal, use } from "solid-js/web";
|
|
2
|
+
import { createContext, splitProps, createSignal, createEffect, onCleanup, onMount, Show, useContext } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ template(`<nav role=navigation>`), _tmpl$2 = /* @__PURE__ */ template(`<ul role=list>`), _tmpl$3 = /* @__PURE__ */ template(`<li>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$5 = /* @__PURE__ */ template(`<div role=menu style=top:0px;left:0px>`), _tmpl$6 = /* @__PURE__ */ template(`<a>`), _tmpl$7 = /* @__PURE__ */ template(`<div>`);
|
|
4
|
+
const NavigationMenuContext = createContext();
|
|
5
|
+
const useNavigationMenuContext = () => {
|
|
6
|
+
const context = useContext(NavigationMenuContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("NavigationMenu components must be used within NavigationMenu");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
const NavigationMenuBase = (props) => {
|
|
13
|
+
const [local, others] = splitProps(props, ["value", "defaultValue", "onValueChange", "orientation", "class", "children"]);
|
|
14
|
+
const [internalValue, setInternalValue] = createSignal(local.value ?? local.defaultValue);
|
|
15
|
+
const [triggerRefs, setTriggerRefs] = createSignal(/* @__PURE__ */ new Map());
|
|
16
|
+
const contentElements = /* @__PURE__ */ new Map();
|
|
17
|
+
const isControlled = () => local.value !== void 0;
|
|
18
|
+
const value = () => isControlled() ? local.value : internalValue();
|
|
19
|
+
const handleValueChange = (newValue) => {
|
|
20
|
+
if (!isControlled()) {
|
|
21
|
+
setInternalValue(newValue);
|
|
22
|
+
}
|
|
23
|
+
local.onValueChange?.(newValue);
|
|
24
|
+
};
|
|
25
|
+
const setTriggerRef = (itemValue, ref) => {
|
|
26
|
+
const refs = new Map(triggerRefs());
|
|
27
|
+
if (ref) {
|
|
28
|
+
refs.set(itemValue, ref);
|
|
29
|
+
} else {
|
|
30
|
+
refs.delete(itemValue);
|
|
31
|
+
}
|
|
32
|
+
setTriggerRefs(refs);
|
|
33
|
+
};
|
|
34
|
+
const setContentElement = (itemValue, el) => {
|
|
35
|
+
if (el) {
|
|
36
|
+
contentElements.set(itemValue, el);
|
|
37
|
+
} else {
|
|
38
|
+
contentElements.delete(itemValue);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const handleClickOutside = (e) => {
|
|
42
|
+
const currentValue = value();
|
|
43
|
+
if (currentValue && !isServer) {
|
|
44
|
+
const target = e.target;
|
|
45
|
+
const trigger = triggerRefs().get(currentValue);
|
|
46
|
+
const content = contentElements.get(currentValue);
|
|
47
|
+
if (trigger && content) {
|
|
48
|
+
if (!trigger.contains(target) && !content.contains(target)) {
|
|
49
|
+
handleValueChange(void 0);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const handleKeyDown = (e) => {
|
|
55
|
+
if (e.key === "Escape" && value()) {
|
|
56
|
+
handleValueChange(void 0);
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
createEffect(() => {
|
|
60
|
+
if (!isServer) {
|
|
61
|
+
if (value()) {
|
|
62
|
+
setTimeout(() => {
|
|
63
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
64
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
65
|
+
}, 0);
|
|
66
|
+
} else {
|
|
67
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
68
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
onCleanup(() => {
|
|
73
|
+
if (!isServer) {
|
|
74
|
+
document.removeEventListener("keydown", handleKeyDown);
|
|
75
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
const contextValue = {
|
|
79
|
+
value,
|
|
80
|
+
setValue: handleValueChange,
|
|
81
|
+
triggerRefs,
|
|
82
|
+
setTriggerRef,
|
|
83
|
+
setContentElement
|
|
84
|
+
};
|
|
85
|
+
return createComponent(NavigationMenuContext.Provider, {
|
|
86
|
+
value: contextValue,
|
|
87
|
+
get children() {
|
|
88
|
+
var _el$ = _tmpl$();
|
|
89
|
+
spread(_el$, mergeProps({
|
|
90
|
+
get ["class"]() {
|
|
91
|
+
return local.class;
|
|
92
|
+
},
|
|
93
|
+
get ["aria-orientation"]() {
|
|
94
|
+
return local.orientation ?? "horizontal";
|
|
95
|
+
}
|
|
96
|
+
}, others), false, true);
|
|
97
|
+
insert(_el$, () => local.children);
|
|
98
|
+
return _el$;
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
const NavigationMenu = Object.assign(NavigationMenuBase, {
|
|
103
|
+
List: null,
|
|
104
|
+
Item: null,
|
|
105
|
+
Trigger: null,
|
|
106
|
+
Content: null,
|
|
107
|
+
Link: null,
|
|
108
|
+
Indicator: null,
|
|
109
|
+
Viewport: null
|
|
110
|
+
});
|
|
111
|
+
const NavigationMenuList = (props) => {
|
|
112
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
113
|
+
return (() => {
|
|
114
|
+
var _el$2 = _tmpl$2();
|
|
115
|
+
spread(_el$2, mergeProps({
|
|
116
|
+
get ["class"]() {
|
|
117
|
+
return local.class;
|
|
118
|
+
}
|
|
119
|
+
}, others), false, true);
|
|
120
|
+
insert(_el$2, () => local.children);
|
|
121
|
+
return _el$2;
|
|
122
|
+
})();
|
|
123
|
+
};
|
|
124
|
+
const NavigationMenuItem = (props) => {
|
|
125
|
+
const [local, others] = splitProps(props, ["value", "class", "children"]);
|
|
126
|
+
return (() => {
|
|
127
|
+
var _el$3 = _tmpl$3();
|
|
128
|
+
spread(_el$3, mergeProps({
|
|
129
|
+
get ["class"]() {
|
|
130
|
+
return local.class;
|
|
131
|
+
},
|
|
132
|
+
get ["data-value"]() {
|
|
133
|
+
return local.value;
|
|
134
|
+
}
|
|
135
|
+
}, others), false, true);
|
|
136
|
+
insert(_el$3, () => local.children);
|
|
137
|
+
return _el$3;
|
|
138
|
+
})();
|
|
139
|
+
};
|
|
140
|
+
const NavigationMenuTrigger = (props) => {
|
|
141
|
+
const [local, others] = splitProps(props, ["children", "asChild", "class", "onClick"]);
|
|
142
|
+
const context = useNavigationMenuContext();
|
|
143
|
+
let triggerElement;
|
|
144
|
+
let itemValue;
|
|
145
|
+
onMount(() => {
|
|
146
|
+
if (triggerElement) {
|
|
147
|
+
const parent = triggerElement.closest("[data-value]");
|
|
148
|
+
if (parent) {
|
|
149
|
+
itemValue = parent.getAttribute("data-value") || void 0;
|
|
150
|
+
if (itemValue) {
|
|
151
|
+
context.setTriggerRef(itemValue, triggerElement);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
const isOpen = () => context.value() === itemValue;
|
|
157
|
+
const handleClick = (e) => {
|
|
158
|
+
if (typeof local.onClick === "function") {
|
|
159
|
+
local.onClick(e);
|
|
160
|
+
}
|
|
161
|
+
if (itemValue) {
|
|
162
|
+
context.setValue(isOpen() ? void 0 : itemValue);
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
return (() => {
|
|
166
|
+
var _el$4 = _tmpl$4();
|
|
167
|
+
_el$4.$$click = handleClick;
|
|
168
|
+
var _ref$ = triggerElement;
|
|
169
|
+
typeof _ref$ === "function" ? use(_ref$, _el$4) : triggerElement = _el$4;
|
|
170
|
+
setAttribute(_el$4, "aria-controls", itemValue ? `navigation-menu-content-${itemValue}` : void 0);
|
|
171
|
+
spread(_el$4, mergeProps({
|
|
172
|
+
get ["class"]() {
|
|
173
|
+
return local.class;
|
|
174
|
+
},
|
|
175
|
+
get ["aria-expanded"]() {
|
|
176
|
+
return isOpen();
|
|
177
|
+
},
|
|
178
|
+
get ["data-state"]() {
|
|
179
|
+
return isOpen() ? "open" : "closed";
|
|
180
|
+
}
|
|
181
|
+
}, others), false, true);
|
|
182
|
+
insert(_el$4, () => local.children);
|
|
183
|
+
return _el$4;
|
|
184
|
+
})();
|
|
185
|
+
};
|
|
186
|
+
const NavigationMenuContent = (props) => {
|
|
187
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
188
|
+
const context = useNavigationMenuContext();
|
|
189
|
+
let contentElement;
|
|
190
|
+
let itemValue;
|
|
191
|
+
onMount(() => {
|
|
192
|
+
if (contentElement) {
|
|
193
|
+
const parent = contentElement.closest("[data-value]");
|
|
194
|
+
if (parent) {
|
|
195
|
+
itemValue = parent.getAttribute("data-value") || void 0;
|
|
196
|
+
if (itemValue) {
|
|
197
|
+
context.setContentElement(itemValue, contentElement);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
});
|
|
202
|
+
const isOpen = () => itemValue ? context.value() === itemValue : false;
|
|
203
|
+
const updatePosition = () => {
|
|
204
|
+
if (!isServer && contentElement && itemValue) {
|
|
205
|
+
const trigger = context.triggerRefs().get(itemValue);
|
|
206
|
+
if (trigger) {
|
|
207
|
+
const rect = trigger.getBoundingClientRect();
|
|
208
|
+
const contentRect = contentElement.getBoundingClientRect();
|
|
209
|
+
const top = rect.bottom + 8;
|
|
210
|
+
const left = rect.left;
|
|
211
|
+
const viewportWidth = window.innerWidth;
|
|
212
|
+
const viewportHeight = window.innerHeight;
|
|
213
|
+
let finalTop = top;
|
|
214
|
+
let finalLeft = left;
|
|
215
|
+
if (left + contentRect.width > viewportWidth) {
|
|
216
|
+
finalLeft = viewportWidth - contentRect.width - 16;
|
|
217
|
+
}
|
|
218
|
+
if (top + contentRect.height > viewportHeight) {
|
|
219
|
+
finalTop = rect.top - contentRect.height - 8;
|
|
220
|
+
}
|
|
221
|
+
contentElement.style.top = `${finalTop}px`;
|
|
222
|
+
contentElement.style.left = `${finalLeft}px`;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
};
|
|
226
|
+
createEffect(() => {
|
|
227
|
+
if (isOpen() && !isServer) {
|
|
228
|
+
requestAnimationFrame(() => {
|
|
229
|
+
updatePosition();
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
return createComponent(Show, {
|
|
234
|
+
get when() {
|
|
235
|
+
return isOpen();
|
|
236
|
+
},
|
|
237
|
+
get children() {
|
|
238
|
+
return createComponent(Portal, {
|
|
239
|
+
get mount() {
|
|
240
|
+
return !isServer ? document.body : void 0;
|
|
241
|
+
},
|
|
242
|
+
get children() {
|
|
243
|
+
var _el$5 = _tmpl$5();
|
|
244
|
+
var _ref$2 = contentElement;
|
|
245
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$5) : contentElement = _el$5;
|
|
246
|
+
setAttribute(_el$5, "id", itemValue ? `navigation-menu-content-${itemValue}` : void 0);
|
|
247
|
+
spread(_el$5, mergeProps({
|
|
248
|
+
get ["class"]() {
|
|
249
|
+
return `fixed z-50 ${local.class || ""}`;
|
|
250
|
+
},
|
|
251
|
+
get ["data-state"]() {
|
|
252
|
+
return isOpen() ? "open" : "closed";
|
|
253
|
+
}
|
|
254
|
+
}, others), false, true);
|
|
255
|
+
insert(_el$5, () => local.children);
|
|
256
|
+
return _el$5;
|
|
257
|
+
}
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
const NavigationMenuLink = (props) => {
|
|
263
|
+
const [local, others] = splitProps(props, ["children", "asChild", "class"]);
|
|
264
|
+
return (() => {
|
|
265
|
+
var _el$6 = _tmpl$6();
|
|
266
|
+
spread(_el$6, mergeProps({
|
|
267
|
+
get ["class"]() {
|
|
268
|
+
return local.class;
|
|
269
|
+
}
|
|
270
|
+
}, others), false, true);
|
|
271
|
+
insert(_el$6, () => local.children);
|
|
272
|
+
return _el$6;
|
|
273
|
+
})();
|
|
274
|
+
};
|
|
275
|
+
const NavigationMenuIndicator = (props) => {
|
|
276
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
277
|
+
return (() => {
|
|
278
|
+
var _el$7 = _tmpl$7();
|
|
279
|
+
spread(_el$7, mergeProps({
|
|
280
|
+
get ["class"]() {
|
|
281
|
+
return local.class;
|
|
282
|
+
}
|
|
283
|
+
}, others), false, true);
|
|
284
|
+
insert(_el$7, () => local.children);
|
|
285
|
+
return _el$7;
|
|
286
|
+
})();
|
|
287
|
+
};
|
|
288
|
+
const NavigationMenuViewport = (props) => {
|
|
289
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
290
|
+
return (() => {
|
|
291
|
+
var _el$8 = _tmpl$7();
|
|
292
|
+
spread(_el$8, mergeProps({
|
|
293
|
+
get ["class"]() {
|
|
294
|
+
return local.class;
|
|
295
|
+
}
|
|
296
|
+
}, others), false, true);
|
|
297
|
+
insert(_el$8, () => local.children);
|
|
298
|
+
return _el$8;
|
|
299
|
+
})();
|
|
300
|
+
};
|
|
301
|
+
NavigationMenu.List = NavigationMenuList;
|
|
302
|
+
NavigationMenu.Item = NavigationMenuItem;
|
|
303
|
+
NavigationMenu.Trigger = NavigationMenuTrigger;
|
|
304
|
+
NavigationMenu.Content = NavigationMenuContent;
|
|
305
|
+
NavigationMenu.Link = NavigationMenuLink;
|
|
306
|
+
NavigationMenu.Indicator = NavigationMenuIndicator;
|
|
307
|
+
NavigationMenu.Viewport = NavigationMenuViewport;
|
|
308
|
+
delegateEvents(["click"]);
|
|
309
|
+
export {
|
|
310
|
+
NavigationMenu,
|
|
311
|
+
NavigationMenuContent,
|
|
312
|
+
NavigationMenuIndicator,
|
|
313
|
+
NavigationMenuItem,
|
|
314
|
+
NavigationMenuLink,
|
|
315
|
+
NavigationMenuList,
|
|
316
|
+
NavigationMenuTrigger,
|
|
317
|
+
NavigationMenuViewport,
|
|
318
|
+
useNavigationMenuContext
|
|
319
|
+
};
|
|
320
|
+
//# sourceMappingURL=NavigationMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NavigationMenu.js","sources":["../../../src/components/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import { splitProps, createSignal, createContext, useContext, Show, onMount, onCleanup, createEffect } from 'solid-js';\nimport { Portal, isServer } from 'solid-js/web';\nimport type { Component, JSX } from 'solid-js';\n\ninterface NavigationMenuContextValue {\n value: () => string | undefined;\n setValue: (value: string | undefined) => void;\n triggerRefs: () => Map<string, HTMLElement>;\n setTriggerRef: (value: string, ref: HTMLElement | undefined) => void;\n setContentElement: (value: string, el: HTMLElement | undefined) => void;\n}\n\nconst NavigationMenuContext = createContext<NavigationMenuContextValue>();\n\nexport const useNavigationMenuContext = () => {\n const context = useContext(NavigationMenuContext);\n if (!context) {\n throw new Error('NavigationMenu components must be used within NavigationMenu');\n }\n return context;\n};\n\nexport interface NavigationMenuProps extends JSX.HTMLAttributes<HTMLElement> {\n /**\n * 当前打开的值\n */\n value?: string;\n /**\n * 默认打开的值\n */\n defaultValue?: string;\n /**\n * 值变化回调\n */\n onValueChange?: (value: string | undefined) => void;\n /**\n * 方向\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical';\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nconst NavigationMenuBase: Component<NavigationMenuProps> = (props) => {\n const [local, others] = splitProps(props, [\n 'value',\n 'defaultValue',\n 'onValueChange',\n 'orientation',\n 'class',\n 'children',\n ]);\n\n const [internalValue, setInternalValue] = createSignal<string | undefined>(\n local.value ?? local.defaultValue\n );\n const [triggerRefs, setTriggerRefs] = createSignal<Map<string, HTMLElement>>(new Map());\n const contentElements = new Map<string, HTMLElement>();\n\n const isControlled = () => local.value !== undefined;\n const value = () => (isControlled() ? local.value : internalValue());\n\n const handleValueChange = (newValue: string | undefined) => {\n if (!isControlled()) {\n setInternalValue(newValue);\n }\n local.onValueChange?.(newValue);\n };\n\n const setTriggerRef = (itemValue: string, ref: HTMLElement | undefined) => {\n const refs = new Map(triggerRefs());\n if (ref) {\n refs.set(itemValue, ref);\n } else {\n refs.delete(itemValue);\n }\n setTriggerRefs(refs);\n };\n\n const setContentElement = (itemValue: string, el: HTMLElement | undefined) => {\n if (el) {\n contentElements.set(itemValue, el);\n } else {\n contentElements.delete(itemValue);\n }\n };\n\n // 点击外部关闭\n const handleClickOutside = (e: MouseEvent) => {\n const currentValue = value();\n if (currentValue && !isServer) {\n const target = e.target as HTMLElement;\n const trigger = triggerRefs().get(currentValue);\n const content = contentElements.get(currentValue);\n\n if (trigger && content) {\n if (!trigger.contains(target) && !content.contains(target)) {\n handleValueChange(undefined);\n }\n }\n }\n };\n\n // ESC 键关闭\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && value()) {\n handleValueChange(undefined);\n }\n };\n\n createEffect(() => {\n if (!isServer) {\n if (value()) {\n setTimeout(() => {\n document.addEventListener('keydown', handleKeyDown);\n document.addEventListener('mousedown', handleClickOutside);\n }, 0);\n } else {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('mousedown', handleClickOutside);\n }\n }\n });\n\n onCleanup(() => {\n if (!isServer) {\n document.removeEventListener('keydown', handleKeyDown);\n document.removeEventListener('mousedown', handleClickOutside);\n }\n });\n\n const contextValue: NavigationMenuContextValue = {\n value,\n setValue: handleValueChange,\n triggerRefs,\n setTriggerRef,\n setContentElement,\n };\n\n return (\n <NavigationMenuContext.Provider value={contextValue}>\n <nav\n class={local.class}\n role=\"navigation\"\n aria-orientation={local.orientation ?? 'horizontal'}\n {...others}\n >\n {local.children}\n </nav>\n </NavigationMenuContext.Provider>\n );\n};\n\nexport interface NavigationMenuComponent extends Component<NavigationMenuProps> {\n List: Component<NavigationMenuListProps>;\n Item: Component<NavigationMenuItemProps>;\n Trigger: Component<NavigationMenuTriggerProps>;\n Content: Component<NavigationMenuContentProps>;\n Link: Component<NavigationMenuLinkProps>;\n Indicator: Component<NavigationMenuIndicatorProps>;\n Viewport: Component<NavigationMenuViewportProps>;\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuBase, {\n List: null as unknown as Component<NavigationMenuListProps>,\n Item: null as unknown as Component<NavigationMenuItemProps>,\n Trigger: null as unknown as Component<NavigationMenuTriggerProps>,\n Content: null as unknown as Component<NavigationMenuContentProps>,\n Link: null as unknown as Component<NavigationMenuLinkProps>,\n Indicator: null as unknown as Component<NavigationMenuIndicatorProps>,\n Viewport: null as unknown as Component<NavigationMenuViewportProps>,\n}) as NavigationMenuComponent;\n\nexport interface NavigationMenuListProps extends JSX.HTMLAttributes<HTMLUListElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const NavigationMenuList: Component<NavigationMenuListProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'children']);\n\n return (\n <ul\n class={local.class}\n role=\"list\"\n {...others}\n >\n {local.children}\n </ul>\n );\n};\n\nexport interface NavigationMenuItemProps extends JSX.LiHTMLAttributes<HTMLLIElement> {\n /**\n * 项的值\n */\n value: string;\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const NavigationMenuItem: Component<NavigationMenuItemProps> = (props) => {\n const [local, others] = splitProps(props, ['value', 'class', 'children']);\n\n return (\n <li\n class={local.class}\n data-value={local.value}\n {...others}\n >\n {local.children}\n </li>\n );\n};\n\nexport interface NavigationMenuTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n /**\n * 是否作为子元素传递\n */\n asChild?: boolean;\n}\n\nexport const NavigationMenuTrigger: Component<NavigationMenuTriggerProps> = (props) => {\n const [local, others] = splitProps(props, ['children', 'asChild', 'class', 'onClick']);\n const context = useNavigationMenuContext();\n let triggerElement: HTMLButtonElement | undefined;\n let itemValue: string | undefined;\n\n onMount(() => {\n if (triggerElement) {\n const parent = triggerElement.closest('[data-value]');\n if (parent) {\n itemValue = parent.getAttribute('data-value') || undefined;\n if (itemValue) {\n context.setTriggerRef(itemValue, triggerElement);\n }\n }\n }\n });\n\n const isOpen = () => context.value() === itemValue;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {\n if (typeof local.onClick === 'function') {\n local.onClick(e);\n }\n if (itemValue) {\n context.setValue(isOpen() ? undefined : itemValue);\n }\n };\n\n return (\n <button\n type=\"button\"\n ref={triggerElement}\n class={local.class}\n onClick={handleClick}\n aria-expanded={isOpen()}\n aria-controls={itemValue ? `navigation-menu-content-${itemValue}` : undefined}\n data-state={isOpen() ? 'open' : 'closed'}\n {...others}\n >\n {local.children}\n </button>\n );\n};\n\nexport interface NavigationMenuContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const NavigationMenuContent: Component<NavigationMenuContentProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'children'] as const);\n const context = useNavigationMenuContext();\n let contentElement: HTMLDivElement | undefined;\n let itemValue: string | undefined;\n\n onMount(() => {\n if (contentElement) {\n const parent = contentElement.closest('[data-value]');\n if (parent) {\n itemValue = parent.getAttribute('data-value') || undefined;\n if (itemValue) {\n context.setContentElement(itemValue, contentElement);\n }\n }\n }\n });\n\n const isOpen = () => itemValue ? context.value() === itemValue : false;\n\n const updatePosition = () => {\n if (!isServer && contentElement && itemValue) {\n const trigger = context.triggerRefs().get(itemValue);\n if (trigger) {\n const rect = trigger.getBoundingClientRect();\n const contentRect = contentElement.getBoundingClientRect();\n\n const top = rect.bottom + 8;\n const left = rect.left;\n\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let finalTop = top;\n let finalLeft = left;\n\n if (left + contentRect.width > viewportWidth) {\n finalLeft = viewportWidth - contentRect.width - 16;\n }\n\n if (top + contentRect.height > viewportHeight) {\n finalTop = rect.top - contentRect.height - 8;\n }\n\n contentElement.style.top = `${finalTop}px`;\n contentElement.style.left = `${finalLeft}px`;\n }\n }\n };\n\n createEffect(() => {\n if (isOpen() && !isServer) {\n requestAnimationFrame(() => {\n updatePosition();\n });\n }\n });\n\n return (\n <Show when={isOpen()}>\n <Portal mount={!isServer ? document.body : undefined}>\n <div\n ref={contentElement}\n id={itemValue ? `navigation-menu-content-${itemValue}` : undefined}\n role=\"menu\"\n class={`fixed z-50 ${local.class || ''}`}\n data-state={isOpen() ? 'open' : 'closed'}\n style=\"top: 0px; left: 0px;\"\n {...others}\n >\n {local.children}\n </div>\n </Portal>\n </Show>\n );\n};\n\nexport interface NavigationMenuLinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n /**\n * 是否作为子元素传递\n */\n asChild?: boolean;\n}\n\nexport const NavigationMenuLink: Component<NavigationMenuLinkProps> = (props) => {\n const [local, others] = splitProps(props, ['children', 'asChild', 'class']);\n\n return (\n <a\n class={local.class}\n {...others}\n >\n {local.children}\n </a>\n );\n};\n\nexport interface NavigationMenuIndicatorProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const NavigationMenuIndicator: Component<NavigationMenuIndicatorProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'children']);\n\n return (\n <div\n class={local.class}\n {...others}\n >\n {local.children}\n </div>\n );\n};\n\nexport interface NavigationMenuViewportProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const NavigationMenuViewport: Component<NavigationMenuViewportProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'children']);\n\n return (\n <div\n class={local.class}\n {...others}\n >\n {local.children}\n </div>\n );\n};\n\nNavigationMenu.List = NavigationMenuList;\nNavigationMenu.Item = NavigationMenuItem;\nNavigationMenu.Trigger = NavigationMenuTrigger;\nNavigationMenu.Content = NavigationMenuContent;\nNavigationMenu.Link = NavigationMenuLink;\nNavigationMenu.Indicator = NavigationMenuIndicator;\nNavigationMenu.Viewport = NavigationMenuViewport;\n\n"],"names":["NavigationMenuContext","createContext","useNavigationMenuContext","context","useContext","Error","NavigationMenuBase","props","local","others","splitProps","internalValue","setInternalValue","createSignal","value","defaultValue","triggerRefs","setTriggerRefs","Map","contentElements","isControlled","undefined","handleValueChange","newValue","onValueChange","setTriggerRef","itemValue","ref","refs","set","delete","setContentElement","el","handleClickOutside","e","currentValue","isServer","target","trigger","get","content","contains","handleKeyDown","key","createEffect","setTimeout","document","addEventListener","removeEventListener","onCleanup","contextValue","setValue","_$createComponent","Provider","children","_el$","_tmpl$","_$spread","_$mergeProps","class","orientation","_$insert","NavigationMenu","Object","assign","List","Item","Trigger","Content","Link","Indicator","Viewport","NavigationMenuList","_el$2","_tmpl$2","NavigationMenuItem","_el$3","_tmpl$3","NavigationMenuTrigger","triggerElement","onMount","parent","closest","getAttribute","isOpen","handleClick","onClick","_el$4","_tmpl$4","$$click","_ref$","_$use","_$setAttribute","NavigationMenuContent","contentElement","updatePosition","rect","getBoundingClientRect","contentRect","top","bottom","left","viewportWidth","window","innerWidth","viewportHeight","innerHeight","finalTop","finalLeft","width","height","style","requestAnimationFrame","Show","when","Portal","mount","body","_el$5","_tmpl$5","_ref$2","NavigationMenuLink","_el$6","_tmpl$6","NavigationMenuIndicator","_el$7","_tmpl$7","NavigationMenuViewport","_el$8","_$delegateEvents"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavigationMenu/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
interface PopoverContextValue {
|
|
3
|
+
open: () => boolean;
|
|
4
|
+
setOpen: (open: boolean) => void;
|
|
5
|
+
triggerRef: () => HTMLElement | undefined;
|
|
6
|
+
setTriggerRef: (ref: HTMLElement | undefined) => void;
|
|
7
|
+
setContentElement: (el: HTMLElement | undefined) => void;
|
|
8
|
+
}
|
|
9
|
+
export declare const usePopoverContext: () => PopoverContextValue;
|
|
10
|
+
export interface PopoverProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
11
|
+
/**
|
|
12
|
+
* 是否打开
|
|
13
|
+
*/
|
|
14
|
+
open?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* 默认打开状态
|
|
17
|
+
*/
|
|
18
|
+
defaultOpen?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* 打开状态变化回调
|
|
21
|
+
*/
|
|
22
|
+
onOpenChange?: (open: boolean) => void;
|
|
23
|
+
/**
|
|
24
|
+
* 子元素
|
|
25
|
+
*/
|
|
26
|
+
children?: JSX.Element;
|
|
27
|
+
}
|
|
28
|
+
export interface PopoverComponent extends Component<PopoverProps> {
|
|
29
|
+
Trigger: Component<PopoverTriggerProps>;
|
|
30
|
+
Content: Component<PopoverContentProps>;
|
|
31
|
+
}
|
|
32
|
+
export declare const Popover: PopoverComponent;
|
|
33
|
+
export interface PopoverTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
34
|
+
/**
|
|
35
|
+
* 子元素
|
|
36
|
+
*/
|
|
37
|
+
children?: JSX.Element;
|
|
38
|
+
/**
|
|
39
|
+
* 是否作为子元素传递
|
|
40
|
+
*/
|
|
41
|
+
asChild?: boolean;
|
|
42
|
+
}
|
|
43
|
+
export declare const PopoverTrigger: Component<PopoverTriggerProps>;
|
|
44
|
+
export interface PopoverContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
/**
|
|
46
|
+
* 子元素
|
|
47
|
+
*/
|
|
48
|
+
children?: JSX.Element;
|
|
49
|
+
}
|
|
50
|
+
export declare const PopoverContent: Component<PopoverContentProps>;
|
|
51
|
+
export {};
|
|
52
|
+
//# sourceMappingURL=Popover.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC1C,aAAa,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,iBAAiB,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC;CAC1D;AAID,eAAO,MAAM,iBAAiB,2BAM7B,CAAC;AAEF,MAAM,WAAW,YAAa,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AA8ED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC/D,OAAO,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACxC,OAAO,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,EAGd,gBAAgB,CAAC;AAEvB,MAAM,WAAW,mBACf,SAAQ,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAkCzD,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,SAAS,CAAC,mBAAmB,CAoEzD,CAAC"}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import { delegateEvents, isServer, createComponent, template, spread, mergeProps, insert, Portal, use } from "solid-js/web";
|
|
2
|
+
import { createContext, splitProps, createSignal, createEffect, onCleanup, onMount, Show, useContext } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ template(`<button type=button>`), _tmpl$2 = /* @__PURE__ */ template(`<div role=dialog style=top:0px;left:0px>`);
|
|
4
|
+
const PopoverContext = createContext();
|
|
5
|
+
const usePopoverContext = () => {
|
|
6
|
+
const context = useContext(PopoverContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("Popover components must be used within Popover");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
const PopoverBase = (props) => {
|
|
13
|
+
const [local] = splitProps(props, ["open", "defaultOpen", "onOpenChange", "children"]);
|
|
14
|
+
const [internalOpen, setInternalOpen] = createSignal(local.open ?? local.defaultOpen ?? false);
|
|
15
|
+
const [triggerRef, setTriggerRef] = createSignal();
|
|
16
|
+
const isControlled = () => local.open !== void 0;
|
|
17
|
+
const open = () => isControlled() ? local.open : internalOpen();
|
|
18
|
+
const handleOpenChange = (newOpen) => {
|
|
19
|
+
if (!isControlled()) {
|
|
20
|
+
setInternalOpen(newOpen);
|
|
21
|
+
}
|
|
22
|
+
local.onOpenChange?.(newOpen);
|
|
23
|
+
};
|
|
24
|
+
let contentElement;
|
|
25
|
+
const setContentElement = (el) => {
|
|
26
|
+
contentElement = el;
|
|
27
|
+
};
|
|
28
|
+
const handleClickOutside = (e) => {
|
|
29
|
+
if (open() && !isServer) {
|
|
30
|
+
const target = e.target;
|
|
31
|
+
const trigger = triggerRef();
|
|
32
|
+
if (trigger && contentElement) {
|
|
33
|
+
if (!trigger.contains(target) && !contentElement.contains(target)) {
|
|
34
|
+
handleOpenChange(false);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
createEffect(() => {
|
|
40
|
+
if (!isServer) {
|
|
41
|
+
if (open()) {
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
44
|
+
}, 0);
|
|
45
|
+
} else {
|
|
46
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
onCleanup(() => {
|
|
51
|
+
if (!isServer) {
|
|
52
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
const contextValue = {
|
|
56
|
+
open,
|
|
57
|
+
setOpen: handleOpenChange,
|
|
58
|
+
triggerRef,
|
|
59
|
+
setTriggerRef,
|
|
60
|
+
setContentElement
|
|
61
|
+
};
|
|
62
|
+
return createComponent(PopoverContext.Provider, {
|
|
63
|
+
value: contextValue,
|
|
64
|
+
get children() {
|
|
65
|
+
return local.children;
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
};
|
|
69
|
+
const Popover = Object.assign(PopoverBase, {
|
|
70
|
+
Trigger: null,
|
|
71
|
+
Content: null
|
|
72
|
+
});
|
|
73
|
+
const PopoverTrigger = (props) => {
|
|
74
|
+
const [local, others] = splitProps(props, ["children", "asChild", "class", "onClick"]);
|
|
75
|
+
const context = usePopoverContext();
|
|
76
|
+
let triggerElement;
|
|
77
|
+
const handleClick = (e) => {
|
|
78
|
+
if (typeof local.onClick === "function") {
|
|
79
|
+
local.onClick(e);
|
|
80
|
+
}
|
|
81
|
+
context.setOpen(!context.open());
|
|
82
|
+
};
|
|
83
|
+
onMount(() => {
|
|
84
|
+
if (triggerElement) {
|
|
85
|
+
context.setTriggerRef(triggerElement);
|
|
86
|
+
}
|
|
87
|
+
});
|
|
88
|
+
return (() => {
|
|
89
|
+
var _el$ = _tmpl$();
|
|
90
|
+
_el$.$$click = handleClick;
|
|
91
|
+
var _ref$ = triggerElement;
|
|
92
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : triggerElement = _el$;
|
|
93
|
+
spread(_el$, mergeProps({
|
|
94
|
+
get ["class"]() {
|
|
95
|
+
return local.class;
|
|
96
|
+
}
|
|
97
|
+
}, others), false, true);
|
|
98
|
+
insert(_el$, () => local.children);
|
|
99
|
+
return _el$;
|
|
100
|
+
})();
|
|
101
|
+
};
|
|
102
|
+
const PopoverContent = (props) => {
|
|
103
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
104
|
+
const context = usePopoverContext();
|
|
105
|
+
let contentElement;
|
|
106
|
+
const updatePosition = () => {
|
|
107
|
+
if (!isServer && contentElement && context.triggerRef()) {
|
|
108
|
+
const trigger = context.triggerRef();
|
|
109
|
+
const rect = trigger.getBoundingClientRect();
|
|
110
|
+
const contentRect = contentElement.getBoundingClientRect();
|
|
111
|
+
const top = rect.bottom + 8;
|
|
112
|
+
const left = rect.left;
|
|
113
|
+
const viewportWidth = window.innerWidth;
|
|
114
|
+
const viewportHeight = window.innerHeight;
|
|
115
|
+
let finalTop = top;
|
|
116
|
+
let finalLeft = left;
|
|
117
|
+
if (left + contentRect.width > viewportWidth) {
|
|
118
|
+
finalLeft = viewportWidth - contentRect.width - 16;
|
|
119
|
+
}
|
|
120
|
+
if (top + contentRect.height > viewportHeight) {
|
|
121
|
+
finalTop = rect.top - contentRect.height - 8;
|
|
122
|
+
}
|
|
123
|
+
contentElement.style.top = `${finalTop}px`;
|
|
124
|
+
contentElement.style.left = `${finalLeft}px`;
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
onMount(() => {
|
|
128
|
+
if (contentElement) {
|
|
129
|
+
context.setContentElement(contentElement);
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
createEffect(() => {
|
|
133
|
+
if (context.open() && !isServer) {
|
|
134
|
+
requestAnimationFrame(() => {
|
|
135
|
+
updatePosition();
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
return createComponent(Show, {
|
|
140
|
+
get when() {
|
|
141
|
+
return context.open();
|
|
142
|
+
},
|
|
143
|
+
get children() {
|
|
144
|
+
return createComponent(Portal, {
|
|
145
|
+
get mount() {
|
|
146
|
+
return !isServer ? document.body : void 0;
|
|
147
|
+
},
|
|
148
|
+
get children() {
|
|
149
|
+
var _el$2 = _tmpl$2();
|
|
150
|
+
var _ref$2 = contentElement;
|
|
151
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$2) : contentElement = _el$2;
|
|
152
|
+
spread(_el$2, mergeProps({
|
|
153
|
+
get ["class"]() {
|
|
154
|
+
return `fixed z-50 ${local.class || ""}`;
|
|
155
|
+
},
|
|
156
|
+
get ["data-state"]() {
|
|
157
|
+
return context.open() ? "open" : "closed";
|
|
158
|
+
}
|
|
159
|
+
}, others), false, true);
|
|
160
|
+
insert(_el$2, () => local.children);
|
|
161
|
+
return _el$2;
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
};
|
|
167
|
+
Popover.Trigger = PopoverTrigger;
|
|
168
|
+
Popover.Content = PopoverContent;
|
|
169
|
+
delegateEvents(["click"]);
|
|
170
|
+
export {
|
|
171
|
+
Popover,
|
|
172
|
+
PopoverContent,
|
|
173
|
+
PopoverTrigger,
|
|
174
|
+
usePopoverContext
|
|
175
|
+
};
|
|
176
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n createContext,\n createEffect,\n createSignal,\n onCleanup,\n onMount,\n Show,\n splitProps,\n useContext,\n} from \"solid-js\";\nimport { Portal } from \"solid-js/web\";\nimport { isServer } from \"solid-js/web\";\nimport type { Component, JSX } from \"solid-js\";\n\ninterface PopoverContextValue {\n open: () => boolean;\n setOpen: (open: boolean) => void;\n triggerRef: () => HTMLElement | undefined;\n setTriggerRef: (ref: HTMLElement | undefined) => void;\n setContentElement: (el: HTMLElement | undefined) => void;\n}\n\nconst PopoverContext = createContext<PopoverContextValue>();\n\nexport const usePopoverContext = () => {\n const context = useContext(PopoverContext);\n if (!context) {\n throw new Error(\"Popover components must be used within Popover\");\n }\n return context;\n};\n\nexport interface PopoverProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 是否打开\n */\n open?: boolean;\n /**\n * 默认打开状态\n */\n defaultOpen?: boolean;\n /**\n * 打开状态变化回调\n */\n onOpenChange?: (open: boolean) => void;\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nconst PopoverBase: Component<PopoverProps> = (props) => {\n const [local] = splitProps(props, [\n \"open\",\n \"defaultOpen\",\n \"onOpenChange\",\n \"children\",\n ]);\n\n const [internalOpen, setInternalOpen] = createSignal(\n local.open ?? local.defaultOpen ?? false,\n );\n const [triggerRef, setTriggerRef] = createSignal<HTMLElement | undefined>();\n\n const isControlled = () => local.open !== undefined;\n const open = () => (isControlled() ? local.open! : internalOpen());\n\n const handleOpenChange = (newOpen: boolean) => {\n if (!isControlled()) {\n setInternalOpen(newOpen);\n }\n local.onOpenChange?.(newOpen);\n };\n\n // 点击外部关闭\n let contentElement: HTMLElement | undefined;\n const setContentElement = (el: HTMLElement | undefined) => {\n contentElement = el;\n };\n\n const handleClickOutside = (e: MouseEvent) => {\n if (open() && !isServer) {\n const target = e.target as HTMLElement;\n const trigger = triggerRef();\n\n if (trigger && contentElement) {\n if (!trigger.contains(target) && !contentElement.contains(target)) {\n handleOpenChange(false);\n }\n }\n }\n };\n\n createEffect(() => {\n if (!isServer) {\n if (open()) {\n // 延迟添加事件监听器,确保 DOM 已更新\n setTimeout(() => {\n document.addEventListener(\"mousedown\", handleClickOutside);\n }, 0);\n } else {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n }\n });\n\n onCleanup(() => {\n if (!isServer) {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n }\n });\n\n const contextValue: PopoverContextValue = {\n open,\n setOpen: handleOpenChange,\n triggerRef,\n setTriggerRef,\n setContentElement,\n };\n\n return (\n <PopoverContext.Provider value={contextValue}>\n {local.children}\n </PopoverContext.Provider>\n );\n};\n\nexport interface PopoverComponent extends Component<PopoverProps> {\n Trigger: Component<PopoverTriggerProps>;\n Content: Component<PopoverContentProps>;\n}\n\nexport const Popover = Object.assign(PopoverBase, {\n Trigger: null as unknown as Component<PopoverTriggerProps>,\n Content: null as unknown as Component<PopoverContentProps>,\n}) as PopoverComponent;\n\nexport interface PopoverTriggerProps\n extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n /**\n * 是否作为子元素传递\n */\n asChild?: boolean;\n}\n\nexport const PopoverTrigger: Component<PopoverTriggerProps> = (props) => {\n const [local, others] = splitProps(props, [\n \"children\",\n \"asChild\",\n \"class\",\n \"onClick\",\n ]);\n const context = usePopoverContext();\n let triggerElement: HTMLButtonElement | undefined;\n\n const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {\n if (typeof local.onClick === \"function\") {\n local.onClick(e);\n }\n context.setOpen(!context.open());\n };\n\n onMount(() => {\n if (triggerElement) {\n context.setTriggerRef(triggerElement);\n }\n });\n\n return (\n <button\n type=\"button\"\n ref={triggerElement}\n class={local.class}\n onClick={handleClick}\n {...others}\n >\n {local.children}\n </button>\n );\n};\n\nexport interface PopoverContentProps\n extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const PopoverContent: Component<PopoverContentProps> = (props) => {\n const [local, others] = splitProps(props, [\"class\", \"children\"] as const);\n const context = usePopoverContext();\n let contentElement: HTMLDivElement | undefined;\n\n const updatePosition = () => {\n if (!isServer && contentElement && context.triggerRef()) {\n const trigger = context.triggerRef()!;\n const rect = trigger.getBoundingClientRect();\n const contentRect = contentElement.getBoundingClientRect();\n\n // 默认在触发元素下方显示\n const top = rect.bottom + 8;\n const left = rect.left;\n\n // 检查是否会超出视口\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n\n let finalTop = top;\n let finalLeft = left;\n\n // 如果右侧超出,则左对齐\n if (left + contentRect.width > viewportWidth) {\n finalLeft = viewportWidth - contentRect.width - 16;\n }\n\n // 如果下方超出,则在上方显示\n if (top + contentRect.height > viewportHeight) {\n finalTop = rect.top - contentRect.height - 8;\n }\n\n contentElement.style.top = `${finalTop}px`;\n contentElement.style.left = `${finalLeft}px`;\n }\n };\n\n onMount(() => {\n if (contentElement) {\n context.setContentElement(contentElement);\n }\n });\n\n createEffect(() => {\n if (context.open() && !isServer) {\n // 延迟一帧确保 DOM 已渲染\n requestAnimationFrame(() => {\n updatePosition();\n });\n }\n });\n\n return (\n <Show when={context.open()}>\n <Portal mount={!isServer ? document.body : undefined}>\n <div\n ref={contentElement}\n role=\"dialog\"\n class={`fixed z-50 ${local.class || \"\"}`}\n data-state={context.open() ? \"open\" : \"closed\"}\n style={{ top: \"0px\", left: \"0px\" }}\n {...others}\n >\n {local.children}\n </div>\n </Portal>\n </Show>\n );\n};\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n"],"names":["PopoverContext","createContext","usePopoverContext","context","useContext","Error","PopoverBase","props","local","splitProps","internalOpen","setInternalOpen","createSignal","open","defaultOpen","triggerRef","setTriggerRef","isControlled","undefined","handleOpenChange","newOpen","onOpenChange","contentElement","setContentElement","el","handleClickOutside","e","isServer","target","trigger","contains","createEffect","setTimeout","document","addEventListener","removeEventListener","onCleanup","contextValue","setOpen","_$createComponent","Provider","value","children","Popover","Object","assign","Trigger","Content","PopoverTrigger","others","triggerElement","handleClick","onClick","onMount","_el$","_tmpl$","$$click","_ref$","_$use","_$spread","_$mergeProps","class","_$insert","PopoverContent","updatePosition","rect","getBoundingClientRect","contentRect","top","bottom","left","viewportWidth","window","innerWidth","viewportHeight","innerHeight","finalTop","finalLeft","width","height","style","requestAnimationFrame","Show","when","Portal","mount","body","_el$2","_tmpl$2","_ref$2","_$delegateEvents"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* 进度值(0-100)
|
|
5
|
+
*/
|
|
6
|
+
value?: number;
|
|
7
|
+
/**
|
|
8
|
+
* 最大值
|
|
9
|
+
* @default 100
|
|
10
|
+
*/
|
|
11
|
+
max?: number;
|
|
12
|
+
/**
|
|
13
|
+
* 是否显示值
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
showValue?: boolean;
|
|
17
|
+
}
|
|
18
|
+
export declare const Progress: Component<ProgressProps>;
|
|
19
|
+
//# sourceMappingURL=Progress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CAoC7C,CAAC"}
|