@threadlabs/looma 0.12.5 → 0.12.6
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-avatar/ui-avatar.html +18 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-avatar.css +17 -1
- package/vanilla/UiAvatar.d.ts +2 -0
- package/vanilla/UiAvatar.js +1 -1
- package/vue/UiAvatar.d.ts +4 -0
- package/vue/UiAvatar.vue +32 -2
- package/vue/UiButton.d.ts +1 -1
- package/vue/UiCombobox.d.ts +1 -1
- package/vue/UiIconButton.d.ts +1 -1
- package/vue/UiText.d.ts +1 -1
- package/vue/chunks/UiAvatar.js +16 -7
- package/vue/components.css +18 -6
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
<prop name="fallback" type="string" default=""
|
|
13
13
|
>Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the
|
|
14
14
|
circle clips anything wider.</prop>
|
|
15
|
+
<prop name="size" type="sm | md" default="md"
|
|
16
|
+
>md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header.</prop>
|
|
17
|
+
<prop name="active" type="boolean" default="false"
|
|
18
|
+
>Marks the person as active now, such as editing the same page: a ring in the success colour around the avatar. The ring is not announced, so say what it
|
|
19
|
+
means in alt ("Ada Lovelace, editing").</prop>
|
|
15
20
|
<state name="hasImage" :value="false"></state>
|
|
16
21
|
<state name="hasAuthoredImage" :value="false"></state>
|
|
17
22
|
<state name="initials" :value="'?'"></state>
|
|
@@ -38,6 +43,19 @@
|
|
|
38
43
|
text-transform: uppercase;
|
|
39
44
|
}
|
|
40
45
|
|
|
46
|
+
:host-state([size="sm"]) {
|
|
47
|
+
inline-size: 1.75rem;
|
|
48
|
+
block-size: 1.75rem;
|
|
49
|
+
font-size: var(--ui-font-size-xs);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* An outline, not a dot: the avatar clips its content to the circle, and an outline is drawn
|
|
53
|
+
outside the box, so the ring survives the clip and the overlap in an Avatar Group. */
|
|
54
|
+
:host-state([active]) {
|
|
55
|
+
outline: 2px solid var(--ui-avatar-active-ring, var(--ui-success));
|
|
56
|
+
outline-offset: 1px;
|
|
57
|
+
}
|
|
58
|
+
|
|
41
59
|
.image,
|
|
42
60
|
:slotted(img) {
|
|
43
61
|
grid-area: 1 / 1;
|