[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
fix chatbubble
+13
-9
+1
-1
package.json
+1
-1
package.json
+1
-1
src/docs/cards/base/CardChatBubble.svelte
+1
-1
src/docs/cards/base/CardChatBubble.svelte
+7
-3
src/lib/components/base/chat-bubble/ChatBubble.svelte
+7
-3
src/lib/components/base/chat-bubble/ChatBubble.svelte
···
61
61
let {
62
62
ref = $bindable(null),
63
63
class: className,
64
-
variant = 'primary',
64
+
variant,
65
65
size = 'md',
66
66
children,
67
67
side = 'left',
···
71
71
size?: BadgeSize;
72
72
side?: 'left' | 'right';
73
73
} = $props();
74
+
75
+
if (variant === undefined) {
76
+
variant = side === 'right' ? 'primary' : 'secondary';
77
+
}
74
78
</script>
75
79
76
80
<div class="flex">
77
-
{#if side === 'left'}
81
+
{#if side === 'right'}
78
82
<div class="grow"></div>
79
83
{/if}
80
84
···
86
90
{@render children?.()}
87
91
</span>
88
92
89
-
{#if side === 'right'}
93
+
{#if side === 'left'}
90
94
<div class="grow"></div>
91
95
{/if}
92
96
</div>
+1
-1
src/routes/(main)/components/base/chat-bubble/ChatBubble.md
+1
-1
src/routes/(main)/components/base/chat-bubble/ChatBubble.md
+3
-3
src/routes/(main)/components/base/chat-bubble/Example.svelte
+3
-3
src/routes/(main)/components/base/chat-bubble/Example.svelte
···
6
6
7
7
8
8
<Box class="flex flex-col gap-3 not-prose">
9
-
<ChatBubble side="right" variant="secondary">
9
+
<ChatBubble side="right">
10
10
<p>Hello there</p>
11
11
</ChatBubble>
12
12
···
14
14
<p>General Kenobi</p>
15
15
</ChatBubble>
16
16
17
-
<ChatBubble side="right" variant="secondary">
17
+
<ChatBubble side="right">
18
18
<p>This is a really long message that should wrap around the chat bubble and not overflow</p>
19
19
</ChatBubble>
20
20
<ChatBubble>
···
23
23
</p>
24
24
</ChatBubble>
25
25
26
-
<ChatBubble side="right" variant="secondary">
26
+
<ChatBubble side="right">
27
27
<p>This is me sending you an image</p>
28
28
29
29
<ImageContainer src={cute} alt="cute cat" containerClasses="-mx-1.5 rounded-xl" />