@aiaiai-pt/design-system 0.2.1 → 0.2.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.
- package/components/Panel.svelte +28 -1
- package/package.json +1 -1
package/components/Panel.svelte
CHANGED
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
side = 'right',
|
|
41
41
|
/** @type {boolean} When true, removes backdrop and focus trap. Panel becomes an inline layout element. */
|
|
42
42
|
persistent = false,
|
|
43
|
+
/** @type {boolean} When false, body doesn't scroll — children manage their own overflow. */
|
|
44
|
+
scrollBody = true,
|
|
43
45
|
/** @type {(() => void) | undefined} */
|
|
44
46
|
onclose,
|
|
45
47
|
/** @type {string} */
|
|
@@ -48,6 +50,8 @@
|
|
|
48
50
|
header = undefined,
|
|
49
51
|
/** @type {import('svelte').Snippet | undefined} */
|
|
50
52
|
children = undefined,
|
|
53
|
+
/** @type {import('svelte').Snippet | undefined} */
|
|
54
|
+
footer = undefined,
|
|
51
55
|
...rest
|
|
52
56
|
} = $props();
|
|
53
57
|
|
|
@@ -144,9 +148,15 @@
|
|
|
144
148
|
{/if}
|
|
145
149
|
</div>
|
|
146
150
|
|
|
147
|
-
<div class="panel-body">
|
|
151
|
+
<div class="panel-body" class:panel-body-no-scroll={!scrollBody}>
|
|
148
152
|
{#if children}{@render children()}{/if}
|
|
149
153
|
</div>
|
|
154
|
+
|
|
155
|
+
{#if footer}
|
|
156
|
+
<div class="panel-footer">
|
|
157
|
+
{@render footer()}
|
|
158
|
+
</div>
|
|
159
|
+
{/if}
|
|
150
160
|
</aside>
|
|
151
161
|
{/if}
|
|
152
162
|
|
|
@@ -257,10 +267,27 @@
|
|
|
257
267
|
|
|
258
268
|
.panel-body {
|
|
259
269
|
flex: 1;
|
|
270
|
+
min-height: 0;
|
|
260
271
|
overflow-y: auto;
|
|
261
272
|
padding: var(--panel-padding);
|
|
262
273
|
}
|
|
263
274
|
|
|
275
|
+
.panel-body-no-scroll {
|
|
276
|
+
overflow: hidden;
|
|
277
|
+
padding: 0;
|
|
278
|
+
display: flex;
|
|
279
|
+
flex-direction: column;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.panel-footer {
|
|
283
|
+
flex-shrink: 0;
|
|
284
|
+
border-top: var(--panel-header-border);
|
|
285
|
+
padding: var(--space-md) var(--panel-padding);
|
|
286
|
+
display: flex;
|
|
287
|
+
flex-direction: column;
|
|
288
|
+
gap: var(--space-sm);
|
|
289
|
+
}
|
|
290
|
+
|
|
264
291
|
@keyframes slide-in-right {
|
|
265
292
|
from {
|
|
266
293
|
transform: translateX(100%);
|