@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,240 @@
|
|
|
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 role=combobox>`), _tmpl$2 = /* @__PURE__ */ template(`<span>`), _tmpl$3 = /* @__PURE__ */ template(`<div role=listbox style=top:0px;left:0px>`), _tmpl$4 = /* @__PURE__ */ template(`<div role=option>`);
|
|
4
|
+
const SelectContext = createContext();
|
|
5
|
+
const useSelectContext = () => {
|
|
6
|
+
const context = useContext(SelectContext);
|
|
7
|
+
if (!context) {
|
|
8
|
+
throw new Error("Select components must be used within Select");
|
|
9
|
+
}
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
const SelectBase = (props) => {
|
|
13
|
+
const [local] = splitProps(props, ["value", "defaultValue", "onValueChange", "disabled", "children"]);
|
|
14
|
+
const [internalValue, setInternalValue] = createSignal(local.value ?? local.defaultValue);
|
|
15
|
+
const [open, setOpen] = createSignal(false);
|
|
16
|
+
const [triggerRef, setTriggerRef] = createSignal();
|
|
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
|
+
setOpen(false);
|
|
25
|
+
};
|
|
26
|
+
let contentElement;
|
|
27
|
+
const setContentElement = (el) => {
|
|
28
|
+
contentElement = el;
|
|
29
|
+
};
|
|
30
|
+
const handleClickOutside = (e) => {
|
|
31
|
+
if (open() && !isServer) {
|
|
32
|
+
const target = e.target;
|
|
33
|
+
const trigger = triggerRef();
|
|
34
|
+
if (trigger && contentElement) {
|
|
35
|
+
if (!trigger.contains(target) && !contentElement.contains(target)) {
|
|
36
|
+
setOpen(false);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
createEffect(() => {
|
|
42
|
+
if (!isServer) {
|
|
43
|
+
if (open()) {
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
46
|
+
}, 0);
|
|
47
|
+
} else {
|
|
48
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
onCleanup(() => {
|
|
53
|
+
if (!isServer) {
|
|
54
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
const contextValue = {
|
|
58
|
+
value,
|
|
59
|
+
setValue: handleValueChange,
|
|
60
|
+
open,
|
|
61
|
+
setOpen,
|
|
62
|
+
triggerRef,
|
|
63
|
+
setTriggerRef,
|
|
64
|
+
setContentElement
|
|
65
|
+
};
|
|
66
|
+
return createComponent(SelectContext.Provider, {
|
|
67
|
+
value: contextValue,
|
|
68
|
+
get children() {
|
|
69
|
+
return local.children;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
const Select = Object.assign(SelectBase, {
|
|
74
|
+
Trigger: null,
|
|
75
|
+
Value: null,
|
|
76
|
+
Content: null,
|
|
77
|
+
Item: null
|
|
78
|
+
});
|
|
79
|
+
const SelectTrigger = (props) => {
|
|
80
|
+
const [local, others] = splitProps(props, ["children", "class", "onClick"]);
|
|
81
|
+
const context = useSelectContext();
|
|
82
|
+
let triggerElement;
|
|
83
|
+
const handleClick = (e) => {
|
|
84
|
+
if (typeof local.onClick === "function") {
|
|
85
|
+
local.onClick(e);
|
|
86
|
+
}
|
|
87
|
+
context.setOpen(!context.open());
|
|
88
|
+
};
|
|
89
|
+
onMount(() => {
|
|
90
|
+
if (triggerElement) {
|
|
91
|
+
context.setTriggerRef(triggerElement);
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
return (() => {
|
|
95
|
+
var _el$ = _tmpl$();
|
|
96
|
+
_el$.$$click = handleClick;
|
|
97
|
+
var _ref$ = triggerElement;
|
|
98
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : triggerElement = _el$;
|
|
99
|
+
spread(_el$, mergeProps({
|
|
100
|
+
get ["class"]() {
|
|
101
|
+
return local.class;
|
|
102
|
+
},
|
|
103
|
+
get ["aria-expanded"]() {
|
|
104
|
+
return context.open();
|
|
105
|
+
},
|
|
106
|
+
get ["data-state"]() {
|
|
107
|
+
return context.open() ? "open" : "closed";
|
|
108
|
+
}
|
|
109
|
+
}, others), false, true);
|
|
110
|
+
insert(_el$, () => local.children);
|
|
111
|
+
return _el$;
|
|
112
|
+
})();
|
|
113
|
+
};
|
|
114
|
+
const SelectValue = (props) => {
|
|
115
|
+
const [local, others] = splitProps(props, ["placeholder", "class"]);
|
|
116
|
+
const context = useSelectContext();
|
|
117
|
+
return (() => {
|
|
118
|
+
var _el$2 = _tmpl$2();
|
|
119
|
+
spread(_el$2, mergeProps({
|
|
120
|
+
get ["class"]() {
|
|
121
|
+
return local.class;
|
|
122
|
+
}
|
|
123
|
+
}, others), false, true);
|
|
124
|
+
insert(_el$2, () => context.value() ?? local.placeholder ?? "Select...");
|
|
125
|
+
return _el$2;
|
|
126
|
+
})();
|
|
127
|
+
};
|
|
128
|
+
const SelectContent = (props) => {
|
|
129
|
+
const [local, others] = splitProps(props, ["class", "children"]);
|
|
130
|
+
const context = useSelectContext();
|
|
131
|
+
let contentElement;
|
|
132
|
+
const updatePosition = () => {
|
|
133
|
+
if (!isServer && contentElement && context.triggerRef()) {
|
|
134
|
+
const trigger = context.triggerRef();
|
|
135
|
+
const rect = trigger.getBoundingClientRect();
|
|
136
|
+
const contentRect = contentElement.getBoundingClientRect();
|
|
137
|
+
const top = rect.bottom + 4;
|
|
138
|
+
const left = rect.left;
|
|
139
|
+
const width = rect.width;
|
|
140
|
+
const viewportWidth = window.innerWidth;
|
|
141
|
+
const viewportHeight = window.innerHeight;
|
|
142
|
+
let finalTop = top;
|
|
143
|
+
let finalLeft = left;
|
|
144
|
+
if (left + width > viewportWidth) {
|
|
145
|
+
finalLeft = viewportWidth - width - 16;
|
|
146
|
+
}
|
|
147
|
+
if (top + contentRect.height > viewportHeight) {
|
|
148
|
+
finalTop = rect.top - contentRect.height - 4;
|
|
149
|
+
}
|
|
150
|
+
contentElement.style.top = `${finalTop}px`;
|
|
151
|
+
contentElement.style.left = `${finalLeft}px`;
|
|
152
|
+
contentElement.style.width = `${width}px`;
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
onMount(() => {
|
|
156
|
+
if (contentElement) {
|
|
157
|
+
context.setContentElement(contentElement);
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
createEffect(() => {
|
|
161
|
+
if (context.open() && !isServer) {
|
|
162
|
+
requestAnimationFrame(() => {
|
|
163
|
+
updatePosition();
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
});
|
|
167
|
+
return createComponent(Show, {
|
|
168
|
+
get when() {
|
|
169
|
+
return context.open();
|
|
170
|
+
},
|
|
171
|
+
get children() {
|
|
172
|
+
return createComponent(Portal, {
|
|
173
|
+
get mount() {
|
|
174
|
+
return !isServer ? document.body : void 0;
|
|
175
|
+
},
|
|
176
|
+
get children() {
|
|
177
|
+
var _el$3 = _tmpl$3();
|
|
178
|
+
var _ref$2 = contentElement;
|
|
179
|
+
typeof _ref$2 === "function" ? use(_ref$2, _el$3) : contentElement = _el$3;
|
|
180
|
+
spread(_el$3, mergeProps({
|
|
181
|
+
get ["class"]() {
|
|
182
|
+
return `fixed z-50 ${local.class || ""}`;
|
|
183
|
+
},
|
|
184
|
+
get ["data-state"]() {
|
|
185
|
+
return context.open() ? "open" : "closed";
|
|
186
|
+
}
|
|
187
|
+
}, others), false, true);
|
|
188
|
+
insert(_el$3, () => local.children);
|
|
189
|
+
return _el$3;
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
};
|
|
195
|
+
const SelectItem = (props) => {
|
|
196
|
+
const [local, others] = splitProps(props, ["value", "disabled", "children", "class", "onClick"]);
|
|
197
|
+
const context = useSelectContext();
|
|
198
|
+
const isSelected = () => context.value() === local.value;
|
|
199
|
+
const handleClick = (e) => {
|
|
200
|
+
if (local.disabled) {
|
|
201
|
+
e.preventDefault();
|
|
202
|
+
return;
|
|
203
|
+
}
|
|
204
|
+
if (typeof local.onClick === "function") {
|
|
205
|
+
local.onClick(e);
|
|
206
|
+
}
|
|
207
|
+
context.setValue(local.value);
|
|
208
|
+
};
|
|
209
|
+
return (() => {
|
|
210
|
+
var _el$4 = _tmpl$4();
|
|
211
|
+
_el$4.$$click = handleClick;
|
|
212
|
+
spread(_el$4, mergeProps({
|
|
213
|
+
get ["class"]() {
|
|
214
|
+
return local.class;
|
|
215
|
+
},
|
|
216
|
+
get ["data-selected"]() {
|
|
217
|
+
return isSelected() ? "" : void 0;
|
|
218
|
+
},
|
|
219
|
+
get ["data-disabled"]() {
|
|
220
|
+
return local.disabled ? "" : void 0;
|
|
221
|
+
}
|
|
222
|
+
}, others), false, true);
|
|
223
|
+
insert(_el$4, () => local.children);
|
|
224
|
+
return _el$4;
|
|
225
|
+
})();
|
|
226
|
+
};
|
|
227
|
+
Select.Trigger = SelectTrigger;
|
|
228
|
+
Select.Value = SelectValue;
|
|
229
|
+
Select.Content = SelectContent;
|
|
230
|
+
Select.Item = SelectItem;
|
|
231
|
+
delegateEvents(["click"]);
|
|
232
|
+
export {
|
|
233
|
+
Select,
|
|
234
|
+
SelectContent,
|
|
235
|
+
SelectItem,
|
|
236
|
+
SelectTrigger,
|
|
237
|
+
SelectValue,
|
|
238
|
+
useSelectContext
|
|
239
|
+
};
|
|
240
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { splitProps, createSignal, createContext, useContext, Show, onMount, createEffect, onCleanup } from 'solid-js';\nimport { Portal } from 'solid-js/web';\nimport { isServer } from 'solid-js/web';\nimport type { Component, JSX } from 'solid-js';\n\ninterface SelectContextValue {\n value: () => string | undefined;\n setValue: (value: string) => void;\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 SelectContext = createContext<SelectContextValue>();\n\nexport const useSelectContext = () => {\n const context = useContext(SelectContext);\n if (!context) {\n throw new Error('Select components must be used within Select');\n }\n return context;\n};\n\nexport interface SelectProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 选中的值\n */\n value?: string;\n /**\n * 默认选中的值\n */\n defaultValue?: string;\n /**\n * 值变化回调\n */\n onValueChange?: (value: string) => void;\n /**\n * 是否禁用\n * @default false\n */\n disabled?: boolean;\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nconst SelectBase: Component<SelectProps> = (props) => {\n const [local] = splitProps(props, [\n 'value',\n 'defaultValue',\n 'onValueChange',\n 'disabled',\n 'children',\n ]);\n\n const [internalValue, setInternalValue] = createSignal<string | undefined>(\n local.value ?? local.defaultValue\n );\n const [open, setOpen] = createSignal(false);\n const [triggerRef, setTriggerRef] = createSignal<HTMLElement | undefined>();\n\n const isControlled = () => local.value !== undefined;\n const value = () => (isControlled() ? local.value : internalValue());\n\n const handleValueChange = (newValue: string) => {\n if (!isControlled()) {\n setInternalValue(newValue);\n }\n local.onValueChange?.(newValue);\n setOpen(false);\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 setOpen(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: SelectContextValue = {\n value,\n setValue: handleValueChange,\n open,\n setOpen,\n triggerRef,\n setTriggerRef,\n setContentElement,\n };\n\n return (\n <SelectContext.Provider value={contextValue}>\n {local.children}\n </SelectContext.Provider>\n );\n};\n\nexport interface SelectComponent extends Component<SelectProps> {\n Trigger: Component<SelectTriggerProps>;\n Value: Component<SelectValueProps>;\n Content: Component<SelectContentProps>;\n Item: Component<SelectItemProps>;\n}\n\nexport const Select = Object.assign(SelectBase, {\n Trigger: null as unknown as Component<SelectTriggerProps>,\n Value: null as unknown as Component<SelectValueProps>,\n Content: null as unknown as Component<SelectContentProps>,\n Item: null as unknown as Component<SelectItemProps>,\n}) as SelectComponent;\n\nexport interface SelectTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const SelectTrigger: Component<SelectTriggerProps> = (props) => {\n const [local, others] = splitProps(props, ['children', 'class', 'onClick']);\n const context = useSelectContext();\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 role=\"combobox\"\n ref={triggerElement}\n class={local.class}\n onClick={handleClick}\n aria-expanded={context.open()}\n data-state={context.open() ? 'open' : 'closed'}\n {...others}\n >\n {local.children}\n </button>\n );\n};\n\nexport interface SelectValueProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n /**\n * 占位符文本\n */\n placeholder?: string;\n}\n\nexport const SelectValue: Component<SelectValueProps> = (props) => {\n const [local, others] = splitProps(props, ['placeholder', 'class']);\n const context = useSelectContext();\n\n return (\n <span class={local.class} {...others}>\n {context.value() ?? local.placeholder ?? 'Select...'}\n </span>\n );\n};\n\nexport interface SelectContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const SelectContent: Component<SelectContentProps> = (props) => {\n const [local, others] = splitProps(props, ['class', 'children'] as const);\n const context = useSelectContext();\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 + 4;\n const left = rect.left;\n const width = rect.width;\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 + width > viewportWidth) {\n finalLeft = viewportWidth - width - 16;\n }\n\n // 如果下方超出,则在上方显示\n if (top + contentRect.height > viewportHeight) {\n finalTop = rect.top - contentRect.height - 4;\n }\n\n contentElement.style.top = `${finalTop}px`;\n contentElement.style.left = `${finalLeft}px`;\n contentElement.style.width = `${width}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=\"listbox\"\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\nexport interface SelectItemProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 选项的值\n */\n value: string;\n /**\n * 是否禁用\n * @default false\n */\n disabled?: boolean;\n /**\n * 子元素\n */\n children?: JSX.Element;\n}\n\nexport const SelectItem: Component<SelectItemProps> = (props) => {\n const [local, others] = splitProps(props, ['value', 'disabled', 'children', 'class', 'onClick']);\n const context = useSelectContext();\n\n const isSelected = () => context.value() === local.value;\n\n const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (e) => {\n if (local.disabled) {\n e.preventDefault();\n return;\n }\n if (typeof local.onClick === 'function') {\n local.onClick(e);\n }\n context.setValue(local.value);\n };\n\n return (\n <div\n role=\"option\"\n class={local.class}\n data-selected={isSelected() ? '' : undefined}\n data-disabled={local.disabled ? '' : undefined}\n onClick={handleClick}\n {...others}\n >\n {local.children}\n </div>\n );\n};\n\nSelect.Trigger = SelectTrigger;\nSelect.Value = SelectValue;\nSelect.Content = SelectContent;\nSelect.Item = SelectItem;\n\n"],"names":["SelectContext","createContext","useSelectContext","context","useContext","Error","SelectBase","props","local","splitProps","internalValue","setInternalValue","createSignal","value","defaultValue","open","setOpen","triggerRef","setTriggerRef","isControlled","undefined","handleValueChange","newValue","onValueChange","contentElement","setContentElement","el","handleClickOutside","e","isServer","target","trigger","contains","createEffect","setTimeout","document","addEventListener","removeEventListener","onCleanup","contextValue","setValue","_$createComponent","Provider","children","Select","Object","assign","Trigger","Value","Content","Item","SelectTrigger","others","triggerElement","handleClick","onClick","onMount","_el$","_tmpl$","$$click","_ref$","_$use","_$spread","_$mergeProps","class","_$insert","SelectValue","_el$2","_tmpl$2","placeholder","SelectContent","updatePosition","rect","getBoundingClientRect","contentRect","top","bottom","left","width","viewportWidth","window","innerWidth","viewportHeight","innerHeight","finalTop","finalLeft","height","style","requestAnimationFrame","Show","when","Portal","mount","body","_el$3","_tmpl$3","_ref$2","SelectItem","isSelected","disabled","preventDefault","_el$4","_tmpl$4","_$delegateEvents"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
/**
|
|
4
|
+
* 分隔线的方向
|
|
5
|
+
* @default 'horizontal'
|
|
6
|
+
*/
|
|
7
|
+
orientation?: 'horizontal' | 'vertical';
|
|
8
|
+
/**
|
|
9
|
+
* 是否为装饰性分隔线(不用于语义分隔)
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
decorative?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const Separator: Component<SeparatorProps>;
|
|
15
|
+
//# sourceMappingURL=Separator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,SAAS,CAAC,cAAc,CAe/C,CAAC"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { template, spread, mergeProps, memo } from "solid-js/web";
|
|
2
|
+
import { splitProps } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
4
|
+
const Separator = (props) => {
|
|
5
|
+
const [local, others] = splitProps(props, ["orientation", "decorative", "class"]);
|
|
6
|
+
const orientation = () => local.orientation ?? "horizontal";
|
|
7
|
+
const decorative = () => local.decorative ?? false;
|
|
8
|
+
return (() => {
|
|
9
|
+
var _el$ = _tmpl$();
|
|
10
|
+
spread(_el$, mergeProps({
|
|
11
|
+
get role() {
|
|
12
|
+
return decorative() ? "presentation" : "separator";
|
|
13
|
+
},
|
|
14
|
+
get ["aria-orientation"]() {
|
|
15
|
+
return memo(() => !!!decorative())() ? orientation() : void 0;
|
|
16
|
+
},
|
|
17
|
+
get ["data-orientation"]() {
|
|
18
|
+
return orientation();
|
|
19
|
+
},
|
|
20
|
+
get ["class"]() {
|
|
21
|
+
return local.class;
|
|
22
|
+
}
|
|
23
|
+
}, others), false, false);
|
|
24
|
+
return _el$;
|
|
25
|
+
})();
|
|
26
|
+
};
|
|
27
|
+
export {
|
|
28
|
+
Separator
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.js","sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { splitProps } from 'solid-js';\nimport type { Component, JSX } from 'solid-js';\n\nexport interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {\n /**\n * 分隔线的方向\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical';\n /**\n * 是否为装饰性分隔线(不用于语义分隔)\n * @default false\n */\n decorative?: boolean;\n}\n\nexport const Separator: Component<SeparatorProps> = (props) => {\n const [local, others] = splitProps(props, ['orientation', 'decorative', 'class']);\n \n const orientation = () => local.orientation ?? 'horizontal';\n const decorative = () => local.decorative ?? false;\n \n return (\n <div\n role={decorative() ? 'presentation' : 'separator'}\n aria-orientation={!decorative() ? orientation() : undefined}\n data-orientation={orientation()}\n class={local.class}\n {...others}\n />\n );\n};\n\n"],"names":["Separator","props","local","others","splitProps","orientation","decorative","_el$","_tmpl$","_$spread","_$mergeProps","role","_$memo","undefined","class"],"mappings":";;;AAgBO,MAAMA,YAAwCC,CAAAA,UAAU;AAC7D,QAAM,CAACC,OAAOC,MAAM,IAAIC,WAAWH,OAAO,CAAC,eAAe,cAAc,OAAO,CAAC;AAEhF,QAAMI,cAAcA,MAAMH,MAAMG,eAAe;AAC/C,QAAMC,aAAaA,MAAMJ,MAAMI,cAAc;AAE7C,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,WAAA;AAAA,MAAA,IAEIC,OAAI;AAAA,eAAEL,WAAAA,IAAe,iBAAiB;AAAA,MAAW;AAAA,MAAA,KAAA,kBAAA,IAAA;AAAA,eAC/BM,KAAA,MAAA,CAAA,CAAA,CAACN,YAAY,EAAA,IAAGD,YAAAA,IAAgBQ;AAAAA,MAAS;AAAA,MAAA,KAAA,kBAAA,IAAA;AAAA,eACzCR,YAAAA;AAAAA,MAAa;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACxBH,MAAMY;AAAAA,MAAK;AAAA,IAAA,GACdX,MAAM,GAAA,OAAA,KAAA;AAAA,WAAAI;AAAAA,EAAA,GAAA;AAGhB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
export interface SliderProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
|
|
3
|
+
/**
|
|
4
|
+
* 当前值
|
|
5
|
+
*/
|
|
6
|
+
value?: number[];
|
|
7
|
+
/**
|
|
8
|
+
* 默认值
|
|
9
|
+
*/
|
|
10
|
+
defaultValue?: number[];
|
|
11
|
+
/**
|
|
12
|
+
* 值变化回调
|
|
13
|
+
*/
|
|
14
|
+
onValueChange?: (value: number[]) => void;
|
|
15
|
+
/**
|
|
16
|
+
* 最小值
|
|
17
|
+
* @default 0
|
|
18
|
+
*/
|
|
19
|
+
min?: number;
|
|
20
|
+
/**
|
|
21
|
+
* 最大值
|
|
22
|
+
* @default 100
|
|
23
|
+
*/
|
|
24
|
+
max?: number;
|
|
25
|
+
/**
|
|
26
|
+
* 步长
|
|
27
|
+
* @default 1
|
|
28
|
+
*/
|
|
29
|
+
step?: number;
|
|
30
|
+
/**
|
|
31
|
+
* 是否禁用
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
}
|
|
36
|
+
export declare const Slider: Component<SliderProps>;
|
|
37
|
+
//# sourceMappingURL=Slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,GAAG,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACxG;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,WAAW,CAqDzC,CAAC"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { delegateEvents, template, spread, mergeProps, effect, className, setAttribute } from "solid-js/web";
|
|
2
|
+
import { splitProps, createSignal } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div><input type=range class=w-full>`);
|
|
4
|
+
const Slider = (props) => {
|
|
5
|
+
const [local, others] = splitProps(props, ["value", "defaultValue", "onValueChange", "min", "max", "step", "disabled", "class"]);
|
|
6
|
+
const [internalValue, setInternalValue] = createSignal(local.value ?? local.defaultValue ?? [50]);
|
|
7
|
+
const isControlled = () => local.value !== void 0;
|
|
8
|
+
const value = () => isControlled() ? local.value : internalValue();
|
|
9
|
+
const min = () => local.min ?? 0;
|
|
10
|
+
const max = () => local.max ?? 100;
|
|
11
|
+
const step = () => local.step ?? 1;
|
|
12
|
+
const handleInput = (e) => {
|
|
13
|
+
const target = e.currentTarget;
|
|
14
|
+
const newValue = [parseFloat(target.value)];
|
|
15
|
+
if (!isControlled()) {
|
|
16
|
+
setInternalValue(newValue);
|
|
17
|
+
}
|
|
18
|
+
local.onValueChange?.(newValue);
|
|
19
|
+
};
|
|
20
|
+
const percentage = () => {
|
|
21
|
+
const val = value()[0] ?? min();
|
|
22
|
+
return (val - min()) / (max() - min()) * 100;
|
|
23
|
+
};
|
|
24
|
+
return (() => {
|
|
25
|
+
var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
|
|
26
|
+
_el$2.$$input = handleInput;
|
|
27
|
+
spread(_el$2, mergeProps({
|
|
28
|
+
get min() {
|
|
29
|
+
return min();
|
|
30
|
+
},
|
|
31
|
+
get max() {
|
|
32
|
+
return max();
|
|
33
|
+
},
|
|
34
|
+
get step() {
|
|
35
|
+
return step();
|
|
36
|
+
},
|
|
37
|
+
get value() {
|
|
38
|
+
return value()[0] ?? min();
|
|
39
|
+
},
|
|
40
|
+
get disabled() {
|
|
41
|
+
return local.disabled;
|
|
42
|
+
},
|
|
43
|
+
get style() {
|
|
44
|
+
return `--value: ${percentage()}%`;
|
|
45
|
+
}
|
|
46
|
+
}, others), false, false);
|
|
47
|
+
effect((_p$) => {
|
|
48
|
+
var _v$ = local.class, _v$2 = local.disabled ? "" : void 0;
|
|
49
|
+
_v$ !== _p$.e && className(_el$, _p$.e = _v$);
|
|
50
|
+
_v$2 !== _p$.t && setAttribute(_el$, "data-disabled", _p$.t = _v$2);
|
|
51
|
+
return _p$;
|
|
52
|
+
}, {
|
|
53
|
+
e: void 0,
|
|
54
|
+
t: void 0
|
|
55
|
+
});
|
|
56
|
+
return _el$;
|
|
57
|
+
})();
|
|
58
|
+
};
|
|
59
|
+
delegateEvents(["input"]);
|
|
60
|
+
export {
|
|
61
|
+
Slider
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=Slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { splitProps, createSignal } from 'solid-js';\nimport type { Component } from 'solid-js';\nimport type { JSX } from 'solid-js';\n\nexport interface SliderProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {\n /**\n * 当前值\n */\n value?: number[];\n /**\n * 默认值\n */\n defaultValue?: number[];\n /**\n * 值变化回调\n */\n onValueChange?: (value: number[]) => void;\n /**\n * 最小值\n * @default 0\n */\n min?: number;\n /**\n * 最大值\n * @default 100\n */\n max?: number;\n /**\n * 步长\n * @default 1\n */\n step?: number;\n /**\n * 是否禁用\n * @default false\n */\n disabled?: boolean;\n}\n\nexport const Slider: Component<SliderProps> = (props) => {\n const [local, others] = splitProps(props, [\n 'value',\n 'defaultValue',\n 'onValueChange',\n 'min',\n 'max',\n 'step',\n 'disabled',\n 'class',\n ]);\n\n const [internalValue, setInternalValue] = createSignal<number[]>(\n local.value ?? local.defaultValue ?? [50]\n );\n\n const isControlled = () => local.value !== undefined;\n const value = () => (isControlled() ? local.value! : internalValue());\n const min = () => local.min ?? 0;\n const max = () => local.max ?? 100;\n const step = () => local.step ?? 1;\n\n const handleInput = (e: Event) => {\n const target = e.currentTarget as HTMLInputElement;\n const newValue = [parseFloat(target.value)];\n\n if (!isControlled()) {\n setInternalValue(newValue);\n }\n local.onValueChange?.(newValue);\n };\n\n const percentage = () => {\n const val = value()[0] ?? min();\n return ((val - min()) / (max() - min())) * 100;\n };\n\n return (\n <div class={local.class} data-disabled={local.disabled ? '' : undefined}>\n <input\n type=\"range\"\n min={min()}\n max={max()}\n step={step()}\n value={value()[0] ?? min()}\n disabled={local.disabled}\n onInput={handleInput}\n class=\"w-full\"\n style={`--value: ${percentage()}%`}\n {...others}\n />\n </div>\n );\n};\n\n"],"names":["Slider","props","local","others","splitProps","internalValue","setInternalValue","createSignal","value","defaultValue","isControlled","undefined","min","max","step","handleInput","e","target","currentTarget","newValue","parseFloat","onValueChange","percentage","val","_el$","_tmpl$","_el$2","firstChild","$$input","_$spread","_$mergeProps","disabled","style","_$effect","_p$","_v$","class","_v$2","_$className","t","_$setAttribute","_$delegateEvents"],"mappings":";;;AAuCO,MAAMA,SAAkCC,CAAAA,UAAU;AACvD,QAAM,CAACC,OAAOC,MAAM,IAAIC,WAAWH,OAAO,CACxC,SACA,gBACA,iBACA,OACA,OACA,QACA,YACA,OAAO,CACR;AAED,QAAM,CAACI,eAAeC,gBAAgB,IAAIC,aACxCL,MAAMM,SAASN,MAAMO,gBAAgB,CAAC,EAAE,CAC1C;AAEA,QAAMC,eAAeA,MAAMR,MAAMM,UAAUG;AAC3C,QAAMH,QAAQA,MAAOE,aAAAA,IAAiBR,MAAMM,QAASH,cAAAA;AACrD,QAAMO,MAAMA,MAAMV,MAAMU,OAAO;AAC/B,QAAMC,MAAMA,MAAMX,MAAMW,OAAO;AAC/B,QAAMC,OAAOA,MAAMZ,MAAMY,QAAQ;AAEjC,QAAMC,cAAcA,CAACC,MAAa;AAChC,UAAMC,SAASD,EAAEE;AACjB,UAAMC,WAAW,CAACC,WAAWH,OAAOT,KAAK,CAAC;AAE1C,QAAI,CAACE,gBAAgB;AACnBJ,uBAAiBa,QAAQ;AAAA,IAC3B;AACAjB,UAAMmB,gBAAgBF,QAAQ;AAAA,EAChC;AAEA,QAAMG,aAAaA,MAAM;AACvB,UAAMC,MAAMf,MAAAA,EAAQ,CAAC,KAAKI,IAAAA;AAC1B,YAASW,MAAMX,IAAAA,MAAUC,IAAAA,IAAQD,SAAU;AAAA,EAC7C;AAEA,UAAA,MAAA;AAAA,QAAAY,OAAAC,OAAAA,GAAAC,QAAAF,KAAAG;AAAAD,UAAAE,UASeb;AAAWc,WAAAH,OAAAI,WAAA;AAAA,MAAA,IALpBlB,MAAG;AAAA,eAAEA,IAAAA;AAAAA,MAAK;AAAA,MAAA,IACVC,MAAG;AAAA,eAAEA,IAAAA;AAAAA,MAAK;AAAA,MAAA,IACVC,OAAI;AAAA,eAAEA,KAAAA;AAAAA,MAAM;AAAA,MAAA,IACZN,QAAK;AAAA,eAAEA,MAAAA,EAAQ,CAAC,KAAKI,IAAAA;AAAAA,MAAK;AAAA,MAAA,IAC1BmB,WAAQ;AAAA,eAAE7B,MAAM6B;AAAAA,MAAQ;AAAA,MAAA,IAGxBC,QAAK;AAAA,eAAE,YAAYV,YAAY;AAAA,MAAG;AAAA,IAAA,GAC9BnB,MAAM,GAAA,OAAA,KAAA;AAAA8B,WAAAC,CAAAA,QAAA;AAAA,UAAAC,MAXFjC,MAAMkC,OAAKC,OAAiBnC,MAAM6B,WAAW,KAAKpB;AAASwB,cAAAD,IAAAlB,KAAAsB,UAAAd,MAAAU,IAAAlB,IAAAmB,GAAA;AAAAE,eAAAH,IAAAK,KAAAC,aAAAhB,MAAA,iBAAAU,IAAAK,IAAAF,IAAA;AAAA,aAAAH;AAAAA,IAAA,GAAA;AAAA,MAAAlB,GAAAL;AAAAA,MAAA4B,GAAA5B;AAAAA,IAAAA,CAAA;AAAA,WAAAa;AAAAA,EAAA,GAAA;AAe3E;AAAEiB,eAAA,CAAA,OAAA,CAAA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
export interface SwitchProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
3
|
+
/**
|
|
4
|
+
* 是否选中
|
|
5
|
+
*/
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
/**
|
|
8
|
+
* 默认选中状态
|
|
9
|
+
*/
|
|
10
|
+
defaultChecked?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* 选中状态变化回调
|
|
13
|
+
*/
|
|
14
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
15
|
+
/**
|
|
16
|
+
* 是否禁用
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* 是否必填
|
|
22
|
+
* @default false
|
|
23
|
+
*/
|
|
24
|
+
required?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export declare const Switch: Component<SwitchProps>;
|
|
27
|
+
//# sourceMappingURL=Switch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAChG;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,WAAW,CA6CzC,CAAC"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { delegateEvents, template, spread, mergeProps } from "solid-js/web";
|
|
2
|
+
import { splitProps, createSignal } from "solid-js";
|
|
3
|
+
var _tmpl$ = /* @__PURE__ */ template(`<button type=button role=switch>`);
|
|
4
|
+
const Switch = (props) => {
|
|
5
|
+
const [local, others] = splitProps(props, ["checked", "defaultChecked", "onCheckedChange", "disabled", "required", "class", "id"]);
|
|
6
|
+
const [internalChecked, setInternalChecked] = createSignal(local.checked ?? local.defaultChecked ?? false);
|
|
7
|
+
const isControlled = () => local.checked !== void 0;
|
|
8
|
+
const checked = () => isControlled() ? local.checked : internalChecked();
|
|
9
|
+
const handleClick = () => {
|
|
10
|
+
if (local.disabled) return;
|
|
11
|
+
const newChecked = !checked();
|
|
12
|
+
if (!isControlled()) {
|
|
13
|
+
setInternalChecked(newChecked);
|
|
14
|
+
}
|
|
15
|
+
local.onCheckedChange?.(newChecked);
|
|
16
|
+
};
|
|
17
|
+
return (() => {
|
|
18
|
+
var _el$ = _tmpl$();
|
|
19
|
+
_el$.$$click = handleClick;
|
|
20
|
+
spread(_el$, mergeProps({
|
|
21
|
+
get id() {
|
|
22
|
+
return local.id;
|
|
23
|
+
},
|
|
24
|
+
get ["aria-checked"]() {
|
|
25
|
+
return checked();
|
|
26
|
+
},
|
|
27
|
+
get ["aria-required"]() {
|
|
28
|
+
return local.required;
|
|
29
|
+
},
|
|
30
|
+
get disabled() {
|
|
31
|
+
return local.disabled;
|
|
32
|
+
},
|
|
33
|
+
get ["class"]() {
|
|
34
|
+
return local.class;
|
|
35
|
+
},
|
|
36
|
+
get ["data-state"]() {
|
|
37
|
+
return checked() ? "checked" : "unchecked";
|
|
38
|
+
},
|
|
39
|
+
get ["data-disabled"]() {
|
|
40
|
+
return local.disabled ? "" : void 0;
|
|
41
|
+
}
|
|
42
|
+
}, others), false, false);
|
|
43
|
+
return _el$;
|
|
44
|
+
})();
|
|
45
|
+
};
|
|
46
|
+
delegateEvents(["click"]);
|
|
47
|
+
export {
|
|
48
|
+
Switch
|
|
49
|
+
};
|
|
50
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { splitProps, createSignal } from 'solid-js';\nimport type { Component } from 'solid-js';\nimport type { JSX } from 'solid-js';\n\nexport interface SwitchProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n /**\n * 是否选中\n */\n checked?: boolean;\n /**\n * 默认选中状态\n */\n defaultChecked?: boolean;\n /**\n * 选中状态变化回调\n */\n onCheckedChange?: (checked: boolean) => void;\n /**\n * 是否禁用\n * @default false\n */\n disabled?: boolean;\n /**\n * 是否必填\n * @default false\n */\n required?: boolean;\n}\n\nexport const Switch: Component<SwitchProps> = (props) => {\n const [local, others] = splitProps(props, [\n 'checked',\n 'defaultChecked',\n 'onCheckedChange',\n 'disabled',\n 'required',\n 'class',\n 'id',\n ]);\n\n const [internalChecked, setInternalChecked] = createSignal(\n local.checked ?? local.defaultChecked ?? false\n );\n\n const isControlled = () => local.checked !== undefined;\n const checked = () => (isControlled() ? local.checked! : internalChecked());\n\n const handleClick = () => {\n if (local.disabled) return;\n \n const newChecked = !checked();\n \n if (!isControlled()) {\n setInternalChecked(newChecked);\n }\n \n local.onCheckedChange?.(newChecked);\n };\n\n return (\n <button\n type=\"button\"\n role=\"switch\"\n id={local.id}\n aria-checked={checked()}\n aria-required={local.required}\n disabled={local.disabled}\n class={local.class}\n onClick={handleClick}\n data-state={checked() ? 'checked' : 'unchecked'}\n data-disabled={local.disabled ? '' : undefined}\n {...others}\n />\n );\n};\n\n"],"names":["Switch","props","local","others","splitProps","internalChecked","setInternalChecked","createSignal","checked","defaultChecked","isControlled","undefined","handleClick","disabled","newChecked","onCheckedChange","_el$","_tmpl$","$$click","_$spread","_$mergeProps","id","required","class","_$delegateEvents"],"mappings":";;;AA6BO,MAAMA,SAAkCC,CAAAA,UAAU;AACvD,QAAM,CAACC,OAAOC,MAAM,IAAIC,WAAWH,OAAO,CACxC,WACA,kBACA,mBACA,YACA,YACA,SACA,IAAI,CACL;AAED,QAAM,CAACI,iBAAiBC,kBAAkB,IAAIC,aAC5CL,MAAMM,WAAWN,MAAMO,kBAAkB,KAC3C;AAEA,QAAMC,eAAeA,MAAMR,MAAMM,YAAYG;AAC7C,QAAMH,UAAUA,MAAOE,aAAAA,IAAiBR,MAAMM,UAAWH,gBAAAA;AAEzD,QAAMO,cAAcA,MAAM;AACxB,QAAIV,MAAMW,SAAU;AAEpB,UAAMC,aAAa,CAACN,QAAAA;AAEpB,QAAI,CAACE,gBAAgB;AACnBJ,yBAAmBQ,UAAU;AAAA,IAC/B;AAEAZ,UAAMa,kBAAkBD,UAAU;AAAA,EACpC;AAEA,UAAA,MAAA;AAAA,QAAAE,OAAAC,OAAAA;AAAAD,SAAAE,UASaN;AAAWO,WAAAH,MAAAI,WAAA;AAAA,MAAA,IALpBC,KAAE;AAAA,eAAEnB,MAAMmB;AAAAA,MAAE;AAAA,MAAA,KAAA,cAAA,IAAA;AAAA,eACEb,QAAAA;AAAAA,MAAS;AAAA,MAAA,KAAA,eAAA,IAAA;AAAA,eACRN,MAAMoB;AAAAA,MAAQ;AAAA,MAAA,IAC7BT,WAAQ;AAAA,eAAEX,MAAMW;AAAAA,MAAQ;AAAA,MAAA,KAAA,OAAA,IAAA;AAAA,eACjBX,MAAMqB;AAAAA,MAAK;AAAA,MAAA,KAAA,YAAA,IAAA;AAAA,eAENf,QAAAA,IAAY,YAAY;AAAA,MAAW;AAAA,MAAA,KAAA,eAAA,IAAA;AAAA,eAChCN,MAAMW,WAAW,KAAKF;AAAAA,MAAS;AAAA,IAAA,GAC1CR,MAAM,GAAA,OAAA,KAAA;AAAA,WAAAa;AAAAA,EAAA,GAAA;AAGhB;AAAEQ,eAAA,CAAA,OAAA,CAAA;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { Component, JSX } from 'solid-js';
|
|
2
|
+
interface TabsContextValue {
|
|
3
|
+
value: () => string | undefined;
|
|
4
|
+
setValue: (value: string) => void;
|
|
5
|
+
orientation?: "horizontal" | "vertical";
|
|
6
|
+
}
|
|
7
|
+
export declare const useTabsContext: () => TabsContextValue;
|
|
8
|
+
export interface TabsProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
9
|
+
/**
|
|
10
|
+
* 当前激活的标签页值
|
|
11
|
+
*/
|
|
12
|
+
value?: string;
|
|
13
|
+
/**
|
|
14
|
+
* 默认激活的标签页值
|
|
15
|
+
*/
|
|
16
|
+
defaultValue?: string;
|
|
17
|
+
/**
|
|
18
|
+
* 值变化回调
|
|
19
|
+
*/
|
|
20
|
+
onValueChange?: (value: string) => void;
|
|
21
|
+
/**
|
|
22
|
+
* 标签页方向
|
|
23
|
+
* @default 'horizontal'
|
|
24
|
+
*/
|
|
25
|
+
orientation?: "horizontal" | "vertical";
|
|
26
|
+
/**
|
|
27
|
+
* 子元素
|
|
28
|
+
*/
|
|
29
|
+
children?: JSX.Element;
|
|
30
|
+
}
|
|
31
|
+
export interface TabsComponent extends Component<TabsProps> {
|
|
32
|
+
List: Component<TabsListProps>;
|
|
33
|
+
Trigger: Component<TabsTriggerProps>;
|
|
34
|
+
Content: Component<TabsContentProps>;
|
|
35
|
+
}
|
|
36
|
+
export declare const Tabs: TabsComponent;
|
|
37
|
+
export interface TabsListProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
38
|
+
/**
|
|
39
|
+
* 子元素
|
|
40
|
+
*/
|
|
41
|
+
children?: JSX.Element;
|
|
42
|
+
}
|
|
43
|
+
export declare const TabsList: Component<TabsListProps>;
|
|
44
|
+
export interface TabsTriggerProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
45
|
+
/**
|
|
46
|
+
* 标签页的值
|
|
47
|
+
*/
|
|
48
|
+
value: string;
|
|
49
|
+
/**
|
|
50
|
+
* 是否禁用
|
|
51
|
+
* @default false
|
|
52
|
+
*/
|
|
53
|
+
disabled?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* 子元素
|
|
56
|
+
*/
|
|
57
|
+
children?: JSX.Element;
|
|
58
|
+
}
|
|
59
|
+
export declare const TabsTrigger: Component<TabsTriggerProps>;
|
|
60
|
+
export interface TabsContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
61
|
+
/**
|
|
62
|
+
* 内容对应的标签页值
|
|
63
|
+
*/
|
|
64
|
+
value: string;
|
|
65
|
+
/**
|
|
66
|
+
* 子元素
|
|
67
|
+
*/
|
|
68
|
+
children?: JSX.Element;
|
|
69
|
+
}
|
|
70
|
+
export declare const TabsContent: Component<TabsContentProps>;
|
|
71
|
+
export {};
|
|
72
|
+
//# sourceMappingURL=Tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/C,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAID,eAAO,MAAM,cAAc,wBAM1B,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AA6CD,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,SAAS,CAAC;IACzD,IAAI,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAC/B,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IACrC,OAAO,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,IAAI,EAIX,aAAa,CAAC;AAEpB,MAAM,WAAW,aAAc,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,aAAa,CAe7C,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACnD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAqCnD,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,SAAS,CAAC,gBAAgB,CAmBnD,CAAC"}
|