@threadlabs/looma 0.26.0 → 0.26.1
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/ui-dialog/ui-dialog.html +6 -4
- package/components/ui-scroll-area/ui-scroll-area.html +12 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-dialog.css +6 -4
- package/styles/ui-scroll-area.css +11 -0
- package/vanilla/UiDialog.js +14 -8
- package/vanilla/UiScrollArea.d.ts +1 -0
- package/vanilla/UiScrollArea.js +4 -4
- package/vue/UiDialog.vue +6 -4
- package/vue/UiScrollArea.d.ts +9 -0
- package/vue/UiScrollArea.vue +33 -1
- package/vue/chunks/UiDialog.js +4 -3
- package/vue/chunks/UiScrollArea.js +28 -5
- package/vue/components.css +52 -38
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
<h2 class="title" $if="$label">{$label}</h2>
|
|
41
41
|
<button class="close" $ref="close" type="button" aria-label="Close"></button>
|
|
42
42
|
</header>
|
|
43
|
-
<ui-scroll-area
|
|
43
|
+
<div class="body"><ui-scroll-area from:trim="true"><slot></slot></ui-scroll-area></div>
|
|
44
44
|
<footer><slot name="actions"></slot></footer>
|
|
45
45
|
</dialog>
|
|
46
46
|
<style>
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
display: none;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
|
-
/*
|
|
140
|
+
/* Own the layout wrapper; nested component roots are outside these scoped rules. */
|
|
141
141
|
header {
|
|
142
142
|
display: flex;
|
|
143
143
|
align-items: center;
|
|
@@ -216,9 +216,11 @@
|
|
|
216
216
|
}
|
|
217
217
|
|
|
218
218
|
.body {
|
|
219
|
+
display: flex;
|
|
220
|
+
flex-direction: column;
|
|
219
221
|
flex: 1 1 auto;
|
|
220
222
|
min-block-size: 0;
|
|
221
|
-
padding: var(--ui-space-5);
|
|
223
|
+
padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
|
|
222
224
|
}
|
|
223
225
|
|
|
224
226
|
footer {
|
|
@@ -227,7 +229,7 @@
|
|
|
227
229
|
flex-wrap: wrap;
|
|
228
230
|
justify-content: flex-end;
|
|
229
231
|
gap: var(--ui-space-2);
|
|
230
|
-
padding: var(--ui-space-
|
|
232
|
+
padding: 0 var(--ui-space-5) var(--ui-space-5);
|
|
231
233
|
}
|
|
232
234
|
|
|
233
235
|
footer:empty {
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
<prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
|
|
8
8
|
>The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
|
|
9
9
|
overflow.</prop>
|
|
10
|
+
<prop name="trim" type="boolean" default="false"
|
|
11
|
+
>Removes the outer block margins of the first and last projected items when the surrounding panel owns its edge padding. Margins between items remain
|
|
12
|
+
intact.</prop>
|
|
10
13
|
</defs>
|
|
11
14
|
<div><div class="content" $ref="content"><slot></slot></div></div>
|
|
12
15
|
<style>
|
|
@@ -41,6 +44,15 @@
|
|
|
41
44
|
display: flow-root;
|
|
42
45
|
}
|
|
43
46
|
|
|
47
|
+
/* Trim projected edges without changing spacing inside an item. */
|
|
48
|
+
:host([trim]) .content > :slotted(:first-child) {
|
|
49
|
+
margin-block-start: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
:host([trim]) .content > :slotted(:last-child) {
|
|
53
|
+
margin-block-end: 0;
|
|
54
|
+
}
|
|
55
|
+
|
|
44
56
|
:host([orientation="horizontal"]) {
|
|
45
57
|
overflow-x: auto;
|
|
46
58
|
overflow-y: hidden;
|