@aiaiai-pt/design-system 0.3.2 → 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.
|
@@ -87,15 +87,17 @@
|
|
|
87
87
|
{#if conditions.length === 0}
|
|
88
88
|
<p class="condition-table-empty">{emptyMessage}</p>
|
|
89
89
|
{:else}
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
<!-- Header row — separate from data grid so row-gap only applies between data rows -->
|
|
91
|
+
<div class="condition-table-header-row" style:grid-template-columns={gridTemplate}>
|
|
92
92
|
{#each columns as col}
|
|
93
93
|
<span class="condition-table-header">{col.label}</span>
|
|
94
94
|
{/each}
|
|
95
95
|
<span class="condition-table-header"></span>
|
|
96
|
+
</div>
|
|
96
97
|
|
|
97
|
-
|
|
98
|
-
|
|
98
|
+
<!-- Data rows — each row is its own grid so row-gap creates visible separation -->
|
|
99
|
+
{#each conditions as row, rowIndex}
|
|
100
|
+
<div class="condition-table-row" style:grid-template-columns={gridTemplate}>
|
|
99
101
|
{#each columns as col}
|
|
100
102
|
<div class="condition-table-cell">
|
|
101
103
|
{#if col.type === 'select'}
|
|
@@ -134,8 +136,8 @@
|
|
|
134
136
|
{/snippet}
|
|
135
137
|
</Button>
|
|
136
138
|
</div>
|
|
137
|
-
|
|
138
|
-
|
|
139
|
+
</div>
|
|
140
|
+
{/each}
|
|
139
141
|
{/if}
|
|
140
142
|
|
|
141
143
|
{#if canAdd}
|
|
@@ -165,9 +167,16 @@
|
|
|
165
167
|
width: 100%;
|
|
166
168
|
}
|
|
167
169
|
|
|
168
|
-
.condition-table-
|
|
170
|
+
.condition-table-header-row {
|
|
171
|
+
display: grid;
|
|
172
|
+
column-gap: var(--condition-table-header-gap);
|
|
173
|
+
align-items: center;
|
|
174
|
+
overflow-x: auto;
|
|
175
|
+
-webkit-overflow-scrolling: touch;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.condition-table-row {
|
|
169
179
|
display: grid;
|
|
170
|
-
row-gap: var(--condition-table-row-gap);
|
|
171
180
|
column-gap: var(--condition-table-header-gap);
|
|
172
181
|
align-items: center;
|
|
173
182
|
overflow-x: auto;
|
|
@@ -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";
|