@pathscale/ui 1.1.63 → 1.1.65
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/_shared/index.d.ts +1 -0
- package/dist/components/_shared/index.js +3 -0
- package/dist/components/_shared/overlayPosition.d.ts +19 -0
- package/dist/components/_shared/overlayPosition.js +115 -0
- package/dist/components/dropdown/Dropdown.css +36 -7
- package/dist/components/dropdown/Dropdown.d.ts +7 -1
- package/dist/components/dropdown/Dropdown.js +84 -40
- package/dist/components/dropdown/index.d.ts +1 -1
- package/dist/components/popover/Popover.css +10 -18
- package/dist/components/popover/Popover.d.ts +3 -1
- package/dist/components/popover/Popover.js +70 -37
- package/dist/components/select/Select.css +38 -4
- package/dist/components/select/Select.d.ts +4 -0
- package/dist/components/select/Select.js +75 -20
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/table/Table.css +6 -0
- package/dist/components/theme-color-picker/ThemeColorPicker.classes.d.ts +1 -1
- package/dist/components/theme-color-picker/ThemeColorPicker.classes.js +1 -1
- package/dist/components/theme-color-picker/ThemeColorPicker.d.ts +12 -0
- package/dist/components/theme-color-picker/ThemeColorPicker.js +76 -49
- package/dist/components/theme-color-picker/index.d.ts +1 -1
- package/dist/purge-manifest.json +375 -385
- package/package.json +2 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
|
|
2
2
|
import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
|
|
3
|
-
import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
|
|
4
3
|
import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
|
|
5
4
|
import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__ from "../color-wheel-flower/index.js";
|
|
6
5
|
import * as __WEBPACK_EXTERNAL_MODULE__color_wheel_flower_ColorUtils_js_abf9b965__ from "../color-wheel-flower/ColorUtils.js";
|
|
7
6
|
import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
|
|
8
7
|
import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
|
|
8
|
+
import * as __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__ from "../_shared/overlayPosition.js";
|
|
9
9
|
import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
|
|
10
10
|
import * as __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__ from "./ThemeColorPicker.classes.js";
|
|
11
11
|
var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>");
|
|
@@ -20,6 +20,8 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
20
20
|
"onThemeSwitch",
|
|
21
21
|
"aria-label",
|
|
22
22
|
"align",
|
|
23
|
+
"placement",
|
|
24
|
+
"autoFlip",
|
|
23
25
|
"children",
|
|
24
26
|
"class",
|
|
25
27
|
"className",
|
|
@@ -28,7 +30,8 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
28
30
|
]);
|
|
29
31
|
const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
|
|
30
32
|
const [featureAvailable, setFeatureAvailable] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(true);
|
|
31
|
-
|
|
33
|
+
const [containerRef, setContainerRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
|
|
34
|
+
const [popoverRef, setPopoverRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
|
|
32
35
|
const store = (0, __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__.createHueShiftStore)(local.storagePrefix ?? "theme");
|
|
33
36
|
const colorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>hexToColorValue(store.themeColor()));
|
|
34
37
|
const handleColorChange = (color)=>{
|
|
@@ -81,7 +84,10 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
81
84
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
|
|
82
85
|
if (!isOpen()) return;
|
|
83
86
|
const handleClickOutside = (e)=>{
|
|
84
|
-
|
|
87
|
+
const target = e.target;
|
|
88
|
+
if (containerRef()?.contains(target)) return;
|
|
89
|
+
if (popoverRef()?.contains(target)) return;
|
|
90
|
+
setIsOpen(false);
|
|
85
91
|
};
|
|
86
92
|
const timer = setTimeout(()=>{
|
|
87
93
|
document.addEventListener("click", handleClickOutside);
|
|
@@ -108,15 +114,24 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
108
114
|
onFormatChange: ()=>{}
|
|
109
115
|
});
|
|
110
116
|
const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.base, local.class, local.className);
|
|
111
|
-
const popoverClasses = ()=>
|
|
117
|
+
const popoverClasses = ()=>__WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.popover;
|
|
118
|
+
const overlayPosition = (0, __WEBPACK_EXTERNAL_MODULE__shared_overlayPosition_js_ab299723__.createOverlayPosition)({
|
|
119
|
+
open: isOpen,
|
|
120
|
+
triggerRef: containerRef,
|
|
121
|
+
overlayRef: popoverRef,
|
|
122
|
+
placement: ()=>local.placement ?? "bottom",
|
|
123
|
+
offset: ()=>8,
|
|
124
|
+
autoFlip: ()=>local.autoFlip ?? true,
|
|
125
|
+
align: ()=>"start" === local.align ? "start" : "end"
|
|
126
|
+
});
|
|
127
|
+
const popoverStyle = ()=>overlayPosition.style();
|
|
112
128
|
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
|
|
113
129
|
get when () {
|
|
114
130
|
return featureAvailable();
|
|
115
131
|
},
|
|
116
132
|
get children () {
|
|
117
133
|
var _el$ = _tmpl$2();
|
|
118
|
-
|
|
119
|
-
"function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : containerRef = _el$;
|
|
134
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setContainerRef, _el$);
|
|
120
135
|
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
121
136
|
class: classes()
|
|
122
137
|
}), {
|
|
@@ -151,52 +166,64 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
|
|
|
151
166
|
return isOpen();
|
|
152
167
|
},
|
|
153
168
|
get children () {
|
|
154
|
-
|
|
155
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
156
|
-
class: popoverClasses()
|
|
157
|
-
})), false, true);
|
|
158
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
|
|
159
|
-
get value () {
|
|
160
|
-
return contextValue();
|
|
161
|
-
},
|
|
169
|
+
return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Portal, {
|
|
162
170
|
get children () {
|
|
163
|
-
var _el$
|
|
164
|
-
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}), false,
|
|
193
|
-
|
|
194
|
-
|
|
171
|
+
var _el$2 = _tmpl$2();
|
|
172
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setPopoverRef, _el$2);
|
|
173
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
174
|
+
class: popoverClasses()
|
|
175
|
+
}), {
|
|
176
|
+
get ["data-placement"] () {
|
|
177
|
+
return overlayPosition.placement();
|
|
178
|
+
},
|
|
179
|
+
get style () {
|
|
180
|
+
return popoverStyle();
|
|
181
|
+
}
|
|
182
|
+
}), false, true);
|
|
183
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorPickerContext.Provider, {
|
|
184
|
+
get value () {
|
|
185
|
+
return contextValue();
|
|
186
|
+
},
|
|
187
|
+
get children () {
|
|
188
|
+
var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
|
|
189
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
190
|
+
class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.row
|
|
191
|
+
})), false, true);
|
|
192
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
193
|
+
class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelWrap
|
|
194
|
+
})), false, true);
|
|
195
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_wheel_flower_index_js_cbe90990__.ColorWheelFlower, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
196
|
+
class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.wheelCustom
|
|
197
|
+
}))));
|
|
198
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
199
|
+
class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.grayscaleList
|
|
200
|
+
})), false, true);
|
|
201
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
|
|
202
|
+
each: GRAYSCALE_SWATCHES,
|
|
203
|
+
children: (g)=>(()=>{
|
|
204
|
+
var _el$6 = _tmpl$3();
|
|
205
|
+
(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
|
|
206
|
+
class: __WEBPACK_EXTERNAL_MODULE__ThemeColorPicker_classes_js_79a82485__.CLASSES.swatchButton
|
|
207
|
+
}), {
|
|
208
|
+
get style () {
|
|
209
|
+
return {
|
|
210
|
+
"background-color": `${g.hex}`
|
|
211
|
+
};
|
|
212
|
+
},
|
|
213
|
+
get ["aria-label"] () {
|
|
214
|
+
return g.label;
|
|
215
|
+
},
|
|
216
|
+
onClick: ()=>handleGrayscale(g)
|
|
217
|
+
}), false, false);
|
|
218
|
+
return _el$6;
|
|
219
|
+
})()
|
|
220
|
+
}));
|
|
221
|
+
return _el$3;
|
|
222
|
+
}
|
|
195
223
|
}));
|
|
196
|
-
return _el$
|
|
224
|
+
return _el$2;
|
|
197
225
|
}
|
|
198
|
-
})
|
|
199
|
-
return _el$2;
|
|
226
|
+
});
|
|
200
227
|
}
|
|
201
228
|
}), null);
|
|
202
229
|
return _el$;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { default as ThemeColorPicker } from "./ThemeColorPicker";
|
|
2
|
-
export type { ThemeColorPickerProps, ThemeColorPickerAlign } from "./ThemeColorPicker";
|
|
2
|
+
export type { ThemeColorPickerProps, ThemeColorPickerAlign, ThemeColorPickerPlacement, } from "./ThemeColorPicker";
|
|
3
3
|
export { createHueShiftStore, getDefaultHueShiftStore, resetHueShift, type HueShiftStore, } from "./hueShift";
|