@pathscale/ui 1.1.2 → 1.1.3

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.
Files changed (2) hide show
  1. package/dist/components/theme-color-picker/ThemeColorPicker.js +70 -30
  2. package/package.json +1 -1
package/dist/components/theme-color-picker/ThemeColorPicker.js CHANGED
@@ -5,11 +5,9 @@ import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__ from "../colorpicker/index.js";
6
6
  import * as __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__ from "../colorpicker/ColorUtils.js";
7
7
  import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
8
- import * as __WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__ from "../color-field/index.js";
9
- import * as __WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__ from "../color-slider/index.js";
10
8
  import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
11
9
  import * as __WEBPACK_EXTERNAL_MODULE__hueShift_js_ca4235e5__ from "./hueShift.js";
12
- var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class=space-y-3><div class="flex justify-center">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 w-[248px] rounded-lg border border-base-300 bg-base-100 p-4 shadow-xl">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
10
+ var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="flex items-center gap-3"><div class="flex justify-center"></div><div class="flex flex-col gap-1.5">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 z-50 mt-2 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button class="h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110">');
13
11
  function hueToColorValue(hue, sat) {
14
12
  if (null === hue) return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(0, 0, 100, 1);
15
13
  return (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.createColorFromHsl)(hue, sat, 50, 1);
@@ -46,14 +44,58 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
46
44
  if (s < 10 && l > 90) return void setThemeColor(null, 100);
47
45
  setThemeColor(h, s);
48
46
  };
49
- const handleHueChange = (hue)=>{
50
- const saturation = null === store().hueShift() ? 100 : store().hueSaturation();
51
- setThemeColor(hue, saturation);
52
- };
53
- const handleFieldChange = (value)=>{
54
- const parsed = (0, __WEBPACK_EXTERNAL_MODULE__colorpicker_ColorUtils_js_79ac07b0__.parseColor)(value);
55
- if (!parsed) return;
56
- handleColorChange(parsed);
47
+ const GRAYSCALE_HUES = [
48
+ {
49
+ label: "White",
50
+ hsl: [
51
+ 0,
52
+ 0,
53
+ 100
54
+ ]
55
+ },
56
+ {
57
+ label: "Light gray",
58
+ hsl: [
59
+ 0,
60
+ 0,
61
+ 80
62
+ ]
63
+ },
64
+ {
65
+ label: "Gray",
66
+ hsl: [
67
+ 0,
68
+ 0,
69
+ 60
70
+ ]
71
+ },
72
+ {
73
+ label: "Dark gray",
74
+ hsl: [
75
+ 0,
76
+ 0,
77
+ 40
78
+ ]
79
+ },
80
+ {
81
+ label: "Charcoal",
82
+ hsl: [
83
+ 0,
84
+ 0,
85
+ 20
86
+ ]
87
+ },
88
+ {
89
+ label: "Black",
90
+ hsl: [
91
+ 0,
92
+ 0,
93
+ 0
94
+ ]
95
+ }
96
+ ];
97
+ const handleGrayscale = (hsl)=>{
98
+ setThemeColor(null, 100);
57
99
  };
58
100
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
59
101
  if (!isOpen()) return;
@@ -134,27 +176,24 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
134
176
  return contextValue();
135
177
  },
136
178
  get children () {
137
- var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild;
179
+ var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
138
180
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__colorpicker_index_js_cf395329__.ColorWheelFlower, {
139
181
  class: "color-wheel-custom"
140
182
  }));
141
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_slider_index_js_89667266__["default"], {
142
- type: "hue",
143
- get value () {
144
- return colorValue().hsl.h;
145
- },
146
- onChange: handleHueChange,
147
- "aria-label": "Theme hue"
148
- }), null);
149
- (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__color_field_index_js_d63b754b__["default"], {
150
- get value () {
151
- return colorValue().hex.toUpperCase();
152
- },
153
- format: "hex",
154
- onChange: handleFieldChange,
155
- "aria-label": "Theme color value",
156
- fullWidth: true
157
- }), null);
183
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>GRAYSCALE_HUES.map((g)=>(()=>{
184
+ var _el$6 = _tmpl$4();
185
+ _el$6.$$click = ()=>handleGrayscale(g.hsl);
186
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
187
+ var _v$ = `hsl(${g.hsl[0]}, ${g.hsl[1]}%, ${g.hsl[2]}%)`, _v$2 = g.label;
188
+ _v$ !== _p$.e && (null != (_p$.e = _v$) ? _el$6.style.setProperty("background-color", _v$) : _el$6.style.removeProperty("background-color"));
189
+ _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$6, "aria-label", _p$.t = _v$2);
190
+ return _p$;
191
+ }, {
192
+ e: void 0,
193
+ t: void 0
194
+ });
195
+ return _el$6;
196
+ })()));
158
197
  return _el$3;
159
198
  }
160
199
  }));
@@ -167,6 +206,7 @@ const ThemeColorPicker_ThemeColorPicker = (props)=>{
167
206
  };
168
207
  const ThemeColorPicker = ThemeColorPicker_ThemeColorPicker;
169
208
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
170
- "keydown"
209
+ "keydown",
210
+ "click"
171
211
  ]);
172
212
  export { ThemeColorPicker as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pathscale/ui",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "author": "pathscale",
5
5
  "repository": {
6
6
  "type": "git",