@aiaiai-pt/design-system 0.3.3 → 0.3.4
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.
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
@component PageContainer
|
|
3
|
+
|
|
4
|
+
Content container for page-level layout. Centers content with max-width
|
|
5
|
+
and consistent horizontal/vertical padding. Used inside an app shell's
|
|
6
|
+
main content area — one per page.
|
|
7
|
+
|
|
8
|
+
Uses semantic content-width and content-padding tokens from semantic.css.
|
|
9
|
+
|
|
10
|
+
@example Default (standard content width)
|
|
11
|
+
<PageContainer>
|
|
12
|
+
<h1>Page Title</h1>
|
|
13
|
+
<p>Content here</p>
|
|
14
|
+
</PageContainer>
|
|
15
|
+
|
|
16
|
+
@example Narrow (forms, settings)
|
|
17
|
+
<PageContainer size="narrow">
|
|
18
|
+
<SettingsForm />
|
|
19
|
+
</PageContainer>
|
|
20
|
+
|
|
21
|
+
@example Wide (dashboards, data tables)
|
|
22
|
+
<PageContainer size="wide">
|
|
23
|
+
<DataTable />
|
|
24
|
+
</PageContainer>
|
|
25
|
+
|
|
26
|
+
@example Fluid (no max-width)
|
|
27
|
+
<PageContainer size="full">
|
|
28
|
+
<CanvasEditor />
|
|
29
|
+
</PageContainer>
|
|
30
|
+
-->
|
|
31
|
+
<script>
|
|
32
|
+
let {
|
|
33
|
+
/** @type {'narrow' | 'default' | 'wide' | 'full'} */
|
|
34
|
+
size = 'wide',
|
|
35
|
+
/** @type {string} */
|
|
36
|
+
class: className = '',
|
|
37
|
+
/** @type {import('svelte').Snippet | undefined} */
|
|
38
|
+
children = undefined,
|
|
39
|
+
...rest
|
|
40
|
+
} = $props();
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<div
|
|
44
|
+
class="page-container page-container-{size} {className}"
|
|
45
|
+
{...rest}
|
|
46
|
+
>
|
|
47
|
+
{#if children}
|
|
48
|
+
{@render children()}
|
|
49
|
+
{/if}
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<style>
|
|
53
|
+
.page-container {
|
|
54
|
+
width: 100%;
|
|
55
|
+
margin-inline: auto;
|
|
56
|
+
padding: var(--content-padding-y) var(--content-padding-x);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.page-container-narrow {
|
|
60
|
+
max-width: var(--content-width-narrow);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.page-container-default {
|
|
64
|
+
max-width: var(--content-width);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.page-container-wide {
|
|
68
|
+
max-width: var(--content-width-wide);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.page-container-full {
|
|
72
|
+
max-width: var(--content-width-full);
|
|
73
|
+
}
|
|
74
|
+
</style>
|
package/components/index.js
CHANGED
|
@@ -31,6 +31,7 @@ export { default as Separator } from "./Separator.svelte";
|
|
|
31
31
|
export { default as Progress } from "./Progress.svelte";
|
|
32
32
|
export { default as List } from "./List.svelte";
|
|
33
33
|
export { default as ListItem } from "./ListItem.svelte";
|
|
34
|
+
export { default as PageContainer } from "./PageContainer.svelte";
|
|
34
35
|
|
|
35
36
|
// Containers
|
|
36
37
|
export { default as Card } from "./Card.svelte";
|