terminoir 0.11.0 → 0.12.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
|
@@ -148,7 +148,7 @@ Building blocks so apps compose screens without CSS of their own. See the demo's
|
|
|
148
148
|
| Component | Notes |
|
|
149
149
|
|-----------|--------|
|
|
150
150
|
| `Page`, `PageHeader`, `Section` | Readable page column (`narrow`/`default`/`wide`/`full`, `fill` for canvases); title + meta + actions; titled section with actions |
|
|
151
|
-
| `PanelHeader` | Heading inside a `Panel`: `logo` (round avatar
|
|
151
|
+
| `PanelHeader` | Heading inside a `Panel`: `logo` (the image unframed; initials in a round avatar until `src`), `icon` or `leading` mark, title, description, `actions` (stacks under on phones) |
|
|
152
152
|
| `Stack`, `Inline`, `Spacer`, `Centered` | Vertical / horizontal layout with `--space-*` gaps (`Inline fill` splits evenly, `collapse` stacks on phones); fill space; full-viewport centred column |
|
|
153
153
|
| `Text`, `Prose`, `Disclosure` | Tone/size/weight text; long-form typography; collapsible details |
|
|
154
154
|
| `NavSection` | Sidebar section with title and action |
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Heading inside a panel or card: a mark, a title, a one-line description and actions on the right.
|
|
9
|
-
* The mark is `logo` (
|
|
9
|
+
* The mark is `logo` (the image as is, no frame; the name's initials in a round avatar while there is no `src`),
|
|
10
|
+
* `icon`, or `leading`.
|
|
10
11
|
*/
|
|
11
12
|
let {
|
|
12
13
|
title,
|
|
@@ -21,7 +22,7 @@
|
|
|
21
22
|
description?: string;
|
|
22
23
|
/** Font Awesome name, as for `NavIcon`. */
|
|
23
24
|
icon?: string;
|
|
24
|
-
/** A service or brand mark,
|
|
25
|
+
/** A service or brand mark: its image unframed, fitted in a 2rem square. */
|
|
25
26
|
logo?: { name: string; src?: string };
|
|
26
27
|
class?: string;
|
|
27
28
|
/** Custom mark; overrides `logo` and `icon`. */
|
|
@@ -34,8 +35,10 @@
|
|
|
34
35
|
<header class={cn('terminoir-panel-header', className)}>
|
|
35
36
|
{#if leading}
|
|
36
37
|
<span class="terminoir-panel-header__mark">{@render leading()}</span>
|
|
38
|
+
{:else if logo?.src}
|
|
39
|
+
<img class="terminoir-panel-header__logo" src={logo.src} alt={logo.name} />
|
|
37
40
|
{:else if logo}
|
|
38
|
-
<Avatar name={logo.name}
|
|
41
|
+
<Avatar name={logo.name} size={32} />
|
|
39
42
|
{:else if icon}
|
|
40
43
|
<span class="terminoir-panel-header__mark"><NavIcon name={icon} /></span>
|
|
41
44
|
{/if}
|
|
@@ -62,6 +65,12 @@
|
|
|
62
65
|
flex-shrink: 0;
|
|
63
66
|
min-width: 1.25rem;
|
|
64
67
|
}
|
|
68
|
+
.terminoir-panel-header__logo {
|
|
69
|
+
width: 2rem;
|
|
70
|
+
height: 2rem;
|
|
71
|
+
flex-shrink: 0;
|
|
72
|
+
object-fit: contain;
|
|
73
|
+
}
|
|
65
74
|
.terminoir-panel-header__text {
|
|
66
75
|
flex: 1;
|
|
67
76
|
min-width: 0;
|
|
@@ -4,7 +4,7 @@ type $$ComponentProps = {
|
|
|
4
4
|
description?: string;
|
|
5
5
|
/** Font Awesome name, as for `NavIcon`. */
|
|
6
6
|
icon?: string;
|
|
7
|
-
/** A service or brand mark,
|
|
7
|
+
/** A service or brand mark: its image unframed, fitted in a 2rem square. */
|
|
8
8
|
logo?: {
|
|
9
9
|
name: string;
|
|
10
10
|
src?: string;
|