Skip to content

Commit d9a5b3a

Browse files
antoine92190antoine92190
authored
Merge pull request #48 from aubrydario/customisation
#44 Customisation: named slots
2 parents eaed24a + db27a8c commit d9a5b3a

File tree

7 files changed

+394
-287
lines changed

7 files changed

+394
-287
lines changed

‎README.md

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -528,9 +528,35 @@ messageActionHandler({ roomId, action, message }) {
528528

529529
## Named Slots
530530

531-
| Slot | Action |
532-
| ------------ | ---------------------------------------------------------- |
533-
| rooms-header | Add a template on top of rooms list (above the search bar) |
531+
| Slot | Action | Data | Overridden slots |
532+
|----------------------------|-------------------------------------------------------------|-------------------------------|------------------------------------------------------------------------------------------------------|
533+
| rooms-header | Add a template on top of rooms list (above the search bar) | - | - |
534+
| room-list-item | Replace the template of the room list items | rooms | - |
535+
| room-header | Replace the template of the room header | room, typingUsers, userStatus | room-options, menu-icon, toggle-icon |
536+
| room-options | Replace the template of the room options | - | menu-icon |
537+
| message | Replace the template of the message box | message | deleted-icon, eye-icon, document-icon, pencil-icon, checkmark-icon, dropdown-icon, emoji-picker-icon |
538+
| messages-empty | Replace the empty message template | - | - |
539+
| rooms-empty | Replace the empty room template | - | - |
540+
| menu-icon | Replace the room menu icon | - | - |
541+
| toggle-icon | Replace the toggle room list icon | - | - |
542+
| scroll-icon | Replace the scroll to newest message icon | - | - |
543+
| reply-close-icon | Replace the reply close icon | - | - |
544+
| image-close-icon | Replace the image close icon | - | - |
545+
| file-icon | Replace the file icon | - | - |
546+
| file-close-icon | Replace the file close icon | - | - |
547+
| edit-close-icon | Replace the edit close icon | - | - |
548+
| emoji-picker-icon | Replace the emoji picker icon | - | - |
549+
| emoji-picker-reaction-icon | Replace the emoji picker reaction icon (in the message box) | - | - |
550+
| paperclip-icon | Replace the paperclip icon | - | - |
551+
| send-icon | Replace the message send icon | - | - |
552+
| eye-icon | Replace the eye icon (image message) | - | - |
553+
| document-icon | Replace the document icon | - | - |
554+
| pencil-icon | Replace the pencil icon | - | - |
555+
| checkmark-icon | Replace the checkmark icon | message | - |
556+
| deleted-icon | Replace the deleted icon | deleted | - |
557+
| dropdown-icon | Replace the dropdown icon | - | - |
558+
| search-icon | Replace the search icon | - | - |
559+
| add-icon | Replace the add room icon | - | - |
534560

535561
## Using with Firestore
536562

‎src/ChatWindow/ChatWindow.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
@fetchRoom="fetchRoom"
1616
@addRoom="addRoom"
1717
>
18-
<template v-slot:rooms-header>
19-
<slot name="rooms-header"></slot>
18+
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
19+
<slot :name="name" v-bind="data"></slot>
2020
</template>
2121
</rooms-list>
2222

@@ -52,6 +52,9 @@
5252
@sendMessageReaction="sendMessageReaction"
5353
@typingMessage="typingMessage"
5454
>
55+
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
56+
<slot :name="name" v-bind="data"></slot>
57+
</template>
5558
</room>
5659
</div>
5760
</div>

‎src/ChatWindow/EmojiPicker.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@
99
@click.stop="clickEvent"
1010
@click="openEmoji"
1111
>
12-
<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
12+
<slot name="emoji-picker-icon">
13+
<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
14+
</slot>
1315
</div>
1416
<div
1517
slot="emoji-picker"

‎src/ChatWindow/FormatMessage.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,12 @@
1919
}"
2020
:href="message.href"
2121
target="_blank"
22-
><svg-icon v-if="deleted" name="deleted" class="icon-deleted" />{{
23-
message.value
24-
}}</component
2522
>
23+
<slot name="deleted-icon" v-bind="{ deleted }">
24+
<svg-icon v-if="deleted" name="deleted" class="icon-deleted" />{{
25+
message.value
26+
}}</slot>
27+
</component>
2628
</template>
2729
</div>
2830
<div v-else>{{ content }}</div>

0 commit comments

Comments
 (0)