terminoir 0.12.1 → 0.13.0
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/README.md
CHANGED
|
@@ -124,7 +124,7 @@ Import from **`terminoir`**:
|
|
|
124
124
|
| `Input`, `Textarea`, `Select`, `Checkbox`, `Switch` | `hideLabel` (screen-reader only), `hint`, `error`, `quiet` (borderless until hover/focus, for inline property editing); `Input` `width` for toolbar fields |
|
|
125
125
|
| `Chip`, `Badge` | Status tones; `Chip` `color` dot, `onclick`, removable `onremove` |
|
|
126
126
|
| `StatusChip` | On/off status: green dot + `activeLabel`, or muted `inactiveLabel` (defaults Connected / Not connected) |
|
|
127
|
-
| `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift |
|
|
127
|
+
| `Card`, `CardGrid` | Accent tint, badge, chips, progress, meta, hover lift; `CardGrid columns={2\|3\|4}` fixes the column count on wide screens (one column on phones), also for `Panel`s |
|
|
128
128
|
| `Panel` | Glass panel surface |
|
|
129
129
|
| `Dialog` | Modal with focus trap-ish behavior + Escape |
|
|
130
130
|
| `Popover`, `Tooltip` | Lightweight overlays |
|
package/css/cards.css
CHANGED
|
@@ -9,6 +9,14 @@
|
|
|
9
9
|
width: 100%;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
.terminoir-card-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
13
|
+
.terminoir-card-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
14
|
+
.terminoir-card-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
15
|
+
|
|
16
|
+
@media (max-width: 700px) {
|
|
17
|
+
.terminoir-card-grid[class*='terminoir-card-grid--cols-'] { grid-template-columns: minmax(0, 1fr); }
|
|
18
|
+
}
|
|
19
|
+
|
|
12
20
|
.terminoir-card {
|
|
13
21
|
position: relative;
|
|
14
22
|
display: flex;
|
|
@@ -3,15 +3,21 @@
|
|
|
3
3
|
import { cn } from '../utils/cn.js';
|
|
4
4
|
|
|
5
5
|
let {
|
|
6
|
+
columns,
|
|
6
7
|
class: className = '',
|
|
7
8
|
children,
|
|
8
9
|
...rest
|
|
9
10
|
}: {
|
|
11
|
+
/**
|
|
12
|
+
* Fixed column count on wide screens (one column on phones), e.g. 2 for a pair of settings panels.
|
|
13
|
+
* Omit to fit as many 280px columns as the width allows.
|
|
14
|
+
*/
|
|
15
|
+
columns?: 2 | 3 | 4;
|
|
10
16
|
class?: string;
|
|
11
17
|
children?: Snippet;
|
|
12
18
|
} & Record<string, unknown> = $props();
|
|
13
19
|
</script>
|
|
14
20
|
|
|
15
|
-
<div class={cn('terminoir-card-grid', className)} {...rest}>
|
|
21
|
+
<div class={cn('terminoir-card-grid', columns && `terminoir-card-grid--cols-${columns}`, className)} {...rest}>
|
|
16
22
|
{@render children?.()}
|
|
17
23
|
</div>
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
type $$ComponentProps = {
|
|
3
|
+
/**
|
|
4
|
+
* Fixed column count on wide screens (one column on phones), e.g. 2 for a pair of settings panels.
|
|
5
|
+
* Omit to fit as many 280px columns as the width allows.
|
|
6
|
+
*/
|
|
7
|
+
columns?: 2 | 3 | 4;
|
|
3
8
|
class?: string;
|
|
4
9
|
children?: Snippet;
|
|
5
10
|
} & Record<string, unknown>;
|
|
@@ -55,6 +55,7 @@
|
|
|
55
55
|
<style>
|
|
56
56
|
.terminoir-panel-header {
|
|
57
57
|
display: flex;
|
|
58
|
+
flex-wrap: wrap;
|
|
58
59
|
align-items: center;
|
|
59
60
|
gap: var(--space-3);
|
|
60
61
|
min-width: 0;
|
|
@@ -73,7 +74,8 @@
|
|
|
73
74
|
object-fit: contain;
|
|
74
75
|
}
|
|
75
76
|
.terminoir-panel-header__text {
|
|
76
|
-
|
|
77
|
+
/* Below ~14rem of text, the actions wrap under the header instead of squeezing it. */
|
|
78
|
+
flex: 1 1 14rem;
|
|
77
79
|
min-width: 0;
|
|
78
80
|
display: flex;
|
|
79
81
|
flex-direction: column;
|
|
@@ -99,8 +101,4 @@
|
|
|
99
101
|
gap: var(--space-3);
|
|
100
102
|
flex-shrink: 0;
|
|
101
103
|
}
|
|
102
|
-
@media (max-width: 700px) {
|
|
103
|
-
.terminoir-panel-header { flex-wrap: wrap; }
|
|
104
|
-
.terminoir-panel-header__actions { width: 100%; }
|
|
105
|
-
}
|
|
106
104
|
</style>
|