(feat) add named slots for customization

Author: aubrydario

src/ChatWindow/ChatWindow.vue

@@ -15,8 +15,8 @@
 				@fetchRoom="fetchRoom"
 				@addRoom="addRoom"
 			>
-				<template v-slot:rooms-header>
-					<slot name="rooms-header"></slot>
+				<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
+					<slot :name="name" v-bind="data"></slot>
 				</template>
 			</rooms-list>
 
@@ -52,6 +52,9 @@
 				@sendMessageReaction="sendMessageReaction"
 				@typingMessage="typingMessage"
 			>
+				<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
+					<slot :name="name" v-bind="data"></slot>
+				</template>
 			</room>
 		</div>
 	</div>

src/ChatWindow/EmojiPicker.vue

@@ -9,7 +9,9 @@
 				@click.stop="clickEvent"
 				@click="openEmoji"
 			>
-				<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
+				<slot name="emoji-picker-icon">
+					<svg-icon name="emoji" :param="emojiReaction ? 'reaction' : ''" />
+				</slot>
 			</div>
 			<div
 				slot="emoji-picker"

src/ChatWindow/FormatMessage.vue

@@ -19,10 +19,12 @@
 					}"
 					:href="message.href"
 					target="_blank"
-					><svg-icon v-if="deleted" name="deleted" class="icon-deleted" />{{
-						message.value
-					}}</component
 				>
+					<slot name="deleted-icon" v-bind="{ deleted }">
+						<svg-icon v-if="deleted" name="deleted" class="icon-deleted" />{{
+						message.value
+					}}</slot>
+				</component>
 			</template>
 		</div>
 		<div v-else>{{ content }}</div>