@brightspot/ui 1.5.0 → 1.7.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/dist/components/dropdown/Dropdown.d.ts +172 -0
- package/dist/components/dropdown/Dropdown.d.ts.map +1 -0
- package/dist/components/dropdown/Dropdown.js +407 -0
- package/dist/components/dropdown/Dropdown.js.map +1 -0
- package/dist/components/dropdown/DropdownItem.d.ts +108 -0
- package/dist/components/dropdown/DropdownItem.d.ts.map +1 -0
- package/dist/components/dropdown/DropdownItem.js +210 -0
- package/dist/components/dropdown/DropdownItem.js.map +1 -0
- package/dist/components/dropdown/DropdownMenu.d.ts +117 -0
- package/dist/components/dropdown/DropdownMenu.d.ts.map +1 -0
- package/dist/components/dropdown/DropdownMenu.js +295 -0
- package/dist/components/dropdown/DropdownMenu.js.map +1 -0
- package/dist/components/pagination/Pagination.d.ts +109 -0
- package/dist/components/pagination/Pagination.d.ts.map +1 -0
- package/dist/components/pagination/Pagination.js +351 -0
- package/dist/components/pagination/Pagination.js.map +1 -0
- package/dist/custom-elements.json +1642 -182
- package/dist/storybook/assets/Avatar.stories-BAaSlDF7.js +213 -0
- package/dist/storybook/assets/AvatarGroup.stories-CgoDB4N4.js +225 -0
- package/dist/storybook/assets/{Badge.stories-Bbnc6fRy.js → Badge.stories-uexxdmo6.js} +3 -3
- package/dist/storybook/assets/{Button.stories-CRJ5n2y4.js → Button.stories-T9UJUPHI.js} +1 -1
- package/dist/storybook/assets/{CircularProgress.stories-D9vBj3JJ.js → CircularProgress.stories-DW-VJA5j.js} +6 -6
- package/dist/storybook/assets/{ClipboardMixin.stories-Dm-Jm4yb.js → ClipboardMixin.stories-DzU4vxu5.js} +1 -1
- package/dist/storybook/assets/{Color-6BZIO3FS-BcNIJY1U.js → Color-6BZIO3FS-DRk2xjoN.js} +1 -1
- package/dist/storybook/assets/{Colors.stories-B9_090wL.js → Colors.stories-_UPdvuhY.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin-ChiFBCuo.js → ComponentStatesMixin-BIu5SKeV.js} +1 -1
- package/dist/storybook/assets/{ComponentStatesMixin.stories-DHv9MHmE.js → ComponentStatesMixin.stories-C0FLaqLu.js} +1 -1
- package/dist/storybook/assets/{CopyToClipboard.stories-gtJlTP1l.js → CopyToClipboard.stories-D31zoUVI.js} +1 -1
- package/dist/storybook/assets/{Debounce.stories-BBNX7mJA.js → Debounce.stories-CgPPl5Ee.js} +1 -1
- package/dist/storybook/assets/{DocsRenderer-LL677BLK-D-E99pXl.js → DocsRenderer-LL677BLK-iwiwOzX9.js} +6 -6
- package/dist/storybook/assets/Dropdown.stories-CDcl6rmG.js +697 -0
- package/dist/storybook/assets/{Events.stories-DDmydlh_.js → Events.stories-DS6UC9dZ.js} +1 -1
- package/dist/storybook/assets/{Heading.stories-BLGfko-i.js → Heading.stories-CAQfEGE2.js} +1 -1
- package/dist/storybook/assets/{Icon.stories-BHnAGcFF.js → Icon.stories-C7msWlHs.js} +11 -11
- package/dist/storybook/assets/{LinearProgress.stories-Dx26a0P_.js → LinearProgress.stories-DBGJ5a2-.js} +7 -7
- package/dist/storybook/assets/Pagination.stories-C58bGOdf.js +272 -0
- package/dist/storybook/assets/{Popover.stories-CbqpY6YR.js → Popover.stories-C9zU0sEX.js} +5 -5
- package/dist/storybook/assets/{ReadyMixin-BHiHoIbr.js → ReadyMixin-qf8SAjMu.js} +1 -1
- package/dist/storybook/assets/{Rtc.stories-CAjDv_Ub.js → Rtc.stories-k9tKHNhD.js} +1 -1
- package/dist/storybook/assets/{ScrollShadow.stories-BSV4U-tq.js → ScrollShadow.stories-Bp42zyLH.js} +1 -1
- package/dist/storybook/assets/{Throttle.stories-kaxXQ8RZ.js → Throttle.stories-B5YU-Nms.js} +1 -1
- package/dist/storybook/assets/Tooltip.stories-COQcvOnL.js +143 -0
- package/dist/storybook/assets/{Widget.stories-DqATHnSq.js → Widget.stories-D3Sq5-_A.js} +13 -13
- package/dist/storybook/assets/{WithTooltip-65CFNBJE-BtbbFYSA.js → WithTooltip-65CFNBJE-Cox81aM_.js} +1 -1
- package/dist/storybook/assets/{formatter-EIJCOSYU-C87Csnpu.js → formatter-EIJCOSYU-3ErcoV9q.js} +1 -1
- package/dist/storybook/assets/if-defined-Bv2_qPJg.js +1 -0
- package/dist/storybook/assets/{iframe-CcloOV09.js → iframe-CM6gBkqA.js} +170 -170
- package/dist/storybook/assets/iframe-D3r2Ciu8.css +1 -0
- package/dist/storybook/assets/{index-DP7vnJf7.js → index-iwfnMgqg.js} +1 -1
- package/dist/storybook/assets/{onFind.stories-BxvoC-Z-.js → onFind.stories-CDtoTN6S.js} +1 -1
- package/dist/storybook/assets/{onRemove.stories-Dwoixzb0.js → onRemove.stories-CSTeFCLU.js} +1 -1
- package/dist/storybook/assets/{onVisible.stories-CinmRF9w.js → onVisible.stories-C-yiw9n4.js} +1 -1
- package/dist/storybook/assets/style-map-BJGdSb_D.js +1 -0
- package/dist/storybook/assets/{syntaxhighlighter-ED5Y7EFY-BHLkDkOn.js → syntaxhighlighter-ED5Y7EFY-BEudYlVi.js} +1 -1
- package/dist/storybook/iframe.html +2 -2
- package/dist/storybook/index.json +1 -1
- package/dist/storybook/project.json +1 -1
- package/dist/tailwind-plugin-button.js +10 -0
- package/dist/tailwind-plugin-button.js.map +1 -1
- package/dist/tailwind-plugin-button.ts +10 -0
- package/dist/tailwind-plugin-dropdown.d.ts +2 -0
- package/dist/tailwind-plugin-dropdown.d.ts.map +1 -0
- package/dist/tailwind-plugin-dropdown.js +223 -0
- package/dist/tailwind-plugin-dropdown.js.map +1 -0
- package/dist/tailwind-plugin-dropdown.ts +249 -0
- package/dist/tailwind-plugin-pagination.d.ts +2 -0
- package/dist/tailwind-plugin-pagination.d.ts.map +1 -0
- package/dist/tailwind-plugin-pagination.js +164 -0
- package/dist/tailwind-plugin-pagination.js.map +1 -0
- package/dist/tailwind-plugin-pagination.ts +179 -0
- package/dist/tailwind.config.d.ts +1 -4
- package/dist/tailwind.config.d.ts.map +1 -1
- package/dist/tailwind.config.js +1 -0
- package/dist/tailwind.config.js.map +1 -1
- package/dist/tailwind.config.ts +1 -0
- package/dist/util/EventEmitterMixin.d.ts +22 -0
- package/dist/util/EventEmitterMixin.d.ts.map +1 -1
- package/dist/util/EventEmitterMixin.js.map +1 -1
- package/dist/util/aria.d.ts.map +1 -1
- package/dist/util/aria.js +2 -1
- package/dist/util/aria.js.map +1 -1
- package/dist/util/i18n.d.ts +13 -0
- package/dist/util/i18n.d.ts.map +1 -0
- package/dist/util/i18n.js +21 -0
- package/dist/util/i18n.js.map +1 -0
- package/docs/components/Avatar.md +62 -0
- package/docs/components/AvatarGroup.md +52 -0
- package/docs/components/Badge.md +58 -0
- package/docs/components/CircularProgress.md +55 -0
- package/docs/components/CopyToClipboard.md +54 -0
- package/docs/components/Dropdown.md +100 -0
- package/docs/components/DropdownItem.md +64 -0
- package/docs/components/DropdownMenu.md +81 -0
- package/docs/components/Icon.md +61 -0
- package/docs/components/LinearProgress.md +40 -0
- package/docs/components/Pagination.md +95 -0
- package/docs/components/Popover.md +71 -0
- package/docs/components/README.md +24 -0
- package/docs/components/Widget.md +79 -0
- package/package.json +4 -3
- package/dist/storybook/assets/Avatar.stories-CPVNxsaA.js +0 -214
- package/dist/storybook/assets/AvatarGroup.stories-Bl65NGHl.js +0 -225
- package/dist/storybook/assets/Tooltip.stories-CsxXkztr.js +0 -143
- package/dist/storybook/assets/if-defined-COHr0XBn.js +0 -1
- package/dist/storybook/assets/iframe-BkDGeDre.css +0 -1
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
import{g as c,x as n}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const{events:p,args:g,argTypes:r}=c("btu-avatar"),v=["xs","sm","md","lg","xl","xxl"],e="data:image/jpeg;base64,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",b={title:"Components/Avatar",component:"btu-avatar",tags:["autodocs"],parameters:{docs:{subtitle:"Display user avatars with image loading and fallback text",description:{component:`
|
|
2
|
-
<h3>When to use:</h3>
|
|
3
|
-
<ul>
|
|
4
|
-
<li>To represent a user or entity with a profile picture</li>
|
|
5
|
-
<li>In user lists, comment threads, or navigation bars</li>
|
|
6
|
-
<li>When you need graceful fallback to initials</li>
|
|
7
|
-
</ul>
|
|
8
|
-
|
|
9
|
-
<h3>When not to use:</h3>
|
|
10
|
-
<ul>
|
|
11
|
-
<li>For decorative images (use img tag instead)</li>
|
|
12
|
-
<li>For non-user entities without fallback text</li>
|
|
13
|
-
</ul>
|
|
14
|
-
|
|
15
|
-
<h3>Use Cases in the CMS:</h3>
|
|
16
|
-
<ul>
|
|
17
|
-
<li>The user profile control in the main navigation bar</li>
|
|
18
|
-
<li>Viewers in a search result item</li>
|
|
19
|
-
<li>Viewers in the recent activity dashboard widget</li>
|
|
20
|
-
<li>Used by [AvatarGroup](?path=/docs/components-avatargroup--docs)</li>
|
|
21
|
-
</ul>
|
|
22
|
-
`}},actions:{handles:p},controls:{expanded:!0}},args:{...g,alt:"Dylan",fallback:"DG",size:"md",tooltip:"Dylan G.","tooltip-position":"top"},argTypes:{...r,"--avatar-size":{table:{disable:!0}},"--avatar-bg-color":{table:{disable:!0}},"--avatar-corner-rounding":{table:{disable:!0}},"--avatar-ring-color":{table:{disable:!0}},"--avatar-ring-width":{table:{disable:!0}},src:{...r.src,control:{type:"text"},description:"Image source URL"},alt:{...r.alt,control:{type:"text"},description:"Alt text for the image"},fallback:{...r.fallback,control:{type:"text"},description:"Fallback text (typically initials)"},size:{...r.size,control:{type:"select"},options:v},tooltip:{...r.tooltip,control:{type:"text"},description:"Tooltip text shown on hover (via TooltipMixin)",table:{category:"Tooltip"}},"tooltip-position":{...r["tooltip-position"],control:{type:"select"},options:["top","bottom","left","right"],description:"Tooltip placement",table:{category:"Tooltip"}},customSize:{name:"--avatar-size",control:{type:"text"},description:'Custom size - overrides the size prop (e.g., "5rem")',table:{category:"CSS Properties"}},customBgColor:{name:"--avatar-bg-color",control:{type:"color"},description:"Custom background color for fallback",table:{category:"CSS Properties"}},customCornerRounding:{name:"--avatar-corner-rounding",control:{type:"text"},description:"Custom corner rounding for avatar shape",table:{category:"CSS Properties"}},customRingColor:{name:"--avatar-ring-color",control:{type:"color"},description:"Optional ring border color",table:{category:"CSS Properties"}},customRingWidth:{name:"--avatar-ring-width",control:{type:"text"},description:"Ring border width (default: 2px)",table:{category:"CSS Properties"}}},render:t=>{const a=[];t.customSize&&a.push(`--avatar-size: ${t.customSize}`),t.customBgColor&&a.push(`--avatar-bg-color: ${t.customBgColor}`),t.customCornerRounding&&a.push(`--avatar-corner-rounding: ${t.customCornerRounding}`),t.customRingColor&&a.push(`--avatar-ring-color: ${t.customRingColor}`),t.customRingWidth&&a.push(`--avatar-ring-width: ${t.customRingWidth}`);const A=a.length>0?a.join("; "):"";return n`<div style="${A}">
|
|
23
|
-
<btu-avatar
|
|
24
|
-
src="${t.src}"
|
|
25
|
-
alt="${t.alt}"
|
|
26
|
-
fallback="${t.fallback}"
|
|
27
|
-
size="${t.size}"
|
|
28
|
-
tooltip="${t.tooltip}"
|
|
29
|
-
tooltip-position="${t["tooltip-position"]}"
|
|
30
|
-
></btu-avatar>
|
|
31
|
-
</div>`}},o={args:{}},s={render:()=>n`<div class="flex flex-row items-center gap-4">
|
|
32
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
|
|
33
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
|
|
34
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
|
|
35
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
|
|
36
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
|
|
37
|
-
<btu-avatar src=${e} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
|
|
38
|
-
</div>`,parameters:{docs:{description:{story:"Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem)."}}}},i={render:()=>n`<div class="flex flex-row items-center gap-4">
|
|
39
|
-
<div class="flex flex-col items-center gap-2">
|
|
40
|
-
<btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
|
|
41
|
-
<span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
|
|
42
|
-
</div>
|
|
43
|
-
<div class="flex flex-col items-center gap-2">
|
|
44
|
-
<btu-avatar
|
|
45
|
-
src="https://invalid-url-that-will-fail.example.com/image.jpg"
|
|
46
|
-
alt="Failed load"
|
|
47
|
-
fallback="FL"
|
|
48
|
-
size="lg"
|
|
49
|
-
tooltip="Failed Load"
|
|
50
|
-
></btu-avatar>
|
|
51
|
-
<span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
|
|
52
|
-
</div>
|
|
53
|
-
</div>`,parameters:{docs:{description:{story:"Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM."}}}},l={render:()=>{const t=`data:image/svg+xml;base64,${btoa(`
|
|
54
|
-
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
55
|
-
<defs>
|
|
56
|
-
<linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
57
|
-
<stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
|
|
58
|
-
<stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
|
|
59
|
-
</linearGradient>
|
|
60
|
-
</defs>
|
|
61
|
-
<!-- Star shape with gradient fill, transparent background -->
|
|
62
|
-
<polygon
|
|
63
|
-
points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
|
|
64
|
-
fill="url(#starGrad)"
|
|
65
|
-
stroke="rgb(251,191,36)"
|
|
66
|
-
stroke-width="2"
|
|
67
|
-
/>
|
|
68
|
-
</svg>
|
|
69
|
-
`)}`;return n`<div class="flex flex-col gap-4">
|
|
70
|
-
<div class="flex items-center gap-2">
|
|
71
|
-
<strong>Transparent Image:</strong>
|
|
72
|
-
<btu-avatar src=${t} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="story-custom-colors flex items-center gap-2">
|
|
75
|
-
<strong>Custom Colors:</strong>
|
|
76
|
-
<btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
|
|
77
|
-
</div>
|
|
78
|
-
<div class="story-custom-colors flex items-center gap-2">
|
|
79
|
-
<strong>Custom Shape:</strong>
|
|
80
|
-
<btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="flex items-center gap-2">
|
|
83
|
-
<strong>With Ring:</strong>
|
|
84
|
-
<btu-avatar
|
|
85
|
-
src=${e}
|
|
86
|
-
alt="dg"
|
|
87
|
-
fallback="DG"
|
|
88
|
-
size="lg"
|
|
89
|
-
style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
|
|
90
|
-
></btu-avatar>
|
|
91
|
-
<btu-avatar
|
|
92
|
-
fallback="DG"
|
|
93
|
-
size="lg"
|
|
94
|
-
style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
|
|
95
|
-
></btu-avatar>
|
|
96
|
-
</div>
|
|
97
|
-
</div>`},parameters:{docs:{description:{story:`
|
|
98
|
-
Avatars support advanced customization through CSS properties and content composition:
|
|
99
|
-
|
|
100
|
-
**Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
|
|
101
|
-
|
|
102
|
-
**Custom Color:** Override the fallback background color using the \`--avatar-bg-color\` CSS property.
|
|
103
|
-
|
|
104
|
-
**Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \`--avatar-corner-rounding\` CSS property.
|
|
105
|
-
|
|
106
|
-
**With Ring:** Add a colored ring border using \`--avatar-ring-color\` and \`--avatar-ring-width\` CSS properties. Useful for indicating status or highlighting specific users.`}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
107
|
-
args: {}
|
|
108
|
-
}`,...o.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
|
109
|
-
render: () => html\`<div class="flex flex-row items-center gap-4">
|
|
110
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xs" tooltip="Extra Small"></btu-avatar>
|
|
111
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="sm" tooltip="Small"></btu-avatar>
|
|
112
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="md" tooltip="Medium"></btu-avatar>
|
|
113
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="lg" tooltip="Large"></btu-avatar>
|
|
114
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xl" tooltip="Extra Large"></btu-avatar>
|
|
115
|
-
<btu-avatar src=\${DGDATA} alt="dg" fallback="DG" size="xxl" tooltip="Extra Extra Large"></btu-avatar>
|
|
116
|
-
</div>\`,
|
|
117
|
-
parameters: {
|
|
118
|
-
docs: {
|
|
119
|
-
description: {
|
|
120
|
-
story: 'Avatar supports six size variants: xs (1.5rem), sm (2.25rem), md (2.5rem), lg (3rem), xl (3.5rem), and xxl (4rem).'
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
125
|
-
render: () => html\`<div class="flex flex-row items-center gap-4">
|
|
126
|
-
<div class="flex flex-col items-center gap-2">
|
|
127
|
-
<btu-avatar src="" alt="No Image" fallback="NI" size="lg" tooltip="No Image"></btu-avatar>
|
|
128
|
-
<span class="text-xs text-gray-600 dark:text-gray-400">No image</span>
|
|
129
|
-
</div>
|
|
130
|
-
<div class="flex flex-col items-center gap-2">
|
|
131
|
-
<btu-avatar
|
|
132
|
-
src="https://invalid-url-that-will-fail.example.com/image.jpg"
|
|
133
|
-
alt="Failed load"
|
|
134
|
-
fallback="FL"
|
|
135
|
-
size="lg"
|
|
136
|
-
tooltip="Failed Load"
|
|
137
|
-
></btu-avatar>
|
|
138
|
-
<span class="text-xs text-gray-600 dark:text-gray-400">Image failed to load</span>
|
|
139
|
-
</div>
|
|
140
|
-
</div>\`,
|
|
141
|
-
parameters: {
|
|
142
|
-
docs: {
|
|
143
|
-
description: {
|
|
144
|
-
story: 'Avatars automatically display fallback text when no image source is provided or when an image fails to load. The failed image is removed from the DOM.'
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}`,...i.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
|
149
|
-
render: () => {
|
|
150
|
-
// SVG star shape with transparent background - demonstrates that fallback doesn't show through
|
|
151
|
-
const transparentAvatarSvg = \`data:image/svg+xml;base64,\${btoa(\`
|
|
152
|
-
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
153
|
-
<defs>
|
|
154
|
-
<linearGradient id="starGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
155
|
-
<stop offset="0%" style="stop-color:rgb(234,179,8);stop-opacity:1" />
|
|
156
|
-
<stop offset="100%" style="stop-color:rgb(249,115,22);stop-opacity:1" />
|
|
157
|
-
</linearGradient>
|
|
158
|
-
</defs>
|
|
159
|
-
<!-- Star shape with gradient fill, transparent background -->
|
|
160
|
-
<polygon
|
|
161
|
-
points="50,15 61,40 88,40 67,56 73,82 50,67 27,82 33,56 12,40 39,40"
|
|
162
|
-
fill="url(#starGrad)"
|
|
163
|
-
stroke="rgb(251,191,36)"
|
|
164
|
-
stroke-width="2"
|
|
165
|
-
/>
|
|
166
|
-
</svg>
|
|
167
|
-
\`)}\`;
|
|
168
|
-
return html\`<div class="flex flex-col gap-4">
|
|
169
|
-
<div class="flex items-center gap-2">
|
|
170
|
-
<strong>Transparent Image:</strong>
|
|
171
|
-
<btu-avatar src=\${transparentAvatarSvg} alt="Transparent" fallback="YO" size="lg"></btu-avatar>
|
|
172
|
-
</div>
|
|
173
|
-
<div class="story-custom-colors flex items-center gap-2">
|
|
174
|
-
<strong>Custom Colors:</strong>
|
|
175
|
-
<btu-avatar fallback="🫠" size="lg" style="--avatar-bg-color: oklch(70% 0.3 var(--hue))"></btu-avatar>
|
|
176
|
-
</div>
|
|
177
|
-
<div class="story-custom-colors flex items-center gap-2">
|
|
178
|
-
<strong>Custom Shape:</strong>
|
|
179
|
-
<btu-avatar fallback="🙃" size="lg" style="--avatar-corner-rounding: 0.5rem"></btu-avatar>
|
|
180
|
-
</div>
|
|
181
|
-
<div class="flex items-center gap-2">
|
|
182
|
-
<strong>With Ring:</strong>
|
|
183
|
-
<btu-avatar
|
|
184
|
-
src=\${DGDATA}
|
|
185
|
-
alt="dg"
|
|
186
|
-
fallback="DG"
|
|
187
|
-
size="lg"
|
|
188
|
-
style="--avatar-ring-color: oklch(var(--btu-theme-primary-500)); --avatar-ring-width: 3px"
|
|
189
|
-
></btu-avatar>
|
|
190
|
-
<btu-avatar
|
|
191
|
-
fallback="DG"
|
|
192
|
-
size="lg"
|
|
193
|
-
style="--avatar-ring-color: oklch(var(--btu-theme-success-500)); --avatar-ring-width: 3px"
|
|
194
|
-
></btu-avatar>
|
|
195
|
-
</div>
|
|
196
|
-
</div>\`;
|
|
197
|
-
},
|
|
198
|
-
parameters: {
|
|
199
|
-
docs: {
|
|
200
|
-
description: {
|
|
201
|
-
story: \`
|
|
202
|
-
Avatars support advanced customization through CSS properties and content composition:
|
|
203
|
-
|
|
204
|
-
**Transparent Images:** When an avatar image has transparent areas, the fallback initials are automatically hidden once the image loads.
|
|
205
|
-
|
|
206
|
-
**Custom Color:** Override the fallback background color using the \\\`--avatar-bg-color\\\` CSS property.
|
|
207
|
-
|
|
208
|
-
**Custom Shape:** Overrides the fallback circular shape (making it a rounded square) using the \\\`--avatar-corner-rounding\\\` CSS property.
|
|
209
|
-
|
|
210
|
-
**With Ring:** Add a colored ring border using \\\`--avatar-ring-color\\\` and \\\`--avatar-ring-width\\\` CSS properties. Useful for indicating status or highlighting specific users.\`
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}`,...l.parameters?.docs?.source}}};const u=["Default","Sizes","FallbackStates","AdvancedUsage"];export{l as AdvancedUsage,o as Default,i as FallbackStates,s as Sizes,u as __namedExportsOrder,b as default};
|
|
@@ -1,225 +0,0 @@
|
|
|
1
|
-
import{e as x,i as h,t as P,T as S,g as y,x as A}from"./iframe-CcloOV09.js";import"./preload-helper-PPVm8Dsz.js";const m="important",E=" !"+m,b=x(class extends h{constructor(t){if(super(t),t.type!==P.ATTRIBUTE||t.name!=="style"||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((a,r)=>{const o=t[r];return o==null?a:a+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${o};`}),"")}update(t,[a]){const{style:r}=t.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(a)),this.render(a);for(const o of this.ft)a[o]==null&&(this.ft.delete(o),o.includes("-")?r.removeProperty(o):r[o]=null);for(const o in a){const n=a[o];if(n!=null){this.ft.add(o);const e=typeof n=="string"&&n.endsWith(E);o.includes("-")||e?r.setProperty(o,e?n.slice(0,-11):n,e?m:""):r[o]=n}}return S}}),{events:H,args:R,argTypes:g}=y("btu-avatar-group"),w=["purple","primary","teal","rose","error","warning","success"],B=t=>{let a=5381;for(let r=0;r<t.length;r++)a=a*33^t.charCodeAt(r);return a>>>0},s=t=>{const a=B(t)%w.length;return`oklch(var(--btu-theme-${w[a]}-600))`},F="data:image/jpeg;base64,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",c=[{initials:"AC",name:"Ashley",color:s("AC")},{initials:"DG",name:"Dylan",color:s("DG"),image:F},{initials:"JP",name:"Pencola",color:s("JP")},{initials:"JR",name:"John R.",color:s("JR")},{initials:"KW",name:"Kat(e)",color:s("KW")},{initials:"KL",name:"hotpink",color:s("KL")},{initials:"ML",name:"Lunsford",color:s("ML")},{initials:"MW",name:"Wardian",color:s("MW")},{initials:"PS",name:"Praneetha",color:s("PS")},{initials:"TN",name:"Tom",color:s("TN")}],X={title:"Components/AvatarGroup",component:"btu-avatar-group",tags:["autodocs"],parameters:{docs:{subtitle:"Group multiple avatars with overflow handling",description:{component:`
|
|
2
|
-
<h3>When to use:</h3>
|
|
3
|
-
<ul>
|
|
4
|
-
<li>To display multiple Avatars in a compact layout</li>
|
|
5
|
-
<li>In RTC-driven interfaces that involve live editing with multiple users</li>
|
|
6
|
-
<li>When you need to show a list of participants with overflow handling</li>
|
|
7
|
-
</ul>
|
|
8
|
-
|
|
9
|
-
<h3>When not to use:</h3>
|
|
10
|
-
<ul>
|
|
11
|
-
<li>For a single avatar (use Avatar instead)</li>
|
|
12
|
-
</ul>
|
|
13
|
-
`}},actions:{handles:H},controls:{expanded:!0}},args:{...R},argTypes:{...g,max:{control:{type:"number"},description:'Maximum number of visible avatars. Remaining avatars shown as "+N"'},size:{...g.size,control:{type:"select"},description:"Size variant for all child avatars (unless individually overridden)"}},render:t=>A`
|
|
14
|
-
<btu-avatar-group size=${t.size} max=${t.max}>
|
|
15
|
-
${c.slice(0,5).map(a=>A`<btu-avatar
|
|
16
|
-
src="${a.image||""}"
|
|
17
|
-
fallback="${a.initials}"
|
|
18
|
-
alt="${a.name}"
|
|
19
|
-
tooltip="${a.name}"
|
|
20
|
-
style=${b({"--avatar-bg-color":a.color})}
|
|
21
|
-
></btu-avatar>`)}
|
|
22
|
-
</btu-avatar-group>
|
|
23
|
-
`},f={args:{},parameters:{docs:{description:{story:"A basic avatar group showing multiple users. Child avatars manage their own colors and styling."}}}},p={render:()=>A`<div class="flex flex-col gap-4">
|
|
24
|
-
<btu-avatar-group max="5" size="md">
|
|
25
|
-
${c.map(t=>A`<btu-avatar
|
|
26
|
-
src="${t.image||""}"
|
|
27
|
-
fallback="${t.initials}"
|
|
28
|
-
alt="${t.name}"
|
|
29
|
-
tooltip="${t.name}"
|
|
30
|
-
style=${b({"--avatar-bg-color":t.color})}
|
|
31
|
-
></btu-avatar>`)}
|
|
32
|
-
</btu-avatar-group>
|
|
33
|
-
</div>`,parameters:{docs:{description:{story:'Use the `max` property to limit visible avatars. Remaining avatars are shown as a "+N" indicator.'}}}},d={render:()=>{let t=c.slice(0,3),a;const r=()=>{if(!a)return;a.querySelectorAll("btu-avatar-group").forEach(u=>{Array.from(u.children).forEach(i=>{i.classList.contains("btu-avatar-group-overflow")||i.remove()}),t.forEach(i=>{const l=document.createElement("btu-avatar");l.src=i.image||"",l.setAttribute("fallback",i.initials),l.setAttribute("alt",i.name),l.setAttribute("tooltip",i.name),l.style.setProperty("--avatar-bg-color",i.color),u.appendChild(l)}),u.processAvatars()});const v=a.querySelector(".user-count");v&&(v.textContent=`${t.length} users`)},o=()=>{const e=c.filter(v=>!t.find(u=>u.initials===v.initials));e.length>0&&(t=[...t,e[0]],r())},n=()=>{t.length>0&&(t=t.slice(0,-1),r())};return setTimeout(()=>{a=document.querySelector("#dynamic-avatar-container"),a&&(a.querySelector(".add-btn")?.addEventListener("click",o),a.querySelector(".remove-btn")?.addEventListener("click",n))},0),A`
|
|
34
|
-
<div id="dynamic-avatar-container" class="flex flex-col gap-6">
|
|
35
|
-
<div class="flex items-center gap-2">
|
|
36
|
-
<button
|
|
37
|
-
class="add-btn btu-button btu-button-success btu-button-md btu-button-fill-none btu-button-outline px-4 py-2"
|
|
38
|
-
type="button"
|
|
39
|
-
>
|
|
40
|
-
Add User
|
|
41
|
-
</button>
|
|
42
|
-
<button
|
|
43
|
-
class="remove-btn btu-button btu-button-error btu-button-md btu-button-fill-none btu-button-outline px-4 py-2"
|
|
44
|
-
type="button"
|
|
45
|
-
>
|
|
46
|
-
Remove User
|
|
47
|
-
</button>
|
|
48
|
-
<span class="user-count text-xs text-gray-600 dark:text-gray-400">3 users</span>
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
<div class="flex flex-col gap-6">
|
|
52
|
-
<div>
|
|
53
|
-
<div class="mb-2 text-xs text-gray-600">With max="5"</div>
|
|
54
|
-
<btu-avatar-group max="5" size="md">
|
|
55
|
-
${c.slice(0,3).map(e=>A`<btu-avatar
|
|
56
|
-
src="${e.image||""}"
|
|
57
|
-
fallback="${e.initials}"
|
|
58
|
-
alt="${e.name}"
|
|
59
|
-
tooltip="${e.name}"
|
|
60
|
-
style=${b({"--avatar-bg-color":e.color})}
|
|
61
|
-
></btu-avatar>`)}
|
|
62
|
-
</btu-avatar-group>
|
|
63
|
-
</div>
|
|
64
|
-
|
|
65
|
-
<div>
|
|
66
|
-
<div class="mb-2 text-xs text-gray-600">Without max limit</div>
|
|
67
|
-
<btu-avatar-group size="md">
|
|
68
|
-
${c.slice(0,3).map(e=>A`<btu-avatar
|
|
69
|
-
src="${e.image||""}"
|
|
70
|
-
fallback="${e.initials}"
|
|
71
|
-
alt="${e.name}"
|
|
72
|
-
tooltip="${e.name}"
|
|
73
|
-
style=${b({"--avatar-bg-color":e.color})}
|
|
74
|
-
></btu-avatar>`)}
|
|
75
|
-
</btu-avatar-group>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
`},parameters:{docs:{description:{story:'Add or remove users dynamically to see how the overflow logic works. The top group has a max of 5 avatars and will show a "+N" indicator when exceeded. The bottom group has no limit. Each avatar gets a consistent color based on its initials using a hash function.'}}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
|
|
80
|
-
args: {},
|
|
81
|
-
parameters: {
|
|
82
|
-
docs: {
|
|
83
|
-
description: {
|
|
84
|
-
story: 'A basic avatar group showing multiple users. Child avatars manage their own colors and styling.'
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}`,...f.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
89
|
-
render: () => html\`<div class="flex flex-col gap-4">
|
|
90
|
-
<btu-avatar-group max="5" size="md">
|
|
91
|
-
\${AVATAR_USERS.map(user => html\`<btu-avatar
|
|
92
|
-
src="\${user.image || ''}"
|
|
93
|
-
fallback="\${user.initials}"
|
|
94
|
-
alt="\${user.name}"
|
|
95
|
-
tooltip="\${user.name}"
|
|
96
|
-
style=\${styleMap({
|
|
97
|
-
'--avatar-bg-color': user.color
|
|
98
|
-
})}
|
|
99
|
-
></btu-avatar>\`)}
|
|
100
|
-
</btu-avatar-group>
|
|
101
|
-
</div>\`,
|
|
102
|
-
parameters: {
|
|
103
|
-
docs: {
|
|
104
|
-
description: {
|
|
105
|
-
story: 'Use the \`max\` property to limit visible avatars. Remaining avatars are shown as a "+N" indicator.'
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
110
|
-
render: () => {
|
|
111
|
-
let currentUsers = AVATAR_USERS.slice(0, 3);
|
|
112
|
-
let container: HTMLElement;
|
|
113
|
-
const updateGroups = () => {
|
|
114
|
-
if (!container) return;
|
|
115
|
-
const groups = container.querySelectorAll('btu-avatar-group');
|
|
116
|
-
groups.forEach(group => {
|
|
117
|
-
// Remove existing avatars (but not overflow avatar)
|
|
118
|
-
Array.from(group.children).forEach(child => {
|
|
119
|
-
if (!child.classList.contains('btu-avatar-group-overflow')) {
|
|
120
|
-
child.remove();
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
// Add current avatars
|
|
125
|
-
currentUsers.forEach(user => {
|
|
126
|
-
const avatar = document.createElement('btu-avatar');
|
|
127
|
-
avatar.src = user.image || '';
|
|
128
|
-
avatar.setAttribute('fallback', user.initials);
|
|
129
|
-
avatar.setAttribute('alt', user.name);
|
|
130
|
-
avatar.setAttribute('tooltip', user.name);
|
|
131
|
-
avatar.style.setProperty('--avatar-bg-color', user.color);
|
|
132
|
-
group.appendChild(avatar);
|
|
133
|
-
})
|
|
134
|
-
|
|
135
|
-
// Trigger component to reprocess avatars
|
|
136
|
-
;
|
|
137
|
-
(group as any).processAvatars();
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
// Update counter
|
|
141
|
-
const counter = container.querySelector('.user-count');
|
|
142
|
-
if (counter) {
|
|
143
|
-
counter.textContent = \`\${currentUsers.length} users\`;
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
const addUser = () => {
|
|
147
|
-
const availableToAdd = AVATAR_USERS.filter(u => !currentUsers.find(c => c.initials === u.initials));
|
|
148
|
-
if (availableToAdd.length > 0) {
|
|
149
|
-
currentUsers = [...currentUsers, availableToAdd[0]];
|
|
150
|
-
updateGroups();
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
const removeUser = () => {
|
|
154
|
-
if (currentUsers.length > 0) {
|
|
155
|
-
currentUsers = currentUsers.slice(0, -1);
|
|
156
|
-
updateGroups();
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
setTimeout(() => {
|
|
160
|
-
container = document.querySelector('#dynamic-avatar-container') as HTMLElement;
|
|
161
|
-
if (container) {
|
|
162
|
-
container.querySelector('.add-btn')?.addEventListener('click', addUser);
|
|
163
|
-
container.querySelector('.remove-btn')?.addEventListener('click', removeUser);
|
|
164
|
-
}
|
|
165
|
-
}, 0);
|
|
166
|
-
return html\`
|
|
167
|
-
<div id="dynamic-avatar-container" class="flex flex-col gap-6">
|
|
168
|
-
<div class="flex items-center gap-2">
|
|
169
|
-
<button
|
|
170
|
-
class="add-btn btu-button btu-button-success btu-button-md btu-button-fill-none btu-button-outline px-4 py-2"
|
|
171
|
-
type="button"
|
|
172
|
-
>
|
|
173
|
-
Add User
|
|
174
|
-
</button>
|
|
175
|
-
<button
|
|
176
|
-
class="remove-btn btu-button btu-button-error btu-button-md btu-button-fill-none btu-button-outline px-4 py-2"
|
|
177
|
-
type="button"
|
|
178
|
-
>
|
|
179
|
-
Remove User
|
|
180
|
-
</button>
|
|
181
|
-
<span class="user-count text-xs text-gray-600 dark:text-gray-400">3 users</span>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<div class="flex flex-col gap-6">
|
|
185
|
-
<div>
|
|
186
|
-
<div class="mb-2 text-xs text-gray-600">With max="5"</div>
|
|
187
|
-
<btu-avatar-group max="5" size="md">
|
|
188
|
-
\${AVATAR_USERS.slice(0, 3).map(user => html\`<btu-avatar
|
|
189
|
-
src="\${user.image || ''}"
|
|
190
|
-
fallback="\${user.initials}"
|
|
191
|
-
alt="\${user.name}"
|
|
192
|
-
tooltip="\${user.name}"
|
|
193
|
-
style=\${styleMap({
|
|
194
|
-
'--avatar-bg-color': user.color
|
|
195
|
-
})}
|
|
196
|
-
></btu-avatar>\`)}
|
|
197
|
-
</btu-avatar-group>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<div>
|
|
201
|
-
<div class="mb-2 text-xs text-gray-600">Without max limit</div>
|
|
202
|
-
<btu-avatar-group size="md">
|
|
203
|
-
\${AVATAR_USERS.slice(0, 3).map(user => html\`<btu-avatar
|
|
204
|
-
src="\${user.image || ''}"
|
|
205
|
-
fallback="\${user.initials}"
|
|
206
|
-
alt="\${user.name}"
|
|
207
|
-
tooltip="\${user.name}"
|
|
208
|
-
style=\${styleMap({
|
|
209
|
-
'--avatar-bg-color': user.color
|
|
210
|
-
})}
|
|
211
|
-
></btu-avatar>\`)}
|
|
212
|
-
</btu-avatar-group>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
\`;
|
|
217
|
-
},
|
|
218
|
-
parameters: {
|
|
219
|
-
docs: {
|
|
220
|
-
description: {
|
|
221
|
-
story: 'Add or remove users dynamically to see how the overflow logic works. The top group has a max of 5 avatars and will show a "+N" indicator when exceeded. The bottom group has no limit. Each avatar gets a consistent color based on its initials using a hash function.'
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
}`,...d.parameters?.docs?.source}}};const C=["Default","WithMaxLimit","DynamicAvatars"];export{f as Default,d as DynamicAvatars,p as WithMaxLimit,C as __namedExportsOrder,X as default};
|