Merge branch 'master' into feat/preview-images

Author: liweicheng00

README.md

@@ -244,9 +244,10 @@ fetchMessages({ room, options }) {
 | `textarea-action-enabled`(18)       | Boolean          | -        | `false`                                            |
 | `responsive-breakpoint`(19)         | Number           | -        | `900`                                              |
 | `single-room`(20)                   | Boolean          | -        | `false`                                            |
-| `theme`(21)                         | Sring            | -        | `light`                                            |
-| `accepted-files`(22)                | String           | -        | `*`                                                |
-| `styles`(23)                        | Object           | -        | (23)                                               |
+| `scroll-distance`(21)               | Number           | -        | `60`                                               |
+| `theme`(22)                         | Sring            | -        | `light`                                            |
+| `accepted-files`(23)                | String           | -        | `*`                                                |
+| `styles`(24)                        | Object           | -        | (23)                                               |
 
 **(1)** `current-user-id` is required to display UI and trigger actions according to the user using the chat (ex: messages position on the right, etc.)
 
@@ -414,13 +415,15 @@ You can then use the [textarea-action-handler](#events-api) event to call your o
 
 **(20)** `single-room` can be used if you never want to show the rooms list on the left. You still need to pass the `rooms` prop as an array with a single element.
 
-**(21)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+**(21)** `scroll-distance` can be used to change the number of pixels before `fetchMessages` event is triggered when scrolling up to load more messages, or `fetchMoreRooms` event is triggered when scrolling down to load more rooms.
 
-**(22)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
+**(22)** `theme` can be used to change the chat theme. Currently, only `light` and `dark` are available.
+
+**(23)** `accepted-files` can be used to set specifics file types allowed in chat. By default, all file types are allowed: `"*"`.
 
 Example: set `"accepted-files="image/png, image/jpeg, application/pdf"` to allow `JPG` `PNG` and `PDF` files only
 
-**(23)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
+**(24)** `styles` can be used to customize your own theme. You can find the full list [here](src/themes/index.js)
 
 ```javascript
 styles="{
@@ -678,8 +681,8 @@ Example:
 ```
 
 | <div style="width:230px">Slot</div> | Action                                                      | Data                                | Overridden slots                                                                                                   |
-| ----------------------------------- | ----------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `custom-action-icon`                | Add a custom icon inside the footer                         | -                                   | -                                                                                                                  |  | `rooms-header` | Add a template on top of rooms list (above the search bar) | - | - |
+| ----------------------------------- | ----------------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ | --- | -------------- | ---------------------------------------------------------- | --- | --- |
+| `custom-action-icon`                | Add a custom icon inside the footer                         | -                                   | -                                                                                                                  |     | `rooms-header` | Add a template on top of rooms list (above the search bar) | -   | -   |
 | `room-list-item`                    | Replace the template of the room list items                 | `room`                              | `room-list-avatar`, `room-list-options`                                                                            |
 | `room-list-avatar`                  | Replace the avatar of room list items                       | `room`                              |                                                                                                                    |
 | `room-list-options`                 | Replace the template of the list room options               | `room`                              | `room-list-options-icon`                                                                                           |

package.json

@@ -74,7 +74,7 @@
 		"vue": "^2.6.14"
 	},
 	"dependencies": {
-		"emoji-picker-element": "^1.8.1",
+		"emoji-picker-element": "^1.8.2",
 		"linkifyjs": "^2.1.9",
 		"v-click-outside": "^3.1.2"
 	},

src/components/EmojiPickerContainer/EmojiPickerContainer.scss

@@ -20,6 +20,11 @@
 		background: var(--chat-emoji-bg-color);
 		box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.1),
 			0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 2px 1px rgba(0, 0, 0, 0.1);
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
 
 		&.vac-picker-reaction {
 			position: fixed;

src/lib/ChatWindow.vue

@@ -16,6 +16,7 @@
 				:text-formatting="textFormatting"
 				:link-options="linkOptions"
 				:is-mobile="isMobile"
+				:scroll-distance="scrollDistance"
 				@fetch-room="fetchRoom"
 				@fetch-more-rooms="fetchMoreRooms"
 				@loading-more-rooms="loadingMoreRooms = $event"
@@ -55,6 +56,7 @@
 				:loading-rooms="loadingRooms"
 				:room-info-enabled="roomInfoEnabled"
 				:textarea-action-enabled="textareaActionEnabled"
+				:scroll-distance="scrollDistance"
 				:accepted-files="acceptedFiles"
 				:templates-text="templatesText"
         :media-modal-preview="mediaModalPreview"
@@ -144,6 +146,7 @@ export default {
 		roomInfoEnabled: { type: Boolean, default: false },
 		textareaActionEnabled: { type: Boolean, default: false },
 		roomMessage: { type: String, default: '' },
+		scrollDistance: { type: Number, default: 60 },
 		acceptedFiles: { type: String, default: '*' },
 		templatesText: { type: Array, default: null },
     mediaModalPreview: { type: Boolean, default: true }

src/lib/Room/Room.vue

@@ -278,7 +278,7 @@
 						v-if="showFiles"
 						ref="file"
 						type="file"
-            multiple
+						multiple
 						:accept="acceptedFiles"
 						style="display: none"
 						@change="onFileChange($event.target.files)"
@@ -325,7 +325,7 @@ const { detectMobile } = require('../../utils/mobile-detection')
 
 const debounce = (func, delay) => {
 	let inDebounce
-	return function() {
+	return function () {
 		const context = this
 		const args = arguments
 		clearTimeout(inDebounce)
@@ -382,6 +382,7 @@ export default {
 		loadingRooms: { type: Boolean, required: true },
 		roomInfoEnabled: { type: Boolean, required: true },
 		textareaActionEnabled: { type: Boolean, required: true },
+		scrollDistance: { type: Number, required: true },
 		templatesText: { type: Array, default: null },
     mediaModalPreview: { type: Boolean, default: true }
 	},
@@ -601,7 +602,7 @@ export default {
 			if (loader) {
 				const options = {
 					root: document.getElementById('messages-list'),
-					rootMargin: '60px',
+					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}
 
@@ -1089,7 +1090,7 @@ export default {
 				setTimeout(() => element.classList.remove('vac-scroll-smooth'))
 			}, 50)
 		},
-		onChangeInput: debounce(function(e) {
+		onChangeInput: debounce(function (e) {
 			if (e?.target?.value || e?.target?.value === '') {
 				this.message = e.target.value
 			}

src/lib/RoomsList/RoomsList.vue

@@ -99,7 +99,8 @@ export default {
 		loadingRooms: { type: Boolean, required: true },
 		roomsLoaded: { type: Boolean, required: true },
 		room: { type: Object, required: true },
-		roomActions: { type: Array, required: true }
+		roomActions: { type: Array, required: true },
+		scrollDistance: { type: Number, required: true }
 	},
 
 	emits: [
@@ -169,7 +170,7 @@ export default {
 			if (loader) {
 				const options = {
 					root: document.getElementById('rooms-list'),
-					rootMargin: '60px',
+					rootMargin: `${this.scrollDistance}px`,
 					threshold: 0
 				}