Skip to content

Commit 67cada4

Browse files
committed
(slots) add spinner icon
1 parent b698c70 commit 67cada4

File tree

5 files changed

+29
-6
lines changed

5 files changed

+29
-6
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -692,6 +692,7 @@ Example:
692692
| `no-room-selected` | Replace the no room selected template | - | - |
693693
| `menu-icon` | Replace the room menu icon | - | - |
694694
| `toggle-icon` | Replace the toggle room list icon | - | - |
695+
| `spinner-icon` | Replace the loading spinner icon | `show, infinite` | - |
695696
| `scroll-icon` | Replace the scroll to newest message icon | - | - |
696697
| `reply-close-icon` | Replace the reply close icon | - | - |
697698
| `image-close-icon` | Replace the image close icon | - | - |

src/components/Loader/Loader.vue

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
'vac-container-top': infinite
99
}"
1010
>
11-
<div id="vac-circle" />
11+
<slot name="spinner-icon" v-bind="{ show, infinite }">
12+
<div id="vac-circle" />
13+
</slot>
1214
</div>
1315
</transition>
1416
</template>

src/lib/Message/MessageFile/MessageFile.vue

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@
1111
<loader
1212
:style="{ top: `${imageResponsive.loaderTop}px` }"
1313
:show="isImageLoading"
14-
/>
14+
>
15+
<template v-for="(idx, name) in $scopedSlots" #[name]="data">
16+
<slot :name="name" v-bind="data" />
17+
</template>
18+
</loader>
1519
<div
1620
class="vac-message-image"
1721
:class="{

src/lib/Room/Room.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@
3434
class="vac-container-scroll"
3535
@scroll="onContainerScroll"
3636
>
37-
<loader :show="loadingMessages" />
37+
<loader :show="loadingMessages">
38+
<template v-for="(idx, name) in $scopedSlots" #[name]="data">
39+
<slot :name="name" v-bind="data" />
40+
</template>
41+
</loader>
3842
<div class="vac-messages-container">
3943
<div :class="{ 'vac-messages-hidden': loadingMessages }">
4044
<transition name="vac-fade-message">
@@ -61,7 +65,11 @@
6165
@infinite="loadMoreMessages"
6266
>
6367
<template #spinner>
64-
<loader :show="true" :infinite="true" />
68+
<loader :show="true" :infinite="true">
69+
<template v-for="(idx, name) in $scopedSlots" #[name]="data">
70+
<slot :name="name" v-bind="data" />
71+
</template>
72+
</loader>
6573
</template>
6674
<template #no-results>
6775
<div />

src/lib/RoomsList/RoomsList.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,11 @@
2222
</rooms-search>
2323
</slot>
2424

25-
<loader :show="loadingRooms" />
25+
<loader :show="loadingRooms">
26+
<template v-for="(idx, name) in $scopedSlots" #[name]="data">
27+
<slot :name="name" v-bind="data" />
28+
</template>
29+
</loader>
2630

2731
<div v-if="!loadingRooms && !rooms.length" class="vac-rooms-empty">
2832
<slot name="rooms-empty">
@@ -55,7 +59,11 @@
5559
</div>
5660
<transition name="vac-fade-message">
5761
<div v-if="rooms.length && !loadingRooms" id="infinite-loader-rooms">
58-
<loader :show="showLoader" :infinite="true" />
62+
<loader :show="showLoader" :infinite="true">
63+
<template v-for="(idx, name) in $scopedSlots" #[name]="data">
64+
<slot :name="name" v-bind="data" />
65+
</template>
66+
</loader>
5967
</div>
6068
</transition>
6169
</div>

0 commit comments

Comments
 (0)