@pathscale/ui 1.1.75 → 1.1.76

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 (4) hide show
  1. package/dist/components/glass-panel/GlassPanel.css +61 -27
  2. package/dist/components/glass-panel/GlassPanel.js +187 -0
  3. package/package.json +1 -1
  4. package/dist/purge-manifest.json +0 -3967
package/dist/components/glass-panel/GlassPanel.css CHANGED
@@ -19,39 +19,73 @@
19
19
  }
20
20
 
21
21
  .glass-panel--liquid {
22
+ --glass-panel-liquid-bg: color-mix(
23
+ in oklab,
24
+ var(--color-base-100) 12%,
25
+ transparent
26
+ );
27
+ --glass-panel-liquid-border: color-mix(
28
+ in oklab,
29
+ var(--color-base-content) 14%,
30
+ transparent
31
+ );
32
+ --glass-panel-liquid-highlight: color-mix(
33
+ in oklab,
34
+ var(--color-base-100) 48%,
35
+ transparent
36
+ );
37
+ --glass-panel-liquid-inner: color-mix(
38
+ in oklab,
39
+ var(--color-base-100) 10%,
40
+ transparent
41
+ );
42
+ --glass-panel-liquid-brightness: 1.03;
43
+ --glass-panel-liquid-saturation: 1.18;
44
+ isolation: isolate;
22
45
  overflow: hidden;
23
- background: color-mix(in srgb, var(--color-base-100) 4%, transparent);
24
- border-color: color-mix(in srgb, var(--color-base-content) 9%, transparent);
25
- box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), inset
26
- 0 -1px 0 color-mix(in srgb, black 7%, transparent);
27
- backdrop-filter: blur(6px) saturate(1.12);
28
- -webkit-backdrop-filter: blur(6px) saturate(1.12);
29
- }
30
-
31
- .glass-panel--liquid::after {
32
- position: absolute;
33
- inset: 0;
34
- border-radius: inherit;
35
- pointer-events: none;
36
- content: "";
37
- }
38
-
39
- .glass-panel--liquid::after {
40
- z-index: 1;
41
- padding: 1px;
42
- background: color-mix(in srgb, white 34%, transparent) border-box;
43
- mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
44
- mask-composite: exclude;
45
- -webkit-mask: linear-gradient(#000 0 0) content-box,
46
- linear-gradient(#000 0 0);
47
- -webkit-mask-composite: xor;
48
- opacity: 0.34;
46
+ background: var(--glass-panel-liquid-bg);
47
+ border-color: var(--glass-panel-liquid-border);
48
+ box-shadow:
49
+ inset 0 0 3px 0 var(--glass-panel-liquid-highlight),
50
+ inset 0 1px 10px var(--glass-panel-liquid-inner);
51
+ backdrop-filter: blur(1px) blur(2px)
52
+ brightness(var(--glass-panel-liquid-brightness, 1.08))
53
+ saturate(var(--glass-panel-liquid-saturation, 1.35));
54
+ -webkit-backdrop-filter: blur(1px) blur(2px)
55
+ brightness(var(--glass-panel-liquid-brightness, 1.08))
56
+ saturate(var(--glass-panel-liquid-saturation, 1.35));
57
+ }
58
+
59
+ [data-theme="dark"] .glass-panel--liquid,
60
+ .glass-panel--liquid[data-theme="dark"] {
61
+ --glass-panel-liquid-bg: color-mix(
62
+ in oklab,
63
+ var(--color-base-200) 22%,
64
+ transparent
65
+ );
66
+ --glass-panel-liquid-border: color-mix(
67
+ in oklab,
68
+ var(--color-base-content) 10%,
69
+ transparent
70
+ );
71
+ --glass-panel-liquid-highlight: color-mix(
72
+ in oklab,
73
+ var(--color-base-content) 14%,
74
+ transparent
75
+ );
76
+ --glass-panel-liquid-inner: color-mix(
77
+ in oklab,
78
+ var(--color-base-content) 5%,
79
+ transparent
80
+ );
81
+ --glass-panel-liquid-brightness: 0.98;
82
+ --glass-panel-liquid-saturation: 1.08;
49
83
  }
50
84
 
51
85
  .glass-panel--liquid > .glass-panel__header-button,
52
86
  .glass-panel--liquid > .glass-panel__content {
53
87
  position: relative;
54
- z-index: 2;
88
+ z-index: 1;
55
89
  }
56
90
 
57
91
  .glass-panel--blur-none {
package/dist/components/glass-panel/GlassPanel.js CHANGED
@@ -4,7 +4,136 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
4
4
  import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__ from "./GlassPanel.classes.js";
6
6
  var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button type=button><span></span><svg><path stroke-linecap=round stroke-linejoin=round d="M19 9l-7 7-7-7">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><div><div>");
7
+ const LIQUID_DEPTH_RATIO = 0.05;
8
+ const LIQUID_RADIUS_RATIO = 0.08;
9
+ const LIQUID_STRENGTH_RATIO = 0.5;
10
+ const LIQUID_CHROMATIC_ABERRATION_RATIO = 0.025;
11
+ const LIQUID_BLUR = 2;
12
+ const getDisplacementMap = ({ height, width, radius, depth })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
13
+ <style>
14
+ .mix { mix-blend-mode: screen; }
15
+ </style>
16
+ <defs>
17
+ <linearGradient
18
+ id="Y"
19
+ x1="0"
20
+ x2="0"
21
+ y1="${Math.ceil(radius / height * 15)}%"
22
+ y2="${Math.floor(100 - radius / height * 15)}%">
23
+ <stop offset="0%" stop-color="#0F0" />
24
+ <stop offset="100%" stop-color="#000" />
25
+ </linearGradient>
26
+ <linearGradient
27
+ id="X"
28
+ x1="${Math.ceil(radius / width * 15)}%"
29
+ x2="${Math.floor(100 - radius / width * 15)}%"
30
+ y1="0"
31
+ y2="0">
32
+ <stop offset="0%" stop-color="#F00" />
33
+ <stop offset="100%" stop-color="#000" />
34
+ </linearGradient>
35
+ </defs>
36
+
37
+ <rect x="0" y="0" height="${height}" width="${width}" fill="#808080" />
38
+ <g filter="blur(2px)">
39
+ <rect x="0" y="0" height="${height}" width="${width}" fill="#000080" />
40
+ <rect
41
+ x="0"
42
+ y="0"
43
+ height="${height}"
44
+ width="${width}"
45
+ fill="url(#Y)"
46
+ class="mix"
47
+ />
48
+ <rect
49
+ x="0"
50
+ y="0"
51
+ height="${height}"
52
+ width="${width}"
53
+ fill="url(#X)"
54
+ class="mix"
55
+ />
56
+ <rect
57
+ x="${depth}"
58
+ y="${depth}"
59
+ height="${height - 2 * depth}"
60
+ width="${width - 2 * depth}"
61
+ fill="#808080"
62
+ rx="${radius}"
63
+ ry="${radius}"
64
+ filter="blur(${depth}px)"
65
+ />
66
+ </g>
67
+ </svg>`)}`;
68
+ const getDisplacementFilter = ({ height, width, radius, depth, strength, chromaticAberration })=>`data:image/svg+xml;utf8,${encodeURIComponent(`<svg height="${height}" width="${width}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
69
+ <defs>
70
+ <filter id="displace" color-interpolation-filters="sRGB">
71
+ <feImage x="0" y="0" height="${height}" width="${width}" href="${getDisplacementMap({
72
+ height,
73
+ width,
74
+ radius,
75
+ depth
76
+ })}" result="displacementMap" />
77
+ <feDisplacementMap
78
+ transform-origin="center"
79
+ in="SourceGraphic"
80
+ in2="displacementMap"
81
+ scale="${strength + 2 * chromaticAberration}"
82
+ xChannelSelector="R"
83
+ yChannelSelector="G"
84
+ />
85
+ <feColorMatrix
86
+ type="matrix"
87
+ values="1 0 0 0 0
88
+ 0 0 0 0 0
89
+ 0 0 0 0 0
90
+ 0 0 0 1 0"
91
+ result="displacedR"
92
+ />
93
+ <feDisplacementMap
94
+ in="SourceGraphic"
95
+ in2="displacementMap"
96
+ scale="${strength + chromaticAberration}"
97
+ xChannelSelector="R"
98
+ yChannelSelector="G"
99
+ />
100
+ <feColorMatrix
101
+ type="matrix"
102
+ values="0 0 0 0 0
103
+ 0 1 0 0 0
104
+ 0 0 0 0 0
105
+ 0 0 0 1 0"
106
+ result="displacedG"
107
+ />
108
+ <feDisplacementMap
109
+ in="SourceGraphic"
110
+ in2="displacementMap"
111
+ scale="${strength}"
112
+ xChannelSelector="R"
113
+ yChannelSelector="G"
114
+ />
115
+ <feColorMatrix
116
+ type="matrix"
117
+ values="0 0 0 0 0
118
+ 0 0 0 0 0
119
+ 0 0 1 0 0
120
+ 0 0 0 1 0"
121
+ result="displacedB"
122
+ />
123
+ <feBlend in="displacedR" in2="displacedG" mode="screen"/>
124
+ <feBlend in2="displacedB" mode="screen"/>
125
+ </filter>
126
+ </defs>
127
+ </svg>`)}#displace`;
128
+ const getPx = (value)=>{
129
+ const parsed = Number.parseFloat(value);
130
+ return Number.isFinite(parsed) ? parsed : 0;
131
+ };
132
+ const callEventHandler = (handler, event)=>{
133
+ if ("function" == typeof handler) handler(event);
134
+ };
7
135
  const GlassPanel = (props)=>{
136
+ let rootRef;
8
137
  const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
9
138
  "blur",
10
139
  "effect",
@@ -30,6 +159,8 @@ const GlassPanel = (props)=>{
30
159
  const blur = ()=>local.blur ?? "none";
31
160
  const size = ()=>local.size ?? "md";
32
161
  const isLiquid = ()=>"liquid" === local.effect;
162
+ const [geometry, setGeometry] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)();
163
+ const [pressed, setPressed] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
33
164
  const isControlled = ()=>void 0 !== local.open;
34
165
  const [internalOpen, setInternalOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultOpen ?? true);
35
166
  const isOpen = ()=>isControlled() ? true === local.open : internalOpen();
@@ -39,10 +170,54 @@ const GlassPanel = (props)=>{
39
170
  if (!isControlled()) setInternalOpen(next);
40
171
  local.onToggle?.(next);
41
172
  };
173
+ const syncGeometry = ()=>{
174
+ if (!rootRef) return;
175
+ const rect = rootRef.getBoundingClientRect();
176
+ if (rect.width <= 0 || rect.height <= 0) return;
177
+ const style = window.getComputedStyle(rootRef);
178
+ setGeometry({
179
+ width: Math.round(rect.width),
180
+ height: Math.round(rect.height),
181
+ radius: Math.round(getPx(style.borderTopLeftRadius))
182
+ });
183
+ };
184
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
185
+ syncGeometry();
186
+ if (!rootRef || "undefined" == typeof ResizeObserver) return;
187
+ const observer = new ResizeObserver(syncGeometry);
188
+ observer.observe(rootRef);
189
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
190
+ });
191
+ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
192
+ const element = rootRef;
193
+ if (!element) return;
194
+ if (!isLiquid()) {
195
+ element.style.removeProperty("backdrop-filter");
196
+ element.style.removeProperty("-webkit-backdrop-filter");
197
+ return;
198
+ }
199
+ const nextGeometry = geometry();
200
+ if (!nextGeometry) return;
201
+ const minSide = Math.min(nextGeometry.width, nextGeometry.height);
202
+ const maxDepth = Math.max(1, Math.floor(minSide / 2) - 1);
203
+ const depth = Math.min(maxDepth, Math.max(10, Math.round(minSide * LIQUID_DEPTH_RATIO)) / (pressed() ? 0.7 : 1));
204
+ const filter = getDisplacementFilter({
205
+ ...nextGeometry,
206
+ radius: Math.max(nextGeometry.radius, Math.round(minSide * LIQUID_RADIUS_RATIO)),
207
+ depth,
208
+ strength: Math.round(minSide * LIQUID_STRENGTH_RATIO),
209
+ chromaticAberration: Math.round(minSide * LIQUID_CHROMATIC_ABERRATION_RATIO)
210
+ });
211
+ const backdropFilter = `blur(${LIQUID_BLUR / 2}px) url('${filter}') blur(${LIQUID_BLUR}px) brightness(var(--glass-panel-liquid-brightness, 1.1)) saturate(var(--glass-panel-liquid-saturation, 1.5))`;
212
+ element.style.backdropFilter = backdropFilter;
213
+ element.style.setProperty("-webkit-backdrop-filter", backdropFilter);
214
+ });
42
215
  const containerClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.base, !local.transparent && !isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.blur[blur()], !local.transparent && isLiquid() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.liquid, local.transparent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.transparent, local.glow && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.glow, local.accent && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.accent[accentKey()], local.class, local.className);
43
216
  const contentClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.slot.content, local.collapsible && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsible, local.collapsible && !isOpen() && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.flag.contentCollapsed, (!local.collapsible || isOpen()) && !(local.paddingX || local.paddingY) && __WEBPACK_EXTERNAL_MODULE__GlassPanel_classes_js_5f11fbfd__.CLASSES.size[size()], local.paddingX, local.paddingY);
44
217
  return (()=>{
45
218
  var _el$ = _tmpl$2(), _el$5 = _el$.firstChild, _el$6 = _el$5.firstChild;
219
+ var _ref$ = rootRef;
220
+ "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$) : rootRef = _el$;
46
221
  (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
47
222
  class: containerClasses()
48
223
  }), {
@@ -52,6 +227,18 @@ const GlassPanel = (props)=>{
52
227
  get ["data-glass-effect"] () {
53
228
  return isLiquid() ? "liquid" : void 0;
54
229
  },
230
+ onMouseDown: (event)=>{
231
+ callEventHandler(others.onMouseDown, event);
232
+ setPressed(true);
233
+ },
234
+ onMouseUp: (event)=>{
235
+ callEventHandler(others.onMouseUp, event);
236
+ setPressed(false);
237
+ },
238
+ onMouseLeave: (event)=>{
239
+ callEventHandler(others.onMouseLeave, event);
240
+ setPressed(false);
241
+ },
55
242
  get style () {
56
243
  return local.style;
57
244
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pathscale/ui",
3
- "version": "1.1.75",
3
+ "version": "1.1.76",
4
4
  "author": "pathscale",
5
5
  "repository": {
6
6
  "type": "git",