@dorsk/tsumikit 0.18.4 → 0.18.5
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.
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
onclose: () => void;
|
|
22
22
|
body: Snippet;
|
|
23
23
|
footer?: Snippet;
|
|
24
|
-
/** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A
|
|
25
|
-
* drag still overrides it. */
|
|
26
|
-
size?: 'sm' | 'md' | 'lg';
|
|
24
|
+
/** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
|
|
25
|
+
* `resizeKey` drag still overrides it. */
|
|
26
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
27
27
|
/** When set, the sheet is horizontally resizable on desktop and the chosen
|
|
28
28
|
* width persists under this localStorage key. */
|
|
29
29
|
resizeKey?: string;
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
const titleId = `modal-title-${Math.random().toString(36).slice(2, 8)}`;
|
|
33
33
|
|
|
34
34
|
const MIN_W = 544; // 34rem at 16px base
|
|
35
|
-
const MAX_W =
|
|
35
|
+
const MAX_W = 1680;
|
|
36
36
|
|
|
37
37
|
function loadWidth(): number | null {
|
|
38
38
|
if (!browser || !resizeKey) return null;
|
|
@@ -109,7 +109,12 @@
|
|
|
109
109
|
}}
|
|
110
110
|
onclick={onDialogClick}
|
|
111
111
|
>
|
|
112
|
-
<div
|
|
112
|
+
<div
|
|
113
|
+
class="sheet"
|
|
114
|
+
class:sheet-sm={size === 'sm'}
|
|
115
|
+
class:sheet-lg={size === 'lg'}
|
|
116
|
+
class:sheet-xl={size === 'xl'}
|
|
117
|
+
>
|
|
113
118
|
<div class="sheet-head">
|
|
114
119
|
<span id={titleId} class="sheet-title truncate">{title}</span>
|
|
115
120
|
<div class="spacer"></div>
|
|
@@ -199,6 +204,9 @@
|
|
|
199
204
|
.sheet-lg {
|
|
200
205
|
--sw: 48rem;
|
|
201
206
|
}
|
|
207
|
+
.sheet-xl {
|
|
208
|
+
--sw: 72rem;
|
|
209
|
+
}
|
|
202
210
|
}
|
|
203
211
|
@keyframes sheet-up {
|
|
204
212
|
from {
|
|
@@ -255,18 +263,35 @@
|
|
|
255
263
|
touch-action: none;
|
|
256
264
|
z-index: 2;
|
|
257
265
|
}
|
|
266
|
+
/* Full-height edge line that lights up on hover, so the affordance is
|
|
267
|
+
findable without knowing it exists. */
|
|
268
|
+
.sheet-resize::before {
|
|
269
|
+
content: '';
|
|
270
|
+
position: absolute;
|
|
271
|
+
top: 0;
|
|
272
|
+
bottom: 0;
|
|
273
|
+
right: 6px;
|
|
274
|
+
width: 2px;
|
|
275
|
+
border-radius: 999px;
|
|
276
|
+
background: transparent;
|
|
277
|
+
transition: background 0.12s var(--ease);
|
|
278
|
+
}
|
|
258
279
|
.sheet-resize::after {
|
|
259
280
|
content: '';
|
|
260
281
|
position: absolute;
|
|
261
282
|
top: 50%;
|
|
262
|
-
right:
|
|
283
|
+
right: 5px;
|
|
263
284
|
transform: translateY(-50%);
|
|
264
|
-
width:
|
|
265
|
-
height:
|
|
285
|
+
width: 4px;
|
|
286
|
+
height: 44px;
|
|
266
287
|
border-radius: 999px;
|
|
267
288
|
background: var(--border-strong);
|
|
268
289
|
transition: background 0.12s var(--ease);
|
|
269
290
|
}
|
|
291
|
+
.sheet-resize:hover::before,
|
|
292
|
+
.modal.resizing .sheet-resize::before {
|
|
293
|
+
background: color-mix(in srgb, var(--accent) 45%, transparent);
|
|
294
|
+
}
|
|
270
295
|
.sheet-resize:hover::after,
|
|
271
296
|
.modal.resizing .sheet-resize::after {
|
|
272
297
|
background: var(--accent);
|
|
@@ -4,9 +4,9 @@ type $$ComponentProps = {
|
|
|
4
4
|
onclose: () => void;
|
|
5
5
|
body: Snippet;
|
|
6
6
|
footer?: Snippet;
|
|
7
|
-
/** Desktop width preset (sm 24rem / md 34rem / lg 48rem). A
|
|
8
|
-
* drag still overrides it. */
|
|
9
|
-
size?: 'sm' | 'md' | 'lg';
|
|
7
|
+
/** Desktop width preset (sm 24rem / md 34rem / lg 48rem / xl 72rem). A
|
|
8
|
+
* `resizeKey` drag still overrides it. */
|
|
9
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
10
10
|
/** When set, the sheet is horizontally resizable on desktop and the chosen
|
|
11
11
|
* width persists under this localStorage key. */
|
|
12
12
|
resizeKey?: string;
|
package/package.json
CHANGED